feat(style): a preview button that shows its state, a quiet search, and an icon on every tab (#308)

CLAUDE.md

@@ -106,6 +106,16 @@ native `<input type=color>`, no Acrylic or Accent opacity slider. Spec and plan:
   preview slot and status are `--p-bg`. The address field's fill and edge step off the ROW
   (`--p-side-flat`), not the page: off the page they sat at 1.01:1 on the row on every dark style
   (MEASURED). Near-black is still judged by the page (`nearBlackField(bg, text, row)`).
+- **THE TOOLBAR'S BUTTONS ARE NEVER COLOURED; EVERY TAB WEARS AN ICON BY WHAT IT HOLDS** (#308;
+  owner, 2026-10-06: "i dont like the look of the buttons being colored ... search is more minor ...
+  the preview panel is almost always opened ... an icon that changes based on whether the panel is
+  opened or hidden ... default icons per type of page explorer, project and settings"; 2026-10-07, of
+  `research/prism/2026-10-06-new-themes/toolbar-options.html`: "A3 and C2"). The preview toggle
+  (`PreviewGlyph`) and the search button wear Back's grey and no fill in every state; the preview's
+  right column is SOLID while open, empty while hidden; `data-active` on search is a mark, not a
+  look. Every tab carries `TabKindIcon` (Explorer a folder, project code brackets, Settings a gear)
+  in the tab's own ink, SOLID on the tab you are on and lines on the rest; it replaced the
+  folder-coloured glyph only Explorer tabs had. The `toolbarIcons` e2e holds both.
 
 ## Scope
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prism",
-  "version": "0.93.1",
+  "version": "0.94.0",
   "description": "A fast, universal media viewer for Windows.",
   "author": "Max",
   "license": "MIT",

src/renderer/src/components/TabKindIcon.tsx

@@ -0,0 +1,89 @@
+import { useId, type JSX } from 'react'
+
+/** What a tab holds, as its icon says it (#308). */
+export type TabKind = 'explorer' | 'project' | 'settings'
+
+/* The C2 drawings from the approved mockup (owner, 2026-10-07: "A3 and C2";
+   research/prism/2026-10-06-new-themes/toolbar-options.html). Lines on the
+   tabs you are not on, solid on the one you are: a second cue next to the
+   accent rule along the top. */
+const FOLDER = 'M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2h8.5A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z'
+const FOLDER_SOLID =
+  'M2.5 6.5A1.5 1.5 0 0 1 4 5h5.2l2 2H20a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 1 20 19H4a1.5 1.5 0 0 1-1.5-1.5z'
+const CODE = 'M8.5 7L3.5 12l5 5M15.5 7l5 5-5 5M13.5 4.5l-3 15'
+const CODE_CUT = 'M9 9l-3 3 3 3M15 9l3 3-3 3M13 7.5l-2 9'
+const GEAR =
+  'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'
+
+const SIZE = 14
+
+/**
+ * The tab's own icon, in the tab's ink (currentColor): the label's dim grey
+ * on a tab at rest, its brighter text on the one you are on and under a
+ * hover, the agent's onTint ink on a Full fill. Never a colour of its own
+ * (owner, 2026-10-06: "i dont like the look of the buttons being colored").
+ */
+export function TabKindIcon({ kind, solid }: { kind: TabKind; solid: boolean }): JSX.Element {
+  // The solid code tile's brackets are CUT OUT of it by a mask rather than
+  // drawn over it in the strip's colour: the strip may be see-through (two
+  // coats of a glass ground are an opaque slab, #294) or under an agent's
+  // fill, and a hole shows whatever is really behind.
+  const mask = `tab-kind-${useId().replace(/:/g, '')}`
+  const common = {
+    viewBox: '0 0 24 24',
+    width: SIZE,
+    height: SIZE,
+    className: 'shrink-0',
+    'data-tab-icon': kind,
+    'data-tab-icon-fill': solid ? 'solid' : 'outline',
+    'aria-hidden': true
+  } as const
+  if (!solid)
+    return (
+      <svg
+        {...common}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d={kind === 'explorer' ? FOLDER : kind === 'project' ? CODE : GEAR} />
+      </svg>
+    )
+  if (kind === 'explorer')
+    return (
+      <svg {...common}>
+        <path d={FOLDER_SOLID} fill="currentColor" />
+      </svg>
+    )
+  if (kind === 'settings')
+    return (
+      <svg {...common}>
+        <path
+          d={GEAR}
+          fill="currentColor"
+          fillRule="evenodd"
+          stroke="currentColor"
+          strokeWidth="1.2"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )
+  return (
+    <svg {...common}>
+      <mask id={mask} maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+        <rect x="0" y="0" width="24" height="24" fill="#fff" />
+        <path
+          d={CODE_CUT}
+          fill="none"
+          stroke="#000"
+          strokeWidth="1.9"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </mask>
+      <rect x="2.5" y="3.5" width="19" height="17" rx="3.5" fill="currentColor" mask={`url(#${mask})`} />
+    </svg>
+  )
+}

src/renderer/src/components/TabStrip.tsx

@@ -8,6 +8,7 @@ import { tabsOf, useStyle } from '../lib/theme'
 import { pinnedRoots, plusMenuList, recentLabels, recentRoots, togglePin } from 'prism-term-core/renderer/lib/recentRoots'
 import { DRAG_MIME, dragPayload, droppedPaths, setDrag, type DragPayload } from '../lib/dragDrop'
 import { ContextMenu } from './ContextMenu'
