refactor(frontend): new onboarding flow with shard layout

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");

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>

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>