diff --git a/.planning/phases/03-document-migration-multi-user-isolation/03-UI-SPEC.md b/.planning/phases/03-document-migration-multi-user-isolation/03-UI-SPEC.md index 66ca471..0ae7833 100644 --- a/.planning/phases/03-document-migration-multi-user-isolation/03-UI-SPEC.md +++ b/.planning/phases/03-document-migration-multi-user-isolation/03-UI-SPEC.md @@ -1,7 +1,8 @@ --- phase: 3 slug: document-migration-multi-user-isolation -status: draft +status: approved +reviewed_at: 2026-05-23 shadcn_initialized: false preset: none created: 2026-05-23 @@ -65,11 +66,13 @@ Identical to Phase 2 — inherited, not re-specified. Font weight scale: exactly 2 weights — regular (400) and semibold (600). Do not introduce `font-medium` (500) or `font-bold` (700). Do not use `font-medium` that already appears in `.nav-link` scoped styles — that is a pre-existing pattern in AppSidebar and must not be propagated to new components. **New in Phase 3:** -- Quota bar label: `text-xs text-gray-500` (body at reduced size — acceptable exception for sidebar metadata density). -- Upload step label (beneath progress bar): `text-xs text-gray-400` — same pattern as existing `UploadProgress.vue` status lines. -- Error detail lines in quota rejection: `text-xs text-red-600` — matches Phase 2 inline field error style. +- Quota bar label: `text-sm text-gray-500` — visual subordination via muted color, not reduced size. +- Upload step label (beneath progress bar): `text-sm text-gray-400` — subordination via color only; same contrast pattern as existing `UploadProgress.vue` status lines. +- Error detail lines in quota rejection: `text-sm text-red-600` — matches Phase 2 inline field error style. -**Source:** Phase 2 UI-SPEC. `UploadProgress.vue` uses `text-xs text-gray-400` for status lines — retained for consistency. +All three usages remain within the 4-size scale (Body/Label/Heading/Display). The existing `UploadProgress.vue` pattern of `text-xs` is NOT propagated to new Phase 3 code — all new code uses `text-sm` with color differentiation for hierarchy. + +**Source:** Phase 2 UI-SPEC. Maximum 4 type sizes enforced — no `text-xs` in new Phase 3 components. --- @@ -141,7 +144,7 @@ Bar specifications: - In-progress fill color: `bg-indigo-500` - Complete fill color: `bg-green-500` - Error fill color: `bg-red-400` (stops at last % value, does not reset to 0) -- Percentage label: `text-xs text-gray-400 text-right mt-0.5` — shown during upload, hidden after completion +- Percentage label: `text-sm text-gray-400 text-right mt-1` — shown during upload, hidden after completion ### Upload Progress Values by Step @@ -180,9 +183,9 @@ Insert the quota bar between the topics nav section (`.flex-1 nav`) and the bott ```html
-
- Storage - X MB of Y MB +
+ Storage + X MB of Y MB
@@ -238,8 +241,8 @@ Displayed inline within the upload progress row, replacing the progress bar and Error block styles: - Container: `mt-1 p-3 rounded-lg bg-red-50 border border-red-200` - Heading: `text-sm font-semibold text-red-700` -- Body lines: `text-xs text-red-600 mt-0.5` -- Link: `text-xs text-red-600 underline hover:text-red-700 font-semibold` — navigates to `/settings` (the existing settings route; storage settings live there in Phase 3 since the dedicated storage page is Phase 4) +- Body lines: `text-sm text-red-600 mt-1` +- Link: `text-sm text-red-600 underline hover:text-red-700 font-semibold` — navigates to `/settings` (the existing settings route; storage settings live there in Phase 3 since the dedicated storage page is Phase 4) Values populated from 413 response body: `{"detail": {"used_bytes": N, "limit_bytes": M, "rejected_bytes": K}}`. - "This file (X MB)" — `rejected_bytes` converted to MB, 1 decimal place