Optimize website json-editor page and components (#265)

* 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

* Add JSON Editor route to sitemap for improved SEO and navigation

* Refactor JSON Editor components to improve performance with memoization and streamline state updates with useCallback

---------

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

@@ -12,6 +12,7 @@ import { cn } from "@/lib/utils";
 import { PlusCircle, Trash2 } from "lucide-react";
 import { z } from "zod";
 import { ScriptSchema } from "../_schemas/schemas";
+import { memo, useCallback } from "react";
 
 type Script = z.infer<typeof ScriptSchema>;
 
@@ -21,95 +22,98 @@ type NoteProps = {
   setIsValid: (isValid: boolean) => void;
   setZodErrors: (zodErrors: z.ZodError | null) => void;
 };
-export default function Note({
+
+function Note({
   script,
   setScript,
   setIsValid,
   setZodErrors,
 }: NoteProps) {
-  const addNote = () => {
-    const newScript: Script = {
+  const addNote = useCallback(() => {
+    setScript({
       ...script,
       notes: [...script.notes, { text: "", type: "" }],
-    };
-    setScript(newScript);
-  };
+    });
+  }, [script, setScript]);
 
-  const updateNote = (
+  const updateNote = useCallback((
     index: number,
     key: keyof Script["notes"][number],
     value: string,
   ) => {
     const updated: Script = {
       ...script,
-      notes: script.notes.map((note: Script["notes"][number], i: number) =>
+      notes: script.notes.map((note, i) =>
         i === index ? { ...note, [key]: value } : note,
       ),
     };
     const result = ScriptSchema.safeParse(updated);
     setIsValid(result.success);
-    if (!result.success) {
-      setZodErrors(result.error);
-    } else {
-      setZodErrors(null);
-    }
+    setZodErrors(result.success ? null : result.error);
     setScript(updated);
-  };
+  }, [script, setScript, setIsValid, setZodErrors]);
 
-  const removeNote = (index: number) => {
-    const newScript: Script = {
+  const removeNote = useCallback((index: number) => {
+    setScript({
       ...script,
-      notes: script.notes.filter((_: Script["notes"][number], i: number) => i !== index),
-    };
-    setScript(newScript);
-  };
+      notes: script.notes.filter((_, i) => i !== index),
+    });
+  }, [script, setScript]);
+
+  const NoteItem = memo(({ note, index }: { note: Script["notes"][number], index: number }) => (
+    <div className="space-y-2 border p-4 rounded">
+      <Input
+        placeholder="Note Text"
+        value={note.text}
+        onChange={(e) => updateNote(index, "text", e.target.value)}
+      />
+      <Select
+        value={note.type}
+        onValueChange={(value) => 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>
+  ));
+
+  NoteItem.displayName = 'NoteItem';
 
   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>
+        <NoteItem key={index} note={note} index={index} />
       ))}
-      <Button type="button" size={"sm"} onClick={addNote}>
+      <Button type="button" size="sm" onClick={addNote}>
         <PlusCircle className="mr-2 h-4 w-4" /> Add Note
       </Button>
     </>
   );
 }
+
+export default memo(Note);