Normalize desktop icon sizing (#999)

desktop/src/features/settings/UpdateIndicator.tsx

@@ -1,6 +1,8 @@
-import { Loader2, RefreshCcw, RotateCw } from "lucide-react";
+import type { ComponentType } from "react";
+import { RefreshCcw, RotateCw } from "lucide-react";
 
 import { Button } from "@/shared/ui/button";
+import { Spinner } from "@/shared/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 
 import { useUpdaterContext } from "./hooks/UpdaterProvider";
@@ -9,13 +11,18 @@ import type { UpdateStatus } from "./hooks/use-updater";
 const indicatorButtonClass =
   "relative text-muted-foreground/80 hover:bg-muted/60 hover:text-foreground";
 
+type IndicatorIcon = ComponentType<{
+  "aria-hidden"?: boolean;
+  className?: string;
+}>;
+
 const variants: Record<
   "available" | "downloading" | "installing" | "ready",
   {
-    Icon: typeof RefreshCcw;
+    Icon: IndicatorIcon;
+    iconClassName?: string;
     label: string;
     badgeColor: string;
-    spin?: boolean;
   }
 > = {
   available: {
@@ -24,16 +31,16 @@ const variants: Record<
     badgeColor: "bg-primary",
   },
   downloading: {
-    Icon: Loader2,
+    Icon: Spinner,
+    iconClassName: "h-4 w-4 border-2",
     label: "Downloading update\u2026",
     badgeColor: "bg-primary",
-    spin: true,
   },
   installing: {
-    Icon: Loader2,
+    Icon: Spinner,
+    iconClassName: "h-4 w-4 border-2",
     label: "Installing update\u2026",
     badgeColor: "bg-primary",
-    spin: true,
   },
   ready: {
     Icon: RotateCw,
@@ -62,7 +69,7 @@ export function UpdateIndicator({ className }: { className?: string }) {
     return null;
   }
 
-  const { Icon, label, badgeColor, spin } = variant;
+  const { Icon, iconClassName = "h-4 w-4", label, badgeColor } = variant;
   const isActionable = status.state === "available" || status.state === "ready";
   const handleClick =
     status.state === "ready"
@@ -87,7 +94,7 @@ export function UpdateIndicator({ className }: { className?: string }) {
           type="button"
           variant="ghost"
         >
-          <Icon className={spin ? "animate-spin" : undefined} />
+          <Icon aria-hidden className={iconClassName} />
           <span
             className={`absolute right-1 top-1 h-1.5 w-1.5 rounded-full ${badgeColor} animate-pulse`}
           />

desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx

@@ -120,7 +120,7 @@ export function ChannelTemplatesSettingsCard() {
           type="button"
           variant="outline"
         >
-          <Plus className="mr-1.5 h-3.5 w-3.5" />
+          <Plus className="mr-1.5 h-4 w-4" />
           Create
         </Button>
       </div>
@@ -229,13 +229,13 @@ function TemplateRow({
         <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
           {agentCount > 0 ? (
             <span className="flex items-center gap-1">
-              <Users className="h-3 w-3" />
+              <Users className="h-4 w-4" />
               {agentCount} {agentCount === 1 ? "agent" : "agents"}
             </span>
           ) : null}
           {template.canvasTemplate ? (
             <span className="flex items-center gap-1">
-              <MessageSquare className="h-3 w-3" />
+              <MessageSquare className="h-4 w-4" />
               canvas
             </span>
           ) : null}
@@ -255,11 +255,11 @@ function TemplateRow({
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
           <DropdownMenuItem onClick={onEdit}>
-            <Pencil className="mr-2 h-3.5 w-3.5" />
+            <Pencil className="mr-2 h-4 w-4" />
             Edit
           </DropdownMenuItem>
           <DropdownMenuItem onClick={onDuplicate}>
-            <Copy className="mr-2 h-3.5 w-3.5" />
+            <Copy className="mr-2 h-4 w-4" />
             Duplicate
           </DropdownMenuItem>
           {!template.isBuiltin ? (
@@ -267,7 +267,7 @@ function TemplateRow({
               className="text-destructive focus:text-destructive"
               onClick={onDelete}
             >
-              <Trash2 className="mr-2 h-3.5 w-3.5" />
+              <Trash2 className="mr-2 h-4 w-4" />
               Delete
             </DropdownMenuItem>
           ) : null}

desktop/src/features/settings/ui/DoctorSettingsPanel.tsx

@@ -56,9 +56,9 @@ function InstallActions({
           variant="outline"
         >
           {isInstalling ? (
-            <RefreshCw className="h-3.5 w-3.5 animate-spin" />
+            <RefreshCw className="h-4 w-4 animate-spin" />
           ) : (
-            <Download className="h-3.5 w-3.5" />
+            <Download className="h-4 w-4" />
           )}
           {isInstalling ? "Installing..." : "Install"}
         </Button>
@@ -68,7 +68,7 @@ function InstallActions({
         onClick={() => void openUrl(runtime.installInstructionsUrl)}
         type="button"
       >
-        <ExternalLink className="h-3 w-3" />
+        <ExternalLink className="h-4 w-4" />
         View instructions
       </button>
     </div>

desktop/src/features/settings/ui/MobilePairingCard.tsx

@@ -225,7 +225,7 @@ function PairingDialog({
                     type="button"
                   >
                     <code className="min-w-0 flex-1 break-all">{qrUri}</code>
-                    <Copy className="h-3.5 w-3.5 shrink-0" />
+                    <Copy className="h-4 w-4 shrink-0" />
                   </button>
                 </div>
 
@@ -332,7 +332,7 @@ export function MobilePairingCard({
 
       <SettingsOptionGroup>
         <SettingsOptionRow className="gap-3">
-          <Smartphone className="h-5 w-5 shrink-0 text-muted-foreground" />
+          <Smartphone className="h-4 w-4 shrink-0 text-muted-foreground" />
           <div className="min-w-0 flex-1">
             <p className="text-sm font-medium">Pair Mobile Device</p>
             <p className="text-sm font-normal text-muted-foreground">

desktop/src/features/settings/ui/NotificationSettingsCard.tsx

@@ -227,7 +227,7 @@ export function NotificationSettingsCard({
                   >
                     {showComingSoon ? (
                       <>
-                        <ChevronUp className="h-3.5 w-3.5" />
+                        <ChevronUp className="h-4 w-4" />
                         Show less
                       </>
                     ) : (

desktop/src/features/settings/ui/ProfileSettingsCard.tsx

@@ -57,7 +57,7 @@ function IdentityRow({
           title={`Copy ${label}`}
           type="button"
         >
-          <Copy className="h-3.5 w-3.5 shrink-0" />
+          <Copy className="h-4 w-4 shrink-0" />
           Copy
         </button>
       ) : null}
@@ -97,7 +97,7 @@ function EditProfileMetadataButton({
       title={accessibleLabel}
       type="button"
     >
-      <Icon className="h-3.5 w-3.5 shrink-0" />
+      <Icon className="h-4 w-4 shrink-0" />
       {actionLabel}
     </button>
   );
@@ -577,7 +577,7 @@ export function ProfileSettingsCard({
                                 this device.
                               </p>
                             </div>
-                            <ChevronDown className="h-5 w-5 shrink-0 text-muted-foreground transition-[color,transform] duration-150 ease-out group-open:rotate-180 group-hover/identity:text-foreground group-focus-visible/identity:text-foreground" />
+                            <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-[color,transform] duration-150 ease-out group-open:rotate-180 group-hover/identity:text-foreground group-focus-visible/identity:text-foreground" />
                           </summary>
                           <div
                             className="border-t border-border/55 divide-y divide-border/55"

desktop/src/features/settings/ui/SettingsPanels.tsx

@@ -193,9 +193,12 @@ function ThemeSettingsCard() {
       <div className="relative mb-3">
         <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
         <input
+          autoCapitalize="none"
+          autoCorrect="off"
           className="w-full rounded-lg border border-border/70 bg-background/70 py-2 pl-9 pr-3 text-sm placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Search themes..."
+          spellCheck={false}
           type="text"
           value={search}
         />
@@ -269,7 +272,7 @@ function ThemeSettingsCard() {
                 type="button"
               >
                 {accentColor === color.value && (
-                  <Check className={cn("h-3.5 w-3.5", checkClassName)} />
+                  <Check className={cn("h-4 w-4", checkClassName)} />
                 )}
               </button>
             );

desktop/src/features/settings/ui/SoundPicker.tsx

@@ -135,9 +135,9 @@ export function SoundPicker({
         variant="ghost"
       >
         {isPlaying ? (
-          <Pause className="h-3 w-3" />
+          <Pause className="h-4 w-4" />
         ) : (
-          <Play className="h-3 w-3" />
+          <Play className="h-4 w-4" />
         )}
       </Button>
     </span>