feature: Add 'New List' button in the all lists page

2 files changed, 13 insertions, 2 deletions

diff --git a/packages/web/app/dashboard/components/NewListModal.tsx b/packages/web/app/dashboard/components/NewListModal.tsx
index 17b72576..f51616ed 100644
--- a/packages/web/app/dashboard/components/NewListModal.tsx
+++ b/packages/web/app/dashboard/components/NewListModal.tsx
@@ -102,7 +102,7 @@ export default function NewListModal() {
             })}
           >
             <DialogHeader>
-              <DialogTitle>Create List</DialogTitle>
+              <DialogTitle>New List</DialogTitle>
             </DialogHeader>
             <div className="flex w-full gap-2 py-4">
               <FormField
diff --git a/packages/web/app/dashboard/lists/components/AllListsView.tsx b/packages/web/app/dashboard/lists/components/AllListsView.tsx
index 7c8a9e56..155cdbcf 100644
--- a/packages/web/app/dashboard/lists/components/AllListsView.tsx
+++ b/packages/web/app/dashboard/lists/components/AllListsView.tsx
@@ -1,10 +1,13 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import LoadingSpinner from "@/components/ui/spinner";
 import { api } from "@/lib/trpc";
 import { ZBookmarkList } from "@/lib/types/api/lists";
 import { keepPreviousData } from "@tanstack/react-query";
+import { Plus } from "lucide-react";
 import Link from "next/link";
+import { useNewListModal } from "../../components/NewListModal";
 
 function ListItem({
   name,
@@ -31,6 +34,7 @@ export default function AllListsView({
 }: {
   initialData: ZBookmarkList[];
 }) {
+  const { setOpen: setIsNewListModalOpen } = useNewListModal();
   const { data: lists } = api.lists.list.useQuery(undefined, {
     initialData: { lists: initialData },
     placeholderData: keepPreviousData,
@@ -41,7 +45,14 @@ export default function AllListsView({
   }
 
   return (
-    <div className="flex flex-col gap-2 md:flex-row">
+    <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) => (