Add JSON Generator page for easier configuring of new metadata (#230)

* Update mariadb.json

* Update vaultwarden.json

* Update vaultwarden.json

* Update keycloak.json

* Update json/keycloak.json

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update mariadb.json

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Add canonical link to layout for improved SEO and page indexing

* Fix image source fallback for script logos to use a consistent relative path

* Fix image source for script logos across components to consistently use the "/ProxmoxVE/logo.png" path

* Update image source for script logos to use basePath for consistent paths across all components

* Fix image source for script logos to ensure leading slash is consistent for all components' paths

* Add JSON generator component with validation and UI elements for managing scripts, categories, and installation methods

* Add calendar and label components; enhance JSON generator with date selection and script path updates for installation methods

* Enhance Alerts component with dynamic colored notes using AlertColors from config for better visibility and consistency

* Remove MultiSelect component

* Update JSON generator: streamline install methods, enhance note type selection, and refine button behavior for better UX

* Refactor AlertColors: unify warning and danger styles for consistency and improved visual hierarchy in alerts

* Enhance JSONGenerator: improve SelectItem layout with color indicators for better visual representation of alert types

* Refactor JSON schema definitions in JSONGenerator: separate InstallMethod and Note schemas for better structure and readability

* Fix JSONGenerator: streamline SelectItem markup and enhance JSON display layout for improved readability and user experience

* Refactor JSON schema handling: move schema definitions to separate file

* Enhance error handling in JSONGenerator: display Zod validation errors on user input for better feedback and debugging

* Export InstallMethodSchema and integrate into JSONGenerator for better validation of install method data input

* Add Categories and Note components to JSONGenerator for better organization and modularity in the JSON editing interface

* Remove unused imports

---------

Co-authored-by: CanbiZ <47820557+MickLesk@users.noreply.github.com>
Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

frontend/src/app/json-editor/_components/Note.tsx

@@ -0,0 +1,115 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { AlertColors } from "@/config/siteConfig";
+import { cn } from "@/lib/utils";
+import { PlusCircle, Trash2 } from "lucide-react";
+import { z } from "zod";
+import { ScriptSchema } from "../_schemas/schemas";
+
+type Script = z.infer<typeof ScriptSchema>;
+
+type NoteProps = {
+  script: Script;
+  setScript: (script: Script) => void;
+  setIsValid: (isValid: boolean) => void;
+  setZodErrors: (zodErrors: z.ZodError | null) => void;
+};
+export default function Note({
+  script,
+  setScript,
+  setIsValid,
+  setZodErrors,
+}: NoteProps) {
+  const addNote = () => {
+    const newScript: Script = {
+      ...script,
+      notes: [...script.notes, { text: "", type: "" }],
+    };
+    setScript(newScript);
+  };
+
+  const updateNote = (
+    index: number,
+    key: keyof Script["notes"][number],
+    value: string,
+  ) => {
+    const updated: Script = {
+      ...script,
+      notes: script.notes.map((note: Script["notes"][number], i: number) =>
+        i === index ? { ...note, [key]: value } : note,
+      ),
+    };
+    const result = ScriptSchema.safeParse(updated);
+    setIsValid(result.success);
+    if (!result.success) {
+      setZodErrors(result.error);
+    } else {
+      setZodErrors(null);
+    }
+    setScript(updated);
+  };
+
+  const removeNote = (index: number) => {
+    const newScript: Script = {
+      ...script,
+      notes: script.notes.filter((_: Script["notes"][number], i: number) => i !== index),
+    };
+    setScript(newScript);
+  };
+
+  return (
+    <>
+      <h3 className="text-xl font-semibold">Notes</h3>
+      {script.notes.map((note, index) => (
+        <div key={index} className="space-y-2 border p-4 rounded">
+          <Input
+            placeholder="Note Text"
+            value={note.text}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateNote(index, "text", e.target.value)}
+          />
+          <Select
+            value={note.type}
+            onValueChange={(value: string) => updateNote(index, "type", value)}
+          >
+            <SelectTrigger className="flex-1">
+              <SelectValue placeholder="Type" />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.keys(AlertColors).map((type) => (
+                <SelectItem key={type} value={type}>
+                  <span className="flex items-center gap-2">
+                    {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
+                    <div
+                      className={cn(
+                        "size-4 rounded-full border",
+                        AlertColors[type as keyof typeof AlertColors],
+                      )}
+                    />
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button
+            size={"sm"}
+            variant="destructive"
+            type="button"
+            onClick={() => removeNote(index)}
+          >
+            <Trash2 className="mr-2 h-4 w-4" /> Remove Note
+          </Button>
+        </div>
+      ))}
+      <Button type="button" size={"sm"} onClick={addNote}>
+        <PlusCircle className="mr-2 h-4 w-4" /> Add Note
+      </Button>
+    </>
+  );
+}