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
@@ -6,6 +6,7 @@ import { useToastStore } from "@/stores/toast";
 import TaskLogSection from "@/components/TaskLogSection.vue";
 import { renderMarkdown } from "@/utils/markdown";
 import { Trash2, X } from "lucide-vue-next";
+import { relativeTimeOrDate } from "@/composables/useRelativeTime";

 const props = defineProps<{ projectId: number }>();

@@ -198,20 +199,6 @@ function cancelDeleteTask() {
  deleteConfirmPending.value = false;
 }

-function formatDate(iso: string): string {
-  const d = new Date(iso);
-  const now = new Date();
-  const diffMs = now.getTime() - d.getTime();
-  const diffMin = Math.floor(diffMs / 60_000);
-  const diffHrs = Math.floor(diffMs / 3_600_000);
-  const diffDays = Math.floor(diffMs / 86_400_000);
-  if (diffMin < 1) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  if (diffHrs < 24) return `${diffHrs}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-}
-
 onMounted(loadAll);
 defineExpose({ reload: loadAll });
 </script>
@@ -256,7 +243,7 @@ defineExpose({ reload: loadAll });
              <span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
              <span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
              <span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</span>
-              <span class="task-age">{{ formatDate(task.updated_at) }}</span>
+              <span class="task-age">{{ relativeTimeOrDate(task.updated_at) }}</span>
            </li>
            <li v-if="groupedTasks.noMilestone.length === 0" class="empty-group">No tasks</li>
          </ul>
@@ -281,7 +268,7 @@ defineExpose({ reload: loadAll });
              <span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
              <span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
              <span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</span>
-              <span class="task-age">{{ formatDate(task.updated_at) }}</span>
+              <span class="task-age">{{ relativeTimeOrDate(task.updated_at) }}</span>
            </li>
            <li v-if="msTasks.length === 0" class="empty-group">No tasks</li>
          </ul>