feat(beta): public spaces (#2473)

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

@@ -1,10 +1,67 @@
-import { Outlet } from "react-router-dom";
-import ShareShell from "@/features/share/components/share-shell.tsx";
+import "@fontsource-variable/inter";
+import "@/styles/public-typography.css";
+import { useEffect, useMemo } from "react";
+import { Outlet, useParams } from "react-router-dom";
+import { useSetAtom } from "jotai";
+import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
+import { buildSharedPageTree } from "@/features/share/utils.ts";
+import {
+  sharedPageTreeAtom,
+  sharedTreeDataAtom,
+} from "@/features/share/atoms/shared-page-atom.ts";
+import DocsShell from "@/features/public-space/components/docs/docs-shell.tsx";
+import { DocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
+import { useDocsAccent } from "@/features/public-space/theme/docs-theme.ts";
+import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
+import { ShareSearchSpotlight } from "@/features/search/components/share-search-spotlight.tsx";
+import { shareSearchSpotlight } from "@/features/search/constants";
 
 export default function ShareLayout() {
+  const { shareId } = useParams();
+  const { data } = useGetSharedPageTreeQuery(shareId);
+
+  // Shares have no appearance settings; apply the default docs accent.
+  useDocsAccent(undefined);
+
+  const setSharedPageTree = useSetAtom(sharedPageTreeAtom);
+  const setSharedTreeData = useSetAtom(sharedTreeDataAtom);
+
+  const treeData = useMemo(() => {
+    if (!data?.pageTree) return null;
+    return buildSharedPageTree(data.pageTree);
+  }, [data?.pageTree]);
+
+  useEffect(() => {
+    setSharedPageTree(data || null);
+    setSharedTreeData(treeData);
+  }, [data, treeData, setSharedPageTree, setSharedTreeData]);
+
+  const surface = useMemo<DocsSurface>(
+    () => ({
+      treeData,
+      hasSidebar: (data?.pageTree?.length ?? 0) > 1,
+      getNodeUrl: (node) =>
+        buildSharedPageUrl({
+          shareId,
+          pageSlugId: node.slugId,
+          pageTitle: node.name,
+        }),
+      showBranding: Boolean(data),
+      showEditPage: true,
+      brandingRef: "public-share",
+    }),
+    [data, treeData, shareId],
+  );
+
   return (
-    <ShareShell>
+    <DocsShell
+      surface={surface}
+      onSearchOpen={shareId ? shareSearchSpotlight.open : undefined}
+      searchSpotlight={
+        shareId ? <ShareSearchSpotlight shareId={shareId} /> : undefined
+      }
+    >
       <Outlet />
-    </ShareShell>
+    </DocsShell>
   );
 }