refactor(ui): replace native app tooltips

Wrap app controls with the shared Tooltip component and use cursor-positioned tooltip placement for icon buttons, chips, path labels, and media controls.

Leave native title attributes on the window chrome buttons so Minimize, Maximize, and Close keep platform-style behavior.

src/components/FolderPickerModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { DirEntry, DirListing, FolderAddResult, useGalleryStore } from "../store";
+import { Tooltip } from "./Tooltip";
 
 function normalizePath(path: string): string {
   return path.replace(/\\/g, "/").replace(/\/+$/, "").toLowerCase();
@@ -95,17 +96,18 @@ function FolderRow({
         </svg>
       </button>
 
-      <button
-        type="button"
-        className="flex min-w-0 flex-1 items-center gap-2 text-left"
-        onClick={onNavigate}
-        title={entry.path}
-      >
-        <svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
-        </svg>
-        <span className="truncate text-sm">{entry.name}</span>
-      </button>
+      <Tooltip label={entry.path} anchorToCursor className="min-w-0 flex-1">
+        <button
+          type="button"
+          className="flex w-full min-w-0 items-center gap-2 text-left"
+          onClick={onNavigate}
+        >
+          <svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
+          </svg>
+          <span className="truncate text-sm">{entry.name}</span>
+        </button>
+      </Tooltip>
 
       {alreadyAdded ? (
         <span className="rounded-md border border-white/10 bg-white/[0.04] px-2 py-0.5 text-[11px] text-gray-500 light-theme:border-gray-700/40 light-theme:bg-gray-950">
@@ -113,16 +115,17 @@ function FolderRow({
         </span>
       ) : null}
 
-      <button
-        type="button"
-        className="rounded-md p-1 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
-        onClick={onNavigate}
-        title={entry.has_children ? "Open folder" : "No subfolders"}
-      >
-        <svg className={`h-4 w-4 ${entry.has_children ? "" : "opacity-45"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-        </svg>
-      </button>
+      <Tooltip label={entry.has_children ? "Open folder" : "No subfolders"} anchorToCursor>
+        <button
+          type="button"
+          className="rounded-md p-1 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
+          onClick={onNavigate}
+        >
+          <svg className={`h-4 w-4 ${entry.has_children ? "" : "opacity-45"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </Tooltip>
     </div>
   );
 }
@@ -164,30 +167,29 @@ function StagedFoldersPanel({
         ) : (
           <div className="space-y-2">
             {stagedPaths.map((path) => (
-              <div
-                key={path}
-                className="group flex min-h-12 items-center gap-2 rounded-md border border-white/[0.07] bg-white/[0.045] px-3 py-2 text-gray-200 transition-colors hover:border-white/15 hover:bg-white/[0.07] light-theme:border-gray-700/40 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
-                title={path}
-              >
-                <svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
-                </svg>
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium">{folderName(path)}</p>
-                  <p className="mt-0.5 truncate text-[11px] text-gray-600 light-theme:text-gray-500">{path}</p>
-                </div>
-                <button
-                  type="button"
-                  className="rounded-md p-1 text-gray-500 opacity-80 transition-colors hover:bg-white/[0.08] hover:text-white group-hover:opacity-100 light-theme:hover:bg-gray-700"
-                  onClick={() => onRemove(path)}
-                  aria-label={`Remove ${path} from folders to add`}
-                  title="Remove from folders to add"
-                >
-                  <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              <Tooltip key={path} label={path} anchorToCursor block>
+                <div className="group flex min-h-12 items-center gap-2 rounded-md border border-white/[0.07] bg-white/[0.045] px-3 py-2 text-gray-200 transition-colors hover:border-white/15 hover:bg-white/[0.07] light-theme:border-gray-700/40 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800">
+                  <svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
                   </svg>
-                </button>
-              </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">{folderName(path)}</p>
+                    <p className="mt-0.5 truncate text-[11px] text-gray-600 light-theme:text-gray-500">{path}</p>
+                  </div>
+                  <Tooltip label="Remove from folders to add" anchorToCursor>
+                    <button
+                      type="button"
+                      className="rounded-md p-1 text-gray-500 opacity-80 transition-colors hover:bg-white/[0.08] hover:text-white group-hover:opacity-100 light-theme:hover:bg-gray-700"
+                      onClick={() => onRemove(path)}
+                      aria-label={`Remove ${path} from folders to add`}
+                    >
+                      <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </Tooltip>
+                </div>
+              </Tooltip>
             ))}
           </div>
         )}
@@ -327,16 +329,17 @@ export function FolderPickerModal() {
               <p className="text-base font-semibold text-white">Add media folders</p>
               <p className="mt-1 text-xs text-gray-500 light-theme:text-gray-600">Choose folders from any location, then add them together.</p>
             </div>
-            <button
-              type="button"
-              className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
-              onClick={() => setFolderPickerOpen(false)}
-              title="Close folder picker"
-            >
-              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
+            <Tooltip label="Close folder picker" anchorToCursor>
+              <button
+                type="button"
+                className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
+                onClick={() => setFolderPickerOpen(false)}
+              >
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </Tooltip>
           </div>
         </header>
 
@@ -355,14 +358,15 @@ export function FolderPickerModal() {
                 {breadcrumbs.map((crumb, index) => (
                   <span key={`${crumb.path ?? "root"}-${index}`} className="flex min-w-0 items-center gap-1">
                     {index > 0 ? <span className="text-gray-700 light-theme:text-gray-400">/</span> : null}
-                    <button
-                      type="button"
-                      className="max-w-40 truncate rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white"
-                      onClick={() => setCurrentPath(crumb.path)}
-                      title={crumb.path ?? "Roots"}
-                    >
-                      {crumb.label}
-                    </button>
+                    <Tooltip label={crumb.path ?? "Roots"} anchorToCursor>
+                      <button
+                        type="button"
+                        className="max-w-40 truncate rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+                        onClick={() => setCurrentPath(crumb.path)}
+                      >
+                        {crumb.label}
+                      </button>
+                    </Tooltip>
                   </span>
                 ))}
               </nav>