Add form to add new app/section

backend/apps.yaml

@@ -24,3 +24,4 @@ sections:
     url: https://woodpecker.dvirlabs.com
   name: Dev-tools
 
+

backend/main.py

@@ -29,13 +29,16 @@ def get_apps():
     with open(APPS_FILE, "r") as f:
         return yaml.safe_load(f)
     
-class AppEntry(BaseModel):
-    section: str
+class AppData(BaseModel):
     name: str
     icon: str
     description: str
     url: str
 
+class AppEntry(BaseModel):
+    section: str
+    app: AppData
+
 @app.post("/add_app")
 def add_app(entry: AppEntry):
     if not APPS_FILE.exists():
@@ -47,22 +50,12 @@ def add_app(entry: AppEntry):
     # Find or create section
     for section in current["sections"]:
         if section["name"] == entry.section:
-            section["apps"].append({
-                "name": entry.name,
-                "icon": entry.icon,
-                "description": entry.description,
-                "url": entry.url,
-            })
+            section["apps"].append(entry.app.dict())
             break
     else:
         current["sections"].append({
             "name": entry.section,
-            "apps": [{
-                "name": entry.name,
-                "icon": entry.icon,
-                "description": entry.description,
-                "url": entry.url,
-            }]
+            "apps": [entry.app.dict()]
         })
 
     with open(APPS_FILE, "w") as f:
@@ -70,6 +63,7 @@ def add_app(entry: AppEntry):
 
     return {"status": "added"}
 
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

frontend/src/App.jsx

@@ -1,19 +1,26 @@
+// src/App.jsx
 import { useEffect, useState } from 'react';
 import './App.css';
 import SectionGrid from './components/SectionGrid';
+import ControlPanel from './components/ControlPanel';
 
 function App() {
   const [sections, setSections] = useState([]);
 
-  useEffect(() => {
+  const fetchSections = () => {
     fetch('/apps')
       .then(res => res.json())
       .then(data => setSections(data.sections || []));
+  };
+
+  useEffect(() => {
+    fetchSections();
   }, []);
 
   return (
     <div className="App">
       <h1 className="main-title">🔷 Navix</h1>
+      <ControlPanel onUpdate={fetchSections} />
       {sections.map((section) => (
         <SectionGrid key={section.name} section={section} />
       ))}

frontend/vite.config.js

@@ -6,7 +6,8 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
-      '/apps': 'http://localhost:8000'
+      '/apps': 'http://localhost:8000',
+      '/add_app': 'http://localhost:8000',
     }
   }
 });