curo/kite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(03): UI design contract for Phase 3 document migration

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
2026-05-23 10:21:05 +02:00
parent 5905642a31
commit 1ba578c7f6
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.planning/phases/03-document-migration-multi-user-isolation/03-UI-SPEC.md
+14 -11
View File
@@ -1,7 +1,8 @@
--- ---
phase: 3 phase: 3
slug: document-migration-multi-user-isolation slug: document-migration-multi-user-isolation
status: draft status: approved
reviewed_at: 2026-05-23
shadcn_initialized: false shadcn_initialized: false
preset: none preset: none
created: 2026-05-23 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. 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:** **New in Phase 3:**
- Quota bar label: `text-xs text-gray-500` (body at reduced size — acceptable exception for sidebar metadata density). - Quota bar label: `text-sm text-gray-500` — visual subordination via muted color, not reduced size.
- Upload step label (beneath progress bar): `text-xs text-gray-400` — same pattern as existing `UploadProgress.vue` status lines. - 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-xs text-red-600` — matches Phase 2 inline field error style. - 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` - In-progress fill color: `bg-indigo-500`
- Complete fill color: `bg-green-500` - Complete fill color: `bg-green-500`
- Error fill color: `bg-red-400` (stops at last % value, does not reset to 0) - 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 ### 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 ```html
<div class="px-4 py-3 border-t border-gray-100"> <div class="px-4 py-3 border-t border-gray-100">
<!-- Label row --> <!-- Label row -->
<div class="flex items-center justify-between mb-1.5"> <div class="flex items-center justify-between mb-1">
<span class="text-xs font-semibold text-gray-500">Storage</span> <span class="text-sm font-semibold text-gray-500">Storage</span>
<span class="text-xs {label-color}">X MB of Y MB</span> <span class="text-sm {label-color}">X MB of Y MB</span>
</div> </div>
<!-- Bar track --> <!-- Bar track -->
<div class="w-full h-2 bg-gray-200 rounded-full"> <div class="w-full h-2 bg-gray-200 rounded-full">
@@ -238,8 +241,8 @@ Displayed inline within the upload progress row, replacing the progress bar and
Error block styles: Error block styles:
- Container: `mt-1 p-3 rounded-lg bg-red-50 border border-red-200` - Container: `mt-1 p-3 rounded-lg bg-red-50 border border-red-200`
- Heading: `text-sm font-semibold text-red-700` - Heading: `text-sm font-semibold text-red-700`
- Body lines: `text-xs text-red-600 mt-0.5` - Body lines: `text-sm text-red-600 mt-1`
- 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) - 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}}`. 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 - "This file (X MB)" — `rejected_bytes` converted to MB, 1 decimal place