Rework sidebar pages

* Move sidebar pages from workspace to space level
* Replace array sorting with lexicographical fractional indexing
* Fixes and updates

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

@@ -1,8 +1,7 @@
-import { useAtomValue } from 'jotai';
-import { treeDataAtom } from '@/features/page/tree/atoms/tree-data-atom';
-import React, { useEffect, useState } from 'react';
-import { TreeNode } from '@/features/page/tree/types';
-import { findBreadcrumbPath } from '@/features/page/tree/utils';
+import { useAtomValue } from "jotai";
+import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
+import React, { useEffect, useState } from "react";
+import { findBreadcrumbPath } from "@/features/page/tree/utils";
 import {
   Button,
   Anchor,
@@ -10,18 +9,17 @@ import {
   Breadcrumbs,
   ActionIcon,
   Text,
-} from '@mantine/core';
-import {
-  IconDots,
-} from '@tabler/icons-react';
-import { Link, useParams } from 'react-router-dom';
-import classes from './breadcrumb.module.css';
+} from "@mantine/core";
+import { IconDots } from "@tabler/icons-react";
+import { Link, useParams } from "react-router-dom";
+import classes from "./breadcrumb.module.css";
+import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 
 export default function Breadcrumb() {
   const treeData = useAtomValue(treeDataAtom);
-  const [breadcrumbNodes, setBreadcrumbNodes] = useState<TreeNode[] | null>(
-    null,
-  );
+  const [breadcrumbNodes, setBreadcrumbNodes] = useState<
+    SpaceTreeNode[] | null
+  >(null);
   const { pageId } = useParams();
 
   useEffect(() => {
@@ -40,31 +38,42 @@ export default function Breadcrumb() {
     }
   }, [pageId, treeData]);
 
-  const HiddenNodesTooltipContent = () => (
-    breadcrumbNodes?.slice(1, -2).map(node => (
+  const HiddenNodesTooltipContent = () =>
+    breadcrumbNodes?.slice(1, -2).map((node) => (
       <Button.Group orientation="vertical" key={node.id}>
         <Button
           justify="start"
           component={Link}
           to={`/p/${node.id}`}
           variant="default"
-          style={{ border: 'none' }}
+          style={{ border: "none" }}
         >
           <Text truncate="end">{node.name}</Text>
         </Button>
       </Button.Group>
-    ))
-  );
+    ));
 
-  const getLastNthNode = (n: number) => breadcrumbNodes && breadcrumbNodes[breadcrumbNodes.length - n];
+  const getLastNthNode = (n: number) =>
+    breadcrumbNodes && breadcrumbNodes[breadcrumbNodes.length - n];
 
   const getBreadcrumbItems = () => {
     if (breadcrumbNodes?.length > 3) {
       return [
-        <Anchor component={Link} to={`/p/${breadcrumbNodes[0].id}`} underline="never" key={breadcrumbNodes[0].id}>
+        <Anchor
+          component={Link}
+          to={`/p/${breadcrumbNodes[0].id}`}
+          underline="never"
+          key={breadcrumbNodes[0].id}
+        >
           {breadcrumbNodes[0].name}
         </Anchor>,
-        <Popover width={250} position="bottom" withArrow shadow="xl" key="hidden-nodes">
+        <Popover
+          width={250}
+          position="bottom"
+          withArrow
+          shadow="xl"
+          key="hidden-nodes"
+        >
           <Popover.Target>
             <ActionIcon c="gray" variant="transparent">
               <IconDots size={20} stroke={2} />
@@ -74,18 +83,33 @@ export default function Breadcrumb() {
             <HiddenNodesTooltipContent />
           </Popover.Dropdown>
         </Popover>,
-        <Anchor component={Link} to={`/p/${getLastNthNode(2)?.id}`} underline="never" key={getLastNthNode(2)?.id}>
+        <Anchor
+          component={Link}
+          to={`/p/${getLastNthNode(2)?.id}`}
+          underline="never"
+          key={getLastNthNode(2)?.id}
+        >
           {getLastNthNode(2)?.name}
         </Anchor>,
-        <Anchor component={Link} to={`/p/${getLastNthNode(1)?.id}`} underline="never" key={getLastNthNode(1)?.id}>
+        <Anchor
+          component={Link}
+          to={`/p/${getLastNthNode(1)?.id}`}
+          underline="never"
+          key={getLastNthNode(1)?.id}
+        >
           {getLastNthNode(1)?.name}
         </Anchor>,
       ];
     }
 
     if (breadcrumbNodes) {
-      return breadcrumbNodes.map(node => (
-        <Anchor component={Link} to={`/p/${node.id}`} underline="never" key={node.id}>
+      return breadcrumbNodes.map((node) => (
+        <Anchor
+          component={Link}
+          to={`/p/${node.id}`}
+          underline="never"
+          key={node.id}
+        >
           {node.name}
         </Anchor>
       ));
@@ -98,7 +122,9 @@ export default function Breadcrumb() {
     <div className={classes.breadcrumb}>
       {breadcrumbNodes ? (
         <Breadcrumbs>{getBreadcrumbItems()}</Breadcrumbs>
-      ) : (<></>)}
+      ) : (
+        <></>
+      )}
     </div>
   );
 }

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

@@ -20,9 +20,8 @@ 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 SpaceContent from "@/features/page/component/space-content.tsx";
+import SpaceContent from "@/features/page/tree/components/space-content.tsx";
 
 interface PrimaryMenuItem {
   icon: React.ElementType;
@@ -105,7 +104,6 @@ export function Navbar() {
 
           <div className={classes.pages}>
             <SpaceContent />
-            {/* <PageTree /> */}
           </div>
         </div>
       </nav>