From 9955c0a90b403f6e57beac33c95f8278cf350908 Mon Sep 17 00:00:00 2001
From: zowks <67444066+zowks@users.noreply.github.com>
Date: Fri, 17 Apr 2026 21:56:05 +0000
Subject: [PATCH] refactor(frontend): restructure onboarding flow with new
 components & update navigation to match #62

---
 .../frontend/src/lib/remotes/auth.remote.ts   |  2 +-
 .../src/routes/(form)/setup/+page.svelte      | 56 +++++++++++
 .../routes/(form)/setup/account/+page.svelte  | 69 --------------
 .../src/routes/(form)/setup/bot/+page.svelte  | 89 ------------------
 .../setup/bot/components/Deployment.svelte    | 63 -------------
 .../setup/bot/components/Scaling.svelte       | 40 --------
 .../(form)/setup/components/Account.svelte    | 52 ++++++++++
 .../routes/(form)/setup/components/Bot.svelte | 94 +++++++++++++++++++
 8 files changed, 203 insertions(+), 262 deletions(-)
 create mode 100644 packages/frontend/src/routes/(form)/setup/+page.svelte
 delete mode 100644 packages/frontend/src/routes/(form)/setup/account/+page.svelte
 delete mode 100644 packages/frontend/src/routes/(form)/setup/bot/+page.svelte
 delete mode 100644 packages/frontend/src/routes/(form)/setup/bot/components/Deployment.svelte
 delete mode 100644 packages/frontend/src/routes/(form)/setup/bot/components/Scaling.svelte
 create mode 100644 packages/frontend/src/routes/(form)/setup/components/Account.svelte
 create mode 100644 packages/frontend/src/routes/(form)/setup/components/Bot.svelte

