fix: separate shared lists in the sidebar (#2180)

* fix: separate shared lists in the sidebar

* fix sub

* i18n

2 files changed, 106 insertions, 24 deletions

diff --git a/apps/web/components/dashboard/lists/AllListsView.tsx b/apps/web/components/dashboard/lists/AllListsView.tsx
index 6101112d..7a7c9504 100644
--- a/apps/web/components/dashboard/lists/AllListsView.tsx
+++ b/apps/web/components/dashboard/lists/AllListsView.tsx
@@ -1,13 +1,22 @@
 "use client";
 
+import { useMemo, useState } from "react";
 import Link from "next/link";
 import { EditListModal } from "@/components/dashboard/lists/EditListModal";
 import { Button } from "@/components/ui/button";
-import { CollapsibleTriggerChevron } from "@/components/ui/collapsible";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTriggerChevron,
+} from "@/components/ui/collapsible";
 import { useTranslation } from "@/lib/i18n/client";
 import { MoreHorizontal, Plus } from "lucide-react";
 
 import type { ZBookmarkList } from "@karakeep/shared/types/lists";
+import {
+  augmentBookmarkListsWithInitialData,
+  useBookmarkLists,
+} from "@karakeep/shared-react/hooks/lists";
 
 import { CollapsibleBookmarkLists } from "./CollapsibleBookmarkLists";
 import { ListOptions } from "./ListOptions";
