refactor layout

* ui polishing
* frontend and backend fixes

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

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from "react";
+import { Group, Text, ScrollArea, ActionIcon, rem } from "@mantine/core";
+import {
+  IconUser,
+  IconSettings,
+  IconUsers,
+  IconArrowLeft,
+  IconUsersGroup,
+  IconSpaces,
+  IconBrush,
+} from "@tabler/icons-react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import classes from "./settings.module.css";
+
+interface DataItem {
+  label: string;
+  icon: React.ElementType;
+  path: string;
+}
+
+interface DataGroup {
+  heading: string;
+  items: DataItem[];
+}
+
+const groupedData: DataGroup[] = [
+  {
+    heading: "Account",
+    items: [
+      { label: "Profile", icon: IconUser, path: "/settings/account/profile" },
+      {
+        label: "Preferences",
+        icon: IconBrush,
+        path: "/settings/account/preferences",
+      },
+    ],
+  },
+  {
+    heading: "Workspace",
+    items: [
+      { label: "General", icon: IconSettings, path: "/settings/workspace" },
+      {
+        label: "Members",
+        icon: IconUsers,
+        path: "/settings/members",
+      },
+      { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
+      { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
+    ],
+  },
+];
+
+export default function SettingsSidebar() {
+  const location = useLocation();
+  const [active, setActive] = useState(location.pathname);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setActive(location.pathname);
+  }, [location.pathname]);
+
+  const menuItems = groupedData.map((group) => (
+    <div key={group.heading}>
+      <Text c="dimmed" className={classes.linkHeader}>
+        {group.heading}
+      </Text>
+      {group.items.map((item) => (
+        <Link
+          className={classes.link}
+          data-active={active.startsWith(item.path) || undefined}
+          key={item.label}
+          to={item.path}
+        >
+          <item.icon className={classes.linkIcon} stroke={2} />
+          <span>{item.label}</span>
+        </Link>
+      ))}
+    </div>
+  ));
+
+  return (
+    <div className={classes.navbar}>
+      <Group className={classes.title} justify="flex-start">
+        <ActionIcon
+          onClick={() => navigate(-1)}
+          variant="transparent"
+          c="gray"
+          aria-label="Back"
+        >
+          <IconArrowLeft stroke={2} />
+        </ActionIcon>
+        <Text fw={500}>Settings</Text>
+      </Group>
+
+      <ScrollArea w="100%">{menuItems}</ScrollArea>
+    </div>
+  );
+}

apps/client/src/components/settings/settings-title.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Divider, Title } from '@mantine/core';
+
+export default function SettingsTitle({ title }: { title: string }) {
+  return (
+    <>
+      <Title order={3}>
+        {title}
+      </Title>
+      <Divider my="md" />
+    </>
+  );
+}

apps/client/src/components/settings/settings.module.css

@@ -0,0 +1,59 @@
+.navbar {
+    height: 100%;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    display: flex;
+    flex-direction: column;
+}
+
+.title {
+    padding-bottom: var(--mantine-spacing-sm);
+    border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+    padding-left: var(--mantine-spacing-xs) ;
+    min-height: 30px;
+    border-radius: var(--mantine-radius-sm);
+    font-weight: 500;
+    user-select: none;
+
+    @mixin hover {
+        background-color: light-dark(
+                var(--mantine-color-gray-1),
+                var(--mantine-color-dark-6)
+        );
+        color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    }
+
+    &[data-active] {
+        &,
+        & :hover {
+            background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
+            color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+        }
+    }
+}
+
+.linkIcon {
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    margin-right: var(--mantine-spacing-sm);
+    width: rem(16px);
+    height: rem(16px);
+}
+
+.linkHeader {
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}