From d68d035b5213cd4c526961e61e42931a36296d7e Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 27 Apr 2024 23:34:20 +0100
Subject: [PATCH] account preferences

---
 apps/client/src/App.tsx                       |  8 +++-
 .../layouts/settings/settings-sidebar.tsx     | 10 +++--
 .../user/components/account-theme.tsx         | 45 +++++++++++++++++++
 .../settings/account/account-preferences.tsx  | 11 +++++
 4 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 apps/client/src/features/user/components/account-theme.tsx
 create mode 100644 apps/client/src/pages/settings/account/account-preferences.tsx

diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
index ee2e3c01..b56cf716 100644
--- a/apps/client/src/App.tsx
+++ b/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 />} />
diff --git a/apps/client/src/components/layouts/settings/settings-sidebar.tsx b/apps/client/src/components/layouts/settings/settings-sidebar.tsx
index ac884978..05a6f1e0 100644
--- a/apps/client/src/components/layouts/settings/settings-sidebar.tsx
+++ b/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",
+      },
     ],
   },
   {
diff --git a/apps/client/src/features/user/components/account-theme.tsx b/apps/client/src/features/user/components/account-theme.tsx
new file mode 100644
index 00000000..5f13b0c7
--- /dev/null
+++ b/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"
+    />
+  );
+}
diff --git a/apps/client/src/pages/settings/account/account-preferences.tsx b/apps/client/src/pages/settings/account/account-preferences.tsx
new file mode 100644
index 00000000..a3cf22ae
--- /dev/null
+++ b/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 />
+    </>
+  );
+}