Feat: Add config path to website (#4005)

* Feat: Add config path to website

* Handel Responsive/Mobile

frontend/src/app/json-editor/_schemas/schemas.ts

@@ -33,6 +33,7 @@ export const ScriptSchema = z.object({
   documentation: z.string().nullable(),
   website: z.string().url().nullable(),
   logo: z.string().url().nullable(),
+  config_path: z.string(),
   description: z.string().min(1, "Description is required"),
   install_methods: z.array(InstallMethodSchema).min(1, "At least one install method is required"),
   default_credentials: z.object({

frontend/src/app/json-editor/page.tsx

@@ -32,6 +32,7 @@ const initialScript: Script = {
   privileged: false,
   interface_port: null,
   documentation: null,
+  config_path: "",
   website: null,
   logo: null,
   description: "",
@@ -174,6 +175,14 @@ export default function JSONGenerator() {
               onChange={(e) => updateScript("logo", e.target.value || null)}
             />
           </div>
+          <div>
+            <Label>Config Path</Label>
+            <Input
+              placeholder="Path to config file"
+              value={script.config_path || ""}
+              onChange={(e) => updateScript("config_path", e.target.value || null)}
+            />
+          </div>
           <div>
             <Label>
               Description <span className="text-red-500">*</span>

frontend/src/app/scripts/_components/ScriptItem.tsx

@@ -20,6 +20,7 @@ import Description from "./ScriptItems/Description";
 import InstallCommand from "./ScriptItems/InstallCommand";
 import InterFaces from "./ScriptItems/InterFaces";
 import Tooltips from "./ScriptItems/Tooltips";
+import ConfigFile from "./ScriptItems/ConfigFile";
 
 interface ScriptItemProps {
   item: Script;
@@ -151,6 +152,16 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
               <div className="">
                 <InstallCommand item={item} />
               </div>
+              <Separator />
+              <div className="flex gap-3 px-4 py-2 bg-accent/25">
+                <h2 className="text-lg font-semibold">
+                  Location of config file
+                </h2>
+              </div>
+              <Separator />
+              <div className="">
+                <ConfigFile item={item} />
+              </div>
             </div>
 
             <DefaultPassword item={item} />

frontend/src/app/scripts/_components/ScriptItems/ConfigFile.tsx

@@ -0,0 +1,10 @@
+import ConfigCopyButton from "@/components/ui/config-copy-button";
+import { Script } from "@/lib/types";
+
+export default function ConfigFile({ item }: { item: Script }) {
+  return (
+    <div className="px-4 pb-4">
+      <ConfigCopyButton>{item.config_path ? item.config_path : "No config path set"}</ConfigCopyButton>
+    </div>
+  );
+}