1
import { useMemo } from "react";
2
import { useQuery } from "@tanstack/react-query";
3
import { SharedPageTree } from "@/client/components/sidebar/shared-page-tree";
4
import { MobileDrawer } from "@/client/components/ui/mobile-drawer";
5
import { useReadyShareView } from "@/client/components/share/use-share-view";
6
import { pageAncestorsQueryOptions } from "@/client/lib/queries/page-ancestors";
7
 
8
interface ShareSidebarProps {
9
  mobileOpen: boolean;
10
  onMobileClose: () => void;
11
}
12
 
13
export function ShareSidebar({ mobileOpen, onMobileClose }: ShareSidebarProps) {
14
  const share = useReadyShareView();
15
  const ancestorsQuery = useQuery({
16
    ...pageAncestorsQueryOptions(share.workspaceId, share.activePageId, share.token),
17
    enabled: share.activePageId !== share.rootPageId,
18
  });
19
 
20
  const autoExpandPathIds = useMemo(() => {
21
    if (share.activePageId === share.rootPageId) return [];
22
    const ancestors = ancestorsQuery.data ?? [];
23
    const rootIndex = ancestors.findIndex((ancestor) => ancestor.id === share.rootPageId);
24
    const scopedAncestors = rootIndex >= 0 ? ancestors.slice(rootIndex + 1) : ancestors;
25
    return [...scopedAncestors.map((ancestor) => ancestor.id), share.activePageId].filter(
26
      (pageId) => pageId !== share.rootPageId,
27
    );
28
  }, [ancestorsQuery.data, share.activePageId, share.rootPageId]);
29
 
30
  return (
31
    <MobileDrawer open={mobileOpen} onClose={onMobileClose}>
32
      <SharedPageTree
33
        workspaceId={share.workspaceId}
34
        rootPage={share.rootPage}
35
        shareToken={share.token}
36
        activePageId={share.activePageId}
37
        autoExpandPathIds={autoExpandPathIds}
38
        onNavigate={(pageId) => {
39
          share.navigate(pageId);
40
          onMobileClose();
41
        }}
42
      />
43
    </MobileDrawer>
44
  );
45
}