+import { TabKindIcon } from './TabKindIcon'
 import { useTabWidth } from '../lib/tabWidthPrefs'
 
 /**
@@ -454,7 +455,17 @@ export function TabStrip({
                 either, which is why the slot itself goes with the icon; the
                 widths only settle differently, and only when the setting is
                 deliberately changed. */}
-            {isExplorerTab(t) ? <FolderGlyph /> : indicator === 'full' && (
+            {/* EVERY TAB SAYS WHAT IT HOLDS (#308; owner, 2026-10-06: "we
+                should have some default icons per type of page explorer,
+                project and settings"; 2026-10-07, of the mockup: "A3 and C2").
+                A folder, code brackets or a gear in the tab's own ink, solid
+                on the tab you are on and lines on the rest. It replaced the
+                small folder in the folder colour that only Explorer tabs had. */}
+            <TabKindIcon
+              kind={t.kind === 'settings' ? 'settings' : isExplorerTab(t) ? 'explorer' : 'project'}
+              solid={on}
+            />
+            {!isExplorerTab(t) && t.kind !== 'settings' && indicator === 'full' && (
             <span className="grid h-[13px] w-[13px] shrink-0 place-items-center" aria-hidden={!tint}>
               {tint && (
                 <svg

src/renderer/src/components/browse/BrowseIcon.tsx

@@ -11,7 +11,6 @@ const paths = {
   copy: 'M9 8h10a1 1 0 0 1 1 1v11H9ZM15 4H4v11',
   rename: 'm14 4 6 6M4 20l2-7L17 2l5 5L11 18Z',
   delete: 'M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7',
-  preview: 'M3 4h18v16H3ZM15 4v16',
   home: 'm3 10 9-7 9 7v11h-7v-8h-4v8H3Z',
   drive: 'm5 5-3 10v5h20v-5L19 5ZM2 15h20M6 18h1M10 18h1',
   close: 'm6 6 12 12M6 18 18 6',
@@ -37,3 +36,31 @@ export function BrowseIcon({ name }: { name: keyof typeof paths }): JSX.Element
     </svg>
   )
 }
+
+/**
+ * THE PREVIEW BUTTON SAYS ITS STATE IN ITS DRAWING (#308; owner, 2026-10-07,
+ * of the mockup: "A3"; before it, "the preview panel is almost always opened
+ * and that button then is colored ... an icon that changes based on whether
+ * the panel is opened or hidden"). A window whose right column is SOLID while
+ * the pane is open and EMPTY while it is hidden, in the row's own grey: no
+ * accent and no fill in any state. A3's paths and stroke, at the row's size.
+ */
+export function PreviewGlyph({ open }: { open: boolean }): JSX.Element {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      data-preview-glyph={open ? 'open' : 'hidden'}
+      aria-hidden="true"
+    >
+      {open && <rect x="14.5" y="5" width="5.5" height="14" fill="currentColor" stroke="none" data-preview-column />}
+      <path d="M4 5h16v14H4zM14.5 5v14" />
+    </svg>
+  )
+}

src/renderer/src/components/browse/FolderBrowser.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type JSX } from 'react'
 import { formatBytes } from '../../lib/format'
-import { BrowseIcon } from './BrowseIcon'
+import { BrowseIcon, PreviewGlyph } from './BrowseIcon'
 import { BrowseList } from './BrowseList'
 import { BrowseSearchStatus } from './BrowseSearchStatus'
 import { BrowseSearchPopup } from './BrowseSearchPopup'
@@ -290,7 +290,7 @@ export function FolderBrowser(props: FolderBrowserProps): JSX.Element {
       aria-pressed={props.previewEnabled}
       onClick={props.onPreviewToggle}
     >
-      <BrowseIcon name="preview" />
+      <PreviewGlyph open={props.previewEnabled} />
     </button>
   )
   const places = (props.placesVisible !== false || sliding || !!props.placesPeek) && (
@@ -456,8 +456,11 @@ export function FolderBrowser(props: FolderBrowserProps): JSX.Element {
               aria-haspopup="dialog"
               title="Search (Ctrl+F)"
               data-testid="browse-search-button"
-              // Lit while the list shows a search, so the way back to it and
-              // to the query is where the search began.
+              // Marks that the list shows a search. A mark for tests and
+              // nothing else: the button wears no accent in any state (#308;
+              // owner, 2026-10-06: "search is more minor and i dont think it
+              // needs to be colored since you just see a search box when its
+              // clicked").
               data-active={!!props.query.trim() || undefined}
               onClick={openSearch}
             >

src/renderer/src/components/browse/browse.css

@@ -331,14 +331,11 @@
   border-radius: 3px;
 }
 /* SEARCH IS A BUTTON (#267): the field became a popup (search-popup.css).
-   Lit in the accent while the list is showing a search's results. */
-.browse-toolbar .browse-search-button[data-active] {
-  color: var(--p-accent-hi);
-}
-.browse-toolbar > .browse-icon-button[aria-pressed='true'] {
-  color: var(--p-accent-hi);
-  background-color: var(--p-hover);
-}
+   NEITHER IT NOR THE PREVIEW BUTTON IS EVER COLOURED (#308; owner,
+   2026-10-06: "i dont like the look of the buttons being colored"): both
+   wear the row's grey and hover and focus like Back, in every state. The
+   preview's state is in its drawing (PreviewGlyph), the search's in the
+   popup and the list. */
 .browse-places {
   grid-column: 1;
   grid-row: 2 / -1;