Add form to add new app/section

frontend/src/components/ControlPanel.jsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { addAppToSection } from '../services/api';
+import '../style/ControlPanel.css';
+
+function ControlPanel({ onUpdate }) {
+  const [section, setSection] = useState('');
+  const [name, setName] = useState('');
+  const [icon, setIcon] = useState('');
+  const [description, setDescription] = useState('');
+  const [url, setUrl] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!section || !name || !url) return;
+
+    try {
+      await addAppToSection({
+        section,
+        app: { name, icon, description, url }
+      });
+
+      if (onUpdate) onUpdate();
+      setSection('');
+      setName('');
+      setIcon('');
+      setDescription('');
+      setUrl('');
+    } catch (err) {
+      console.error('Failed to add app:', err);
+    }
+  };
+
+  return (
+    <form className="control-panel" onSubmit={handleSubmit}>
+      <input type="text" placeholder="Section name" value={section} onChange={(e) => setSection(e.target.value)} />
+      <input type="text" placeholder="App name" value={name} onChange={(e) => setName(e.target.value)} />
+      <input type="text" placeholder="Icon URL" value={icon} onChange={(e) => setIcon(e.target.value)} />
+      <input type="text" placeholder="Description" value={description} onChange={(e) => setDescription(e.target.value)} />
+      <input type="text" placeholder="App URL" value={url} onChange={(e) => setUrl(e.target.value)} />
+      <button type="submit">Add App</button>
+    </form>
+  );
+}
+
+export default ControlPanel;

frontend/src/services/api.js

@@ -0,0 +1,15 @@
+export async function fetchSections() {
+  const res = await fetch('/apps');
+  if (!res.ok) throw new Error('Failed to fetch sections');
+  return res.json();
+}
+
+export async function addAppToSection({ section, app }) {
+  const res = await fetch('/add_app', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ section, app })
+  });
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}

frontend/src/style/ControlPanel.css

@@ -0,0 +1,27 @@
+.control-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+  background-color: #1e1e1e;
+  padding: 1rem;
+  border-radius: 8px;
+  max-width: 400px;
+}
+
+.control-panel input,
+.control-panel button {
+  padding: 0.5rem;
+  border: none;
+  border-radius: 4px;
+}
+
+.control-panel button {
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+}
+
+.control-panel button:hover {
+  background-color: #0056b3;
+}