diff --git a/src/App.tsx b/src/App.tsx index a20ea4906..1c87b0546 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -153,7 +153,7 @@ import { startAgentHookStatusListener } from './store/agentHookStatus'; import { applyPlanContent } from './store/canvas'; import { startBackgroundChecks } from './store/background-checks'; import type { PlanContentMessage } from './store/canvas'; -import { CircleCheckIcon, SyncIcon } from './components/icons'; +import { CircleCheckIcon, GitHubMarkIcon, SyncIcon } from './components/icons'; const ThinkingSpace = lazy(() => import('./components/thinking/ThinkingSpace').then((m) => ({ default: m.ThinkingSpace })), @@ -181,15 +181,7 @@ function DropOverlay() { 'backdrop-filter': 'blur(4px)', }} > - - - +
- - - - + AI Arena
diff --git a/src/arena/ConfigScreen.tsx b/src/arena/ConfigScreen.tsx index 06f6f254c..b47a192a3 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'; @@ -220,20 +220,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..37d506920 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, + BoxIcon, + 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 ea54b7a44..1af72f88a 100644 --- a/src/components/CanvasTabStrip.tsx +++ b/src/components/CanvasTabStrip.tsx @@ -4,13 +4,19 @@ 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 { focusFirstMenuItem, handleMenuKeyDown } from '../lib/menu-keys'; -import { DocumentIcon } from '../documents/DocumentIcon'; interface CanvasTabStripProps { tabs: CanvasTab[]; diff --git a/src/components/ChangeTourButton.tsx b/src/components/ChangeTourButton.tsx index 13656f0bf..21fcfd182 100644 --- a/src/components/ChangeTourButton.tsx +++ b/src/components/ChangeTourButton.tsx @@ -14,6 +14,7 @@ import { activeFeatureHint } from '../store/onboarding'; import { CloseIcon } from './icons'; import { askCodeLabel } from './understanding/ask-code-label'; import { TourModelMenu } from './understanding/TourModelMenu'; +import { ArrowRightThinIcon, CycleIcon } from './icons'; /** Hover help waits this long, so a pointer passing over the button does not flash it. */ const HELP_HOVER_DELAY_MS = 500; @@ -149,26 +150,7 @@ export function ChangeTourButton(props: {
{props.children} diff --git a/src/components/MarkdownViewerDialog.tsx b/src/components/MarkdownViewerDialog.tsx index 76975f8f4..5e5964461 100644 --- a/src/components/MarkdownViewerDialog.tsx +++ b/src/components/MarkdownViewerDialog.tsx @@ -1,7 +1,8 @@ +import { DocumentIcon } from './icons'; import { Show, createSignal, onCleanup } from 'solid-js'; import type { JSX } from 'solid-js'; import { IPC } from '../../electron/ipc/channels'; -import { DocumentIcon } from '../documents/DocumentIcon'; + import { editAsDocument } from '../documents/store'; import { isEditableDocumentPath } from '../lib/document-path'; import { sf } from '../lib/fontScale'; diff --git a/src/components/NewTaskPanel.tsx b/src/components/NewTaskPanel.tsx index 1ac9c5b44..67720946a 100644 --- a/src/components/NewTaskPanel.tsx +++ b/src/components/NewTaskPanel.tsx @@ -24,7 +24,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 { withViewTransition } from '../lib/viewTransition'; @@ -1584,16 +1592,10 @@ export function NewTaskPanel(props: NewTaskPanelProps) { cursor: 'pointer', }} > - + /> Advanced options diff --git a/src/components/NewTaskPlaceholder.tsx b/src/components/NewTaskPlaceholder.tsx index d2288f500..9594f5022 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'; import { withViewTransition } from '../lib/viewTransition'; /** Quiet ghost surface: a faint fill instead of a dashed wireframe border, so @@ -63,9 +64,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 4500aeba5..7bca8921d 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 { ClockIcon } from './icons'; +import { + BotIcon, + ChevronDownAltIcon, + ClockIcon, + DocumentIcon, + FolderIcon, + PlusLargeIcon, +} from './icons'; import { createTaskContextMenu } from './task-context-menu'; import { errMessage } from '../lib/log'; import { @@ -47,7 +54,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'; @@ -123,17 +129,7 @@ function createOffscreenAttentionState(taskId: () => string) { /** Small bot/coordinator icon (16x16 SVG). */ function CoordinatorIcon() { - return ( - - - - ); + return ; } function DirectBranchBadge(props: { branchName: string }) { @@ -231,20 +227,14 @@ export function ProjectTaskGroupToggle(props: { gap: '5px', }} > - + /> - + /> - - - } + icon={} onClick={handleAddProject} title="Add project" size="sm" @@ -843,15 +823,7 @@ export function Sidebar() { width: '100%', }} > - + Add project } @@ -875,9 +847,7 @@ export function Sidebar() { width: '100%', }} > - - - + New Task diff --git a/src/components/SidebarFooter.tsx b/src/components/SidebarFooter.tsx index a519051c4..c674b2376 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 { IdeaIcon, KeyboardIcon, 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 @@ -641,9 +631,7 @@ function AddAgentMenu(props: { taskId: string }) { padding: '0', }} > - - - +
} > - - - + {props.pushing ? 'Pushing…' : props.pushSuccess ? 'Pushed' : 'Finish'} 0 || generating().length > 0)}> @@ -197,19 +203,7 @@ export function TaskTitleBar(props: TaskTitleBarProps) {
- - - - } + icon={} onClick={() => isTaskCanvasVisible(props.task) ? closeTaskCanvas(props.task.id) @@ -219,11 +213,7 @@ export function TaskTitleBar(props: TaskTitleBarProps) { pressed={isTaskCanvasVisible(props.task)} /> - - - } + icon={} onClick={() => { const taskId = props.task.id; // The button bypasses the title bar's tap-to-activate; activate before the diff --git a/src/components/TerminalSelectionMenu.tsx b/src/components/TerminalSelectionMenu.tsx index 5b65fdcd8..0d7ebf158 100644 --- a/src/components/TerminalSelectionMenu.tsx +++ b/src/components/TerminalSelectionMenu.tsx @@ -1,8 +1,7 @@ import { createSignal, For, onMount, Show, untrack } from 'solid-js'; import type { JSX } 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'; /** An entry of a clicked link's menu; the menu closes after `run`. */ export interface TerminalLinkAction { diff --git a/src/components/TilingLayout.tsx b/src/components/TilingLayout.tsx index 85019d0f5..1568833fe 100644 --- a/src/components/TilingLayout.tsx +++ b/src/components/TilingLayout.tsx @@ -45,7 +45,7 @@ import { mod } from '../lib/platform'; import { createCtrlShiftWheelResizeHandler } from '../lib/wheelZoom'; import { prefersMotion } 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(() => @@ -653,15 +653,7 @@ export function TilingLayout() { color: theme.fgSubtle, }} > - +
pickAndAddProject()} style={emptyStateButtonStyle()} > - + Add 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 eca16459b..c094ef084 100644 --- a/src/components/WindowTitleBar.tsx +++ b/src/components/WindowTitleBar.tsx @@ -3,7 +3,7 @@ import { WorkspaceControls } from './WorkspaceControls'; import { appWindow } from '../lib/window'; import { FocusModeTaskIndicators } from './FocusModeTaskIndicators'; import { TaskBoardControls } from './TaskBoardControls'; -import { AppLogo } from './icons'; +import { AppLogo, CloseThinIcon, MaximizeIcon, MinimizeIcon, RestoreIcon } from './icons'; /** `bare` keeps only the window's own controls, for the welcome screen. */ export function WindowTitleBar(props: { bare?: boolean }) { @@ -109,9 +109,7 @@ export function WindowTitleBar(props: { bare?: boolean }) { aria-label="Minimize window" title="Minimize" > - +
diff --git a/src/components/WorkspaceControls.tsx b/src/components/WorkspaceControls.tsx index 27bc2eb6a..2ea8231b4 100644 --- a/src/components/WorkspaceControls.tsx +++ b/src/components/WorkspaceControls.tsx @@ -11,6 +11,7 @@ import { } from '../store/store'; import { mod } from '../lib/platform'; import { withViewTransition } from '../lib/viewTransition'; +import { ChevronLeftAltIcon, GearIcon } from './icons'; import { FeatureHint } from './FeatureHint'; import { IconButton } from './IconButton'; import { ToggleButton, ToggleGroup } from './ToggleGroup'; @@ -132,25 +133,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/file-link-menu.tsx b/src/components/file-link-menu.tsx index dc794e722..14def0fa6 100644 --- a/src/components/file-link-menu.tsx +++ b/src/components/file-link-menu.tsx @@ -1,7 +1,8 @@ +import { DocumentIcon } from './icons'; import { IPC } from '../../electron/ipc/channels'; import { isExecutablePath } from '../../electron/shared/executable-path'; import { editAsDocument } from '../documents/store'; -import { DocumentIcon } from '../documents/DocumentIcon'; + import { isMarkdownPath } from '../lib/canvas-tabs'; import { invoke } from '../lib/ipc'; import { errMessage } from '../lib/log'; diff --git a/src/components/icons.client.test.tsx b/src/components/icons.client.test.tsx new file mode 100644 index 000000000..d6ad32004 --- /dev/null +++ b/src/components/icons.client.test.tsx @@ -0,0 +1,90 @@ +import type { JSX } from 'solid-js'; +import { render } from 'solid-js/web'; +import { afterEach, describe, expect, it } from 'vitest'; +import * as icons from './icons'; + +type IconComponent = (props: { size?: number; title?: string }) => JSX.Element; + +const disposers: Array<() => void> = []; + +afterEach(() => { + while (disposers.length > 0) disposers.pop()?.(); + document.body.replaceChildren(); +}); + +/** `EvidenceNoteIcon` draws its own 16x18 box at a 14px default and ignores + * `title`, and `AppLogo` is sized by CSS with no size/title props at all, so + * neither fits the standard square-icon assertions below. Both still get a + * render-smoke check at the bottom of this file. */ +const NONSTANDARD_EXPORTS = new Set(['EvidenceNoteIcon', 'AppLogo']); + +/** Every standard exported icon component, so the module stays render-covered. */ +const ALL_ICONS = Object.values(icons).filter((icon) => !NONSTANDARD_EXPORTS.has(icon.name)); + +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'); + } + }); + + it('still renders the non-standard exports without throwing', () => { + for (const name of NONSTANDARD_EXPORTS) { + const Icon = (icons as unknown as Record)[name]; + const container = document.createElement('div'); + document.body.append(container); + disposers.push(render(() => , container)); + expect(container.querySelector('svg'), name).not.toBeNull(); + } + }); +}); diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 7844ba168..d59a75bd2 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -680,3 +680,443 @@ export function AppLogo(props: { class?: string }): 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} + + ); +} + +/** 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 ( + + + + ); +} + +/** 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 ( + + + + + ); +} + +/** 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 ( + + + + ); +} +/** 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 ( + + + + + + + ); +} + +/** Box with a center seam: the arena project's container; ShieldIcon above is the filled badge. */ +export function BoxIcon(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 arrow: the tour button's go affordance once it is idle. */ +export function ArrowRightThinIcon(props: IconProps): JSX.Element { + return ( + + + + ); +} + +/** Rounded send-arrow for the prompt composer's submit button. */ diff --git a/src/components/project-menu.tsx b/src/components/project-menu.tsx index cf6cfe31e..b2af7e34c 100644 --- a/src/components/project-menu.tsx +++ b/src/components/project-menu.tsx @@ -8,9 +8,15 @@ import { isDocumentProject } from '../store/projects'; import { isProjectMissing, showNotification, startProjectTask, store } from '../store/store'; import type { Project } from '../store/types'; import { ContextMenu, type MoreMenuItem } from './chat/MoreMenu'; -import { DocumentIcon } from '../documents/DocumentIcon'; -import { FolderIcon, GitHubIcon, PencilIcon, PlanIcon, PlusIcon, TrashIcon } from './icons'; - +import { + DocumentIcon, + FolderIcon, + GitHubIcon, + PencilIcon, + PlanIcon, + PlusIcon, + TrashIcon, +} from './icons'; /** Dialogs the menu opens; whoever renders the menu owns them. */ export interface ProjectMenuDialogs { editSettings: (project: Project) => void; 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} > - +