feat: appearance form validation and update user appearance mode

apps/backend/pb_migrations/1707253263_updated_users.js

@@ -0,0 +1,50 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "rncq13xn",
+    "name": "appearanceMode",
+    "type": "select",
+    "required": false,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "maxSelect": 1,
+      "values": [
+        "light",
+        "dark",
+        "system"
+      ]
+    }
+  }))
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "rncq13xn",
+    "name": "appearance_mode",
+    "type": "select",
+    "required": false,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "maxSelect": 1,
+      "values": [
+        "light",
+        "dark",
+        "system"
+      ]
+    }
+  }))
+
+  return dao.saveCollection(collection)
+})

apps/web/src/routes/(dashboard)/settings/appearance/+page.server.ts

@@ -10,15 +10,16 @@ export const load: PageServerLoad = async () => {
 };
 
 export const actions: Actions = {
-	default: async (event) => {
+	default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const form = await superValidate(event, appearanceFormSchema);
+		const form = await superValidate(request, appearanceFormSchema);
+		console.log('form: ', form);
 		if (!form.valid) {
 			return fail(400, {
 				form
 			});
 		}
-		return {
+		await locals.pocketBase
-			form
+			.collection('users')
-		};
+			.update(locals.id, { appearanceMode: form.data.theme });
 	}
 };

apps/web/src/routes/(dashboard)/settings/appearance/+page.svelte

@@ -4,6 +4,7 @@
 	import AppearanceForm from './appearance-form.svelte';
 
 	export let data: PageData;
+	export let { form, user } = data;
 </script>
 
 <div class="space-y-6">
@@ -14,5 +15,5 @@
 		</p>
 	</div>
 	<Separator />
-	<AppearanceForm data={data.form} />
+	<AppearanceForm data={form} {user}  />
 </div>

apps/web/src/routes/(dashboard)/settings/appearance/appearance-form.svelte

@@ -15,7 +15,9 @@
 	import * as Form from '$lib/components/ui/form';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { dev } from '$app/environment';
+	import type { PageData } from '../$types';
 	export let data: SuperValidated<AppearanceFormSchema>;
+	export let user: PageData['user'];
 </script>
 
 <Form.Root
@@ -31,7 +33,7 @@
 			<Form.Label>Theme</Form.Label>
 			<Form.Description>Select the theme for the dashboard.</Form.Description>
 			<Form.Validation />
-			<Form.RadioGroup class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal">
+			<Form.RadioGroup class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal" value={user?.appearanceMode}>
 				<Label for="light" class="[&:has([data-state=checked])>div]:border-primary">
 					<Form.RadioItem id="light" value="light" class="sr-only" />
 					<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">