Add versioned project settings modal

src/app/projects/[projectId]/page.tsx

@@ -40,6 +40,10 @@ import {
   type ProjectDeviceSyncField,
 } from "../../../shared/constants/project-device-sync-fields";
 import { ProjectVersionHistory } from "../../../frontend/components/project-version-history";
+import {
+  ProjectSettingsModal,
+  type ProjectSettingsInput,
+} from "../../../frontend/components/project-settings-modal";
 
 const projectDeviceSyncFieldLabels: Record<ProjectDeviceSyncField, string> = {
   name: "Technischer Name",
@@ -92,8 +96,7 @@ export default function ProjectDetailPage() {
   const [roomNumber, setRoomNumber] = useState("");
   const [roomName, setRoomName] = useState("");
   const [roomFloorId, setRoomFloorId] = useState("");
-  const [singlePhaseVoltageV, setSinglePhaseVoltageV] = useState("230");
-  const [threePhaseVoltageV, setThreePhaseVoltageV] = useState("400");
+  const [isProjectSettingsOpen, setIsProjectSettingsOpen] = useState(false);
   const [projectDeviceForm, setProjectDeviceForm] = useState<Record<string, string>>({
     name: "",
     displayName: "",
@@ -142,10 +145,6 @@ export default function ProjectDetailPage() {
       ]) => {
         const currentProject = projects.find((item) => item.id === projectId) ?? null;
         setProject(currentProject);
-        if (currentProject) {
-          setSinglePhaseVoltageV(String(currentProject.singlePhaseVoltageV));
-          setThreePhaseVoltageV(String(currentProject.threePhaseVoltageV));
-        }
         setBoards(distributionBoards);
         setCircuitLists(loadedCircuitLists);
         setFloors(loadedFloors);
@@ -259,7 +258,7 @@ export default function ProjectDetailPage() {
     }
   }
 
-  async function handleSaveProjectSettings() {
+  async function handleSaveProjectSettings(input: ProjectSettingsInput) {
     if (!projectId || !project) {
       return;
     }
@@ -269,12 +268,10 @@ export default function ProjectDetailPage() {
       const result = await updateProjectSettings(
         projectId,
         project.currentRevision,
-        {
-          singlePhaseVoltageV: Number(singlePhaseVoltageV),
-          threePhaseVoltageV: Number(threePhaseVoltageV),
-        }
+        input
       );
       setProject(result.project);
+      setIsProjectSettingsOpen(false);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Projekteigenschaften konnten nicht gespeichert werden.");
     } finally {
@@ -532,66 +529,34 @@ export default function ProjectDetailPage() {
 
   return (
     <main className="container py-4">
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <div className="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
         <div>
           <h1 className="h3 mb-1">{project?.name ?? "Projekt"}</h1>
-          <p className="text-secondary mb-0">Verteilerübersicht und Einstieg in die Stromkreislisten</p>
+          <p className="text-secondary mb-0">
+            {project?.internalProjectNumber
+              ? `Projektnummer ${project.internalProjectNumber} · `
+              : ""}
+            Verteilerübersicht und Einstieg in die Stromkreislisten
+          </p>
+        </div>
+        <div className="d-flex gap-2">
+          <button
+            className="btn btn-outline-primary"
+            disabled={!project}
+            onClick={() => setIsProjectSettingsOpen(true)}
+            type="button"
+          >
+            Projekteinstellungen
+          </button>
+          <Link className="btn btn-outline-secondary" href="/projects">
+            Zur Projektübersicht
+          </Link>
         </div>
-        <Link className="btn btn-outline-secondary" href="/projects">
-          Zur Projektseite
-        </Link>
       </div>
 
       {error ? <div className="alert alert-warning">{error}</div> : null}
 
       <div className="row g-4">
-        <section className="col-12">
-          <div className="card shadow-sm">
-            <div className="card-header">Projekteigenschaften</div>
-            <div className="card-body">
-              <div className="row g-3 align-items-end">
-                <div className="col-12 col-md-4">
-                  <label className="form-label">Standardspannung 1-phasig [V]</label>
-                  <input
-                    className="form-control"
-                    type="number"
-                    min="1"
-                    value={singlePhaseVoltageV}
-                    onChange={(event) => setSinglePhaseVoltageV(event.target.value)}
-                  />
-                </div>
-                <div className="col-12 col-md-4">
-                  <label className="form-label">Standardspannung 3-phasig [V]</label>
-                  <input
-                    className="form-control"
-                    type="number"
-                    min="1"
-                    value={threePhaseVoltageV}
-                    onChange={(event) => setThreePhaseVoltageV(event.target.value)}
-                  />
-                </div>
-                <div className="col-12 col-md-4">
-                  <button
-                    className="btn btn-primary w-100"
-                    type="button"
-                    onClick={handleSaveProjectSettings}
-                    disabled={
-                      isSaving ||
-                      !project ||
-                      (Number(singlePhaseVoltageV) ===
-                        project.singlePhaseVoltageV &&
-                        Number(threePhaseVoltageV) ===
-                          project.threePhaseVoltageV)
-                    }
-                  >
-                    Projekteigenschaften speichern
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
         {project ? (
           <section className="col-12">
             <ProjectVersionHistory
@@ -1156,6 +1121,14 @@ export default function ProjectDetailPage() {
         ) : null}
       </section>
 
+      {project && isProjectSettingsOpen ? (
+        <ProjectSettingsModal
+          isSaving={isSaving}
+          onClose={() => setIsProjectSettingsOpen(false)}
+          onSave={handleSaveProjectSettings}
+          project={project}
+        />
+      ) : null}
     </main>
   );
 }