@@ -64,6 +73,20 @@ export default function AllListsView({
   initialData: ZBookmarkList[];
 }) {
   const { t } = useTranslation();
+
+  // Fetch live lists data
+  const { data: listsData } = useBookmarkLists(undefined, {
+    initialData: { lists: initialData },
+  });
+  const lists = augmentBookmarkListsWithInitialData(listsData, initialData);
+
+  // Check if there are any shared lists
+  const hasSharedLists = useMemo(() => {
+    return lists.data.some((list) => list.userRole !== "owner");
+  }, [lists.data]);
+
+  const [sharedListsOpen, setSharedListsOpen] = useState(true);
+
   return (
     <ul>
       <EditListModal>
@@ -84,21 +107,54 @@ export default function AllListsView({
         icon="🗄️"
         path={`/dashboard/archive`}
       />
+
+      {/* Owned Lists */}
       <CollapsibleBookmarkLists
-        initialData={initialData}
-        render={({ item, level, open }) => (
+        listsData={lists}
+        filter={(node) => node.item.userRole === "owner"}
+        render={({ node, level, open }) => (
           <ListItem
-            key={item.item.id}
-            name={item.item.name}
-            icon={item.item.icon}
-            list={item.item}
-            path={`/dashboard/lists/${item.item.id}`}
-            collapsible={item.children.length > 0}
+            name={node.item.name}
+            icon={node.item.icon}
+            list={node.item}
+            path={`/dashboard/lists/${node.item.id}`}
+            collapsible={node.children.length > 0}
             open={open}
             style={{ marginLeft: `${level * 1}rem` }}
           />
         )}
       />
+
+      {/* Shared Lists */}
+      {hasSharedLists && (
+        <Collapsible open={sharedListsOpen} onOpenChange={setSharedListsOpen}>
+          <ListItem
+            collapsible={true}
+            name={t("lists.shared_lists")}
+            icon="👥"
+            path="#"
+            open={sharedListsOpen}
+          />
+          <CollapsibleContent>
+            <CollapsibleBookmarkLists
+              listsData={lists}
+              filter={(node) => node.item.userRole !== "owner"}
+              indentOffset={1}
+              render={({ node, level, open }) => (
+                <ListItem
+                  name={node.item.name}
+                  icon={node.item.icon}
+                  list={node.item}
+                  path={`/dashboard/lists/${node.item.id}`}
+                  collapsible={node.children.length > 0}
+                  open={open}
+                  style={{ marginLeft: `${level * 1}rem` }}
+                />
+              )}
+            />
+          </CollapsibleContent>
+        </Collapsible>
+      )}
     </ul>
   );
 }
diff --git a/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx b/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
index 2f8fca6a..2bb5f41b 100644
--- a/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
+++ b/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
@@ -9,9 +9,10 @@ import { ZBookmarkList } from "@karakeep/shared/types/lists";
 import { ZBookmarkListTreeNode } from "@karakeep/shared/utils/listUtils";
 
 type RenderFunc = (params: {
-  item: ZBookmarkListTreeNode;
+  node: ZBookmarkListTreeNode;
   level: number;
   open: boolean;
+  onOpenChange: (open: boolean) => void;
   numBookmarks?: number;
 }) => React.ReactNode;
 
@@ -23,11 +24,15 @@ function ListItem({
   level,
   className,
   isOpenFunc,
+  listStats,
+  indentOffset,
 }: {
   node: ZBookmarkListTreeNode;
   render: RenderFunc;
   isOpenFunc: IsOpenFunc;
+  listStats?: Map<string, number>;
   level: number;
+  indentOffset: number;
   className?: string;
 }) {
   // Not the most efficient way to do this, but it works for now
@@ -44,17 +49,15 @@ function ListItem({
   useEffect(() => {
     setOpen((curr) => curr || isAnyChildOpen(node, isOpenFunc));
   }, [node, isOpenFunc]);
-  const { data: listStats } = api.lists.stats.useQuery(undefined, {
-    placeholderData: keepPreviousData,
-  });
 
   return (
     <Collapsible open={open} onOpenChange={setOpen} className={className}>
       {render({
-        item: node,
-        level,
+        node,
+        level: level + indentOffset,
         open,
-        numBookmarks: listStats?.stats.get(node.item.id),
+        onOpenChange: setOpen,
+        numBookmarks: listStats?.get(node.item.id),
       })}
       <CollapsibleContent>
         {node.children
@@ -66,6 +69,8 @@ function ListItem({
               node={l}
               render={render}
               level={level + 1}
+              indentOffset={indentOffset}
+              listStats={listStats}
               className={className}
             />
           ))}
@@ -77,35 +82,56 @@ function ListItem({
 export function CollapsibleBookmarkLists({
   render,
   initialData,
+  listsData,
   className,
   isOpenFunc,
+  filter,
+  indentOffset = 0,
 }: {
-  initialData: ZBookmarkList[];
+  initialData?: ZBookmarkList[];
+  listsData?: {
+    data: ZBookmarkList[];
+    root: Record<string, ZBookmarkListTreeNode>;
+    allPaths: ZBookmarkList[][];
+    getPathById: (id: string) => ZBookmarkList[] | undefined;
+  };
   render: RenderFunc;
   isOpenFunc?: IsOpenFunc;
   className?: string;
+  filter?: (node: ZBookmarkListTreeNode) => boolean;
+  indentOffset?: number;
 }) {
-  let { data } = useBookmarkLists(undefined, {
-    initialData: { lists: initialData },
+  // If listsData is provided, use it directly. Otherwise, fetch it.
+  let { data: fetchedData } = useBookmarkLists(undefined, {
+    initialData: initialData ? { lists: initialData } : undefined,
+    enabled: !listsData, // Only fetch if listsData is not provided
+  });
+  const data = listsData || fetchedData;
+
+  const { data: listStats } = api.lists.stats.useQuery(undefined, {
+    placeholderData: keepPreviousData,
   });
 
   if (!data) {
     return <FullPageSpinner />;
   }
 
-  const { root } = data;
+  const rootNodes = Object.values(data.root);
+  const filteredRoots = filter ? rootNodes.filter(filter) : rootNodes;
 
   return (
     <div>
-      {Object.values(root)
+      {filteredRoots
         .sort((a, b) => a.item.name.localeCompare(b.item.name))
-        .map((l) => (
+        .map((node) => (
           <ListItem
-            key={l.item.id}
-            node={l}
+            key={node.item.id}
+            node={node}
             render={render}
             level={0}
+            indentOffset={indentOffset}
             className={className}
+            listStats={listStats?.stats}
             isOpenFunc={isOpenFunc ?? (() => false)}
           />
         ))}