From 994691b02515dfb579a5c3618631065bd76b9e4b Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 7 Apr 2024 19:02:52 +0100
Subject: refactor(web): Move the tooltip provider to the root of the app

---
 .../web/components/dashboard/preview/ActionBar.tsx | 117 ++++++++++-----------
 .../dashboard/preview/BookmarkPreview.tsx          |  45 ++++----
 apps/web/components/ui/info-tooltip.tsx            |  26 ++---
 apps/web/lib/providers.tsx                         |   3 +-
 4 files changed, 89 insertions(+), 102 deletions(-)

(limited to 'apps')

diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index f2e3023e..45d67b34 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -2,7 +2,6 @@ import { ActionButton } from "@/components/ui/action-button";
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
@@ -52,64 +51,62 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
     });
 
   return (
-    <TooltipProvider>
-      <div className="flex items-center justify-center gap-3">
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger>
-            <ActionButton
-              variant="none"
-              className="size-14 rounded-full bg-background"
-              loading={pendingFav}
-              onClick={() => {
-                favBookmark({
-                  bookmarkId: bookmark.id,
-                  favourited: !bookmark.favourited,
-                });
-              }}
-            >
-              <FavouritedActionIcon favourited={bookmark.favourited} />
-            </ActionButton>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">
-            {bookmark.favourited ? "Un-favourite" : "Favourite"}
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger>
-            <ActionButton
-              variant="none"
-              loading={pendingArchive}
-              className="size-14 rounded-full bg-background"
-              onClick={() => {
-                archiveBookmark({
-                  bookmarkId: bookmark.id,
-                  archived: !bookmark.archived,
-                });
-              }}
-            >
-              <ArchivedActionIcon archived={bookmark.archived} />
-            </ActionButton>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">
-            {bookmark.archived ? "Un-archive" : "Archive"}
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger>
-            <ActionButton
-              loading={pendingDeletion}
-              className="size-14 rounded-full bg-background"
-              variant="none"
-              onClick={() => {
-                deleteBookmark({ bookmarkId: bookmark.id });
-              }}
-            >
-              <Trash2 />
-            </ActionButton>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">Delete</TooltipContent>
-        </Tooltip>
-      </div>
-    </TooltipProvider>
+    <div className="flex items-center justify-center gap-3">
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger>
+          <ActionButton
+            variant="none"
+            className="size-14 rounded-full bg-background"
+            loading={pendingFav}
+            onClick={() => {
+              favBookmark({
+                bookmarkId: bookmark.id,
+                favourited: !bookmark.favourited,
+              });
+            }}
+          >
+            <FavouritedActionIcon favourited={bookmark.favourited} />
+          </ActionButton>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          {bookmark.favourited ? "Un-favourite" : "Favourite"}
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger>
+          <ActionButton
+            variant="none"
+            loading={pendingArchive}
+            className="size-14 rounded-full bg-background"
+            onClick={() => {
+              archiveBookmark({
+                bookmarkId: bookmark.id,
+                archived: !bookmark.archived,
+              });
+            }}
+          >
+            <ArchivedActionIcon archived={bookmark.archived} />
+          </ActionButton>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          {bookmark.archived ? "Un-archive" : "Archive"}
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger>
+          <ActionButton
+            loading={pendingDeletion}
+            className="size-14 rounded-full bg-background"
+            variant="none"
+            onClick={() => {
+              deleteBookmark({ bookmarkId: bookmark.id });
+            }}
+          >
+            <Trash2 />
+          </ActionButton>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Delete</TooltipContent>
+      </Tooltip>
+    </div>
   );
 }
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index bd7881a3..cf8bc2d8 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -8,7 +8,6 @@ import {
   Tooltip,
   TooltipContent,
   TooltipPortal,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import {
@@ -41,18 +40,16 @@ function ContentLoading() {
 
 function CreationTime({ createdAt }: { createdAt: Date }) {
   return (
-    <TooltipProvider>
-      <Tooltip delayDuration={0}>
-        <TooltipTrigger asChild>
-          <span className="flex w-fit gap-2">
-            <CalendarDays /> {dayjs(createdAt).fromNow()}
-          </span>
-        </TooltipTrigger>
-        <TooltipPortal>
-          <TooltipContent>{createdAt.toLocaleString()}</TooltipContent>
-        </TooltipPortal>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <span className="flex w-fit gap-2">
+          <CalendarDays /> {dayjs(createdAt).fromNow()}
+        </span>
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>{createdAt.toLocaleString()}</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
   );
 }
 
@@ -65,18 +62,16 @@ function LinkHeader({ bookmark }: { bookmark: ZBookmark }) {
 
   return (
     <div className="flex w-full flex-col items-center justify-center space-y-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <p className="line-clamp-2 text-center text-lg">{title}</p>
-          </TooltipTrigger>
-          <TooltipPortal>
-            <TooltipContent side="bottom" className="w-96">
-              {title}
-            </TooltipContent>
-          </TooltipPortal>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <p className="line-clamp-2 text-center text-lg">{title}</p>
+        </TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent side="bottom" className="w-96">
+            {title}
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
       <Link
         href={bookmark.content.url}
         className="mx-auto flex gap-2 text-gray-400"
diff --git a/apps/web/components/ui/info-tooltip.tsx b/apps/web/components/ui/info-tooltip.tsx
index abaf8197..eeace885 100644
--- a/apps/web/components/ui/info-tooltip.tsx
+++ b/apps/web/components/ui/info-tooltip.tsx
@@ -1,7 +1,6 @@
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -19,20 +18,15 @@ export default function InfoTooltip({
   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>
+    <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>
   );
 }
diff --git a/apps/web/lib/providers.tsx b/apps/web/lib/providers.tsx
index b700d0c1..60f30931 100644
--- a/apps/web/lib/providers.tsx
+++ b/apps/web/lib/providers.tsx
@@ -3,6 +3,7 @@
 import type { Session } from "next-auth";
 import React, { useState } from "react";
 import { ThemeProvider } from "@/components/theme-provider";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { httpBatchLink, loggerLink } from "@trpc/client";
 import { SessionProvider } from "next-auth/react";
@@ -80,7 +81,7 @@ export default function Providers({
               enableSystem
               disableTransitionOnChange
             >
-              {children}
+              <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
             </ThemeProvider>
           </QueryClientProvider>
         </api.Provider>
-- 
cgit v1.2.3-70-g09d2