feat(web): Show list stats in the sidebar

2 files changed, 12 insertions, 3 deletions

diff --git a/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx b/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
index 77a67f5f..522bb1d6 100644
--- a/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
+++ b/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
+import { api } from "@/lib/trpc";
+import { keepPreviousData } from "@tanstack/react-query";
 
 import {
   augmentBookmarkListsWithInitialData,
@@ -13,6 +15,7 @@ type RenderFunc = (params: {
   item: ZBookmarkListTreeNode;
   level: number;
   open: boolean;
+  numBookmarks?: number;
 }) => React.ReactNode;
 
 type IsOpenFunc = (list: ZBookmarkListTreeNode) => boolean;
@@ -44,6 +47,9 @@ 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}>
@@ -51,6 +57,7 @@ function ListItem({
         item: node,
         level,
         open,
+        numBookmarks: listStats?.stats.get(node.item.id),
       })}
       <CollapsibleContent>
         {node.children
diff --git a/apps/web/components/dashboard/lists/ListOptions.tsx b/apps/web/components/dashboard/lists/ListOptions.tsx
index a7217954..0e24d6a2 100644
--- a/apps/web/components/dashboard/lists/ListOptions.tsx
+++ b/apps/web/components/dashboard/lists/ListOptions.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import {
   DropdownMenu,
@@ -17,8 +15,12 @@ import DeleteListConfirmationDialog from "./DeleteListConfirmationDialog";
 
 export function ListOptions({
   list,
+  isOpen,
+  onOpenChange,
   children,
 }: {
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
   list: ZBookmarkList;
   children?: React.ReactNode;
 }) {
@@ -29,7 +31,7 @@ export function ListOptions({
   const [editModalOpen, setEditModalOpen] = useState(false);
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={isOpen} onOpenChange={onOpenChange}>
       <EditListModal
         open={newNestedListModalOpen}
         setOpen={setNewNestedListModalOpen}