diff --git a/src/components/common/Chevron.tsx b/src/components/common/Chevron.tsx new file mode 100644 index 0000000..e51cc34 --- /dev/null +++ b/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 ( + + ) +} diff --git a/src/components/palette/DevicePalette.tsx b/src/components/palette/DevicePalette.tsx index 220f4f9..55c796e 100644 --- a/src/components/palette/DevicePalette.tsx +++ b/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" > - - ▶ - + {group.categoryName} {group.templates.length} @@ -176,7 +175,7 @@ export default function DevicePalette() { {hiddenListOpen ? 'Hide' : 'Show'} hidden defaults ({hiddenDefaults.length}) - ▶ + {hiddenListOpen && (