Implement user settings and dark mode toggle in layout component

- Added functionality to toggle dark mode based on user preferences, with state management and API integration for saving settings.
- Introduced a user avatar display with initials fallback and a dropdown menu for logout and dark mode options.
- Enhanced layout structure to conditionally render the header based on user authentication status.

src/routes/api/user/settings/+server.ts

@@ -0,0 +1,24 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const PATCH: RequestHandler = async ({ locals, request }) => {
+	if (!locals.user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+	let body: { darkmode?: boolean };
+	try {
+		body = await request.json();
+	} catch {
+		return json({ error: 'Invalid JSON' }, { status: 400 });
+	}
+	if (typeof body.darkmode !== 'boolean') {
+		return json({ error: 'darkmode must be a boolean' }, { status: 400 });
+	}
+	try {
+		await locals.pb.collection('users').update(locals.user.id, { darkmode: body.darkmode });
+		return json({ ok: true, darkmode: body.darkmode });
+	} catch (e) {
+		console.error('Failed to update user settings:', e);
+		return json({ error: 'Failed to update settings' }, { status: 500 });
+	}
+};