feat: add project settings page navigation

- Remove inline edit modal from projects listing page
- Add Settings link to project cards navigating to /projects/:id/settings
- Reposition Open Workspace button to rightmost action for easier access
- Update tests for new UI flow
- Update documentation to reflect new editing workflow
- Sync specs: frontend-foundation and project-management

Quality gates: npm run lint passed

apps/web/src/pages/projects.tsx

@@ -6,21 +6,17 @@ import {
   createProject,
   deleteProject,
   listProjects,
-  updateProject,
   type ProjectCreateInput,
-  type ProjectUpdateInput,
 } from "../api/projects";
 import { Icon } from "../components/icon";
 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 [showCreate, setShowCreate] = useState(false);
   const [formName, setFormName] = useState("");
   const [formDescription, setFormDescription] = useState("");
   const [formError, setFormError] = useState<string | null>(null);
@@ -46,25 +42,15 @@ export const ProjectsPage = () => {
     setFormName("");
     setFormDescription("");
     setFormError(null);
-    setEditingProject(null);
-    setDialogMode("create");
+    setShowCreate(true);
   };
 
-  const openEdit = (project: Project) => {
-    setFormName(project.name);
-    setFormDescription(project.description ?? "");
-    setFormError(null);
-    setEditingProject(project);
-    setDialogMode("edit");
-  };
-
-  const closeDialog = () => {
-    setDialogMode("none");
-    setEditingProject(null);
+  const closeCreate = () => {
+    setShowCreate(false);
     setFormError(null);
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleCreate = async (e: React.FormEvent) => {
     e.preventDefault();
     setFormError(null);
 
@@ -74,20 +60,12 @@ export const ProjectsPage = () => {
     }
 
     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();
+      const input: ProjectCreateInput = {
+        name: formName.trim(),
+        description: formDescription.trim() || null,
+      };
+      await createProject(input);
+      closeCreate();
       await loadProjects();
     } catch {
       setFormError("Failed to save project");
@@ -139,17 +117,13 @@ export const ProjectsPage = () => {
                 {project.description && <p className="muted">{project.description}</p>}
               </div>
               <div className="project-actions">
-                <Link className="ghost-button" to={`/projects/${project.id}`}>
-                  Open Workspace
-                </Link>
-                <button
+                <Link
                   className="ghost-button"
-                  onClick={() => openEdit(project)}
-                  type="button"
+                  to={`/projects/${project.id}/settings`}
                 >
-                  <Icon name="edit" size="sm" />
-                  Edit
-                </button>
+                  <Icon name="settings" size="sm" />
+                  Settings
+                </Link>
                 {deleteConfirmId === project.id ? (
                   <div className="delete-confirm">
                     <span>Are you sure?</span>
@@ -180,17 +154,20 @@ export const ProjectsPage = () => {
                     Delete
                   </button>
                 )}
+                <Link className="ghost-button" to={`/projects/${project.id}`}>
+                  Open Workspace
+                </Link>
               </div>
             </article>
           ))}
         </div>
       )}
 
-      {dialogMode !== "none" && (
+      {showCreate && (
         <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">
+            <h2>Create Project</h2>
+            <form onSubmit={handleCreate} className="stack">
               <label className="form-field">
                 Name
                 <input
@@ -211,22 +188,13 @@ export const ProjectsPage = () => {
               </label>
               {formError && <p className="error-text">{formError}</p>}
               <div className="dialog-actions">
-                <button className="secondary-button" onClick={closeDialog} type="button">
+                <button className="secondary-button" onClick={closeCreate} type="button">
                   <Icon name="cancel" size="sm" />
                   Cancel
                 </button>
                 <button className="primary-button" type="submit">
-                  {dialogMode === "create" ? (
-                    <>
-                      <Icon name="add" size="sm" />
-                      Create
-                    </>
-                  ) : (
-                    <>
-                      <Icon name="save" size="sm" />
-                      Save
-                    </>
-                  )}
+                  <Icon name="add" size="sm" />
+                  Create
                 </button>
               </div>
             </form>