ui(web): Add a tooltip explaining what archived means

4 files changed, 60 insertions, 47 deletions

diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx
index 3c3520cc..b2b4df4f 100644
--- a/apps/web/app/dashboard/archive/page.tsx
+++ b/apps/web/app/dashboard/archive/page.tsx
@@ -1,9 +1,17 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
+import InfoTooltip from "@/components/ui/info-tooltip";
 
 export default async function ArchivedBookmarkPage() {
   return (
     <Bookmarks
-      header={<p className="text-2xl">🗄️ Archive</p>}
+      header={
+        <span className="flex gap-2">
+          <p className="text-2xl">🗄️ Archive</p>
+          <InfoTooltip size={17} className="my-auto" variant="explain">
+            <p>Archived bookmarks won&apos;t appear in the homepage</p>
+          </InfoTooltip>
+        </span>
+      }
       query={{ archived: true }}
       showDivider={true}
     />
diff --git a/apps/web/app/dashboard/tags/page.tsx b/apps/web/app/dashboard/tags/page.tsx
index 7afe691d..9f5038e7 100644
--- a/apps/web/app/dashboard/tags/page.tsx
+++ b/apps/web/app/dashboard/tags/page.tsx
@@ -1,13 +1,7 @@
 import Link from "next/link";
+import InfoTooltip from "@/components/ui/info-tooltip";
 import { Separator } from "@/components/ui/separator";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { api } from "@/server/api/client";
-import { Info } from "lucide-react";
 
 function TagPill({ name, count }: { name: string; count: number }) {
   return (
@@ -48,16 +42,9 @@ export default async function TagsPage() {
 
       <span className="flex items-center gap-2">
         <p className="text-lg">Your Tags</p>
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Info size={20} />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Tags that were attached at least once by you</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <InfoTooltip size={15} className="my-auto" variant="explain">
+          <p>Tags that were attached at least once by you</p>
+        </InfoTooltip>
       </span>
       <div className="flex flex-wrap gap-3">{tagsToPill(humanTags)}</div>
 
@@ -65,16 +52,9 @@ export default async function TagsPage() {
 
       <span className="flex items-center gap-2">
         <p className="text-lg">AI Tags</p>
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Info size={20} />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Tags that were only attached automatically (by AI)</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <InfoTooltip size={15} className="my-auto" variant="explain">
+          <p>Tags that were only attached automatically (by AI)</p>
+        </InfoTooltip>
       </span>
       <div className="flex flex-wrap gap-3">{tagsToPill(aiTags)}</div>
     </div>
diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index 6858255a..b9e46a30 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -2,20 +2,14 @@ import type { SubmitErrorHandler, SubmitHandler } from "react-hook-form";
 import { useEffect, useImperativeHandle, useRef } from "react";
 import { ActionButton } from "@/components/ui/action-button";
 import { Form, FormControl, FormItem } from "@/components/ui/form";
+import InfoTooltip from "@/components/ui/info-tooltip";
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { useClientConfig } from "@/lib/clientConfig";
 import { api } from "@/lib/trpc";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Info } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -97,18 +91,11 @@ export default function EditorCard({ className }: { className?: string }) {
       >
         <div className="flex justify-between">
           <p className="text-sm">NEW ITEM</p>
-          <TooltipProvider delayDuration={0}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Info size={15} />
-              </TooltipTrigger>
-              <TooltipContent className="w-52">
-                <p className="text-center">
-                  You can quickly focus on this field by pressing ⌘ + E
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <InfoTooltip size={15}>
+            <p className="text-center">
+              You can quickly focus on this field by pressing ⌘ + E
+            </p>
+          </InfoTooltip>
         </div>
         <Separator />
         <FormItem className="flex-1">
diff --git a/apps/web/components/ui/info-tooltip.tsx b/apps/web/components/ui/info-tooltip.tsx
new file mode 100644
index 00000000..abaf8197
--- /dev/null
+++ b/apps/web/components/ui/info-tooltip.tsx
@@ -0,0 +1,38 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { HelpCircle, Info } from "lucide-react";
+
+export default function InfoTooltip({
+  className,
+  children,
+  size,
+  variant = "tip",
+}: {
+  className?: string;
+  size?: number;
+  children?: React.ReactNode;
+  variant?: "tip" | "explain";
+}) {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          {variant === "tip" ? (
+            <Info className={cn("cursor-pointer", className)} size={size} />
+          ) : (
+            <HelpCircle
+              className={cn("cursor-pointer", className)}
+              size={size}
+            />
+          )}
+        </TooltipTrigger>
+        <TooltipContent>{children}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}