From 0c3652ed67e556c385163f91c12e97e1ff2ce744 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Thu, 28 Nov 2024 10:01:54 +0100
Subject: [PATCH 01/12] feat(pages): add simple pages when logged in

---
 src-tauri/Cargo.lock                          |  2 +-
 .../dialogs/auth/sign-out-dialog.svelte       |  2 +-
 src/lib/components/header.svelte              |  8 ------
 src/lib/components/navbar.svelte              | 15 -----------
 ...button.svelte => navigation-button.svelte} |  0
 src/lib/components/sidebar.svelte             | 25 +++++++++++++++++++
 src/routes/(protected)/+layout.svelte         | 13 ++--------
 src/routes/(protected)/proxies/+page.svelte   |  3 +++
 src/routes/(protected)/signups/+page.svelte   |  3 +++
 src/routes/(protected)/tasks/+page.svelte     |  3 +++
 10 files changed, 38 insertions(+), 36 deletions(-)
 delete mode 100644 src/lib/components/navbar.svelte
 rename src/lib/components/{navbar-button.svelte => navigation-button.svelte} (100%)
 create mode 100644 src/lib/components/sidebar.svelte
 create mode 100644 src/routes/(protected)/proxies/+page.svelte
 create mode 100644 src/routes/(protected)/signups/+page.svelte
 create mode 100644 src/routes/(protected)/tasks/+page.svelte

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 441776c..4808cca 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4,7 +4,7 @@ version = 3
 
 [[package]]
 name = "Jaafar"
