From 3208dda3848ad739f54cebf44c423e2b68e85b2d Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 28 Feb 2024 20:45:28 +0000
Subject: feature: Add support for storing and previewing raw notes

---
 .../dashboard/bookmarks/components/AddBookmark.tsx |  96 ++++++++++++++++++
 .../app/dashboard/bookmarks/components/AddLink.tsx |  71 --------------
 .../bookmarks/components/BookmarkOptions.tsx       |  68 +++++++++----
 .../bookmarks/components/BookmarkedTextEditor.tsx  | 108 +++++++++++++++++++++
 .../bookmarks/components/BookmarksGrid.tsx         |  20 +++-
 .../dashboard/bookmarks/components/LinkCard.tsx    |  50 +++-------
 .../app/dashboard/bookmarks/components/TagList.tsx |  40 ++++++++
 .../dashboard/bookmarks/components/TagModal.tsx    |   5 +-
 .../dashboard/bookmarks/components/TextCard.tsx    |  62 ++++++++++++
 packages/web/app/dashboard/bookmarks/layout.tsx    |   4 +-
 packages/web/components/ui/textarea.tsx            |  24 +++++
 packages/web/lib/types/api/bookmarks.ts            |   7 ++
 packages/web/server/api/routers/bookmarks.test.ts  |  36 +++++--
 packages/web/server/api/routers/bookmarks.ts       |  89 +++++++++++++----
 14 files changed, 510 insertions(+), 170 deletions(-)
 create mode 100644 packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx
 delete mode 100644 packages/web/app/dashboard/bookmarks/components/AddLink.tsx
 create mode 100644 packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
 create mode 100644 packages/web/app/dashboard/bookmarks/components/TagList.tsx
 create mode 100644 packages/web/app/dashboard/bookmarks/components/TextCard.tsx
 create mode 100644 packages/web/components/ui/textarea.tsx

(limited to 'packages/web')

diff --git a/packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx b/packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx
new file mode 100644
index 00000000..4f0de87a
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Pencil, Plus } from "lucide-react";
+import { useForm, SubmitErrorHandler } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
+import { useState } from "react";
+
+function AddText() {
+  const [isEditorOpen, setEditorOpen] = useState(false);
+
+  return (
+    <div className="flex">
+      <BookmarkedTextEditor open={isEditorOpen} setOpen={setEditorOpen} />
+      <Button className="m-auto" onClick={() => setEditorOpen(true)}>
+        <Pencil />
+      </Button>
+    </div>
+  );
+}
+
+function AddLink() {
+  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),
+  });
+
+  const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
+  const createBookmarkMutator = api.bookmarks.createBookmark.useMutation({
+    onSuccess: () => {
+      invalidateBookmarksCache();
+    },
+    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 (
+    <Form {...form}>
+      <form
+        className="flex-grow"
+        onSubmit={form.handleSubmit(
+          (value) =>
+            createBookmarkMutator.mutate({ url: value.url, type: "link" }),
+          onError,
+        )}
+      >
+        <div className="flex w-full items-center space-x-2 py-4">
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => {
+              return (
+                <FormItem className="flex-1">
+                  <FormControl>
+                    <Input type="text" placeholder="Link" {...field} />
+                  </FormControl>
+                </FormItem>
+              );
+            }}
+          />
+          <ActionButton type="submit" loading={createBookmarkMutator.isPending}>
+            <Plus />
+          </ActionButton>
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+export default function AddBookmark() {
+  return (
+    <div className="container flex gap-2">
+      <AddLink />
+      <AddText />
+    </div>
+  );
+}
diff --git a/packages/web/app/dashboard/bookmarks/components/AddLink.tsx b/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
deleted file mode 100644
index 242a52a5..00000000
--- a/packages/web/app/dashboard/bookmarks/components/AddLink.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-"use client";
-
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Plus } from "lucide-react";
-import { useForm, SubmitErrorHandler } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
-import { ActionButton } from "@/components/ui/action-button";
-
-const formSchema = z.object({
-  url: z.string().url({ message: "The link must be a valid URL" }),
-});
-
-export default function AddLink() {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-  });
-
-  const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
-  const bookmarkLinkMutator = api.bookmarks.bookmarkLink.useMutation({
-    onSuccess: () => {
-      invalidateBookmarksCache();
-    },
-    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 (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(
-          (value) =>
-            bookmarkLinkMutator.mutate({ url: value.url, type: "link" }),
-          onError,
-        )}
-      >
-        <div className="container flex w-full items-center space-x-2 py-4">
-          <FormField
-            control={form.control}
-            name="url"
-            render={({ field }) => {
-              return (
-                <FormItem className="flex-1">
-                  <FormControl>
-                    <Input type="text" placeholder="Link" {...field} />
-                  </FormControl>
-                </FormItem>
-              );
-            }}
-          />
-          <ActionButton type="submit" loading={bookmarkLinkMutator.isPending}>
-            <Plus />
-          </ActionButton>
-        </div>
-      </form>
-    </Form>
-  );
-}
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
index b8f6d8f2..866a4cbd 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
@@ -2,7 +2,7 @@
 
 import { useToast } from "@/components/ui/use-toast";
 import { api } from "@/lib/trpc";
