client: updates

* work on groups ui
* move settings to its own page
* other fixes and refactoring

apps/client/src/components/layouts/components/breadcrumb.tsx

@@ -66,7 +66,7 @@ export default function Breadcrumb() {
         </Anchor>,
         <Popover width={250} position="bottom" withArrow shadow="xl" key="hidden-nodes">
           <Popover.Target>
-            <ActionIcon color="gray" variant="transparent">
+            <ActionIcon c="gray" variant="transparent">
               <IconDots size={20} stroke={2} />
             </ActionIcon>
           </Popover.Target>

apps/client/src/components/layouts/dashboard/aside.tsx

@@ -0,0 +1,42 @@
+import { Box, ScrollArea, Text } from "@mantine/core";
+import CommentList from "@/features/comment/components/comment-list.tsx";
+import { useAtom } from "jotai";
+import { asideStateAtom } from "@/components/navbar/atoms/sidebar-atom.ts";
+import React from "react";
+
+export default function Aside() {
+  const [{ tab }] = useAtom(asideStateAtom);
+
+  let title;
+  let component;
+
+  switch (tab) {
+    case "comments":
+      component = <CommentList />;
+      title = "Comments";
+      break;
+    default:
+      component = null;
+      title = null;
+  }
+
+  return (
+    <Box p="md">
+      {component && (
+        <>
+          <Text mb="md" fw={500}>
+            {title}
+          </Text>
+
+          <ScrollArea
+            style={{ height: "85vh" }}
+            scrollbarSize={5}
+            type="scroll"
+          >
+            <div style={{ paddingBottom: "200px" }}>{component}</div>
+          </ScrollArea>
+        </>
+      )}
+    </Box>
+  );
+}

apps/client/src/components/layouts/dashboard/aside/aside.tsx

@@ -1,39 +0,0 @@
-import { Box, ScrollArea, Text } from '@mantine/core';
-import CommentList from '@/features/comment/components/comment-list';
-import { useAtom } from 'jotai';
-import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
-import React from 'react';
-
-export default function Aside() {
-  const [{ tab }] = useAtom(asideStateAtom);
-
-  let title;
-  let component;
-
-  switch (tab) {
-    case 'comments':
-      component = <CommentList />;
-      title = 'Comments';
-      break;
-    default:
-      component = null;
-      title = null;
-  }
-
-
-  return (
-    <Box p="md">
-      {component && (
-        <>
-          <Text mb="md" fw={500}>{title}</Text>
-
-          <ScrollArea style={{ height: '85vh' }} scrollbarSize={5} type="scroll">
-            <div style={{ paddingBottom: '200px' }}>
-              {component}
-            </div>
-          </ScrollArea>
-        </>
-      )}
-    </Box>
-  );
-}

apps/client/src/components/layouts/dashboard/dashboard-layout.tsx

@@ -1,9 +1,8 @@
-import { UserProvider } from '@/features/user/user-provider';
-import Shell from './shell';
-import { Outlet } from 'react-router-dom';
+import { UserProvider } from "@/features/user/user-provider.tsx";
+import Shell from "./shell.tsx";
+import { Outlet } from "react-router-dom";
 
 export default function DashboardLayout() {
-
   return (
     <UserProvider>
       <Shell>

apps/client/src/components/layouts/dashboard/header.tsx

@@ -1,8 +1,4 @@
-import {
-  ActionIcon,
-  Menu,
-  Button,
-} from '@mantine/core';
+import { ActionIcon, Menu, Button } from "@mantine/core";
 import {
   IconDots,
   IconFileInfo,
@@ -12,22 +8,26 @@ import {
   IconShare,
   IconTrash,
   IconMessage,
-} from '@tabler/icons-react';
-import React from 'react';
-import useToggleAside from '@/hooks/use-toggle-aside';
-import { useAtom } from 'jotai';
-import { historyAtoms } from '@/features/page-history/atoms/history-atoms';
+} from "@tabler/icons-react";
+import React from "react";
+import useToggleAside from "@/hooks/use-toggle-aside.tsx";
+import { useAtom } from "jotai";
+import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts";
 
 export default function Header() {
   const toggleAside = useToggleAside();
 
   return (
     <>
-      <Button variant="default" style={{ border: 'none' }} size="compact-sm">
+      <Button variant="default" style={{ border: "none" }} size="compact-sm">
         Share
       </Button>
 
-      <ActionIcon variant="default" style={{ border: 'none' }} onClick={() => toggleAside('comments')}>
+      <ActionIcon
+        variant="default"
+        style={{ border: "none" }}
+        onClick={() => toggleAside("comments")}
+      >
         <IconMessage size={20} stroke={2} />
       </ActionIcon>
 
@@ -53,38 +53,33 @@ function PageActionMenu() {
       arrowPosition="center"
     >
       <Menu.Target>
-        <ActionIcon variant="default" style={{ border: 'none' }}>
+        <ActionIcon variant="default" style={{ border: "none" }}>
           <IconDots size={20} stroke={2} />
         </ActionIcon>
       </Menu.Target>
 
       <Menu.Dropdown>
-        <Menu.Item
-          leftSection={<IconFileInfo size={16} stroke={2} />}>
+        <Menu.Item leftSection={<IconFileInfo size={16} stroke={2} />}>
           Page info
         </Menu.Item>
-        <Menu.Item
-          leftSection={<IconLink size={16} stroke={2} />}
-        >
+        <Menu.Item leftSection={<IconLink size={16} stroke={2} />}>
           Copy link
         </Menu.Item>
-        <Menu.Item
-          leftSection={<IconShare size={16} stroke={2} />}>
+        <Menu.Item leftSection={<IconShare size={16} stroke={2} />}>
           Share
         </Menu.Item>
         <Menu.Item
           leftSection={<IconHistory size={16} stroke={2} />}
-          onClick={openHistoryModal}>
+          onClick={openHistoryModal}
+        >
           Page history
         </Menu.Item>
 
         <Menu.Divider />
-        <Menu.Item
-          leftSection={<IconLock size={16} stroke={2} />}>
+        <Menu.Item leftSection={<IconLock size={16} stroke={2} />}>
           Lock
         </Menu.Item>
-        <Menu.Item
-          leftSection={<IconTrash size={16} stroke={2} />}>
+        <Menu.Item leftSection={<IconTrash size={16} stroke={2} />}>
           Delete
         </Menu.Item>
       </Menu.Dropdown>

apps/client/src/components/layouts/dashboard/shell.tsx

@@ -1,22 +1,25 @@
-import { asideStateAtom, desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom';
-import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar';
-import { Navbar } from '@/components/navbar/navbar';
-import { AppShell, Burger, Group } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { useAtom } from 'jotai';
-import classes from './shell.module.css';
-import Header from '@/components/layouts/header';
-import Breadcrumb from '@/components/layouts/components/breadcrumb';
-import Aside from '@/components/aside/aside';
-import { useMatchPath } from '@/hooks/use-match-path';
-import React from 'react';
+import {
+  asideStateAtom,
+  desktopSidebarAtom,
+} from "@/components/navbar/atoms/sidebar-atom.ts";
+import { useToggleSidebar } from "@/components/navbar/hooks/use-toggle-sidebar.ts";
+import { Navbar } from "@/components/navbar/navbar.tsx";
+import { AppShell, Burger, Group } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import classes from "./shell.module.css";
+import Header from "@/components/layouts/dashboard/header.tsx";
+import Breadcrumb from "@/components/layouts/components/breadcrumb.tsx";
+import Aside from "@/components/layouts/dashboard/aside.tsx";
+import { useMatchPath } from "@/hooks/use-match-path.tsx";
+import React from "react";
 
 export default function Shell({ children }: { children: React.ReactNode }) {
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const [desktopOpened] = useAtom(desktopSidebarAtom);
   const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
   const matchPath = useMatchPath();
-  const isPageRoute = matchPath('/p/:pageId');
+  const isPageRoute = matchPath("/p/:pageId");
   const [{ isAsideOpen }] = useAtom(asideStateAtom);
 
   return (
@@ -25,23 +28,25 @@ export default function Shell({ children }: { children: React.ReactNode }) {
       header={{ height: 45 }}
       navbar={{
         width: 300,
-        breakpoint: 'sm',
+        breakpoint: "sm",
         collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
       aside={{
         width: 300,
-        breakpoint: 'md',
-        collapsed: { mobile: (!isAsideOpen), desktop: (!isAsideOpen) },
+        breakpoint: "md",
+        collapsed: { mobile: !isAsideOpen, desktop: !isAsideOpen },
       }}
       padding="md"
     >
-      <AppShell.Header
-        className={classes.header}
-      >
-
+      <AppShell.Header className={classes.header}>
         <Group justify="space-between" h="100%" px="md" wrap="nowrap">
-
-          <Group h="100%" maw="60%" px="md" wrap="nowrap" style={{ overflow: 'hidden' }}>
+          <Group
+            h="100%"
+            maw="60%"
+            px="md"
+            wrap="nowrap"
+            style={{ overflow: "hidden" }}
+          >
             <Burger
               opened={mobileOpened}
               onClick={toggleMobile}
@@ -58,31 +63,25 @@ export default function Shell({ children }: { children: React.ReactNode }) {
             {isPageRoute && <Breadcrumb />}
           </Group>
 
-          {
-            isPageRoute &&
+          {isPageRoute && (
             <Group justify="flex-end" h="100%" px="md" wrap="nowrap">
               <Header />
             </Group>
-          }
+          )}
         </Group>
-
       </AppShell.Header>
 
       <AppShell.Navbar>
         <Navbar />
       </AppShell.Navbar>
 
-      <AppShell.Main>
-        {children}
-      </AppShell.Main>
+      <AppShell.Main>{children}</AppShell.Main>
 
-      {
-        isPageRoute &&
+      {isPageRoute && (
         <AppShell.Aside className={classes.aside}>
           <Aside />
         </AppShell.Aside>
-      }
-
+      )}
     </AppShell>
   );
 }

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

@@ -0,0 +1,13 @@
+import { UserProvider } from "@/features/user/user-provider.tsx";
+import { Outlet } from "react-router-dom";
+import SettingsShell from "@/components/layouts/settings/settings-shell.tsx";
+
+export default function SettingsLayout() {
+  return (
+    <UserProvider>
+      <SettingsShell>
+        <Outlet />
+      </SettingsShell>
+    </UserProvider>
+  );
+}

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

@@ -0,0 +1,36 @@
+import { desktopSidebarAtom } from "@/components/navbar/atoms/sidebar-atom.ts";
+import { AppShell, Container } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import React from "react";
+import SettingsSidebar from "@/components/layouts/settings/settings-sidebar.tsx";
+
+export default function SettingsShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+  const [desktopOpened] = useAtom(desktopSidebarAtom);
+
+  return (
+    <AppShell
+      layout="alt"
+      header={{ height: 45 }}
+      navbar={{
+        width: 300,
+        breakpoint: "sm",
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
+      }}
+      padding="md"
+    >
+      <AppShell.Navbar>
+        <SettingsSidebar />
+      </AppShell.Navbar>
+
+      <AppShell.Main>
+        <Container size={800}>{children}</Container>
+      </AppShell.Main>
+    </AppShell>
+  );
+}

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

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { Group, Text, ScrollArea, ActionIcon, rem } from "@mantine/core";
+import {
+  IconFingerprint,
+  IconUser,
+  IconSettings,
+  IconUsers,
+  IconArrowLeft,
+  IconUsersGroup,
+  IconSpaces,
+} from "@tabler/icons-react";
+import { Link } 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/profile" },
+      { label: "Preferences", icon: IconUser, path: "/settings/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" },
+      {
+        label: "Security",
+        icon: IconFingerprint,
+        path: "/settings/security",
+      },
+    ],
+  },
+];
+
+export default function SettingsSidebar() {
+  const [active, setActive] = useState("Profile");
+
+  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={item.label === active || undefined}
+          key={item.label}
+          to={item.path}
+          onClick={() => {
+            setActive(item.label);
+          }}
+        >
+          <item.icon className={classes.linkIcon} stroke={2} />
+          <span>{item.label}</span>
+        </Link>
+      ))}
+    </div>
+  ));
+
+  return (
+    <nav className={classes.navbar}>
+      <div>
+        <Group className={classes.header} justify="flex-start">
+          <ActionIcon
+            component={Link}
+            to="/home"
+            variant="transparent"
+            c="gray"
+            aria-label="Home"
+          >
+            <IconArrowLeft stroke={2} />
+          </ActionIcon>
+          <Text fw={500}>Settings</Text>
+        </Group>
+
+        <ScrollArea h="80vh" w="100%">
+          {menuItems}
+        </ScrollArea>
+      </div>
+
+      <div className={classes.footer}>
+        <Link to="/home" className={classes.link}>
+          <IconArrowLeft className={classes.linkIcon} stroke={1.5} />
+          <span>Return to the app</span>
+        </Link>
+      </div>
+    </nav>
+  );
+}

apps/client/src/components/layouts/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/layouts/settings/settings.module.css

@@ -0,0 +1,71 @@
+.navbar {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+    height: 100%;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    display: flex;
+    flex-direction: column;
+    /*border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));*/
+}
+
+.navbarMain {
+    flex: 1;
+}
+
+.header {
+    padding-bottom: var(--mantine-spacing-md);
+    margin-bottom: calc(var(--mantine-spacing-md) * 1.5);
+    border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.footer {
+    padding-top: var(--mantine-spacing-md);
+    margin-top: var(--mantine-spacing-md);
+    border-top: 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: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+    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;
+}

apps/client/src/components/navbar/navbar.tsx

@@ -12,15 +12,13 @@ import {
   IconPlus,
   IconSettings,
   IconFilePlus,
-  IconHome
+  IconHome,
 } from '@tabler/icons-react';
 
 import classes from './navbar.module.css';
 import { UserButton } from './user-button';
 import React from 'react';
 import { useAtom } from 'jotai';
-import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
-import SettingsModal from '@/features/settings/modal/settings-modal';
 import { SearchSpotlight } from '@/features/search/search-spotlight';
 import { treeApiAtom } from '@/features/page/tree/atoms/tree-api-atom';
 import PageTree from '@/features/page/tree/page-tree';
@@ -36,11 +34,10 @@ const primaryMenu: PrimaryMenuItem[] = [
   { icon: IconHome, label: 'Home' },
   { icon: IconSearch, label: 'Search' },
   { icon: IconSettings, label: 'Settings' },
- // { icon: IconFilePlus, label: 'New Page' },
+  // { icon: IconFilePlus, label: 'New Page' },
 ];
 
 export function Navbar() {
-  const [, setSettingsModalOpen] = useAtom(settingsModalAtom);
   const [tree] = useAtom(treeApiAtom);
   const navigate = useNavigate();
 
@@ -54,7 +51,7 @@ export function Navbar() {
     }
 
     if (label === 'Settings') {
-      setSettingsModalOpen(true);
+      navigate('/settings/workspace');
     }
   };
 
@@ -69,11 +66,7 @@ export function Navbar() {
       onClick={() => handleMenuItemClick(menuItem.label)}
     >
       <div className={classes.menuItemInner}>
-        <menuItem.icon
-          size={18}
-          className={classes.menuItemIcon}
-          stroke={2}
-        />
+        <menuItem.icon size={18} className={classes.menuItemIcon} stroke={2} />
         <span>{menuItem.label}</span>
       </div>
     </UnstyledButton>
@@ -113,12 +106,10 @@ export function Navbar() {
           <div className={classes.pages}>
             <PageTree />
           </div>
-
         </div>
       </nav>
 
       <SearchSpotlight />
-      <SettingsModal />
     </>
   );
 }

apps/client/src/components/ui/user-avatar.tsx

@@ -1,37 +1,32 @@
-import React from 'react';
-import { Avatar } from '@mantine/core';
+import React from "react";
+import { Avatar } from "@mantine/core";
 
 interface UserAvatarProps {
   avatarUrl: string;
   name: string;
   color?: string;
-  size?: string;
-  radius?: string;
+  size?: string | number;
+  radius?: string | number;
   style?: any;
   component?: any;
 }
 
 export const UserAvatar = React.forwardRef<HTMLInputElement, UserAvatarProps>(
   ({ avatarUrl, name, ...props }: UserAvatarProps, ref) => {
-
     const getInitials = (name: string) => {
-      const names = name?.split(' ');
-      return names?.slice(0, 2).map(n => n[0]).join('');
+      const names = name?.split(" ");
+      return names
+        ?.slice(0, 2)
+        .map((n) => n[0])
+        .join("");
     };
 
-    return (
-      avatarUrl ? (
-        <Avatar
-          ref={ref}
-          src={avatarUrl}
-          alt={name}
-          radius="xl"
-          {...props}
-        />
-      ) : (
-        <Avatar ref={ref}
-                {...props}>{getInitials(name)}</Avatar>
-      )
+    return avatarUrl ? (
+      <Avatar ref={ref} src={avatarUrl} alt={name} radius="xl" {...props} />
+    ) : (
+      <Avatar ref={ref} {...props}>
+        {getInitials(name)}
+      </Avatar>
     );
   },
 );