From 0151d7a16c0ef01b9bed240dd058256804e6c13d Mon Sep 17 00:00:00 2001
From: ddidderr <ddidderr@paul.network>
Date: Thu, 21 May 2026 19:29:31 +0200
Subject: [PATCH] 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
---
 .../src/components/topbar/DirectoryButton.tsx |  1 -
 .../src/components/topbar/TopBar.tsx          |  6 +++--
 .../src/styles/launcher.css                   | 23 ++++++-------------
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/crates/lanspread-tauri-deno-ts/src/components/topbar/DirectoryButton.tsx b/crates/lanspread-tauri-deno-ts/src/components/topbar/DirectoryButton.tsx
index 555ccd2..881218b 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/topbar/DirectoryButton.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/topbar/DirectoryButton.tsx
@@ -23,7 +23,6 @@ export const DirectoryButton = ({ path, exists, onClick }: Props) => {
         >
             <Icon.folder />
             <span className="dirbtn-label">{label}</span>
-            <span className="dirbtn-status-dot" aria-hidden="true" />
         </button>
     );
 };
diff --git a/crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx b/crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx
index 5026e87..33987f7 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx
@@ -51,8 +51,10 @@ export const TopBar = ({
             <div className="topbar-right-lead">
                 <SortMenu value={sort} onChange={setSort} />
             </div>
-            <DirectoryButton path={gameDir} exists={gameDirExists} onClick={onPickDirectory} />
-            <KebabMenu items={kebabItems} />
+            <div className="topbar-right-tail">
+                <DirectoryButton path={gameDir} exists={gameDirExists} onClick={onPickDirectory} />
+                <KebabMenu items={kebabItems} />
+            </div>
         </div>
     </header>
 );
diff --git a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
index 7a29a19..7d0dadf 100644
--- a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
+++ b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
@@ -107,6 +107,12 @@
   align-items: center;
   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 —
    collapse the three zones into a single left-to-right flowing row. */
@@ -384,7 +390,7 @@
   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. */
 .dirbtn {
   position: relative;
@@ -414,21 +420,6 @@
 .dirbtn-label {
   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 {
   border-color: color-mix(in srgb, var(--danger) 35%, var(--bd-1));
 }