diff options
Diffstat (limited to 'packages/web/components/dashboard/sidebar')
7 files changed, 415 insertions, 0 deletions
diff --git a/packages/web/components/dashboard/sidebar/AllLists.tsx b/packages/web/components/dashboard/sidebar/AllLists.tsx new file mode 100644 index 00000000..a77252d0 --- /dev/null +++ b/packages/web/components/dashboard/sidebar/AllLists.tsx @@ -0,0 +1,60 @@ +"use client"; + +import { api } from "@/lib/trpc"; +import SidebarItem from "./SidebarItem"; +import NewListModal, { useNewListModal } from "./NewListModal"; +import { Plus } from "lucide-react"; +import Link from "next/link"; +import { ZBookmarkList } from "@hoarder/trpc/types/lists"; + +export default function AllLists({ + initialData, +}: { + initialData: { lists: ZBookmarkList[] }; +}) { + let { data: lists } = api.lists.list.useQuery(undefined, { + initialData, + }); + // TODO: This seems to be a bug in react query + lists ||= initialData; + const { setOpen } = useNewListModal(); + + return ( + <ul className="max-h-full gap-y-2 overflow-auto text-sm font-medium"> + <NewListModal /> + <li className="flex justify-between pb-2 font-bold"> + <p>Lists</p> + <Link href="#" onClick={() => setOpen(true)}> + <Plus /> + </Link> + </li> + <SidebarItem + logo={<span className="text-lg">📋</span>} + name="All Lists" + path={`/dashboard/lists`} + className="py-0.5" + /> + <SidebarItem + logo={<span className="text-lg">⭐️</span>} + name="Favourties" + path={`/dashboard/favourites`} + className="py-0.5" + /> + <SidebarItem + logo={<span className="text-lg">🗄️</span>} + name="Archive" + path={`/dashboard/archive`} + className="py-0.5" + /> + {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" + /> + ))} + </ul> + ); +} diff --git a/packages/web/components/dashboard/sidebar/ModileSidebar.tsx b/packages/web/components/dashboard/sidebar/ModileSidebar.tsx new file mode 100644 index 00000000..4bd6a347 --- /dev/null +++ b/packages/web/components/dashboard/sidebar/ModileSidebar.tsx @@ -0,0 +1,24 @@ +import MobileSidebarItem from "./ModileSidebarItem"; +import { + Tag, + PackageOpen, + Settings, + Search, + ClipboardList, +} from "lucide-react"; +import SidebarProfileOptions from "./SidebarProfileOptions"; + +export default async function MobileSidebar() { + return ( + <aside className="w-full"> + <ul className="flex justify-between space-x-2 border-b-black bg-gray-100 px-5 py-2 pt-5"> + <MobileSidebarItem logo={<PackageOpen />} path="/dashboard/bookmarks" /> + <MobileSidebarItem logo={<Search />} path="/dashboard/search" /> + <MobileSidebarItem logo={<ClipboardList />} path="/dashboard/lists" /> + <MobileSidebarItem logo={<Tag />} path="/dashboard/tags" /> + <MobileSidebarItem logo={<Settings />} path="/dashboard/settings" /> + <SidebarProfileOptions /> + </ul> + </aside> + ); +} diff --git a/packages/web/components/dashboard/sidebar/ModileSidebarItem.tsx b/packages/web/components/dashboard/sidebar/ModileSidebarItem.tsx new file mode 100644 index 00000000..9389d2e4 --- /dev/null +++ b/packages/web/components/dashboard/sidebar/ModileSidebarItem.tsx @@ -0,0 +1,27 @@ +"use client"; + +import { cn } from "@/lib/utils"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; + +export default function MobileSidebarItem({ + logo, + path, +}: { + logo: React.ReactNode; + path: string; +}) { + const currentPath = usePathname(); + return ( + <li + className={cn( + "flex w-full rounded-lg hover:bg-gray-50", + path == currentPath ? "bg-gray-50" : "", + )} + > + <Link href={path} className="mx-auto px-3 py-2"> + {logo} + </Link> + </li> + ); +} diff --git a/packages/web/components/dashboard/sidebar/NewListModal.tsx b/packages/web/components/dashboard/sidebar/NewListModal.tsx new file mode 100644 index 00000000..f51616ed --- /dev/null +++ b/packages/web/components/dashboard/sidebar/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>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="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/components/dashboard/sidebar/Sidebar.tsx b/packages/web/components/dashboard/sidebar/Sidebar.tsx new file mode 100644 index 00000000..a5c1d7a5 --- /dev/null +++ b/packages/web/components/dashboard/sidebar/Sidebar.tsx @@ -0,0 +1,66 @@ +import { Tag, Home, PackageOpen, Settings, Search, Shield } from "lucide-react"; +import { redirect } from "next/navigation"; +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"; +import serverConfig from "@hoarder/shared/config"; +import { api } from "@/server/api/client"; + +export default async function Sidebar() { + const session = await getServerAuthSession(); + if (!session) { + redirect("/"); + } + + const lists = await api.lists.list(); + + return ( + <aside className="flex h-screen w-60 flex-col gap-5 border-r p-4"> + <Link href={"/dashboard/bookmarks"}> + <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="space-y-2 text-sm font-medium"> + <SidebarItem + logo={<Home />} + name="Home" + path="/dashboard/bookmarks" + /> + {serverConfig.meilisearch && ( + <SidebarItem + logo={<Search />} + name="Search" + path="/dashboard/search" + /> + )} + <SidebarItem logo={<Tag />} name="Tags" path="/dashboard/tags" /> + <SidebarItem + logo={<Settings />} + name="Settings" + path="/dashboard/settings" + /> + {session.user.role == "admin" && ( + <SidebarItem + logo={<Shield />} + name="Admin" + path="/dashboard/admin" + /> + )} + </ul> + </div> + <Separator /> + <AllLists initialData={lists} /> + <div className="mt-auto flex justify-between justify-self-end"> + <div className="my-auto"> {session.user.name} </div> + <SidebarProfileOptions /> + </div> + </aside> + ); +} diff --git a/packages/web/components/dashboard/sidebar/SidebarItem.tsx b/packages/web/components/dashboard/sidebar/SidebarItem.tsx new file mode 100644 index 00000000..856bdffd --- /dev/null +++ b/packages/web/components/dashboard/sidebar/SidebarItem.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { cn } from "@/lib/utils"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; + +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 px-3 py-2 hover:bg-slate-100", + path == currentPath ? "bg-gray-50" : "", + className, + )} + > + <Link href={path} className="flex w-full gap-x-2"> + {logo} + <span className="my-auto"> {name} </span> + </Link> + </li> + ); +} diff --git a/packages/web/components/dashboard/sidebar/SidebarProfileOptions.tsx b/packages/web/components/dashboard/sidebar/SidebarProfileOptions.tsx new file mode 100644 index 00000000..f931b63e --- /dev/null +++ b/packages/web/components/dashboard/sidebar/SidebarProfileOptions.tsx @@ -0,0 +1,35 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { LogOut, MoreHorizontal } from "lucide-react"; +import { signOut } from "next-auth/react"; + +export default function SidebarProfileOptions() { + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="ghost"> + <MoreHorizontal /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent className="w-fit"> + <DropdownMenuItem + onClick={() => + signOut({ + callbackUrl: "/", + }) + } + > + <LogOut className="mr-2 size-4" /> + <span>Sign Out</span> + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ); +} |