From 9a2f0a849e8d6994d47c96346ea5c14d234583b4 Mon Sep 17 00:00:00 2001
From: zowks <67444066+zowks@users.noreply.github.com>
Date: Fri, 15 May 2026 23:43:26 +0000
Subject: [PATCH 1/2] feat(frontend): add `/settings` page

---
 .../src/lib/components/LabeledInput.svelte    |  35 +++---
 .../frontend/src/lib/remotes/bot.remote.ts    |  85 +++++++++++++-
 .../src/routes/(app)/settings/+layout.svelte  |   9 ++
 .../src/routes/(app)/settings/+page.svelte    | 106 ++++++++++++++++++
 .../routes/(form)/setup/components/Bot.svelte |   2 +-
 5 files changed, 219 insertions(+), 18 deletions(-)
 create mode 100644 packages/frontend/src/routes/(app)/settings/+layout.svelte
 create mode 100644 packages/frontend/src/routes/(app)/settings/+page.svelte

diff --git a/packages/frontend/src/lib/components/LabeledInput.svelte b/packages/frontend/src/lib/components/LabeledInput.svelte
index 0c3fa45..5a4136d 100644
--- a/packages/frontend/src/lib/components/LabeledInput.svelte
+++ b/packages/frontend/src/lib/components/LabeledInput.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-import { type Icon, TriangleAlertIcon } from "@lucide/svelte";
-import type { RemoteFormIssue } from "@sveltejs/kit";
-import type { HTMLInputAttributes } from "svelte/elements";
+  import { type Icon, TriangleAlertIcon } from "@lucide/svelte";
+  import type { RemoteFormIssue } from "@sveltejs/kit";
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
 
-interface Props extends HTMLInputAttributes {
-  label: string;
-  icon?: typeof Icon;
-  issues?: RemoteFormIssue[];
-}
+  interface Props extends HTMLInputAttributes {
+    label: string;
+    icon?: typeof Icon;
+    issues?: RemoteFormIssue[];
+    suffix?: Snippet;
+  }
 
-let { label, icon, issues, ...props }: Props = $props();
+  let { label, icon, issues, suffix, ...props }: Props = $props();
 </script>
 
 <label class="label">
