From e0999f701cd1834c3d940113cd8dd5247c5fe95f Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Fri, 19 Apr 2024 00:09:27 +0100
Subject: feature: Nested lists (#110). Fixes #62

* feature: Add support for nested lists

* prevent moving the parent to a subtree
---
 .../dashboard/bookmarks/AddToListModal.tsx         |  79 ++----
 .../components/dashboard/lists/AllListsView.tsx    | 113 ++++++---
 .../dashboard/lists/BookmarkListSelector.tsx       |  63 +++++
 .../dashboard/lists/CollapsibleBookmarkLists.tsx   | 111 +++++++++
 .../dashboard/lists/DeleteListButton.tsx           |  53 ----
 .../lists/DeleteListConfirmationDialog.tsx         |  61 +++++
 .../components/dashboard/lists/EditListModal.tsx   | 276 +++++++++++++++++++++
 apps/web/components/dashboard/lists/ListHeader.tsx |  46 ++++
 .../web/components/dashboard/lists/ListOptions.tsx |  71 ++++++
 apps/web/components/dashboard/sidebar/AllLists.tsx |  79 ++++--
 .../components/dashboard/sidebar/NewListModal.tsx  | 174 -------------
 .../components/dashboard/sidebar/SidebarItem.tsx   |  22 +-
 12 files changed, 797 insertions(+), 351 deletions(-)
 create mode 100644 apps/web/components/dashboard/lists/BookmarkListSelector.tsx
 create mode 100644 apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
 delete mode 100644 apps/web/components/dashboard/lists/DeleteListButton.tsx
 create mode 100644 apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx
 create mode 100644 apps/web/components/dashboard/lists/EditListModal.tsx
 create mode 100644 apps/web/components/dashboard/lists/ListHeader.tsx
 create mode 100644 apps/web/components/dashboard/lists/ListOptions.tsx
 delete mode 100644 apps/web/components/dashboard/sidebar/NewListModal.tsx

(limited to 'apps/web/components/dashboard')

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/DeleteListButton.tsx
deleted file mode 100644
index 774b79ac..00000000
--- a/apps/web/components/dashboard/lists/DeleteListButton.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import { 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";
-
-export default function DeleteListButton({ list }: { list: ZBookmarkList }) {
-  const router = useRouter();
-
-  const listsInvalidationFunction = api.useUtils().lists.list.invalidate;
-  const { mutate: deleteList, isPending } = api.lists.delete.useMutation({
-    onSuccess: () => {
-      listsInvalidationFunction();
-      toast({
-        description: `List "${list.icon} ${list.name}" is deleted!`,
-      });
-      router.push("/");
-    },
-    onError: () => {
-      toast({
-        variant: "destructive",
-        description: `Something went wrong`,
-      });
-    },
-  });
-  return (
-    <ActionConfirmingDialog
-      title={`Delete ${list.icon} ${list.name}?`}
-      description={`Are you sure you want to delete ${list.icon} ${list.name}?`}
-      actionButton={() => (
-        <ActionButton
-          type="button"
-          variant="destructive"
-          loading={isPending}
-          onClick={() => deleteList({ listId: list.id })}
-        >
-          Delete
-        </ActionButton>
-      )}
-    >
-      <Button className="mt-auto flex gap-2" variant="destructiveOutline">
-        <Trash2 className="size-5" />
-        <span className="hidden md:block">Delete List</span>
-      </Button>
-    </ActionConfirmingDialog>
-  );
-}
diff --git a/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx b/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx
new file mode 100644
index 00000000..bf1969bf
--- /dev/null
+++ b/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx
@@ -0,0 +1,61 @@
+import { usePathname, useRouter } from "next/navigation";
+import { ActionButton } from "@/components/ui/action-button";
+import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
+import { toast } from "@/components/ui/use-toast";
+
+import type { ZBookmarkList } from "@hoarder/shared/types/lists";
+import { useDeleteBookmarkList } from "@hoarder/shared-react/hooks/lists";
+
+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 { mutate: deleteList, isPending } = useDeleteBookmarkList({
+    onSuccess: () => {
+      toast({
+        description: `List "${list.icon} ${list.name}" is deleted!`,
+      });
+      setOpen(false);
+      if (currentPath.includes(list.id)) {
+        router.push("/dashboard/lists");
+      }
+    },
+    onError: () => {
+      toast({
+        variant: "destructive",
+        description: `Something went wrong`,
+      });
+    },
+  });
+
+  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={() => (
+        <ActionButton
+          type="button"
+          variant="destructive"
+          loading={isPending}
+          onClick={() => deleteList({ listId: list.id })}
+        >
+          Delete
+        </ActionButton>
+      )}
+    >
+      {children}
+    </ActionConfirmingDialog>
+  );
+}
diff --git a/apps/web/components/dashboard/lists/EditListModal.tsx b/apps/web/components/dashboard/lists/EditListModal.tsx
new file mode 100644
index 00000000..993c975b
--- /dev/null
+++ b/apps/web/components/dashboard/lists/EditListModal.tsx
@@ -0,0 +1,276 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  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";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { toast } from "@/components/ui/use-toast";
+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 {
+  useCreateBookmarkList,
+  useEditBookmarkList,
+} from "@hoarder/shared-react/hooks/lists";
+import { ZBookmarkList } from "@hoarder/shared/types/lists";
+
+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: list?.name ?? "",
+      icon: list?.icon ?? "🚀",
+      parentId: list?.parentId ?? parent?.id,
+    },
+  });
+  const [open, setOpen] = [
+    userOpen ?? customOpen,
+    userSetOpen ?? customSetOpen,
+  ];
+
+  useEffect(() => {
+    form.reset({
+      name: list?.name ?? "",
+      icon: list?.icon ?? "🚀",
+      parentId: list?.parentId ?? parent?.id,
+    });
+  }, [open]);
+
+  const { mutate: createList, isPending: isCreating } = useCreateBookmarkList({
+    onSuccess: (resp) => {
+      toast({
+        description: "List has been created!",
+      });
+      setOpen(false);
+      router.push(`/dashboard/lists/${resp.id}`);
+      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 { 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}
+      onOpenChange={(s) => {
+        form.reset();
+        setOpen(s);
+      }}
+    >
+      {children && <DialogTrigger asChild>{children}</DialogTrigger>}
+      <DialogContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((value) => {
+              value.parentId = value.parentId === "" ? null : value.parentId;
+              isEdit
+                ? editList({ ...value, listId: list.id })
+                : createList(value);
+            })}
+          >
+            <DialogHeader>
+              <DialogTitle>{isEdit ? "Edit" : "New"} List</DialogTitle>
+            </DialogHeader>
+            <div className="flex w-full gap-2 py-4">
+              <FormField
+                control={form.control}
+                name="icon"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormControl>
+                        <Popover>
+                          <PopoverTrigger className="h-full rounded border border-input px-2 text-2xl">
+                            {field.value}
+                          </PopoverTrigger>
+                          <PopoverContent>
+                            <Picker
+                              data={data}
+                              onEmojiSelect={(e: { native: string }) =>
+                                field.onChange(e.native)
+                              }
+                            />
+                          </PopoverContent>
+                        </Popover>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => {
+                  return (
+                    <FormItem className="grow">
+                      <FormControl>
+                        <Input
+                          type="text"
+                          className="w-full"
+                          placeholder="List Name"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+            </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">
+                  Close
+                </Button>
+              </DialogClose>
+              <ActionButton type="submit" loading={isPending}>
+                {list ? "Save" : "Create"}
+              </ActionButton>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
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/NewListModal.tsx b/apps/web/components/dashboard/sidebar/NewListModal.tsx
deleted file mode 100644
index 5169fbb5..00000000
--- a/apps/web/components/dashboard/sidebar/NewListModal.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-"use client";
-
-import { ActionButton } from "@/components/ui/action-button";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  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 { 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 })),
-}));
-
-export default function NewListModal() {
-  const { open, setOpen } = useNewListModal();
-
-  const formSchema = z.object({
-    name: z.string(),
-    icon: z.string(),
-  });
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: "",
-      icon: "🚀",
-    },
-  });
-
-  const listsInvalidationFunction = api.useUtils().lists.list.invalidate;
-
-  const { mutate: createList, isPending } = api.lists.create.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "List has been created!",
-      });
-      listsInvalidationFunction();
-      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",
-        });
-      }
-    },
-  });
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(s) => {
-        form.reset();
-        setOpen(s);
-      }}
-    >
-      <DialogContent>
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit((value) => {
-              createList(value);
-            })}
-          >
-            <DialogHeader>
-              <DialogTitle>New List</DialogTitle>
-            </DialogHeader>
-            <div className="flex w-full gap-2 py-4">
-              <FormField
-                control={form.control}
-                name="icon"
-                render={({ field }) => {
-                  return (
-                    <FormItem>
-                      <FormControl>
-                        <Popover>
-                          <PopoverTrigger className="h-full rounded border border-input px-2 text-2xl">
-                            {field.value}
-                          </PopoverTrigger>
-                          <PopoverContent>
-                            <Picker
-                              data={data}
-                              onEmojiSelect={(e: { native: string }) =>
-                                field.onChange(e.native)
-                              }
-                            />
-                          </PopoverContent>
-                        </Popover>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  );
-                }}
-              />
-
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => {
-                  return (
-                    <FormItem className="grow">
-                      <FormControl>
-                        <Input
-                          type="text"
-                          className="w-full"
-                          placeholder="List Name"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  );
-                }}
-              />
-            </div>
-            <DialogFooter className="sm:justify-end">
-              <DialogClose asChild>
-                <Button type="button" variant="secondary">
-                  Close
-                </Button>
-              </DialogClose>
-              <ActionButton type="submit" loading={isPending}>
-                Create
-              </ActionButton>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
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>
   );
 }
-- 
cgit v1.2.3-70-g09d2