feature: Add support for creating and updating lists

9 files changed, 548 insertions, 5 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/AddToListModal.tsx b/packages/web/app/dashboard/bookmarks/components/AddToListModal.tsx
new file mode 100644
index 00000000..36e32ab7
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/AddToListModal.tsx
@@ -0,0 +1,171 @@
+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 { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { useState } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import LoadingSpinner from "@/components/ui/spinner";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+export default function AddToListModal({
+  bookmarkId,
+  open,
+  setOpen,
+}: {
+  bookmarkId: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
+  const formSchema = z.object({
+    listId: z.string({
+      required_error: "Please select a list",
+    }),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  const { data: lists, isPending: isFetchingListsPending } =
+    api.lists.list.useQuery();
+
+  const listInvalidationFunction = api.useUtils().lists.get.invalidate;
+  const bookmarksInvalidationFunction =
+    api.useUtils().bookmarks.getBookmarks.invalidate;
+
+  const { mutate: addToList, isPending: isAddingToListPending } =
+    api.lists.addToList.useMutation({
+      onSuccess: (_resp, req) => {
+        toast({
+          description: "List has been updated!",
+        });
+        listInvalidationFunction({ listId: req.listId });
+        bookmarksInvalidationFunction();
+      },
+      onError: (e) => {
+        if (e.data?.code == "BAD_REQUEST") {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            title: "Something went wrong",
+          });
+        }
+      },
+    });
+
+  const isPending = isFetchingListsPending || isAddingToListPending;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((value) => {
+              addToList({
+                bookmarkId: bookmarkId,
+                listId: value.listId,
+              });
+            })}
+          >
+            <DialogHeader>
+              <DialogTitle>Add to List</DialogTitle>
+            </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.lists.map((l) => (
+                                    <SelectItem key={l.id} value={l.id}>
+                                      {l.icon} {l.name}
+                                    </SelectItem>
+                                  ))}
+                              </SelectGroup>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    );
+                  }}
+                />
+              ) : (
+                <LoadingSpinner />
+              )}
+            </div>
+            <DialogFooter className="sm:justify-end">
+              <DialogClose asChild>
+                <Button type="button" variant="secondary">
+                  Close
+                </Button>
+              </DialogClose>
+              <ActionButton
+                type="submit"
+                loading={isAddingToListPending}
+                disabled={isPending}
+              >
+                Add
+              </ActionButton>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function useAddToListModal(bookmarkId: string) {
+  const [open, setOpen] = useState(false);
+
+  return [
+    open,
+    setOpen,
+    <AddToListModal
+      key={bookmarkId}
+      bookmarkId={bookmarkId}
+      open={open}
+      setOpen={setOpen}
+    />,
+  ] as const;
+}
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
index 3a2b6b35..d4447f29 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
@@ -13,6 +13,7 @@ import {
 import {
   Archive,
   Link,
+  List,
   MoreHorizontal,
   Pencil,
   RotateCw,
@@ -23,12 +24,16 @@ import {
 import { useTagModel } from "./TagModal";
 import { useState } from "react";
 import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
+import { useAddToListModal } from "./AddToListModal";
 
 export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
   const linkId = bookmark.id;
 
   const [_, setTagModalIsOpen, tagModal] = useTagModel(bookmark);
+  const [_2, setAddToListModalOpen, addToListModal] = useAddToListModal(
+    bookmark.id,
+  );
 
   const [isTextEditorOpen, setTextEditorOpen] = useState(false);
 
@@ -77,6 +82,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <>
       {tagModal}
+      {addToListModal}
       <BookmarkedTextEditor
         bookmark={bookmark}
         open={isTextEditorOpen}
@@ -140,6 +146,11 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
             <span>Edit Tags</span>
           </DropdownMenuItem>
 
+          <DropdownMenuItem onClick={() => setAddToListModalOpen(true)}>
+            <List className="mr-2 size-4" />
+            <span>Add to List</span>
+          </DropdownMenuItem>
+
           {bookmark.content.type === "link" && (
             <DropdownMenuItem
               onClick={() =>
diff --git a/packages/web/app/dashboard/components/AllLists.tsx b/packages/web/app/dashboard/components/AllLists.tsx
new file mode 100644
index 00000000..6b5ca3b5
--- /dev/null
+++ b/packages/web/app/dashboard/components/AllLists.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { api } from "@/lib/trpc";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import SidebarItem from "./SidebarItem";
+import LoadingSpinner from "@/components/ui/spinner";
+import NewListModal, { useNewListModal } from "./NewListModal";
+import { Plus } from "lucide-react";
+import Link from "next/link";
+
+export default function AllLists() {
+  const { data: lists } = api.lists.list.useQuery();
+
+  const { setOpen } = useNewListModal();
+
+  return (
+    <ul className="max-h-full gap-2 overflow-scroll text-sm font-medium">
+      <NewListModal />
+      <li className="flex justify-between py-2 font-bold">
+        <p>Lists</p>
+        <Link href="#" onClick={() => setOpen(true)}>
+          <Plus />
+        </Link>
+      </li>
+      {lists && lists.lists.length == 0 && <li>No lists</li>}
+      {lists ? (
+        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"
+          />
+        ))
+      ) : (
+        <LoadingSpinner />
+      )}
+    </ul>
+  );
+}
diff --git a/packages/web/app/dashboard/components/NewListModal.tsx b/packages/web/app/dashboard/components/NewListModal.tsx
new file mode 100644
index 00000000..17b72576
--- /dev/null
+++ b/packages/web/app/dashboard/components/NewListModal.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+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,
+  FormMessage,
+} from "@/components/ui/form";
+
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Input } from "@/components/ui/input";
+
+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);
+    },
+    onError: (e) => {
+      if (e.data?.code == "BAD_REQUEST") {
+        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>Create 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="border-input h-full rounded border 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/packages/web/app/dashboard/components/Sidebar.tsx b/packages/web/app/dashboard/components/Sidebar.tsx
index b8b7fc56..7eea6b6d 100644
--- a/packages/web/app/dashboard/components/Sidebar.tsx
+++ b/packages/web/app/dashboard/components/Sidebar.tsx
@@ -4,6 +4,8 @@ import SidebarItem from "./SidebarItem";
 import { getServerAuthSession } from "@/server/auth";
 import Link from "next/link";
 import SidebarProfileOptions from "./SidebarProfileOptions";
+import { Separator } from "@/components/ui/separator";
+import AllLists from "./AllLists";
 
 export default async function Sidebar() {
   const session = await getServerAuthSession();
@@ -12,16 +14,16 @@ export default async function Sidebar() {
   }
 
   return (
-    <aside className="flex h-full w-60 flex-col border-r p-4">
+    <aside className="flex h-screen w-60 flex-col gap-5 border-r p-4">
       <Link href={"/dashboard/bookmarks"}>
-        <div className="mb-5 flex items-center rounded-lg px-1 text-slate-900">
+        <div className="flex items-center rounded-lg px-1 text-slate-900">
           <PackageOpen />
           <span className="ml-2 text-base font-semibold">Hoarder</span>
         </div>
       </Link>
       <hr />
       <div>
-        <ul className="mt-5 space-y-2 text-sm font-medium">
+        <ul className="space-y-2 text-sm font-medium">
           <SidebarItem
             logo={<Home />}
             name="Home"
@@ -45,6 +47,8 @@ export default async function Sidebar() {
           />
         </ul>
       </div>
+      <Separator />
+      <AllLists />
       <div className="mt-auto flex justify-between justify-self-end">
         <div className="my-auto"> {session.user.name} </div>
         <SidebarProfileOptions />
diff --git a/packages/web/app/dashboard/components/SidebarItem.tsx b/packages/web/app/dashboard/components/SidebarItem.tsx
index 74d20bc0..856bdffd 100644
--- a/packages/web/app/dashboard/components/SidebarItem.tsx
+++ b/packages/web/app/dashboard/components/SidebarItem.tsx
@@ -8,20 +8,23 @@ export default function SidebarItem({
   name,
   logo,
   path,
+  className,
 }: {
   name: string;
   logo: React.ReactNode;
   path: string;
+  className?: string;
 }) {
   const currentPath = usePathname();
   return (
     <li
       className={cn(
-        "rounded-lg  hover:bg-slate-100",
+        "rounded-lg px-3 py-2 hover:bg-slate-100",
         path == currentPath ? "bg-gray-50" : "",
+        className,
       )}
     >
-      <Link href={path} className="flex w-full space-x-2 px-3 py-2">
+      <Link href={path} className="flex w-full gap-x-2">
         {logo}
         <span className="my-auto"> {name} </span>
       </Link>
diff --git a/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx b/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx
new file mode 100644
index 00000000..8961b2d0
--- /dev/null
+++ b/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx
@@ -0,0 +1,76 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Trash } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { ActionButton } from "@/components/ui/action-button";
+import { useState } from "react";
+import { ZBookmarkList } from "@/lib/types/api/lists";
+
+export default function DeleteListButton({ list }: { list: ZBookmarkList }) {
+  const [isDialogOpen, setDialogOpen] = useState(false);
+
+  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 (
+    <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
+      <DialogTrigger asChild>
+        <Button className="mt-auto flex gap-2" variant="destructive">
+          <Trash className="size-5" />
+          <span className="hidden md:block">Delete List</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            Delete {list.icon} {list.name}?
+          </DialogTitle>
+        </DialogHeader>
+        <span>
+          Are you sure you want to delete {list.icon} {list.name}?
+        </span>
+        <DialogFooter className="sm:justify-end">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+          <ActionButton
+            type="button"
+            variant="destructive"
+            loading={isPending}
+            onClick={() => deleteList({ listId: list.id })}
+          >
+            Delete
+          </ActionButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx b/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx
new file mode 100644
index 00000000..c3d49b6a
--- /dev/null
+++ b/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import BookmarksGrid from "@/app/dashboard/bookmarks/components/BookmarksGrid";
+import { ZBookmark } from "@/lib/types/api/bookmarks";
+import { ZBookmarkListWithBookmarks } from "@/lib/types/api/lists";
+import { api } from "@/lib/trpc";
+import DeleteListButton from "./DeleteListButton";
+
+export default function ListView({
+  bookmarks,
+  list: initialData,
+}: {
+  list: ZBookmarkListWithBookmarks;
+  bookmarks: ZBookmark[];
+}) {
+  const { data } = api.lists.get.useQuery(
+    { listId: initialData.id },
+    {
+      initialData,
+    },
+  );
+
+  return (
+    <div className="container flex flex-col gap-3">
+      <div className="flex justify-between">
+        <span className="pt-4 text-2xl">
+          {data.icon} {data.name}
+        </span>
+        <DeleteListButton list={data} />
+      </div>
+      <hr />
+      <BookmarksGrid query={{ ids: data.bookmarks }} bookmarks={bookmarks} />
+    </div>
+  );
+}
diff --git a/packages/web/app/dashboard/lists/[listId]/page.tsx b/packages/web/app/dashboard/lists/[listId]/page.tsx
new file mode 100644
index 00000000..b8ca79c3
--- /dev/null
+++ b/packages/web/app/dashboard/lists/[listId]/page.tsx
@@ -0,0 +1,32 @@
+import { api } from "@/server/api/client";
+import { getServerAuthSession } from "@/server/auth";
+import { TRPCError } from "@trpc/server";
+import { notFound, redirect } from "next/navigation";
+import ListView from "./components/ListView";
+
+export default async function ListPage({
+  params,
+}: {
+  params: { listId: string };
+}) {
+  const session = await getServerAuthSession();
+  if (!session) {
+    redirect("/");
+  }
+
+  let list;
+  try {
+    list = await api.lists.get({ listId: params.listId });
+  } catch (e) {
+    if (e instanceof TRPCError) {
+      if (e.code == "NOT_FOUND") {
+        notFound();
+      }
+    }
+    throw e;
+  }
+
+  const bookmarks = await api.bookmarks.getBookmarks({ ids: list.bookmarks });
+
+  return <ListView list={list} bookmarks={bookmarks.bookmarks} />;
+}