From 1cf75ba6e3757425addce63d20ae5a58bd1e4df7 Mon Sep 17 00:00:00 2001 From: truongthinh1412 <9260650+truongthinh1412@users.noreply.github.com> Date: Sat, 17 Oct 2026 22:42:57 +0700 Subject: [PATCH 1/2] refactor(ui): migrate app chrome icons to the shared icon module (tranche 1) --- src/App.tsx | 12 +- src/components/ConnectPhoneModal.tsx | 15 +- src/components/NewTaskPlaceholder.tsx | 5 +- src/components/Sidebar.tsx | 65 ++----- src/components/SidebarFooter.tsx | 59 +----- src/components/TaskAITerminal.tsx | 36 +--- src/components/TaskTitleBar.tsx | 40 +--- src/components/TilingLayout.tsx | 22 +-- src/components/UpdateButton.tsx | 38 +--- src/components/WindowTitleBar.tsx | 43 +--- src/components/WorkspaceControls.tsx | 17 +- src/components/icons.client.test.tsx | 71 +++++++ src/components/icons.tsx | 269 ++++++++++++++++++++++++++ 13 files changed, 402 insertions(+), 290 deletions(-) create mode 100644 src/components/icons.client.test.tsx diff --git a/src/App.tsx b/src/App.tsx index 9514c538c..3a84ea87d 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 efe0ef2a3..94021f955 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 e279c4a43..3e6c71a91 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 a519051c4..e4d615075 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 94e890337..78bc4f6b4 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 a092da25c..cc18d45d8 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 673e07997..1b3f8a850 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 9befc69cb..01ce34d92 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 07502c7db..04b3d1763 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 000000000..524df49cd --- /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 e17ab3b37..2ad6e5fa2 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 ( + + + + + ); +} From 55504740dc31a530e277d66beda0dc329e355ff2 Mon Sep 17 00:00:00 2001 From: truongthinh1412 <9260650+truongthinh1412@users.noreply.github.com> Date: Sat, 17 Oct 2026 22:50:54 +0700 Subject: [PATCH 2/2] refactor(ui): migrate documents and arena icons to the shared module (tranche 2) --- src/arena/ArenaOverlay.tsx | 15 +- src/arena/BattleScreen.tsx | 5 +- src/arena/ConfigScreen.tsx | 17 +- src/arena/HistoryScreen.tsx | 27 +-- src/arena/ResultsScreen.tsx | 113 ++------- src/components/CanvasTabStrip.tsx | 10 +- src/components/ChangeTourButton.tsx | 36 +-- src/components/NewTaskPanel.tsx | 22 +- src/components/Sidebar.tsx | 2 +- src/components/TaskAITerminal.tsx | 2 +- src/components/TerminalSelectionMenu.tsx | 3 +- src/components/icons.tsx | 219 ++++++++++++++++++ src/documents/AnnotationMarker.tsx | 20 +- src/documents/BlockActions.tsx | 33 +-- src/documents/DocumentIcon.tsx | 19 -- src/documents/DocumentWorkspacePanel.tsx | 91 ++------ src/documents/FileTreePanel.tsx | 16 +- .../RunComposer.draft.client.test.tsx | 31 +++ src/documents/RunComposer.tsx | 6 +- 19 files changed, 357 insertions(+), 330 deletions(-) delete mode 100644 src/documents/DocumentIcon.tsx diff --git a/src/arena/ArenaOverlay.tsx b/src/arena/ArenaOverlay.tsx index a5f49d231..ef5f3beaf 100644 --- a/src/arena/ArenaOverlay.tsx +++ b/src/arena/ArenaOverlay.tsx @@ -5,6 +5,7 @@ import './arena-battle.css'; import './arena-results.css'; import './arena-history.css'; import { Show, onMount } from 'solid-js'; +import { ScrambleIcon } from '../components/icons'; import { arenaStore } from './store'; import { loadArenaPresets, loadArenaHistory } from './persistence'; import { ConfigScreen } from './ConfigScreen'; @@ -31,19 +32,7 @@ export function ArenaOverlay(props: ArenaOverlayProps) {
- - - - + AI Arena
diff --git a/src/arena/ConfigScreen.tsx b/src/arena/ConfigScreen.tsx index 6cc362cec..dac7981b6 100644 --- a/src/arena/ConfigScreen.tsx +++ b/src/arena/ConfigScreen.tsx @@ -19,7 +19,7 @@ import { invoke } from '../lib/ipc'; import { IPC } from '../../electron/ipc/channels'; import { saveArenaPresets } from './persistence'; import { ProjectSelect } from '../components/ProjectSelect'; -import { CloseIcon, HistoryIcon, PlusIcon } from '../components/icons'; +import { CloseIcon, HistoryIcon, PlusIcon, ScrambleIcon } from '../components/icons'; import { MAX_COMPETITORS, MIN_COMPETITORS } from './store'; import type { BattleCompetitor } from './types'; @@ -221,20 +221,7 @@ export function ConfigScreen() { {/* Actions */}
diff --git a/src/arena/HistoryScreen.tsx b/src/arena/HistoryScreen.tsx index f0bac0db5..a23c656c5 100644 --- a/src/arena/HistoryScreen.tsx +++ b/src/arena/HistoryScreen.tsx @@ -4,6 +4,7 @@ import { saveArenaHistory } from './persistence'; import { formatDuration } from './utils'; import { confirm } from '../lib/dialog'; import { invoke } from '../lib/ipc'; +import { ChevronLeftThinIcon, TrashAltIcon } from '../components/icons'; import { IPC } from '../../electron/ipc/channels'; function formatDate(iso: string): string { @@ -82,18 +83,7 @@ export function HistoryScreen() { class="arena-close-btn" onClick={() => setPhase(arenaStore.previousPhase ?? 'config')} > - - - + Back
@@ -123,18 +113,7 @@ export function HistoryScreen() { title="Delete match and clean up worktrees" > ...}> - - - + diff --git a/src/arena/ResultsScreen.tsx b/src/arena/ResultsScreen.tsx index b6b14cc30..7af8457c4 100644 --- a/src/arena/ResultsScreen.tsx +++ b/src/arena/ResultsScreen.tsx @@ -1,4 +1,14 @@ import { For, Show, createMemo, createSignal, onMount } from 'solid-js'; +import { + ChevronLeftThinIcon, + ClockAltIcon, + CompareIcon, + MergeIcon, + PlusThinIcon, + ShieldAltIcon, + StarIcon, + SyncAltIcon, +} from '../components/icons'; import { ChangedFilesList } from '../components/ChangedFilesList'; import { DiffViewerDialog } from '../components/DiffViewerDialog'; import { CommitDialog } from './CommitDialog'; @@ -259,9 +269,7 @@ export function ResultsScreen() { onClick={() => setRating(competitor.id, star)} title={`${star} star${star > 1 ? 's' : ''}`} > - - - + )} @@ -280,21 +288,7 @@ export function ResultsScreen() { disabled={merge.merging() || merge.mergedId() !== null} onClick={() => merge.handleMergeClick(competitor)} > - - - - - - + {merge.merging() ? 'Merging...' : 'Merge'} @@ -312,104 +306,33 @@ export function ResultsScreen() {
- - - - + {projectLabel()}
diff --git a/src/components/CanvasTabStrip.tsx b/src/components/CanvasTabStrip.tsx index a524102fb..e0202f709 100644 --- a/src/components/CanvasTabStrip.tsx +++ b/src/components/CanvasTabStrip.tsx @@ -4,12 +4,18 @@ import { sf } from '../lib/fontScale'; import { canvasTabKey } from '../lib/canvas-tabs'; import type { CanvasTab, CanvasTabKind } from '../store/types'; import { IconButton } from './IconButton'; -import { CloseIcon, ExpandIcon, ExternalLinkIcon, PlusIcon, ScreenNormalIcon } from './icons'; +import { + CloseIcon, + DocumentIcon, + ExpandIcon, + ExternalLinkIcon, + PlusIcon, + ScreenNormalIcon, +} from './icons'; import { UnderstandButton, tourButtonStyle } from './understanding/UnderstandButton'; import type { UnderstandingTourController } from '../lib/create-understanding-tour'; import { isTourFilePath } from '../lib/tour-file'; import { isEditableDocumentPath } from '../lib/document-path'; -import { DocumentIcon } from '../documents/DocumentIcon'; interface CanvasTabStripProps { tabs: CanvasTab[]; diff --git a/src/components/ChangeTourButton.tsx b/src/components/ChangeTourButton.tsx index 55d08d7ab..b04a52d1f 100644 --- a/src/components/ChangeTourButton.tsx +++ b/src/components/ChangeTourButton.tsx @@ -12,6 +12,7 @@ import { import { store } from '../store/store'; import { askCodeLabel } from './understanding/ask-code-label'; import { TourModelMenu } from './understanding/TourModelMenu'; +import { ArrowRightThinIcon, CloseAltIcon, CycleIcon } from './icons'; export function ChangeTourButton(props: { tour: ChangeTourController; @@ -117,26 +118,7 @@ export function ChangeTourButton(props: {
{props.children} diff --git a/src/components/NewTaskPanel.tsx b/src/components/NewTaskPanel.tsx index 721219792..f018a5ba7 100644 --- a/src/components/NewTaskPanel.tsx +++ b/src/components/NewTaskPanel.tsx @@ -20,7 +20,15 @@ import { createFocusRestore } from '../lib/focus-restore'; import { topDialog } from '../lib/dialog-stack'; import { registerFocusFn, unregisterFocusFn } from '../store/focused-panel'; import { setStore } from '../store/core'; -import { ContainerIcon, FolderIcon, GitBranchIcon, GitHubIcon, PlusIcon, SyncIcon } from './icons'; +import { + ChevronRightThinIcon, + ContainerIcon, + FolderIcon, + GitBranchIcon, + GitHubIcon, + PlusIcon, + SyncIcon, +} from './icons'; import { ConfirmDialog } from './ConfirmDialog'; import { errMessage } from '../lib/log'; import { invoke } from '../lib/ipc'; @@ -1420,16 +1428,10 @@ export function NewTaskPanel(props: NewTaskPanelProps) { cursor: 'pointer', }} > - + /> Advanced options diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 3e6c71a91..5220ee9f7 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -6,6 +6,7 @@ import type { JSX } from 'solid-js'; import { BotIcon, ChevronDownAltIcon, + DocumentIcon, FolderIcon, GitHubIcon, KanbanIcon, @@ -54,7 +55,6 @@ import { EditProjectDialog } from './EditProjectDialog'; import { AddProjectDialog } from '../documents/AddProjectDialog'; import { openDocumentWorkspace } from '../documents/store'; import { codeProjects, isDocumentProject } from '../store/projects'; -import { DocumentIcon } from '../documents/DocumentIcon'; import { ImportWorktreesDialog } from './ImportWorktreesDialog'; import { SidebarFooter } from './SidebarFooter'; import { IconButton } from './IconButton'; diff --git a/src/components/TaskAITerminal.tsx b/src/components/TaskAITerminal.tsx index e5586912f..1e2a836b3 100644 --- a/src/components/TaskAITerminal.tsx +++ b/src/components/TaskAITerminal.tsx @@ -35,7 +35,6 @@ import { AgentChatView } from './AgentChatView'; import { isAgentChat, agentChatProvider, agentChatUnavailableReason } from '../store/agent-chat'; import { agentViewHandsOff, agentViewSwitchCost, switchMainAgentView } from '../store/agent-view'; import { setStore } from '../store/core'; -import { DocumentIcon } from '../documents/DocumentIcon'; import { isEditableDocumentPath } from '../lib/document-path'; import { editAsDocument } from '../documents/store'; import { saveState } from '../store/persistence'; @@ -49,6 +48,7 @@ import { CloseIcon, ColumnsIcon, CommentIcon, + DocumentIcon, ExternalLinkIcon, EyeIcon, CopyIcon, diff --git a/src/components/TerminalSelectionMenu.tsx b/src/components/TerminalSelectionMenu.tsx index ef293b0e1..a10ec1122 100644 --- a/src/components/TerminalSelectionMenu.tsx +++ b/src/components/TerminalSelectionMenu.tsx @@ -1,7 +1,6 @@ import { createSignal, For, onMount, Show, untrack } from 'solid-js'; import { Portal } from 'solid-js/web'; -import { CopyIcon, EyeIcon, SendIcon } from './icons'; -import { DocumentIcon } from '../documents/DocumentIcon'; +import { CopyIcon, DocumentIcon, EyeIcon, SendIcon } from './icons'; /** Selection text is captured before opening, so focus changes cannot alter the handoff. */ export function TerminalSelectionMenu(props: { diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 2ad6e5fa2..1272e2d2b 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -819,3 +819,222 @@ export function LightbulbIcon(props: IconProps): JSX.Element { ); } + +/** Stroke-drawn bar: minimize the document workspace back to the sidebar. */ +export function MinimizeBarIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Filled octicon chevron for commit-step navigation; see also the stroke ChevronRightIcon above. */ +export function ChevronRightAltIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Sharp stroke chevron on the Advanced options disclosure; see also ChevronRightIcon above. */ +export function ChevronRightThinIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Rounded stroke chevron for Arena back buttons; see also ChevronLeftIcon above. */ +export function ChevronLeftThinIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Corners-out brackets: shown while focus mode is active, as the exit-focus affordance; pairs with CollapseAltIcon. */ +export function ExpandAltIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Margins with in/out arrows: the reading-width toggle in the document toolbar. */ +export function FullWidthIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Outline folder: reveal the project folder in the file manager; FolderIcon above is filled. */ +export function FolderOpenIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** The document-project glyph: sidebar rows, the workspace header and the file tree. */ +export function DocumentIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Stroke-drawn note card in the annotation margin; CommentIcon above is the speech bubble. */ +export function CommentAltIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Note card with lines: the composer's note mode. */ +export function NoteIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Circled question mark: the composer's ask mode. */ +export function QuestionIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Filled square: stop a running arena competitor; StopIcon above is the octagon. */ +export function StopAltIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Stroke-drawn trash bin: delete a history match; TrashIcon above is the filled one. */ +export function TrashAltIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Five-pointed star: rate an arena competitor's approach. */ +export function StarIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Cradle joining two nodes: merge a worktree into the project's main branch. */ +export function MergeIcon(props: IconProps): JSX.Element { + return ( + + + + + + + ); +} + +/** Boxed shield: the arena project's container; ShieldIcon above is the filled badge. */ +export function ShieldAltIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Two ruled columns: compare every arena approach side by side. */ +export function CompareIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Chasing arrows: run the arena match again; SyncIcon above is the filled one. */ +export function SyncAltIcon(props: IconProps): JSX.Element { + return ( + + + + + + + ); +} + +/** Stroke-drawn plus: start a fresh arena match. */ +export function PlusThinIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Stroke-drawn clock face: arena match history; ClockIcon above is the filled one. */ +export function ClockAltIcon(props: IconProps): JSX.Element { + return ( + + + + + ); +} + +/** Two nodes joined by a loop: generate a tour of the changes. */ +export function CycleIcon(props: IconProps): JSX.Element { + return ( + + + + + + ); +} + +/** Stroke-drawn X: cancel tour generation; CloseThinIcon above is the 10x10 window control. */ +export function CloseAltIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Stroke-drawn arrow: the tour button's go affordance once it is idle. */ +export function ArrowRightThinIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} diff --git a/src/documents/AnnotationMarker.tsx b/src/documents/AnnotationMarker.tsx index a35de063f..6c7a705bb 100644 --- a/src/documents/AnnotationMarker.tsx +++ b/src/documents/AnnotationMarker.tsx @@ -9,6 +9,7 @@ import { import { AnnotationBubble } from './AnnotationBubble'; import type { DocumentAnnotation } from './types'; import { focusAnnotation, registerPinnedBubble, workspaceUi } from './workspace-ui'; +import { CommentAltIcon } from '../components/icons'; interface AnnotationMarkerProps { /** Portalled controls must follow their owning panel’s visibility. */ @@ -172,24 +173,7 @@ export function AnnotationMarker(props: AnnotationMarkerProps) { > {/* A question waiting on its agent spins in the margin, so the wait is visible without opening the bubble to read "Answering…". */} - {nodeProps.node.name} diff --git a/src/documents/RunComposer.draft.client.test.tsx b/src/documents/RunComposer.draft.client.test.tsx index a1ceafeae..4b1dd59a7 100644 --- a/src/documents/RunComposer.draft.client.test.tsx +++ b/src/documents/RunComposer.draft.client.test.tsx @@ -1,6 +1,8 @@ import { render } from 'solid-js/web'; import { afterEach, describe, expect, it, vi } from 'vitest'; import { setStore } from '../store/core'; +import { GitGraphIcon, NoteIcon, QuestionIcon } from '../components/icons'; +import { ActionIcon, BLOCK_ACTIONS } from './BlockActions'; import { RunComposer } from './RunComposer'; import { documentStore, setDocumentComposerDraft, type DocumentSelection } from './store'; import type { DocumentBlock } from './markdown-blocks'; @@ -39,6 +41,35 @@ const passage: DocumentSelection = { wholeDocument: false, }; +describe('block action glyphs', () => { + it('points every action at its shared icon-module component', () => { + expect(BLOCK_ACTIONS.find((a) => a.kind === 'proposals')?.icon).toBe(GitGraphIcon); + expect(BLOCK_ACTIONS.find((a) => a.kind === 'note')?.icon).toBe(NoteIcon); + expect(BLOCK_ACTIONS.find((a) => a.kind === 'question')?.icon).toBe(QuestionIcon); + }); + + it('renders the same glyph body as the module icon itself', () => { + for (const action of BLOCK_ACTIONS) { + const host = document.createElement('div'); + document.body.append(host); + const Icon = action.icon; + disposers.push( + render( + () => ( + <> + + + + ), + host, + ), + ); + const [fromAction, fromModule] = Array.from(host.querySelectorAll('path')); + expect(fromAction.getAttribute('d'), action.kind).toBe(fromModule.getAttribute('d')); + } + }); +}); + describe('RunComposer draft mode', () => { it('opens on the mode a hover action asked for', () => { setDocumentComposerDraft({ text: '', mode: 'note' }); diff --git a/src/documents/RunComposer.tsx b/src/documents/RunComposer.tsx index 31a6c57b0..509dba231 100644 --- a/src/documents/RunComposer.tsx +++ b/src/documents/RunComposer.tsx @@ -39,7 +39,7 @@ import type { DocumentModelChoice } from '../store/types'; import { ModelRows, type ChoiceSlot, type ModelSlot } from './ModelRows'; import { buildInteractivePrompt } from './interactive-prompt'; import { sendToDocumentAgent } from './agent-task'; -import { SendIcon, SparkleIcon } from '../components/icons'; +import { CloseIcon, SendIcon, SparkleIcon } from '../components/icons'; interface RunComposerProps { /** The picked passage; null means the whole document. */ @@ -484,9 +484,7 @@ export function RunComposer(props: RunComposerProps) { title="Close · Esc" onClick={close} > - +