-version = "0.0.3"
+version = "0.0.4"
 dependencies = [
  "cocoa 0.25.0",
  "objc",
diff --git a/src/lib/components/dialogs/auth/sign-out-dialog.svelte b/src/lib/components/dialogs/auth/sign-out-dialog.svelte
index 500dba3..1d24b4b 100644
--- a/src/lib/components/dialogs/auth/sign-out-dialog.svelte
+++ b/src/lib/components/dialogs/auth/sign-out-dialog.svelte
@@ -28,7 +28,7 @@
 <Dialog.Root bind:open={signOutDialog.open}>
 	<Dialog.Content class="max-w-[425px]">
 		<Dialog.Header>
-			<Dialog.Title>Confirm Sign-Out</Dialog.Title>
+			<Dialog.Title>Confirm Sign Out</Dialog.Title>
 			<Dialog.Description>
 				Please confirm if you would like to sign out of your account.
 			</Dialog.Description>
diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
index 2c0ff58..e2d92f7 100644
--- a/src/lib/components/header.svelte
+++ b/src/lib/components/header.svelte
@@ -11,12 +11,4 @@
   >
 		<i class="fa-regular fa-bell text-lg"></i>
   </Button>
-  <Button
-    variant="ghost"
-    size="icon"
-    class="rounded-lg z-20"
-    aria-label="Help"
-  >
-		<i class="fa-regular fa-circle-question text-lg"></i>
-  </Button>
 </header>
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
deleted file mode 100644
index 1ce9feb..0000000
--- a/src/lib/components/navbar.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-	import NavbarButton from "$lib/components/navbar-button.svelte";
-
-	const navigations = [
-		{ label: "Dashboard", icon: "fa-house", href: "/" },
-		{ label: "Tasks", icon: "fa-table-layout", href: "/tasks" },
-		{ label: "Proxies", icon: "fa-globe", href: "/proxies" },
-	];
-</script>
-
-<nav class="grid gap-1">
-	{#each navigations as navigation}
-		<NavbarButton {navigation} />
-	{/each}
-</nav>
diff --git a/src/lib/components/navbar-button.svelte b/src/lib/components/navigation-button.svelte
similarity index 100%
rename from src/lib/components/navbar-button.svelte
rename to src/lib/components/navigation-button.svelte
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
new file mode 100644
index 0000000..597f481
--- /dev/null
+++ b/src/lib/components/sidebar.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import NavigationButton from "$lib/components/navigation-button.svelte";
+	import UserMenu from "$lib/components/user-menu.svelte";
+
+	const navigations = [
+		{ label: "Dashboard", icon: "fa-house", href: "/" },
+		{ label: "Tasks", icon: "fa-table-layout", href: "/tasks" },
+		{ label: "Signups", icon: "fa-user-tie-hair", href: "/signups" },
+		{ label: "Proxies", icon: "fa-globe", href: "/proxies" },
+	];
+</script>
+
+<div class="bg-background border-r h-full w-full">
+	<div class="flex h-full max-h-screen flex-col justify-between items-center pb-4">
+		<div class="flex w-full h-full flex-col items-center gap-4">
+			<div class="flex items-center border-b w-full h-[44px] px-6"></div>
+			<nav class="grid gap-1">
+				{#each navigations as navigation}
+					<NavigationButton {navigation} />
+				{/each}
+			</nav>
+		</div>
+		<UserMenu />
+	</div>
+</div>
diff --git a/src/routes/(protected)/+layout.svelte b/src/routes/(protected)/+layout.svelte
index 0b3ce55..f40c6e9 100644
--- a/src/routes/(protected)/+layout.svelte
+++ b/src/routes/(protected)/+layout.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import Navbar from "$lib/components/navbar.svelte";
 	import Header from "$lib/components/header.svelte";
-	import UserMenu from "$lib/components/user-menu.svelte";
+	import Sidebar from "$lib/components/sidebar.svelte";
 	import SignOutDialog from "$lib/components/dialogs/auth/sign-out-dialog.svelte";
 
 	let { children } = $props();
@@ -10,15 +9,7 @@
 <SignOutDialog />
 
 <div class="grid min-h-screen w-full grid-cols-[85px_1fr]">
-	<div class="bg-background border-r h-full w-full">
-		<div class="flex h-full max-h-screen flex-col justify-between items-center pb-4">
-			<div class="flex w-full h-full flex-col items-center gap-4">
-				<div class="flex items-center border-b w-full h-[44px] px-6"></div>
-				<Navbar />
-			</div>
-			<UserMenu />
-		</div>
-	</div>
+	<Sidebar />
 	<div class="flex flex-col">
 		<Header />
 		<div class="flex flex-1 flex-col gap-6 p-6 bg-muted/40">
diff --git a/src/routes/(protected)/proxies/+page.svelte b/src/routes/(protected)/proxies/+page.svelte
new file mode 100644
index 0000000..d869e4b
--- /dev/null
+++ b/src/routes/(protected)/proxies/+page.svelte
@@ -0,0 +1,3 @@
+<div class="flex items-center">
+  <h1 class="font-semibold text-2xl">Proxies</h1>
+</div>
diff --git a/src/routes/(protected)/signups/+page.svelte b/src/routes/(protected)/signups/+page.svelte
new file mode 100644
index 0000000..1ea6d09
--- /dev/null
+++ b/src/routes/(protected)/signups/+page.svelte
@@ -0,0 +1,3 @@
+<div class="flex items-center">
+  <h1 class="font-semibold text-2xl">Signups</h1>
+</div>
diff --git a/src/routes/(protected)/tasks/+page.svelte b/src/routes/(protected)/tasks/+page.svelte
new file mode 100644
index 0000000..4fb84e7
--- /dev/null
+++ b/src/routes/(protected)/tasks/+page.svelte
@@ -0,0 +1,3 @@
+<div class="flex items-center">
+  <h1 class="font-semibold text-2xl">Tasks</h1>
+</div>

From 11847ca9d5fb87bb07ca7fa5f34b43745f73869a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Thu, 28 Nov 2024 15:03:17 +0100
Subject: [PATCH 02/12] feat(settings): add tabs with different pages

---
 .../components/dialogs/settings-dialog.svelte | 44 +++++++++++++++++++
 .../components/settings/profile-page.svelte   |  3 ++
 src/lib/components/settings/sidebar.svelte    | 31 +++++++++++++
 src/lib/components/sidebar.svelte             |  3 +-
 src/lib/components/ui/separator/index.ts      |  7 +++
 .../components/ui/separator/separator.svelte  | 22 ++++++++++
 src/lib/components/ui/tabs/index.ts           | 18 ++++++++
 .../components/ui/tabs/tabs-content.svelte    | 19 ++++++++
 src/lib/components/ui/tabs/tabs-list.svelte   | 19 ++++++++
 .../components/ui/tabs/tabs-trigger.svelte    | 19 ++++++++
 src/lib/components/user-menu.svelte           |  6 +--
 src/routes/(protected)/+layout.svelte         |  2 +
 src/routes/(protected)/accounts/+page.svelte  |  3 ++
 13 files changed, 192 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/dialogs/settings-dialog.svelte
 create mode 100644 src/lib/components/settings/profile-page.svelte
 create mode 100644 src/lib/components/settings/sidebar.svelte
 create mode 100644 src/lib/components/ui/separator/index.ts
 create mode 100644 src/lib/components/ui/separator/separator.svelte
 create mode 100644 src/lib/components/ui/tabs/index.ts
 create mode 100644 src/lib/components/ui/tabs/tabs-content.svelte
 create mode 100644 src/lib/components/ui/tabs/tabs-list.svelte
 create mode 100644 src/lib/components/ui/tabs/tabs-trigger.svelte
 create mode 100644 src/routes/(protected)/accounts/+page.svelte

diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
new file mode 100644
index 0000000..01b441b
--- /dev/null
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -0,0 +1,44 @@
+<script module>
+	export let settingsDialog = $state({ open: true });
+</script>
+
+<script lang="ts">
+	import type { Component } from "svelte";
+	import { Separator } from "$lib/components/ui/separator";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import * as Tabs from "$lib/components/ui/tabs";
+	import Sidebar from "$lib/components/settings/sidebar.svelte";
+	import ProfilePage from "$lib/components/settings/profile-page.svelte";
+
+	interface Page {
+		name: string;
+		label: string;
+		page: Component
+	}
+
+	const pages: Page[] = [
+		{ name: "profile", label: "Profile", page: ProfilePage },
+		{ name: "profile1", label: "Profile", page: Separator },
+		{ name: "profile2", label: "Profile", page: Separator },
+		{ name: "profile3", label: "Profile", page: Separator },
+	];
+</script>
+
+<Dialog.Root bind:open={settingsDialog.open}>
+	<Dialog.Content class="max-w-[800px] max-h-[650px] h-full flex flex-col">
+		<Dialog.Header class="h-fit">
+			<Dialog.Title>Settings</Dialog.Title>
+			<div class="-mx-6">
+				<Separator class="my-4" />
+			</div>
+		</Dialog.Header>
+		<Tabs.Root value={pages[0].name} class="flex gap-x-4 h-full">
+			<Sidebar {pages} />
+			{#each pages as { name, page: Page }}
+				<Tabs.Content value={name} class="w-full">
+					<Page />
+				</Tabs.Content>
+			{/each}
+		</Tabs.Root>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/lib/components/settings/profile-page.svelte b/src/lib/components/settings/profile-page.svelte
new file mode 100644
index 0000000..6a3ce75
--- /dev/null
+++ b/src/lib/components/settings/profile-page.svelte
@@ -0,0 +1,3 @@
+<div class="flex h-full bg-red-500">
+	profile
+</div>
diff --git a/src/lib/components/settings/sidebar.svelte b/src/lib/components/settings/sidebar.svelte
new file mode 100644
index 0000000..78ecfdb
--- /dev/null
+++ b/src/lib/components/settings/sidebar.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import { Button } from "$lib/components/ui/button";
+	import * as Tabs from "$lib/components/ui/tabs";
+
+	interface Page {
+		name: string;
+		label: string;
+		page: Component
+	}
+
+	interface Props {
+		pages: Page[];
+	}
+
+	let { pages }: Props = $props();
+</script>
+
+<div class="flex flex-col w-48 h-full">
+	{#each pages as page}
+		<Tabs.Trigger value={page.name}>
+			{#snippet child({ props })}
+				<Button
+					{...props}
+					variant="ghost"
+					class="w-fit data-[state=active]:bg-accent"
+				>{page.label}</Button>
+			{/snippet}
+		</Tabs.Trigger>
+	{/each}
+</div>
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 597f481..5b4f951 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -5,7 +5,8 @@
 	const navigations = [
 		{ label: "Dashboard", icon: "fa-house", href: "/" },
 		{ label: "Tasks", icon: "fa-table-layout", href: "/tasks" },
-		{ label: "Signups", icon: "fa-user-tie-hair", href: "/signups" },
+		{ label: "Signups", icon: "fa-pen", href: "/signups" },
+		{ label: "Accounts", icon: "fa-user-tie-hair", href: "/accounts" },
 		{ label: "Proxies", icon: "fa-globe", href: "/proxies" },
 	];
 </script>
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..82442d2
--- /dev/null
+++ b/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..839494d
--- /dev/null
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "horizontal",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	class={cn(
+		"bg-border shrink-0",
+		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..f1ab372
--- /dev/null
+++ b/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+const Root = TabsPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..f1c0515
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..f03e5fc
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..f1f5825
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/user-menu.svelte b/src/lib/components/user-menu.svelte
index 4973855..54a0335 100644
--- a/src/lib/components/user-menu.svelte
+++ b/src/lib/components/user-menu.svelte
@@ -2,6 +2,7 @@
   import { Button } from "$lib/components/ui/button";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 	import { signOutDialog } from "$lib/components/dialogs/auth/sign-out-dialog.svelte";
+	import { settingsDialog } from "$lib/components/dialogs/settings-dialog.svelte";
 </script>
 
 <DropdownMenu.Root>
@@ -27,12 +28,11 @@
       </div>
     </DropdownMenu.Label>
     <DropdownMenu.Separator />
-    <DropdownMenu.Item>Profile</DropdownMenu.Item>
-    <DropdownMenu.Item>
+    <DropdownMenu.Item>Billing</DropdownMenu.Item>
+    <DropdownMenu.Item onSelect={() => settingsDialog.open = true}>
       Settings
       <DropdownMenu.Shortcut>⌘,</DropdownMenu.Shortcut>
     </DropdownMenu.Item>
-    <DropdownMenu.Item>Billing</DropdownMenu.Item>
     <DropdownMenu.Separator />
 		<DropdownMenu.Item onSelect={() => signOutDialog.open = true}>
 			Sign Out
diff --git a/src/routes/(protected)/+layout.svelte b/src/routes/(protected)/+layout.svelte
index f40c6e9..78a8756 100644
--- a/src/routes/(protected)/+layout.svelte
+++ b/src/routes/(protected)/+layout.svelte
@@ -2,11 +2,13 @@
 	import Header from "$lib/components/header.svelte";
 	import Sidebar from "$lib/components/sidebar.svelte";
 	import SignOutDialog from "$lib/components/dialogs/auth/sign-out-dialog.svelte";
+	import SettingsDialog from "$lib/components/dialogs/settings-dialog.svelte";
 
 	let { children } = $props();
 </script>
 
 <SignOutDialog />
+<SettingsDialog />
 
 <div class="grid min-h-screen w-full grid-cols-[85px_1fr]">
 	<Sidebar />
diff --git a/src/routes/(protected)/accounts/+page.svelte b/src/routes/(protected)/accounts/+page.svelte
new file mode 100644
index 0000000..31e606f
--- /dev/null
+++ b/src/routes/(protected)/accounts/+page.svelte
@@ -0,0 +1,3 @@
+<div class="flex items-center">
+  <h1 class="font-semibold text-2xl">Accounts</h1>
+</div>

From e4e61e4d7a6561b946226554432c7b2481398b43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Thu, 28 Nov 2024 15:11:37 +0100
Subject: [PATCH 03/12] feat(settings): add correct tabs with icons

---
 src/lib/components/dialogs/settings-dialog.svelte | 12 ++++++++----
 src/lib/components/settings/sidebar.svelte        |  9 +++++++--
 src/lib/components/user-menu.svelte               |  1 -
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
index 01b441b..d6e51b1 100644
--- a/src/lib/components/dialogs/settings-dialog.svelte
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -13,14 +13,18 @@
 	interface Page {
 		name: string;
 		label: string;
+		icon: string;
 		page: Component
 	}
 
 	const pages: Page[] = [
-		{ name: "profile", label: "Profile", page: ProfilePage },
-		{ name: "profile1", label: "Profile", page: Separator },
-		{ name: "profile2", label: "Profile", page: Separator },
-		{ name: "profile3", label: "Profile", page: Separator },
+		{ name: "account-settings", label: "Account Settings", icon: "fa-user", page: ProfilePage },
+		{ name: "notifications", label: "Notifications", icon: "fa-bell", page: Separator },
+		{ name: "privacy", label: "Privacy", icon: "fa-lock", page: Separator },
+		{ name: "preferences", label: "Preferences", icon: "fa-cog", page: Separator },
+		{ name: "integration", label: "Integration", icon: "fa-link", page: Separator },
+		{ name: "security", label: "Security", icon: "fa-shield", page: Separator },
+		{ name: "billing", label: "Billing", icon: "fa-money-bill", page: Separator },
 	];
 </script>
 
diff --git a/src/lib/components/settings/sidebar.svelte b/src/lib/components/settings/sidebar.svelte
index 78ecfdb..20af3d7 100644
--- a/src/lib/components/settings/sidebar.svelte
+++ b/src/lib/components/settings/sidebar.svelte
@@ -2,10 +2,12 @@
 	import type { Component } from "svelte";
 	import { Button } from "$lib/components/ui/button";
 	import * as Tabs from "$lib/components/ui/tabs";
+    import {cn} from "$lib/utils";
 
 	interface Page {
 		name: string;
 		label: string;
+		icon: string;
 		page: Component
 	}
 
@@ -23,8 +25,11 @@
 				<Button
 					{...props}
 					variant="ghost"
-					class="w-fit data-[state=active]:bg-accent"
-				>{page.label}</Button>
+					class="justify-start data-[state=active]:bg-accent"
+				>
+					<i class={cn("fa-regular", page.icon)}></i>
+					{page.label}
+				</Button>
 			{/snippet}
 		</Tabs.Trigger>
 	{/each}
diff --git a/src/lib/components/user-menu.svelte b/src/lib/components/user-menu.svelte
index 54a0335..5305a88 100644
--- a/src/lib/components/user-menu.svelte
+++ b/src/lib/components/user-menu.svelte
@@ -28,7 +28,6 @@
       </div>
     </DropdownMenu.Label>
     <DropdownMenu.Separator />
-    <DropdownMenu.Item>Billing</DropdownMenu.Item>
     <DropdownMenu.Item onSelect={() => settingsDialog.open = true}>
       Settings
       <DropdownMenu.Shortcut>⌘,</DropdownMenu.Shortcut>

From b6a51b76b70eb06264384cf4da94ed8b4b8c7764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Thu, 28 Nov 2024 15:18:19 +0100
Subject: [PATCH 04/12] feat(settings): add all pages for the tabs

---
 .../components/dialogs/settings-dialog.svelte | 22 ++++++++++++-------
 .../settings/account-settings-page.svelte     |  3 +++
 .../components/settings/billing-page.svelte   |  3 +++
 .../settings/integration-page.svelte          |  3 +++
 .../settings/notifications-page.svelte        |  3 +++
 .../settings/preferences-page.svelte          |  3 +++
 .../components/settings/privacy-page.svelte   |  3 +++
 .../components/settings/profile-page.svelte   |  3 ---
 .../components/settings/security-page.svelte  |  3 +++
 9 files changed, 35 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/components/settings/account-settings-page.svelte
 create mode 100644 src/lib/components/settings/billing-page.svelte
 create mode 100644 src/lib/components/settings/integration-page.svelte
 create mode 100644 src/lib/components/settings/notifications-page.svelte
 create mode 100644 src/lib/components/settings/preferences-page.svelte
 create mode 100644 src/lib/components/settings/privacy-page.svelte
 delete mode 100644 src/lib/components/settings/profile-page.svelte
 create mode 100644 src/lib/components/settings/security-page.svelte

diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
index d6e51b1..0f5fdb6 100644
--- a/src/lib/components/dialogs/settings-dialog.svelte
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -8,7 +8,13 @@
 	import * as Dialog from "$lib/components/ui/dialog";
 	import * as Tabs from "$lib/components/ui/tabs";
 	import Sidebar from "$lib/components/settings/sidebar.svelte";
-	import ProfilePage from "$lib/components/settings/profile-page.svelte";
+	import AccountSettingsPage from "$lib/components/settings/account-settings-page.svelte";
+	import NotificationsPage from "$lib/components/settings/notifications-page.svelte";
+	import PrivacyPage from "$lib/components/settings/privacy-page.svelte";
+	import PreferencesPage from "$lib/components/settings/preferences-page.svelte";
+	import IntegrationPage from "$lib/components/settings/integration-page.svelte";
+	import SecurityPage from "$lib/components/settings/security-page.svelte";
+	import BillingPage from "$lib/components/settings/billing-page.svelte";
 
 	interface Page {
 		name: string;
@@ -18,13 +24,13 @@
 	}
 
 	const pages: Page[] = [
-		{ name: "account-settings", label: "Account Settings", icon: "fa-user", page: ProfilePage },
-		{ name: "notifications", label: "Notifications", icon: "fa-bell", page: Separator },
-		{ name: "privacy", label: "Privacy", icon: "fa-lock", page: Separator },
-		{ name: "preferences", label: "Preferences", icon: "fa-cog", page: Separator },
-		{ name: "integration", label: "Integration", icon: "fa-link", page: Separator },
-		{ name: "security", label: "Security", icon: "fa-shield", page: Separator },
-		{ name: "billing", label: "Billing", icon: "fa-money-bill", page: Separator },
+		{ name: "account-settings", label: "Account Settings", icon: "fa-user", page: AccountSettingsPage },
+		{ name: "notifications", label: "Notifications", icon: "fa-bell", page: NotificationsPage },
+		{ name: "privacy", label: "Privacy", icon: "fa-lock", page: PrivacyPage },
+		{ name: "preferences", label: "Preferences", icon: "fa-cog", page: PreferencesPage },
+		{ name: "integration", label: "Integration", icon: "fa-link", page: IntegrationPage },
+		{ name: "security", label: "Security", icon: "fa-shield", page: SecurityPage },
+		{ name: "billing", label: "Billing", icon: "fa-money-bill", page: BillingPage },
 	];
 </script>
 
diff --git a/src/lib/components/settings/account-settings-page.svelte b/src/lib/components/settings/account-settings-page.svelte
new file mode 100644
index 0000000..b628e5c
--- /dev/null
+++ b/src/lib/components/settings/account-settings-page.svelte
@@ -0,0 +1,3 @@
+<div class="flex h-full">
+	account settings
+</div>
diff --git a/src/lib/components/settings/billing-page.svelte b/src/lib/components/settings/billing-page.svelte
new file mode 100644
index 0000000..1668710
--- /dev/null
+++ b/src/lib/components/settings/billing-page.svelte
@@ -0,0 +1,3 @@
+<div class="flex h-full">
+	billing
+</div>
diff --git a/src/lib/components/settings/integration-page.svelte b/src/lib/components/settings/integration-page.svelte
new file mode 100644
index 0000000..f336e24
--- /dev/null
+++ b/src/lib/components/settings/integration-page.svelte
@@ -0,0 +1,3 @@
+<div class="flex h-full">
+	integration
+</div>
diff --git a/src/lib/components/settings/notifications-page.svelte b/src/lib/components/settings/notifications-page.svelte
new file mode 100644
index 0000000..8f04956
--- /dev/null
+++ b/src/lib/components/settings/notifications-page.svelte
@@ -0,0 +1,3 @@
+<div class="flex h-full">
+	notifications
+</div>
diff --git a/src/lib/components/settings/preferences-page.svelte b/src/lib/components/settings/preferences-page.svelte
new file mode 100644
index 0000000..9cacc31
--- /dev/null
+++ b/src/lib/components/settings/preferences-page.svelte
@@ -0,0 +1,3 @@
+<div class="flex h-full">
+	preferences
+</div>
diff --git a/src/lib/components/settings/privacy-page.svelte b/src/lib/components/settings/privacy-page.svelte
new file mode 100644
index 0000000..5b7cc9d
--- /dev/null
+++ b/src/lib/components/settings/privacy-page.svelte
@@ -0,0 +1,3 @@
+<div class="flex h-full">
+	privacy
+</div>
diff --git a/src/lib/components/settings/profile-page.svelte b/src/lib/components/settings/profile-page.svelte
deleted file mode 100644
index 6a3ce75..0000000
--- a/src/lib/components/settings/profile-page.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="flex h-full bg-red-500">
-	profile
-</div>
diff --git a/src/lib/components/settings/security-page.svelte b/src/lib/components/settings/security-page.svelte
new file mode 100644
index 0000000..50592d9
--- /dev/null
+++ b/src/lib/components/settings/security-page.svelte
@@ -0,0 +1,3 @@
+<div class="flex h-full">
+	security
+</div>

From f2442d4b68de07c4adb7453f17aae545a8a024da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Thu, 28 Nov 2024 18:17:29 +0100
Subject: [PATCH 05/12] feat(settings): add scrollable pages

---
 .../components/dialogs/settings-dialog.svelte | 27 ++++---
 .../settings/integration-page.svelte          | 79 ++++++++++++++++++-
 src/lib/components/settings/sidebar.svelte    |  2 +-
 src/lib/components/ui/scroll-area/index.ts    | 10 +++
 .../scroll-area/scroll-area-scrollbar.svelte  | 29 +++++++
 .../ui/scroll-area/scroll-area.svelte         | 32 ++++++++
 src/lib/components/ui/select/index.ts         | 34 ++++++++
 .../ui/select/select-content.svelte           | 39 +++++++++
 .../ui/select/select-group-heading.svelte     | 16 ++++
 .../components/ui/select/select-item.svelte   | 37 +++++++++
 .../select/select-scroll-down-button.svelte   | 19 +++++
 .../ui/select/select-scroll-up-button.svelte  | 19 +++++
 .../ui/select/select-separator.svelte         | 13 +++
 .../ui/select/select-trigger.svelte           | 24 ++++++
 14 files changed, 366 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/ui/scroll-area/index.ts
 create mode 100644 src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 src/lib/components/ui/scroll-area/scroll-area.svelte
 create mode 100644 src/lib/components/ui/select/index.ts
 create mode 100644 src/lib/components/ui/select/select-content.svelte
 create mode 100644 src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 src/lib/components/ui/select/select-item.svelte
 create mode 100644 src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 src/lib/components/ui/select/select-scroll-up-button.svelte
 create mode 100644 src/lib/components/ui/select/select-separator.svelte
 create mode 100644 src/lib/components/ui/select/select-trigger.svelte

diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
index 0f5fdb6..e2951b4 100644
--- a/src/lib/components/dialogs/settings-dialog.svelte
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -5,6 +5,7 @@
 <script lang="ts">
 	import type { Component } from "svelte";
 	import { Separator } from "$lib/components/ui/separator";
+	import { ScrollArea } from "$lib/components/ui/scroll-area";
 	import * as Dialog from "$lib/components/ui/dialog";
 	import * as Tabs from "$lib/components/ui/tabs";
 	import Sidebar from "$lib/components/settings/sidebar.svelte";
@@ -35,20 +36,24 @@
 </script>
 
 <Dialog.Root bind:open={settingsDialog.open}>
-	<Dialog.Content class="max-w-[800px] max-h-[650px] h-full flex flex-col">
-		<Dialog.Header class="h-fit">
+	<Dialog.Content class="max-w-[800px] max-h-[650px] h-full flex flex-col px-0 pt-6 pb-0 gap-0">
+		<Dialog.Header class="h-fit px-6">
 			<Dialog.Title>Settings</Dialog.Title>
 			<div class="-mx-6">
-				<Separator class="my-4" />
+				<Separator class="mt-4" />
 			</div>
 		</Dialog.Header>
-		<Tabs.Root value={pages[0].name} class="flex gap-x-4 h-full">
-			<Sidebar {pages} />
-			{#each pages as { name, page: Page }}
-				<Tabs.Content value={name} class="w-full">
-					<Page />
-				</Tabs.Content>
-			{/each}
-		</Tabs.Root>
+		<ScrollArea class="h-full" scrollHideDelay={0}>
+			<Tabs.Root value={pages[0].name} class="flex gap-x-4 h-full pb-6 px-6 pt-4">
+				<Sidebar {pages} />
+				<div class="ml-52 w-full">
+					{#each pages as { name, page: Page }}
+						<Tabs.Content value={name} class="w-full">
+							<Page />
+						</Tabs.Content>
+					{/each}
+				</div>
+			</Tabs.Root>
+		</ScrollArea>
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/src/lib/components/settings/integration-page.svelte b/src/lib/components/settings/integration-page.svelte
index f336e24..d2ee91e 100644
--- a/src/lib/components/settings/integration-page.svelte
+++ b/src/lib/components/settings/integration-page.svelte
@@ -1,3 +1,78 @@
-<div class="flex h-full">
-	integration
+<script lang="ts">
+	import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Separator } from "$lib/components/ui/separator";
+	import * as Select from "$lib/components/ui/select";
+
+	interface SelectType {
+		value: string;
+		label: string;
+	}
+
+	const captchaSolvers = [
+		{ value: "cap-solver", label: "CapSolver" },
+		{ value: "anti-captcha", label: "Anti-Captcha" },
+		{ value: "2-captcha", label: "2Captcha" },
+		{ value: "death-by-captcha", label: "Death by Captcha" },
+		{ value: "zennolab-captcha", label: "ZennoLab Captcha" },
+		{ value: "image-typerz", label: "ImageTyperz" },
+		{ value: "az-captcha", label: "AZcaptcha" },
+		{ value: "best-captcha-solver", label: "Best Captcha Solver" },
+		{ value: "resolve-captcha", label: "ResolveCaptcha" },
+		{ value: "captcha-solutions", label: "CaptchaSolutions" },
+	];
+
+  let captchaValue = $state<string>("");
+	const selectedCaptcha = $derived(
+    captchaValue
+      ? captchaSolvers.find((captcha: SelectType) => captcha.value === captchaValue)?.label
+      : "Select a captcha solver"
+  );
+</script>
+
+<div class="flex flex-col gap-y-6 h-full">
+	<div class="flex w-full flex-col gap-1.5">
+		<Label>Captcha Solver</Label>
+		<Select.Root type="single" onValueChange={v => (captchaValue = v)}>
+			<Select.Trigger>{selectedCaptcha}</Select.Trigger>
+			<Select.Content>
+				{#each captchaSolvers as captchaSolver}
+					<Select.Item value={captchaSolver.value}>{captchaSolver.label}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+		<p class="text-muted-foreground text-sm">Required for solving captchas on supported websites.</p>
+	</div>
+	{#if !!captchaValue}
+		<div class="flex w-full flex-col gap-1.5">
+			<Label for="captcha-api-key">Captcha API Key</Label>
+			<Input id="captcha-api-key" />
+		</div>
+	{/if}
+	<Separator />
+	<div class="flex w-full flex-col gap-1.5">
+		<Label for="request-delay">Request Delay</Label>
+		<Input id="request-delay" placeholder="3000" />
+		<p class="text-muted-foreground text-sm">Configure the delay (in milliseconds) between automated actions.</p>
+	</div>
+	<div class="flex w-full flex-col gap-1.5">
+		<Label for="entry-limit">Entry Limit</Label>
+		<Input id="entry-limit" placeholder="10" />
+		<p class="text-muted-foreground text-sm">Sets the maximum number of entries/tasks to process per request.</p>
+	</div>
+	<Separator />
+	<div class="flex w-full flex-col gap-1.5">
+		<Label for="imap-email">IMAP Email</Label>
+		<Input type="email" id="imap-email" />
+	</div>
+	<div class="flex w-full flex-col gap-1.5">
+		<Label for="imap-password">IMAP Password</Label>
+		<Input type="password" id="imap-password" />
+	</div>
+	<Separator />
+	<div class="flex w-full flex-col gap-1.5">
+		<Label for="webhook">Webhook</Label>
+		<Input id="webhook" />
+		<p class="text-muted-foreground text-sm">Configure a URL for handling webhook events.</p>
+	</div>
 </div>
diff --git a/src/lib/components/settings/sidebar.svelte b/src/lib/components/settings/sidebar.svelte
index 20af3d7..7dae13b 100644
--- a/src/lib/components/settings/sidebar.svelte
+++ b/src/lib/components/settings/sidebar.svelte
@@ -18,7 +18,7 @@
 	let { pages }: Props = $props();
 </script>
 
-<div class="flex flex-col w-48 h-full">
+<div class="flex flex-col w-48 h-full fixed">
 	{#each pages as page}
 		<Tabs.Trigger value={page.name}>
 			{#snippet child({ props })}
diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..e86a25b
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..b436056
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..9943f83
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..f31b8ae
--- /dev/null
+++ b/src/lib/components/ui/select/index.ts
@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import GroupHeading from "./select-group-heading.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+
+export {
+	Root,
+	Group,
+	GroupHeading,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	GroupHeading as SelectGroupHeading,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+};
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..56916ef
--- /dev/null
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>
diff --git a/src/lib/components/ui/select/select-group-heading.svelte b/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..7984bef
--- /dev/null
+++ b/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupHeadingProps = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..c3a77db
--- /dev/null
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<Check class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/src/lib/components/ui/select/select-scroll-down-button.svelte b/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..b927d62
--- /dev/null
+++ b/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDown class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/src/lib/components/ui/select/select-scroll-up-button.svelte b/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..b8939ba
--- /dev/null
+++ b/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import ChevronUp from "lucide-svelte/icons/chevron-up";
+	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUp class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..38a3ab0
--- /dev/null
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..f917f13
--- /dev/null
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDown class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

From 4bc1e7424eecdef50a48826060eba76cca88bf0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Thu, 28 Nov 2024 18:49:23 +0100
Subject: [PATCH 06/12] feat(hotkeys): add hotkeys to open settings dialog

---
 .../components/dialogs/settings-dialog.svelte |  6 +++-
 src/lib/services/hotkeys-service.ts           | 31 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/services/hotkeys-service.ts

diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
index e2951b4..3db1f3d 100644
--- a/src/lib/components/dialogs/settings-dialog.svelte
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -3,7 +3,8 @@
 </script>
 
 <script lang="ts">
-	import type { Component } from "svelte";
+	import { onMount, onDestroy, type Component } from "svelte";
+  import { addHotkey, removeHotkey } from "$lib/services/hotkeys-service";
 	import { Separator } from "$lib/components/ui/separator";
 	import { ScrollArea } from "$lib/components/ui/scroll-area";
 	import * as Dialog from "$lib/components/ui/dialog";
@@ -33,6 +34,9 @@
 		{ name: "security", label: "Security", icon: "fa-shield", page: SecurityPage },
 		{ name: "billing", label: "Billing", icon: "fa-money-bill", page: BillingPage },
 	];
+
+  onMount(() => addHotkey("meta+,", () => settingsDialog.open = true));
+  onDestroy(() => removeHotkey("meta+,"));
 </script>
 
 <Dialog.Root bind:open={settingsDialog.open}>
diff --git a/src/lib/services/hotkeys-service.ts b/src/lib/services/hotkeys-service.ts
new file mode 100644
index 0000000..85143a2
--- /dev/null
+++ b/src/lib/services/hotkeys-service.ts
@@ -0,0 +1,31 @@
+/**
+ *
+ *
+ * Author: Elias Sjödin
+ * Created: 2024-11-28
+ */
+
+type Callback = (event: KeyboardEvent) => void;
+let hotkeys: { [key: string]: Callback } = {};
+
+export const addHotkey = (key: string, callback: Callback) => {
+	hotkeys = { ...hotkeys, [key]: callback };
+}
+
+export const removeHotkey = (key: string) => {
+	delete hotkeys[key];
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  const key = event.key.toLowerCase();
+  const meta = event.metaKey ? "meta+" : "";
+  const shortcut = `${meta}${key}`;
+	if (hotkeys[shortcut]) hotkeys[shortcut](event);
+}
+
+const init = () => {
+  window.addEventListener("keydown", handleKeyDown);
+  return () => window.removeEventListener("keydown", handleKeyDown);
+}
+
+export const cleanup = init();

From 09aa24f495c343f75d4cc87e495f7151c1442bb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Thu, 28 Nov 2024 23:03:05 +0100
Subject: [PATCH 07/12] feat(settings): add saving/loading functionality

---
 package-lock.json                             | 10 +++
 package.json                                  |  1 +
 src-tauri/Cargo.lock                          |  1 +
 src-tauri/Cargo.toml                          |  1 +
 src-tauri/capabilities/default.json           |  7 +-
 src-tauri/src/lib.rs                          |  1 +
 src-tauri/tauri.conf.json                     |  2 +-
 .../components/dialogs/settings-dialog.svelte |  2 +-
 src/lib/services/files-service.ts             | 68 +++++++++++++++++++
 src/lib/services/settings-service.svelte.ts   | 25 +++++++
 src/lib/stores/settings-store.svelte.ts       | 18 +++++
 src/lib/utils.ts                              | 16 +++++
 src/routes/+layout.svelte                     |  2 +
 13 files changed, 150 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/services/files-service.ts
 create mode 100644 src/lib/services/settings-service.svelte.ts
 create mode 100644 src/lib/stores/settings-store.svelte.ts

diff --git a/package-lock.json b/package-lock.json
index 23136ed..035cd05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@ilittlebig/easy-auth": "^0.0.9",
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-dialog": "^2.0.1",
+        "@tauri-apps/plugin-fs": "^2.0.2",
         "@tauri-apps/plugin-process": "^2.0.0",
         "@tauri-apps/plugin-shell": "^2",
         "@tauri-apps/plugin-updater": "^2.0.0",
@@ -2563,6 +2564,15 @@
         "@tauri-apps/api": "^2.0.0"
       }
     },
+    "node_modules/@tauri-apps/plugin-fs": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-fs/-/plugin-fs-2.0.2.tgz",
+      "integrity": "sha512-4YZaX2j7ta81M5/DL8aN10kTnpUkEpkPo1FTYPT8Dd0ImHe3azM8i8MrtjrDGoyBYLPO3zFv7df/mSCYF8oA0Q==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.0.0"
+      }
+    },
     "node_modules/@tauri-apps/plugin-process": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-process/-/plugin-process-2.0.0.tgz",
diff --git a/package.json b/package.json
index 26c045c..e620adb 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@ilittlebig/easy-auth": "^0.0.9",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.0.1",
+    "@tauri-apps/plugin-fs": "^2.0.2",
     "@tauri-apps/plugin-process": "^2.0.0",
     "@tauri-apps/plugin-shell": "^2",
     "@tauri-apps/plugin-updater": "^2.0.0",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 4808cca..d6696c6 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -14,6 +14,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-dialog",
+ "tauri-plugin-fs",
  "tauri-plugin-process",
  "tauri-plugin-shell",
  "tauri-plugin-updater",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 71c53db..1ac9d8f 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -20,6 +20,7 @@ serde_json = "1"
 rand = "0.8.5"
 tauri-plugin-dialog = "2"
 tauri-plugin-process = "2"
+tauri-plugin-fs = "2"
 
 [target.'cfg(target_os = "macos")'.dependencies]
 cocoa = "0.25.0"
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 4c42458..5af2c15 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -11,6 +11,9 @@
     "core:window:default",
     "core:window:allow-start-dragging",
     "dialog:default",
-    "process:default"
+    "process:default",
+    "fs:default",
+		"fs:allow-appdata-write",
+		"fs:allow-appdata-read"
   ]
-}
\ No newline at end of file
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 071c7bf..7c76326 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -12,6 +12,7 @@ use plugins::tauri_traffic_light_positioner_plugin;
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_updater::Builder::new().build())
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 1f8901a..6e0ace8 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
-  "identifier": "com.jaafar.app",
+  "identifier": "com.jaafar.application",
   "build": {
     "beforeDevCommand": "npm run dev",
     "devUrl": "http://localhost:1420",
diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
index 3db1f3d..1b6aa82 100644
--- a/src/lib/components/dialogs/settings-dialog.svelte
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -1,5 +1,5 @@
 <script module>
-	export let settingsDialog = $state({ open: true });
+	export let settingsDialog = $state({ open: false });
 </script>
 
 <script lang="ts">
diff --git a/src/lib/services/files-service.ts b/src/lib/services/files-service.ts
new file mode 100644
index 0000000..1432a4d
--- /dev/null
+++ b/src/lib/services/files-service.ts
@@ -0,0 +1,68 @@
+/**
+ *
+ *
+ * Author: Elias Sjödin
+ * Created: 2024-11-28
+ */
+
+import { appDataDir, BaseDirectory } from "@tauri-apps/api/path";
+import {
+  mkdir,
+  writeTextFile,
+  readTextFile,
+  exists,
+} from "@tauri-apps/plugin-fs";
+
+export const writeFile = async (fileName: string, data: any) => {
+  try {
+    const appDirExists = await exists("", { baseDir: BaseDirectory.AppData });
+    if (!appDirExists) {
+      const appDataDirPath = await appDataDir();
+      await mkdir(appDataDirPath);
+    }
+    writeTextFile(fileName, data, { baseDir: BaseDirectory.AppData });
+  } catch (err) {
+    console.log("Could not write to file: " + fileName, err)
+  }
+}
+
+export const writeFileJSON = async (fileName: string, data: any) => {
+  try {
+    await writeFile(fileName, JSON.stringify(data, null, 4));
+  } catch (err) {
+    console.log("Could not write JSON to file: " + fileName, err)
+  }
+}
+
+export const writeFileToPath = async (fileName: string, data: any) => {
+  try {
+    writeTextFile(fileName, data, { baseDir: BaseDirectory.Home });
+  } catch (err) {
+    console.log("Could not write to file: " + fileName, err)
+  }
+}
+
+export const readFile = async (fileName: string) => {
+  try {
+    const fileExists = await exists(fileName, { baseDir: BaseDirectory.AppData });
+    if (!fileExists) return;
+
+    const fileContent = await readTextFile(
+      fileName,
+      { baseDir: BaseDirectory.AppData }
+    );
+    return fileContent;
+  } catch (err) {
+    console.log("Could not read file: " + fileName, err)
+  }
+}
+
+export const readFileJSON = async (fileName: string) => {
+  try {
+    const fileContent = await readFile(fileName);
+    if (!fileContent) return;
+    return JSON.parse(fileContent);
+  } catch (err) {
+    console.log("Could not read JSON file: " + fileName, err)
+  }
+}
diff --git a/src/lib/services/settings-service.svelte.ts b/src/lib/services/settings-service.svelte.ts
new file mode 100644
index 0000000..3aa350d
--- /dev/null
+++ b/src/lib/services/settings-service.svelte.ts
@@ -0,0 +1,25 @@
+/**
+ *
+ *
+ * Author: Elias Sjödin
+ * Created: 2024-11-28
+ */
+
+import { readFileJSON, writeFileJSON } from "$lib/services/files-service"
+import { settingsStore } from "$lib/stores/settings-store.svelte";
+import { deepMerge } from "$lib/utils"
+
+export const loadSettings = async () => {
+	const settings = await readFileJSON("settings.json");
+	if (settings) {
+		const mergedSettings = deepMerge({ ...settingsStore }, settings);
+		for (const key in mergedSettings) {
+			settingsStore[key] = mergedSettings[key];
+		}
+	}
+	await saveSettings();
+}
+
+export const saveSettings = async () => {
+	await writeFileJSON("settings.json", settingsStore);
+}
diff --git a/src/lib/stores/settings-store.svelte.ts b/src/lib/stores/settings-store.svelte.ts
new file mode 100644
index 0000000..a7ccf4f
--- /dev/null
+++ b/src/lib/stores/settings-store.svelte.ts
@@ -0,0 +1,18 @@
+/**
+ *
+ *
+ * Author: Elias Sjödin
+ * Created: 2024-11-28
+ */
+
+export let settingsStore: { [key: string]: Record<string, any> } = $state({
+	integration: {
+		captcha_solver: undefined,
+		captcha_solver_api_key: undefined,
+		request_delay: 3000,
+		entry_limit: 10,
+		imap_email: undefined,
+		imap_password: undefined,
+		webhook: undefined,
+	},
+});
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ac680b3..1e5d26c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,22 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
+type Obj = { [key: string]: Record<string, any> };
+
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
+
+export const deepMerge = (target: Obj, source: Obj) => {
+	for (const key in source) {
+		if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+			if (!target[key] || typeof target[key] !== "object") {
+				target[key] = {};
+			}
+			deepMerge(target[key], source[key]);
+		} else {
+			target[key] = source[key];
+		}
+	}
+	return target;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f4fe034..0b750bc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onDestroy, onMount } from "svelte";
 	import { checkForUpdates } from "$lib/services/updater-service";
+	import { loadSettings } from "$lib/services/settings-service.svelte";
   import Titlebar from "$lib/components/titlebar.svelte";
   import "../app.css";
 
@@ -8,6 +9,7 @@
 	let { children } = $props();
 
 	onMount(async () => {
+		await loadSettings();
 		await checkForUpdates();
 		updateInterval = setInterval(checkForUpdates, 12 * 60 * 60 * 1000);
 	});

From 54bb21d882161ff8c4b99f3d3958c0ec86bf5331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Fri, 29 Nov 2024 09:44:07 +0100
Subject: [PATCH 08/12] form(settings): working validation

---
 .../components/dialogs/settings-dialog.svelte | 65 +++++++++++++++----
 .../settings/integration-page.svelte          | 44 ++++++++++---
 src/lib/schemas/settings.ts                   | 34 ++++++++++
 src/lib/services/settings-service.svelte.ts   | 29 +++++++--
 src/lib/stores/settings-store.svelte.ts       |  4 +-
 5 files changed, 146 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/schemas/settings.ts

diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
index 1b6aa82..4d1fdba 100644
--- a/src/lib/components/dialogs/settings-dialog.svelte
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -4,7 +4,12 @@
 
 <script lang="ts">
 	import { onMount, onDestroy, type Component } from "svelte";
+	import { superForm } from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
   import { addHotkey, removeHotkey } from "$lib/services/hotkeys-service";
+  import { settingsSchema } from "$lib/schemas/settings";
+	import { settingsStore } from "$lib/stores/settings-store.svelte";
+	import { saveSettings } from "$lib/services/settings-service.svelte";
 	import { Separator } from "$lib/components/ui/separator";
 	import { ScrollArea } from "$lib/components/ui/scroll-area";
 	import * as Dialog from "$lib/components/ui/dialog";
@@ -22,9 +27,25 @@
 		name: string;
 		label: string;
 		icon: string;
-		page: Component
+		page: Component<any, {}, any>;
 	}
 
+	let currentTab: string | undefined = $state(undefined);
+
+	const form = superForm(settingsStore, {
+		dataType: "json",
+    SPA: true,
+    resetForm: false,
+    validators: zodClient(settingsSchema),
+  });
+
+	const {
+		form: formData,
+		enhance,
+		allErrors,
+		submit
+	} = form;
+
 	const pages: Page[] = [
 		{ name: "account-settings", label: "Account Settings", icon: "fa-user", page: AccountSettingsPage },
 		{ name: "notifications", label: "Notifications", icon: "fa-bell", page: NotificationsPage },
@@ -35,11 +56,24 @@
 		{ name: "billing", label: "Billing", icon: "fa-money-bill", page: BillingPage },
 	];
 
+	const onValueChange = async (value: string) => {
+		submit();
+		if ($allErrors.length > 0) return;
+		currentTab = value;
+	}
+
+	const onOpenChange = async (value: boolean) => {
+		submit();
+		if ($allErrors.length > 0) return;
+		settingsDialog.open = value;
+		await saveSettings($formData);
+	}
+
   onMount(() => addHotkey("meta+,", () => settingsDialog.open = true));
   onDestroy(() => removeHotkey("meta+,"));
 </script>
 
-<Dialog.Root bind:open={settingsDialog.open}>
+<Dialog.Root controlledOpen bind:open={settingsDialog.open} {onOpenChange}>
 	<Dialog.Content class="max-w-[800px] max-h-[650px] h-full flex flex-col px-0 pt-6 pb-0 gap-0">
 		<Dialog.Header class="h-fit px-6">
 			<Dialog.Title>Settings</Dialog.Title>
@@ -48,16 +82,23 @@
 			</div>
 		</Dialog.Header>
 		<ScrollArea class="h-full" scrollHideDelay={0}>
-			<Tabs.Root value={pages[0].name} class="flex gap-x-4 h-full pb-6 px-6 pt-4">
-				<Sidebar {pages} />
-				<div class="ml-52 w-full">
-					{#each pages as { name, page: Page }}
-						<Tabs.Content value={name} class="w-full">
-							<Page />
-						</Tabs.Content>
-					{/each}
-				</div>
-			</Tabs.Root>
+			<form method="POST" use:enhance>
+				<Tabs.Root
+					controlledValue
+					{onValueChange}
+					value={currentTab ?? pages[0].name}
+					class="flex gap-x-4 h-full pb-6 px-6 pt-4"
+				>
+					<Sidebar {pages} />
+					<div class="ml-52 w-full">
+							{#each pages as { name, page: Page }}
+								<Tabs.Content value={name} class="w-full">
+									<Page {form} {formData} />
+								</Tabs.Content>
+							{/each}
+					</div>
+				</Tabs.Root>
+			</form>
 		</ScrollArea>
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/src/lib/components/settings/integration-page.svelte b/src/lib/components/settings/integration-page.svelte
index d2ee91e..860f6db 100644
--- a/src/lib/components/settings/integration-page.svelte
+++ b/src/lib/components/settings/integration-page.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
+	import type { SuperForm } from "sveltekit-superforms";
+	import type { SettingsSchema } from "$lib/schemas/settings";
 	import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
   import { Separator } from "$lib/components/ui/separator";
 	import * as Select from "$lib/components/ui/select";
+	import * as Form from "$lib/components/ui/form";
 
 	interface SelectType {
 		value: string;
 		label: string;
 	}
 
+	interface Props {
+		form: SuperForm<SettingsSchema>;
+		formData: SvelteStore<SettingsSchema>;
+	}
+
 	const captchaSolvers = [
 		{ value: "cap-solver", label: "CapSolver" },
 		{ value: "anti-captcha", label: "Anti-Captcha" },
@@ -28,6 +36,8 @@
       ? captchaSolvers.find((captcha: SelectType) => captcha.value === captchaValue)?.label
       : "Select a captcha solver"
   );
+
+	let { form, formData }: Props = $props();
 </script>
 
 <div class="flex flex-col gap-y-6 h-full">
@@ -50,16 +60,30 @@
 		</div>
 	{/if}
 	<Separator />
-	<div class="flex w-full flex-col gap-1.5">
-		<Label for="request-delay">Request Delay</Label>
-		<Input id="request-delay" placeholder="3000" />
-		<p class="text-muted-foreground text-sm">Configure the delay (in milliseconds) between automated actions.</p>
-	</div>
-	<div class="flex w-full flex-col gap-1.5">
-		<Label for="entry-limit">Entry Limit</Label>
-		<Input id="entry-limit" placeholder="10" />
-		<p class="text-muted-foreground text-sm">Sets the maximum number of entries/tasks to process per request.</p>
-	</div>
+	<Form.Field name="integration.request_delay" {form}>
+		<Form.Control>
+			{#snippet children({ props })}
+				<div class="flex w-full flex-col gap-1.5">
+					<Form.Label>Request Delay</Form.Label>
+					<Input {...props} placeholder="3000" bind:value={$formData.integration.request_delay} />
+					<p class="text-muted-foreground text-sm">Configure the delay (in milliseconds) between automated actions.</p>
+				</div>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field name="integration.entry_limit" {form}>
+		<Form.Control>
+			{#snippet children({ props })}
+				<div class="flex w-full flex-col gap-1.5">
+					<Form.Label>Entry Limit</Form.Label>
+					<Input {...props} placeholder="10" bind:value={$formData.integration.entry_limit} />
+					<p class="text-muted-foreground text-sm">Sets the maximum number of entries/tasks to process per request.</p>
+				</div>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
 	<Separator />
 	<div class="flex w-full flex-col gap-1.5">
 		<Label for="imap-email">IMAP Email</Label>
diff --git a/src/lib/schemas/settings.ts b/src/lib/schemas/settings.ts
new file mode 100644
index 0000000..a894674
--- /dev/null
+++ b/src/lib/schemas/settings.ts
@@ -0,0 +1,34 @@
+/**
+ *
+ *
+ * Author: Elias Sjödin
+ * Created: 2024-11-28
+ */
+
+import { z } from "zod";
+
+const integrationSchema = z.object({
+	captcha_solver: z.string().optional(),
+	captcha_solver_api_key: z.string().optional(),
+	request_delay: z.coerce
+		.number({ invalid_type_error: "Request delay must be a valid number" })
+		.min(1000, { message: "Request delay must be at least 1000ms" }),
+	entry_limit: z.coerce
+		.number({ invalid_type_error: "Entry limit must be a valid number" })
+		.min(1, { message: "Entry limit must be at least 1" }),
+	imap_email: z
+		.string()
+		.email({ message: "Invalid email format" })
+		.optional(),
+	imap_password: z.string().optional(),
+	webhook: z
+		.string()
+		.url({ message: "Webhook must be a valid URL" })
+		.optional(),
+});
+
+export const settingsSchema = z.object({
+  integration: integrationSchema,
+});
+
+export type SettingsSchema = z.infer<typeof settingsSchema>;
diff --git a/src/lib/services/settings-service.svelte.ts b/src/lib/services/settings-service.svelte.ts
index 3aa350d..aac2611 100644
--- a/src/lib/services/settings-service.svelte.ts
+++ b/src/lib/services/settings-service.svelte.ts
@@ -6,20 +6,35 @@
  */
 
 import { readFileJSON, writeFileJSON } from "$lib/services/files-service"
-import { settingsStore } from "$lib/stores/settings-store.svelte";
+import { settingsStore, type Settings } from "$lib/stores/settings-store.svelte";
 import { deepMerge } from "$lib/utils"
 
+const updateSettingsStore = (settings: Settings) => {
+	for (const key in settings) {
+		if (typeof settings[key] === "object" && settings[key] !== null) {
+			settingsStore[key] = {
+				...settingsStore[key],
+				...settings[key],
+			};
+		} else {
+			settingsStore[key] = settings[key];
+		}
+	}
+};
+
 export const loadSettings = async () => {
 	const settings = await readFileJSON("settings.json");
 	if (settings) {
-		const mergedSettings = deepMerge({ ...settingsStore }, settings);
-		for (const key in mergedSettings) {
-			settingsStore[key] = mergedSettings[key];
-		}
+		const mergedSettings = deepMerge(settingsStore, settings);
+		updateSettingsStore(mergedSettings);
 	}
 	await saveSettings();
 }
 
-export const saveSettings = async () => {
-	await writeFileJSON("settings.json", settingsStore);
+export const saveSettings = async (settings?: Settings) => {
+	if (settings) {
+		const updatedSettings = deepMerge(settingsStore, settings);
+		updateSettingsStore(updatedSettings);
+	}
+	await writeFileJSON("settings.json", settings || settingsStore);
 }
diff --git a/src/lib/stores/settings-store.svelte.ts b/src/lib/stores/settings-store.svelte.ts
index a7ccf4f..bd8d66d 100644
--- a/src/lib/stores/settings-store.svelte.ts
+++ b/src/lib/stores/settings-store.svelte.ts
@@ -5,7 +5,9 @@
  * Created: 2024-11-28
  */
 
-export let settingsStore: { [key: string]: Record<string, any> } = $state({
+export type Settings = { [key: string]: Record<string, any> };
+
+export let settingsStore: Settings = $state({
 	integration: {
 		captcha_solver: undefined,
 		captcha_solver_api_key: undefined,

From 19613841be422cce4d26f9e1c39f14f733b25ba0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Fri, 29 Nov 2024 09:44:07 +0100
Subject: [PATCH 09/12] feat(settings): working validation

---
 .../components/dialogs/settings-dialog.svelte | 65 +++++++++++++++----
 .../settings/integration-page.svelte          | 44 ++++++++++---
 src/lib/schemas/settings.ts                   | 34 ++++++++++
 src/lib/services/settings-service.svelte.ts   | 29 +++++++--
 src/lib/stores/settings-store.svelte.ts       |  4 +-
 5 files changed, 146 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/schemas/settings.ts

diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
index 1b6aa82..4d1fdba 100644
--- a/src/lib/components/dialogs/settings-dialog.svelte
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -4,7 +4,12 @@
 
 <script lang="ts">
 	import { onMount, onDestroy, type Component } from "svelte";
+	import { superForm } from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
   import { addHotkey, removeHotkey } from "$lib/services/hotkeys-service";
+  import { settingsSchema } from "$lib/schemas/settings";
+	import { settingsStore } from "$lib/stores/settings-store.svelte";
+	import { saveSettings } from "$lib/services/settings-service.svelte";
 	import { Separator } from "$lib/components/ui/separator";
 	import { ScrollArea } from "$lib/components/ui/scroll-area";
 	import * as Dialog from "$lib/components/ui/dialog";
@@ -22,9 +27,25 @@
 		name: string;
 		label: string;
 		icon: string;
-		page: Component
+		page: Component<any, {}, any>;
 	}
 
+	let currentTab: string | undefined = $state(undefined);
+
+	const form = superForm(settingsStore, {
+		dataType: "json",
+    SPA: true,
+    resetForm: false,
+    validators: zodClient(settingsSchema),
+  });
+
+	const {
+		form: formData,
+		enhance,
+		allErrors,
+		submit
+	} = form;
+
 	const pages: Page[] = [
 		{ name: "account-settings", label: "Account Settings", icon: "fa-user", page: AccountSettingsPage },
 		{ name: "notifications", label: "Notifications", icon: "fa-bell", page: NotificationsPage },
@@ -35,11 +56,24 @@
 		{ name: "billing", label: "Billing", icon: "fa-money-bill", page: BillingPage },
 	];
 
+	const onValueChange = async (value: string) => {
+		submit();
+		if ($allErrors.length > 0) return;
+		currentTab = value;
+	}
+
+	const onOpenChange = async (value: boolean) => {
+		submit();
+		if ($allErrors.length > 0) return;
+		settingsDialog.open = value;
+		await saveSettings($formData);
+	}
+
   onMount(() => addHotkey("meta+,", () => settingsDialog.open = true));
   onDestroy(() => removeHotkey("meta+,"));
 </script>
 
-<Dialog.Root bind:open={settingsDialog.open}>
+<Dialog.Root controlledOpen bind:open={settingsDialog.open} {onOpenChange}>
 	<Dialog.Content class="max-w-[800px] max-h-[650px] h-full flex flex-col px-0 pt-6 pb-0 gap-0">
 		<Dialog.Header class="h-fit px-6">
 			<Dialog.Title>Settings</Dialog.Title>
@@ -48,16 +82,23 @@
 			</div>
 		</Dialog.Header>
 		<ScrollArea class="h-full" scrollHideDelay={0}>
-			<Tabs.Root value={pages[0].name} class="flex gap-x-4 h-full pb-6 px-6 pt-4">
-				<Sidebar {pages} />
-				<div class="ml-52 w-full">
-					{#each pages as { name, page: Page }}
-						<Tabs.Content value={name} class="w-full">
-							<Page />
-						</Tabs.Content>
-					{/each}
-				</div>
-			</Tabs.Root>
+			<form method="POST" use:enhance>
+				<Tabs.Root
+					controlledValue
+					{onValueChange}
+					value={currentTab ?? pages[0].name}
+					class="flex gap-x-4 h-full pb-6 px-6 pt-4"
+				>
+					<Sidebar {pages} />
+					<div class="ml-52 w-full">
+							{#each pages as { name, page: Page }}
+								<Tabs.Content value={name} class="w-full">
+									<Page {form} {formData} />
+								</Tabs.Content>
+							{/each}
+					</div>
+				</Tabs.Root>
+			</form>
 		</ScrollArea>
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/src/lib/components/settings/integration-page.svelte b/src/lib/components/settings/integration-page.svelte
index d2ee91e..860f6db 100644
--- a/src/lib/components/settings/integration-page.svelte
+++ b/src/lib/components/settings/integration-page.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
+	import type { SuperForm } from "sveltekit-superforms";
+	import type { SettingsSchema } from "$lib/schemas/settings";
 	import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
   import { Separator } from "$lib/components/ui/separator";
 	import * as Select from "$lib/components/ui/select";
+	import * as Form from "$lib/components/ui/form";
 
 	interface SelectType {
 		value: string;
 		label: string;
 	}
 
+	interface Props {
+		form: SuperForm<SettingsSchema>;
+		formData: SvelteStore<SettingsSchema>;
+	}
+
 	const captchaSolvers = [
 		{ value: "cap-solver", label: "CapSolver" },
 		{ value: "anti-captcha", label: "Anti-Captcha" },
@@ -28,6 +36,8 @@
       ? captchaSolvers.find((captcha: SelectType) => captcha.value === captchaValue)?.label
       : "Select a captcha solver"
   );
+
+	let { form, formData }: Props = $props();
 </script>
 
 <div class="flex flex-col gap-y-6 h-full">
@@ -50,16 +60,30 @@
 		</div>
 	{/if}
 	<Separator />
-	<div class="flex w-full flex-col gap-1.5">
-		<Label for="request-delay">Request Delay</Label>
-		<Input id="request-delay" placeholder="3000" />
-		<p class="text-muted-foreground text-sm">Configure the delay (in milliseconds) between automated actions.</p>
-	</div>
-	<div class="flex w-full flex-col gap-1.5">
-		<Label for="entry-limit">Entry Limit</Label>
-		<Input id="entry-limit" placeholder="10" />
-		<p class="text-muted-foreground text-sm">Sets the maximum number of entries/tasks to process per request.</p>
-	</div>
+	<Form.Field name="integration.request_delay" {form}>
+		<Form.Control>
+			{#snippet children({ props })}
+				<div class="flex w-full flex-col gap-1.5">
+					<Form.Label>Request Delay</Form.Label>
+					<Input {...props} placeholder="3000" bind:value={$formData.integration.request_delay} />
+					<p class="text-muted-foreground text-sm">Configure the delay (in milliseconds) between automated actions.</p>
+				</div>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field name="integration.entry_limit" {form}>
+		<Form.Control>
+			{#snippet children({ props })}
+				<div class="flex w-full flex-col gap-1.5">
+					<Form.Label>Entry Limit</Form.Label>
+					<Input {...props} placeholder="10" bind:value={$formData.integration.entry_limit} />
+					<p class="text-muted-foreground text-sm">Sets the maximum number of entries/tasks to process per request.</p>
+				</div>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
 	<Separator />
 	<div class="flex w-full flex-col gap-1.5">
 		<Label for="imap-email">IMAP Email</Label>
diff --git a/src/lib/schemas/settings.ts b/src/lib/schemas/settings.ts
new file mode 100644
index 0000000..a894674
--- /dev/null
+++ b/src/lib/schemas/settings.ts
@@ -0,0 +1,34 @@
+/**
+ *
+ *
+ * Author: Elias Sjödin
+ * Created: 2024-11-28
+ */
+
+import { z } from "zod";
+
+const integrationSchema = z.object({
+	captcha_solver: z.string().optional(),
+	captcha_solver_api_key: z.string().optional(),
+	request_delay: z.coerce
+		.number({ invalid_type_error: "Request delay must be a valid number" })
+		.min(1000, { message: "Request delay must be at least 1000ms" }),
+	entry_limit: z.coerce
+		.number({ invalid_type_error: "Entry limit must be a valid number" })
+		.min(1, { message: "Entry limit must be at least 1" }),
+	imap_email: z
+		.string()
+		.email({ message: "Invalid email format" })
+		.optional(),
+	imap_password: z.string().optional(),
+	webhook: z
+		.string()
+		.url({ message: "Webhook must be a valid URL" })
+		.optional(),
+});
+
+export const settingsSchema = z.object({
+  integration: integrationSchema,
+});
+
+export type SettingsSchema = z.infer<typeof settingsSchema>;
diff --git a/src/lib/services/settings-service.svelte.ts b/src/lib/services/settings-service.svelte.ts
index 3aa350d..aac2611 100644
--- a/src/lib/services/settings-service.svelte.ts
+++ b/src/lib/services/settings-service.svelte.ts
@@ -6,20 +6,35 @@
  */
 
 import { readFileJSON, writeFileJSON } from "$lib/services/files-service"
-import { settingsStore } from "$lib/stores/settings-store.svelte";
+import { settingsStore, type Settings } from "$lib/stores/settings-store.svelte";
 import { deepMerge } from "$lib/utils"
 
+const updateSettingsStore = (settings: Settings) => {
+	for (const key in settings) {
+		if (typeof settings[key] === "object" && settings[key] !== null) {
+			settingsStore[key] = {
+				...settingsStore[key],
+				...settings[key],
+			};
+		} else {
+			settingsStore[key] = settings[key];
+		}
+	}
+};
+
 export const loadSettings = async () => {
 	const settings = await readFileJSON("settings.json");
 	if (settings) {
-		const mergedSettings = deepMerge({ ...settingsStore }, settings);
-		for (const key in mergedSettings) {
-			settingsStore[key] = mergedSettings[key];
-		}
+		const mergedSettings = deepMerge(settingsStore, settings);
+		updateSettingsStore(mergedSettings);
 	}
 	await saveSettings();
 }
 
-export const saveSettings = async () => {
-	await writeFileJSON("settings.json", settingsStore);
+export const saveSettings = async (settings?: Settings) => {
+	if (settings) {
+		const updatedSettings = deepMerge(settingsStore, settings);
+		updateSettingsStore(updatedSettings);
+	}
+	await writeFileJSON("settings.json", settings || settingsStore);
 }
diff --git a/src/lib/stores/settings-store.svelte.ts b/src/lib/stores/settings-store.svelte.ts
index a7ccf4f..bd8d66d 100644
--- a/src/lib/stores/settings-store.svelte.ts
+++ b/src/lib/stores/settings-store.svelte.ts
@@ -5,7 +5,9 @@
  * Created: 2024-11-28
  */
 
-export let settingsStore: { [key: string]: Record<string, any> } = $state({
+export type Settings = { [key: string]: Record<string, any> };
+
+export let settingsStore: Settings = $state({
 	integration: {
 		captcha_solver: undefined,
 		captcha_solver_api_key: undefined,

From fd879520b6f33e81e63611eb4ef213bdd618af83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Fri, 29 Nov 2024 11:08:06 +0100
Subject: [PATCH 10/12] feat(settings): correctly loads data from settings.json
 file

---
 src/lib/components/dialogs/settings-dialog.svelte | 12 +++++++++---
 src/lib/services/settings-service.svelte.ts       |  3 ++-
 src/lib/stores/settings-store.svelte.ts           |  2 ++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/dialogs/settings-dialog.svelte b/src/lib/components/dialogs/settings-dialog.svelte
index 4d1fdba..ab05781 100644
--- a/src/lib/components/dialogs/settings-dialog.svelte
+++ b/src/lib/components/dialogs/settings-dialog.svelte
@@ -8,8 +8,8 @@
 	import { zodClient } from "sveltekit-superforms/adapters";
   import { addHotkey, removeHotkey } from "$lib/services/hotkeys-service";
   import { settingsSchema } from "$lib/schemas/settings";
-	import { settingsStore } from "$lib/stores/settings-store.svelte";
-	import { saveSettings } from "$lib/services/settings-service.svelte";
+	import { settingsLoaded, settingsStore } from "$lib/stores/settings-store.svelte";
+	import { loadSettings, saveSettings } from "$lib/services/settings-service.svelte";
 	import { Separator } from "$lib/components/ui/separator";
 	import { ScrollArea } from "$lib/components/ui/scroll-area";
 	import * as Dialog from "$lib/components/ui/dialog";
@@ -69,7 +69,13 @@
 		await saveSettings($formData);
 	}
 
-  onMount(() => addHotkey("meta+,", () => settingsDialog.open = true));
+	onMount(async () => {
+		addHotkey("meta+,", () => settingsDialog.open = true);
+		if (settingsLoaded.value) return;
+		await loadSettings();
+		formData.set(settingsStore);
+	});
+
   onDestroy(() => removeHotkey("meta+,"));
 </script>
 
diff --git a/src/lib/services/settings-service.svelte.ts b/src/lib/services/settings-service.svelte.ts
index aac2611..64b8c87 100644
--- a/src/lib/services/settings-service.svelte.ts
+++ b/src/lib/services/settings-service.svelte.ts
@@ -6,7 +6,7 @@
  */
 
 import { readFileJSON, writeFileJSON } from "$lib/services/files-service"
-import { settingsStore, type Settings } from "$lib/stores/settings-store.svelte";
+import { settingsStore, settingsLoaded, type Settings } from "$lib/stores/settings-store.svelte";
 import { deepMerge } from "$lib/utils"
 
 const updateSettingsStore = (settings: Settings) => {
@@ -29,6 +29,7 @@ export const loadSettings = async () => {
 		updateSettingsStore(mergedSettings);
 	}
 	await saveSettings();
+	settingsLoaded.value = true;
 }
 
 export const saveSettings = async (settings?: Settings) => {
diff --git a/src/lib/stores/settings-store.svelte.ts b/src/lib/stores/settings-store.svelte.ts
index bd8d66d..433e8bf 100644
--- a/src/lib/stores/settings-store.svelte.ts
+++ b/src/lib/stores/settings-store.svelte.ts
@@ -18,3 +18,5 @@ export let settingsStore: Settings = $state({
 		webhook: undefined,
 	},
 });
+
+export let settingsLoaded = $state({ value: false });

From 1f341ab31cd833b8ccee58ea46262cb81c2fa929 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Fri, 29 Nov 2024 12:26:04 +0100
Subject: [PATCH 11/12] feat(settings): add all settings for the integration
 page, no real functionality

---
 .../settings/integration-page.svelte          | 103 ++++++++++++------
 src/lib/schemas/settings.ts                   |  27 +++--
 2 files changed, 83 insertions(+), 47 deletions(-)

diff --git a/src/lib/components/settings/integration-page.svelte b/src/lib/components/settings/integration-page.svelte
index 860f6db..2e0498d 100644
--- a/src/lib/components/settings/integration-page.svelte
+++ b/src/lib/components/settings/integration-page.svelte
@@ -30,34 +30,46 @@
 		{ value: "captcha-solutions", label: "CaptchaSolutions" },
 	];
 
-  let captchaValue = $state<string>("");
+	let { form, formData }: Props = $props();
 	const selectedCaptcha = $derived(
-    captchaValue
-      ? captchaSolvers.find((captcha: SelectType) => captcha.value === captchaValue)?.label
+			$formData.integration.captcha_solver
+      ? captchaSolvers.find((captcha: SelectType) => captcha.value === $formData.integration.captcha_solver)?.label
       : "Select a captcha solver"
   );
-
-	let { form, formData }: Props = $props();
 </script>
 
 <div class="flex flex-col gap-y-6 h-full">
-	<div class="flex w-full flex-col gap-1.5">
-		<Label>Captcha Solver</Label>
-		<Select.Root type="single" onValueChange={v => (captchaValue = v)}>
-			<Select.Trigger>{selectedCaptcha}</Select.Trigger>
-			<Select.Content>
-				{#each captchaSolvers as captchaSolver}
-					<Select.Item value={captchaSolver.value}>{captchaSolver.label}</Select.Item>
-				{/each}
-			</Select.Content>
-		</Select.Root>
-		<p class="text-muted-foreground text-sm">Required for solving captchas on supported websites.</p>
-	</div>
-	{#if !!captchaValue}
-		<div class="flex w-full flex-col gap-1.5">
-			<Label for="captcha-api-key">Captcha API Key</Label>
-			<Input id="captcha-api-key" />
-		</div>
+	<Form.Field name="integration.captcha_solver" {form}>
+		<Form.Control>
+			{#snippet children({ props })}
+				<div class="flex w-full flex-col gap-1.5">
+					<Form.Label>Captcha Solver</Form.Label>
+					<Select.Root type="single" bind:value={$formData.integration.captcha_solver}>
+						<Select.Trigger {...props}>{selectedCaptcha}</Select.Trigger>
+						<Select.Content>
+							{#each captchaSolvers as captchaSolver}
+								<Select.Item value={captchaSolver.value}>{captchaSolver.label}</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+					<p class="text-muted-foreground text-sm">Required for solving captchas on supported websites.</p>
+				</div>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	{#if !!$formData.integration.captcha_solver}
+		<Form.Field name="integration.captcha_solver_api_key" {form}>
+			<Form.Control>
+				{#snippet children({ props })}
+					<div class="flex w-full flex-col gap-1.5">
+						<Form.Label>Captcha API Key</Form.Label>
+						<Input {...props} bind:value={$formData.integration.captcha_solver_api_key} />
+					</div>
+				{/snippet}
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
 	{/if}
 	<Separator />
 	<Form.Field name="integration.request_delay" {form}>
@@ -85,18 +97,39 @@
 		<Form.FieldErrors />
 	</Form.Field>
 	<Separator />
-	<div class="flex w-full flex-col gap-1.5">
-		<Label for="imap-email">IMAP Email</Label>
-		<Input type="email" id="imap-email" />
-	</div>
-	<div class="flex w-full flex-col gap-1.5">
-		<Label for="imap-password">IMAP Password</Label>
-		<Input type="password" id="imap-password" />
-	</div>
+	<Form.Field name="integration.imap_email" {form}>
+		<Form.Control>
+			{#snippet children({ props })}
+				<div class="flex w-full flex-col gap-1.5">
+					<Form.Label>IMAP Email</Form.Label>
+					<Input {...props} type="email" bind:value={$formData.integration.imap_email} />
+				</div>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field name="integration.imap_password" {form}>
+		<Form.Control>
+			{#snippet children({ props })}
+				<div class="flex w-full flex-col gap-1.5">
+					<Form.Label>IMAP Password</Form.Label>
+					<Input {...props} type="password" bind:value={$formData.integration.imap_password} />
+				</div>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
 	<Separator />
-	<div class="flex w-full flex-col gap-1.5">
-		<Label for="webhook">Webhook</Label>
-		<Input id="webhook" />
-		<p class="text-muted-foreground text-sm">Configure a URL for handling webhook events.</p>
-	</div>
+	<Form.Field name="integration.webhook" {form}>
+		<Form.Control>
+			{#snippet children({ props })}
+				<div class="flex w-full flex-col gap-1.5">
+					<Form.Label>Webhook</Form.Label>
+					<Input {...props} bind:value={$formData.integration.webhook} />
+					<p class="text-muted-foreground text-sm">Configure a URL for handling webhook events.</p>
+				</div>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
 </div>
diff --git a/src/lib/schemas/settings.ts b/src/lib/schemas/settings.ts
index a894674..07d7704 100644
--- a/src/lib/schemas/settings.ts
+++ b/src/lib/schemas/settings.ts
@@ -7,25 +7,28 @@
 
 import { z } from "zod";
 
+const optionalString = (schema: z.ZodString) => {
+  return z.preprocess(value => {
+    if (typeof value === "string" && value.trim() === "") {
+      return undefined;
+    }
+    return value;
+  }, schema.optional());
+}
+
 const integrationSchema = z.object({
-	captcha_solver: z.string().optional(),
-	captcha_solver_api_key: z.string().optional(),
+	captcha_solver: optionalString(z.string()),
+	captcha_solver_api_key: optionalString(z.string()),
 	request_delay: z.coerce
 		.number({ invalid_type_error: "Request delay must be a valid number" })
 		.min(1000, { message: "Request delay must be at least 1000ms" }),
 	entry_limit: z.coerce
 		.number({ invalid_type_error: "Entry limit must be a valid number" })
 		.min(1, { message: "Entry limit must be at least 1" }),
-	imap_email: z
-		.string()
-		.email({ message: "Invalid email format" })
-		.optional(),
-	imap_password: z.string().optional(),
-	webhook: z
-		.string()
-		.url({ message: "Webhook must be a valid URL" })
-		.optional(),
-});
+	imap_email: optionalString(z.string().email({ message: "Invalid email format" })),
+	imap_password: optionalString(z.string()),
+  webhook: optionalString(z.string().url({ message: "Webhook must be a valid URL" })),
+})
 
 export const settingsSchema = z.object({
   integration: integrationSchema,

From fdd17b15f7c6a871d5fe0a8e4bfa87b2bd26e1b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20Sj=C3=B6din?= <elias@amsystem.com>
Date: Fri, 29 Nov 2024 12:29:26 +0100
Subject: [PATCH 12/12] chore(minor): bump version number

---
 src-tauri/Cargo.lock | 2 +-
 src-tauri/Cargo.toml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index d6696c6..ac2f4b0 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4,7 +4,7 @@ version = 3
 
 [[package]]
 name = "Jaafar"
-version = "0.0.4"
+version = "0.0.5"
 dependencies = [
  "cocoa 0.25.0",
  "objc",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 1ac9d8f..7268d3d 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "Jaafar"
-version = "0.0.4"
+version = "0.0.5"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html