Refine column support selection and polygon handling

packages/editor/src/components/ui/panels/column-panel.tsx

@@ -11,6 +11,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { Move, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
@@ -76,6 +77,20 @@ const COLUMN_PROPORTION_OPTIONS = Object.entries(COLUMN_PROPORTION_PRESETS).map(
   label: preset.label,
 }))
 
+const SUPPORT_STYLE_OPTIONS: Array<{ label: string; value: ColumnNode['supportStyle'] }> = [
+  { label: 'Vertical', value: 'vertical' },
+  { label: 'A-Frame', value: 'a-frame' },
+  { label: 'Y Support', value: 'y-frame' },
+  { label: 'V Support', value: 'v-frame' },
+  { label: 'X Brace', value: 'x-brace' },
+  { label: 'K Brace', value: 'k-brace' },
+  { label: 'Single Strut', value: 'single-strut' },
+  { label: 'Tripod', value: 'tripod' },
+  { label: 'Trestle', value: 'trestle' },
+  { label: 'Portal Frame', value: 'portal-frame' },
+  { label: 'Box Frame', value: 'box-frame' },
+]
+
 function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value))
 }
@@ -235,37 +250,39 @@ export function ColumnPanel() {
       </PanelSection>
 
       <PanelSection title="Shape">
-        <select
-          className={SELECT_CLASS}
-          onChange={(event) => {
-            const nextSupportStyle = event.target.value as ColumnNode['supportStyle']
-            handleUpdate({
-              supportStyle: nextSupportStyle,
-              ...(nextSupportStyle !== 'vertical'
-                ? {
-                    crossSection: 'rectangular',
-                    width: node.braceWidth ?? node.width,
-                    depth: node.braceDepth ?? node.depth,
-                    baseStyle: 'none',
-                    capitalStyle: 'none',
-                  }
-                : {}),
-            })
-          }}
-          value={supportStyle}
-        >
-          <option value="vertical">Vertical</option>
-          <option value="a-frame">A-Frame</option>
-          <option value="y-frame">Y Support</option>
-          <option value="v-frame">V Support</option>
-          <option value="x-brace">X Brace</option>
-          <option value="k-brace">K Brace</option>
-          <option value="single-strut">Single Strut</option>
-          <option value="tripod">Tripod Support</option>
-          <option value="trestle">Trestle Frame</option>
-          <option value="portal-frame">Portal Frame</option>
-          <option value="box-frame">Box Frame</option>
-        </select>
+        <div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
+          {SUPPORT_STYLE_OPTIONS.map((option) => {
+            const isSelected = supportStyle === option.value
+            return (
+              <button
+                className={cn(
+                  'flex min-h-12 items-center rounded-lg border px-2.5 text-left text-xs transition-colors',
+                  isSelected
+                    ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
+                    : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                )}
+                key={option.value}
+                onClick={() =>
+                  handleUpdate({
+                    supportStyle: option.value,
+                    ...(option.value !== 'vertical'
+                      ? {
+                          crossSection: 'rectangular',
+                          width: node.braceWidth ?? node.width,
+                          depth: node.braceDepth ?? node.depth,
+                          baseStyle: 'none',
+                          capitalStyle: 'none',
+                        }
+                      : {}),
+                  })
+                }
+                type="button"
+              >
+                <span className="truncate font-medium">{option.label}</span>
+              </button>
+            )
+          })}
+        </div>
         {isBraceSupport ? (
           <>
             <SliderControl