Skip to content

refactor(ui): migrate app chrome icons to the shared icon module (tranche 1) #276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
truongthinh1412 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(ui): migrate app chrome icons to the shared icon module (tranche 1) #276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 })),
Expand Down Expand Up @@ -161,15 +161,7 @@ function DropOverlay() {
'backdrop-filter': 'blur(4px)',
}}
>
<svg
width="48"
height="48"
viewBox="0 0 16 16"
fill={theme.accent}
style={{ opacity: '0.9' }}
>
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
</svg>
<GitHubMarkIcon size={48} style={{ color: theme.accent, opacity: '0.9' }} />
<span
style={{
color: theme.fg,
Expand Down
15 changes: 2 additions & 13 deletions src/components/ConnectPhoneModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { theme } from '../lib/theme';
import { invoke } from '../lib/ipc';
import { IPC } from '../../electron/ipc/channels';
import type { RemoteAccess } from '../store/types';
import { CloseIcon, SyncIcon } from './icons';
import { CheckLargeIcon, CloseIcon, SyncIcon } from './icons';

type NetworkMode = 'wifi' | 'tailscale';

Expand Down Expand Up @@ -476,18 +476,7 @@ export function ConnectPhoneModal(props: ConnectPhoneModalProps) {
gap: '8px',
}}
>
<svg
width="48"
height="48"
viewBox="0 0 24 24"
fill="none"
stroke={theme.success}
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 6L9 17l-5-5" />
</svg>
<CheckLargeIcon size={48} style={{ color: theme.success }} />
<span style={{ 'font-size': '15px', color: theme.success, 'font-weight': '500' }}>
{store.remoteAccess.connectedClients} client(s) connected
</span>
Expand Down
5 changes: 2 additions & 3 deletions src/components/NewTaskPlaceholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -62,9 +63,7 @@ export function NewTaskPlaceholder() {
style={{ ...ghostStyle, flex: '1' }}
title={`New task (${mod}+N)`}
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
</svg>
<PlusLargeIcon />
</div>

{/* Terminal button — same width, fixed height */}
Expand Down
65 changes: 18 additions & 47 deletions src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -119,17 +126,7 @@ function createOffscreenAttentionState(taskId: () => string) {

/** Small bot/coordinator icon (16x16 SVG). */
function CoordinatorIcon() {
return (
<svg
width="12"
height="12"
viewBox="0 0 16 16"
fill="currentColor"
style={{ 'flex-shrink': '0', opacity: '0.7' }}
>
<path d="M8 1a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V6h3a2 2 0 0 1 2 2v1.27A2 2 0 0 1 15 11a2 2 0 0 1-3 1.73V11a1 1 0 0 0-1-1H9v2.27A2 2 0 0 1 10 14a2 2 0 0 1-4 0c0-.74.4-1.39 1-1.73V10H5a1 1 0 0 0-1 1v1.73A2 2 0 0 1 5 14a2 2 0 0 1-4 0c0-.74.4-1.39 1-1.73V11a2 2 0 0 1-1-1.73V8a2 2 0 0 1 2-2h3V4.73A2 2 0 0 1 6 3a2 2 0 0 1 2-2Z" />
</svg>
);
return <BotIcon size={12} style={{ 'flex-shrink': '0', opacity: '0.7' }} />;
}

function DirectBranchBadge(props: { branchName: string }) {
Expand Down Expand Up @@ -220,20 +217,14 @@ export function ProjectTaskGroupToggle(props: {
gap: '5px',
}}
>
<svg
width="12"
height="12"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
<ChevronDownAltIcon
size={12}
style={{
'flex-shrink': '0',
transform: props.collapsed ? 'rotate(-90deg)' : 'none',
transition: 'transform 0.15s ease',
}}
>
<path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" />
</svg>
/>
<ProjectSwatch color={props.project.color} size={6} />
<span
style={{
Expand Down Expand Up @@ -638,20 +629,14 @@ export function Sidebar() {
color: theme.fgMuted,
}}
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
<ChevronDownAltIcon
size={16}
style={{
'flex-shrink': '0',
transform: store.projectsCollapsed ? 'rotate(-90deg)' : 'none',
transition: 'transform 0.15s ease',
}}
>
<path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" />
</svg>
/>
<span
style={{
'font-size': sf(12),
Expand All @@ -663,11 +648,7 @@ export function Sidebar() {
</span>
</button>
<IconButton
icon={
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
</svg>
}
icon={<PlusLargeIcon />}
onClick={handleAddProject}
title="Add project"
size="sm"
Expand Down Expand Up @@ -872,15 +853,7 @@ export function Sidebar() {
width: '100%',
}}
>
<svg
width="14"
height="14"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
>
<path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.22.78 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2A1.75 1.75 0 0 0 5 1H1.75Z" />
</svg>
<FolderIcon size={14} />
Link Project
</button>
}
Expand All @@ -904,9 +877,7 @@ export function Sidebar() {
width: '100%',
}}
>
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
<path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
</svg>
<PlusLargeIcon size={14} />
New Task
</button>
</Show>
Expand Down
59 changes: 5 additions & 54 deletions src/components/SidebarFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down Expand Up @@ -70,20 +71,7 @@ export function SidebarFooter(props: { onConnectPhone: () => void }) {
phoneConnected() ? 'Phone connected: manage remote access' : 'Connect phone'
}
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
<line x1="12" y1="18" x2="12.01" y2="18" />
</svg>
<PhoneIcon size={14} />
<span>Phone access</span>
<Show when={phoneConnected()}>
<span class="sidebar-footer-connected-dot" aria-hidden="true" />
Expand All @@ -95,20 +83,7 @@ export function SidebarFooter(props: { onConnectPhone: () => void }) {
type="button"
class="sidebar-footer-action"
>
<svg
width="14"
height="14"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M3 3L13 13M9 12L12 9" />
<path d="M13 3L3 13M4 9L7 12" />
</svg>
<ScrambleIcon size={14} />
Arena
</button>
<button
Expand All @@ -117,20 +92,7 @@ export function SidebarFooter(props: { onConnectPhone: () => void }) {
type="button"
class="sidebar-footer-action"
>
<svg
width="14"
height="14"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M8 1.75a4.25 4.25 0 0 0-2.55 7.65c.5.38.8.95.8 1.58v.27h3.5v-.27c0-.63.3-1.2.8-1.58A4.25 4.25 0 0 0 8 1.75Z" />
<path d="M6.5 13.75h3" />
</svg>
<LightbulbIcon size={14} />
Thinking
</button>

Expand All @@ -142,18 +104,7 @@ export function SidebarFooter(props: { onConnectPhone: () => void }) {
title={`Keyboard shortcuts (${mod}+/). Switch panels with ${alt}+Arrows.`}
>
<span class="sidebar-footer-action-label">
<svg
width="14"
height="14"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="1.25"
aria-hidden="true"
>
<rect x="1.5" y="3.5" width="13" height="9" rx="1" />
<path d="M4 6h1m2 0h1m2 0h2M4 8.5h1m2 0h1m2 0h2M5 10.5h6" />
</svg>
<KeyboardIcon size={14} />
Shortcuts
</span>
<kbd>{mod} /</kbd>
Expand Down
36 changes: 8 additions & 28 deletions src/components/TaskAITerminal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,15 @@ import { ConfirmDialog } from './ConfirmDialog';
import {
CheckIcon,
CloseIcon,
ColumnsIcon,
CommentIcon,
ExternalLinkIcon,
EyeIcon,
CopyIcon,
PlayIcon,
PlusSmallIcon,
SyncIcon,
TerminalAltIcon,
TerminalIcon,
} from './icons';
import { theme } from '../lib/theme';
Expand Down Expand Up @@ -474,31 +478,11 @@ export function TaskAITerminal(props: TaskAITerminalProps) {
when={tabsMode()}
fallback={
/* Currently side-by-side → click switches to tabs (one panel). */
<svg
width="13"
height="13"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="1.3"
>
<rect x="2" y="2.75" width="12" height="10.5" rx="1.25" />
<path d="M2 5.75 H14" />
</svg>
<TerminalAltIcon size={13} />
}
>
{/* Currently tabbed → click switches to side-by-side columns. */}
<svg
width="13"
height="13"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="1.3"
>
<rect x="2" y="2.75" width="5" height="10.5" rx="1.25" />
<rect x="9" y="2.75" width="5" height="10.5" rx="1.25" />
</svg>
<ColumnsIcon size={13} />
</Show>
</button>
</Show>
Expand Down Expand Up @@ -708,9 +692,7 @@ function AddAgentMenu(props: { taskId: string }) {
padding: '0',
}}
>
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 2.75a.75.75 0 0 1 .75.75v3.75h3.75a.75.75 0 0 1 0 1.5H8.75v3.75a.75.75 0 0 1-1.5 0V8.75H3.5a.75.75 0 0 1 0-1.5h3.75V3.5A.75.75 0 0 1 8 2.75Z" />
</svg>
<PlusSmallIcon size={13} />
</button>
<Show when={open()}>
<div
Expand Down Expand Up @@ -1143,9 +1125,7 @@ function MarkdownViewerDialog(props: {
}}
title="Open in editor"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M3.5 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-3a.75.75 0 0 1 1.5 0v3A3 3 0 0 1 12.5 16h-9A3 3 0 0 1 0 12.5v-9A3 3 0 0 1 3.5 0h3a.75.75 0 0 1 0 1.5h-3ZM10 .75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V2.56L8.53 8.53a.75.75 0 0 1-1.06-1.06L13.44 1.5H10.75A.75.75 0 0 1 10 .75Z" />
</svg>
<ExternalLinkIcon />
</button>
</Show>
<Show when={props.onEditAsDocument && isEditableDocumentPath(props.filePath)}>
Expand Down
Loading