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/App.tsx

@@ -26,6 +26,10 @@ import { useTranslation } from "react-i18next";
 import Security from "@/ee/security/pages/security.tsx";
 import License from "@/ee/licence/pages/license.tsx";
 import { useRedirectToCloudSelect } from "@/ee/hooks/use-redirect-to-cloud-select.tsx";
+import SharedPage from "@/pages/share/shared-page.tsx";
+import Shares from "@/pages/settings/shares/shares.tsx";
+import ShareLayout from "@/features/share/components/share-layout.tsx";
+import ShareRedirect from '@/pages/share/share-redirect.tsx';
 
 export default function App() {
   const { t } = useTranslation();
@@ -51,6 +55,12 @@ export default function App() {
           </>
         )}
 
+        <Route element={<ShareLayout />}>
+          <Route path={"/share/:shareId/p/:pageSlug"} element={<SharedPage />} />
+          <Route path={"/share/p/:pageSlug"} element={<SharedPage />} />
+        </Route>
+        
+        <Route path={"/share/:shareId"} element={<ShareRedirect />} />
         <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
 
         <Route element={<Layout />}>
@@ -78,6 +88,7 @@ export default function App() {
             <Route path={"groups"} element={<Groups />} />
             <Route path={"groups/:groupId"} element={<GroupInfo />} />
             <Route path={"spaces"} element={<Spaces />} />
+            <Route path={"sharing"} element={<Shares />} />
             <Route path={"security"} element={<Security />} />
             {!isCloud() && <Route path={"license"} element={<License />} />}
             {isCloud() && <Route path={"billing"} element={<Billing />} />}

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -14,6 +14,8 @@ import { AppHeader } from "@/components/layouts/global/app-header.tsx";
 import Aside from "@/components/layouts/global/aside.tsx";
 import classes from "./app-shell.module.css";
 import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
+import { useClickOutside, useMergedRef } from "@mantine/hooks";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 
 export default function GlobalAppShell({
   children,
@@ -22,11 +24,19 @@ export default function GlobalAppShell({
 }) {
   useTrialEndAction();
   const [mobileOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobile = useToggleSidebar(mobileSidebarAtom);
   const [desktopOpened] = useAtom(desktopSidebarAtom);
   const [{ isAsideOpen }] = useAtom(asideStateAtom);
   const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
   const [isResizing, setIsResizing] = useState(false);
   const sidebarRef = useRef(null);
+  const navbarOutsideRef = useClickOutside(() => {
+    if (mobileOpened) {
+      toggleMobile();
+    }
+  });
+
+  const mergedRef = useMergedRef(sidebarRef, navbarOutsideRef);
 
   const startResizing = React.useCallback((mouseDownEvent) => {
     mouseDownEvent.preventDefault();
@@ -102,7 +112,7 @@ export default function GlobalAppShell({
         <AppShell.Navbar
           className={classes.navbar}
           withBorder={false}
-          ref={sidebarRef}
+          ref={mergedRef}
         >
           <div className={classes.resizeHandle} onMouseDown={startResizing} />
           {isSpaceRoute && <SpaceSidebar />}
@@ -111,7 +121,7 @@ export default function GlobalAppShell({
       )}
       <AppShell.Main>
         {isSettingsRoute ? (
-          <Container size={800}>{children}</Container>
+          <Container size={850}>{children}</Container>
         ) : (
           children
         )}

apps/client/src/components/settings/settings-queries.tsx

@@ -8,7 +8,8 @@ import { getGroups } from "@/features/group/services/group-service.ts";
 import { QueryParams } from "@/lib/types.ts";
 import { getWorkspaceMembers } from "@/features/workspace/services/workspace-service.ts";
 import { getLicenseInfo } from "@/ee/licence/services/license-service.ts";
-import { getSsoProviders } from '@/ee/security/services/security-service.ts';
+import { getSsoProviders } from "@/ee/security/services/security-service.ts";
+import { getShares } from "@/features/share/services/share-service.ts";
 
 export const prefetchWorkspaceMembers = () => {
   const params = { limit: 100, page: 1, query: "" } as QueryParams;
@@ -56,4 +57,11 @@ export const prefetchSsoProviders = () => {
     queryKey: ["sso-providers"],
     queryFn: () => getSsoProviders(),
   });
-};
+};
+
+export const prefetchShares = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["share-list", { page: 1 }],
+    queryFn: () => getShares({ page: 1, limit: 100 }),
+  });
+};

apps/client/src/components/settings/settings-sidebar.tsx

@@ -11,6 +11,7 @@ import {
   IconCoin,
   IconLock,
   IconKey,
+  IconWorld,
 } from "@tabler/icons-react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import classes from "./settings.module.css";
@@ -23,11 +24,14 @@ import {
   prefetchBilling,
   prefetchGroups,
   prefetchLicense,
+  prefetchShares,
   prefetchSpaces,
   prefetchSsoProviders,
   prefetchWorkspaceMembers,
 } from "@/components/settings/settings-queries.tsx";
 import AppVersion from "@/components/settings/app-version.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 DataItem {
   label: string;
@@ -82,6 +86,7 @@ const groupedData: DataGroup[] = [
       },
       { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
       { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
+      { label: "Public sharing", icon: IconWorld, path: "/settings/sharing" },
     ],
   },
   {
@@ -103,6 +108,8 @@ export default function SettingsSidebar() {
   const navigate = useNavigate();
   const { isAdmin } = useUserRole();
   const [workspace] = useAtom(workspaceAtom);
+  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
 
   useEffect(() => {
     setActive(location.pathname);
@@ -170,6 +177,9 @@ export default function SettingsSidebar() {
             case "Security & SSO":
               prefetchHandler = prefetchSsoProviders;
               break;
+            case "Public sharing":
+              prefetchHandler = prefetchShares;
+              break;
             default:
               break;
           }
@@ -181,6 +191,11 @@ export default function SettingsSidebar() {
               data-active={active.startsWith(item.path) || undefined}
               key={item.label}
               to={item.path}
+              onClick={() => {
+                if (mobileSidebarOpened) {
+                  toggleMobileSidebar();
+                }
+              }}
             >
               <item.icon className={classes.linkIcon} stroke={2} />
               <span>{t(item.label)}</span>

apps/client/src/components/theme-toggle.module.css

@@ -0,0 +1,19 @@
+.dark {
+  @mixin dark {
+    display: none;
+  }
+
+  @mixin light {
+    display: block;
+  }
+}
+
+.light {
+  @mixin light {
+    display: none;
+  }
+
+  @mixin dark {
+    display: block;
+  }
+}

apps/client/src/components/theme-toggle.tsx

@@ -1,13 +1,28 @@
-import { Button, Group, useMantineColorScheme } from '@mantine/core';
+import {
+  ActionIcon,
+  Tooltip,
+  useComputedColorScheme,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import classes from "./theme-toggle.module.css";
 
 export function ThemeToggle() {
-    const { setColorScheme } = useMantineColorScheme();
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme();
 
-    return (
-      <Group justify="center" mt="xl">
-          <Button onClick={() => setColorScheme('light')}>Light</Button>
-          <Button onClick={() => setColorScheme('dark')}>Dark</Button>
-          <Button onClick={() => setColorScheme('auto')}>Auto</Button>
-      </Group>
-    );
+  return (
+    <Tooltip label="Toggle Color Scheme">
+      <ActionIcon
+        variant="default"
+        onClick={() => {
+          setColorScheme(computedColorScheme === "light" ? "dark" : "light");
+        }}
+        aria-label="Toggle color scheme"
+      >
+        <IconSun className={classes.light} size={18} stroke={1.5} />
+        <IconMoon className={classes.dark} size={18} stroke={1.5} />
+      </ActionIcon>
+    </Tooltip>
+  );
 }

apps/client/src/features/editor/atoms/editor-atoms.ts

@@ -5,4 +5,6 @@ export const pageEditorAtom = atom<Editor | null>(null);
 
 export const titleEditorAtom = atom<Editor | null>(null);
 
+export const readOnlyEditorAtom = atom<Editor | null>(null);
+
 export const yjsConnectionStatusAtom = atom<string>("");

apps/client/src/features/editor/components/drawio/drawio-view.tsx

@@ -139,7 +139,7 @@ export default function DrawioView(props: NodeViewProps) {
             )}
           />
 
-          {selected && (
+          {selected && editor.isEditable && (
             <ActionIcon
               onClick={handleOpen}
               variant="default"

apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx

@@ -170,7 +170,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
             )}
           />
 
-          {selected && (
+          {selected && editor.isEditable && (
             <ActionIcon
               onClick={handleOpen}
               variant="default"

apps/client/src/features/editor/components/mention/mention-view.tsx

@@ -1,21 +1,34 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { ActionIcon, Anchor, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import {
+  buildPageUrl,
+  buildSharedPageUrl,
+} from "@/features/page/page.utils.ts";
 import classes from "./mention.module.css";
 
 export default function MentionView(props: NodeViewProps) {
   const { node } = props;
   const { label, entityType, entityId, slugId } = node.attrs;
   const { spaceSlug } = useParams();
+  const { shareId } = useParams();
   const {
     data: page,
     isLoading,
     isError,
   } = usePageQuery({ pageId: entityType === "page" ? slugId : null });
 
+  const location = useLocation();
+  const isShareRoute = location.pathname.startsWith("/share");
+
+  const shareSlugUrl = buildSharedPageUrl({
+    shareId,
+    pageSlugId: slugId,
+    pageTitle: label,
+  });
+
   return (
     <NodeViewWrapper style={{ display: "inline" }}>
       {entityType === "user" && (
@@ -28,7 +41,9 @@ export default function MentionView(props: NodeViewProps) {
         <Anchor
           component={Link}
           fw={500}
-          to={buildPageUrl(spaceSlug, slugId, label)}
+          to={
+            isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label)
+          }
           underline="never"
           className={classes.pageMentionLink}
         >

apps/client/src/features/editor/components/table-of-contents/table-of-contents.module.css

@@ -52,3 +52,8 @@
     ) !important;
   }
 }
+
+
+.leftBorder {
+  border-left: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}

apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 
 type TableOfContentsProps = {
   editor: ReturnType<typeof useEditor>;
+  isShare?: boolean;
 };
 
 export type HeadingLink = {
@@ -73,6 +74,7 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
 
   const handleUpdate = () => {
     const result = recalculateLinks(props.editor?.$nodes("heading"));
+
     setLinks(result.links);
     setHeadingDOMNodes(result.nodes);
   };
@@ -85,9 +87,12 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
     };
   }, [props.editor]);
 
-  useEffect(() => {
-    handleUpdate();
-  }, []);
+  useEffect(
+    () => {
+      handleUpdate();
+    },
+    props.isShare ? [props.editor] : [],
+  );
 
   useEffect(() => {
     try {
@@ -133,16 +138,23 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
   if (!links.length) {
     return (
       <>
-        <Text size="sm">
-          {t("Add headings (H1, H2, H3) to generate a table of contents.")}
-        </Text>
+        {!props.isShare && (
+          <Text size="sm">
+            {t("Add headings (H1, H2, H3) to generate a table of contents.")}
+          </Text>
+        )}
       </>
     );
   }
 
   return (
     <>
-      <div>
+      {props.isShare && (
+        <Text mb="md" fw={500}>
+          {t("Table of contents")}
+        </Text>
+      )}
+      <div className={props.isShare ? classes.leftBorder : ""}>
         {links.map((item, idx) => (
           <Box<"button">
             component="button"

apps/client/src/features/editor/readonly-page-editor.tsx

@@ -0,0 +1,67 @@
+import "@/features/editor/styles/index.css";
+import React, { useMemo } from "react";
+import { EditorProvider } from "@tiptap/react";
+import { mainExtensions } from "@/features/editor/extensions/extensions";
+import { Document } from "@tiptap/extension-document";
+import { Heading } from "@tiptap/extension-heading";
+import { Text } from "@tiptap/extension-text";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { useAtom } from "jotai/index";
+import {
+  pageEditorAtom,
+  readOnlyEditorAtom,
+} from "@/features/editor/atoms/editor-atoms.ts";
+import { Editor } from "@tiptap/core";
+
+interface PageEditorProps {
+  title: string;
+  content: any;
+}
+
+export default function ReadonlyPageEditor({
+  title,
+  content,
+}: PageEditorProps) {
+  const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
+
+  const extensions = useMemo(() => {
+    return [...mainExtensions];
+  }, []);
+
+  const titleExtensions = [
+    Document.extend({
+      content: "heading",
+    }),
+    Heading,
+    Text,
+    Placeholder.configure({
+      placeholder: "Untitled",
+      showOnlyWhenEditable: false,
+    }),
+  ];
+
+  return (
+    <>
+      <EditorProvider
+        editable={false}
+        immediatelyRender={true}
+        extensions={titleExtensions}
+        content={title}
+      ></EditorProvider>
+
+      <EditorProvider
+        editable={false}
+        immediatelyRender={true}
+        extensions={extensions}
+        content={content}
+        onCreate={({ editor }) => {
+          if (editor) {
+            // @ts-ignore
+            setReadOnlyEditor(editor);
+          }
+        }}
+      ></EditorProvider>
+      <div style={{ paddingBottom: "20vh" }}></div>
+    </>
+  );
+}

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;

apps/client/src/features/share/atoms/sidebar-atom.ts

@@ -0,0 +1,9 @@
+import { atomWithWebStorage } from "@/lib/jotai-helper.ts";
+import { atom } from 'jotai';
+
+export const tableOfContentAsideAtom = atomWithWebStorage<boolean>(
+  "showTOC",
+  true,
+);
+
+export const mobileTableOfContentAsideAtom = atom<boolean>(false);

apps/client/src/features/share/components/share-action-menu.tsx

@@ -0,0 +1,106 @@
+import { Menu, ActionIcon, Text } from "@mantine/core";
+import React from "react";
+import {
+  IconCopy,
+  IconDots,
+  IconFileDescription,
+  IconTrash,
+} from "@tabler/icons-react";
+import { modals } from "@mantine/modals";
+import { useTranslation } from "react-i18next";
+import { ISharedItem } from "@/features/share/types/share.types.ts";
+import {
+  buildPageUrl,
+  buildSharedPageUrl,
+} from "@/features/page/page.utils.ts";
+import { useClipboard } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import { useNavigate } from "react-router-dom";
+import { useDeleteShareMutation } from "@/features/share/queries/share-query.ts";
+
+interface Props {
+  share: ISharedItem;
+}
+export default function ShareActionMenu({ share }: Props) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const clipboard = useClipboard();
+  const deleteShareMutation = useDeleteShareMutation();
+
+  const openPage = () => {
+    const pageLink = buildPageUrl(
+      share.space.slug,
+      share.page.slugId,
+      share.page.title,
+    );
+    navigate(pageLink);
+  };
+
+  const copyLink = () => {
+    const shareLink = buildSharedPageUrl({
+      shareId: share.key,
+      pageTitle: share.page.title,
+      pageSlugId: share.page.slugId,
+    });
+
+    clipboard.copy(shareLink);
+    notifications.show({ message: t("Link copied") });
+  };
+  const onDelete = async () => {
+    deleteShareMutation.mutateAsync(share.key);
+  };
+
+  const openDeleteModal = () =>
+    modals.openConfirmModal({
+      title: t("Delete public share link"),
+      children: (
+        <Text size="sm">
+          {t("Are you sure you want to delete this shared link?")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Delete"), cancel: t("Don't") },
+      confirmProps: { color: "red" },
+      onConfirm: onDelete,
+    });
+
+  return (
+    <>
+      <Menu
+        shadow="xl"
+        position="bottom-end"
+        offset={20}
+        width={200}
+        withArrow
+        arrowPosition="center"
+      >
+        <Menu.Target>
+          <ActionIcon variant="subtle" c="gray">
+            <IconDots size={20} stroke={2} />
+          </ActionIcon>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item onClick={copyLink} leftSection={<IconCopy size={16} />}>
+            {t("Copy link")}
+          </Menu.Item>
+
+          <Menu.Item
+            onClick={openPage}
+            leftSection={<IconFileDescription size={16} />}
+          >
+            {t("Open page")}
+          </Menu.Item>
+          <Menu.Item
+            c="red"
+            onClick={openDeleteModal}
+            leftSection={<IconTrash size={16} />}
+            disabled={share.space?.userRole === "reader"}
+          >
+            {t("Delete share")}
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </>
+  );
+}

apps/client/src/features/share/components/share-layout.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from "react-router-dom";
+import ShareShell from "@/features/share/components/share-shell.tsx";
+
+export default function ShareLayout() {
+  return (
+    <ShareShell>
+      <Outlet />
+    </ShareShell>
+  );
+}

apps/client/src/features/share/components/share-list.tsx

@@ -0,0 +1,97 @@
+import { Table, Group, Text, Anchor } from "@mantine/core";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import Paginate from "@/components/common/paginate.tsx";
+import { useGetSharesQuery } from "@/features/share/queries/share-query.ts";
+import { ISharedItem } from "@/features/share/types/share.types.ts";
+import { format } from "date-fns";
+import ShareActionMenu from "@/features/share/components/share-action-menu.tsx";
+import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
+import { getPageIcon } from "@/lib";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import classes from "./share.module.css";
+
+export default function ShareList() {
+  const { t } = useTranslation();
+  const [page, setPage] = useState(1);
+  const { data, isLoading } = useGetSharesQuery({ page });
+
+  return (
+    <>
+      <Table.ScrollContainer minWidth={500}>
+        <Table verticalSpacing="xs">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{t("Page")}</Table.Th>
+              <Table.Th>{t("Shared by")}</Table.Th>
+              <Table.Th>{t("Shared at")}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+
+          <Table.Tbody>
+            {data?.items.map((share: ISharedItem, index: number) => (
+              <Table.Tr key={index}>
+                <Table.Td>
+                  <Anchor
+                    size="sm"
+                    underline="never"
+                    style={{
+                      cursor: "pointer",
+                      color: "var(--mantine-color-text)",
+                    }}
+                    component={Link}
+                    target="_blank"
+                    to={buildSharedPageUrl({
+                      shareId: share.key,
+                      pageTitle: share.page.title,
+                      pageSlugId: share.page.slugId,
+                    })}
+                  >
+                    <Group gap="4" wrap="nowrap">
+                      {getPageIcon(share.page.icon)}
+                      <div className={classes.shareLinkText}>
+                        <Text fz="sm" fw={500} lineClamp={1}>
+                          {share.page.title || t("untitled")}
+                        </Text>
+                      </div>
+                    </Group>
+                  </Anchor>
+                </Table.Td>
+                <Table.Td>
+                  <Group gap="4" wrap="nowrap">
+                    <CustomAvatar
+                      avatarUrl={share.creator?.avatarUrl}
+                      name={share.creator.name}
+                      size="sm"
+                    />
+                    <Text fz="sm" lineClamp={1}>
+                      {share.creator.name}
+                    </Text>
+                  </Group>
+                </Table.Td>
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {format(new Date(share.createdAt), "MMM dd, yyyy")}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <ShareActionMenu share={share} />
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+
+      {data?.items.length > 0 && (
+        <Paginate
+          currentPage={page}
+          hasPrevPage={data?.meta.hasPrevPage}
+          hasNextPage={data?.meta.hasNextPage}
+          onPageChange={setPage}
+        />
+      )}
+    </>
+  );
+}

apps/client/src/features/share/components/share-modal.tsx

@@ -0,0 +1,227 @@
+import {
+  ActionIcon,
+  Anchor,
+  Button,
+  Group,
+  Indicator,
+  Popover,
+  Switch,
+  Text,
+  TextInput,
+  Tooltip,
+} from "@mantine/core";
+import { IconExternalLink, IconWorld } from "@tabler/icons-react";
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  useCreateShareMutation,
+  useDeleteShareMutation,
+  useShareForPageQuery,
+  useUpdateShareMutation,
+} from "@/features/share/queries/share-query.ts";
+import { Link, useParams } from "react-router-dom";
+import { extractPageSlugId, getPageIcon } from "@/lib";
+import { useTranslation } from "react-i18next";
+import CopyTextButton from "@/components/common/copy.tsx";
+import { getAppUrl } from "@/lib/config.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import classes from "@/features/share/components/share.module.css";
+
+interface ShareModalProps {
+  readOnly: boolean;
+}
+export default function ShareModal({ readOnly }: ShareModalProps) {
+  const { t } = useTranslation();
+  const { pageSlug } = useParams();
+  const pageId = extractPageSlugId(pageSlug);
+  const { data: share } = useShareForPageQuery(pageId);
+  const { spaceSlug } = useParams();
+  const createShareMutation = useCreateShareMutation();
+  const updateShareMutation = useUpdateShareMutation();
+  const deleteShareMutation = useDeleteShareMutation();
+  // pageIsShared means that the share exists and its level equals zero.
+  const pageIsShared = share && share.level === 0;
+  // if level is greater than zero, then it is a descendant page from a shared page
+  const isDescendantShared = share && share.level > 0;
+
+  const publicLink = `${getAppUrl()}/share/${share?.key}/p/${pageSlug}`;
+
+  const [isPagePublic, setIsPagePublic] = useState<boolean>(false);
+  useEffect(() => {
+    if (share) {
+      setIsPagePublic(true);
+    } else {
+      setIsPagePublic(false);
+    }
+  }, [share, pageId]);
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+
+    if (value) {
+      createShareMutation.mutateAsync({
+        pageId: pageId,
+        includeSubPages: true,
+        searchIndexing: true,
+      });
+      setIsPagePublic(value);
+    } else {
+      if (share && share.id) {
+        deleteShareMutation.mutateAsync(share.id);
+        setIsPagePublic(value);
+      }
+    }
+  };
+
+  const handleSubPagesChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    updateShareMutation.mutateAsync({
+      shareId: share.id,
+      includeSubPages: value,
+    });
+  };
+
+  const handleIndexSearchChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    updateShareMutation.mutateAsync({
+      shareId: share.id,
+      searchIndexing: value,
+    });
+  };
+
+  const shareLink = useMemo(() => (
+    <Group my="sm" gap={4} wrap="nowrap">
+      <TextInput
+        variant="filled"
+        value={publicLink}
+        readOnly
+        rightSection={<CopyTextButton text={publicLink} />}
+        style={{ width: "100%" }}
+      />
+      <ActionIcon
+        component="a"
+        variant="default"
+        target="_blank"
+        href={publicLink}
+        size="sm"
+      >
+        <IconExternalLink size={16} />
+      </ActionIcon>
+    </Group>
+  ), [publicLink]);
+
+  return (
+    <Popover width={350} position="bottom" withArrow shadow="md">
+      <Popover.Target>
+        <Button
+          style={{ border: "none" }}
+          size="compact-sm"
+          leftSection={
+            <Indicator
+              color="green"
+              offset={5}
+              disabled={!isPagePublic}
+              withBorder
+            >
+              <IconWorld size={20} stroke={1.5} />
+            </Indicator>
+          }
+          variant="default"
+        >
+          {t("Share")}
+        </Button>
+      </Popover.Target>
+      <Popover.Dropdown style={{ userSelect: "none" }}>
+        {isDescendantShared ? (
+          <>
+            <Text size="sm">{t("Inherits public sharing from")}</Text>
+            <Anchor
+              size="sm"
+              underline="never"
+              style={{
+                cursor: "pointer",
+                color: "var(--mantine-color-text)",
+              }}
+              component={Link}
+              to={buildPageUrl(
+                spaceSlug,
+                share.sharedPage.slugId,
+                share.sharedPage.title,
+              )}
+            >
+              <Group gap="4" wrap="nowrap" my="sm">
+                {getPageIcon(share.sharedPage.icon)}
+                <div className={classes.shareLinkText}>
+                  <Text fz="sm" fw={500} lineClamp={1}>
+                    {share.sharedPage.title || t("untitled")}
+                  </Text>
+                </div>
+              </Group>
+            </Anchor>
+
+            {shareLink}
+          </>
+        ) : (
+          <>
+            <Group justify="space-between" wrap="nowrap" gap="xl">
+              <div>
+                <Text size="sm">
+                  {isPagePublic ? t("Shared to web") : t("Share to web")}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  {isPagePublic
+                    ? t("Anyone with the link can view this page")
+                    : t("Make this page publicly accessible")}
+                </Text>
+              </div>
+              <Switch
+                onChange={handleChange}
+                defaultChecked={isPagePublic}
+                disabled={readOnly}
+                size="xs"
+              />
+            </Group>
+
+            {pageIsShared && (
+              <>
+                {shareLink}
+                <Group justify="space-between" wrap="nowrap" gap="xl">
+                  <div>
+                    <Text size="sm">{t("Include sub-pages")}</Text>
+                    <Text size="xs" c="dimmed">
+                      {t("Make sub-pages public too")}
+                    </Text>
+                  </div>
+
+                  <Switch
+                    onChange={handleSubPagesChange}
+                    checked={share.includeSubPages}
+                    size="xs"
+                    disabled={readOnly}
+                  />
+                </Group>
+                <Group justify="space-between" wrap="nowrap" gap="xl" mt="sm">
+                  <div>
+                    <Text size="sm">{t("Search engine indexing")}</Text>
+                    <Text size="xs" c="dimmed">
+                      {t("Allow search engines to index page")}
+                    </Text>
+                  </div>
+                  <Switch
+                    onChange={handleIndexSearchChange}
+                    checked={share.searchIndexing}
+                    size="xs"
+                    disabled={readOnly}
+                  />
+                </Group>
+              </>
+            )}
+          </>
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/features/share/components/share-shell.tsx

@@ -0,0 +1,196 @@
+import React, { useState } from "react";
+import {
+  ActionIcon,
+  Affix,
+  AppShell,
+  Button,
+  Group,
+  ScrollArea,
+  Tooltip,
+} from "@mantine/core";
+import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
+import { useParams } from "react-router-dom";
+import SharedTree from "@/features/share/components/shared-tree.tsx";
+import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
+import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import { ThemeToggle } from "@/components/theme-toggle.tsx";
+import { useAtomValue } from "jotai";
+import { useAtom } from "jotai";
+import {
+  desktopSidebarAtom,
+  mobileSidebarAtom,
+} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
+import { useTranslation } from "react-i18next";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import {
+  mobileTableOfContentAsideAtom,
+  tableOfContentAsideAtom,
+} from "@/features/share/atoms/sidebar-atom.ts";
+import { IconList } from "@tabler/icons-react";
+import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
+import classes from "./share.module.css";
+import { useClickOutside } from "@mantine/hooks";
+
+const MemoizedSharedTree = React.memo(SharedTree);
+
+export default function ShareShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { t } = useTranslation();
+  const [mobileOpened] = useAtom(mobileSidebarAtom);
+  const [desktopOpened] = useAtom(desktopSidebarAtom);
+  const toggleMobile = useToggleSidebar(mobileSidebarAtom);
+  const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
+
+  const [tocOpened] = useAtom(tableOfContentAsideAtom);
+  const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom);
+  const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom);
+  const toggleToc = useToggleToc(tableOfContentAsideAtom);
+
+  const { shareId } = useParams();
+  const { data } = useGetSharedPageTreeQuery(shareId);
+  const readOnlyEditor = useAtomValue(readOnlyEditorAtom);
+
+  const [navbarOutside, setNavbarOutside] = useState<HTMLElement | null>(null);
+  const [asideOutside, setAsideOutside] = useState<HTMLElement | null>(null);
+
+  useClickOutside(
+    () => {
+      if (mobileOpened) {
+        toggleMobile();
+      }
+      if (mobileTocOpened) {
+        toggleTocMobile();
+      }
+    },
+    null,
+    [navbarOutside, asideOutside],
+  );
+
+  return (
+    <AppShell
+      header={{ height: 48 }}
+      {...(data?.pageTree?.length > 1 && {
+        navbar: {
+          width: 300,
+          breakpoint: "sm",
+          collapsed: {
+            mobile: !mobileOpened,
+            desktop: !desktopOpened,
+          },
+        },
+      })}
+      aside={{
+        width: 300,
+        breakpoint: "sm",
+        collapsed: {
+          mobile: !mobileTocOpened,
+          desktop: !tocOpened,
+        },
+      }}
+      padding="md"
+    >
+      <AppShell.Header>
+        <Group wrap="nowrap" justify="space-between" py="sm" px="xl">
+          <Group>
+            {data?.pageTree?.length > 1 && (
+              <>
+                <Tooltip label={t("Sidebar toggle")}>
+                  <SidebarToggle
+                    aria-label={t("Sidebar toggle")}
+                    opened={mobileOpened}
+                    onClick={toggleMobile}
+                    hiddenFrom="sm"
+                    size="sm"
+                  />
+                </Tooltip>
+
+                <Tooltip label={t("Sidebar toggle")}>
+                  <SidebarToggle
+                    aria-label={t("Sidebar toggle")}
+                    opened={desktopOpened}
+                    onClick={toggleDesktop}
+                    visibleFrom="sm"
+                    size="sm"
+                  />
+                </Tooltip>
+              </>
+            )}
+          </Group>
+          <Group>
+            <>
+              <Tooltip label={t("Table of contents")} withArrow>
+                <ActionIcon
+                  variant="default"
+                  style={{ border: "none" }}
+                  onClick={toggleTocMobile}
+                  hiddenFrom="sm"
+                  size="sm"
+                >
+                  <IconList size={20} stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+
+              <Tooltip label={t("Table of contents")} withArrow>
+                <ActionIcon
+                  variant="default"
+                  style={{ border: "none" }}
+                  onClick={toggleToc}
+                  visibleFrom="sm"
+                  size="sm"
+                >
+                  <IconList size={20} stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+            </>
+
+            <ThemeToggle />
+          </Group>
+        </Group>
+      </AppShell.Header>
+
+      {data?.pageTree?.length > 1 && (
+        <AppShell.Navbar
+          p="md"
+          className={classes.navbar}
+          ref={setNavbarOutside}
+        >
+          <MemoizedSharedTree sharedPageTree={data} />
+        </AppShell.Navbar>
+      )}
+
+      <AppShell.Main>
+        {children}
+
+        <Affix position={{ bottom: 20, right: 20 }}>
+          <Button
+            variant="default"
+            component="a"
+            target="_blank"
+            href="https://docmost.com?ref=public-share"
+          >
+            Powered by Docmost
+          </Button>
+        </Affix>
+      </AppShell.Main>
+
+      <AppShell.Aside
+        p="md"
+        withBorder={mobileTocOpened}
+        className={classes.aside}
+        ref={setAsideOutside}
+      >
+        <ScrollArea style={{ height: "80vh" }} scrollbarSize={5} type="scroll">
+          <div style={{ paddingBottom: "50px" }}>
+            {readOnlyEditor && (
+              <TableOfContents isShare={true} editor={readOnlyEditor} />
+            )}
+          </div>
+        </ScrollArea>
+      </AppShell.Aside>
+    </AppShell>
+  );
+}

apps/client/src/features/share/components/share.module.css

@@ -0,0 +1,20 @@
+.shareLinkText {
+  @mixin light {
+    border-bottom: 0.05em solid var(--mantine-color-dark-0);
+  }
+  @mixin dark {
+    border-bottom: 0.05em solid var(--mantine-color-dark-2);
+  }
+}
+
+.treeNode {
+  text-decoration: none;
+  user-select: none;
+}
+
+.navbar,
+.aside {
+  @media (max-width: $mantine-breakpoint-sm) {
+    width: 350px;
+  }
+}

apps/client/src/features/share/components/shared-tree.tsx

@@ -0,0 +1,179 @@
+import { ISharedPageTree } from "@/features/share/types/share.types.ts";
+import { NodeApi, NodeRendererProps, Tree, TreeApi } from "react-arborist";
+import {
+  buildSharedPageTree,
+  SharedPageTreeNode,
+} from "@/features/share/utils.ts";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useElementSize, useMergedRef } from "@mantine/hooks";
+import { SpaceTreeNode } from "@/features/page/tree/types.ts";
+import { Link, useParams } from "react-router-dom";
+import { atom, useAtom } from "jotai/index";
+import { useTranslation } from "react-i18next";
+import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
+import clsx from "clsx";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconPointFilled,
+} from "@tabler/icons-react";
+import { ActionIcon, Box } from "@mantine/core";
+import { extractPageSlugId } from "@/lib";
+import { OpenMap } from "react-arborist/dist/main/state/open-slice";
+import classes from "@/features/page/tree/styles/tree.module.css";
+import styles from "./share.module.css";
+import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+
+interface SharedTree {
+  sharedPageTree: ISharedPageTree;
+}
+
+const openSharedTreeNodesAtom = atom<OpenMap>({});
+
+export default function SharedTree({ sharedPageTree }: SharedTree) {
+  const [tree, setTree] = useState<
+    TreeApi<SharedPageTreeNode> | null | undefined
+  >(null);
+  const rootElement = useRef<HTMLDivElement>();
+  const { ref: sizeRef, width, height } = useElementSize();
+  const mergedRef = useMergedRef(rootElement, sizeRef);
+  const { pageSlug } = useParams();
+  const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(
+    openSharedTreeNodesAtom,
+  );
+
+  const currentNodeId = extractPageSlugId(pageSlug);
+
+  const treeData: SharedPageTreeNode[] = useMemo(() => {
+    if (!sharedPageTree?.pageTree) return;
+    return buildSharedPageTree(sharedPageTree.pageTree);
+  }, [sharedPageTree?.pageTree]);
+
+  useEffect(() => {
+    const parentNodeId = treeData?.[0]?.slugId;
+
+    if (parentNodeId && tree) {
+      const parentNode = tree.get(parentNodeId);
+
+      setTimeout(() => {
+        if (parentNode) {
+          tree.openSiblings(parentNode);
+        }
+      });
+
+      // open direct children of parent node
+      parentNode?.children.forEach((node) => {
+        tree.openSiblings(node);
+      });
+    }
+  }, [treeData, tree]);
+
+  useEffect(() => {
+    if (currentNodeId && tree) {
+      setTimeout(() => {
+        // focus on node and open all parents
+        tree?.select(currentNodeId, { align: "auto" });
+      }, 200);
+    } else {
+      tree?.deselectAll();
+    }
+  }, [currentNodeId, tree]);
+
+  if (!sharedPageTree || !sharedPageTree?.pageTree) {
+    return null;
+  }
+
+  return (
+    <div ref={mergedRef} className={classes.treeContainer}>
+      {rootElement.current && (
+        <Tree
+          data={treeData}
+          disableDrag={true}
+          disableDrop={true}
+          disableEdit={true}
+          width={width}
+          height={rootElement.current.clientHeight}
+          ref={(t) => setTree(t)}
+          openByDefault={false}
+          disableMultiSelection={true}
+          className={classes.tree}
+          rowClassName={classes.row}
+          rowHeight={30}
+          overscanCount={10}
+          dndRootElement={rootElement.current}
+          onToggle={() => {
+            setOpenTreeNodes(tree?.openState);
+          }}
+          initialOpenState={openTreeNodes}
+          onClick={(e) => {
+            if (tree && tree.focusedNode) {
+              tree.select(tree.focusedNode);
+            }
+          }}
+        >
+          {Node}
+        </Tree>
+      )}
+    </div>
+  );
+}
+
+function Node({ node, style, tree }: NodeRendererProps<any>) {
+  const { shareId } = useParams();
+  const { t } = useTranslation();
+  const [, setMobileSidebarState] = useAtom(mobileSidebarAtom);
+
+  const pageUrl = buildSharedPageUrl({
+    shareId: shareId,
+    pageSlugId: node.data.slugId,
+    pageTitle: node.data.name,
+  });
+
+  return (
+    <>
+      <Box
+        style={style}
+        className={clsx(classes.node, node.state, styles.treeNode)}
+        component={Link}
+        to={pageUrl}
+        onClick={() => {
+          setMobileSidebarState(false);
+        }}
+      >
+        <PageArrow node={node} />
+        <span className={classes.text}>{node.data.name || t("untitled")}</span>
+      </Box>
+    </>
+  );
+}
+
+interface PageArrowProps {
+  node: NodeApi<SpaceTreeNode>;
+}
+
+function PageArrow({ node }: PageArrowProps) {
+  return (
+    <ActionIcon
+      size={20}
+      variant="subtle"
+      c="gray"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        node.toggle();
+      }}
+    >
+      {node.isInternal ? (
+        node.children && (node.children.length > 0 || node.data.hasChildren) ? (
+          node.isOpen ? (
+            <IconChevronDown stroke={2} size={16} />
+          ) : (
+            <IconChevronRight stroke={2} size={16} />
+          )
+        ) : (
+          <IconPointFilled size={4} />
+        )
+      ) : null}
+    </ActionIcon>
+  );
+}

apps/client/src/features/share/hooks/use-toggle-toc.ts

@@ -0,0 +1,8 @@
+import { useAtom } from "jotai";
+
+export function useToggleToc(tocAtom: any) {
+  const [tocState, setTocState] = useAtom(tocAtom);
+  return () => {
+    setTocState(!tocState);
+  }
+}

apps/client/src/features/share/queries/share-query.ts

@@ -0,0 +1,179 @@
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import {
+  ICreateShare,
+  IShare,
+  ISharedItem,
+  ISharedPage,
+  ISharedPageTree,
+  IShareForPage,
+  IShareInfoInput,
+  IUpdateShare,
+} from "@/features/share/types/share.types.ts";
+import {
+  createShare,
+  deleteShare,
+  getSharedPageTree,
+  getShareForPage,
+  getShareInfo,
+  getSharePageInfo,
+  getShares,
+  updateShare,
+} from "@/features/share/services/share-service.ts";
+import { IPage } from "@/features/page/types/page.types.ts";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+import { useEffect } from "react";
+
+export function useGetSharesQuery(
+  params?: QueryParams,
+): UseQueryResult<IPagination<ISharedItem>, Error> {
+  return useQuery({
+    queryKey: ["share-list"],
+    queryFn: () => getShares(params),
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useGetShareByIdQuery(
+  shareId: string,
+): UseQueryResult<IShare, Error> {
+  const query = useQuery({
+    queryKey: ["share-by-id", shareId],
+    queryFn: () => getShareInfo(shareId),
+    enabled: !!shareId,
+  });
+
+  return query;
+}
+
+export function useSharePageQuery(
+  shareInput: Partial<IShareInfoInput>,
+): UseQueryResult<ISharedPage, Error> {
+  const query = useQuery({
+    queryKey: ["shares", shareInput],
+    queryFn: () => getSharePageInfo(shareInput),
+    enabled: !!shareInput.pageId,
+  });
+
+  return query;
+}
+
+export function useShareForPageQuery(
+  pageId: string,
+): UseQueryResult<IShareForPage, Error> {
+  const query = useQuery({
+    queryKey: ["share-for-page", pageId],
+    queryFn: () => getShareForPage(pageId),
+    enabled: !!pageId,
+    staleTime: 0,
+    retry: false,
+  });
+
+  return query;
+}
+
+export function useCreateShareMutation() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation<any, Error, ICreateShare>({
+    mutationFn: (data) => createShare(data),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["share-for-page", "share-list"].includes(item.queryKey[0] as string),
+      });
+    },
+    onError: (error) => {
+      notifications.show({ message: t("Failed to share page"), color: "red" });
+    },
+  });
+}
+
+export function useUpdateShareMutation() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation<any, Error, IUpdateShare>({
+    mutationFn: (data) => updateShare(data),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["share-for-page", "share-list"].includes(item.queryKey[0] as string),
+      });
+    },
+    onError: (error, params) => {
+      if (error?.["status"] === 404) {
+        queryClient.removeQueries({
+          predicate: (item) =>
+            ["share-for-page"].includes(item.queryKey[0] as string),
+        });
+
+        notifications.show({
+          message: t("Share not found"),
+          color: "red",
+        });
+        return;
+      }
+
+      notifications.show({
+        message: error?.["response"]?.data?.message || "Share not found",
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useDeleteShareMutation() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (shareId: string) => deleteShare(shareId),
+    onSuccess: (data) => {
+      queryClient.removeQueries({
+        predicate: (item) =>
+          ["share-for-page"].includes(item.queryKey[0] as string),
+      });
+
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["share-list"].includes(item.queryKey[0] as string),
+      });
+
+      notifications.show({ message: t("Share deleted successfully") });
+    },
+    onError: (error) => {
+      if (error?.["status"] === 404) {
+        queryClient.removeQueries({
+          predicate: (item) =>
+            ["share-for-page"].includes(item.queryKey[0] as string),
+        });
+      }
+
+      notifications.show({
+        message: error?.["response"]?.data?.message || "Failed to delete share",
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useGetSharedPageTreeQuery(
+  shareId: string,
+): UseQueryResult<ISharedPageTree, Error> {
+  return useQuery({
+    queryKey: ["shared-page-tree", shareId],
+    queryFn: () => getSharedPageTree(shareId),
+    enabled: !!shareId,
+    placeholderData: keepPreviousData,
+    staleTime: 60 * 60 * 1000,
+  });
+}

apps/client/src/features/share/services/share-service.ts

@@ -0,0 +1,59 @@
+import api from "@/lib/api-client";
+import { IPage } from "@/features/page/types/page.types";
+
+import {
+  ICreateShare,
+  IShare,
+  ISharedItem,
+  ISharedPage,
+  ISharedPageTree,
+  IShareForPage,
+  IShareInfoInput,
+  IUpdateShare,
+} from "@/features/share/types/share.types.ts";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+
+export async function getShares(
+  params?: QueryParams,
+): Promise<IPagination<ISharedItem>> {
+  const req = await api.post("/shares", params);
+  return req.data;
+}
+
+export async function createShare(data: ICreateShare): Promise<any> {
+  const req = await api.post<any>("/shares/create", data);
+  return req.data;
+}
+
+export async function getShareInfo(shareId: string): Promise<IShare> {
+  const req = await api.post<IShare>("/shares/info", { shareId });
+  return req.data;
+}
+
+export async function updateShare(data: IUpdateShare): Promise<any> {
+  const req = await api.post<any>("/shares/update", data);
+  return req.data;
+}
+
+export async function getShareForPage(pageId: string): Promise<IShareForPage> {
+  const req = await api.post<any>("/shares/for-page", { pageId });
+  return req.data;
+}
+
+export async function getSharePageInfo(
+  shareInput: Partial<IShareInfoInput>,
+): Promise<ISharedPage> {
+  const req = await api.post<ISharedPage>("/shares/page-info", shareInput);
+  return req.data;
+}
+
+export async function deleteShare(shareId: string): Promise<void> {
+  await api.post("/shares/delete", { shareId });
+}
+
+export async function getSharedPageTree(
+  shareId: string,
+): Promise<ISharedPageTree> {
+  const req = await api.post<ISharedPageTree>("/shares/tree", { shareId });
+  return req.data;
+}

apps/client/src/features/share/types/share.types.ts

@@ -0,0 +1,73 @@
+import { IPage } from "@/features/page/types/page.types.ts";
+
+export interface IShare {
+  id: string;
+  key: string;
+  pageId: string;
+  includeSubPages: boolean;
+  searchIndexing: boolean;
+  creatorId: string;
+  spaceId: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  sharedPage?: ISharePage;
+}
+
+export interface ISharedItem extends IShare {
+  page: {
+    id: string;
+    title: string;
+    slugId: string;
+    icon: string | null;
+  };
+  space: {
+    id: string;
+    name: string;
+    slug: string;
+    userRole: string;
+  };
+  creator: {
+    id: string;
+    name: string;
+    avatarUrl: string | null;
+  };
+}
+
+export interface ISharedPage extends IShare {
+  page: IPage;
+  share: IShare & {
+    level: number;
+    sharedPage: { id: string; slugId: string; title: string; icon: string };
+  };
+}
+
+export interface IShareForPage extends IShare {
+  level: number;
+  sharedPage: ISharePage;
+}
+
+interface ISharePage {
+  id: string;
+  slugId: string;
+  title: string;
+  icon: string;
+}
+
+export interface ICreateShare {
+  pageId?: string;
+  includeSubPages?: boolean;
+  searchIndexing?: boolean;
+}
+
+export type IUpdateShare = ICreateShare & { shareId: string; pageId?: string };
+
+export interface IShareInfoInput {
+  pageId: string;
+}
+
+export interface ISharedPageTree {
+  share: IShare;
+  pageTree: Partial<IPage[]>;
+}

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

@@ -0,0 +1,60 @@
+import { IPage } from "@/features/page/types/page.types.ts";
+import { sortPositionKeys } from "@/features/page/tree/utils";
+
+export type SharedPageTreeNode = {
+  id: string;
+  slugId: string;
+  name: string;
+  icon?: string;
+  position: string;
+  spaceId: string;
+  parentPageId: string;
+  hasChildren: boolean;
+  children: SharedPageTreeNode[];
+  label: string,
+  value: string,
+};
+
+export function buildSharedPageTree(pages: Partial<IPage[]>): SharedPageTreeNode[] {
+  const pageMap: Record<string, SharedPageTreeNode> = {};
+
+  // Initialize each page as a tree node and store it in a map.
+  pages.forEach((page) => {
+    pageMap[page.id] = {
+      id: page.slugId,
+      slugId: page.slugId,
+      name: page.title,
+      icon: page.icon,
+      position: page.position,
+      // Initially assume a page has no children.
+      hasChildren: false,
+      spaceId: page.spaceId,
+      parentPageId: page.parentPageId,
+      label: page.title || 'untitled',
+      value: page.id,
+      children: [],
+    };
+  });
+
+  // Build the tree structure.
+  const tree: SharedPageTreeNode[] = [];
+  pages.forEach((page) => {
+    if (page.parentPageId) {
+      // If the page has a parent, add it as a child of the parent node.
+      const parentNode = pageMap[page.parentPageId];
+      if (parentNode) {
+        parentNode.children.push(pageMap[page.id]);
+        parentNode.hasChildren = true;
+      } else {
+        // Parent not found – treat this page as a top-level node.
+        tree.push(pageMap[page.id]);
+      }
+    } else {
+      // No parentPageId indicates a top-level page.
+      tree.push(pageMap[page.id]);
+    }
+  });
+
+  // Return the sorted tree.
+  return sortPositionKeys(tree);
+}

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -38,6 +38,8 @@ import PageImportModal from "@/features/page/components/page-import-modal.tsx";
 import { useTranslation } from "react-i18next";
 import { SwitchSpace } from "./switch-space";
 import ExportModal from "@/components/common/export-modal";
+import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 
 export function SpaceSidebar() {
   const { t } = useTranslation();
@@ -45,6 +47,9 @@ export function SpaceSidebar() {
   const location = useLocation();
   const [opened, { open: openSettings, close: closeSettings }] =
     useDisclosure(false);
+  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
+
   const { spaceSlug } = useParams();
   const { data: space, isLoading, isError } = useGetSpaceBySlugQuery(spaceSlug);
 
@@ -123,7 +128,12 @@ export function SpaceSidebar() {
             ) && (
               <UnstyledButton
                 className={classes.menu}
-                onClick={handleCreatePage}
+                onClick={() => {
+                  handleCreatePage();
+                  if (mobileSidebarOpened) {
+                    toggleMobileSidebar();
+                  }
+                }}
               >
                 <div className={classes.menuItemInner}>
                   <IconPlus

apps/client/src/lib/api-client.ts

@@ -26,6 +26,7 @@ api.interceptors.response.use(
         case 401: {
           const url = new URL(error.request.responseURL)?.pathname;
           if (url === "/api/auth/collab-token") return;
+          if (window.location.pathname.startsWith("/share/")) return;
 
           // Handle unauthorized error
           redirectToLogin();

apps/client/src/pages/settings/shares/shares.tsx

@@ -0,0 +1,31 @@
+import SettingsTitle from "@/components/settings/settings-title.tsx";
+import { Helmet } from "react-helmet-async";
+import { getAppName } from "@/lib/config.ts";
+import { useTranslation } from "react-i18next";
+import ShareList from "@/features/share/components/share-list.tsx";
+import { Alert, Text } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import React from "react";
+
+export default function Shares() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {t("Public sharing")} - {getAppName()}
+        </title>
+      </Helmet>
+      <SettingsTitle title={t("Public sharing")} />
+
+      <Alert variant="light" color="blue" icon={<IconInfoCircle />}>
+        {t(
+          "Publicly shared pages from spaces you are a member of will appear here",
+        )}
+      </Alert>
+
+      <ShareList />
+    </>
+  );
+}

apps/client/src/pages/share/share-redirect.tsx

@@ -0,0 +1,35 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
+import { Error404 } from "@/components/ui/error-404.tsx";
+import { useGetShareByIdQuery } from "@/features/share/queries/share-query.ts";
+
+export default function ShareRedirect() {
+  const { shareId } = useParams();
+  const navigate = useNavigate();
+
+  const { data: share, isLoading, isError } = useGetShareByIdQuery(shareId);
+
+  useEffect(() => {
+    if (share) {
+      navigate(
+        buildSharedPageUrl({
+          shareId: share.key,
+          pageSlugId: share?.sharedPage.slugId,
+          pageTitle: share?.sharedPage.title,
+        }),
+        { replace: true },
+      );
+    }
+  }, [isLoading, share]);
+
+  if (isError) {
+    return <Error404 />;
+  }
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  return null;
+}

apps/client/src/pages/share/shared-page.tsx

@@ -0,0 +1,58 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
+import { Container } from "@mantine/core";
+import React, { useEffect } from "react";
+import ReadonlyPageEditor from "@/features/editor/readonly-page-editor.tsx";
+import { extractPageSlugId } from "@/lib";
+import { Error404 } from "@/components/ui/error-404.tsx";
+
+export default function SingleSharedPage() {
+  const { t } = useTranslation();
+  const { pageSlug } = useParams();
+  const { shareId } = useParams();
+  const navigate = useNavigate();
+
+  const { data, isLoading, isError, error } = useSharePageQuery({
+    pageId: extractPageSlugId(pageSlug),
+  });
+
+  useEffect(() => {
+    if (shareId && data) {
+      if (data.share.key !== shareId) {
+        navigate(`/share/${data.share.key}/p/${pageSlug}`, { replace: true });
+      }
+    }
+  }, [shareId, data]);
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (isError || !data) {
+    if ([401, 403, 404].includes(error?.["status"])) {
+      return <Error404 />;
+    }
+    return <div>{t("Error fetching page data.")}</div>;
+  }
+
+  return (
+    <div>
+      <Helmet>
+        <title>{`${data?.page?.title || t("untitled")}`}</title>
+        {!data?.share.searchIndexing && (
+          <meta name="robots" content="noindex" />
+        )}
+      </Helmet>
+
+      <Container size={900} p={0}>
+        <ReadonlyPageEditor
+          key={data.page.id}
+          title={data.page.title}
+          content={data.page.content}
+        />
+      </Container>
+    </div>
+  );
+}