feat: complete TASK-WP2-02 project autosave

apps/web/src/project-pages.css

@@ -647,6 +647,59 @@
   font-weight: 700;
 }
 
+.project-conflict {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.75fr) minmax(280px, 1fr) auto;
+  gap: 24px;
+  align-items: center;
+  margin: 24px 0 0;
+  padding: 20px;
+  border: 2px solid #b42318;
+  background: #fff4f2;
+}
+
+.project-conflict h2,
+.project-conflict p {
+  margin: 0;
+}
+
+.project-conflict > div:first-child p {
+  font-family: Consolas, monospace;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.project-conflict > div:first-child span {
+  display: inline-block;
+  margin: 8px 14px 0 0;
+  font-family: Consolas, monospace;
+  font-size: 12px;
+}
+
+.project-conflict-actions {
+  display: grid;
+  min-width: 190px;
+  gap: 8px;
+}
+
+.project-conflict button {
+  min-height: 42px;
+  padding: 9px 14px;
+  border: 1px solid #111111;
+  border-radius: 0;
+  background: #ffffff;
+  font-weight: 800;
+}
+
+.project-conflict button:first-child:not(:disabled) {
+  background: #f2f500;
+}
+
+.project-conflict > strong {
+  grid-column: 1 / -1;
+  color: #8f1d14;
+}
+
 .project-identity {
   display: grid;
   grid-template-columns: 240px minmax(0, 1fr);
@@ -661,6 +714,25 @@
   margin: 0;
 }
 
+.save-status {
+  display: inline-block;
+  margin-top: 8px;
+  padding-left: 9px;
+  border-left: 3px solid #2f7d4a;
+  font-size: 12px;
+}
+
+.save-status.dirty,
+.save-status.saving {
+  border-color: #8a6a00;
+}
+
+.save-status.failed,
+.save-status.conflicted {
+  border-color: #b42318;
+  color: #8f1d14;
+}
+
 .project-identity p {
   margin-top: 4px;
   color: #6b6b65;
@@ -830,6 +902,61 @@
   color: #65655f;
 }
 
+.project-leave-overlay {
+  position: fixed;
+  z-index: 30;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgb(17 17 17 / 58%);
+}
+
+.project-leave-dialog {
+  width: min(560px, 100%);
+  padding: 28px;
+  border: 2px solid #111111;
+  background: #ffffff;
+  box-shadow: 10px 10px 0 #f2f500;
+}
+
+.project-leave-dialog > p {
+  margin: 0 0 8px;
+  font-family: Consolas, monospace;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.project-leave-dialog > h2 {
+  margin: 0 0 8px;
+}
+
+.project-leave-dialog > div {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin-top: 22px;
+}
+
+.project-leave-dialog button {
+  min-height: 44px;
+  padding: 9px;
+  border: 1px solid #111111;
+  border-radius: 0;
+  background: #ffffff;
+  font-weight: 800;
+}
+
+.project-leave-dialog button:first-child {
+  background: #f2f500;
+}
+
+.project-leave-dialog > strong {
+  display: block;
+  margin-top: 14px;
+  color: #8f1d14;
+}
+
 .local-only-footer {
   display: grid;
   width: 100%;
@@ -972,6 +1099,14 @@
     justify-self: start;
   }
 
+  .project-conflict {
+    grid-template-columns: 1fr;
+  }
+
+  .project-conflict-actions {
+    min-width: 0;
+  }
+
   .project-identity {
     display: grid;
     gap: 14px;
@@ -981,6 +1116,10 @@
     grid-template-columns: 1fr;
   }
 
+  .project-leave-dialog > div {
+    grid-template-columns: 1fr;
+  }
+
   .project-actions {
     grid-template-columns: 1fr;
   }