-  <div class={[
-    "ml-1 flex gap-1",
-    issues && "text-error-500"
-  ]}>
+  <div class={["ml-1 flex gap-1", issues && "text-error-500"]}>
     {#if issues}
       <TriangleAlertIcon size={16} />
     {:else if icon}
@@ -25,9 +24,15 @@ let { label, icon, issues, ...props }: Props = $props();
     {/if}
 
     <span class="label-text">
-      {label}<span class="text-primary-500">{props.required && "*"}</span>
+      {label}
+      {#if props.required}
+        <span class="text-primary-500">*</span>
+      {/if}
     </span>
   </div>
 
-  <input class="input" {...props} />
+  <div class="input flex items-center gap-1">
+    <input class="grow" {...props} />
+    {@render suffix?.()}
+  </div>
 </label>
diff --git a/packages/frontend/src/lib/remotes/bot.remote.ts b/packages/frontend/src/lib/remotes/bot.remote.ts
index 60c0ceb..69c6497 100644
--- a/packages/frontend/src/lib/remotes/bot.remote.ts
+++ b/packages/frontend/src/lib/remotes/bot.remote.ts
@@ -1,6 +1,6 @@
-import { command, form, getRequestEvent } from "$app/server";
+import { command, form, getRequestEvent, query } from "$app/server";
 import { env } from "$env/dynamic/private";
-import { CreateBotSchema, UpdateBotSchema } from "@hallmaster/backend/dto";
+import { CreateBotSchema, UpdateBotSchema, type GetBotDto } from "@hallmaster/backend/dto";
 import { error, redirect } from "@sveltejs/kit";
 
 import { getClusters } from "./clusters.remote";
@@ -30,6 +30,87 @@ export const createBot = form(CreateBotSchema, async (data) => {
   }
 });
 
+export const getBot = query<GetBotDto>(async () => {
+  const token = getRequestEvent().cookies.get("token");
+
+  const response = await fetch(new URL("/bot", env.API_URL), {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  switch (response.status) {
+    case 200:
+      return response.json();
+    case 401:
+      return error(401, "Unauthorized");
+    case 404:
+      return error(404, "Bot not found");
+
+    default:
+      return error(500, "An error occured");
+  }
+});
+
+export const updateBotToken = form(UpdateBotSchema.pick({ token: true }), async (token) => {
+  const userToken = getRequestEvent().cookies.get("token");
+
+  const response = await fetch(new URL("/bot", env.API_URL), {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${userToken}`,
+    },
+    body: JSON.stringify(token),
+  });
+
+  switch (response.status) {
+    case 202:
+      getBot().set(await response.json());
+      return;
+    case 401:
+      return error(401, "Unauthorized");
+    case 404:
+      return error(404, "Bot not found");
+
+    default:
+      console.error(await response.text());
+      return error(500, "An error occured");
+  }
+});
+
+export const updateBotImage = form(
+  UpdateBotSchema.pick({ dockerImage: true }),
+  async (dockerImage) => {
+    const token = getRequestEvent().cookies.get("token");
+
+    const response = await fetch(new URL("/bot", env.API_URL), {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(dockerImage),
+    });
+
+    switch (response.status) {
+      case 202:
+        getBot().set(await response.json());
+        return;
+      case 401:
+        return error(401, "Unauthorized");
+      case 404:
+        return error(404, "Bot not found");
+
+      default:
+        console.error(await response.text());
+        return error(500, "An error occured");
+    }
+  },
+);
+
 export const updateBotLayout = command(UpdateBotSchema.pick({ layout: true }), async (layout) => {
   const token = getRequestEvent().cookies.get("token");
 
diff --git a/packages/frontend/src/routes/(app)/settings/+layout.svelte b/packages/frontend/src/routes/(app)/settings/+layout.svelte
new file mode 100644
index 0000000..eafde7f
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/settings/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { LayoutProps } from "./$types";
+
+  let { children }: LayoutProps = $props();
+</script>
+
+<main class="max-w-2xl flex flex-col gap-4 mx-auto">
+  {@render children()}
+</main>
diff --git a/packages/frontend/src/routes/(app)/settings/+page.svelte b/packages/frontend/src/routes/(app)/settings/+page.svelte
new file mode 100644
index 0000000..72fe28e
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/settings/+page.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+  import LabeledInput from "$lib/components/LabeledInput.svelte";
+  import {
+    getBot,
+    updateBotImage,
+    updateBotToken,
+  } from "$lib/remotes/bot.remote";
+  import {
+    BracesIcon,
+    ContainerIcon,
+    LoaderCircleIcon,
+    RectangleEllipsisIcon,
+    SaveIcon,
+    TextCursorIcon,
+  } from "@lucide/svelte";
+  import { Switch } from "@skeletonlabs/skeleton-svelte";
+  import { slide } from "svelte/transition";
+
+  const { dockerImage: defaultValues } = await getBot();
+  updateBotImage.fields.dockerImage.username.set(
+    defaultValues.username ?? undefined,
+  );
+  updateBotImage.fields.dockerImage.image.set(defaultValues.image);
+
+  let authentication: boolean = $state(!!defaultValues.username);
+</script>
+
+<h6 class="h6 font-normal">Deployment</h6>
+
+<div class="flex flex-col gap-4">
+  <form {...updateBotImage} class="flex flex-col gap-3">
+    <LabeledInput
+      label="Container image url"
+      icon={ContainerIcon}
+      placeholder="ghcr.io/image:tag"
+      required
+      {...updateBotImage.fields.dockerImage.image.as("text")}
+      issues={updateBotImage.fields.dockerImage.image.issues()}
+    >
+      {#snippet suffix()}
+        <button class="btn-icon btn-icon-sm text-primary-700-300">
+          {#if updateBotImage.pending}
+            <LoaderCircleIcon class="animate-spin" />
+          {:else}
+            <SaveIcon />
+          {/if}
+        </button>
+      {/snippet}
+    </LabeledInput>
+
+    <Switch
+      defaultChecked={authentication}
+      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="grid grid-cols-2 gap-2" transition:slide={{ duration: 150 }}>
+        <LabeledInput
+          label="Username"
+          icon={TextCursorIcon}
+          required
+          {...updateBotImage.fields.dockerImage.username.as("text")}
+          issues={updateBotImage.fields.dockerImage.username.issues()}
+        />
+
+        <LabeledInput
+          label="Password"
+          icon={RectangleEllipsisIcon}
+          required
+          {...updateBotImage.fields.dockerImage.password.as("password")}
+          issues={updateBotImage.fields.dockerImage.password.issues()}
+        />
+      </div>
+    {/if}
+  </form>
+
+  <hr class="hr" />
+
+  <form {...updateBotToken}>
+    <LabeledInput
+      label="Bot token"
+      icon={BracesIcon}
+      placeholder="8f0a2f30b4e738362ee19e8e572edb8a"
+      required
+      {...updateBotToken.fields.token.as("password")}
+      issues={updateBotToken.fields.token.issues()}
+    >
+      {#snippet suffix()}
+        <button class="btn-icon btn-icon-sm text-primary-700-300">
+          {#if updateBotToken.pending}
+            <LoaderCircleIcon class="animate-spin" />
+          {:else}
+            <SaveIcon />
+          {/if}
+        </button>
+      {/snippet}
+    </LabeledInput>
+  </form>
+</div>
diff --git a/packages/frontend/src/routes/(form)/setup/components/Bot.svelte b/packages/frontend/src/routes/(form)/setup/components/Bot.svelte
index 2175d10..b82fd5f 100644
--- a/packages/frontend/src/routes/(form)/setup/components/Bot.svelte
+++ b/packages/frontend/src/routes/(form)/setup/components/Bot.svelte
@@ -52,7 +52,7 @@
   </Switch>
 
   {#if authentication}
-    <div class="flex gap-2" transition:slide={{ duration: 150 }}>
+    <div class="grid grid-cols-2 gap-2" transition:slide={{ duration: 150 }}>
       <LabeledInput
         label="Username"
         icon={TextCursorIcon}

From f26d29045d5921ff6b1a0357e187f33488bc11ba Mon Sep 17 00:00:00 2001
From: zowks <67444066+zowks@users.noreply.github.com>
Date: Sat, 16 May 2026 12:36:14 +0000
Subject: [PATCH 2/2] fix(frontend): fixed review comments

---
 .../frontend/src/lib/remotes/auth.remote.ts   |  8 +-
 .../frontend/src/lib/remotes/bot.remote.ts    | 75 +++++++++----------
 2 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/packages/frontend/src/lib/remotes/auth.remote.ts b/packages/frontend/src/lib/remotes/auth.remote.ts
index 3b244c0..13fca30 100644
--- a/packages/frontend/src/lib/remotes/auth.remote.ts
+++ b/packages/frontend/src/lib/remotes/auth.remote.ts
@@ -3,13 +3,13 @@ import { env } from "$env/dynamic/private";
 import { loginSchema, registerSchema } from "@hallmaster/backend/dto";
 import { error, invalid, redirect } from "@sveltejs/kit";
 
-export const register = form(registerSchema, async (data) => {
+export const register = form(registerSchema, async (payload) => {
   const response = await fetch(`${env.API_URL}/auth/register`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(data),
+    body: JSON.stringify(payload),
   });
 
   switch (response.status) {
@@ -30,13 +30,13 @@ export const register = form(registerSchema, async (data) => {
   }
 });
 
-export const login = form(loginSchema, async (data, issue) => {
+export const login = form(loginSchema, async (payload, issue) => {
   const response = await fetch(`${env.API_URL}/auth/login`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(data),
+    body: JSON.stringify(payload),
   });
 
   switch (response.status) {
diff --git a/packages/frontend/src/lib/remotes/bot.remote.ts b/packages/frontend/src/lib/remotes/bot.remote.ts
index 69c6497..96833fb 100644
--- a/packages/frontend/src/lib/remotes/bot.remote.ts
+++ b/packages/frontend/src/lib/remotes/bot.remote.ts
@@ -5,7 +5,7 @@ import { error, redirect } from "@sveltejs/kit";
 
 import { getClusters } from "./clusters.remote";
 
-export const createBot = form(CreateBotSchema, async (data) => {
+export const createBot = form(CreateBotSchema, async (payload) => {
   const token = getRequestEvent().cookies.get("token");
 
   const response = await fetch(`${env.API_URL}/bot`, {
@@ -14,7 +14,7 @@ export const createBot = form(CreateBotSchema, async (data) => {
       "Content-Type": "application/json",
       Authorization: `Bearer ${token}`,
     },
-    body: JSON.stringify(data),
+    body: JSON.stringify(payload),
   });
 
   switch (response.status) {
@@ -50,20 +50,47 @@ export const getBot = query<GetBotDto>(async () => {
       return error(404, "Bot not found");
 
     default:
-      return error(500, "An error occured");
+      return error(500, "An error occurred");
   }
 });
 
-export const updateBotToken = form(UpdateBotSchema.pick({ token: true }), async (token) => {
-  const userToken = getRequestEvent().cookies.get("token");
+export const updateBotToken = form(UpdateBotSchema.pick({ token: true }), async (payload) => {
+  const token = getRequestEvent().cookies.get("token");
 
   const response = await fetch(new URL("/bot", env.API_URL), {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${userToken}`,
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(payload),
+  });
+
+  switch (response.status) {
+    case 202:
+      getBot().set(await response.json());
+      return;
+    case 401:
+      return error(401, "Unauthorized");
+    case 404:
+      return error(404, "Bot not found");
+
+    default:
+      console.error(await response.text());
+      return error(500, "An error occurred");
+  }
+});
+
+export const updateBotImage = form(UpdateBotSchema.pick({ dockerImage: true }), async (payload) => {
+  const token = getRequestEvent().cookies.get("token");
+
+  const response = await fetch(new URL("/bot", env.API_URL), {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
     },
-    body: JSON.stringify(token),
+    body: JSON.stringify(payload),
   });
 
   switch (response.status) {
@@ -81,37 +108,7 @@ export const updateBotToken = form(UpdateBotSchema.pick({ token: true }), async
   }
 });
 
-export const updateBotImage = form(
-  UpdateBotSchema.pick({ dockerImage: true }),
-  async (dockerImage) => {
-    const token = getRequestEvent().cookies.get("token");
-
-    const response = await fetch(new URL("/bot", env.API_URL), {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-      body: JSON.stringify(dockerImage),
-    });
-
-    switch (response.status) {
-      case 202:
-        getBot().set(await response.json());
-        return;
-      case 401:
-        return error(401, "Unauthorized");
-      case 404:
-        return error(404, "Bot not found");
-
-      default:
-        console.error(await response.text());
-        return error(500, "An error occured");
-    }
-  },
-);
-
-export const updateBotLayout = command(UpdateBotSchema.pick({ layout: true }), async (layout) => {
+export const updateBotLayout = command(UpdateBotSchema.pick({ layout: true }), async (payload) => {
   const token = getRequestEvent().cookies.get("token");
 
   const response = await fetch(new URL("/bot", env.API_URL), {
@@ -120,7 +117,7 @@ export const updateBotLayout = command(UpdateBotSchema.pick({ layout: true }), a
       "Content-Type": "application/json",
       Authorization: `Bearer ${token}`,
     },
-    body: JSON.stringify(layout),
+    body: JSON.stringify(payload),
   });
 
   switch (response.status) {