From ca410088509a037a2d45411f75d8b0e4ea235798 Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Thu, 19 Mar 2026 07:29:07 +0100
Subject: [PATCH] feat: adopt relationship chip style for type selector in
 Properties panel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/TypeSelector.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/TypeSelector.tsx b/src/components/TypeSelector.tsx
index 2926ef83..d85d7109 100644
--- a/src/components/TypeSelector.tsx
+++ b/src/components/TypeSelector.tsx
@@ -51,14 +51,24 @@ export function TypeSelector({ isA, customColorKey, availableTypes, typeColorKey
     ? [...availableTypes, isA].sort((a, b) => a.localeCompare(b))
     : availableTypes
 
+  const typeColor = isA ? getTypeColor(isA, typeColorKeys[isA] ?? customColorKey) : undefined
+  const typeLightColor = isA ? getTypeLightColor(isA, typeColorKeys[isA] ?? customColorKey) : undefined
+
   return (
     <div className="flex min-w-0 items-center justify-between gap-2 px-1.5" data-testid="type-selector">
       <span className="font-mono-overline shrink-0 text-muted-foreground">Type</span>
       <Select value={currentValue} onValueChange={v => onUpdateProperty('type', v === TYPE_NONE ? null : v)}>
         <SelectTrigger
           size="sm"
-          className="h-[26px] shrink-0 gap-1 border-border bg-muted px-1.5 py-0 shadow-none"
-          style={{ fontSize: 12, borderRadius: 4 }}
+          className={`h-auto shrink-0 gap-1 border-none shadow-none [&_svg]:text-current ring-inset${isA ? ' hover:ring-1 hover:ring-current' : ' bg-muted hover:opacity-80'}`}
+          style={{
+            background: typeLightColor ?? undefined,
+            color: typeColor ?? undefined,
+            borderRadius: 6,
+            padding: '4px 8px',
+            fontSize: 12,
+            fontWeight: 500,
+          }}
         >
           <SelectValue placeholder="None" />
         </SelectTrigger>