diff options
| author | MohamedBassem <me@mbassem.com> | 2024-03-02 14:33:44 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2024-03-02 14:33:44 +0000 |
| commit | 3324f4487a8ff8f1a8317776775255ec013b07a7 (patch) | |
| tree | cf0ed346142859734bbc8d8bba6c54ad4b8dc693 | |
| parent | cd623ad9d6281389b0a092520c777567fcf5464b (diff) | |
| download | karakeep-3324f4487a8ff8f1a8317776775255ec013b07a7.tar.zst | |
feature: Add 'New List' button in the all lists page
| -rw-r--r-- | packages/web/app/dashboard/components/NewListModal.tsx | 2 | ||||
| -rw-r--r-- | packages/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) => ( |