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:
Yaojia Wang
2026-06-30 14:36:26 +02:00
parent 59de784c8a
commit 67b0a43b39
10 changed files with 93 additions and 16 deletions

View File

@@ -7,6 +7,7 @@
*/
import QRCode from 'qrcode'
import { ICON_DEVICE } from './icons.js'
export function mountQrConnect(toolbar: HTMLElement): void {
const modal = document.createElement('div')
@@ -55,8 +56,9 @@ export function mountQrConnect(toolbar: HTMLElement): void {
const toggle = document.createElement('button')
toggle.className = 'toolbtn'
toggle.textContent = '📱'
toggle.title = 'Connect another device (QR)'
toggle.innerHTML = ICON_DEVICE
toggle.dataset.tip = 'Connect a device'
toggle.setAttribute('aria-label', 'Connect a device')
toggle.setAttribute('aria-label', 'Connect another device')
toggle.addEventListener('click', open)
toolbar.appendChild(toggle)