feat(settings-editor): add UX improvements

- Add 'Create custom' button alongside 'Load defaults' when empty
- Add setting type selector (text/number/boolean) when adding new settings
- Add reorder controls for categories (up/down arrows)
- Add reorder controls for settings within each category

components/wizard/settings-editor.tsx

@@ -58,6 +58,7 @@ export function SettingsEditor({
   )
   const [newCategoryName, setNewCategoryName] = useState("")
   const [newSettingNames, setNewSettingNames] = useState<Record<string, string>>({})
+  const [newSettingTypes, setNewSettingTypes] = useState<Record<string, string>>({})
 
   const toggleCategory = (category: string) => {
     setCollapsedCategories((prev) => {
@@ -92,20 +93,63 @@ export function SettingsEditor({
   const addSetting = (category: string) => {
     const name = (newSettingNames[category] || "").trim()
     if (!name) return
-
+    const type = newSettingTypes[category] || "text"
+    const defaultValue = type === "boolean" ? false : type === "number" ? 0 : ""
     onChange(
       value.map((c) => {
         if (c.category !== category) return c
         if (c.settings.some((s) => s.title === name)) return c
         return {
           ...c,
-          settings: [...c.settings, { title: name, value: "" }],
+          settings: [...c.settings, { title: name, value: defaultValue }],
         }
       })
     )
     setNewSettingNames((prev) => ({ ...prev, [category]: "" }))
   }
 
+  const moveCategoryUp = (category: string) => {
+    const idx = value.findIndex((c) => c.category === category)
+    if (idx <= 0) return
+    const next = [...value]
+    ;[next[idx - 1], next[idx]] = [next[idx], next[idx - 1]]
+    onChange(next)
+  }
+
+  const moveCategoryDown = (category: string) => {
+    const idx = value.findIndex((c) => c.category === category)
+    if (idx >= value.length - 1) return
+    const next = [...value]
+    ;[next[idx], next[idx + 1]] = [next[idx + 1], next[idx]]
+    onChange(next)
+  }
+
+  const moveSettingUp = (category: string, settingTitle: string) => {
+    onChange(
+      value.map((c) => {
+        if (c.category !== category) return c
+        const idx = c.settings.findIndex((s) => s.title === settingTitle)
+        if (idx <= 0) return c
+        const next = [...c.settings]
+        ;[next[idx - 1], next[idx]] = [next[idx], next[idx - 1]]
+        return { ...c, settings: next }
+      })
+    )
+  }
+
+  const moveSettingDown = (category: string, settingTitle: string) => {
+    onChange(
+      value.map((c) => {
+        if (c.category !== category) return c
+        const idx = c.settings.findIndex((s) => s.title === settingTitle)
+        if (idx >= c.settings.length - 1) return c
+        const next = [...c.settings]
+        ;[next[idx], next[idx + 1]] = [next[idx + 1], next[idx]]
+        return { ...c, settings: next }
+      })
+    )
+  }
+
   const removeSetting = (category: string, settingTitle: string) => {
     onChange(
       value.map((c) => {
@@ -148,17 +192,28 @@ export function SettingsEditor({
       {isEmpty && (
         <div className="flex flex-col items-center justify-center py-10 border border-dashed border-border rounded-lg bg-text/5">
           <p className="text-sm text-text/50 mb-4">No settings configured</p>
+          <div className="flex items-center gap-2">
             <button
               onClick={loadDefaults}
               className="px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer"
             >
               Load defaults
             </button>
+            <button
+              onClick={() => {
+                setNewCategoryName("Custom")
+                setTimeout(() => addCategory(), 0)
+              }}
+              className="px-4 py-2 rounded-lg border border-border text-text text-sm font-semibold hover:bg-text/5 transition-colors cursor-pointer"
+            >
+              Create custom
+            </button>
+          </div>
         </div>
       )}
 
       <AnimatePresence initial={false}>
-        {value.map((cat) => {
+        {value.map((cat, index) => {
           const isCollapsed = collapsedCategories.has(cat.category)
           return (
             <motion.div
@@ -184,6 +239,23 @@ export function SettingsEditor({
                     ({cat.settings.length})
                   </span>
                 </button>
+                <div className="flex items-center gap-1">
+                  <button
+                    onClick={() => moveCategoryUp(cat.category)}
+                    disabled={index === 0}
+                    className="p-1 rounded-md text-text/30 hover:text-text/60 hover:bg-text/5 transition-colors cursor-pointer disabled:opacity-20"
+                    title="Move up"
+                  >
+                    <ChevronUp className="h-3.5 w-3.5" />
+                  </button>
+                  <button
+                    onClick={() => moveCategoryDown(cat.category)}
+                    disabled={index === value.length - 1}
+                    className="p-1 rounded-md text-text/30 hover:text-text/60 hover:bg-text/5 transition-colors cursor-pointer disabled:opacity-20"
+                    title="Move down"
+                  >
+                    <ChevronDown className="h-3.5 w-3.5" />
+                  </button>
                   <button
                     onClick={() => removeCategory(cat.category)}
                     className="p-1 rounded-md text-text/40 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
@@ -192,6 +264,7 @@ export function SettingsEditor({
                     <X className="h-4 w-4" />
                   </button>
                 </div>
+              </div>
 
               <AnimatePresence initial={false}>
                 {!isCollapsed && (
@@ -257,6 +330,21 @@ export function SettingsEditor({
                               />
                             )}
 
+                            <div className="flex items-center gap-0.5">
+                              <button
+                                onClick={() => moveSettingUp(cat.category, setting.title)}
+                                className="p-0.5 rounded text-text/20 hover:text-text/50 hover:bg-text/5 transition-colors cursor-pointer"
+                                title="Move up"
+                              >
+                                <ChevronUp className="h-3 w-3" />
+                              </button>
+                              <button
+                                onClick={() => moveSettingDown(cat.category, setting.title)}
+                                className="p-0.5 rounded text-text/20 hover:text-text/50 hover:bg-text/5 transition-colors cursor-pointer"
+                                title="Move down"
+                              >
+                                <ChevronDown className="h-3 w-3" />
+                              </button>
                               <button
                                 onClick={() =>
                                   removeSetting(cat.category, setting.title)
@@ -266,11 +354,26 @@ export function SettingsEditor({
                               >
                                 <X className="h-3.5 w-3.5" />
                               </button>
+                            </div>
                           </motion.div>
                         ))}
                       </AnimatePresence>
 
                       <div className="flex items-center gap-2 pt-1">
+                        <select
+                          value={newSettingTypes[cat.category] || "text"}
+                          onChange={(e) =>
+                            setNewSettingTypes((prev) => ({
+                              ...prev,
+                              [cat.category]: e.target.value,
+                            }))
+                          }
+                          className="text-xs px-2 py-1.5 rounded-md border border-border bg-text/5 text-text/60 outline-none focus:border-primary"
+                        >
+                          <option value="text">Text</option>
+                          <option value="number">Number</option>
+                          <option value="boolean">Boolean</option>
+                        </select>
                         <input
                           type="text"
                           value={newSettingNames[cat.category] || ""}