From 9ce1dc33bfcd1a8b5baed01879b3c879a94e7cf1 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Wed, 22 Apr 2026 19:48:08 +0300
Subject: [PATCH] feat(ui): restyle enhanced header locale picker as LED-accent
 badge

---
 server/src/ledgrab/static/css/layout.css | 55 ++++++++++++++++++++++++
 server/src/ledgrab/static/css/mobile.css | 10 +++++
 2 files changed, 65 insertions(+)

diff --git a/server/src/ledgrab/static/css/layout.css b/server/src/ledgrab/static/css/layout.css
index 3f3ad82..4d984a6 100644
--- a/server/src/ledgrab/static/css/layout.css
+++ b/server/src/ledgrab/static/css/layout.css
@@ -100,6 +100,61 @@ h2 {
     background: var(--bg-secondary);
 }
 
+/* ── Header locale picker (post IconSelect enhancement) ────────────────────
+   The hidden <select.header-locale> is enhanced into a trigger button at
+   runtime. Inside the toolbar, re-skin it to match .header-btn so it reads
+   as a peer of the icon buttons, with the 2-letter code rendered as a small
+   LED-style accent badge in Orbitron — same display font as the brand mark. */
+.header-toolbar .icon-select-trigger {
+    width: auto;
+    gap: 6px;
+    padding: 3px 6px;
+    border: none;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+    transition: color 0.2s, background 0.2s;
+}
+
+.header-toolbar .icon-select-trigger:hover {
+    color: var(--text-color);
+    background: var(--bg-secondary);
+    border-color: transparent;
+}
+
+.header-toolbar .icon-select-trigger-icon {
+    font-family: 'Orbitron', sans-serif;
+    font-size: 0.65rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    color: var(--primary-color);
+    padding: 3px 5px;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
+    line-height: 1;
+}
+
+.header-toolbar .icon-select-trigger-icon > span {
+    font-weight: inherit;
+}
+
+.header-toolbar .icon-select-trigger-label {
+    flex: 0 1 auto;
+    font-weight: 500;
+    font-size: 0.72rem;
+    letter-spacing: 0.01em;
+    margin: 0;
+}
+
+.header-toolbar .icon-select-trigger-arrow {
+    font-size: 0.6rem;
+    opacity: 0.55;
+    margin-left: 1px;
+}
+
 #server-version {
     font-family: 'Orbitron', sans-serif;
     font-size: 0.65rem;
diff --git a/server/src/ledgrab/static/css/mobile.css b/server/src/ledgrab/static/css/mobile.css
index f927bcd..9a0996e 100644
--- a/server/src/ledgrab/static/css/mobile.css
+++ b/server/src/ledgrab/static/css/mobile.css
@@ -140,6 +140,16 @@
         max-width: 48px;
     }
 
+    /* Collapse the enhanced locale trigger to just the 2-letter badge on
+       narrow screens, matching the compact footprint of the icon buttons. */
+    .header-toolbar .icon-select-trigger-label {
+        display: none;
+    }
+    .header-toolbar .icon-select-trigger {
+        gap: 4px;
+        padding: 3px 5px;
+    }
+
     h1 {
         font-size: 1.1rem;
     }