feat: Lucide SVG icons throughout main UI

Replace all emoji/unicode icons with Lucide SVG icons:
- Mode select dropdown: message-circle / pencil / lock / bot
- Send button: arrow-up (chat/OTR), pencil (note), zap (agent)
- Stop button: square icon
- Header nav already had Lucide SVGs; render_icons() now called at init

Add icon_html() + render_icons() helpers; update update_mode_ui() and
open_mode_dropdown() to use innerHTML + lucide.createIcons(). CSS: .btn-icon
alignment, inline-flex on .hdr-btn / .hdr-dd-item / #send / #stop.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-26 23:06:01 -04:00
parent 24c9f52b49
commit 65548ebf36
3 changed files with 75 additions and 24 deletions

View File

@@ -21,6 +21,7 @@
</script>
<link rel="stylesheet" href="/static/style.css">
<script src="/static/marked.min.js"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
</head>
<body>
<header>
@@ -32,20 +33,35 @@
</div>
<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>
<button id="sessions-btn" class="hdr-btn" title="Sessions">
<svg data-lucide="history" class="btn-icon"></svg>
<span class="btn-label">Sessions</span>
</button>
<button id="ctx-open-btn" class="hdr-btn" title="Context &amp; memory">
<svg data-lucide="sliders-horizontal" class="btn-icon"></svg><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>
<button class="hdr-btn" id="settings-btn" title="Settings">
<svg data-lucide="menu" class="btn-icon"></svg>
</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>
<button id="files-btn" class="hdr-dd-item">
<svg data-lucide="folder-open" class="btn-icon"></svg> Files
</button>
<a href="/settings" class="hdr-dd-item">
<svg data-lucide="user" class="btn-icon"></svg> 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>
<button type="submit" class="hdr-dd-item">
<svg data-lucide="log-out" class="btn-icon"></svg> Sign Out
</button>
</form>
</div>
</div>
<a href="/help" class="hdr-btn" title="Help &amp; reference" style="text-decoration:none"></a>
<a href="/help" class="hdr-btn" title="Help &amp; reference" style="text-decoration:none">
<svg data-lucide="circle-help" class="btn-icon"></svg>
</a>
</nav>
<div id="sessions-panel"></div>
@@ -149,7 +165,7 @@
<textarea id="input" rows="1" placeholder="Message…" autofocus></textarea>
<div id="send-col">
<button id="send">Send</button>
<button id="stop">Stop</button>
<button id="stop"><svg data-lucide="square" width="14" height="14" class="btn-icon"></svg> Stop</button>
</div>
</div>