style(ui): match game-folder topbar design

Follow the latest top-bar spec for the Game Folder control. The button stays
as only the folder icon and short label, with the full path in tooltip and aria
text, and now sits in the app-level control group with the kebab menu on the
far-right edge of the wide top bar.

This keeps Sort as the right-zone lead control next to the centered search
cluster while treating Game Folder and the kebab menu as a tight trailing pair.
The narrow fallback still flows in source order: sort, game folder, kebab.

Test Plan:
- git diff --check
- rg -n "dirbtn-status-dot|status dot|green status|red status" crates/lanspread-tauri-deno-ts/src
- just frontend-test
- just build
This commit is contained in:
2026-05-21 19:29:31 +02:00
parent 31ace174e3
commit 0151d7a16c
3 changed files with 11 additions and 19 deletions
@@ -23,7 +23,6 @@ export const DirectoryButton = ({ path, exists, onClick }: Props) => {
> >
<Icon.folder /> <Icon.folder />
<span className="dirbtn-label">{label}</span> <span className="dirbtn-label">{label}</span>
<span className="dirbtn-status-dot" aria-hidden="true" />
</button> </button>
); );
}; };
@@ -51,8 +51,10 @@ export const TopBar = ({
<div className="topbar-right-lead"> <div className="topbar-right-lead">
<SortMenu value={sort} onChange={setSort} /> <SortMenu value={sort} onChange={setSort} />
</div> </div>
<div className="topbar-right-tail">
<DirectoryButton path={gameDir} exists={gameDirExists} onClick={onPickDirectory} /> <DirectoryButton path={gameDir} exists={gameDirExists} onClick={onPickDirectory} />
<KebabMenu items={kebabItems} /> <KebabMenu items={kebabItems} />
</div> </div>
</div>
</header> </header>
); );
@@ -107,6 +107,12 @@
align-items: center; align-items: center;
min-width: 0; min-width: 0;
} }
.topbar-right-tail {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
/* Below ~1100px of launcher width the geometric centering stops reading — /* Below ~1100px of launcher width the geometric centering stops reading —
collapse the three zones into a single left-to-right flowing row. */ collapse the three zones into a single left-to-right flowing row. */
@@ -384,7 +390,7 @@
color: var(--accent); color: var(--accent);
} }
/* Game-folder button: icon + short label + status dot. /* Game-folder button: icon + short label.
Full path lives in tooltip + aria-label, not on-screen. */ Full path lives in tooltip + aria-label, not on-screen. */
.dirbtn { .dirbtn {
position: relative; position: relative;
@@ -414,21 +420,6 @@
.dirbtn-label { .dirbtn-label {
line-height: 1; line-height: 1;
} }
.dirbtn-status-dot {
width: 8px;
height: 8px;
margin-left: 2px;
border-radius: 999px;
flex-shrink: 0;
}
.dirbtn-set .dirbtn-status-dot {
background: var(--ok);
box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 70%, transparent);
}
.dirbtn-unset .dirbtn-status-dot {
background: var(--danger);
box-shadow: 0 0 6px color-mix(in srgb, var(--danger) 70%, transparent);
}
.dirbtn-unset { .dirbtn-unset {
border-color: color-mix(in srgb, var(--danger) 35%, var(--bd-1)); border-color: color-mix(in srgb, var(--danger) 35%, var(--bd-1));
} }