From f6ca0b0c4fb3c1e6d93a00fcce7cb0aee12930c0 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 16 Mar 2024 00:34:04 +0000
Subject: ui(web): Add an editor card inline in the bookmark grid and remove
 the top nav buttons

---
 apps/web/app/dashboard/bookmarks/page.tsx          |   2 +-
 .../dashboard/bookmarks/AddLinkButton.tsx          | 103 ---------------------
 .../components/dashboard/bookmarks/Bookmarks.tsx   |  13 ++-
 .../dashboard/bookmarks/BookmarksGrid.tsx          |  25 +++--
 .../components/dashboard/bookmarks/EditorCard.tsx  |  91 ++++++++++++++++++
 apps/web/components/dashboard/bookmarks/TopNav.tsx |  37 +-------
 .../components/dashboard/search/SearchInput.tsx    |   2 +
 7 files changed, 123 insertions(+), 150 deletions(-)
 delete mode 100644 apps/web/components/dashboard/bookmarks/AddLinkButton.tsx
 create mode 100644 apps/web/components/dashboard/bookmarks/EditorCard.tsx

(limited to 'apps')

diff --git a/apps/web/app/dashboard/bookmarks/page.tsx b/apps/web/app/dashboard/bookmarks/page.tsx
index c9391d85..e310df01 100644
--- a/apps/web/app/dashboard/bookmarks/page.tsx
+++ b/apps/web/app/dashboard/bookmarks/page.tsx
@@ -1,5 +1,5 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 
 export default async function BookmarksPage() {
-  return <Bookmarks title="Bookmarks" archived={false} />;
+  return <Bookmarks title="Bookmarks" archived={false} showEditorCard={true} />;
 }
