Scott.Idem/Cortex-Inara
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI redesign — compact mode select, consolidated header nav

Browse Source 
Header:
- Sessions, ⚙ context panel, ≡ settings dropdown (Files, Account,
  Sign Out), and ❓ help — down from 6+ individual buttons
- Responsive: flex-row on desktop, wraps on mobile with labels hidden

Footer (input area):
- 4-way mode select replaces the button row — shows only the active
  mode as [icon] [label] ▲; click opens an upward dropdown
- Options sorted by MRU: most recently used floats to the bottom
  (closest to the trigger button) for quick re-selection
- Current mode marked with ✓
- Note mode shows a small prv/pub sub-toggle below the select button
- Mobile: textarea on top (full width), mode select + send on one row

Mode state consolidated from 3 booleans into a single current_mode
variable with localStorage persistence and MRU tracking.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-26 22:08:33 -04:00
parent fa04b5e6b0
commit 6cf10d2755
3 changed files with 330 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
cortex/static/index.html
View File

@@ -27,14 +27,23 @@
<div class="subtitle">Cortex · Local</div>
<div class="persona-dropdown" id="persona-dropdown"></div>
</div>
<button id="sessions-btn" class="hdr-btn">Sessions</button>
<button id="files-btn" class="hdr-btn">Files</button>
<button id="ctx-open-btn" class="hdr-btn" title="Settings">⚙<span class="tier-badge">2</span></button>
<a href="/help" class="hdr-btn" title="Help &amp; reference" style="text-decoration:none">?</a>
<a id="account-btn" href="/settings" class="hdr-btn" title="Account settings" style="text-decoration:none">👤</a>
<form method="POST" action="/logout" style="margin:0">
<button type="submit" class="hdr-btn" title="Sign out" id="logout-btn">⏏</button>
</form>
<nav id="hdr-nav">
<button id="sessions-btn" class="hdr-btn" title="Sessions">💬 <span class="btn-label">Sessions</span></button>
<button id="ctx-open-btn" class="hdr-btn" title="Context &amp; memory">⚙<span class="tier-badge">2</span></button>
<div class="hdr-dropdown-wrap" id="settings-wrap">
<button class="hdr-btn" id="settings-btn" title="Settings">≡</button>
<div class="hdr-dropdown" id="settings-dropdown">
<button id="files-btn" class="hdr-dd-item">📁 Files</button>
<a href="/settings" class="hdr-dd-item">👤 Account</a>
<div class="hdr-dd-divider"></div>
<form method="POST" action="/logout" style="margin:0">
<button type="submit" class="hdr-dd-item">⏏ Sign Out</button>
</form>
</div>
</div>
<a href="/help" class="hdr-btn" title="Help &amp; reference" style="text-decoration:none">❓</a>
</nav>
<div id="sessions-panel"></div>
@@ -79,6 +88,12 @@
<div class="ctx-row">
<button id="font-size-btn" class="ctx-btn" title="Cycle font size: normal → large → small">Aa</button>
<button id="theme-btn" class="ctx-btn" title="Toggle light/dark mode">☾</button>
<select id="height-sel" class="ctx-btn" title="Max input height" style="cursor:pointer">
<option value="120">5 lines</option>
<option value="240">10 lines</option>
<option value="480">20 lines</option>
</select>
<button id="enter-toggle" class="ctx-btn" title="Toggle send shortcut">⌃↵</button>
</div>
</div>
</div>
@@ -116,23 +131,20 @@
<div id="session-id"></div>
<div id="input-area">
<!-- Mode select — compact dropdown, opens upward, MRU sorted -->
<div id="mode-select">
<button id="mode-select-btn" title="Input mode">
<span id="mode-icon">💬</span>
<span id="mode-label">Chat</span>
<span class="mode-arrow">▲</span>
</button>
<!-- Populated dynamically in MRU order -->
<div id="mode-dropdown"></div>
<!-- Note visibility sub-toggle — only shown when note mode is active -->
<button id="note-vis-btn" title="Toggle note visibility (private / public)">prv</button>
</div>
<textarea id="input" rows="1" placeholder="Message…" autofocus></textarea>
<div id="right-col">
<!-- Semi-hidden: appear when content > ~3 lines -->
<div id="height-row">
<span>↕</span>
<select id="height-sel">
<option value="120">5 lines</option>
<option value="240">10 lines</option>
<option value="480">20 lines</option>
</select>
</div>
<button id="enter-toggle" title="Toggle send shortcut">⌃↵</button>
<!-- Note mode controls -->
<button id="note-type-btn">private</button>
<button id="note-btn">Note</button>
<button id="otr-btn" title="Off the record — not logged or distilled into memory">OTR</button>
<button id="agent-mode-btn" title="Agent mode — Gemini tool loop + Claude response">Agent</button>
<div id="send-col">
<button id="send">Send</button>
<button id="stop">Stop</button>
</div>