page controls - wip

* page breadcrumb
* other minor additions and fixes

client/src/components/layouts/components/breadcrumb.module.css

@@ -0,0 +1,6 @@
+.breadcrumb {
+    a {
+        color: var(--mantine-color-default-color);
+        text-overflow: ellipsis;
+    }
+}

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

@@ -0,0 +1,104 @@
+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 {
+  Button,
+  Anchor,
+  Popover,
+  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';
+
+export default function Breadcrumb() {
+  const treeData = useAtomValue(treeDataAtom);
+  const [breadcrumbNodes, setBreadcrumbNodes] = useState<TreeNode[] | null>(
+    null,
+  );
+  const { pageId } = useParams();
+
+  useEffect(() => {
+    if (treeData.length) {
+      const breadcrumb = findBreadcrumbPath(treeData, pageId);
+      if (breadcrumb) {
+        setBreadcrumbNodes(breadcrumb);
+      }
+    }
+  }, [pageId, treeData]);
+
+  useEffect(() => {
+    if (treeData.length) {
+      const breadcrumb = findBreadcrumbPath(treeData, pageId);
+      if (breadcrumb) setBreadcrumbNodes(breadcrumb);
+    }
+  }, [pageId, treeData]);
+
+  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' }}
+        >
+          <Text truncate="end">{node.name}</Text>
+        </Button>
+      </Button.Group>
+    ))
+  );
+
+  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}>
+          {breadcrumbNodes[0].name}
+        </Anchor>,
+        <Popover width={250} position="bottom" withArrow shadow="xl" key="hidden-nodes">
+          <Popover.Target>
+            <ActionIcon color="gray" variant="transparent">
+              <IconDots size={20} stroke={2} />
+            </ActionIcon>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <HiddenNodesTooltipContent />
+          </Popover.Dropdown>
+        </Popover>,
+        <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}>
+          {getLastNthNode(1)?.name}
+        </Anchor>,
+      ];
+    }
+
+    if (breadcrumbNodes) {
+      return breadcrumbNodes.map(node => (
+        <Anchor component={Link} to={`/p/${node.id}`} underline="never" key={node.id}>
+          {node.name}
+        </Anchor>
+      ));
+    }
+
+    return [];
+  };
+
+  return (
+    <div className={classes.breadcrumb}>
+      {breadcrumbNodes ? (
+        <Breadcrumbs>{getBreadcrumbItems()}</Breadcrumbs>
+      ) : (<></>)}
+    </div>
+  );
+}

client/src/components/layouts/header.tsx

@@ -0,0 +1,91 @@
+import {
+  Group,
+  ActionIcon,
+  Menu,
+  Button,
+  rem,
+} from '@mantine/core';
+import {
+  IconDots,
+  IconFileInfo,
+  IconHistory,
+  IconLink,
+  IconLock,
+  IconShare,
+  IconTrash,
+} from '@tabler/icons-react';
+import React from 'react';
+
+export default function Header() {
+  return (
+    <>
+      <Button variant="default" style={{ border: 'none' }} size="compact-sm">
+        Share
+      </Button>
+
+      <PageActionMenu />
+    </>
+  );
+}
+
+function PageActionMenu() {
+  return (
+    <Menu
+      shadow="xl"
+      position="bottom-end"
+      offset={20}
+      width={200}
+      withArrow
+      arrowPosition="center"
+    >
+      <Menu.Target>
+        <ActionIcon variant="default" style={{ border: 'none' }}>
+          <IconDots size={20} stroke={2} />
+        </ActionIcon>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Item
+          leftSection={
+            <IconFileInfo style={{ width: rem(14), height: rem(14) }} />
+          }
+        >
+          Page info
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconLink style={{ width: rem(14), height: rem(14) }} />}
+        >
+          Copy link
+        </Menu.Item>
+        <Menu.Item
+          leftSection={
+            <IconShare style={{ width: rem(14), height: rem(14) }} />
+          }
+        >
+          Share
+        </Menu.Item>
+        <Menu.Item
+          leftSection={
+            <IconHistory style={{ width: rem(14), height: rem(14) }} />
+          }
+        >
+          Page history
+        </Menu.Item>
+
+        <Menu.Divider />
+        <Menu.Item
+          leftSection={<IconLock style={{ width: rem(14), height: rem(14) }} />}
+        >
+          Lock
+        </Menu.Item>
+        <Menu.Item
+          leftSection={
+            <IconTrash style={{ width: rem(14), height: rem(14) }} />
+          }
+        >
+          Delete
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

client/src/components/layouts/shell.module.css

@@ -0,0 +1,18 @@
+.header,
+.footer {
+   /* [data-layout='alt'] & {
+        --_section-right: var(--app-shell-aside-offset, 0px);
+    }
+    */
+}
+
+.aside {
+    [data-layout='alt'] & {
+        --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px));
+        --_section-height: var(
+                --_section-height,
+                calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-footer-offset, 0px))
+        );
+    }
+}
+

client/src/components/layouts/shell.tsx

@@ -1,9 +1,13 @@
 import { 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 { ActionIcon, UnstyledButton, ActionIconGroup, AppShell, Avatar, Burger, Group } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { IconDots } from '@tabler/icons-react';
 import { useAtom } from 'jotai';
+import classes from './shell.module.css';
+import Header from '@/components/layouts/header';
+import Breadcrumb from '@/components/layouts/components/breadcrumb';
 
 export default function Shell({ children }: { children: React.ReactNode }) {
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
@@ -19,27 +23,38 @@ export default function Shell({ children }: { children: React.ReactNode }) {
         breakpoint: 'sm',
         collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
-      aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: false, mobile: true } }}
+      aside={{ width: 300, breakpoint: 'md', collapsed: { mobile: true, desktop: !desktopOpened } }}
       padding="md"
     >
-      <AppShell.Header>
-        <Group h="100%" px="md">
-          <Burger
-            opened={mobileOpened}
-            onClick={toggleMobile}
-            hiddenFrom="sm"
-            size="sm"
-          />
-          <Burger
-            opened={desktopOpened}
-            onClick={toggleDesktop}
-            visibleFrom="sm"
-            size="sm"
-          />
+      <AppShell.Header
+        className={classes.header}
+      >
 
-          Header
+        <Group justify="space-between" h="100%" px="md" wrap="nowrap">
+
+          <Group h="100%" maw="60%" px="md" wrap="nowrap" style={{ overflow: 'hidden' }}>
+            <Burger
+              opened={mobileOpened}
+              onClick={toggleMobile}
+              hiddenFrom="sm"
+              size="sm"
+            />
+            <Burger
+              opened={desktopOpened}
+              onClick={toggleDesktop}
+              visibleFrom="sm"
+              size="sm"
+            />
+
+            <Breadcrumb />
+          </Group>
+
+          <Group justify="flex-end" h="100%" px="md" wrap="nowrap">
+            <Header />
+          </Group>
 
         </Group>
+
       </AppShell.Header>
 
       <AppShell.Navbar>
@@ -51,7 +66,7 @@ export default function Shell({ children }: { children: React.ReactNode }) {
         {children}
       </AppShell.Main>
 
-      <AppShell.Aside>
+      <AppShell.Aside className={classes.aside}>
         TODO
       </AppShell.Aside>
     </AppShell>