UI: improve welcome workflow

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(
+    const loading_toast = toast.loading("Creating Clan....");
-      (async () => {
+    const r = await callApi("create_clan", {
-        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");
+      setClanList((list) => [...list, target_dir[0]]);
-      })(),
+      navigate("/machines");
-      {
-        loading: "Creating clan...",
-        success: "Clan Successfully Created",
-        error: "Failed to create clan",
-      },
-    );
       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">
+                  <TextInput
-                    <div class="label ">
+                    adornment={{
-                      <span class="label-text  after:ml-0.5 after:text-primary after:content-['*']">
+                      content: (
-                        Template to use
+                        <span class="-mr-1 text-neutral-500">clan-core #</span>
-                      </span>
+                      ),
-                    </div>
+                      position: "start",
-                    <input
+                    }}
-                      {...props}
+                    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/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>