diff --git a/packages/frontend/src/lib/remotes/auth.remote.ts b/packages/frontend/src/lib/remotes/auth.remote.ts
index b5a48dd..8796510 100644
--- a/packages/frontend/src/lib/remotes/auth.remote.ts
+++ b/packages/frontend/src/lib/remotes/auth.remote.ts
@@ -18,7 +18,7 @@ export const register = form(registerSchema, async (data) => {
       const { token } = await response.json();
 
       cookies.set("token", token, { path: "/" });
-      return redirect(303, "/setup/bot");
+      return redirect(303, "/setup#bot");
     }
     case 400:
       return error(400, "Invalid fields");
diff --git a/packages/frontend/src/routes/(form)/setup/+page.svelte b/packages/frontend/src/routes/(form)/setup/+page.svelte
new file mode 100644
index 0000000..3db76d9
--- /dev/null
+++ b/packages/frontend/src/routes/(form)/setup/+page.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import { BotIcon, UserIcon, type Icon } from "@lucide/svelte";
+  import { Steps } from "@skeletonlabs/skeleton-svelte";
+  import type { Component } from "svelte";
+  import Account from "./components/Account.svelte";
+  import Bot from "./components/Bot.svelte";
+
+  type Step = {
+    title: string;
+    icon: typeof Icon;
+    content: Component;
+  };
+
+  const steps: Step[] = [
+    { title: "account", icon: UserIcon, content: Account },
+    { title: "bot", icon: BotIcon, content: Bot },
+  ];
+
+  let step: number = $derived(
+    steps.findLastIndex(
+      ({ title }, index) => title === page.url.hash.slice(1) || index === 0,
+    ),
+  );
+</script>
+
+<Steps {step} count={steps.length}>
+  {@const Icon = steps[step].icon}
+  <div class="flex gap-2 justify-center">
+    <Icon class="flex-2" size={64} />
+    <div class="flex-5">
+      <p class="text-sm font-bold">Welcome aboard</p>
+      <p class="text-xs">Let's set things up in a few clicks.</p>
+    </div>
+  </div>
+
+  <Steps.List>
+    {#each steps as { title, icon }, index}
+      {@const IndicatorIcon = icon}
+      <Steps.Item {index}>
+        <Steps.Indicator>
+          <IndicatorIcon size={16} />
+        </Steps.Indicator>
+        <span class="capitalize">{title}</span>
+        <Steps.Separator />
+      </Steps.Item>
+    {/each}
+  </Steps.List>
+
+  {#each steps as { content }, index}
+    {@const Content = content}
+    <Steps.Content {index} class="*:flex *:flex-col *:gap-4">
+      <Content />
+    </Steps.Content>
+  {/each}
+</Steps>
diff --git a/packages/frontend/src/routes/(form)/setup/account/+page.svelte b/packages/frontend/src/routes/(form)/setup/account/+page.svelte
deleted file mode 100644
index 77ecd83..0000000
--- a/packages/frontend/src/routes/(form)/setup/account/+page.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-import {
-  BotIcon,
-  ChevronRightIcon,
-  EllipsisIcon,
-  PlusIcon,
-  RectangleEllipsisIcon,
-  TextCursorIcon,
-  UserIcon,
-} from "@lucide/svelte";
-import { Steps } from "@skeletonlabs/skeleton-svelte";
-import LabeledInput from "$lib/components/LabeledInput.svelte";
-import { register } from "$lib/remotes/auth.remote";
-import toaster from "$lib/utils/toaster";
-</script>
-
-<form
-  {...register.enhance(({ submit }) =>
-    submit().catch((error) => {
-      toaster.create({
-        type: "error",
-        title: "Error",
-        description: JSON.parse(error).message,
-      });
-    }),
-  )}
->
-  <UserIcon size={64} />
-
-  <Steps count={2}>
-    <Steps.List>
-      <Steps.Item index={0}>
-        <Steps.Trigger>
-          <Steps.Indicator>
-            <PlusIcon size={16} />
-          </Steps.Indicator>
-          <span>Create account</span>
-        </Steps.Trigger>
-        <Steps.Separator />
-      </Steps.Item>
-      <Steps.Item index={1}>
-        <Steps.Indicator>
-          <BotIcon size={16} />
-        </Steps.Indicator>
-        <ChevronRightIcon size={16} />
-      </Steps.Item>
-    </Steps.List>
-  </Steps>
-
-  <LabeledInput
-    label="Username"
-    icon={TextCursorIcon}
-    required
-    {...register.fields.username.as("text")}
-    issues={register.fields.username.issues()}
-  />
-  <LabeledInput
-    label="Password"
-    icon={RectangleEllipsisIcon}
-    required
-    {...register.fields.password.as("password")}
-    issues={register.fields.password.issues()}
-  />
-
-  <button class="btn text-sm preset-filled-primary-500">
-    Create account
-    <ChevronRightIcon />
-  </button>
-</form>
diff --git a/packages/frontend/src/routes/(form)/setup/bot/+page.svelte b/packages/frontend/src/routes/(form)/setup/bot/+page.svelte
deleted file mode 100644
index ddf71ed..0000000
--- a/packages/frontend/src/routes/(form)/setup/bot/+page.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script lang="ts">
-import {
-  BotIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  PackageIcon,
-  ScalingIcon,
-  UserIcon,
-} from "@lucide/svelte";
-import { Steps } from "@skeletonlabs/skeleton-svelte";
-
-import { createBot } from "$lib/remotes/bot.remote";
-import toaster from "$lib/utils/toaster";
-import Deployment from "./components/Deployment.svelte";
-import Scaling from "./components/Scaling.svelte";
-
-let step = $state(0);
-const steps = [
-  { title: "Deployment", icon: PackageIcon, content: Deployment },
-  { title: "Scaling", icon: ScalingIcon, content: Scaling },
-];
-</script>
-
-<form
-  {...createBot.enhance(({ submit }) =>
-    submit().catch((error) => {
-      toaster.create({
-        type: "error",
-        title: "Error",
-        description: JSON.parse(error).message,
-      });
-    }),
-  )}
->
-  <BotIcon size={64} />
-
-  <Steps
-    count={steps.length}
-    onStepChange={(details) => (step = details.step)}
-    class="w-full"
-  >
-    <Steps.List>
-      <Steps.Item index={-1}>
-        <Steps.Indicator>
-          <UserIcon size={16} />
-        </Steps.Indicator>
-        <Steps.Separator />
-      </Steps.Item>
-      {#each steps as item, index}
-        {@const Icon = item.icon}
-        <Steps.Item {index}>
-          <Steps.Trigger>
-            <Steps.Indicator>
-              <Icon size={16} />
-            </Steps.Indicator>
-            <span>{item.title}</span>
-          </Steps.Trigger>
-          {#if index < steps.length - 1}
-            <Steps.Separator />
-          {/if}
-        </Steps.Item>
-      {/each}
-    </Steps.List>
-
-    {#each steps as item, index}
-      {@const Content = item.content}
-      <Steps.Content {index}>
-        <Content />
-      </Steps.Content>
-    {/each}
-
-    <div class="flex items-center gap-2">
-      <Steps.PrevTrigger class="btn-icon preset-tonal">
-        <ChevronLeftIcon />
-      </Steps.PrevTrigger>
-      {#if step != steps.length - 1}
-        <Steps.NextTrigger class="flex-1 btn text-sm preset-tonal">
-          <span>Next</span>
-          <ChevronRightIcon />
-        </Steps.NextTrigger>
-      {:else}
-        <button class="flex-1 btn text-sm preset-filled-primary-500">
-          <span>Submit</span>
-          <ChevronRightIcon />
-        </button>
-      {/if}
-    </div>
-  </Steps>
-</form>
diff --git a/packages/frontend/src/routes/(form)/setup/bot/components/Deployment.svelte b/packages/frontend/src/routes/(form)/setup/bot/components/Deployment.svelte
deleted file mode 100644
index 949bc08..0000000
--- a/packages/frontend/src/routes/(form)/setup/bot/components/Deployment.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-import {
-  BracesIcon,
-  ContainerIcon,
-  RectangleEllipsisIcon,
-  TextCursorIcon,
-} from "@lucide/svelte";
-import { Switch } from "@skeletonlabs/skeleton-svelte";
-import LabeledInput from "$lib/components/LabeledInput.svelte";
-import { createBot } from "$lib/remotes/bot.remote";
-
-let checked: boolean = $state(false);
-
-const { dockerImage, token } = createBot.fields;
-</script>
-
-<div class="flex flex-col gap-4">
-  <LabeledInput
-    label="Container image url"
-    icon={ContainerIcon}
-    placeholder="ghcr.io/image:tag"
-    required
-    {...dockerImage.image.as("text")}
-    issues={dockerImage.image.issues()}
-  />
-
-  <Switch {checked} onCheckedChange={(details) => (checked = details.checked)}>
-    <Switch.Control>
-      <Switch.Thumb />
-    </Switch.Control>
-    <Switch.Label>Registry authentication</Switch.Label>
-    <Switch.HiddenInput />
-  </Switch>
-
-  {#if checked}
-    <div class="flex gap-2">
-      <LabeledInput
-        label="Username"
-        icon={TextCursorIcon}
-        required
-        {...dockerImage.username.as("text")}
-        issues={dockerImage.username.issues()}
-      />
-
-      <LabeledInput
-        label="Password"
-        icon={RectangleEllipsisIcon}
-        required
-        {...dockerImage.password.as("password")}
-        issues={dockerImage.password.issues()}
-      />
-    </div>
-  {/if}
-
-  <LabeledInput
-    label="Bot token"
-    icon={BracesIcon}
-    placeholder="8f0a2f30b4e738362ee19e8e572edb8a"
-    required
-    {...token.as("password")}
-    issues={token.issues()}
-  />
-</div>
diff --git a/packages/frontend/src/routes/(form)/setup/bot/components/Scaling.svelte b/packages/frontend/src/routes/(form)/setup/bot/components/Scaling.svelte
deleted file mode 100644
index 39986cd..0000000
--- a/packages/frontend/src/routes/(form)/setup/bot/components/Scaling.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { BoxesIcon, BoxIcon } from "@lucide/svelte";
-import { Switch } from "@skeletonlabs/skeleton-svelte";
-import LabeledInput from "$lib/components/LabeledInput.svelte";
-import { createBot } from "$lib/remotes/bot.remote";
-
-let checked = $state(false);
-</script>
-
-<div class="flex flex-col gap-4">
-	<Switch {checked} onCheckedChange={(details) => (checked = details.checked)} disabled>
-		<Switch.Control>
-			<Switch.Thumb />
-		</Switch.Control>
-		<Switch.Label>Automatic scaling</Switch.Label>
-		<Switch.HiddenInput />
-	</Switch>
-
-	<div class="flex gap-2">
-    <LabeledInput
-      label="Clusters"
-      icon={BoxesIcon}
-      required
-      min={1}
-      // {...createBot.fields.clusters.as("number")}
-      // issues={createBot.fields.clusters.issues()}
-      disabled
-    />
-
-    <LabeledInput
-      label="Shards"
-      icon={BoxIcon}
-      required
-      min={1}
-      // {...createBot.fields.shards.as("number")}
-      // issues={createBot.fields.shards.issues()}
-      disabled
-    />
-	</div>
-</div>
diff --git a/packages/frontend/src/routes/(form)/setup/components/Account.svelte b/packages/frontend/src/routes/(form)/setup/components/Account.svelte
new file mode 100644
index 0000000..9b25504
--- /dev/null
+++ b/packages/frontend/src/routes/(form)/setup/components/Account.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import LabeledInput from "$lib/components/LabeledInput.svelte";
+  import { register } from "$lib/remotes/auth.remote";
+  import toaster from "$lib/utils/toaster";
+  import {
+    ChevronRightIcon,
+    LoaderCircleIcon,
+    RectangleEllipsisIcon,
+    TextCursorIcon,
+  } from "@lucide/svelte";
+</script>
+
+<form
+  {...register.enhance(async ({ submit, form }) => {
+    await submit()
+      .then(() => form.reset())
+      .catch((error) =>
+        toaster.create({
+          type: "error",
+          title: "Error",
+          description: JSON.parse(error).message,
+        }),
+      );
+  })}
+>
+  <LabeledInput
+    label="Username"
+    icon={TextCursorIcon}
+    required
+    {...register.fields.username.as("text")}
+    issues={register.fields.username.issues()}
+  />
+  <LabeledInput
+    label="Password"
+    icon={RectangleEllipsisIcon}
+    required
+    {...register.fields.password.as("password")}
+    issues={register.fields.password.issues()}
+  />
+
+  <button
+    class="btn text-sm preset-filled-primary-500"
+    disabled={!!register.pending}
+  >
+    Create account
+    {#if register.pending}
+      <LoaderCircleIcon class="animate-spin" />
+    {:else}
+      <ChevronRightIcon />
+    {/if}
+  </button>
+</form>
diff --git a/packages/frontend/src/routes/(form)/setup/components/Bot.svelte b/packages/frontend/src/routes/(form)/setup/components/Bot.svelte
new file mode 100644
index 0000000..2175d10
--- /dev/null
+++ b/packages/frontend/src/routes/(form)/setup/components/Bot.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import LabeledInput from "$lib/components/LabeledInput.svelte";
+  import { createBot } from "$lib/remotes/bot.remote";
+  import toaster from "$lib/utils/toaster";
+  import {
+    BracesIcon,
+    ChevronRightIcon,
+    ContainerIcon,
+    LoaderCircleIcon,
+    RectangleEllipsisIcon,
+    TextCursorIcon,
+  } from "@lucide/svelte";
+  import { Switch } from "@skeletonlabs/skeleton-svelte";
+  import { slide } from "svelte/transition";
+
+  const { dockerImage, token } = createBot.fields;
+
+  let authentication: boolean = $state(false);
+</script>
+
+<form
+  {...createBot.enhance(async ({ submit, form }) => {
+    await submit()
+      .then(() => form.reset())
+      .catch((error) =>
+        toaster.create({
+          type: "error",
+          title: "Error",
+          description: JSON.parse(error).message,
+        }),
+      );
+  })}
+>
+  <LabeledInput
+    label="Container image url"
+    icon={ContainerIcon}
+    placeholder="ghcr.io/image:tag"
+    required
+    {...dockerImage.image.as("text")}
+    issues={dockerImage.image.issues()}
+  />
+
+  <Switch
+    checked={authentication}
+    onCheckedChange={(details) => (authentication = details.checked)}
+  >
+    <Switch.Control>
+      <Switch.Thumb />
+    </Switch.Control>
+    <Switch.Label>Registry authentication</Switch.Label>
+    <Switch.HiddenInput />
+  </Switch>
+
+  {#if authentication}
+    <div class="flex gap-2" transition:slide={{ duration: 150 }}>
+      <LabeledInput
+        label="Username"
+        icon={TextCursorIcon}
+        required
+        {...dockerImage.username.as("text")}
+        issues={dockerImage.username.issues()}
+      />
+
+      <LabeledInput
+        label="Password"
+        icon={RectangleEllipsisIcon}
+        required
+        {...dockerImage.password.as("password")}
+        issues={dockerImage.password.issues()}
+      />
+    </div>
+  {/if}
+
+  <LabeledInput
+    label="Bot token"
+    icon={BracesIcon}
+    placeholder="8f0a2f30b4e738362ee19e8e572edb8a"
+    required
+    {...token.as("password")}
+    issues={token.issues()}
+  />
+
+  <button
+    class="btn text-sm preset-filled-primary-500"
+    disabled={!!createBot.pending}
+  >
+    Register bot
+    {#if createBot.pending}
+      <LoaderCircleIcon class="animate-spin" />
+    {:else}
+      <ChevronRightIcon />
+    {/if}
+  </button>
+</form>