Skip to content

Commit 19656ff

Browse files
klopez4212klopez4212
authored
Normalize desktop icon sizing (#999)
1 parent 7a2e355 commit 19656ff

84 files changed

Lines changed: 253 additions & 206 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎desktop/src/app/AppTopChrome.tsx‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
22

33
import { TopbarSearch } from "@/features/search/ui/TopbarSearch";
44
import type { Channel, SearchHit } from "@/shared/api/types";
5+
import { cn } from "@/shared/lib/cn";
56
import { Button } from "@/shared/ui/button";
67
import { SidebarTrigger, useSidebar } from "@/shared/ui/sidebar";
8+
import { Skeleton } from "@/shared/ui/skeleton";
79

810
type AppTopChromeProps = {
911
canGoBack: boolean;
@@ -16,6 +18,7 @@ type AppTopChromeProps = {
1618
onOpenResult: (hit: SearchHit) => void;
1719
searchHidden?: boolean;
1820
searchFocusRequest: number;
21+
searchLoading?: boolean;
1922
};
2023

2124
function GlobalTopDivider() {
@@ -39,15 +42,19 @@ function CenterColumnTopbarSearch({
3942
onOpenChannel,
4043
onOpenResult,
4144
searchFocusRequest,
45+
searchLoading = false,
4246
}: Pick<
4347
AppTopChromeProps,
4448
| "channels"
4549
| "currentPubkey"
4650
| "onOpenChannel"
4751
| "onOpenResult"
4852
| "searchFocusRequest"
53+
| "searchLoading"
4954
>) {
5055
const { isResizing, state } = useSidebar();
56+
const searchClassName =
57+
"pointer-events-auto w-[220px] max-w-full md:w-[300px] lg:w-[360px] xl:w-[420px] 2xl:w-[480px]";
5158

5259
return (
5360
<div
@@ -59,20 +66,30 @@ function CenterColumnTopbarSearch({
5966
right: 0,
6067
}}
6168
>
62-
<TopbarSearch
63-
channels={channels}
64-
className="pointer-events-auto w-[220px] max-w-full md:w-[300px] lg:w-[360px] xl:w-[420px] 2xl:w-[480px]"
65-
currentPubkey={currentPubkey}
66-
focusRequest={searchFocusRequest}
67-
onOpenChannel={onOpenChannel}
68-
onOpenResult={onOpenResult}
69-
/>
69+
{searchLoading ? (
70+
<div
71+
aria-hidden="true"
72+
className={cn("h-7", searchClassName)}
73+
data-testid="topbar-search-loading"
74+
>
75+
<Skeleton className="h-full w-full rounded-lg" />
76+
</div>
77+
) : (
78+
<TopbarSearch
79+
channels={channels}
80+
className={searchClassName}
81+
currentPubkey={currentPubkey}
82+
focusRequest={searchFocusRequest}
83+
onOpenChannel={onOpenChannel}
84+
onOpenResult={onOpenResult}
85+
/>
86+
)}
7087
</div>
7188
);
7289
}
7390

7491
const TOP_CHROME_ICON_BUTTON_CLASS =
75-
"rounded-[4px] text-muted-foreground/70 hover:bg-border/45 hover:text-foreground";
92+
"h-7 w-7 rounded-[4px] text-muted-foreground/70 hover:bg-border/45 hover:text-foreground [&_svg]:size-4";
7693

7794
export function AppTopChrome({
7895
canGoBack,
@@ -85,6 +102,7 @@ export function AppTopChrome({
85102
onOpenResult,
86103
searchHidden = false,
87104
searchFocusRequest,
105+
searchLoading = false,
88106
}: AppTopChromeProps) {
89107
return (
90108
<>
@@ -94,7 +112,7 @@ export function AppTopChrome({
94112
data-tauri-drag-region
95113
/>
96114
<GlobalTopDivider />
97-
<div className="fixed left-[80px] top-[9px] z-45 flex items-center gap-0.5">
115+
<div className="fixed left-[80px] top-[6px] z-45 flex items-center gap-0.5">
98116
<SidebarTrigger className={TOP_CHROME_ICON_BUTTON_CLASS} />
99117
<Button
100118
aria-label="Go back"
@@ -126,6 +144,7 @@ export function AppTopChrome({
126144
onOpenChannel={onOpenChannel}
127145
onOpenResult={onOpenResult}
128146
searchFocusRequest={searchFocusRequest}
147+
searchLoading={searchLoading}
129148
/>
130149
)}
131150
</>

‎desktop/src/features/agent-memory/ui/MemorySection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export function MemoryRefreshButton({
8585
>
8686
<RefreshCw
8787
className={cn(
88-
iconClassName ?? "h-3.5 w-3.5",
88+
iconClassName ?? "h-4 w-4",
8989
query.isFetching && "animate-spin",
9090
)}
9191
/>
@@ -169,7 +169,7 @@ function MemoryErrorState({
169169
role="alert"
170170
>
171171
<div className="flex items-start gap-2">
172-
<AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-destructive" />
172+
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
173173
<div className="space-y-1">
174174
<div className="font-medium text-destructive">
175175
Couldn't load memory
@@ -196,7 +196,7 @@ function MemoryStaleErrorBanner({ onRetry }: { onRetry: () => void }) {
196196
className="mb-2 flex items-center gap-2 rounded-md border border-warning/30 bg-warning/5 px-2 py-1.5 text-xs"
197197
data-testid="agent-memory-stale-error"
198198
>
199-
<AlertTriangle className="h-3 w-3 shrink-0 text-warning" />
199+
<AlertTriangle className="h-4 w-4 shrink-0 text-warning" />
200200
<span className="flex-1 text-muted-foreground">Refresh failed.</span>
201201
<button
202202
className="font-medium text-warning hover:underline"
@@ -511,7 +511,7 @@ function MemoryEntryAccordion({
511511
ref={titleRef}
512512
>
513513
{hasDanglingRefs ? (
514-
<AlertTriangle className="mr-1 inline-block h-3.5 w-3.5 align-[-2px] text-warning" />
514+
<AlertTriangle className="mr-1 inline-block h-4 w-4 align-[-2px] text-warning" />
515515
) : null}
516516
<MemorySlugTitle slug={entry.slug} />
517517
</div>

‎desktop/src/features/agents/ui/AgentSessionToolItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export function ToolItem({
8181
</span>
8282
) : null}
8383
<ToolTimestamp item={item} />
84-
<ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" />
84+
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" />
8585
</summary>
8686

8787
<ToolDetailBlocks
@@ -272,7 +272,7 @@ function BuzzToolInlineAction({
272272
{action.avatar}
273273
<span className="shrink-0">{action.label}</span>
274274
<span className="truncate">{action.value}</span>
275-
<ArrowUpRight className="h-3 w-3 shrink-0" />
275+
<ArrowUpRight className="h-4 w-4 shrink-0" />
276276
</button>
277277
);
278278
}

‎desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function AgentSessionTranscriptList({
2727
if (items.length === 0) {
2828
return (
2929
<div className="flex min-h-56 flex-col items-center justify-center px-6 py-10 text-center">
30-
<Radio className="mx-auto h-5 w-5 text-muted-foreground" />
30+
<Radio className="mx-auto h-4 w-4 text-muted-foreground" />
3131
<p className="mt-3 text-sm font-medium">No ACP activity yet</p>
3232
<p className="mt-1 text-sm text-muted-foreground">{emptyDescription}</p>
3333
</div>
@@ -126,7 +126,7 @@ function MessageItem({
126126
{isAssistant ? (
127127
<div className="mb-0.5 flex items-center gap-1 text-xs">
128128
<span className="flex h-5 w-5 items-center justify-center">
129-
<Bot className="h-3.5 w-3.5 text-muted-foreground" />
129+
<Bot className="h-4 w-4 text-muted-foreground" />
130130
</span>
131131
<span className="font-normal text-foreground">{agentName}</span>
132132
<TranscriptTimestamp timestamp={item.timestamp} />
@@ -163,7 +163,7 @@ function ThoughtItem({
163163
<Brain className="h-4 w-4" />
164164
<span className="truncate text-sm font-medium">{item.title}</span>
165165
<TranscriptTimestamp timestamp={item.timestamp} />
166-
<ChevronDown className="h-3.5 w-3.5 shrink-0 transition-transform group-open:rotate-180" />
166+
<ChevronDown className="h-4 w-4 shrink-0 transition-transform group-open:rotate-180" />
167167
</summary>
168168
<div className="py-2 pl-5 text-sm leading-6 text-muted-foreground">
169169
<Markdown compact content={item.text.trim() || " "} />
@@ -186,7 +186,7 @@ function MetadataItem({
186186
{item.sections.length} section{item.sections.length === 1 ? "" : "s"}
187187
</span>
188188
<TranscriptTimestamp timestamp={item.timestamp} />
189-
<ChevronDown className="h-3.5 w-3.5 shrink-0 transition-transform group-open:rotate-180" />
189+
<ChevronDown className="h-4 w-4 shrink-0 transition-transform group-open:rotate-180" />
190190
</summary>
191191
<div className="space-y-3 py-2 pl-5">
192192
{item.sections.map((section) => (
@@ -196,7 +196,7 @@ function MetadataItem({
196196
>
197197
<summary className="inline-flex max-w-full cursor-pointer list-none items-center gap-1.5 text-xs font-medium text-foreground/80">
198198
<span className="truncate">{section.title}</span>
199-
<ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform group-open/section:rotate-180" />
199+
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open/section:rotate-180" />
200200
</summary>
201201
<pre className="mt-2 max-h-56 overflow-auto whitespace-pre-wrap break-words rounded-md bg-muted/50 px-3 py-2 font-mono text-[11px] leading-5 text-muted-foreground">
202202
{section.body.trim() || "No metadata."}

‎desktop/src/features/agents/ui/BatchImportDialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -213,12 +213,12 @@ export function BatchImportDialog({
213213
onClick={() => setSkippedExpanded((prev) => !prev)}
214214
type="button"
215215
>
216-
<AlertTriangle className="h-3.5 w-3.5" />
216+
<AlertTriangle className="h-4 w-4" />
217217
{skipped.length} file{skipped.length !== 1 ? "s" : ""} skipped
218218
{skippedExpanded ? (
219-
<ChevronDown className="h-3.5 w-3.5" />
219+
<ChevronDown className="h-4 w-4" />
220220
) : (
221-
<ChevronRight className="h-3.5 w-3.5" />
221+
<ChevronRight className="h-4 w-4" />
222222
)}
223223
</button>
224224
{skippedExpanded ? (

‎desktop/src/features/agents/ui/CopyButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function CopyButton({
2020
type="button"
2121
variant="outline"
2222
>
23-
<Copy className="h-3.5 w-3.5" />
23+
<Copy className="h-4 w-4" />
2424
<span>{label ?? "Copy"}</span>
2525
</Button>
2626
);

‎desktop/src/features/agents/ui/ManagedAgentSessionPanel.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
CircleAlert,
44
CircleDot,
55
Clock3,
6-
Loader2,
76
TerminalSquare,
87
XCircle,
98
} from "lucide-react";
@@ -14,6 +13,7 @@ import type { ManagedAgent } from "@/shared/api/types";
1413
import { cn } from "@/shared/lib/cn";
1514
import { Badge } from "@/shared/ui/badge";
1615
import { Skeleton } from "@/shared/ui/skeleton";
16+
import { Spinner } from "@/shared/ui/spinner";
1717
import { AgentSessionTranscriptList } from "./AgentSessionTranscriptList";
1818
import { RawEventRail } from "./RawEventRail";
1919
import type {
@@ -229,7 +229,7 @@ function ObserverStatusBadge({ state }: { state: ConnectionState }) {
229229
state === "open"
230230
? { label: "Live", Icon: CircleDot, variant: "default" as const }
231231
: state === "connecting"
232-
? { label: "Connecting", Icon: Loader2, variant: "secondary" as const }
232+
? { label: "Connecting", variant: "secondary" as const }
233233
: state === "error"
234234
? {
235235
label: "Unavailable",
@@ -239,12 +239,15 @@ function ObserverStatusBadge({ state }: { state: ConnectionState }) {
239239
: state === "closed"
240240
? { label: "Closed", Icon: Clock3, variant: "secondary" as const }
241241
: { label: "Idle", Icon: Clock3, variant: "secondary" as const };
242+
const StatusIcon = display.Icon;
242243

243244
return (
244245
<Badge className="gap-1.5" variant={display.variant}>
245-
<display.Icon
246-
className={cn("h-3.5 w-3.5", state === "connecting" && "animate-spin")}
247-
/>
246+
{StatusIcon ? (
247+
<StatusIcon aria-hidden className="h-4 w-4" />
248+
) : (
249+
<Spinner aria-hidden className="h-4 w-4 border-2" />
250+
)}
248251
{display.label}
249252
</Badge>
250253
);
@@ -253,7 +256,7 @@ function ObserverStatusBadge({ state }: { state: ConnectionState }) {
253256
function EmptyObserverState() {
254257
return (
255258
<div className="mt-4 flex min-h-48 flex-col items-center justify-center px-6 py-8 text-center">
256-
<TerminalSquare className="mx-auto h-5 w-5 text-muted-foreground" />
259+
<TerminalSquare className="mx-auto h-4 w-4 text-muted-foreground" />
257260
<p className="mt-3 text-sm font-medium">Observer not attached</p>
258261
<p className="mt-1 text-sm text-muted-foreground">
259262
The live feed is available for local agents started after this update.

‎desktop/src/features/agents/ui/ModelPicker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export function ModelPicker({
9393
variant="ghost"
9494
>
9595
<span className="truncate">{displayLabel}</span>
96-
<ChevronDown className="h-3 w-3 text-muted-foreground" />
96+
<ChevronDown className="h-4 w-4 text-muted-foreground" />
9797
</Button>
9898
</DropdownMenuTrigger>
9999
<DropdownMenuContent
@@ -103,7 +103,7 @@ export function ModelPicker({
103103
>
104104
{loading ? (
105105
<div className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground">
106-
<Spinner className="h-3.5 w-3.5" />
106+
<Spinner className="h-4 w-4 border-2" />
107107
Loading models...
108108
</div>
109109
) : error ? (

‎desktop/src/features/agents/ui/PersonaCatalogSelectionBadge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function PersonaCatalogSelectionBadge({
2020
: "border border-border/70 bg-background/85 text-muted-foreground",
2121
)}
2222
>
23-
{isActive ? <Check className="h-3 w-3" /> : null}
23+
{isActive ? <Check className="h-4 w-4" /> : null}
2424
{isActive
2525
? personaCatalogCopy.selectedState
2626
: personaCatalogCopy.availableState}

‎desktop/src/features/agents/ui/PersonaDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -497,12 +497,12 @@ export function PersonaDialog({
497497
: undefined
498498
}
499499
>
500-
<Upload className="h-3.5 w-3.5" />
500+
<Upload className="h-4 w-4" />
501501
<span className="max-w-[16rem] truncate">
502502
{importButtonLabel}
503503
</span>
504504
{isImportingUpdate ? (
505-
<RefreshCw className="h-3.5 w-3.5 animate-spin" />
505+
<RefreshCw className="h-4 w-4 animate-spin" />
506506
) : null}
507507
</button>
508508
</>

0 commit comments

Comments
 (0)