refactor: rename frontend pages to PascalCase with Page suffix

Renamed 18 page files: - dashboard.tsx → DashboardPage.tsx - projects.tsx → ProjectsPage.tsx - sessions.tsx → SessionsPage.tsx - settings.tsx → SettingsPage.tsx - ssh-keys.tsx → SshKeysPage.tsx - terminal.tsx → TerminalPage.tsx - tool-workshop.tsx → ToolWorkshopPage.tsx - config-profiles.tsx → ConfigProfilesPage.tsx - git-repositories.tsx → GitRepositoriesPage.tsx - repo-workspace.tsx → RepoWorkspacePage.tsx - workspaces.tsx → WorkspacesPage.tsx - workspace-detail.tsx → WorkspaceDetailPage.tsx - profile.tsx → ProfilePage.tsx - project-settings.tsx → ProjectSettingsPage.tsx - git-history.tsx → GitHistoryPage.tsx - placeholder.tsx → PlaceholderPage.tsx Updated router.tsx imports. Quality gates: verified no remaining old imports.
2026-06-04 12:34:43 +02:00
parent 020f832eed
commit 7224afafd1
19 changed files with 15 additions and 15 deletions
@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from "react";
+import { useParams, Link, useNavigate, Routes, Route } from "react-router-dom";
+import { SettingsTabLayout } from "../components/settings-tab-layout";
+import { RepositoriesSettingsTab } from "../components/repositories-settings-tab";
+import { apiClient } from "../api/client";
+import { Project } from "../types";
+
+const tabs = [
+  { id: "general", label: "General", path: "general" },
+  { id: "repositories", label: "Repositories", path: "repositories" },
+  { id: "members", label: "Members", path: "members" },
+];
+
+const GeneralSettings: React.FC<{
+  project: Project;
+  projectId: string;
+}> = ({ project, projectId }) => {
+  const navigate = useNavigate();
+  const [name, setName] = useState(project.name);
+  const [description, setDescription] = useState(project.description || "");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await apiClient.patch(`/projects/${projectId}`, {
+        name,
+        description,
+      });
+    } catch (err) {
+      setError("Failed to save changes");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!window.confirm("Are you sure you want to delete this project?")) return;
+    try {
+      await apiClient.delete(`/projects/${projectId}`);
+      navigate("/projects");
+    } catch (err) {
+      setError("Failed to delete project");
+    }
+  };
+
+  return (
+    <div className="settings-panel">
+      <h2>General Settings</h2>
+      {error && <div className="error-message">{error}</div>}
+
+      <div className="form-group">
+        <label>Project Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="form-input"
+        />
+      </div>
+
+      <div className="form-group">
+        <label>Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          className="form-textarea"
+          rows={4}
+        />
+      </div>
+
+      <div className="form-actions">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="btn-primary"
+        >
+          {saving ? "Saving..." : "Save Changes"}
+        </button>
+      </div>
+
+      <div className="danger-zone">
+        <h3>Danger Zone</h3>
+        <button onClick={handleDelete} className="btn-danger">
+          Delete Project
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const MembersSettingsTab: React.FC = () => (
+  <div className="settings-panel">
+    <h2>Members</h2>
+    <p>Team members management coming soon.</p>
+  </div>
+);
+
+export const ProjectSettingsPage: React.FC = () => {
+  const { projectId } = useParams<{ projectId: string }>();
+  const [project, setProject] = useState<Project | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchProject = async () => {
+      try {
+        const response = await apiClient.get(`/projects/${projectId}`);
+        setProject(response.data);
+      } catch (err) {
+        setError("Failed to load project");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [projectId]);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div className="error-message">{error}</div>;
+  if (!project) return <div>Project not found</div>;
+
+  return (
+    <div className="project-settings-page">
+      <div className="settings-breadcrumb">
+        <Link to="/projects">Projects</Link>
+        <span> &gt; </span>
+        <Link to={`/projects/${projectId}`}>{project.name}</Link>
+        <span> &gt; </span>
+        <span>Settings</span>
+      </div>
+
+      <SettingsTabLayout tabs={tabs} basePath={`/projects/${projectId}/settings`}>
+        <Routes>
+          <Route
+            path="general"
+            element={<GeneralSettings project={project} projectId={projectId!} />}
+          />
+          <Route path="repositories" element={<RepositoriesSettingsTab />} />
+          <Route path="members" element={<MembersSettingsTab />} />
+          <Route path="*" element={<GeneralSettings project={project} projectId={projectId!} />} />
+        </Routes>
+      </SettingsTabLayout>
+    </div>
+  );
+};