feat: implement auth, projects, and frontend foundation

2026-05-17 20:21:55 +00:00
parent e7819bfc82
commit 71d9fe6406
88 changed files with 10936 additions and 47 deletions
@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  createProject,
+  deleteProject,
+  listProjects,
+  updateProject,
+  type ProjectCreateInput,
+  type ProjectUpdateInput,
+} from "../api/projects";
+import type { Project } from "../types";
+
+type ProjectsStatus = "loading" | "ready" | "error";
+type DialogMode = "none" | "create" | "edit";
+
+export const ProjectsPage = () => {
+  const [status, setStatus] = useState<ProjectsStatus>("loading");
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [dialogMode, setDialogMode] = useState<DialogMode>("none");
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+  const [formName, setFormName] = useState("");
+  const [formDescription, setFormDescription] = useState("");
+  const [formError, setFormError] = useState<string | null>(null);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+  const loadProjects = useCallback(async () => {
+    setStatus("loading");
+    try {
+      const data = await listProjects();
+      setProjects(data);
+      setStatus("ready");
+    } catch {
+      setProjects([]);
+      setStatus("error");
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProjects();
+  }, [loadProjects]);
+
+  const openCreate = () => {
+    setFormName("");
+    setFormDescription("");
+    setFormError(null);
+    setEditingProject(null);
+    setDialogMode("create");
+  };
+
+  const openEdit = (project: Project) => {
+    setFormName(project.name);
+    setFormDescription(project.description ?? "");
+    setFormError(null);
+    setEditingProject(project);
+    setDialogMode("edit");
+  };
+
+  const closeDialog = () => {
+    setDialogMode("none");
+    setEditingProject(null);
+    setFormError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormError(null);
+
+    if (!formName.trim()) {
+      setFormError("Project name is required");
+      return;
+    }
+
+    try {
+      if (dialogMode === "create") {
+        const input: ProjectCreateInput = {
+          name: formName.trim(),
+          description: formDescription.trim() || null,
+        };
+        await createProject(input);
+      } else if (dialogMode === "edit" && editingProject) {
+        const input: ProjectUpdateInput = {
+          name: formName.trim(),
+          description: formDescription.trim() || null,
+        };
+        await updateProject(editingProject.id, input);
+      }
+      closeDialog();
+      await loadProjects();
+    } catch {
+      setFormError("Failed to save project");
+    }
+  };
+
+  const handleDelete = async (projectId: string) => {
+    try {
+      await deleteProject(projectId);
+      setDeleteConfirmId(null);
+      await loadProjects();
+    } catch {
+      setDeleteConfirmId(null);
+    }
+  };
+
+  const isEmpty = status === "ready" && projects.length === 0;
+
+  return (
+    <section className="stack">
+      <div className="page-header">
+        <h1>Projects</h1>
+        <button className="primary-button" onClick={openCreate} type="button">
+          New Project
+        </button>
+      </div>
+
+      {status === "loading" && <p className="muted">Loading projects...</p>}
+
+      {status === "error" && (
+        <div className="card stack">
+          <p>Failed to load projects</p>
+          <button className="secondary-button" onClick={() => void loadProjects()} type="button">
+            Retry
+          </button>
+        </div>
+      )}
+
+      {isEmpty && <p className="muted">No projects yet. Create your first project above.</p>}
+
+      {status === "ready" && projects.length > 0 && (
+        <div className="project-list">
+          {projects.map((project) => (
+            <article className="card project-card" key={project.id}>
+              <div className="project-info">
+                <h3>{project.name}</h3>
+                {project.description && <p className="muted">{project.description}</p>}
+              </div>
+              <div className="project-actions">
+                <button
+                  className="ghost-button"
+                  onClick={() => openEdit(project)}
+                  type="button"
+                >
+                  Edit
+                </button>
+                {deleteConfirmId === project.id ? (
+                  <div className="delete-confirm">
+                    <span>Are you sure?</span>
+                    <button
+                      className="danger-button"
+                      onClick={() => void handleDelete(project.id)}
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                    <button
+                      className="ghost-button"
+                      onClick={() => setDeleteConfirmId(null)}
+                      type="button"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    className="ghost-button danger-text"
+                    onClick={() => setDeleteConfirmId(project.id)}
+                    type="button"
+                  >
+                    Delete
+                  </button>
+                )}
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+
+      {dialogMode !== "none" && (
+        <div className="dialog-overlay" role="dialog" aria-modal="true">
+          <div className="dialog">
+            <h2>{dialogMode === "create" ? "Create Project" : "Edit Project"}</h2>
+            <form onSubmit={handleSubmit} className="stack">
+              <label className="form-field">
+                Name
+                <input
+                  type="text"
+                  value={formName}
+                  onChange={(e) => setFormName(e.target.value)}
+                  placeholder="Project name"
+                />
+              </label>
+              <label className="form-field">
+                Description
+                <textarea
+                  value={formDescription}
+                  onChange={(e) => setFormDescription(e.target.value)}
+                  placeholder="Optional description"
+                  rows={3}
+                />
+              </label>
+              {formError && <p className="error-text">{formError}</p>}
+              <div className="dialog-actions">
+                <button className="secondary-button" onClick={closeDialog} type="button">
+                  Cancel
+                </button>
+                <button className="primary-button" type="submit">
+                  {dialogMode === "create" ? "Create" : "Save"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};