space updates

* space UI
* space management
* space permissions
* other fixes

apps/client/src/components/icons/icon-people-circle.tsx

@@ -0,0 +1,15 @@
+import { ActionIcon, rem } from "@mantine/core";
+import React from "react";
+import { IconUsersGroup } from "@tabler/icons-react";
+
+interface IconPeopleCircleProps extends React.ComponentPropsWithoutRef<"svg"> {
+  size?: number | string;
+}
+
+export function IconGroupCircle() {
+  return (
+    <ActionIcon variant="light" size="lg" color="gray" radius="xl">
+      <IconUsersGroup stroke={1.5} />
+    </ActionIcon>
+  );
+}

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

@@ -42,11 +42,6 @@ const groupedData: DataGroup[] = [
       },
       { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
       { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
-      {
-        label: "Security",
-        icon: IconFingerprint,
-        path: "/settings/security",
-      },
     ],
   },
 ];

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

@@ -31,7 +31,8 @@
     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);
+    padding-left: var(--mantine-spacing-xs) ;
+    min-height: 30px;
     border-radius: var(--mantine-radius-sm);
     font-weight: 500;
     user-select: none;

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

@@ -5,24 +5,23 @@ import {
   ActionIcon,
   Tooltip,
   rem,
-} from '@mantine/core';
-import { spotlight } from '@mantine/spotlight';
+} from "@mantine/core";
+import { spotlight } from "@mantine/spotlight";
 import {
   IconSearch,
   IconPlus,
   IconSettings,
-  IconFilePlus,
   IconHome,
-} from '@tabler/icons-react';
+} from "@tabler/icons-react";
 
-import classes from './navbar.module.css';
-import { UserButton } from './user-button';
-import React from 'react';
-import { useAtom } from 'jotai';
-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';
-import { useNavigate } from 'react-router-dom';
+import classes from "./navbar.module.css";
+import { UserButton } from "./user-button";
+import React from "react";
+import { useAtom } from "jotai";
+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";
+import { useNavigate } from "react-router-dom";
 
 interface PrimaryMenuItem {
   icon: React.ElementType;
@@ -31,9 +30,9 @@ interface PrimaryMenuItem {
 }
 
 const primaryMenu: PrimaryMenuItem[] = [
-  { icon: IconHome, label: 'Home' },
-  { icon: IconSearch, label: 'Search' },
-  { icon: IconSettings, label: 'Settings' },
+  { icon: IconHome, label: "Home" },
+  { icon: IconSearch, label: "Search" },
+  { icon: IconSettings, label: "Settings" },
   // { icon: IconFilePlus, label: 'New Page' },
 ];
 
@@ -42,21 +41,21 @@ export function Navbar() {
   const navigate = useNavigate();
 
   const handleMenuItemClick = (label: string) => {
-    if (label === 'Home') {
-      navigate('/home');
+    if (label === "Home") {
+      navigate("/home");
     }
 
-    if (label === 'Search') {
+    if (label === "Search") {
       spotlight.open();
     }
 
-    if (label === 'Settings') {
-      navigate('/settings/workspace');
+    if (label === "Settings") {
+      navigate("/settings/workspace");
     }
   };
 
   function handleCreatePage() {
-    tree?.create({ parentId: null, type: 'internal', index: 0 });
+    tree?.create({ parentId: null, type: "internal", index: 0 });
   }
 
   const primaryMenuItems = primaryMenu.map((menuItem) => (

apps/client/src/components/ui/role-select-menu.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef } from "react";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { Group, Text, Menu, Button } from "@mantine/core";
+import { IRoleData } from "@/lib/types.ts";
+
+interface RoleButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+  name: string;
+}
+
+const RoleButton = forwardRef<HTMLButtonElement, RoleButtonProps>(
+  ({ name, ...others }: RoleButtonProps, ref) => (
+    <Button
+      variant="default"
+      ref={ref}
+      style={{
+        border: "none",
+      }}
+      rightSection={<IconChevronDown size="1rem" />}
+      {...others}
+    >
+      {name}
+    </Button>
+  ),
+);
+
+interface SpaceRoleMenuProps {
+  roles: IRoleData[];
+  roleName: string;
+  onChange?: (value: string) => void;
+}
+
+export default function RoleSelectMenu({
+  roles,
+  roleName,
+  onChange,
+}: SpaceRoleMenuProps) {
+  return (
+    <Menu withArrow>
+      <Menu.Target>
+        <RoleButton name={roleName} />
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        {roles?.map((item) => (
+          <Menu.Item
+            onClick={() => onChange && onChange(item.value)}
+            key={item.value}
+          >
+            <Group flex="1" gap="xs">
+              <div>
+                <Text size="sm">{item.label}</Text>
+                <Text size="xs" opacity={0.65}>
+                  {item.description}
+                </Text>
+              </div>
+              {item.label === roleName && <IconCheck size={20} />}
+            </Group>
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}