refactor: Move all components to the top level directory

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>
+  );
+}