From e554c053ee1d22a63566927f37a227cc57a615a5 Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Tue, 30 Jun 2026 18:54:11 +0200
Subject: [PATCH] =?UTF-8?q?polish(v0.7):=20replace=20timeline=20?=
 =?UTF-8?q?=F0=9F=93=9C=20+=20push=20=F0=9F=94=94=20emoji=20with=20themed?=
 =?UTF-8?q?=20line=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap the two v0.7 emoji buttons for lucide line icons (stroke=currentColor) so
they take the Amber theme colour like the toolbar icons:
- timeline toggle (tabs.ts) → scroll-text icon
- push toggle + disabled bell (push.ts) → bell icon, keeping the On/Off label
- icons.ts: ICON_TIMELINE, ICON_BELL; style.css sizes the inline svgs (16px)

Frontend-only. web tsc + build:web clean, 102 push tests green, bundle emoji-free.
---
 public/icons.ts | 3 +++
 public/push.ts  | 8 ++++++--
 public/tabs.ts  | 3 ++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/public/icons.ts b/public/icons.ts
index d5e63ca..d2d9012 100644
--- a/public/icons.ts
+++ b/public/icons.ts
@@ -43,3 +43,6 @@ export const ICON_HISTORY = lineIcon('<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0
 export const ICON_KEYBOARD = lineIcon('<path d="M10 8h.01" /> <path d="M12 12h.01" /> <path d="M14 8h.01" /> <path d="M16 12h.01" /> <path d="M18 8h.01" /> <path d="M6 8h.01" /> <path d="M7 16h10" /> <path d="M8 12h.01" /> <rect width="20" height="16" x="2" y="4" rx="2" />')
 export const ICON_SHARE = lineIcon('<circle cx="18" cy="5" r="3" /> <circle cx="6" cy="12" r="3" /> <circle cx="18" cy="19" r="3" /> <line x1="8.59" x2="15.42" y1="13.51" y2="17.49" /> <line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />')
 export const ICON_DEVICE = lineIcon('<rect width="14" height="20" x="5" y="2" rx="2" ry="2" /> <path d="M12 18h.01" />')
+
+export const ICON_BELL = lineIcon('<path d="M10.268 21a2 2 0 0 0 3.464 0" /> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />')
+export const ICON_TIMELINE = lineIcon('<path d="M15 12h-5" /> <path d="M15 8h-5" /> <path d="M19 17V5a2 2 0 0 0-2-2H4" /> <path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" />')
diff --git a/public/push.ts b/public/push.ts
index 8b724bd..e55109c 100644
--- a/public/push.ts
+++ b/public/push.ts
@@ -16,6 +16,8 @@
  *             (NOTIFY_DND env). They are independent.
  */
 
+import { ICON_BELL } from './icons.js'
+
 /* ── Types ─────────────────────────────────────────────────────────────────── */
 
 /** All possible push-readiness states. Drives UI rendering in mountPushToggle. */
@@ -297,7 +299,8 @@ function renderPushToggle(
 
 function renderDisabled(container: HTMLElement, ariaLabel: string, hint: string): void {
   const wrap = el('span', 'push-toggle-disabled')
-  const bell = el('span', 'push-bell push-bell-off', '🔔')
+  const bell = el('span', 'push-bell push-bell-off')
+  bell.innerHTML = ICON_BELL
   bell.setAttribute('aria-label', ariaLabel)
   const hintEl = el('span', 'push-hint', hint)
   wrap.append(bell, hintEl)
@@ -313,8 +316,9 @@ function renderToggleButton(
   const btn = el(
     'button',
     isSubscribed ? 'push-toggle-btn push-toggle-on' : 'push-toggle-btn push-toggle-off',
-    isSubscribed ? '🔔 On' : '🔔 Off',
   )
+  btn.innerHTML = ICON_BELL
+  btn.append(' ' + (isSubscribed ? 'On' : 'Off'))
   btn.title = isSubscribed
     ? 'Click to disable push notifications'
     : 'Click to enable push notifications'
diff --git a/public/tabs.ts b/public/tabs.ts
index 05333d7..edb3142 100644
--- a/public/tabs.ts
+++ b/public/tabs.ts
@@ -22,6 +22,7 @@
  */
 
 import { TerminalSession } from './terminal-session.js'
+import { ICON_TIMELINE } from './icons.js'
 import { THEMES, DEFAULT_SETTINGS, type Settings } from './settings.js'
 import { mountLauncher, type Launcher } from './launcher.js'
 import { mountProjects, type ProjectsPanel } from './projects.js'
@@ -853,7 +854,7 @@ export class TabApp {
     // survive tabBar.replaceChildren() (the bell's subtree is mounted once).
     const tl = document.createElement('button')
     tl.className = 'tab-timeline'
-    tl.textContent = '📜'
+    tl.innerHTML = ICON_TIMELINE
     tl.title = 'Activity timeline'
     tl.setAttribute('aria-label', 'Activity timeline')
     tl.classList.toggle('active', this.timelineOpen)