refactor layout

* ui polishing
* frontend and backend fixes

apps/client/src/features/page/components/breadcrumbs/breadcrumb.module.css

@@ -0,0 +1,23 @@
+.breadcrumbs {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    a {
+        color: var(--mantine-color-default-color);
+    }
+
+    .mantine-Breadcrumbs-breadcrumb {
+        min-width: 1px;
+        overflow: hidden;
+    }
+}
+
+.truncatedText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+}
+

apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx

@@ -0,0 +1,118 @@
+import { useAtomValue } from "jotai";
+import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
+import React, { useEffect, useState } from "react";
+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";
+import { SpaceTreeNode } from "@/features/page/tree/types.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { usePageQuery } from "@/features/page/queries/page-query.ts";
+import { extractPageSlugId } from "@/lib";
+
+function getTitle(name: string, icon: string) {
+  if (icon) {
+    return `${icon} ${name}`;
+  }
+  return name;
+}
+
+export default function Breadcrumb() {
+  const treeData = useAtomValue(treeDataAtom);
+  const [breadcrumbNodes, setBreadcrumbNodes] = useState<
+    SpaceTreeNode[] | null
+  >(null);
+  const { pageSlug, spaceSlug } = useParams();
+  const { data: currentPage } = usePageQuery({
+    pageId: extractPageSlugId(pageSlug),
+  });
+
+  useEffect(() => {
+    if (treeData?.length > 0 && currentPage) {
+      const breadcrumb = findBreadcrumbPath(treeData, currentPage.id);
+      setBreadcrumbNodes(breadcrumb || null);
+    }
+  }, [currentPage?.id, treeData]);
+
+  const HiddenNodesTooltipContent = () =>
+    breadcrumbNodes?.slice(1, -2).map((node) => (
+      <Button.Group orientation="vertical" key={node.id}>
+        <Button
+          justify="start"
+          component={Link}
+          to={buildPageUrl(spaceSlug, node.slugId, node.name)}
+          variant="default"
+          style={{ border: "none" }}
+        >
+          <Text fz={"sm"} className={classes.truncatedText}>
+            {getTitle(node.name, node.icon)}
+          </Text>
+        </Button>
+      </Button.Group>
+    ));
+
+  const renderAnchor = (node: SpaceTreeNode) => (
+    <Anchor
+      component={Link}
+      to={buildPageUrl(spaceSlug, node.slugId, node.name)}
+      underline="never"
+      fz={"sm"}
+      key={node.id}
+      className={classes.truncatedText}
+    >
+      {getTitle(node.name, node.icon)}
+    </Anchor>
+  );
+
+  const getBreadcrumbItems = () => {
+    if (!breadcrumbNodes) return [];
+
+    if (breadcrumbNodes.length > 3) {
+      const firstNode = breadcrumbNodes[0];
+      const secondLastNode = breadcrumbNodes[breadcrumbNodes.length - 2];
+      const lastNode = breadcrumbNodes[breadcrumbNodes.length - 1];
+
+      return [
+        renderAnchor(firstNode),
+        <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>,
+        renderAnchor(secondLastNode),
+        renderAnchor(lastNode),
+      ];
+    }
+
+    return breadcrumbNodes.map(renderAnchor);
+  };
+
+  return (
+    <div style={{ overflow: "hidden" }}>
+      {breadcrumbNodes && (
+        <Breadcrumbs className={classes.breadcrumbs}>
+          {getBreadcrumbItems()}
+        </Breadcrumbs>
+      )}
+    </div>
+  );
+}

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -0,0 +1,110 @@
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import {
+  IconDots,
+  IconHistory,
+  IconLink,
+  IconMessage,
+  IconTrash,
+} 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";
+import { useClipboard } from "@mantine/hooks";
+import { useParams } from "react-router-dom";
+import { usePageQuery } from "@/features/page/queries/page-query.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { notifications } from "@mantine/notifications";
+import { getAppUrl } from "@/lib/config.ts";
+import { extractPageSlugId } from "@/lib";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
+import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
+
+export default function PageHeaderMenu() {
+  const toggleAside = useToggleAside();
+
+  return (
+    <>
+      <Tooltip label="Comments" openDelay={250} withArrow>
+        <ActionIcon
+          variant="default"
+          style={{ border: "none" }}
+          onClick={() => toggleAside("comments")}
+        >
+          <IconMessage size={20} stroke={2} />
+        </ActionIcon>
+      </Tooltip>
+
+      <PageActionMenu />
+    </>
+  );
+}
+
+function PageActionMenu() {
+  const [, setHistoryModalOpen] = useAtom(historyAtoms);
+  const clipboard = useClipboard({ timeout: 500 });
+  const { pageSlug, spaceSlug } = useParams();
+  const { data: page, isLoading } = usePageQuery({
+    pageId: extractPageSlugId(pageSlug),
+  });
+  const { openDeleteModal } = useDeletePageModal();
+  const [tree] = useAtom(treeApiAtom);
+
+  const handleCopyLink = () => {
+    const pageUrl =
+      getAppUrl() + buildPageUrl(spaceSlug, page.slugId, page.title);
+
+    clipboard.copy(pageUrl);
+    notifications.show({ message: "Link copied" });
+  };
+
+  const openHistoryModal = () => {
+    setHistoryModalOpen(true);
+  };
+
+  const handleDeletePage = () => {
+    openDeleteModal({ onConfirm: () => tree?.delete(page.id) });
+  };
+
+  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={<IconLink size={16} stroke={2} />}
+          onClick={handleCopyLink}
+        >
+          Copy link
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Item
+          leftSection={<IconHistory size={16} stroke={2} />}
+          onClick={openHistoryModal}
+        >
+          Page history
+        </Menu.Item>
+
+        <Menu.Divider />
+        <Menu.Item
+          color={"red"}
+          leftSection={<IconTrash size={16} stroke={2} />}
+          onClick={handleDeletePage}
+        >
+          Delete
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

apps/client/src/features/page/components/header/page-header.module.css

@@ -0,0 +1,11 @@
+.header {
+    height: 45px;
+    background-color: var(--mantine-color-body);
+    padding-left: var(--mantine-spacing-md);
+    padding-right: var(--mantine-spacing-md);
+    position: fixed;
+    z-index: 99;
+    top: var(--app-shell-header-offset, 0rem);
+    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+    inset-inline-end: var(--app-shell-aside-offset, 0rem);
+}

apps/client/src/features/page/components/header/page-header.tsx

@@ -0,0 +1,18 @@
+import classes from "./page-header.module.css";
+import PageHeaderMenu from "@/features/page/components/header/page-header-menu.tsx";
+import { Group } from "@mantine/core";
+import Breadcrumb from "@/features/page/components/breadcrumbs/breadcrumb.tsx";
+
+export default function PageHeader() {
+  return (
+    <div className={classes.header}>
+      <Group justify="space-between" h="100%" px="md" wrap="nowrap">
+        <Breadcrumb />
+
+        <Group justify="flex-end" h="100%" px="md" wrap="nowrap">
+          <PageHeaderMenu />
+        </Group>
+      </Group>
+    </div>
+  );
+}