-import { ZBookmark } from "@/lib/types/api/bookmarks";
+import { ZBookmark, ZBookmarkedLink } from "@/lib/types/api/bookmarks";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -14,12 +14,15 @@ import {
   Archive,
   Link,
   MoreHorizontal,
+  Pencil,
   RotateCw,
   Star,
   Tags,
   Trash2,
 } from "lucide-react";
 import { useTagModel } from "./TagModal";
+import { useState } from "react";
+import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
 
 export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
@@ -27,6 +30,8 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
 
   const [_, setTagModalIsOpen, tagModal] = useTagModel(bookmark);
 
+  const [isTextEditorOpen, setTextEditorOpen] = useState(false);
+
   const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
 
   const onError = () => {
@@ -72,13 +77,27 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <>
       {tagModal}
+      <BookmarkedTextEditor
+        bookmark={bookmark}
+        open={isTextEditorOpen}
+        setOpen={setTextEditorOpen}
+      />
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost">
+          <Button
+            variant="ghost"
+            className="focus-visible:ring-0 focus-visible:ring-offset-0"
+          >
             <MoreHorizontal />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-fit">
+          {bookmark.content.type === "text" && (
+            <DropdownMenuItem onClick={() => setTextEditorOpen(true)}>
+              <Pencil className="mr-2 size-4" />
+              <span>Edit</span>
+            </DropdownMenuItem>
+          )}
           <DropdownMenuItem
             onClick={() =>
               updateBookmarkMutator.mutate({
@@ -101,29 +120,36 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
             <Archive className="mr-2 size-4" />
             <span>{bookmark.archived ? "Un-archive" : "Archive"}</span>
           </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() => {
-              navigator.clipboard.writeText(bookmark.content.url);
-              toast({
-                description: "Link was added to your clipboard!",
-              });
-            }}
-          >
-            <Link className="mr-2 size-4" />
-            <span>Copy Link</span>
-          </DropdownMenuItem>
+          {bookmark.content.type === "link" && (
+            <DropdownMenuItem
+              onClick={() => {
+                navigator.clipboard.writeText(
+                  (bookmark.content as ZBookmarkedLink).url,
+                );
+                toast({
+                  description: "Link was added to your clipboard!",
+                });
+              }}
+            >
+              <Link className="mr-2 size-4" />
+              <span>Copy Link</span>
+            </DropdownMenuItem>
+          )}
           <DropdownMenuItem onClick={() => setTagModalIsOpen(true)}>
             <Tags className="mr-2 size-4" />
             <span>Edit Tags</span>
           </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() =>
-              crawlBookmarkMutator.mutate({ bookmarkId: bookmark.id })
-            }
-          >
-            <RotateCw className="mr-2 size-4" />
-            <span>Refresh</span>
-          </DropdownMenuItem>
+
+          {bookmark.content.type === "link" && (
+            <DropdownMenuItem
+              onClick={() =>
+                crawlBookmarkMutator.mutate({ bookmarkId: bookmark.id })
+              }
+            >
+              <RotateCw className="mr-2 size-4" />
+              <span>Refresh</span>
+            </DropdownMenuItem>
+          )}
           <DropdownMenuItem
             className="text-destructive"
             onClick={() =>
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
new file mode 100644
index 00000000..e9138e03
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
@@ -0,0 +1,108 @@
+import { ZBookmark } from "@/lib/types/api/bookmarks";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/lib/trpc";
+import { useState } from "react";
+import { toast } from "@/components/ui/use-toast";
+
+export function BookmarkedTextEditor({
+  bookmark,
+  open,
+  setOpen,
+}: {
+  bookmark?: ZBookmark;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
+  const isNewBookmark = bookmark === undefined;
+  const [noteText, setNoteText] = useState(
+    bookmark && bookmark.content.type == "text" ? bookmark.content.text : "",
+  );
+
+  const invalidateAllBookmarksCache =
+    api.useUtils().bookmarks.getBookmarks.invalidate;
+  const invalidateOneBookmarksCache =
+    api.useUtils().bookmarks.getBookmark.invalidate;
+
+  const { mutate: createBookmarkMutator, isPending: isCreationPending } =
+    api.bookmarks.createBookmark.useMutation({
+      onSuccess: () => {
+        invalidateAllBookmarksCache();
+        toast({
+          description: "Note created!",
+        });
+        setOpen(false);
+        setNoteText("");
+      },
+      onError: () => {
+        toast({ description: "Something went wrong", variant: "destructive" });
+      },
+    });
+  const { mutate: updateBookmarkMutator, isPending: isUpdatePending } =
+    api.bookmarks.updateBookmarkText.useMutation({
+      onSuccess: () => {
+        invalidateOneBookmarksCache({
+          bookmarkId: bookmark!.id,
+        });
+        toast({
+          description: "Note updated!",
+        });
+        setOpen(false);
+        setNoteText("");
+      },
+      onError: () => {
+        toast({ description: "Something went wrong", variant: "destructive" });
+      },
+    });
+  const isPending = isCreationPending || isUpdatePending;
+
+  const onSave = () => {
+    if (isNewBookmark) {
+      createBookmarkMutator({
+        type: "text",
+        text: noteText,
+      });
+    } else {
+      updateBookmarkMutator({
+        bookmarkId: bookmark.id,
+        text: noteText,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="pb-4">
+            {isNewBookmark ? "New Note" : "Edit Note"}
+          </DialogTitle>
+          <Textarea
+            value={noteText}
+            onChange={(e) => setNoteText(e.target.value)}
+            className="h-52 grow"
+          />
+        </DialogHeader>
+        <DialogFooter className="flex-shrink gap-1 sm:justify-end">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+          <ActionButton type="button" loading={isPending} onClick={onSave}>
+            Save
+          </ActionButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
index e07d48b6..c960c8b7 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
@@ -3,11 +3,18 @@
 import LinkCard from "./LinkCard";
 import { ZBookmark, ZGetBookmarksRequest } from "@/lib/types/api/bookmarks";
 import { api } from "@/lib/trpc";
+import TextCard from "./TextCard";
 
-function renderBookmark(bookmark: ZBookmark) {
+function renderBookmark(bookmark: ZBookmark, className: string) {
   switch (bookmark.content.type) {
     case "link":
-      return <LinkCard key={bookmark.id} bookmark={bookmark} />;
+      return (
+        <LinkCard key={bookmark.id} bookmark={bookmark} className={className} />
+      );
+    case "text":
+      return (
+        <TextCard key={bookmark.id} bookmark={bookmark} className={className} />
+      );
   }
 }
 
@@ -25,8 +32,13 @@ export default function BookmarksGrid({
     return <p>No bookmarks</p>;
   }
   return (
-    <div className="container grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      {data.bookmarks.map((b) => renderBookmark(b))}
+    <div className="container grid grid-flow-row-dense grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      {data.bookmarks.map((b) =>
+        renderBookmark(
+          b,
+          "border-grey-100 border bg-gray-50 duration-300 ease-in hover:border-blue-300 hover:transition-all",
+        ),
+      )}
     </div>
   );
 }
diff --git a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
index cd0f128c..73d3f300 100644
--- a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
 import {
   ImageCard,
   ImageCardBanner,
@@ -13,50 +12,24 @@ import { ZBookmark } from "@/lib/types/api/bookmarks";
 import Link from "next/link";
 import BookmarkOptions from "./BookmarkOptions";
 import { api } from "@/lib/trpc";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Star } from "lucide-react";
+import { cn } from "@/lib/utils";
+import TagList from "./TagList";
 
 function isStillCrawling(bookmark: ZBookmark) {
   return (
+    bookmark.content.type == "link" &&
     !bookmark.content.crawledAt &&
     Date.now().valueOf() - bookmark.createdAt.valueOf() < 30 * 1000
   );
 }
 
-function TagList(bookmark: ZBookmark, stillCrawling: boolean) {
-  if (stillCrawling) {
-    return (
-      <ImageCardBody className="space-y-2">
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-full" />
-      </ImageCardBody>
-    );
-  }
-  return (
-    <ImageCardBody className="flex h-full flex-wrap space-x-1 overflow-hidden">
-      {bookmark.tags.map((t) => (
-        <Link
-          className="flex h-full flex-col justify-end"
-          key={t.id}
-          href={`/dashboard/tags/${t.name}`}
-        >
-          <Badge
-            variant="default"
-            className="text-nowrap bg-gray-300 text-gray-500 hover:text-white"
-          >
-            #{t.name}
-          </Badge>
-        </Link>
-      ))}
-    </ImageCardBody>
-  );
-}
-
 export default function LinkCard({
   bookmark: initialData,
+  className,
 }: {
   bookmark: ZBookmark;
+  className: string;
 }) {
   const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
     {
@@ -78,6 +51,9 @@ export default function LinkCard({
     },
   );
   const link = bookmark.content;
+  if (link.type != "link") {
+    throw new Error("Unexpected bookmark type");
+  }
   const isCrawling = isStillCrawling(bookmark);
   const parsedUrl = new URL(link.url);
 
@@ -88,11 +64,7 @@ export default function LinkCard({
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=";
 
   return (
-    <ImageCard
-      className={
-        "border-grey-100 border bg-gray-50 duration-300 ease-in hover:border-blue-300 hover:transition-all"
-      }
-    >
+    <ImageCard className={cn(className, "row-span-2")}>
       {bookmark.favourited && (
         <Star
           className="absolute m-1 size-8 rounded bg-gray-100 p-1"
@@ -111,7 +83,9 @@ export default function LinkCard({
         </ImageCardTitle>
         {/* There's a hack here. Every tag has the full hight of the container itself. That why, when we enable flex-wrap,
         the overflowed don't show up. */}
-        {TagList(bookmark, isCrawling)}
+        <ImageCardBody className="flex h-full flex-wrap space-x-1 overflow-hidden">
+          <TagList bookmark={bookmark} loading={isCrawling} />
+        </ImageCardBody>
         <ImageCardFooter>
           <div className="flex justify-between text-gray-500">
             <div className="my-auto">
diff --git a/packages/web/app/dashboard/bookmarks/components/TagList.tsx b/packages/web/app/dashboard/bookmarks/components/TagList.tsx
new file mode 100644
index 00000000..440452a7
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/TagList.tsx
@@ -0,0 +1,40 @@
+import { Badge } from "@/components/ui/badge";
+import Link from "next/link";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ZBookmark } from "@/lib/types/api/bookmarks";
+
+export default function TagList({
+  bookmark,
+  loading,
+}: {
+  bookmark: ZBookmark;
+  loading?: boolean;
+}) {
+  if (loading) {
+    return (
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+      </div>
+    );
+  }
+  return (
+    <>
+      {bookmark.tags.map((t) => (
+        <Link
+          className="flex h-full flex-col justify-end"
+          key={t.id}
+          href={`/dashboard/tags/${t.name}`}
+        >
+          <Badge
+            variant="default"
+            className="text-nowrap bg-gray-300 text-gray-500 hover:text-white"
+          >
+            #{t.name}
+          </Badge>
+        </Link>
+      ))}
+    </>
+  );
+}
diff --git a/packages/web/app/dashboard/bookmarks/components/TagModal.tsx b/packages/web/app/dashboard/bookmarks/components/TagModal.tsx
index b0e391b7..3b6a0bd4 100644
--- a/packages/web/app/dashboard/bookmarks/components/TagModal.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/TagModal.tsx
@@ -4,7 +4,6 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -168,10 +167,8 @@ export default function TagModal({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Edit Tags</DialogTitle>
-          <DialogDescription>
-            <TagEditor tags={tags} setTags={setTags} />
-          </DialogDescription>
         </DialogHeader>
+        <TagEditor tags={tags} setTags={setTags} />
         <DialogFooter className="sm:justify-end">
           <DialogClose asChild>
             <Button type="button" variant="secondary">
diff --git a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
new file mode 100644
index 00000000..7ee1a90b
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { ZBookmark } from "@/lib/types/api/bookmarks";
+import BookmarkOptions from "./BookmarkOptions";
+import { api } from "@/lib/trpc";
+import { Star } from "lucide-react";
+import { cn } from "@/lib/utils";
+import TagList from "./TagList";
+
+export default function TextCard({
+  bookmark: initialData,
+  className,
+}: {
+  bookmark: ZBookmark;
+  className: string;
+}) {
+  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
+    {
+      bookmarkId: initialData.id,
+    },
+    {
+      initialData,
+    },
+  );
+  const bookmarkedText = bookmark.content;
+  if (bookmarkedText.type != "text") {
+    throw new Error("Unexpected bookmark type");
+  }
+
+  const numWords = bookmarkedText.text.split(" ").length;
+
+  return (
+    <div
+      className={cn(
+        className,
+        cn(
+          "flex flex-col gap-y-1 overflow-hidden rounded-lg p-2 shadow-md",
+          numWords > 12 ? "row-span-2 h-96" : "row-span-1 h-40",
+        ),
+      )}
+    >
+      <p className="grow overflow-hidden text-ellipsis">
+        {bookmarkedText.text}
+      </p>
+      <div className="flex flex-none flex-wrap gap-1 overflow-hidden">
+        <TagList bookmark={bookmark} />
+      </div>
+      <div className="flex w-full justify-between">
+        <div>
+          {bookmark.favourited && (
+            <Star
+              className="my-1 size-8 rounded p-1"
+              color="#ebb434"
+              fill="#ebb434"
+            />
+          )}
+        </div>
+        <BookmarkOptions bookmark={bookmark} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/app/dashboard/bookmarks/layout.tsx b/packages/web/app/dashboard/bookmarks/layout.tsx
index 68704a2b..98aa75a4 100644
--- a/packages/web/app/dashboard/bookmarks/layout.tsx
+++ b/packages/web/app/dashboard/bookmarks/layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import AddLink from "./components/AddLink";
+import AddBookmark from "./components/AddBookmark";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -14,7 +14,7 @@ export default function BookmarksLayout({
   return (
     <div className="flex h-full flex-col">
       <div>
-        <AddLink />
+        <AddBookmark />
       </div>
       <hr />
       <div className="my-4 flex-1">{children}</div>
diff --git a/packages/web/components/ui/textarea.tsx b/packages/web/components/ui/textarea.tsx
new file mode 100644
index 00000000..a0de3371
--- /dev/null
+++ b/packages/web/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/packages/web/lib/types/api/bookmarks.ts b/packages/web/lib/types/api/bookmarks.ts
index 0970a7ed..9b0ae371 100644
--- a/packages/web/lib/types/api/bookmarks.ts
+++ b/packages/web/lib/types/api/bookmarks.ts
@@ -12,8 +12,15 @@ export const zBookmarkedLinkSchema = z.object({
 });
 export type ZBookmarkedLink = z.infer<typeof zBookmarkedLinkSchema>;
 
+export const zBookmarkedTextSchema = z.object({
+  type: z.literal("text"),
+  text: z.string().max(2000),
+});
+export type ZBookmarkedText = z.infer<typeof zBookmarkedTextSchema>;
+
 export const zBookmarkContentSchema = z.discriminatedUnion("type", [
   zBookmarkedLinkSchema,
+  zBookmarkedTextSchema,
 ]);
 export type ZBookmarkContent = z.infer<typeof zBookmarkContentSchema>;
 
diff --git a/packages/web/server/api/routers/bookmarks.test.ts b/packages/web/server/api/routers/bookmarks.test.ts
index 16f82992..603a173e 100644
--- a/packages/web/server/api/routers/bookmarks.test.ts
+++ b/packages/web/server/api/routers/bookmarks.test.ts
@@ -1,17 +1,18 @@
 import { CustomTestContext, defaultBeforeEach } from "@/lib/testUtils";
-import { expect, describe, test, beforeEach } from "vitest";
+import { expect, describe, test, beforeEach, assert } from "vitest";
 
 beforeEach<CustomTestContext>(defaultBeforeEach);
 
 describe("Bookmark Routes", () => {
   test<CustomTestContext>("create bookmark", async ({ apiCallers }) => {
     const api = apiCallers[0].bookmarks;
-    const bookmark = await api.bookmarkLink({
+    const bookmark = await api.createBookmark({
       url: "https://google.com",
       type: "link",
     });
 
     const res = await api.getBookmark({ bookmarkId: bookmark.id });
+    assert(res.content.type == "link");
     expect(res.content.url).toEqual("https://google.com");
     expect(res.favourited).toEqual(false);
     expect(res.archived).toEqual(false);
@@ -22,7 +23,7 @@ describe("Bookmark Routes", () => {
     const api = apiCallers[0].bookmarks;
 
     // Create the bookmark
-    const bookmark = await api.bookmarkLink({
+    const bookmark = await api.createBookmark({
       url: "https://google.com",
       type: "link",
     });
@@ -43,7 +44,7 @@ describe("Bookmark Routes", () => {
     const api = apiCallers[0].bookmarks;
 
     // Create the bookmark
-    const bookmark = await api.bookmarkLink({
+    const bookmark = await api.createBookmark({
       url: "https://google.com",
       type: "link",
     });
@@ -64,12 +65,12 @@ describe("Bookmark Routes", () => {
     const emptyBookmarks = await api.getBookmarks({});
     expect(emptyBookmarks.bookmarks.length).toEqual(0);
 
-    const bookmark1 = await api.bookmarkLink({
+    const bookmark1 = await api.createBookmark({
       url: "https://google.com",
       type: "link",
     });
 
-    const bookmark2 = await api.bookmarkLink({
+    const bookmark2 = await api.createBookmark({
       url: "https://google2.com",
       type: "link",
     });
@@ -113,7 +114,7 @@ describe("Bookmark Routes", () => {
 
   test<CustomTestContext>("update tags", async ({ apiCallers }) => {
     const api = apiCallers[0].bookmarks;
-    let bookmark = await api.bookmarkLink({
+    let bookmark = await api.createBookmark({
       url: "https://google.com",
       type: "link",
     });
@@ -139,12 +140,29 @@ describe("Bookmark Routes", () => {
     expect(bookmark.tags.map((t) => t.name).sort()).toEqual(["tag2", "tag3"]);
   });
 
+  test<CustomTestContext>("update bookmark text", async ({ apiCallers }) => {
+    const api = apiCallers[0].bookmarks;
+    let bookmark = await api.createBookmark({
+      text: "HELLO WORLD",
+      type: "text",
+    });
+
+    await api.updateBookmarkText({
+      bookmarkId: bookmark.id,
+      text: "WORLD HELLO",
+    });
+
+    bookmark = await api.getBookmark({ bookmarkId: bookmark.id });
+    assert(bookmark.content.type == "text");
+    expect(bookmark.content.text).toEqual("WORLD HELLO");
+  });
+
   test<CustomTestContext>("privacy", async ({ apiCallers }) => {
-    const user1Bookmark = await apiCallers[0].bookmarks.bookmarkLink({
+    const user1Bookmark = await apiCallers[0].bookmarks.createBookmark({
       type: "link",
       url: "https://google.com",
     });
-    const user2Bookmark = await apiCallers[1].bookmarks.bookmarkLink({
+    const user2Bookmark = await apiCallers[1].bookmarks.createBookmark({
       type: "link",
       url: "https://google.com",
     });
diff --git a/packages/web/server/api/routers/bookmarks.ts b/packages/web/server/api/routers/bookmarks.ts
index 64755e4e..bfa0580f 100644
--- a/packages/web/server/api/routers/bookmarks.ts
+++ b/packages/web/server/api/routers/bookmarks.ts
@@ -13,6 +13,7 @@ import {
 import {
   bookmarkLinks,
   bookmarkTags,
+  bookmarkTexts,
   bookmarks,
   tagsOnBookmarks,
 } from "@hoarder/db/schema";
@@ -64,6 +65,7 @@ async function dummyDrizzleReturnType() {
         },
       },
       link: true,
+      text: true,
     },
   });
   if (!x) {
@@ -75,11 +77,13 @@ async function dummyDrizzleReturnType() {
 function toZodSchema(
   bookmark: Awaited<ReturnType<typeof dummyDrizzleReturnType>>,
 ): ZBookmark {
-  const { tagsOnBookmarks, link, ...rest } = bookmark;
+  const { tagsOnBookmarks, link, text, ...rest } = bookmark;
 
   let content: ZBookmarkContent;
   if (link) {
     content = { type: "link", ...link };
+  } else if (text) {
+    content = { type: "text", text: text.text || "" };
   } else {
     throw new Error("Unknown content type");
   }
@@ -95,12 +99,10 @@ function toZodSchema(
 }
 
 export const bookmarksAppRouter = router({
-  bookmarkLink: authedProcedure
+  createBookmark: authedProcedure
     .input(zNewBookmarkRequestSchema)
     .output(zBookmarkSchema)
     .mutation(async ({ input, ctx }) => {
-      const { url } = input;
-
       const bookmark = await ctx.db.transaction(
         async (tx): Promise<ZBookmark> => {
           const bookmark = (
@@ -112,20 +114,39 @@ export const bookmarksAppRouter = router({
               .returning()
           )[0];
 
-          const link = (
-            await tx
-              .insert(bookmarkLinks)
-              .values({
-                id: bookmark.id,
-                url,
-              })
-              .returning()
-          )[0];
+          let content: ZBookmarkContent;
 
-          const content: ZBookmarkContent = {
-            type: "link",
-            ...link,
-          };
+          switch (input.type) {
+            case "link": {
+              const link = (
+                await tx
+                  .insert(bookmarkLinks)
+                  .values({
+                    id: bookmark.id,
+                    url: input.url,
+                  })
+                  .returning()
+              )[0];
+              content = {
+                type: "link",
+                ...link,
+              };
+              break;
+            }
+            case "text": {
+              const text = (
+                await tx
+                  .insert(bookmarkTexts)
+                  .values({ id: bookmark.id, text: input.text })
+                  .returning()
+              )[0];
+              content = {
+                type: "text",
+                text: text.text || "",
+              };
+              break;
+            }
+          }
 
           return {
             tags: [] as ZBookmarkTags[],
@@ -170,6 +191,30 @@ export const bookmarksAppRouter = router({
       return res[0];
     }),
 
+  updateBookmarkText: authedProcedure
+    .input(
+      z.object({
+        bookmarkId: z.string(),
+        text: z.string().max(2000),
+      }),
+    )
+    .use(ensureBookmarkOwnership)
+    .mutation(async ({ input, ctx }) => {
+      const res = await ctx.db
+        .update(bookmarkTexts)
+        .set({
+          text: input.text,
+        })
+        .where(and(eq(bookmarkTexts.id, input.bookmarkId)))
+        .returning();
+      if (res.length == 0) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Bookmark not found",
+        });
+      }
+    }),
+
   deleteBookmark: authedProcedure
     .input(z.object({ bookmarkId: z.string() }))
     .use(ensureBookmarkOwnership)
@@ -212,6 +257,7 @@ export const bookmarksAppRouter = router({
             },
           },
           link: true,
+          text: true,
         },
       });
       if (!bookmark) {
@@ -246,6 +292,7 @@ export const bookmarksAppRouter = router({
             },
           },
           link: true,
+          text: true,
         },
       });
 
@@ -271,7 +318,7 @@ export const bookmarksAppRouter = router({
       await ctx.db.transaction(async (tx) => {
         // Detaches
         if (input.detach.length > 0) {
-          await ctx.db.delete(tagsOnBookmarks).where(
+          await tx.delete(tagsOnBookmarks).where(
             and(
               eq(tagsOnBookmarks.bookmarkId, input.bookmarkId),
               inArray(
@@ -295,7 +342,7 @@ export const bookmarksAppRouter = router({
           }));
 
         if (toBeCreatedTags.length > 0) {
-          await ctx.db
+          await tx
             .insert(bookmarkTags)
             .values(toBeCreatedTags)
             .onConflictDoNothing()
@@ -303,7 +350,7 @@ export const bookmarksAppRouter = router({
         }
 
         const allIds = (
-          await ctx.db.query.bookmarkTags.findMany({
+          await tx.query.bookmarkTags.findMany({
             where: and(
               eq(bookmarkTags.userId, ctx.user.id),
               inArray(
@@ -317,7 +364,7 @@ export const bookmarksAppRouter = router({
           })
         ).map((t) => t.id);
 
-        await ctx.db
+        await tx
           .insert(tagsOnBookmarks)
           .values(
             allIds.map((i) => ({
-- 
cgit v1.2.3-70-g09d2