JezzWTF/phokus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fix tile tooltip + folder picker

Browse Source 
- Tooltips now shows their correct px size on hovering

- Remove trailing `\` from drive letter in folder picker UI
This commit is contained in:
LyAhn
2026-07-03 23:26:10 +01:00
parent 3ab9357d6f
commit e374ff6b02
2 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FolderPickerModal.tsx
+1 -1
View File
@@ -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 [
src/components/Toolbar.tsx
+22 -17
View File
@@ -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>