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]:/); const windowsDrive = normalized.match(/^[A-Za-z]:/);
if (windowsDrive) { if (windowsDrive) {
const drive = windowsDrive[0] + "\\"; const drive = windowsDrive[0];
const rest = normalized.slice(2).split(/[\\/]+/).filter(Boolean); const rest = normalized.slice(2).split(/[\\/]+/).filter(Boolean);
let current = drive; let current = drive;
return [ return [
src/components/Toolbar.tsx
+9 -4
View File
@@ -187,7 +187,6 @@ export function Toolbar() {
const selectedFolder = folders.find((folder) => folder.id === selectedFolderId); const selectedFolder = folders.find((folder) => folder.id === selectedFolderId);
const title = collectionTitle ?? (selectedFolder ? selectedFolder.name : "All Media"); const title = collectionTitle ?? (selectedFolder ? selectedFolder.name : "All Media");
const tileSize = tileSizeForZoom(zoomPreset);
const sortOptions = getSortOptions(mediaFilter); const sortOptions = getSortOptions(mediaFilter);
const hasActiveSearch = search.trim().length > 0; const hasActiveSearch = search.trim().length > 0;
const parsedSearch = parseSearchValue(composeSearchValue(searchCommand, searchQuery)); const parsedSearch = parseSearchValue(composeSearchValue(searchCommand, searchQuery));
@@ -439,9 +438,14 @@ export function Toolbar() {
{/* Zoom */} {/* Zoom */}
<div className="flex items-center rounded-lg border border-white/8 overflow-hidden light-theme:border-gray-700/40"> <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) => ( {(["compact", "comfortable", "detail"] as const).map((preset, i) => {
<Tooltip key={preset} label={`${tileSize}px tiles`} followCursor> const presetSize = tileSizeForZoom(preset);
const presetLabel =
preset === "compact" ? "" : preset === "comfortable" ? "" : "";
return (
<Tooltip key={preset} label={`${presetLabel} (${presetSize}px tiles)`} followCursor>
<button <button
aria-label={`${presetLabel} (${presetSize}px tiles)`}
className={`px-2.5 py-1.5 text-xs font-medium transition-colors ${ className={`px-2.5 py-1.5 text-xs font-medium transition-colors ${
i > 0 ? "border-l border-white/8" : "" i > 0 ? "border-l border-white/8" : ""
} ${ } ${
@@ -454,7 +458,8 @@ export function Toolbar() {
{preset === "compact" ? "S" : preset === "comfortable" ? "M" : "L"} {preset === "compact" ? "S" : preset === "comfortable" ? "M" : "L"}
</button> </button>
</Tooltip> </Tooltip>
))} );
})}
</div> </div>
</div> </div>