feat: Implement the all highlights page. Fixes #620

3 files changed, 9 insertions, 76 deletions

diff --git a/apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx b/apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx
index b99a1a56..89472184 100644
--- a/apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import { ActionButton } from "@/components/ui/action-button";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
@@ -61,14 +62,15 @@ const ColorPickerMenu: React.FC<ColorPickerMenuProps> = ({
           </Button>
         ))}
         {selectedHighlight && (
-          <Button
+          <ActionButton
+            loading={false}
             size="none"
             className="size-8 rounded-full"
             onClick={onDelete}
             variant="ghost"
           >
             <Trash2 className="size-5 text-destructive" />
-          </Button>
+          </ActionButton>
         )}
       </PopoverContent>
     </Popover>
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index b854146c..c257d902 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Link from "next/link";
 import { BookmarkTagsEditor } from "@/components/dashboard/bookmarks/BookmarkTagsEditor";
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
@@ -12,10 +11,9 @@ import {
   TooltipPortal,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import useRelativeTime from "@/lib/hooks/relative-time";
 import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import { CalendarDays, ExternalLink } from "lucide-react";
 
 import {
@@ -35,8 +33,6 @@ import LinkContentSection from "./LinkContentSection";
 import { NoteEditor } from "./NoteEditor";
 import { TextContentSection } from "./TextContentSection";
 
-dayjs.extend(relativeTime);
-
 function ContentLoading() {
   return (
     <div className="flex w-full flex-col gap-2">
@@ -48,14 +44,7 @@ function ContentLoading() {
 }
 
 function CreationTime({ createdAt }: { createdAt: Date }) {
-  const [fromNow, setFromNow] = useState("");
-  const [localCreatedAt, setLocalCreatedAt] = useState("");
-
-  // This is to avoid hydration errors when server and clients are in different timezones
-  useEffect(() => {
-    setFromNow(dayjs(createdAt).fromNow());
-    setLocalCreatedAt(createdAt.toLocaleString());
-  }, [createdAt]);
+  const { fromNow, localCreatedAt } = useRelativeTime(createdAt);
   return (
     <Tooltip delayDuration={0}>
       <TooltipTrigger asChild>
diff --git a/apps/web/components/dashboard/preview/HighlightsBox.tsx b/apps/web/components/dashboard/preview/HighlightsBox.tsx
index 3c873f3d..af065a9d 100644
--- a/apps/web/components/dashboard/preview/HighlightsBox.tsx
+++ b/apps/web/components/dashboard/preview/HighlightsBox.tsx
@@ -1,72 +1,14 @@
-import { ActionButton } from "@/components/ui/action-button";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { toast } from "@/components/ui/use-toast";
 import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
-import { cn } from "@/lib/utils";
 import { Separator } from "@radix-ui/react-dropdown-menu";
-import { ChevronsDownUp, Trash2 } from "lucide-react";
+import { ChevronsDownUp } from "lucide-react";
 
-import { useDeleteHighlight } from "@hoarder/shared-react/hooks/highlights";
-import { ZHighlight } from "@hoarder/shared/types/highlights";
-
-import { HIGHLIGHT_COLOR_MAP } from "./highlights";
-
-function HighlightCard({ highlight }: { highlight: ZHighlight }) {
-  const { mutate: deleteHighlight, isPending: isDeleting } = useDeleteHighlight(
-    {
-      onSuccess: () => {
-        toast({
-          description: "Highlight has been deleted!",
-        });
-      },
-      onError: () => {
-        toast({
-          description: "Something went wrong",
-          variant: "destructive",
-        });
-      },
-    },
-  );
-
-  const onBookmarkClick = () => {
-    document
-      .querySelector(`[data-highlight-id="${highlight.id}"]`)
-      ?.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
-  };
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        <button onClick={onBookmarkClick}>
-          <blockquote
-            className={cn(
-              "prose border-l-[6px] p-2 pl-6 italic dark:prose-invert prose-p:text-sm",
-              HIGHLIGHT_COLOR_MAP["border-l"][highlight.color],
-            )}
-          >
-            <p>{highlight.text}</p>
-          </blockquote>
-        </button>
-      </div>
-      <div className="flex gap-2">
-        <ActionButton
-          loading={isDeleting}
-          variant="ghost"
-          onClick={() => deleteHighlight({ highlightId: highlight.id })}
-        >
-          <Trash2 className="size-4 text-destructive" />
-        </ActionButton>
-      </div>
-    </div>
-  );
-}
+import HighlightCard from "../highlights/HighlightCard";
 
 export default function HighlightsBox({ bookmarkId }: { bookmarkId: string }) {
   const { t } = useTranslation();
@@ -87,7 +29,7 @@ export default function HighlightsBox({ bookmarkId }: { bookmarkId: string }) {
       <CollapsibleContent className="group flex flex-col py-3 text-sm">
         {highlights.highlights.map((highlight) => (
           <>
-            <HighlightCard key={highlight.id} highlight={highlight} />
+            <HighlightCard key={highlight.id} highlight={highlight} clickable />
             <Separator className="m-2 h-0.5 bg-gray-200 last:hidden" />
           </>
         ))}