feature: Nested lists (#110). Fixes #62

* feature: Add support for nested lists

* prevent moving the parent to a subtree

12 files changed, 671 insertions, 165 deletions

diff --git a/apps/web/components/dashboard/bookmarks/AddToListModal.tsx b/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
index bfe6d53f..3b8a6700 100644
--- a/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
+++ b/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
@@ -16,21 +16,15 @@ import {
   FormItem,
   FormMessage,
 } from "@/components/ui/form";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import LoadingSpinner from "@/components/ui/spinner";
 import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { useAddBookmarkToList } from "@hoarder/shared-react/hooks/lists";
+
+import { BookmarkListSelector } from "../lists/BookmarkListSelector";
+
 export default function AddToListModal({
   bookmarkId,
   open,
@@ -49,20 +43,13 @@ export default function AddToListModal({
     resolver: zodResolver(formSchema),
   });
 
-  const { data: lists, isPending: isFetchingListsPending } =
-    api.lists.list.useQuery();
-
-  const bookmarksInvalidationFunction =
-    api.useUtils().bookmarks.getBookmarks.invalidate;
-
   const { mutate: addToList, isPending: isAddingToListPending } =
-    api.lists.addToList.useMutation({
-      onSuccess: (_resp, req) => {
+    useAddBookmarkToList({
+      onSuccess: () => {
         toast({
           description: "List has been updated!",
         });
         setOpen(false);
-        bookmarksInvalidationFunction({ listId: req.listId });
       },
       onError: (e) => {
         if (e.data?.code == "BAD_REQUEST") {
@@ -79,8 +66,6 @@ export default function AddToListModal({
       },
     });
 
-  const isPending = isFetchingListsPending || isAddingToListPending;
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
@@ -98,42 +83,20 @@ export default function AddToListModal({
             </DialogHeader>
 
             <div className="py-4">
-              {lists ? (
-                <FormField
-                  control={form.control}
-                  name="listId"
-                  render={({ field }) => {
-                    return (
-                      <FormItem>
-                        <FormControl>
-                          <Select onValueChange={field.onChange}>
-                            <SelectTrigger className="w-full">
-                              <SelectValue placeholder="Select a list" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectGroup>
-                                {lists?.lists.map((l) => (
-                                  <SelectItem key={l.id} value={l.id}>
-                                    {l.icon} {l.name}
-                                  </SelectItem>
-                                ))}
-                                {lists && lists.lists.length == 0 && (
-                                  <SelectItem value="nolist" disabled>
-                                    You don&apos;t currently have any lists.
-                                  </SelectItem>
-                                )}
-                              </SelectGroup>
-                            </SelectContent>
-                          </Select>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    );
-                  }}
-                />
-              ) : (
-                <LoadingSpinner />
-              )}
+              <FormField
+                control={form.control}
+                name="listId"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormControl>
+                        <BookmarkListSelector onChange={field.onChange} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
             </div>
             <DialogFooter className="sm:justify-end">
               <DialogClose asChild>
@@ -144,7 +107,7 @@ export default function AddToListModal({
               <ActionButton
                 type="submit"
                 loading={isAddingToListPending}
-                disabled={isPending}
+                disabled={isAddingToListPending}
               >
                 Add
               </ActionButton>
diff --git a/apps/web/components/dashboard/lists/AllListsView.tsx b/apps/web/components/dashboard/lists/AllListsView.tsx
index 00e76a23..308af5db 100644
--- a/apps/web/components/dashboard/lists/AllListsView.tsx
+++ b/apps/web/components/dashboard/lists/AllListsView.tsx
@@ -1,31 +1,59 @@
 "use client";
 
 import Link from "next/link";
-import { useNewListModal } from "@/components/dashboard/sidebar/NewListModal";
+import { EditListModal } from "@/components/dashboard/lists/EditListModal";
 import { Button } from "@/components/ui/button";
-import { api } from "@/lib/trpc";
-import { keepPreviousData } from "@tanstack/react-query";
-import { Plus } from "lucide-react";
+import { CollapsibleTriggerChevron } from "@/components/ui/collapsible";
+import { MoreHorizontal, Plus } from "lucide-react";
 
 import type { ZBookmarkList } from "@hoarder/shared/types/lists";
 
+import { CollapsibleBookmarkLists } from "./CollapsibleBookmarkLists";
+import { ListOptions } from "./ListOptions";
+
 function ListItem({
   name,
   icon,
   path,
+  style,
+  list,
+  open,
+  collapsible,
 }: {
   name: string;
   icon: string;
   path: string;
+  style?: React.CSSProperties;
+  list?: ZBookmarkList;
+  open?: boolean;
+  collapsible: boolean;
 }) {
   return (
-    <Link href={path}>
-      <div className="rounded-md border border-border bg-background px-4 py-2 text-lg">
-        <p className="text-nowrap">
-          {icon} {name}
-        </p>
-      </div>
-    </Link>
+    <li
+      className="my-2 flex items-center justify-between rounded-md border border-border p-2 hover:bg-accent/50"
+      style={style}
+    >
+      <span className="flex flex-1 items-center gap-1">
+        {collapsible && (
+          <CollapsibleTriggerChevron className="size-5" open={open ?? false} />
+        )}
+        <Link href={path} className="flex flex-1 gap-1">
+          <p className="text-nowrap text-lg">
+            {icon} {name}
+          </p>
+        </Link>
+      </span>
+      {list && (
+        <ListOptions list={list}>
+          <Button
+            className="flex h-full items-center justify-end"
+            variant="ghost"
+          >
+            <MoreHorizontal />
+          </Button>
+        </ListOptions>
+      )}
+    </li>
   );
 }
 
@@ -34,34 +62,41 @@ export default function AllListsView({
 }: {
   initialData: ZBookmarkList[];
 }) {
-  const { setOpen: setIsNewListModalOpen } = useNewListModal();
-  let { data: lists } = api.lists.list.useQuery(undefined, {
-    initialData: { lists: initialData },
-    placeholderData: keepPreviousData,
-  });
-
-  // TODO: This seems to be a bug in react query
-  lists ||= { lists: initialData };
-
   return (
-    <div className="flex flex-col flex-wrap gap-2 md:flex-row">
-      <Button
-        className="my-auto flex h-full"
-        onClick={() => setIsNewListModalOpen(true)}
-      >
-        <Plus />
-        <span className="my-auto">New List</span>
-      </Button>
-      <ListItem name="Favourites" icon="⭐️" path={`/dashboard/favourites`} />
-      <ListItem name="Archive" icon="🗄️" path={`/dashboard/archive`} />
-      {lists.lists.map((l) => (
-        <ListItem
-          key={l.id}
-          name={l.name}
-          icon={l.icon}
-          path={`/dashboard/lists/${l.id}`}
-        />
-      ))}
-    </div>
+    <ul>
+      <EditListModal>
+        <Button className="mb-2 flex h-full w-full items-center">
+          <Plus />
+          <span>New List</span>
+        </Button>
+      </EditListModal>
+      <ListItem
+        collapsible={false}
+        name="Favourites"
+        icon="⭐️"
+        path={`/dashboard/favourites`}
+      />
+      <ListItem
+        collapsible={false}
+        name="Archive"
+        icon="🗄️"
+        path={`/dashboard/archive`}
+      />
+      <CollapsibleBookmarkLists
+        initialData={initialData}
+        render={({ item, 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}
+            open={open}
+            style={{ marginLeft: `${level * 1}rem` }}
+          />
+        )}
+      />
+    </ul>
   );
 }
diff --git a/apps/web/components/dashboard/lists/BookmarkListSelector.tsx b/apps/web/components/dashboard/lists/BookmarkListSelector.tsx
new file mode 100644
index 00000000..fdae1c17
--- /dev/null
+++ b/apps/web/components/dashboard/lists/BookmarkListSelector.tsx
@@ -0,0 +1,63 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import LoadingSpinner from "@/components/ui/spinner";
+
+import { useBookmarkLists } from "@hoarder/shared-react/hooks/lists";
+
+export function BookmarkListSelector({
+  value,
+  onChange,
+  hideSubtreeOf,
+  placeholder = "Select a list",
+}: {
+  value?: string | null;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  hideSubtreeOf?: string;
+}) {
+  const { data, isPending: isFetchingListsPending } = useBookmarkLists();
+  let { allPaths } = data ?? {};
+
+  if (isFetchingListsPending) {
+    return <LoadingSpinner />;
+  }
+
+  allPaths = allPaths?.filter((path) => {
+    if (!hideSubtreeOf) {
+      return true;
+    }
+    return !path.map((p) => p.id).includes(hideSubtreeOf);
+  });
+
+  return (
+    <Select onValueChange={onChange} value={value ?? undefined}>
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {allPaths?.map((path) => {
+            const l = path[path.length - 1];
+            const name = path.map((p) => `${p.icon} ${p.name}`).join(" / ");
+            return (
+              <SelectItem key={l.id} value={l.id}>
+                {name}
+              </SelectItem>
+            );
+          })}
+          {allPaths && allPaths.length == 0 && (
+            <SelectItem value="nolist" disabled>
+              You don&apos;t currently have any lists.
+            </SelectItem>
+          )}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx b/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
new file mode 100644
index 00000000..da1b7408
--- /dev/null
+++ b/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { FullPageSpinner } from "@/components/ui/full-page-spinner";
+
+import {
+  augmentBookmarkListsWithInitialData,
+  useBookmarkLists,
+} from "@hoarder/shared-react/hooks/lists";
+import { ZBookmarkList } from "@hoarder/shared/types/lists";
+import { ZBookmarkListTreeNode } from "@hoarder/shared/utils/listUtils";
+
+type RenderFunc = (params: {
+  item: ZBookmarkListTreeNode;
+  level: number;
+  open: boolean;
+}) => React.ReactNode;
+
+type IsOpenFunc = (list: ZBookmarkListTreeNode) => boolean;
+
+function ListItem({
+  node,
+  render,
+  level,
+  className,
+  isOpenFunc,
+}: {
+  node: ZBookmarkListTreeNode;
+  render: RenderFunc;
+  isOpenFunc: IsOpenFunc;
+  level: number;
+  className?: string;
+}) {
+  // Not the most efficient way to do this, but it works for now
+  const isAnyChildOpen = (
+    node: ZBookmarkListTreeNode,
+    isOpenFunc: IsOpenFunc,
+  ): boolean => {
+    if (isOpenFunc(node)) {
+      return true;
+    }
+    return node.children.some((l) => isAnyChildOpen(l, isOpenFunc));
+  };
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    setOpen((curr) => curr || isAnyChildOpen(node, isOpenFunc));
+  }, [node, isOpenFunc]);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className={className}>
+      {render({
+        item: node,
+        level,
+        open,
+      })}
+      <CollapsibleContent>
+        {node.children.map((l) => (
+          <ListItem
+            isOpenFunc={isOpenFunc}
+            key={l.item.id}
+            node={l}
+            render={render}
+            level={level + 1}
+            className={className}
+          />
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export function CollapsibleBookmarkLists({
+  render,
+  initialData,
+  className,
+  isOpenFunc,
+}: {
+  initialData?: ZBookmarkList[];
+  render: RenderFunc;
+  isOpenFunc?: IsOpenFunc;
+  className?: string;
+}) {
+  let { data } = useBookmarkLists(undefined, {
+    initialData: initialData ? { lists: initialData } : undefined,
+  });
+
+  // TODO: This seems to be a bug in react query
+  if (initialData) {
+    data = augmentBookmarkListsWithInitialData(data, initialData);
+  }
+
+  if (!data) {
+    return <FullPageSpinner />;
+  }
+
+  const { root } = data;
+
+  return (
+    <div>
+      {Object.values(root).map((l) => (
+        <ListItem
+          key={l.item.id}
+          node={l}
+          render={render}
+          level={0}
+          className={className}
+          isOpenFunc={isOpenFunc ?? (() => false)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/components/dashboard/lists/DeleteListButton.tsx b/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx
index 774b79ac..bf1969bf 100644
--- a/apps/web/components/dashboard/lists/DeleteListButton.tsx
+++ b/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx
@@ -1,26 +1,34 @@
-"use client";
-
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
 import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
-import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
-import { Trash2 } from "lucide-react";
 
 import type { ZBookmarkList } from "@hoarder/shared/types/lists";
+import { useDeleteBookmarkList } from "@hoarder/shared-react/hooks/lists";
 
-export default function DeleteListButton({ list }: { list: ZBookmarkList }) {
+export default function DeleteListConfirmationDialog({
+  list,
+  children,
+  open,
+  setOpen,
+}: {
+  list: ZBookmarkList;
+  children?: React.ReactNode;
+  open: boolean;
+  setOpen: (v: boolean) => void;
+}) {
+  const currentPath = usePathname();
   const router = useRouter();
 
-  const listsInvalidationFunction = api.useUtils().lists.list.invalidate;
-  const { mutate: deleteList, isPending } = api.lists.delete.useMutation({
+  const { mutate: deleteList, isPending } = useDeleteBookmarkList({
     onSuccess: () => {
-      listsInvalidationFunction();
       toast({
         description: `List "${list.icon} ${list.name}" is deleted!`,
       });
-      router.push("/");
+      setOpen(false);
+      if (currentPath.includes(list.id)) {
+        router.push("/dashboard/lists");
+      }
     },
     onError: () => {
       toast({
@@ -29,8 +37,11 @@ export default function DeleteListButton({ list }: { list: ZBookmarkList }) {
       });
     },
   });
+
   return (
     <ActionConfirmingDialog
+      open={open}
+      setOpen={setOpen}
       title={`Delete ${list.icon} ${list.name}?`}
       description={`Are you sure you want to delete ${list.icon} ${list.name}?`}
       actionButton={() => (
@@ -44,10 +55,7 @@ export default function DeleteListButton({ list }: { list: ZBookmarkList }) {
         </ActionButton>
       )}
     >
-      <Button className="mt-auto flex gap-2" variant="destructiveOutline">
-        <Trash2 className="size-5" />
-        <span className="hidden md:block">Delete List</span>
-      </Button>
+      {children}
     </ActionConfirmingDialog>
   );
 }
diff --git a/apps/web/components/dashboard/sidebar/NewListModal.tsx b/apps/web/components/dashboard/lists/EditListModal.tsx
index 5169fbb5..993c975b 100644
--- a/apps/web/components/dashboard/sidebar/NewListModal.tsx
+++ b/apps/web/components/dashboard/lists/EditListModal.tsx
@@ -1,5 +1,5 @@
-"use client";
-
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
 import { Button } from "@/components/ui/button";
 import {
@@ -9,12 +9,14 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
+  FormLabel,
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
@@ -24,46 +26,75 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
 import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { X } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { create } from "zustand";
 
-export const useNewListModal = create<{
-  open: boolean;
-  setOpen: (v: boolean) => void;
-}>((set) => ({
-  open: false,
-  setOpen: (open: boolean) => set(() => ({ open })),
-}));
+import {
+  useCreateBookmarkList,
+  useEditBookmarkList,
+} from "@hoarder/shared-react/hooks/lists";
+import { ZBookmarkList } from "@hoarder/shared/types/lists";
 
-export default function NewListModal() {
-  const { open, setOpen } = useNewListModal();
+import { BookmarkListSelector } from "./BookmarkListSelector";
 
+export function EditListModal({
+  open: userOpen,
+  setOpen: userSetOpen,
+  list,
+  parent,
+  children,
+}: {
+  open?: boolean;
+  setOpen?: (v: boolean) => void;
+  list?: ZBookmarkList;
+  parent?: ZBookmarkList;
+  children?: React.ReactNode;
+}) {
+  const router = useRouter();
+  if (
+    (userOpen !== undefined && !userSetOpen) ||
+    (userOpen === undefined && userSetOpen)
+  ) {
+    throw new Error("You must provide both open and setOpen or neither");
+  }
+  const [customOpen, customSetOpen] = useState(false);
   const formSchema = z.object({
     name: z.string(),
     icon: z.string(),
+    parentId: z.string().nullish(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      name: "",
-      icon: "🚀",
+      name: list?.name ?? "",
+      icon: list?.icon ?? "🚀",
+      parentId: list?.parentId ?? parent?.id,
     },
   });
+  const [open, setOpen] = [
+    userOpen ?? customOpen,
+    userSetOpen ?? customSetOpen,
+  ];
 
-  const listsInvalidationFunction = api.useUtils().lists.list.invalidate;
+  useEffect(() => {
+    form.reset({
+      name: list?.name ?? "",
+      icon: list?.icon ?? "🚀",
+      parentId: list?.parentId ?? parent?.id,
+    });
+  }, [open]);
 
-  const { mutate: createList, isPending } = api.lists.create.useMutation({
-    onSuccess: () => {
+  const { mutate: createList, isPending: isCreating } = useCreateBookmarkList({
+    onSuccess: (resp) => {
       toast({
         description: "List has been created!",
       });
-      listsInvalidationFunction();
       setOpen(false);
+      router.push(`/dashboard/lists/${resp.id}`);
       form.reset();
     },
     onError: (e) => {
@@ -90,6 +121,41 @@ export default function NewListModal() {
     },
   });
 
+  const { mutate: editList, isPending: isEditing } = useEditBookmarkList({
+    onSuccess: () => {
+      toast({
+        description: "List has been updated!",
+      });
+      setOpen(false);
+      form.reset();
+    },
+    onError: (e) => {
+      if (e.data?.code == "BAD_REQUEST") {
+        if (e.data.zodError) {
+          toast({
+            variant: "destructive",
+            description: Object.values(e.data.zodError.fieldErrors)
+              .flat()
+              .join("\n"),
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        }
+      } else {
+        toast({
+          variant: "destructive",
+          title: "Something went wrong",
+        });
+      }
+    },
+  });
+
+  const isEdit = !!list;
+  const isPending = isCreating || isEditing;
+
   return (
     <Dialog
       open={open}
@@ -98,15 +164,19 @@ export default function NewListModal() {
         setOpen(s);
       }}
     >
+      {children && <DialogTrigger asChild>{children}</DialogTrigger>}
       <DialogContent>
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit((value) => {
-              createList(value);
+              value.parentId = value.parentId === "" ? null : value.parentId;
+              isEdit
+                ? editList({ ...value, listId: list.id })
+                : createList(value);
             })}
           >
             <DialogHeader>
-              <DialogTitle>New List</DialogTitle>
+              <DialogTitle>{isEdit ? "Edit" : "New"} List</DialogTitle>
             </DialogHeader>
             <div className="flex w-full gap-2 py-4">
               <FormField
@@ -156,6 +226,38 @@ export default function NewListModal() {
                 }}
               />
             </div>
+            <FormField
+              control={form.control}
+              name="parentId"
+              render={({ field }) => {
+                return (
+                  <FormItem className="grow pb-4">
+                    <FormLabel>Parent</FormLabel>
+                    <div className="flex items-center gap-1">
+                      <FormControl>
+                        <BookmarkListSelector
+                          // Hide the current list from the list of parents
+                          hideSubtreeOf={list ? list.id : undefined}
+                          value={field.value}
+                          onChange={field.onChange}
+                          placeholder={"No Parent"}
+                        />
+                      </FormControl>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={() => {
+                          form.reset({ parentId: null });
+                        }}
+                      >
+                        <X />
+                      </Button>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                );
+              }}
+            />
             <DialogFooter className="sm:justify-end">
               <DialogClose asChild>
                 <Button type="button" variant="secondary">
@@ -163,7 +265,7 @@ export default function NewListModal() {
                 </Button>
               </DialogClose>
               <ActionButton type="submit" loading={isPending}>
-                Create
+                {list ? "Save" : "Create"}
               </ActionButton>
             </DialogFooter>
           </form>
diff --git a/apps/web/components/dashboard/lists/ListHeader.tsx b/apps/web/components/dashboard/lists/ListHeader.tsx
new file mode 100644
index 00000000..6796d484
--- /dev/null
+++ b/apps/web/components/dashboard/lists/ListHeader.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { MoreHorizontal } from "lucide-react";
+
+import { api } from "@hoarder/shared-react/trpc";
+import { ZBookmarkList } from "@hoarder/shared/types/lists";
+
+import { ListOptions } from "./ListOptions";
+
+export default function ListHeader({
+  initialData,
+}: {
+  initialData: ZBookmarkList & { bookmarks: string[] };
+}) {
+  const router = useRouter();
+  const { data: list, error } = api.lists.get.useQuery(
+    {
+      listId: initialData.id,
+    },
+    {
+      initialData,
+    },
+  );
+
+  if (error) {
+    // This is usually exercised during list deletions.
+    if (error.data?.code == "NOT_FOUND") {
+      router.push("/dashboard/lists");
+    }
+  }
+
+  return (
+    <div className="flex justify-between">
+      <span className="text-2xl">
+        {list.icon} {list.name}
+      </span>
+      <ListOptions list={list}>
+        <Button variant="ghost">
+          <MoreHorizontal />
+        </Button>
+      </ListOptions>
+    </div>
+  );
+}
diff --git a/apps/web/components/dashboard/lists/ListOptions.tsx b/apps/web/components/dashboard/lists/ListOptions.tsx
new file mode 100644
index 00000000..b44d8a23
--- /dev/null
+++ b/apps/web/components/dashboard/lists/ListOptions.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+
+import { ZBookmarkList } from "@hoarder/shared/types/lists";
+
+import { EditListModal } from "../lists/EditListModal";
+import DeleteListConfirmationDialog from "./DeleteListConfirmationDialog";
+
+export function ListOptions({
+  list,
+  children,
+}: {
+  list: ZBookmarkList;
+  children?: React.ReactNode;
+}) {
+  const [deleteListDialogOpen, setDeleteListDialogOpen] = useState(false);
+  const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
+  const [editModalOpen, setEditModalOpen] = useState(false);
+
+  return (
+    <DropdownMenu>
+      <EditListModal
+        open={newNestedListModalOpen}
+        setOpen={setNewNestedListModalOpen}
+        parent={list}
+      />
+      <EditListModal
+        open={editModalOpen}
+        setOpen={setEditModalOpen}
+        list={list}
+      />
+      <DeleteListConfirmationDialog
+        list={list}
+        open={deleteListDialogOpen}
+        setOpen={setDeleteListDialogOpen}
+      />
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem
+          className="flex gap-2"
+          onClick={() => setEditModalOpen(true)}
+        >
+          <Pencil className="size-4" />
+          <span>Edit</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="flex gap-2"
+          onClick={() => setNewNestedListModalOpen(true)}
+        >
+          <Plus className="size-4" />
+          <span>New nested list</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="flex gap-2"
+          onClick={() => setDeleteListDialogOpen(true)}
+        >
+          <Trash2 className="size-4" />
+          <span>Delete</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/web/components/dashboard/sidebar/AllLists.tsx b/apps/web/components/dashboard/sidebar/AllLists.tsx
index 6ab42851..b1c6ddb2 100644
--- a/apps/web/components/dashboard/sidebar/AllLists.tsx
+++ b/apps/web/components/dashboard/sidebar/AllLists.tsx
@@ -1,12 +1,18 @@
 "use client";
 
+import { useCallback } from "react";
 import Link from "next/link";
-import { api } from "@/lib/trpc";
-import { Plus } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { CollapsibleTriggerTriangle } from "@/components/ui/collapsible";
+import { MoreHorizontal, Plus } from "lucide-react";
 
 import type { ZBookmarkList } from "@hoarder/shared/types/lists";
+import { ZBookmarkListTreeNode } from "@hoarder/shared/utils/listUtils";
 
-import NewListModal, { useNewListModal } from "./NewListModal";
+import { CollapsibleBookmarkLists } from "../lists/CollapsibleBookmarkLists";
+import { EditListModal } from "../lists/EditListModal";
+import { ListOptions } from "../lists/ListOptions";
 import SidebarItem from "./SidebarItem";
 
 export default function AllLists({
@@ -14,21 +20,20 @@ export default function AllLists({
 }: {
   initialData: { lists: ZBookmarkList[] };
 }) {
-  let { data: lists } = api.lists.list.useQuery(undefined, {
-    initialData,
-  });
-  // TODO: This seems to be a bug in react query
-  lists ||= initialData;
-  const { setOpen } = useNewListModal();
-
+  const pathName = usePathname();
+  const isNodeOpen = useCallback(
+    (node: ZBookmarkListTreeNode) => pathName.includes(node.item.id),
+    [pathName],
+  );
   return (
     <ul className="max-h-full gap-y-2 overflow-auto text-sm font-medium">
-      <NewListModal />
       <li className="flex justify-between pb-2 font-bold">
         <p>Lists</p>
-        <Link href="#" onClick={() => setOpen(true)}>
-          <Plus />
-        </Link>
+        <EditListModal>
+          <Link href="#">
+            <Plus />
+          </Link>
+        </EditListModal>
       </li>
       <SidebarItem
         logo={<span className="text-lg">📋</span>}
@@ -48,15 +53,45 @@ export default function AllLists({
         path={`/dashboard/archive`}
         className="py-0.5"
       />
-      {lists.lists.map((l) => (
-        <SidebarItem
-          key={l.id}
-          logo={<span className="text-lg"> {l.icon}</span>}
-          name={l.name}
-          path={`/dashboard/lists/${l.id}`}
-          className="py-0.5"
+
+      {
+        <CollapsibleBookmarkLists
+          initialData={initialData.lists}
+          isOpenFunc={isNodeOpen}
+          render={({ item: node, level, open }) => (
+            <SidebarItem
+              collapseButton={
+                node.children.length > 0 && (
+                  <CollapsibleTriggerTriangle
+                    className="absolute left-0 top-1/2 size-2 -translate-y-1/2"
+                    open={open}
+                  />
+                )
+              }
+              logo={
+                <span className="flex">
+                  <span className="text-lg"> {node.item.icon}</span>
+                </span>
+              }
+              name={node.item.name}
+              path={`/dashboard/lists/${node.item.id}`}
+              right={
+                <ListOptions list={node.item}>
+                  <Button
+                    size="none"
+                    variant="ghost"
+                    className="invisible group-hover:visible"
+                  >
+                    <MoreHorizontal className="size-4" />
+                  </Button>
+                </ListOptions>
+              }
+              className="group py-0.5"
+              style={{ marginLeft: `${level * 1}rem` }}
+            />
+          )}
         />
-      ))}
+      }
     </ul>
   );
 }
diff --git a/apps/web/components/dashboard/sidebar/SidebarItem.tsx b/apps/web/components/dashboard/sidebar/SidebarItem.tsx
index 7e5eb3bd..262fd9ae 100644
--- a/apps/web/components/dashboard/sidebar/SidebarItem.tsx
+++ b/apps/web/components/dashboard/sidebar/SidebarItem.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -9,25 +10,36 @@ export default function SidebarItem({
   logo,
   path,
   className,
+  style,
+  collapseButton,
+  right = null,
 }: {
   name: string;
   logo: React.ReactNode;
   path: string;
+  style?: React.CSSProperties;
   className?: string;
+  right?: React.ReactNode;
+  collapseButton?: React.ReactNode;
 }) {
   const currentPath = usePathname();
   return (
     <li
       className={cn(
-        "rounded-lg px-3 py-2 hover:bg-accent",
+        "relative rounded-lg px-3 py-2 hover:bg-accent",
         path == currentPath ? "bg-accent/50" : "",
         className,
       )}
+      style={style}
     >
-      <Link href={path} className="flex w-full gap-x-2">
-        {logo}
-        <span className="my-auto"> {name} </span>
-      </Link>
+      {collapseButton}
+      <div className="flex justify-between">
+        <Link href={path} className="flex w-full gap-x-2">
+          {logo}
+          <span className="my-auto"> {name} </span>
+        </Link>
+        {right}
+      </div>
     </li>
   );
 }
diff --git a/apps/web/components/ui/action-confirming-dialog.tsx b/apps/web/components/ui/action-confirming-dialog.tsx
index 980bdd60..37895ee7 100644
--- a/apps/web/components/ui/action-confirming-dialog.tsx
+++ b/apps/web/components/ui/action-confirming-dialog.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import {
   Dialog,
@@ -18,14 +16,21 @@ export default function ActionConfirmingDialog({
   description,
   actionButton,
   children,
+  open: userIsOpen,
+  setOpen: userSetOpen,
 }: {
+  open?: boolean;
+  setOpen?: (v: boolean) => void;
   title: React.ReactNode;
   description: React.ReactNode;
   actionButton: (setDialogOpen: (open: boolean) => void) => React.ReactNode;
   children: React.ReactNode;
 }) {
-  const [isDialogOpen, setDialogOpen] = useState(false);
-
+  const [customIsOpen, setCustomIsOpen] = useState(false);
+  const [isDialogOpen, setDialogOpen] = [
+    userIsOpen ?? customIsOpen,
+    userSetOpen ?? setCustomIsOpen,
+  ];
   return (
     <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
diff --git a/apps/web/components/ui/collapsible.tsx b/apps/web/components/ui/collapsible.tsx
new file mode 100644
index 00000000..43f40402
--- /dev/null
+++ b/apps/web/components/ui/collapsible.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { ChevronRight, Triangle } from "lucide-react";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+function CollapsibleTriggerTriangle({
+  open,
+  className,
+}: {
+  open: boolean;
+  className?: string;
+}) {
+  return (
+    <CollapsibleTrigger asChild>
+      <Triangle
+        className={cn(
+          "fill-foreground",
+          !open ? "rotate-90" : "rotate-180",
+          className,
+        )}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+function CollapsibleTriggerChevron({
+  open,
+  className,
+}: {
+  open: boolean;
+  className?: string;
+}) {
+  return (
+    <CollapsibleTrigger asChild>
+      <ChevronRight
+        className={cn(!open ? "rotate-0" : "rotate-90", className)}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleTriggerTriangle,
+  CollapsibleTriggerChevron,
+};