feat(FN-005): implement frontend foundation with auth and routing

- Add OIDC authentication with PKCE flow - Create dashboard shell with sidebar and header - Implement project management UI (list, create, detail) - Add tool spawn page with tool/project selection - Create tool instance detail page with status and controls - Set up React Router with route guards - Add Zustand auth store and API client with types
2026-05-14 17:28:15 +02:00
parent 6aea953734
commit 6f18dd24a5
27 changed files with 1469 additions and 43 deletions
@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { api } from '../api/client'
+
+export default function ProjectFormPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const isEditing = !!id
+
+  const [name, setName] = useState('')
+  const [slug, setSlug] = useState('')
+  const [description, setDescription] = useState('')
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const { data: project } = useQuery({
+    queryKey: ['project', id],
+    queryFn: () => api.getProject(id!),
+    enabled: isEditing,
+  })
+
+  useEffect(() => {
+    if (project) {
+      setName(project.name)
+      setSlug(project.slug)
+      setDescription(project.description || '')
+    }
+  }, [project])
+
+  const createMutation = useMutation({
+    mutationFn: api.createProject,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] })
+      navigate('/projects')
+    },
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Parameters<typeof api.updateProject>[1] }) =>
+      api.updateProject(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] })
+      queryClient.invalidateQueries({ queryKey: ['project', id] })
+      navigate(`/projects/${id}`)
+    },
+  })
+
+  const validate = () => {
+    const newErrors: Record<string, string> = {}
+    if (!name.trim()) newErrors.name = 'Name is required'
+    if (!slug.trim()) newErrors.slug = 'Slug is required'
+    if (!/^[a-z0-9-]+$/i.test(slug)) newErrors.slug = 'Slug must contain only letters, numbers, and hyphens'
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!validate()) return
+
+    const data = {
+      name: name.trim(),
+      slug: slug.trim(),
+      description: description.trim() || null,
+    }
+
+    if (isEditing) {
+      updateMutation.mutate({ id: id!, data })
+    } else {
+      createMutation.mutate(data)
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h1 className="text-3xl font-bold mb-6">
+        {isEditing ? 'Edit Project' : 'New Project'}
+      </h1>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface"
+            placeholder="My Awesome Project"
+          />
+          {errors.name && <p className="text-red-400 text-sm mt-1">{errors.name}</p>}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Slug</label>
+          <input
+            type="text"
+            value={slug}
+            onChange={(e) => setSlug(e.target.value)}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface"
+            placeholder="my-awesome-project"
+          />
+          {errors.slug && <p className="text-red-400 text-sm mt-1">{errors.slug}</p>}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Description</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface"
+            rows={3}
+            placeholder="Optional description..."
+          />
+        </div>
+
+        <div className="flex gap-4">
+          <button
+            type="submit"
+            className="px-4 py-2 bg-accent text-bg rounded-lg hover:bg-accent/80 transition-colors"
+          >
+            {isEditing ? 'Update' : 'Create'} Project
+          </button>
+          <button
+            type="button"
+            onClick={() => navigate('/projects')}
+            className="px-4 py-2 border border-border rounded-lg hover:bg-surface transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}