polish(v0.6): replace toolbar emoji with themed line icons + hover tooltips
The glossy emoji (🔍⚙▦🕘⌨🔗📱) clashed with the Amber dark theme. Swap them for clean lucide line icons (MIT, stroke=currentColor) so they take the theme colour — muted by default, Amber on hover — and add a styled CSS hover tooltip (data-tip, right-anchored so it never clips the edge) showing what each does. - public/icons.ts: 7 line icons (search/settings/dashboard/history/keyboard/ share/device), script-generated from lucide - 7 toolbar modules: innerHTML = ICON_* + data-tip + aria-label - style.css .toolbtn: 18px svg, --text-dim → --accent on hover, [data-tip] tooltip Frontend-only. web typecheck + build clean; bundle has 0 toolbar emoji; verified in-browser: line icons in theme colour, amber + tooltip on hover.
This commit is contained in:
@@ -6,6 +6,8 @@
|
||||
* `claude --resume <id>`.
|
||||
*/
|
||||
|
||||
import { ICON_HISTORY } from './icons.js'
|
||||
|
||||
export interface HistoryHooks {
|
||||
resume: (cwd: string, id: string) => void
|
||||
}
|
||||
@@ -98,8 +100,9 @@ export function mountHistory(toolbar: HTMLElement, hooks: HistoryHooks): void {
|
||||
|
||||
const toggle = document.createElement('button')
|
||||
toggle.className = 'toolbtn'
|
||||
toggle.textContent = '🕘'
|
||||
toggle.title = 'Resume a past Claude session'
|
||||
toggle.innerHTML = ICON_HISTORY
|
||||
toggle.dataset.tip = 'Session history'
|
||||
toggle.setAttribute('aria-label', 'Session history')
|
||||
toggle.setAttribute('aria-label', 'Session history')
|
||||
toggle.addEventListener('click', () => {
|
||||
if (overlay.style.display === 'none') void open()
|
||||
|
||||
Reference in New Issue
Block a user