feat(viewer): minimal icons for card open/delete actions

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

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 }) {
         </span>
         <span class="card-meta">{relTime(props.surface.updatedAt)}</span>
         <span class="sp"></span>
-        <a class="act open" target="_blank" href={`/s/${props.surface.id}`}>
-          open ↗
+        <a
+          class="act icon open"
+          target="_blank"
+          href={`/s/${props.surface.id}`}
+          title="Open in a new tab"
+          aria-label="Open in a new tab"
+        >
+          <OpenIcon />
         </a>
         <button
-          class="act del"
+          class="act icon del"
+          title="Delete surface"
+          aria-label={`Delete "${props.surface.title}"`}
           onClick={async () => {
             if (confirm(`Delete "${props.surface.title}"?`)) {
               await api(`/api/surfaces/${props.surface.id}`, { method: "DELETE" });
             }
           }}
         >
-          delete
+          <TrashIcon />
         </button>
       </div>
       {/* Parts render in order, dispatched by kind. Each kind is an explicit

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 (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      {props.children}
+    </svg>
+  );
+}
+
+// lucide: external-link
+export function OpenIcon() {
+  return (
+    <Icon>
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+    </Icon>
+  );
+}
+
+// lucide: trash-2
+export function TrashIcon() {
+  return (
+    <Icon>
+      <path d="M3 6h18" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+      <line x1="10" x2="10" y1="11" y2="17" />
+      <line x1="14" x2="14" y1="11" y2="17" />
+    </Icon>
+  );
+}

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,24 @@ select.vbadge {
   color: var(--text);
   background: var(--hover);
 }
+/* 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: 13px;
+  height: 13px;
+  display: block;
+}
+.card-head .act.icon.del:hover {
+  color: var(--danger);
+}
 iframe {
   display: block;
   width: 100%;