From 076996a4704245deea5b59c70204550289f32e53 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 8 Jun 2026 04:53:02 +0000
Subject: [PATCH] Move wordmark to doctitle; show period instead of today's
 date
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove app-wordmark from toolbar; place it in kb-doctitle where
  the h1 "Reimbursement" was, at the same font size (--fs-h1)
- Glyph now appears to the right of "reimburse"
- Replace "Claim · today's date" with the user's selected period
  (from – to), updated live as dates are changed

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
---
 app/index.html | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/index.html b/app/index.html
index 6c375f0..3b31509 100644
--- a/app/index.html
+++ b/app/index.html
@@ -334,11 +334,11 @@ body{
 
 /* ── App wordmark (toolbar left) ──────────────────────────────────────────── */
 .app-wordmark{
-  display:inline-flex;align-items:center;gap:6px;
-  font:600 var(--fs-small)/1 var(--font-sans);
-  color:var(--text-muted);letter-spacing:-0.01em;user-select:none;
+  display:inline-flex;align-items:center;gap:8px;
+  font:700 var(--fs-h1)/1 var(--font-sans);
+  color:var(--text);letter-spacing:-0.01em;user-select:none;
 }
-.app-wordmark svg{width:14px;height:14px;flex:0 0 14px;opacity:.75;}
+.app-wordmark svg{width:22px;height:22px;flex:0 0 22px;opacity:.55;}
 /* Language select in toolbar */
 .kb-toolbar-sel{
   font:600 var(--fs-small)/1 var(--font-sans);color:var(--text-muted);
@@ -705,10 +705,6 @@ function render() {
   // ── Toolbar ──────────────────────────────────────────────────────────────
   const toolbar = el('div', {className:'kb-toolbar'});
 
-  // Wordmark (glyph + "reimburse")
-  const wordmark = el('div', {className:'app-wordmark'});
-  wordmark.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="7.5" y="14" width="33" height="20" rx="3.2" stroke-width="2.8"/><circle cx="24" cy="24" r="4.6" stroke-width="2.6"/><path d="M12.7 21.4V26.6M35.3 21.4V26.6" stroke-width="2.6"/></svg>reimburse`;
-  toolbar.appendChild(wordmark);
   toolbar.appendChild(el('div', {className:'spacer'}));
 
   // Language selector (only when CFG.languages has >1 entry)
@@ -782,11 +778,19 @@ function render() {
   orgSpan.appendChild(el('small', null, 'Expense reimbursement'));
   brand.append(logoBox, orgSpan);
 
-  const now = new Date();
-  const dateStr = now.toLocaleDateString('en-GB', {day:'numeric', month:'long', year:'numeric'});
   const docTitle = el('div', {className:'kb-doctitle'});
-  docTitle.appendChild(el('h1', null, 'Reimbursement'));
-  docTitle.appendChild(el('div', {className:'meta'}, `Claim · ${dateStr}`));
+  const wordmark = el('div', {className:'app-wordmark'});
+  wordmark.innerHTML = `reimburse<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="7.5" y="14" width="33" height="20" rx="3.2" stroke-width="2.8"/><circle cx="24" cy="24" r="4.6" stroke-width="2.6"/><path d="M12.7 21.4V26.6M35.3 21.4V26.6" stroke-width="2.6"/></svg>`;
+  const periodMeta = el('div', {className:'meta'});
+  function updatePeriodMeta() {
+    const from = state.periodFrom, to = state.periodTo;
+    if (from && to) periodMeta.textContent = `${from} – ${to}`;
+    else if (from) periodMeta.textContent = `From ${from}`;
+    else if (to) periodMeta.textContent = `Until ${to}`;
+    else periodMeta.textContent = 'No period selected';
+  }
+  updatePeriodMeta();
+  docTitle.append(wordmark, periodMeta);
   hdr.append(brand, docTitle);
   wrap.appendChild(hdr);
 
@@ -806,11 +810,11 @@ function render() {
 
   const fromInput = el('input', {className:'kb-input', type:'date'});
   fromInput.value = state.periodFrom;
-  fromInput.addEventListener('change', () => { state.periodFrom = fromInput.value; });
+  fromInput.addEventListener('change', () => { state.periodFrom = fromInput.value; updatePeriodMeta(); });
 
   const toInput = el('input', {className:'kb-input', type:'date'});
   toInput.value = state.periodTo;
-  toInput.addEventListener('change', () => { state.periodTo = toInput.value; });
+  toInput.addEventListener('change', () => { state.periodTo = toInput.value; updatePeriodMeta(); });
 
   const baseCurDD = makeCDD(CFG.currencies || [], state.baseCurrency, code => {
     state.baseCurrency = code;