ddidderr
059c1e7720
Implements the v2 design's game-folder button in the Tauri launcher. The previous control squeezed the full game-directory path into the top-bar button as truncated monospace (e.g. `…s/Desktop/eti_games_AFTER_LAN_2025`). In practice the leading ellipsis rarely showed the meaningful part of the path, ate horizontal space the new 3-zone top bar needs for its primary controls, and competed with the filter / search / sort cluster for attention. The button now communicates the *state* of the configuration at a glance — an icon + short label + colored status dot — while the full path moves into the native tooltip and `aria-label`, where it stays one mouseover (and screen-reader friendly) away. Two visual states, both 36 px tall and sharing the surface of the other top-bar controls: - **Set & valid** (`.dirbtn-set`) — label `Game folder`, green dot (`--ok`) with a soft glow, default border, tooltip = full path. - **Not set / invalid** (`.dirbtn-unset`) — label `Set game folder`, red dot (`--danger`) with a soft glow, a red-tinted border, and a faint red wash on hover so the bad state reads as "this is what you need to fix". Tooltip = `Please select a game folder`. `DirectoryButton` now takes `path: string | null` and picks the state from `!!(path && path.trim())`. The `aria-label` carries the full state in words (`Game folder: <path>` / `Set game folder`) so screen readers don't have to interpret the colored dot. Note: in the current `MainWindow`, `gameDir` is gated upstream — if no directory is selected, `NoDirectoryState` is shown instead of the top bar, so the unset state will only surface here if we later validate disk existence and clear `gameDir`. The button accepts a nullable path anyway, so it's ready when that check lands. `truncatePath` in `lib/format.ts` was the only caller-less helper left behind and is removed. Test Plan - `npx tsc --noEmit` from the frontend crate — clean. - `just frontend-test` — passes. - Manual: `just run`, pick a valid game directory, and confirm the top-bar button reads `Game folder` with a green dot; hovering it reveals the full path in the OS tooltip. Inspect the DOM and confirm `aria-label` reads `Game folder: <path>`. (The unset variant currently isn't surfaced by `MainWindow`; eyeball it via DevTools by toggling the `dirbtn-set` class to `dirbtn-unset`.)
26 lines
792 B
TypeScript
26 lines
792 B
TypeScript
const GB = 1024 * 1024 * 1024;
|
||
const MB = 1024 * 1024;
|
||
|
||
export const formatBytes = (bytes: number): string => {
|
||
if (bytes >= GB) return `${(bytes / GB).toFixed(1)} GB`;
|
||
if (bytes >= MB) return `${(bytes / MB).toFixed(0)} MB`;
|
||
return `${bytes} B`;
|
||
};
|
||
|
||
/**
|
||
* Format an ETI version stamp (YYYYMMDD) for display. Falls back to the raw
|
||
* string when it doesn't fit the expected shape.
|
||
*/
|
||
export const formatEtiVersion = (raw: string | undefined): string => {
|
||
if (!raw) return '—';
|
||
if (raw.length === 8 && /^\d{8}$/.test(raw)) {
|
||
return `${raw.slice(0, 4)}.${raw.slice(4, 6)}.${raw.slice(6, 8)}`;
|
||
}
|
||
return raw;
|
||
};
|
||
|
||
export const formatPlayers = (max?: number): string => {
|
||
if (!max || max <= 0) return '—';
|
||
return max === 1 ? '1' : `1–${max}`;
|
||
};
|