diff --git a/apps/web/components/dashboard/bookmarks/AddLinkButton.tsx b/apps/web/components/dashboard/bookmarks/AddLinkButton.tsx
deleted file mode 100644
index 45a67020..00000000
--- a/apps/web/components/dashboard/bookmarks/AddLinkButton.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { SubmitErrorHandler } from "react-hook-form";
-import { useState } from "react";
-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 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-export function AddLinkButton({ children }: { children: React.ReactNode }) {
-  const [isOpen, setOpen] = useState(false);
-
-  const formSchema = z.object({
-    url: z.string().url({ message: "The link must be a valid URL" }),
-  });
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      url: "",
-    },
-  });
-
-  const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
-  const createBookmarkMutator = api.bookmarks.createBookmark.useMutation({
-    onSuccess: () => {
-      invalidateBookmarksCache();
-      form.reset();
-      setOpen(false);
-    },
-    onError: () => {
-      toast({ description: "Something went wrong", variant: "destructive" });
-    },
-  });
-
-  const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
-    toast({
-      description: Object.values(errors)
-        .map((v) => v.message)
-        .join("\n"),
-      variant: "destructive",
-    });
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <Form {...form}>
-          <DialogHeader>
-            <DialogTitle>Add Link</DialogTitle>
-          </DialogHeader>
-          <form
-            className="flex flex-col gap-4"
-            onSubmit={form.handleSubmit(
-              (value) =>
-                createBookmarkMutator.mutate({ url: value.url, type: "link" }),
-              onError,
-            )}
-          >
-            <FormField
-              control={form.control}
-              name="url"
-              render={({ field }) => {
-                return (
-                  <FormItem className="flex-1">
-                    <FormControl>
-                      <Input type="text" placeholder="Link" {...field} />
-                    </FormControl>
-                  </FormItem>
-                );
-              }}
-            />
-            <DialogFooter className="flex-shrink gap-1 sm:justify-end">
-              <DialogClose asChild>
-                <Button type="button" variant="secondary">
-                  Close
-                </Button>
-              </DialogClose>
-              <ActionButton
-                type="submit"
-                loading={createBookmarkMutator.isPending}
-              >
-                Add
-              </ActionButton>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
index 9f001551..601b1627 100644
--- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
+++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
@@ -11,7 +11,12 @@ export default async function Bookmarks({
   archived,
   title,
   showDivider,
-}: ZGetBookmarksRequest & { title: string; showDivider?: boolean }) {
+  showEditorCard = false,
+}: ZGetBookmarksRequest & {
+  title: string;
+  showDivider?: boolean;
+  showEditorCard?: boolean;
+}) {
   const session = await getServerAuthSession();
   if (!session) {
     redirect("/");
@@ -28,7 +33,11 @@ export default async function Bookmarks({
     <div className="container flex flex-col gap-3">
       <div className="text-2xl">{title}</div>
       {showDivider && <hr />}
-      <BookmarksGrid query={query} bookmarks={bookmarks.bookmarks} />
+      <BookmarksGrid
+        query={query}
+        bookmarks={bookmarks.bookmarks}
+        showEditorCard={showEditorCard}
+      />
     </div>
   );
 }
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index 185e318e..644991bb 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -12,9 +12,18 @@ import type {
   ZGetBookmarksRequest,
 } from "@hoarder/trpc/types/bookmarks";
 
+import EditorCard from "./EditorCard";
 import LinkCard from "./LinkCard";
 import TextCard from "./TextCard";
 
+function BookmarkCard({ children }: { children: React.ReactNode }) {
+  return (
+    <Slot className="border-grey-100 mb-4 border bg-gray-50 duration-300 ease-in hover:shadow-lg hover:transition-all">
+      {children}
+    </Slot>
+  );
+}
+
 function getBreakpointConfig() {
   const fullConfig = resolveConfig(tailwindConfig);
 
@@ -37,22 +46,17 @@ function renderBookmark(bookmark: ZBookmark) {
       comp = <TextCard bookmark={bookmark} />;
       break;
   }
-  return (
-    <Slot
-      key={bookmark.id}
-      className="border-grey-100 mb-4 border bg-gray-50 duration-300 ease-in hover:shadow-lg hover:transition-all"
-    >
-      {comp}
-    </Slot>
-  );
+  return <BookmarkCard key={bookmark.id}>{comp}</BookmarkCard>;
 }
 
 export default function BookmarksGrid({
   query,
   bookmarks: initialBookmarks,
+  showEditorCard = false,
 }: {
   query: ZGetBookmarksRequest;
   bookmarks: ZBookmark[];
+  showEditorCard?: boolean;
 }) {
   const { data } = api.bookmarks.getBookmarks.useQuery(query, {
     initialData: { bookmarks: initialBookmarks },
@@ -63,6 +67,11 @@ export default function BookmarksGrid({
   }
   return (
     <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+      {showEditorCard && (
+        <BookmarkCard>
+          <EditorCard />
+        </BookmarkCard>
+      )}
       {data.bookmarks.map((b) => renderBookmark(b))}
     </Masonry>
   );
diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
new file mode 100644
index 00000000..28e8f41f
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -0,0 +1,91 @@
+import type { SubmitErrorHandler, SubmitHandler } from "react-hook-form";
+import { ActionButton } from "@/components/ui/action-button";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { cn } from "@/lib/utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+export default function EditorCard({ className }: { className?: string }) {
+  const formSchema = z.object({
+    text: z.string(),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      text: "",
+    },
+  });
+
+  const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
+  const { mutate, isPending } = api.bookmarks.createBookmark.useMutation({
+    onSuccess: () => {
+      invalidateBookmarksCache();
+      form.reset();
+    },
+    onError: () => {
+      toast({ description: "Something went wrong", variant: "destructive" });
+    },
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = (data) => {
+    const text = data.text.trim();
+    try {
+      new URL(text);
+      mutate({ type: "link", url: text });
+    } catch (e) {
+      // Not a URL
+      mutate({ type: "text", text });
+    }
+  };
+  const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
+    toast({
+      description: Object.values(errors)
+        .map((v) => v.message)
+        .join("\n"),
+      variant: "destructive",
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className={cn(
+          className,
+          "flex h-96 flex-col gap-2 rounded-xl bg-white p-4",
+        )}
+        onSubmit={form.handleSubmit(onSubmit, onError)}
+      >
+        <FormField
+          control={form.control}
+          name="text"
+          render={({ field }) => {
+            return (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <Textarea
+                    disabled={isPending}
+                    className="h-full w-full resize-none border-none text-lg focus-visible:ring-0"
+                    placeholder={"Paste a link or write a note ..."}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && e.metaKey) {
+                        form.handleSubmit(onSubmit, onError)();
+                      }
+                    }}
+                    {...field}
+                  />
+                </FormControl>
+              </FormItem>
+            );
+          }}
+        />
+        <ActionButton loading={isPending} type="submit" variant="ghost">
+          Save
+        </ActionButton>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/web/components/dashboard/bookmarks/TopNav.tsx b/apps/web/components/dashboard/bookmarks/TopNav.tsx
index 4274762c..568af15d 100644
--- a/apps/web/components/dashboard/bookmarks/TopNav.tsx
+++ b/apps/web/components/dashboard/bookmarks/TopNav.tsx
@@ -1,44 +1,9 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Link, NotebookPen } from "lucide-react";
-
 import { SearchInput } from "../search/SearchInput";
-import { AddLinkButton } from "./AddLinkButton";
-import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
-
-function AddText() {
-  const [isEditorOpen, setEditorOpen] = useState(false);
-
-  return (
-    <div className="flex">
-      <BookmarkedTextEditor open={isEditorOpen} setOpen={setEditorOpen} />
-      <Button className="m-auto" onClick={() => setEditorOpen(true)}>
-        <NotebookPen />
-      </Button>
-    </div>
-  );
-}
-
-function AddLink() {
-  return (
-    <div className="flex">
-      <AddLinkButton>
-        <Button className="m-auto">
-          <Link />
-        </Button>
-      </AddLinkButton>
-    </div>
-  );
-}
 
 export default function TopNav() {
   return (
-    <div className="container flex gap-2 py-4">
+    <div className="container py-4">
       <SearchInput />
-      <AddLink />
-      <AddText />
     </div>
   );
 }
diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index abb19f5e..1ca6a0ae 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { Input } from "@/components/ui/input";
 import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search";
-- 
cgit v1.2.3-70-g09d2