fix: hoist TooltipProvider to app root, remove per-component instances

spa/src/components/time-ago.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { timeAgo, shortDate } from "@/lib/date"
 
 type TimeAgoProps = {
@@ -8,13 +8,11 @@ type TimeAgoProps = {
 
 export function TimeAgo({ date, className }: TimeAgoProps) {
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <time dateTime={date} className={className}>{timeAgo(date)}</time>
-        </TooltipTrigger>
-        <TooltipContent>{shortDate(date)}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <time dateTime={date} className={className}>{timeAgo(date)}</time>
+      </TooltipTrigger>
+      <TooltipContent>{shortDate(date)}</TooltipContent>
+    </Tooltip>
   )
 }

spa/src/components/watch-medium-badge.tsx

@@ -1,11 +1,6 @@
 import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 import { WATCH_MEDIUMS } from "@/lib/watch-mediums"
 
@@ -22,15 +17,13 @@ export function WatchMediumBadge({ medium, className }: WatchMediumBadgeProps) {
   const Icon = entry.icon
 
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button type="button" variant="ghost" size="icon" className={cn("size-6", className)} aria-label={t(entry.labelKey)}>
-            <Icon className="size-3.5 text-muted-foreground" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{t(entry.labelKey)}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button type="button" variant="ghost" size="icon" className={cn("size-6", className)} aria-label={t(entry.labelKey)}>
+          <Icon className="size-3.5 text-muted-foreground" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{t(entry.labelKey)}</TooltipContent>
+    </Tooltip>
   )
 }

spa/src/components/watch-medium-picker.tsx

@@ -1,11 +1,6 @@
 import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 import { WATCH_MEDIUMS } from "@/lib/watch-mediums"
 
@@ -22,34 +17,32 @@ export function WatchMediumPicker({ value, onChange }: WatchMediumPickerProps) {
       <p className="mb-2 text-xs uppercase tracking-wide text-muted-foreground">
         {t("watchMedium.label")}
       </p>
-      <TooltipProvider>
-        <div className="flex flex-wrap gap-1.5">
-          {WATCH_MEDIUMS.map(({ value: val, icon: Icon, labelKey }) => {
-            const selected = value === val
-            return (
-              <Tooltip key={val}>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    className={cn(
-                      "size-8",
-                      selected && "border-[var(--aero-primary)] bg-[var(--aero-primary)] text-white shadow-[0_0_8px_var(--aero-primary-glow)]",
-                    )}
-                    aria-label={t(labelKey)}
-                    aria-pressed={selected}
-                    onClick={() => onChange(selected ? undefined : val)}
-                  >
-                    <Icon className="size-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent sideOffset={4}>{t(labelKey)}</TooltipContent>
-              </Tooltip>
-            )
-          })}
-        </div>
-      </TooltipProvider>
+      <div className="flex flex-wrap gap-1.5">
+        {WATCH_MEDIUMS.map(({ value: val, icon: Icon, labelKey }) => {
+          const selected = value === val
+          return (
+            <Tooltip key={val}>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className={cn(
+                    "size-8",
+                    selected && "border-[var(--aero-primary)] bg-[var(--aero-primary)] text-white shadow-[0_0_8px_var(--aero-primary-glow)]",
+                  )}
+                  aria-label={t(labelKey)}
+                  aria-pressed={selected}
+                  onClick={() => onChange(selected ? undefined : val)}
+                >
+                  <Icon className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent sideOffset={4}>{t(labelKey)}</TooltipContent>
+            </Tooltip>
+          )
+        })}
+      </div>
     </div>
   )
 }

spa/src/routes/__root.tsx

@@ -1,5 +1,6 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router"
 import { ThemeProvider } from "@/components/theme-provider"
+import { TooltipProvider } from "@/components/ui/tooltip"
 
 export const Route = createRootRoute({
   component: RootLayout,
@@ -8,7 +9,9 @@ export const Route = createRootRoute({
 function RootLayout() {
   return (
     <ThemeProvider>
-      <Outlet />
+      <TooltipProvider>
+        <Outlet />
+      </TooltipProvider>
     </ThemeProvider>
   )
 }