account preferences

apps/client/src/App.tsx

@@ -21,6 +21,7 @@ import { useEffect } from "react";
 import { io } from "socket.io-client";
 import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom.ts";
 import { SOCKET_URL } from "@/features/websocket/types";
+import AccountPreferences from "@/pages/settings/account/account-preferences.tsx";
 
 export default function App() {
   const [, setSocket] = useAtom(socketAtom);
@@ -66,8 +67,11 @@ export default function App() {
         </Route>
 
         <Route path={"/settings"} element={<SettingsLayout />}>
-          <Route path={"profile"} element={<AccountSettings />} />
-          <Route path={"profile/preferences"} element={<AccountSettings />} />
+          <Route path={"account/profile"} element={<AccountSettings />} />
+          <Route
+            path={"account/preferences"}
+            element={<AccountPreferences />}
+          />
           <Route path={"workspace"} element={<WorkspaceSettings />} />
           <Route path={"members"} element={<WorkspaceMembers />} />
           <Route path={"groups"} element={<Groups />} />

apps/client/src/components/layouts/settings/settings-sidebar.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import { Group, Text, ScrollArea, ActionIcon, rem } from "@mantine/core";
 import {
-  IconFingerprint,
   IconUser,
   IconSettings,
   IconUsers,
   IconArrowLeft,
   IconUsersGroup,
   IconSpaces,
+  IconBrush,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router-dom";
 import classes from "./settings.module.css";
@@ -27,8 +27,12 @@ const groupedData: DataGroup[] = [
   {
     heading: "Account",
     items: [
-      { label: "Profile", icon: IconUser, path: "/settings/profile" },
-      { label: "Preferences", icon: IconUser, path: "/settings/preferences" },
+      { label: "Profile", icon: IconUser, path: "/settings/account/profile" },
+      {
+        label: "Preferences",
+        icon: IconBrush,
+        path: "/settings/account/preferences",
+      },
     ],
   },
   {

apps/client/src/features/user/components/account-theme.tsx

@@ -0,0 +1,45 @@
+import {
+  Group,
+  Text,
+  useMantineColorScheme,
+  Select,
+  MantineColorScheme,
+} from "@mantine/core";
+
+export default function AccountTheme() {
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Theme</Text>
+        <Text size="sm" c="dimmed">
+          Choose your preferred color scheme.
+        </Text>
+      </div>
+
+      <ThemeSwitcher />
+    </Group>
+  );
+}
+
+function ThemeSwitcher() {
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+
+  const handleChange = (value: MantineColorScheme) => {
+    setColorScheme(value);
+  };
+
+  return (
+    <Select
+      label="Select theme"
+      data={[
+        { value: "light", label: "Light" },
+        { value: "dark", label: "Dark" },
+        { value: "auto", label: "System settings" },
+      ]}
+      value={colorScheme}
+      onChange={handleChange}
+      allowDeselect={false}
+      checkIconPosition="right"
+    />
+  );
+}

apps/client/src/pages/settings/account/account-preferences.tsx

@@ -0,0 +1,11 @@
+import SettingsTitle from "@/components/layouts/settings/settings-title.tsx";
+import AccountTheme from "@/features/user/components/account-theme.tsx";
+
+export default function AccountPreferences() {
+  return (
+    <>
+      <SettingsTitle title="Preferences" />
+      <AccountTheme />
+    </>
+  );
+}