From bcc03820011b416994e52dc6a419dd4b63b7ea21 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Mon, 27 Apr 2026 07:21:30 +0800
Subject: [PATCH] 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 | 153 +++++++++++++++++++++-----
 1 file changed, 128 insertions(+), 25 deletions(-)

diff --git a/components/wizard/settings-editor.tsx b/components/wizard/settings-editor.tsx
index aa6e0ed..daba7df 100644
--- a/components/wizard/settings-editor.tsx
+++ b/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>
-          <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>
+          <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,13 +239,31 @@ export function SettingsEditor({
                     ({cat.settings.length})
                   </span>
                 </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"
-                  title="Remove category"
-                >
-                  <X className="h-4 w-4" />
-                </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"
+                    title="Remove category"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
               </div>
 
               <AnimatePresence initial={false}>
@@ -257,20 +330,50 @@ export function SettingsEditor({
                               />
                             )}
 
-                            <button
-                              onClick={() =>
-                                removeSetting(cat.category, setting.title)
-                              }
-                              className="p-1 rounded-md text-text/30 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer flex-shrink-0"
-                              title="Remove setting"
-                            >
-                              <X className="h-3.5 w-3.5" />
-                            </button>
+                            <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)
+                                }
+                                className="p-1 rounded-md text-text/30 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer flex-shrink-0"
+                                title="Remove setting"
+                              >
+                                <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] || ""}