Merge pull request 'UI: improve welcome workflows' (#1975) from hsjobeki/clan-core:hsjobeki-main into main

pkgs/webview-ui/app/src/components/BackButton.tsx

@@ -0,0 +1,10 @@
+import { useNavigate } from "@solidjs/router";
+
+export const BackButton = () => {
+  const navigate = useNavigate();
+  return (
+    <button class="btn btn-square btn-ghost" onClick={() => navigate(-1)}>
+      <span class="material-icons ">arrow_back_ios</span>
+    </button>
+  );
+};

pkgs/webview-ui/app/src/components/MachineListItem.tsx

@@ -3,7 +3,7 @@ import { callApi, SuccessData } from "../api";
 import { Menu } from "./Menu";
 import { activeURI } from "../App";
 import toast from "solid-toast";
-import { useNavigate } from "@solidjs/router";
+import { A, useNavigate } from "@solidjs/router";
 
 type MachineDetails = SuccessData<"list_inventory_machines">["data"][string];
 
@@ -116,14 +116,16 @@ export const MachineListItem = (props: MachineListItemProps) => {
         </figure>
         <div class="card-body flex-row justify-between ">
           <div class="flex flex-col">
+            <A href={`/machines/${name}`}>
               <h2
-              class="card-title"
+                class="card-title underline"
                 classList={{
                   "text-neutral-500": nixOnly,
                 }}
               >
                 {name}
               </h2>
+            </A>
             <div class="text-slate-600">
               <Show when={info}>{(d) => d()?.description}</Show>
             </div>

pkgs/webview-ui/app/src/routes/clan/clanDetails.tsx

@@ -7,7 +7,9 @@ import {
   SubmitHandler,
 } from "@modular-forms/solid";
 import toast from "solid-toast";
-import { setActiveURI } from "@/src/App";
+import { setActiveURI, setClanList } from "@/src/App";
+import { TextInput } from "@/src/components/TextInput";
+import { useNavigate } from "@solidjs/router";
 
 type CreateForm = Meta & {
   template: string;
@@ -21,10 +23,10 @@ export const ClanForm = () => {
       template: "minimal",
     },
   });
+  const navigate = useNavigate();
 
   const handleSubmit: SubmitHandler<CreateForm> = async (values, event) => {
     const { template, ...meta } = values;
-
     const response = await callApi("open_file", {
       file_request: { mode: "save" },
     });
@@ -39,9 +41,8 @@ export const ClanForm = () => {
       return;
     }
 
-    await toast.promise(
-      (async () => {
-        await callApi("create_clan", {
+    const loading_toast = toast.loading("Creating Clan....");
+    const r = await callApi("create_clan", {
       options: {
         directory: target_dir[0],
         template,
@@ -52,16 +53,19 @@ export const ClanForm = () => {
         },
       },
     });
+    toast.dismiss(loading_toast);
+
+    if (r.status === "error") {
+      toast.error("Failed to create clan");
+      return;
+    }
+    if (r.status === "success") {
+      toast.success("Clan Successfully Created");
       setActiveURI(target_dir[0]);
-        // setRoute("machines");
-      })(),
-      {
-        loading: "Creating clan...",
-        success: "Clan Successfully Created",
-        error: "Failed to create clan",
-      },
-    );
+      setClanList((list) => [...list, target_dir[0]]);
+      navigate("/machines");
       reset(formStore);
+    }
   };
 
   return (
@@ -108,7 +112,7 @@ export const ClanForm = () => {
                   {...props}
                   disabled={formStore.submitting}
                   required
-                  placeholder="Clan Name"
+                  placeholder="Give your Clan a legendary name"
                   class="input input-bordered"
                   classList={{ "input-error": !!field.error }}
                   value={field.value}
@@ -133,7 +137,7 @@ export const ClanForm = () => {
                   disabled={formStore.submitting}
                   required
                   type="text"
-                  placeholder="Some words about your clan"
+                  placeholder="Tell us what makes your Clan legendary"
                   class="input input-bordered"
                   classList={{ "input-error": !!field.error }}
                   value={field.value || ""}
@@ -152,23 +156,20 @@ export const ClanForm = () => {
                 <input type="checkbox" />
                 <div class="collapse-title link font-medium ">Advanced</div>
                 <div class="collapse-content">
-                  <label class="form-control w-full">
-                    <div class="label ">
-                      <span class="label-text  after:ml-0.5 after:text-primary after:content-['*']">
-                        Template to use
-                      </span>
-                    </div>
-                    <input
-                      {...props}
+                  <TextInput
+                    adornment={{
+                      content: (
+                        <span class="-mr-1 text-neutral-500">clan-core #</span>
+                      ),
+                      position: "start",
+                    }}
+                    formStore={formStore}
+                    inputProps={props}
+                    label="Template to use"
+                    value={field.value ?? ""}
+                    error={field.error}
                     required
-                      disabled={formStore.submitting}
-                      type="text"
-                      placeholder="Template to use"
-                      class="input input-bordered"
-                      classList={{ "input-error": !!field.error }}
-                      value={field.value}
                   />
-                  </label>
                 </div>
               </div>
             )}

pkgs/webview-ui/app/src/routes/machines/[name]/view.tsx

@@ -1,5 +1,6 @@
 import { callApi, SuccessData } from "@/src/api";
 import { activeURI } from "@/src/App";
+import { BackButton } from "@/src/components/BackButton";
 import { FileInput } from "@/src/components/FileInput";
 import { SelectInput } from "@/src/components/SelectInput";
 import { TextInput } from "@/src/components/TextInput";
@@ -420,6 +421,7 @@ const MachineForm = (props: MachineDetailsProps) => {
     }
   };
   return (
+    <div class="flex w-full justify-center">
       <div class="m-2 w-full max-w-xl">
         <Form onSubmit={handleSubmit}>
           <div class="flex w-full justify-center p-2">
@@ -433,7 +435,9 @@ const MachineForm = (props: MachineDetailsProps) => {
               <div class="w-24 rounded-full bg-neutral text-neutral-content">
                 <Show
                   when={onlineStatusQuery.isFetching}
-                fallback={<span class="material-icons text-4xl">devices</span>}
+                  fallback={
+                    <span class="material-icons text-4xl">devices</span>
+                  }
                 >
                   <span class="loading loading-bars loading-sm justify-self-end"></span>
                 </Show>
@@ -576,6 +580,7 @@ const MachineForm = (props: MachineDetailsProps) => {
           </div>
         </div>
       </div>
+    </div>
   );
 };
 
@@ -602,7 +607,8 @@ export const MachineDetails = () => {
   }));
 
   return (
-    <>
+    <div class="p-2">
+      <BackButton />
       <Show
         when={query.data}
         fallback={<span class="loading loading-lg"></span>}
@@ -615,6 +621,6 @@ export const MachineDetails = () => {
           }}
         />
       </Show>
-    </>
+    </div>
   );
 };

pkgs/webview-ui/app/src/routes/machines/create.tsx

@@ -59,7 +59,8 @@ export function CreateMachine() {
     }
   };
   return (
-    <div class="px-1">
+    <div class="flex w-full justify-center">
+      <div class="mt-4 w-full max-w-3xl self-stretch px-2">
         <span class="px-2">Create new Machine</span>
         <Form onSubmit={handleSubmit}>
           <Field
@@ -101,8 +102,9 @@ export function CreateMachine() {
               </>
             )}
           </Field>
