From 3324f4487a8ff8f1a8317776775255ec013b07a7 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 2 Mar 2024 14:33:44 +0000
Subject: feature: Add 'New List' button in the all lists page

---
 packages/web/app/dashboard/components/NewListModal.tsx      |  2 +-
 .../web/app/dashboard/lists/components/AllListsView.tsx     | 13 ++++++++++++-
 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) => (
-- 
cgit v1.2.3-70-g09d2