refactor layout

* ui polishing * frontend and backend fixes
2026-05-17 23:14:07 +08:00 · 2024-05-31 21:51:44 +01:00
parent 046dd6d150
commit 06d854a7d2
95 changed files with 1548 additions and 821 deletions
@@ -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>
+  );
+}
@@ -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);
+}
@@ -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>
+  );
+}