Updates UI arrows to match look and feel

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017DUU6CnxECCDeqDNYJgr5x

src/components/common/Chevron.tsx

@@ -0,0 +1,16 @@
+/** Thin-stroke disclosure chevron, rotating in place to point down when
+ *  expanded. A crisp line icon reads much more consistent with the rest of
+ *  the UI's small action glyphs (✕ ✎ ⧉ +) than a filled unicode triangle,
+ *  which looks bold/blocky and doesn't align cleanly at small sizes. */
+export default function Chevron({ expanded, className = '' }: { expanded: boolean; className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      className={`h-3 w-3 shrink-0 transition-transform duration-150 ${expanded ? 'rotate-90' : ''} ${className}`}
+    >
+      <path d="M7 4l6 6-6 6" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}

src/components/palette/DevicePalette.tsx

@@ -3,6 +3,7 @@ import { allDeviceCategories, allDeviceTemplates, hiddenBuiltInDeviceTemplates }
 import type { DeviceTemplate } from '../../domain/types'
 import { useProjectStore } from '../../state/projectStore'
 import { TEMPLATE_DRAG_MIME } from '../canvas/FlowCanvas'
+import Chevron from '../common/Chevron'
 import ConnectorLibraryModal from './ConnectorLibraryModal'
 import DeviceTemplateEditor from './DeviceTemplateEditor'
 
@@ -110,9 +111,7 @@ export default function DevicePalette() {
                 className="flex w-full items-center justify-between rounded px-1.5 py-1 text-left text-xs font-medium text-slate-600 hover:bg-slate-100"
               >
                 <span className="flex items-center gap-1.5">
-                  <span className={`inline-block text-[9px] text-slate-400 transition-transform ${expanded ? 'rotate-90' : ''}`}>
+                  <Chevron expanded={expanded} className="text-slate-400" />
-                    ▶
-                  </span>
                   {group.categoryName}
                 </span>
                 <span className="text-[10px] text-slate-400">{group.templates.length}</span>
@@ -176,7 +175,7 @@ export default function DevicePalette() {
             <span>
               {hiddenListOpen ? 'Hide' : 'Show'} hidden defaults ({hiddenDefaults.length})
             </span>
-            <span className={`inline-block text-[9px] transition-transform ${hiddenListOpen ? 'rotate-90' : ''}`}>▶</span>
+            <Chevron expanded={hiddenListOpen} className="text-slate-500" />
           </button>
           {hiddenListOpen && (
             <ul className="mt-1 space-y-1">