refactor layout

* ui polishing * frontend and backend fixes
2026-05-07 06:23:06 +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>
+  );
+}