From b3734e0256af89d01a9e9d7d6b098ee05880f648 Mon Sep 17 00:00:00 2001 From: Ben Vinegar <2153+benvinegar@users.noreply.github.com> Date: Tue, 16 Jun 2026 19:21:06 -0400 Subject: [PATCH 1/3] feat(viewer): use minimal icons for card open/delete actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the text "open ↗" / "delete" card actions with inlined Lucide icons (external-link and trash-2), a square icon hit area, and a red delete-on-hover via a new --danger token. Icons are inlined (no new dependency) so they inherit currentColor and the CSS-driven size. The `.act.open`/`.act.del` classes and the hover/focus reveal are unchanged, so existing behavior and tests hold. Co-Authored-By: Claude Opus 4.8 (1M context) --- CHANGELOG.md | 2 ++ viewer/src/Card.tsx | 17 +++++++++++++---- viewer/src/icons.tsx | 44 +++++++++++++++++++++++++++++++++++++++++++ viewer/src/styles.css | 17 +++++++++++++++++ 4 files changed, 76 insertions(+), 4 deletions(-) create mode 100644 viewer/src/icons.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 277e3bd..e598aa4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,8 @@ All notable user-visible changes to this project are documented in this file. ### Changed +- A surface card's open and delete actions are now minimal Lucide icons + (external-link and trash) instead of text labels; delete turns red on hover. - `sideshow-term watch` now starts a local server in the background when needed, and bare `sideshow-term` opens the watcher. Terminal servers default to port 4243, with `--port` for choosing another local port. The watcher supports diff --git a/viewer/src/Card.tsx b/viewer/src/Card.tsx index 893950b..f1e5da5 100644 --- a/viewer/src/Card.tsx +++ b/viewer/src/Card.tsx @@ -8,6 +8,7 @@ import { type TracePart as TracePartData, } from "./api.ts"; import { DiffPart } from "./DiffPart.tsx"; +import { OpenIcon, TrashIcon } from "./icons.tsx"; import { ImagePart } from "./ImagePart.tsx"; import { TracePart } from "./TracePart.tsx"; import { @@ -88,18 +89,26 @@ export function Card(props: { surface: Surface }) { {relTime(props.surface.updatedAt)} - - open ↗ + + {/* Parts render in order, dispatched by kind. Each kind is an explicit diff --git a/viewer/src/icons.tsx b/viewer/src/icons.tsx new file mode 100644 index 0000000..adb0422 --- /dev/null +++ b/viewer/src/icons.tsx @@ -0,0 +1,44 @@ +import type { JSX } from "solid-js"; + +// Inline Lucide icons (https://lucide.dev, ISC license) — a couple of glyphs +// for the card chrome. Inlined rather than pulling in a package: it keeps the +// bundle lean and the icons inherit `currentColor` and the CSS-driven size. +function Icon(props: { children: JSX.Element }) { + return ( + + ); +} + +// lucide: external-link +export function OpenIcon() { + return ( + + + + + + ); +} + +// lucide: trash-2 +export function TrashIcon() { + return ( + + + + + + + + ); +} diff --git a/viewer/src/styles.css b/viewer/src/styles.css index f8cf394..ce047c3 100644 --- a/viewer/src/styles.css +++ b/viewer/src/styles.css @@ -10,6 +10,7 @@ --accent: #185fa5; --accent-bg: #e6f1fb; --hover: rgba(20, 20, 10, 0.05); + --danger: #c0392b; } @media (prefers-color-scheme: dark) { :root { @@ -24,6 +25,7 @@ --accent: #85b7eb; --accent-bg: rgba(55, 138, 221, 0.16); --hover: rgba(255, 255, 250, 0.06); + --danger: #e8776b; } } * { @@ -344,6 +346,21 @@ select.vbadge { color: var(--text); background: var(--hover); } +/* Icon-only actions (open/delete): square hit area, centered glyph. */ +.card-head .act.icon { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 4px; +} +.card-head .act.icon svg { + width: 15px; + height: 15px; + display: block; +} +.card-head .act.icon.del:hover { + color: var(--danger); +} iframe { display: block; width: 100%; From 33ac9e2477985a0293015748a41f991e6e8d466d Mon Sep 17 00:00:00 2001 From: Ben Vinegar <2153+benvinegar@users.noreply.github.com> Date: Tue, 16 Jun 2026 19:38:25 -0400 Subject: [PATCH 2/3] feat(viewer): keep card action icons always visible The icons are subtle enough that they don't need the hover/focus reveal the text actions used; show them at rest so the open/delete affordances are always discoverable. Text actions (e.g. the release-notes "dismiss") keep the reveal. Co-Authored-By: Claude Opus 4.8 (1M context) --- viewer/src/styles.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/viewer/src/styles.css b/viewer/src/styles.css index ce047c3..cab6c60 100644 --- a/viewer/src/styles.css +++ b/viewer/src/styles.css @@ -346,12 +346,15 @@ select.vbadge { color: var(--text); background: var(--hover); } -/* Icon-only actions (open/delete): square hit area, centered glyph. */ +/* Icon-only actions (open/delete): square hit area, centered glyph. Unlike the + text actions, these stay visible at all times — they're subtle enough not to + need the hover reveal. */ .card-head .act.icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px; + opacity: 1; } .card-head .act.icon svg { width: 15px; From 5e65e4def7123c798bb5191a52d9f442118b7c64 Mon Sep 17 00:00:00 2001 From: Ben Vinegar <2153+benvinegar@users.noreply.github.com> Date: Tue, 16 Jun 2026 19:39:25 -0400 Subject: [PATCH 3/3] style(viewer): shrink card action icons to 13px Co-Authored-By: Claude Opus 4.8 (1M context) --- viewer/src/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/viewer/src/styles.css b/viewer/src/styles.css index cab6c60..0eece36 100644 --- a/viewer/src/styles.css +++ b/viewer/src/styles.css @@ -357,8 +357,8 @@ select.vbadge { opacity: 1; } .card-head .act.icon svg { - width: 15px; - height: 15px; + width: 13px; + height: 13px; display: block; } .card-head .act.icon.del:hover {