Restructure toolbar and header: lang dropdown left, app name in brand

Move language select to the left of the toolbar. Add lowercase "invoice"
app name next to the squircle logo in the brand section.

https://claude.ai/code/session_01MkM7p8Us3L8YAfLKGA13NS
This commit is contained in:
Claude 2026-06-08 04:24:39 +00:00
parent 195e61794d
commit b06500512a
No known key found for this signature in database

View file

@ -157,6 +157,7 @@
border-bottom: 1px solid var(--border);
}
.kb-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kb-brand .org { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-soft); }
.kb-brand .logo {
height: 28px; width: 28px; flex: 0 0 28px; border-radius: 7px;
display: grid; place-items: center; overflow: hidden; opacity: .82;
@ -352,16 +353,15 @@
<!-- Utility toolbar -->
<div class="kb-toolbar" id="lang-bar">
<div id="lang-part" style="display:none">
<select id="lang-sel" class="kb-select" style="width:auto;padding:5px 28px 5px 8px;font-size:var(--fs-small)"></select>
</div>
<div class="spacer"></div>
<div class="kb-seg" role="group" aria-label="Text size">
<button id="sz-down" onclick="bumpZoom(-1)" aria-label="Smaller text">A</button>
<button id="sz-up" onclick="bumpZoom(1)" aria-label="Larger text">A+</button>
</div>
<span id="sz-label" style="font-size:12px;color:var(--text-muted);font-family:var(--font-mono)">100%</span>
<div class="spacer"></div>
<div id="lang-part" class="kb-seg" role="group" aria-label="Language" style="display:none">
<label id="lbl-language" for="lang-sel" style="padding:5px 10px;font-size:var(--fs-small);font-weight:600;color:var(--text-muted)">Language</label>
<select id="lang-sel" class="kb-select" style="width:auto;border:0;box-shadow:none;background:transparent;padding:5px 24px 5px 4px"></select>
</div>
<button class="kb-iconbtn" id="btn-theme" onclick="toggleTheme()" title="Toggle light/dark" aria-label="Toggle dark mode">
<svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor">
<path d="M8 1.5a6.5 6.5 0 1 0 0 13A6.5 6.5 0 0 0 8 1.5zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
@ -383,6 +383,7 @@
<path d="M18.5 33 H29.5" stroke="#fff" stroke-width="3.2" stroke-linecap="round"/>
</svg>
</span>
<span class="org">invoice</span>
</div>
<div class="kb-doctitle">
<h1 id="inv-title">Invoice</h1>