+          <div class="mt-12 flex justify-end">
             <button
-          class="btn btn-error float-right"
+              class="btn btn-primary"
               type="submit"
               classList={{
                 "btn-disabled": formStore.submitting,
@@ -111,7 +113,8 @@ export function CreateMachine() {
               <Switch
                 fallback={
                   <>
-                <span class="loading loading-spinner loading-sm"></span>Creating
+                    <span class="loading loading-spinner loading-sm"></span>
+                    Creating
                   </>
                 }
               >
@@ -120,7 +123,9 @@ export function CreateMachine() {
                 </Match>
               </Switch>
             </button>
+          </div>
         </Form>
       </div>
+    </div>
   );
 }

pkgs/webview-ui/app/src/routes/machines/view.tsx

@@ -113,7 +113,17 @@ export const MachineListView: Component = () => {
             nixOnlyMachines()?.length === 0
           }
         >
-          No machines found
+          <div class="mt-8 flex w-full flex-col items-center justify-center gap-2">
+            <span class="text-lg text-neutral">
+              No machines defined yet. Click below to define one.
+            </span>
+            <button
+              class="btn btn-square btn-ghost size-28 overflow-hidden p-2"
+              onClick={() => navigate("/machines/create")}
+            >
+              <span class="material-icons text-6xl font-light">add</span>
+            </button>
+          </div>
         </Match>
         <Match when={!inventoryQuery.isLoading}>
           <ul>

pkgs/webview-ui/app/src/routes/welcome/index.tsx

@@ -13,7 +13,7 @@ export const Welcome = () => {
           <div class="flex flex-col items-start gap-2">
             <button
               class="btn btn-primary w-full"
-              // onClick={() => setRoute("createClan")}
+              onClick={() => navigate("/clan/create")}
             >
               Build your own
             </button>
@@ -29,14 +29,6 @@ export const Welcome = () => {
             >
               Or select folder
             </button>
-            <button
-              class="link w-full text-right text-secondary"
-              onClick={async () => {
-                setClanList((c) => [...c, "debug"]);
-              }}
-            >
-              Skip (Debug)
-            </button>
           </div>
         </div>
       </div>