feat: batch set server config (#114)

* feat: batch set server config

* make every field optional

* chore: auto-fix linting and formatting issues

* update

* [WIP] improve batch edit ux

* chore: auto-fix linting and formatting issues

src/components/xui/icon-button.tsx

@@ -10,6 +10,7 @@ import {
     Expand,
     FolderClosed,
     Menu,
+    Minus,
     Play,
     Plus,
     Terminal,
@@ -35,6 +36,7 @@ export interface IconButtonProps extends ButtonProps {
         | "ban"
         | "expand"
         | "cog"
+        | "minus"
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
@@ -92,6 +94,9 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props,
                     case "cog": {
                         return <CogIcon />
                     }
+                    case "minus": {
+                        return <Minus />
+                    }
                 }
             })()}
         </Button>

src/components/xui/pusher.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { useState } from "react"
+
+import { Label } from "../ui/label"
+import { Textarea } from "../ui/textarea"
+import { IconButton } from "./icon-button"
+
+interface PusherProps {
+    property: [string, string]
+    setData: React.Dispatch<React.SetStateAction<Record<string, any>>>
+}
+
+export const Pusher: React.FC<PusherProps> = ({ property, setData }) => {
+    const [cData, setCData] = useState<Record<string, any>>({})
+
+    return (
+        <div className="flex flex-col gap-3">
+            <div className="flex gap-2 ml-auto">
+                <IconButton
+                    icon="plus"
+                    onClick={() => {
+                        const [k, v] = property
+                        if (k && v) {
+                            const temp = { ...cData }
+                            temp[k] = JSON.parse(v)
+                            setCData(temp)
+                            setData(cData)
+                        }
+                    }}
+                />
+                <IconButton
+                    icon="minus"
+                    variant="destructive"
+                    onClick={() => {
+                        const [k] = property
+                        if (k) {
+                            const temp = { ...cData }
+                            temp[k] = undefined
+                            setCData(temp)
+                            setData(cData)
+                        }
+                    }}
+                />
+            </div>
+            <Label>Preview</Label>
+            <Textarea value={JSON.stringify(cData, null, 2)} readOnly />
+        </div>
+    )
+}