implement new invitation system

* fix comments on the frontend
* move jwt token service to its own module
* other fixes and updates

apps/client/src/features/page/tree/components/space-content.tsx

@@ -1,18 +1,11 @@
 import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
 import { useAtom } from "jotai/index";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
-import {
-  Accordion,
-  AccordionControlProps,
-  ActionIcon,
-  Center,
-  rem,
-  Tooltip,
-} from "@mantine/core";
-import { IconPlus } from "@tabler/icons-react";
+import { Box } from "@mantine/core";
+import { IconNotes } from "@tabler/icons-react";
 import React from "react";
-import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import SpaceTree from "@/features/page/tree/components/space-tree.tsx";
+import { TreeCollapse } from "@/features/page/tree/components/tree-collapse.tsx";
 
 export default function SpaceContent() {
   const [currentUser] = useAtom(currentUserAtom);
@@ -24,42 +17,15 @@ export default function SpaceContent() {
 
   return (
     <>
-      <Accordion
-        chevronPosition="left"
-        maw={400}
-        mx="auto"
-        defaultValue={space.id}
-      >
-        <Accordion.Item key={space.id} value={space.id}>
-          <AccordionControl>{space.name}</AccordionControl>
-          <Accordion.Panel>
-            <SpaceTree spaceId={space.id} />
-          </Accordion.Panel>
-        </Accordion.Item>
-      </Accordion>
+      <Box p="sm" mx="auto">
+        <TreeCollapse
+          initiallyOpened={true}
+          icon={IconNotes}
+          label={space.name}
+        >
+          <SpaceTree spaceId={space.id} />
+        </TreeCollapse>
+      </Box>
     </>
   );
 }
-
-function AccordionControl(props: AccordionControlProps) {
-  const [tree] = useAtom(treeApiAtom);
-
-  function handleCreatePage() {
-    //todo: create at the bottom
-    tree?.create({ parentId: null, type: "internal", index: 0 });
-  }
-
-  return (
-    <Center>
-      <Accordion.Control {...props} />
-      {/* <ActionIcon size="lg" variant="subtle" color="gray">
-        <IconDots size="1rem" />
-      </ActionIcon> */}
-      <Tooltip label="Create page" withArrow position="right">
-        <ActionIcon variant="default" size={18} onClick={handleCreatePage}>
-          <IconPlus style={{ width: rem(12), height: rem(12) }} stroke={1.5} />
-        </ActionIcon>
-      </Tooltip>
-    </Center>
-  );
-}

apps/client/src/features/page/tree/components/tree-collapse.module.css

@@ -0,0 +1,27 @@
+.control {
+    font-weight: 500;
+    display: block;
+    width: 100%;
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
+    color: var(--mantine-color-text);
+    font-size: var(--mantine-font-size-sm);
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+        color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+    }
+}
+
+.item {
+    display: block;
+    text-decoration: none;
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+    padding-left: 4px;
+    margin-left: var(--mantine-spacing-sm);
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+}
+
+.chevron {
+    transition: transform 200ms ease;
+}

apps/client/src/features/page/tree/components/tree-collapse.tsx

@@ -0,0 +1,59 @@
+import React, { ReactNode, useState } from "react";
+import {
+  Group,
+  Box,
+  Collapse,
+  ThemeIcon,
+  UnstyledButton,
+  rem,
+} from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import classes from "./tree-collapse.module.css";
+
+interface LinksGroupProps {
+  icon?: React.FC<any>;
+  label: string;
+  initiallyOpened?: boolean;
+  children: ReactNode;
+}
+
+export function TreeCollapse({
+  icon: Icon,
+  label,
+  initiallyOpened,
+  children,
+}: LinksGroupProps) {
+  const [opened, setOpened] = useState(initiallyOpened || false);
+
+  return (
+    <>
+      <UnstyledButton
+        onClick={() => setOpened((o) => !o)}
+        className={classes.control}
+      >
+        <Group justify="space-between" gap={0}>
+          <Box style={{ display: "flex", alignItems: "center" }}>
+            <ThemeIcon variant="light" size={20}>
+              <Icon style={{ width: rem(18), height: rem(18) }} />
+            </ThemeIcon>
+            <Box ml="md">{label}</Box>
+          </Box>
+
+          <IconChevronRight
+            className={classes.chevron}
+            stroke={1.5}
+            style={{
+              width: rem(16),
+              height: rem(16),
+              transform: opened ? "rotate(90deg)" : "none",
+            }}
+          />
+        </Group>
+      </UnstyledButton>
+
+      <Collapse in={opened}>
+        <div className={classes.item}>{children}</div>
+      </Collapse>
+    </>
+  );
+}