refactor(frontend): auth-shared.css, apiErrorMessage, one date helper per shape, modal canon in components.css — the frontend pass of the shape audit (#2831 #2832, milestone 296)

- assets/auth-shared.css: the five auth views carried byte-identical scoped copies of the page/card/brand/footer/field/input/error rules (~60 lines each); they now load one stylesheet the way the editors load editor-shared.css. .closed-msg/.error-block/.success-msg (identical bodies) are one .auth-note; the form rules are scoped under .auth-card so nothing leaks into the rest of the app. - api/client.apiErrorMessage(e, fallback): the one place the {"error"} envelope is unpacked; replaces ten six-line `"body" in e` catch blocks. - utils/dateFormat: fmtDate / fmtStamp / fmtLogStamp replace eight local formatDate/formatTime copies (three byte-identical pairs); the file’s old Calendar/Home helpers had no callers and are gone. useRelativeTime gains relativeTimeOrDate for the two workspace panels’ identical variant. - components.css now owns the .modal-* shape (overlay/card/title/message/ actions/btn/primary/danger). It was copied into four views and lived in editor-shared.css, which ConfirmDialog — styleless, teleported to <body> — silently depended on: opened from SnippetDetailView before any editor view had loaded, it rendered unstyled. Views keep only their own overrides. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-21 12:41:18 -04:00
parent 7d48eb0b1b
commit 2a6c55dacb
22 changed files with 290 additions and 834 deletions
@@ -221,3 +221,79 @@
                                                     is the page's main action */
  font-size: var(--fs-size-body-sm);
 }
+
+
+/* ── Modal ─────────────────────────────────────────────────────────────────
+   The one overlay/card/button shape for every in-app dialog (ConfirmDialog,
+   the create-project / merge-snippet / systems dialogs, the editors' confirm
+   prompts). Global on purpose: ConfirmDialog teleports to <body> and has no
+   styles of its own, so these must be loaded with the app, not with whichever
+   view happens to be open. Views add only their own overrides (a wider card,
+   a form layout). Destructive = action-destructive per the Hybrid rule. */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--fs-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+.modal-card {
+  background: var(--fs-surface-raised);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-radius-lg);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 8px 32px var(--color-shadow);
+}
+.modal-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.05rem;
+}
+.modal-message {
+  font-size: 0.9rem;
+  color: var(--fs-text-secondary);
+  margin: 0 0 1.25rem;
+  line-height: 1.5;
+}
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+.modal-btn {
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--fs-border-color);
+  background: var(--fs-surface-raised);
+  color: var(--fs-text-primary);
+  border-radius: var(--fs-radius-sm);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-family: inherit;
+}
+.modal-btn:hover {
+  background: var(--fs-surface-page);
+}
+.modal-btn-primary {
+  background: var(--fs-action-primary);
+  border-color: var(--fs-action-primary);
+  color: var(--fs-text-on-action);
+}
+.modal-btn-primary:hover:not(:disabled) {
+  background: var(--fs-action-primary-hover);
+}
+.modal-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.modal-btn-danger {
+  background: var(--fs-action-destructive);
+  border-color: var(--fs-action-destructive);
+  color: var(--fs-text-on-action);
+}
+.modal-btn-danger:hover {
+  background: var(--fs-action-destructive-hover);
+  border-color: var(--fs-action-destructive-hover);
+}