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">
-            <h2
-              class="card-title"
-              classList={{
-                "text-neutral-500": nixOnly,
-              }}
-            >
-              {name}
-            </h2>
+            <A href={`/machines/${name}`}>
+              <h2
+                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,29 +41,31 @@ export const ClanForm = () => {
       return;
     }
 
-    await toast.promise(
-      (async () => {
-        await callApi("create_clan", {
-          options: {
-            directory: target_dir[0],
-            template,
-            initial: {
-              meta,
-              services: {},
-              machines: {},
-            },
-          },
-        });
-        setActiveURI(target_dir[0]);
-        // setRoute("machines");
-      })(),
-      {
-        loading: "Creating clan...",
-        success: "Clan Successfully Created",
-        error: "Failed to create clan",
+    const loading_toast = toast.loading("Creating Clan....");
+    const r = await callApi("create_clan", {
+      options: {
+        directory: target_dir[0],
+        template,
+        initial: {
+          meta,
+          services: {},
+          machines: {},
+        },
       },
-    );
-    reset(formStore);
+    });
+    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]);
+      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}
-                      required
-                      disabled={formStore.submitting}
-                      type="text"
-                      placeholder="Template to use"
-                      class="input input-bordered"
-                      classList={{ "input-error": !!field.error }}
-                      value={field.value}
-                    />
-                  </label>
+                  <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
+                  />
                 </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,159 +421,163 @@ const MachineForm = (props: MachineDetailsProps) => {
     }
   };
   return (
-    <div class="m-2 w-full max-w-xl">
-      <Form onSubmit={handleSubmit}>
-        <div class="flex w-full justify-center p-2">
-          <div
-            class="avatar placeholder"
-            classList={{
-              online: onlineStatusQuery.data === "Online",
-              offline: onlineStatusQuery.data === "Offline",
-            }}
-          >
-            <div class="w-24 rounded-full bg-neutral text-neutral-content">
-              <Show
-                when={onlineStatusQuery.isFetching}
-                fallback={<span class="material-icons text-4xl">devices</span>}
-              >
-                <span class="loading loading-bars loading-sm justify-self-end"></span>
-              </Show>
+    <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">
+            <div
+              class="avatar placeholder"
+              classList={{
+                online: onlineStatusQuery.data === "Online",
+                offline: onlineStatusQuery.data === "Offline",
+              }}
+            >
+              <div class="w-24 rounded-full bg-neutral text-neutral-content">
+                <Show
+                  when={onlineStatusQuery.isFetching}
+                  fallback={
+                    <span class="material-icons text-4xl">devices</span>
+                  }
+                >
+                  <span class="loading loading-bars loading-sm justify-self-end"></span>
+                </Show>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="my-2 w-full text-2xl">Details</div>
-        <Field name="name">
-          {(field, props) => (
-            <TextInput
-              formStore={formStore}
-              inputProps={props}
-              label="Name"
-              value={field.value ?? ""}
-              error={field.error}
-              class="col-span-2"
-              required
-            />
-          )}
-        </Field>
-        <Field name="description">
-          {(field, props) => (
-            <TextInput
-              formStore={formStore}
-              inputProps={props}
-              label="Description"
-              value={field.value ?? ""}
-              error={field.error}
-              class="col-span-2"
-              required
-            />
-          )}
-        </Field>
+          <div class="my-2 w-full text-2xl">Details</div>
+          <Field name="name">
+            {(field, props) => (
+              <TextInput
+                formStore={formStore}
+                inputProps={props}
+                label="Name"
+                value={field.value ?? ""}
+                error={field.error}
+                class="col-span-2"
+                required
+              />
+            )}
+          </Field>
+          <Field name="description">
+            {(field, props) => (
+              <TextInput
+                formStore={formStore}
+                inputProps={props}
+                label="Description"
+                value={field.value ?? ""}
+                error={field.error}
+                class="col-span-2"
+                required
+              />
+            )}
+          </Field>
 
-        <div class="collapse collapse-arrow" tabindex="0">
-          <input type="checkbox" />
-          <div class="collapse-title link px-0 text-xl ">
-            Connection Settings
-          </div>
-          <div class="collapse-content">
-            <Field name="targetHost">
-              {(field, props) => (
-                <TextInput
-                  formStore={formStore}
-                  inputProps={props}
-                  label="Target Host"
-                  value={field.value ?? ""}
-                  error={field.error}
-                  class="col-span-2"
-                  required
-                />
-              )}
-            </Field>
-            <Field name="sshKey" type="File">
-              {(field, props) => (
-                <>
-                  <FileInput
-                    {...props}
-                    onClick={async (event) => {
-                      event.preventDefault(); // Prevent the native file dialog from opening
-                      const input = event.target;
-                      const files = await selectSshKeys();
-
-                      // Set the files
-                      Object.defineProperty(input, "files", {
-                        value: files,
-                        writable: true,
-                      });
-                      // Define the files property on the input element
-                      const changeEvent = new Event("input", {
-                        bubbles: true,
-                        cancelable: true,
-                      });
-                      input.dispatchEvent(changeEvent);
-                    }}
-                    placeholder={"When empty the default key(s) will be used"}
-                    value={field.value}
+          <div class="collapse collapse-arrow" tabindex="0">
+            <input type="checkbox" />
+            <div class="collapse-title link px-0 text-xl ">
+              Connection Settings
+            </div>
+            <div class="collapse-content">
+              <Field name="targetHost">
+                {(field, props) => (
+                  <TextInput
+                    formStore={formStore}
+                    inputProps={props}
+                    label="Target Host"
+                    value={field.value ?? ""}
                     error={field.error}
-                    helperText="Provide the SSH key used to connect to the machine"
-                    label="SSH Key"
+                    class="col-span-2"
+                    required
                   />
-                </>
-              )}
-            </Field>
+                )}
+              </Field>
+              <Field name="sshKey" type="File">
+                {(field, props) => (
+                  <>
+                    <FileInput
+                      {...props}
+                      onClick={async (event) => {
+                        event.preventDefault(); // Prevent the native file dialog from opening
+                        const input = event.target;
+                        const files = await selectSshKeys();
+
+                        // Set the files
+                        Object.defineProperty(input, "files", {
+                          value: files,
+                          writable: true,
+                        });
+                        // Define the files property on the input element
+                        const changeEvent = new Event("input", {
+                          bubbles: true,
+                          cancelable: true,
+                        });
+                        input.dispatchEvent(changeEvent);
+                      }}
+                      placeholder={"When empty the default key(s) will be used"}
+                      value={field.value}
+                      error={field.error}
+                      helperText="Provide the SSH key used to connect to the machine"
+                      label="SSH Key"
+                    />
+                  </>
+                )}
+              </Field>
+            </div>
           </div>
-        </div>
 
-        <div class="my-2 w-full">
-          <button
-            class="btn btn-primary btn-wide"
-            type="submit"
-            disabled={!formStore.dirty}
-          >
-            Save
-          </button>
-        </div>
-      </Form>
-      <div class="my-2 w-full text-2xl">Remote Interactions</div>
-      <div class="my-2 flex w-full flex-col gap-2">
-        <span class="max-w-md text-neutral">
-          Installs the system for the first time. Used to bootstrap the remote
-          device.
-        </span>
-        <div class="tooltip w-fit" data-tip="Machine must be online">
-          <button
-            class="btn btn-primary btn-sm btn-wide"
-            disabled={!online()}
-            // @ts-expect-error: This string method is not supported by ts
-            onClick="install_modal.showModal()"
-          >
-            <span class="material-icons">send_to_mobile</span>
-            Install
-          </button>
-        </div>
-
-        <dialog id="install_modal" class="modal backdrop:bg-transparent">
-          <div class="modal-box w-11/12 max-w-5xl">
-            <InstallMachine
-              name={machineName()}
-              sshKey={sshKey()}
-              targetHost={getValue(formStore, "targetHost")}
-              disks={remoteDiskQuery.data?.blockdevices || []}
-            />
+          <div class="my-2 w-full">
+            <button
+              class="btn btn-primary btn-wide"
+              type="submit"
+              disabled={!formStore.dirty}
+            >
+              Save
+            </button>
+          </div>
+        </Form>
+        <div class="my-2 w-full text-2xl">Remote Interactions</div>
+        <div class="my-2 flex w-full flex-col gap-2">
+          <span class="max-w-md text-neutral">
+            Installs the system for the first time. Used to bootstrap the remote
+            device.
+          </span>
+          <div class="tooltip w-fit" data-tip="Machine must be online">
+            <button
+              class="btn btn-primary btn-sm btn-wide"
+              disabled={!online()}
+              // @ts-expect-error: This string method is not supported by ts
+              onClick="install_modal.showModal()"
+            >
+              <span class="material-icons">send_to_mobile</span>
+              Install
+            </button>
           </div>
-        </dialog>
 
-        <span class="max-w-md text-neutral">
-          Update the system if changes should be synced after the installation
-          process.
-        </span>
-        <div class="tooltip w-fit" data-tip="Machine must be online">
-          <button
-            class="btn btn-primary btn-sm btn-wide"
-            disabled={!online()}
-            onClick={() => handleUpdate()}
-          >
-            <span class="material-icons">update</span>
-            Update
-          </button>
+          <dialog id="install_modal" class="modal backdrop:bg-transparent">
+            <div class="modal-box w-11/12 max-w-5xl">
+              <InstallMachine
+                name={machineName()}
+                sshKey={sshKey()}
+                targetHost={getValue(formStore, "targetHost")}
+                disks={remoteDiskQuery.data?.blockdevices || []}
+              />
+            </div>
+          </dialog>
+
+          <span class="max-w-md text-neutral">
+            Update the system if changes should be synced after the installation
+            process.
+          </span>
+          <div class="tooltip w-fit" data-tip="Machine must be online">
+            <button
+              class="btn btn-primary btn-sm btn-wide"
+              disabled={!online()}
+              onClick={() => handleUpdate()}
+            >
+              <span class="material-icons">update</span>
+              Update
+            </button>
+          </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,68 +59,73 @@ export function CreateMachine() {
     }
   };
   return (
-    <div class="px-1">
-      <span class="px-2">Create new Machine</span>
-      <Form onSubmit={handleSubmit}>
-        <Field
-          name="machine.name"
-          validate={[required("This field is required")]}
-        >
-          {(field, props) => (
-            <TextInput
-              inputProps={props}
-              formStore={formStore}
-              value={`${field.value}`}
-              label={"name"}
-              error={field.error}
-              required
-            />
-          )}
-        </Field>
-        <Field name="machine.description">
-          {(field, props) => (
-            <TextInput
-              inputProps={props}
-              formStore={formStore}
-              value={`${field.value}`}
-              label={"description"}
-              error={field.error}
-            />
-          )}
-        </Field>
-        <Field name="machine.deploy.targetHost">
-          {(field, props) => (
-            <>
+    <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
+            name="machine.name"
+            validate={[required("This field is required")]}
+          >
+            {(field, props) => (
               <TextInput
                 inputProps={props}
                 formStore={formStore}
                 value={`${field.value}`}
-                label={"Deployment target"}
+                label={"name"}
+                error={field.error}
+                required
+              />
+            )}
+          </Field>
+          <Field name="machine.description">
+            {(field, props) => (
+              <TextInput
+                inputProps={props}
+                formStore={formStore}
+                value={`${field.value}`}
+                label={"description"}
                 error={field.error}
               />
-            </>
-          )}
-        </Field>
-        <button
-          class="btn btn-error float-right"
-          type="submit"
-          classList={{
-            "btn-disabled": formStore.submitting,
-          }}
-        >
-          <Switch
-            fallback={
+            )}
+          </Field>
+          <Field name="machine.deploy.targetHost">
+            {(field, props) => (
               <>
-                <span class="loading loading-spinner loading-sm"></span>Creating
+                <TextInput
+                  inputProps={props}
+                  formStore={formStore}
+                  value={`${field.value}`}
+                  label={"Deployment target"}
+                  error={field.error}
+                />
               </>
-            }
-          >
-            <Match when={!formStore.submitting}>
-              <span class="material-icons">add</span>Create
-            </Match>
-          </Switch>
-        </button>
-      </Form>
+            )}
+          </Field>
+          <div class="mt-12 flex justify-end">
+            <button
+              class="btn btn-primary"
+              type="submit"
+              classList={{
+                "btn-disabled": formStore.submitting,
+              }}
+            >
+              <Switch
+                fallback={
+                  <>
+                    <span class="loading loading-spinner loading-sm"></span>
+                    Creating
+                  </>
+                }
+              >
+                <Match when={!formStore.submitting}>
+                  <span class="material-icons">add</span>Create
+                </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>