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>
   )
 }

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,7 +17,6 @@ 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)}>
@@ -31,6 +25,5 @@ export function WatchMediumBadge({ medium, className }: WatchMediumBadgeProps) {
       </TooltipTrigger>
       <TooltipContent>{t(entry.labelKey)}</TooltipContent>
     </Tooltip>
-    </TooltipProvider>
   )
 }

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,7 +17,6 @@ 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
@@ -49,7 +43,6 @@ export function WatchMediumPicker({ value, onChange }: WatchMediumPickerProps) {
           )
         })}
       </div>
-      </TooltipProvider>
     </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>
+      <TooltipProvider>
         <Outlet />
+      </TooltipProvider>
     </ThemeProvider>
   )
 }