diff --git a/src/App.tsx b/src/App.tsx index 9514c538..3a84ea87 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -126,7 +126,7 @@ import { startAgentHookStatusListener } from './store/agentHookStatus'; import { applyPlanContent } from './store/canvas'; import { startEvidenceAutoBuild } from './store/evidence-auto'; import type { PlanContentMessage } from './store/canvas'; -import { SyncIcon } from './components/icons'; +import { GitHubMarkIcon, SyncIcon } from './components/icons'; const ThinkingSpace = lazy(() => import('./components/thinking/ThinkingSpace').then((m) => ({ default: m.ThinkingSpace })), @@ -161,15 +161,7 @@ function DropOverlay() { 'backdrop-filter': 'blur(4px)', }} > - - - + - - - + {store.remoteAccess.connectedClients} client(s) connected diff --git a/src/components/NewTaskPlaceholder.tsx b/src/components/NewTaskPlaceholder.tsx index efe0ef2a..94021f95 100644 --- a/src/components/NewTaskPlaceholder.tsx +++ b/src/components/NewTaskPlaceholder.tsx @@ -3,6 +3,7 @@ import { toggleNewTaskPanel, createTerminal, unfocusPlaceholder } from '../store import { registerFocusFn, unregisterFocusFn } from '../store/focus'; import { theme } from '../lib/theme'; import { mod } from '../lib/platform'; +import { PlusLargeIcon } from './icons'; /** Quiet ghost surface: a faint fill instead of a dashed wireframe border, so * the add column reads as part of the strip rather than a placeholder. The @@ -62,9 +63,7 @@ export function NewTaskPlaceholder() { style={{ ...ghostStyle, flex: '1' }} title={`New task (${mod}+N)`} > - + {/* Terminal button — same width, fixed height */} diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index e279c4a4..3e6c71a9 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -3,7 +3,14 @@ import { TaskProjectFilter } from './TaskProjectFilter'; import { createProjectFilterTransition } from '../lib/projectFilterTransition'; import { createSignal, createEffect, createMemo, onMount, onCleanup, For, Show } from 'solid-js'; import type { JSX } from 'solid-js'; -import { GitHubIcon, KanbanIcon } from './icons'; +import { + BotIcon, + ChevronDownAltIcon, + FolderIcon, + GitHubIcon, + KanbanIcon, + PlusLargeIcon, +} from './icons'; import { openGitHubIssues } from '../store/github'; import { openKanban } from '../store/kanban'; import { errMessage } from '../lib/log'; @@ -119,17 +126,7 @@ function createOffscreenAttentionState(taskId: () => string) { /** Small bot/coordinator icon (16x16 SVG). */ function CoordinatorIcon() { - return ( - - - - ); + return ; } function DirectBranchBadge(props: { branchName: string }) { @@ -220,20 +217,14 @@ export function ProjectTaskGroupToggle(props: { gap: '5px', }} > - + /> - + /> - - - } + icon={} onClick={handleAddProject} title="Add project" size="sm" @@ -872,15 +853,7 @@ export function Sidebar() { width: '100%', }} > - + Link Project } @@ -904,9 +877,7 @@ export function Sidebar() { width: '100%', }} > - - - + New Task diff --git a/src/components/SidebarFooter.tsx b/src/components/SidebarFooter.tsx index a519051c..e4d61507 100644 --- a/src/components/SidebarFooter.tsx +++ b/src/components/SidebarFooter.tsx @@ -11,6 +11,7 @@ import { } from '../store/store'; import { theme } from '../lib/theme'; import { alt, mod } from '../lib/platform'; +import { KeyboardIcon, LightbulbIcon, PhoneIcon, ScrambleIcon } from './icons'; /** Compact utilities and optional activity totals, shared by every theme. */ export function SidebarFooter(props: { onConnectPhone: () => void }) { @@ -70,20 +71,7 @@ export function SidebarFooter(props: { onConnectPhone: () => void }) { phoneConnected() ? 'Phone connected: manage remote access' : 'Connect phone' } > - + Phone access @@ -708,9 +692,7 @@ function AddAgentMenu(props: { taskId: string }) { padding: '0', }} > - - - +
- - - + diff --git a/src/components/TaskTitleBar.tsx b/src/components/TaskTitleBar.tsx index 94e89033..78bc4f6b 100644 --- a/src/components/TaskTitleBar.tsx +++ b/src/components/TaskTitleBar.tsx @@ -21,9 +21,13 @@ import { MoreMenu } from './chat/MoreMenu'; import { StatusDot, getDotTooltip } from './StatusDot'; import { ActivityIcon, + CheckCircleIcon, CheckIcon, ClockIcon, CloseIcon, + CollapseAltIcon, + MinusIcon, + PanelRightIcon, PlayIcon, StopIcon, UndoIcon, @@ -289,9 +293,7 @@ export function TaskTitleBar(props: TaskTitleBarProps) { /> } > - - - + {props.pushing ? 'Pushing…' : props.pushSuccess ? 'Pushed' : 'Finish'} @@ -343,17 +345,7 @@ export function TaskTitleBar(props: TaskTitleBarProps) { ? [ { label: 'Minimize (stop agents)', - icon: ( - - ), + icon: , run: () => void collapseTask(props.task.id), }, ] @@ -363,19 +355,7 @@ export function TaskTitleBar(props: TaskTitleBarProps) {
- - - - } + icon={} onClick={() => isTaskCanvasVisible(props.task) ? closeTaskCanvas(props.task.id) @@ -385,11 +365,7 @@ export function TaskTitleBar(props: TaskTitleBarProps) { pressed={isTaskCanvasVisible(props.task)} /> - - - } + icon={} onClick={() => { toggleTaskFocusMode(props.task.id); }} diff --git a/src/components/TilingLayout.tsx b/src/components/TilingLayout.tsx index a092da25..cc18d45d 100644 --- a/src/components/TilingLayout.tsx +++ b/src/components/TilingLayout.tsx @@ -41,7 +41,7 @@ import { mod } from '../lib/platform'; import { createCtrlShiftWheelResizeHandler } from '../lib/wheelZoom'; import { shouldAnimateTaskAppearance } from '../lib/reducedMotion'; import { TASK_TILE_DEFAULT_WIDTH, TASK_TILE_MIN_WIDTH } from '../lib/layout-sizes'; -import { SyncIcon } from './icons'; +import { FolderIcon, SyncIcon } from './icons'; // Lazy: the document workspace (CodeMirror, parse5) loads when its panel opens. const DocumentWorkspacePanel = lazy(() => @@ -605,15 +605,7 @@ export function TilingLayout() { color: theme.fgSubtle, }} > - +
- + Link Project diff --git a/src/components/UpdateButton.tsx b/src/components/UpdateButton.tsx index 673e0799..1b3f8a85 100644 --- a/src/components/UpdateButton.tsx +++ b/src/components/UpdateButton.tsx @@ -11,41 +11,7 @@ import { Show } from 'solid-js'; import { theme } from '../lib/theme'; import { updateStatus, downloadUpdate, installUpdate } from '../store/store'; - -const DownloadIcon = () => ( - -); - -const RestartIcon = () => ( - -); +import { DownloadAltIcon, RefreshIcon } from './icons'; export function UpdateButton() { const phase = () => updateStatus().phase; @@ -94,7 +60,7 @@ export function UpdateButton() { > : } + fallback={phase() === 'downloaded' ? : } > {updateStatus().downloadPercent}% diff --git a/src/components/WindowTitleBar.tsx b/src/components/WindowTitleBar.tsx index 9befc69c..01ce34d9 100644 --- a/src/components/WindowTitleBar.tsx +++ b/src/components/WindowTitleBar.tsx @@ -2,6 +2,7 @@ import { createSignal, onCleanup, onMount } from 'solid-js'; import { WorkspaceControls } from './WorkspaceControls'; import { appWindow } from '../lib/window'; import { FocusModeTaskIndicators } from './FocusModeTaskIndicators'; +import { CloseThinIcon, LogoIcon, MaximizeIcon, MinimizeIcon, RestoreIcon } from './icons'; export function WindowTitleBar() { const [isFocused, setIsFocused] = createSignal(true); @@ -86,21 +87,11 @@ export function WindowTitleBar() { class="window-drag-region" onDblClick={() => void handleToggleMaximize()} > - + style={{ 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }} + />
@@ -115,9 +106,7 @@ export function WindowTitleBar() { aria-label="Minimize window" title="Minimize" > - +
diff --git a/src/components/WorkspaceControls.tsx b/src/components/WorkspaceControls.tsx index 07502c7d..04b3d176 100644 --- a/src/components/WorkspaceControls.tsx +++ b/src/components/WorkspaceControls.tsx @@ -1,5 +1,6 @@ import { store, toggleSettingsDialog, toggleSidebar } from '../store/store'; import { mod } from '../lib/platform'; +import { ChevronLeftAltIcon, GearIcon } from './icons'; import { IconButton } from './IconButton'; import { UpdateButton } from './UpdateButton'; @@ -13,25 +14,15 @@ export function WorkspaceControls() { > - - + /> } onClick={() => toggleSidebar()} title={`${store.sidebarVisible ? 'Collapse' : 'Show'} sidebar (${mod}+B)`} /> - - - } + icon={} onClick={() => toggleSettingsDialog(true)} title={`Settings (${mod}+,)`} /> diff --git a/src/components/icons.client.test.tsx b/src/components/icons.client.test.tsx new file mode 100644 index 00000000..524df49c --- /dev/null +++ b/src/components/icons.client.test.tsx @@ -0,0 +1,71 @@ +import { render } from 'solid-js/web'; +import { afterEach, describe, expect, it } from 'vitest'; +import * as icons from './icons'; + +const disposers: Array<() => void> = []; + +afterEach(() => { + while (disposers.length > 0) disposers.pop()?.(); + document.body.replaceChildren(); +}); + +/** Every exported icon component, so the whole module stays render-covered. */ +const ALL_ICONS = Object.values(icons); + +describe('shared icon module', () => { + it('renders every icon at its default size of 16 and hides it from the a11y tree', () => { + for (const Icon of ALL_ICONS) { + const container = document.createElement('div'); + document.body.append(container); + disposers.push(render(() => , container)); + + const svg = container.querySelector('svg'); + expect(svg, Icon.name).not.toBeNull(); + expect(svg?.getAttribute('width'), Icon.name).toBe('16'); + expect(svg?.getAttribute('height'), Icon.name).toBe('16'); + expect(svg?.getAttribute('aria-hidden'), Icon.name).toBe('true'); + expect(svg?.getAttribute('role'), Icon.name).toBeNull(); + expect(svg?.querySelector('title'), Icon.name).toBeNull(); + } + }); + + it('honors a custom size (12, the small size from issue #208)', () => { + for (const Icon of ALL_ICONS) { + const container = document.createElement('div'); + document.body.append(container); + disposers.push(render(() => , container)); + + const svg = container.querySelector('svg'); + expect(svg?.getAttribute('width'), Icon.name).toBe('12'); + expect(svg?.getAttribute('height'), Icon.name).toBe('12'); + } + }); + + it('keeps the monochrome currentColor contract', () => { + for (const Icon of ALL_ICONS) { + const container = document.createElement('div'); + document.body.append(container); + disposers.push(render(() => , container)); + + const svg = container.querySelector('svg'); + const fill = svg?.getAttribute('fill'); + expect(['currentColor', 'none'], Icon.name).toContain(fill); + if (fill === 'none') { + expect(svg?.getAttribute('stroke'), Icon.name).toBe('currentColor'); + } + } + }); + + it('renders a title with role="img" when a title is provided', () => { + for (const Icon of ALL_ICONS) { + const container = document.createElement('div'); + document.body.append(container); + disposers.push(render(() => , container)); + + const svg = container.querySelector('svg'); + expect(svg?.getAttribute('aria-hidden'), Icon.name).toBeNull(); + expect(svg?.getAttribute('role'), Icon.name).toBe('img'); + expect(svg?.querySelector('title')?.textContent, Icon.name).toBe('Test label'); + } + }); +}); diff --git a/src/components/icons.tsx b/src/components/icons.tsx index e17ab3b3..2ad6e5fa 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -550,3 +550,272 @@ export function CircleCheckIcon(props: IconProps): JSX.Element { ); } + +interface StrokeSvgIconProps extends IconProps { + children: JSX.Element; + viewBox?: string; + strokeWidth: number | string; + roundCaps?: boolean; + roundJoins?: boolean; +} + +/** Stroke-drawn glyphs (fill="none"): attributes mirror what the call sites pasted. */ +function StrokeSvgIcon(props: StrokeSvgIconProps): JSX.Element { + const size = () => props.size ?? 16; + + return ( + + {props.title ? {props.title} : null} + {props.children} + + ); +} + +/** The parallel-bars logo from the window title bar. */ +export function LogoIcon(props: IconProps): JSX.Element { + return ( + + + + + + + ); +} + +/** Thin 10x10 window controls (custom title bar). */ +export function MinimizeIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +export function MaximizeIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +export function RestoreIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +export function CloseThinIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Coordinator/bot marker shown next to agent-driven tasks. */ +export function BotIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Filled chevron for collapsible section headers; see also ChevronDownIcon above. */ +export function ChevronDownAltIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Chunky plus for "create" affordances; PlusIcon above is the inline-text variant. */ +export function PlusLargeIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Compact plus that stays legible at 13px and below. */ +export function PlusSmallIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Single horizontal bar: the collapsed-task affordance. */ +export function MinusIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Keyboard: the shortcuts cheat-sheet affordance in the sidebar footer. */ +export function KeyboardIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Side panel with a divider: toggles the task canvas. */ +export function PanelRightIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Corners-in brackets: shown while unfocused as the enter-focus affordance in the document workspace, and always on the task title bar. */ +export function CollapseAltIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Check inside a circle: the Finish (merge or push) button's idle glyph. */ +export function CheckCircleIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Terminal window chrome (panel-layout toggle); see also the prompt-style TerminalIcon above. */ +export function TerminalAltIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Two side-by-side panels: the split-terminal layout toggle. */ +export function ColumnsIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Phone handset: remote-access affordances. */ +export function PhoneIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Crossing strokes: the Arena (agent-vs-agent) affordance. */ +export function ScrambleIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Stroke-drawn download; see also the filled DownloadIcon above. */ +export function DownloadAltIcon(props: IconProps): JSX.Element { + return ( + + + + + + ); +} + +/** Circular arrow: restart to install an update. */ +export function RefreshIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Oversized check for success states (phone connected). */ +export function CheckLargeIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** The GitHub octocat mark; GitHubIcon above is this project's own glyph. */ +export function GitHubMarkIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Gear: project settings — name, folder and agents. */ +export function GearIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Filled octicon chevron for commit-step navigation; see also the stroke ChevronLeftIcon above. */ +export function ChevronLeftAltIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Lit bulb: the thinking-tours affordance in the sidebar footer. */ +export function LightbulbIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +}