feat(tables): default select options to grey, drop color picker for now

Removes the per-option swatch picker and defaults every option to the
neutral gray pill. The `color` field stays in the data model and the
SELECT_COLORS palette/contract are untouched, so a picker can be re-added
later as a pure UI change with no migration.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014e4MvFV1szLhNLap1CCNUd

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/index.ts

@@ -1,4 +1,3 @@
-export { SELECT_COLOR_LABELS, SELECT_COLOR_ORDER } from './select-colors'
 export { SelectOptionsEditor } from './select-options-editor'
 export { resolveSelectOptions, SelectPill, toSelectedIds } from './select-pill'
 export { SelectValueEditor } from './select-value-editor'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-colors.ts

@@ -1,54 +1,20 @@
 'use client'
 
-import { Badge, Button, ChipInput, cn } from '@sim/emcn'
+import { Button, ChipInput } from '@sim/emcn'
 import { Plus, Trash } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
-import type { SelectColor, SelectOption } from '@/lib/table'
-import { SELECT_COLOR_LABELS, SELECT_COLOR_ORDER } from './select-colors'
+import type { SelectOption } from '@/lib/table'
 
 interface SelectOptionsEditorProps {
   options: SelectOption[]
   onChange: (options: SelectOption[]) => void
 }
 
-/** Default color for a freshly added option — cycles through the palette. */
-function nextColor(count: number): SelectColor {
-  return SELECT_COLOR_ORDER[count % SELECT_COLOR_ORDER.length]
-}
-
-interface ColorSwatchesProps {
-  value: SelectColor
-  onChange: (color: SelectColor) => void
-}
-
-/** Inline row of color squircles; the active color is ringed. */
-function ColorSwatches({ value, onChange }: ColorSwatchesProps) {
-  return (
-    <div className='flex flex-wrap items-center gap-1.5'>
-      {SELECT_COLOR_ORDER.map((color) => (
-        <button
-          key={color}
-          type='button'
-          aria-label={SELECT_COLOR_LABELS[color]}
-          aria-pressed={color === value}
-          onClick={() => onChange(color)}
-          className={cn(
-            'rounded-[6px] transition-shadow',
-            color === value &&
-              'ring-2 ring-[var(--text-icon)] ring-offset-1 ring-offset-[var(--bg)]'
-          )}
-        >
-          {/* Reuse the Badge palette as the swatch fill so colors stay single-sourced. */}
-          <Badge variant={color} size='sm' className='size-5 rounded-[6px] p-0' />
-        </button>
-      ))}
-    </div>
-  )
-}
-
 /**
- * Add/remove/rename/recolor the options of a `select`/`multiselect` column.
- * Option ids are stable across edits so existing cell data survives renames.
+ * Add/remove/rename the options of a `select`/`multiselect` column. Option ids
+ * are stable across edits so existing cell data survives renames. Options
+ * default to the neutral `gray` pill — per-option colors are not yet exposed
+ * (the `color` field stays in the model so a picker can be re-added later).
  */
 export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorProps) {
   const update = (id: string, patch: Partial<SelectOption>) => {
@@ -60,33 +26,30 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
   }
 
   const add = () => {
-    onChange([...options, { id: generateShortId(), name: '', color: nextColor(options.length) }])
+    onChange([...options, { id: generateShortId(), name: '', color: 'gray' }])
   }
 
   return (
-    <div className='flex flex-col gap-3'>
+    <div className='flex flex-col gap-2'>
       {options.map((option) => (
-        <div key={option.id} className='flex flex-col gap-1.5'>
-          <div className='flex items-center gap-1.5'>
-            <ChipInput
-              value={option.name}
-              onChange={(e) => update(option.id, { name: e.target.value })}
-              placeholder='Option name'
-              spellCheck={false}
-              autoComplete='off'
-              className='min-w-0 flex-1'
-            />
-            <Button
-              variant='ghost'
-              size='sm'
-              onClick={() => remove(option.id)}
-              className='!p-1 size-7 shrink-0'
-              aria-label={`Remove ${option.name || 'option'}`}
-            >
-              <Trash className='size-[14px]' />
-            </Button>
-          </div>
-          <ColorSwatches value={option.color} onChange={(color) => update(option.id, { color })} />
+        <div key={option.id} className='flex items-center gap-1.5'>
+          <ChipInput
+            value={option.name}
+            onChange={(e) => update(option.id, { name: e.target.value })}
+            placeholder='Option name'
+            spellCheck={false}
+            autoComplete='off'
+            className='min-w-0 flex-1'
+          />
+          <Button
+            variant='ghost'
+            size='sm'
+            onClick={() => remove(option.id)}
+            className='!p-1 size-7 shrink-0'
+            aria-label={`Remove ${option.name || 'option'}`}
+          >
+            <Trash className='size-[14px]' />
+          </Button>
         </div>
       ))}
       <Button variant='default' size='sm' onClick={add} className='self-start'>