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

* feature: Add support for nested lists

* prevent moving the parent to a subtree

7 files changed, 664 insertions, 54 deletions

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/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>
+  );
+}