feat(studio): use the searchable icon picker for every icon field (#1832)

Icon fields previously rendered as a free-text 'type a Lucide name' input
unless a spec form pinned widget:'icon' — admins had to know exact icon names.

- SchemaForm: auto-detect icon fields by name convention (a string prop named
  `icon` or `*Icon`, no enum) -> the existing 'icon' picker, mirroring the
  field-ref convention. Every metadata type's icon field now gets the searchable
  Lucide picker in the generic form without per-form wiring.
- widgets: export IconPickerWidget so curated inspectors can reuse it.
- ActionDefaultInspector: render the Action icon with the picker instead of a
  text input.

Verified live: App icon (generic form) and Action icon (curated inspector) both
render the picker; the searchable grid opens correctly (not clipped) inside the
inspector panel.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: 3 people

packages/app-shell/src/views/metadata-admin/SchemaForm.tsx

@@ -279,6 +279,22 @@ function detectFieldRefWidget(
   return undefined;
 }
 
+/**
+ * Detect the icon picker by NAME CONVENTION: a string prop named `icon` (or
+ * `*Icon`) with no enum. Mirrors {@link detectFieldRefWidget} so every metadata
+ * type's icon field renders the searchable Lucide picker instead of a free-text
+ * input, without each spec `*.form.ts` having to pin `widget: 'icon'`.
+ */
+function detectIconWidget(name: string, schema: JsonSchema | undefined): string | undefined {
+  if (Array.isArray(schema?.enum)) return undefined;
+  const isString =
+    schema?.type === 'string' ||
+    (Array.isArray(schema?.anyOf) && (schema!.anyOf as JsonSchema[]).some((b) => b?.type === 'string'));
+  if (!isString) return undefined;
+  if (name === 'icon' || /Icon$/.test(name)) return 'icon';
+  return undefined;
+}
+
 /* -------------------------------------------------------------------------- */
 /* FormView spec (subset)                                                     */
 /* -------------------------------------------------------------------------- */
@@ -739,6 +755,10 @@ function FieldRow({
   if (!fieldSpec?.widget) {
     const refWidget = detectFieldRefWidget(name, schema, widgetContext);
     if (refWidget) widget = refWidget;
+    else {
+      const iconWidget = detectIconWidget(name, schema);
+      if (iconWidget) widget = iconWidget;
+    }
   }
 
   // Booleans with a schema default are never *missing* — don't show the

packages/app-shell/src/views/metadata-admin/inspectors/ActionDefaultInspector.tsx

@@ -48,6 +48,7 @@ import {
 import { useObjectOptions } from '../previews/useObjectOptions';
 import { useObjectFields } from '../previews/useObjectFields';
 import { ConditionBuilder } from './ConditionBuilder';
+import { IconPickerWidget } from '../widgets';
 
 /* ─────────────── constants ─────────────── */
 
@@ -253,7 +254,10 @@ export function ActionDefaultInspector({
         hint={objectName ? 'Bound action — surfaces in this object’s views per the placement below.' : 'Empty = global action — must be referenced by a page’s quick actions, global nav, a flow, or AI to appear.'}
       />
       <div className="grid grid-cols-2 gap-2">
-        <InspectorTextField label="Icon" value={str('icon')} onCommit={(v) => onPatch({ icon: v })} placeholder="lucide name" disabled={readOnly} />
+        <div className="space-y-1">
+          <Label className="text-xs text-muted-foreground">Icon</Label>
+          <IconPickerWidget schema={{ type: 'string' }} value={str('icon')} onChange={(v) => onPatch({ icon: (v as string) || undefined })} readOnly={readOnly} />
+        </div>
         <InspectorSelectField label="Variant" value={str('variant') || undefined} options={VARIANT_OPTS} onCommit={(v) => onPatch({ variant: v })} disabled={readOnly} />
       </div>
 

packages/app-shell/src/views/metadata-admin/widgets.tsx

@@ -1036,7 +1036,7 @@ const ICON_RESULT_LIMIT = 60;
  * Built inline (no Radix portal) so the search + grid render eagerly — the same
  * jsdom-friendly choice the other pickers' tests rely on.
  */
-function IconPickerWidget({ id, value, onChange, readOnly }: WidgetProps) {
+export function IconPickerWidget({ id, value, onChange, readOnly }: WidgetProps) {
   const locale = detectLocale();
   const current = value == null ? '' : String(value);
   const [open, setOpen] = React.useState(false);