feat: public page sharing (#1012)

* Share - WIP

* - public attachment links
- WIP

* WIP

* WIP

* Share - WIP

* WIP

* WIP

* include userRole in space object

* WIP

* Server render shared page meta tags

* disable user select

* Close Navbar on outside click on mobile

* update shared page spaceId

* WIP

* fix

* close sidebar on click

* close sidebar

* defaults

* update copy

* Store share key in lowercase

* refactor page breadcrumbs

* Change copy

* add link ref

* open link button

* add meta og:title

* add twitter tags

* WIP

* make shares/info endpoint public

* fix

* * add /p/ segment to share urls
* minore fixes

* change mobile breadcrumb icon

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

@@ -2,6 +2,7 @@
     display: flex;
     align-items: center;
     overflow: hidden;
+    flex-wrap: nowrap;
 
     a {
         color: var(--mantine-color-default-color);

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

@@ -1,6 +1,6 @@
 import { useAtomValue } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { findBreadcrumbPath } from "@/features/page/tree/utils";
 import {
   Button,
@@ -9,14 +9,16 @@ import {
   Breadcrumbs,
   ActionIcon,
   Text,
+  Tooltip,
 } from "@mantine/core";
-import { IconDots } from "@tabler/icons-react";
+import { IconCornerDownRightDouble, 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";
+import { useMediaQuery } from "@mantine/hooks";
 
 function getTitle(name: string, icon: string) {
   if (icon) {
@@ -34,6 +36,7 @@ export default function Breadcrumb() {
   const { data: currentPage } = usePageQuery({
     pageId: extractPageSlugId(pageSlug),
   });
+  const isMobile = useMediaQuery("(max-width: 48em)");
 
   useEffect(() => {
     if (treeData?.length > 0 && currentPage) {
@@ -43,7 +46,7 @@ export default function Breadcrumb() {
   }, [currentPage?.id, treeData]);
 
   const HiddenNodesTooltipContent = () =>
-    breadcrumbNodes?.slice(1, -2).map((node) => (
+    breadcrumbNodes?.slice(1, -1).map((node) => (
       <Button.Group orientation="vertical" key={node.id}>
         <Button
           justify="start"
@@ -59,17 +62,39 @@ export default function Breadcrumb() {
       </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 MobileHiddenNodesTooltipContent = () =>
+    breadcrumbNodes?.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 = useCallback(
+    (node: SpaceTreeNode) => (
+      <Tooltip label={node.name} key={node.id}>
+        <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>
+      </Tooltip>
+    ),
+    [spaceSlug],
   );
 
   const getBreadcrumbItems = () => {
@@ -77,7 +102,7 @@ export default function Breadcrumb() {
 
     if (breadcrumbNodes.length > 3) {
       const firstNode = breadcrumbNodes[0];
-      const secondLastNode = breadcrumbNodes[breadcrumbNodes.length - 2];
+      //const secondLastNode = breadcrumbNodes[breadcrumbNodes.length - 2];
       const lastNode = breadcrumbNodes[breadcrumbNodes.length - 1];
 
       return [
@@ -98,7 +123,7 @@ export default function Breadcrumb() {
             <HiddenNodesTooltipContent />
           </Popover.Dropdown>
         </Popover>,
-        renderAnchor(secondLastNode),
+        //renderAnchor(secondLastNode),
         renderAnchor(lastNode),
       ];
     }
@@ -106,11 +131,40 @@ export default function Breadcrumb() {
     return breadcrumbNodes.map(renderAnchor);
   };
 
+  const getMobileBreadcrumbItems = () => {
+    if (!breadcrumbNodes) return [];
+
+    if (breadcrumbNodes.length > 0) {
+      return [
+        <Popover
+          width={250}
+          position="bottom"
+          withArrow
+          shadow="xl"
+          key="mobile-hidden-nodes"
+        >
+          <Popover.Target>
+            <Tooltip label="Breadcrumbs">
+              <ActionIcon color="gray" variant="transparent">
+                <IconCornerDownRightDouble size={20} stroke={2} />
+              </ActionIcon>
+            </Tooltip>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <MobileHiddenNodesTooltipContent />
+          </Popover.Dropdown>
+        </Popover>,
+      ];
+    }
+
+    return breadcrumbNodes.map(renderAnchor);
+  };
+
   return (
     <div style={{ overflow: "hidden" }}>
       {breadcrumbNodes && (
         <Breadcrumbs className={classes.breadcrumbs}>
-          {getBreadcrumbItems()}
+          {isMobile ? getMobileBreadcrumbItems() : getBreadcrumbItems()}
         </Breadcrumbs>
       )}
     </div>

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

@@ -35,6 +35,7 @@ import {
 import { formattedDate, timeAgo } from "@/lib/time.ts";
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
+import ShareModal from '@/features/share/components/share-modal.tsx';
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -58,6 +59,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
         </Tooltip>
       )}
 
+      <ShareModal readOnly={readOnly}/>
+
       <Tooltip label={t("Comments")} openDelay={250} withArrow>
         <ActionIcon
           variant="default"

apps/client/src/features/page/page.utils.ts

@@ -8,7 +8,7 @@ const buildPageSlug = (pageSlugId: string, pageTitle?: string): string => {
     ],
   });
 
-  return `p/${titleSlug}-${pageSlugId}`;
+  return `${titleSlug}-${pageSlugId}`;
 };
 
 export const buildPageUrl = (
@@ -17,7 +17,20 @@ export const buildPageUrl = (
   pageTitle?: string,
 ): string => {
   if (spaceName === undefined) {
-    return `/${buildPageSlug(pageSlugId, pageTitle)}`;
+    return `/p/${buildPageSlug(pageSlugId, pageTitle)}`;
   }
-  return `/s/${spaceName}/${buildPageSlug(pageSlugId, pageTitle)}`;
+  return `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+};
+
+export const buildSharedPageUrl = (opts: {
+  shareId: string;
+  pageSlugId: string;
+  pageTitle?: string;
+}): string => {
+  const { shareId, pageSlugId, pageTitle } = opts;
+  if (!shareId) {
+    return `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  }
+
+  return `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
 };

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -8,9 +8,9 @@ import {
   useUpdatePageMutation,
 } from "@/features/page/queries/page-query.ts";
 import { useEffect, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import classes from "@/features/page/tree/styles/tree.module.css";
-import { ActionIcon, Menu, rem } from "@mantine/core";
+import { ActionIcon, Box, Menu, rem } from "@mantine/core";
 import {
   IconArrowRight,
   IconChevronDown,
@@ -58,6 +58,8 @@ import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.
 import { useTranslation } from "react-i18next";
 import ExportModal from "@/components/common/export-modal";
 import MovePageModal from "../../components/move-page-modal.tsx";
+import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 
 interface SpaceTreeProps {
   spaceId: string;
@@ -230,13 +232,14 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
 }
 
 function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
-  const navigate = useNavigate();
+  const { t } = useTranslation();
   const updatePageMutation = useUpdatePageMutation();
   const [treeData, setTreeData] = useAtom(treeDataAtom);
   const emit = useQueryEmit();
   const { spaceSlug } = useParams();
   const timerRef = useRef(null);
-  const { t } = useTranslation();
+  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
 
   const prefetchPage = () => {
     timerRef.current = setTimeout(() => {
@@ -287,11 +290,6 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
     }
   }
 
-  const handleClick = () => {
-    const pageUrl = buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
-    navigate(pageUrl);
-  };
-
   const handleUpdateNodeIcon = (nodeId: string, newIcon: string) => {
     const updatedTree = updateTreeNodeIcon(treeData, nodeId, newIcon);
     setTreeData(updatedTree);
@@ -345,13 +343,22 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
     }, 650);
   }
 
+  const pageUrl = buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
+
   return (
     <>
-      <div
+      <Box
         style={style}
         className={clsx(classes.node, node.state)}
+        component={Link}
+        to={pageUrl}
+        // @ts-ignore
         ref={dragHandle}
-        onClick={handleClick}
+        onClick={() => {
+          if (mobileSidebarOpened) {
+            toggleMobileSidebar();
+          }
+        }}
         onMouseEnter={prefetchPage}
         onMouseLeave={cancelPagePrefetch}
       >
@@ -385,7 +392,7 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
             />
           )}
         </div>
-      </div>
+      </Box>
     </>
   );
 }

apps/client/src/features/page/tree/styles/tree.module.css

@@ -18,7 +18,7 @@
     align-items: center;
     height: 100%;
     width: 93%; /* not to overlap with scroll bar */
-
+    text-decoration: none;
     color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
 
     &:hover {
@@ -70,6 +70,10 @@
     background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
 }
 
+.row:focus .node:global(.isFocused) {
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+
 .row {
     white-space: nowrap;
     cursor: pointer;

apps/client/src/features/page/tree/utils/utils.ts

@@ -1,7 +1,7 @@
 import { IPage } from "@/features/page/types/page.types.ts";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 
-function sortPositionKeys(keys: any[]) {
+export function sortPositionKeys(keys: any[]) {
   return keys.sort((a, b) => {
     if (a.position < b.position) return -1;
     if (a.position > b.position) return 1;