From e374ff6b028b6436ba33c73dc975e18312e67136 Mon Sep 17 00:00:00 2001
From: LyAhn <admin@jezz.wtf>
Date: Fri, 3 Jul 2026 23:26:10 +0100
Subject: [PATCH] fix(ui): fix tile tooltip + folder picker

- Tooltips now shows their correct px size on hovering

- Remove trailing `\` from drive letter in folder picker UI
---
 src/components/FolderPickerModal.tsx |  2 +-
 src/components/Toolbar.tsx           | 39 ++++++++++++++++------------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/FolderPickerModal.tsx b/src/components/FolderPickerModal.tsx
index 4b46aaf..a437c97 100644
--- a/src/components/FolderPickerModal.tsx
+++ b/src/components/FolderPickerModal.tsx
@@ -41,7 +41,7 @@ function buildBreadcrumbs(path: string | null): { label: string; path: string |
   const windowsDrive = normalized.match(/^[A-Za-z]:/);
 
   if (windowsDrive) {
-    const drive = windowsDrive[0] + "\\";
+    const drive = windowsDrive[0];
     const rest = normalized.slice(2).split(/[\\/]+/).filter(Boolean);
     let current = drive;
     return [
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 42dd5aa..16b2d0b 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -187,7 +187,6 @@ export function Toolbar() {
 
   const selectedFolder = folders.find((folder) => folder.id === selectedFolderId);
   const title = collectionTitle ?? (selectedFolder ? selectedFolder.name : "All Media");
-  const tileSize = tileSizeForZoom(zoomPreset);
   const sortOptions = getSortOptions(mediaFilter);
   const hasActiveSearch = search.trim().length > 0;
   const parsedSearch = parseSearchValue(composeSearchValue(searchCommand, searchQuery));
@@ -439,22 +438,28 @@ export function Toolbar() {
 
         {/* Zoom */}
         <div className="flex items-center rounded-lg border border-white/8 overflow-hidden light-theme:border-gray-700/40">
-          {(["compact", "comfortable", "detail"] as const).map((preset, i) => (
-            <Tooltip key={preset} label={`${tileSize}px tiles`} followCursor>
-              <button
-                className={`px-2.5 py-1.5 text-xs font-medium transition-colors ${
-                  i > 0 ? "border-l border-white/8" : ""
-                } ${
-                  zoomPreset === preset
-                    ? "bg-white/10 text-white light-theme:bg-gray-900 light-theme:text-white"
-                    : "text-gray-500 hover:text-gray-200 hover:bg-white/5 light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
-                }`}
-                onClick={() => setZoomPreset(preset)}
-              >
-                {preset === "compact" ? "S" : preset === "comfortable" ? "M" : "L"}
-              </button>
-            </Tooltip>
-          ))}
+          {(["compact", "comfortable", "detail"] as const).map((preset, i) => {
+            const presetSize = tileSizeForZoom(preset);
+            const presetLabel =
+              preset === "compact" ? "" : preset === "comfortable" ? "" : "";
+            return (
+              <Tooltip key={preset} label={`${presetLabel} (${presetSize}px tiles)`} followCursor>
+                <button
+                  aria-label={`${presetLabel} (${presetSize}px tiles)`}
+                  className={`px-2.5 py-1.5 text-xs font-medium transition-colors ${
+                    i > 0 ? "border-l border-white/8" : ""
+                  } ${
+                    zoomPreset === preset
+                      ? "bg-white/10 text-white light-theme:bg-gray-900 light-theme:text-white"
+                      : "text-gray-500 hover:text-gray-200 hover:bg-white/5 light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
+                  }`}
+                  onClick={() => setZoomPreset(preset)}
+                >
+                  {preset === "compact" ? "S" : preset === "comfortable" ? "M" : "L"}
+                </button>
+              </Tooltip>
+            );
+          })}
         </div>
       </div>