fix(web): Fix some JS console errors in the preview page

4 files changed, 50 insertions, 36 deletions

diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index c1a4cc70..ab7dd754 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -111,7 +111,7 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
       })}
       styles={{
         multiValueRemove: () => ({
-          "background-color": "transparent",
+          backgroundColor: "transparent",
         }),
         valueContainer: (styles) => ({
           ...styles,
@@ -122,10 +122,10 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
         }),
         control: (styles) => ({
           ...styles,
-          "background-color": "hsl(var(--background))",
-          "border-color": "hsl(var(--border))",
+          backgroundColor: "hsl(var(--background))",
+          borderColor: "hsl(var(--border))",
           ":hover": {
-            "border-color": "hsl(var(--border))",
+            borderColor: "hsl(var(--border))",
           },
         }),
       }}
diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index 45d67b34..d2048cad 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -53,7 +53,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <div className="flex items-center justify-center gap-3">
       <Tooltip delayDuration={0}>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <ActionButton
             variant="none"
             className="size-14 rounded-full bg-background"
@@ -73,7 +73,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
         </TooltipContent>
       </Tooltip>
       <Tooltip delayDuration={0}>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <ActionButton
             variant="none"
             loading={pendingArchive}
@@ -93,7 +93,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
         </TooltipContent>
       </Tooltip>
       <Tooltip delayDuration={0}>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <ActionButton
             loading={pendingDeletion}
             className="size-14 rounded-full bg-background"
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 4cd9199d..73e49376 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { TagsEditor } from "@/components/dashboard/bookmarks/TagsEditor";
 import { Separator } from "@/components/ui/separator";
@@ -39,15 +40,23 @@ 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]);
   return (
     <Tooltip delayDuration={0}>
       <TooltipTrigger asChild>
         <span className="flex w-fit gap-2">
-          <CalendarDays /> {dayjs(createdAt).fromNow()}
+          <CalendarDays /> {fromNow}
         </span>
       </TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent>{createdAt.toLocaleString()}</TooltipContent>
+        <TooltipContent>{localCreatedAt}</TooltipContent>
       </TooltipPortal>
     </Tooltip>
   );
@@ -127,7 +136,7 @@ export default function BookmarkPreview({
   );
 
   return (
-    <div className="grid grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
+    <div className="grid h-full grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
       <div className="row-span-2 h-full w-full overflow-auto p-2 md:col-span-2 lg:row-auto">
         {isBookmarkStillCrawling(bookmark) ? <ContentLoading /> : content}
       </div>
diff --git a/apps/web/components/ui/action-button.tsx b/apps/web/components/ui/action-button.tsx
index 5b862e07..e9cdc3c9 100644
--- a/apps/web/components/ui/action-button.tsx
+++ b/apps/web/components/ui/action-button.tsx
@@ -1,33 +1,38 @@
+import React from "react";
 import { useClientConfig } from "@/lib/clientConfig";
 
 import type { ButtonProps } from "./button";
 import { Button } from "./button";
 import LoadingSpinner from "./spinner";
 
-export function ActionButton({
-  children,
-  loading,
-  spinner,
-  disabled,
-  ignoreDemoMode = false,
-  ...props
-}: ButtonProps & {
-  loading: boolean;
-  spinner?: React.ReactNode;
-  ignoreDemoMode?: boolean;
-}) {
-  const clientConfig = useClientConfig();
-  spinner ||= <LoadingSpinner />;
-  if (!ignoreDemoMode && clientConfig.demoMode) {
-    disabled = true;
-  } else if (disabled !== undefined) {
-    disabled ||= loading;
-  } else if (loading) {
-    disabled = true;
+const ActionButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & {
+    loading: boolean;
+    spinner?: React.ReactNode;
+    ignoreDemoMode?: boolean;
   }
-  return (
-    <Button {...props} disabled={disabled}>
-      {loading ? spinner : children}
-    </Button>
-  );
-}
+>(
+  (
+    { children, loading, spinner, disabled, ignoreDemoMode = false, ...props },
+    ref,
+  ) => {
+    const clientConfig = useClientConfig();
+    spinner ||= <LoadingSpinner />;
+    if (!ignoreDemoMode && clientConfig.demoMode) {
+      disabled = true;
+    } else if (disabled !== undefined) {
+      disabled ||= loading;
+    } else if (loading) {
+      disabled = true;
+    }
+    return (
+      <Button ref={ref} {...props} disabled={disabled}>
+        {loading ? spinner : children}
+      </Button>
+    );
+  },
+);
+ActionButton.displayName = "ActionButton";
+
+export { ActionButton };