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>
+  );
+}