fix(milestone): close v0.2 audit gaps
This commit is contained in:
curo1305
@@ -1,7 +1,7 @@
|
||||
---
|
||||
phase: 11-visual-design-responsive-layout-cleanup
|
||||
verified: 2026-06-17T09:45:00Z
|
||||
status: human_needed
|
||||
status: passed
|
||||
score: 12/12 must-haves verified
|
||||
overrides_applied: 0
|
||||
re_verification:
|
||||
@@ -12,23 +12,25 @@ re_verification:
|
||||
- "No arbitrary pixel value or inline style appears in any template (SC #4 / VISUAL-01) — :style skeleton width replaced with :class n===1?'w-12':n===2?'w-16':'w-20' on line 54 of TreeItem.vue"
|
||||
gaps_remaining: []
|
||||
regressions: []
|
||||
human_verification:
|
||||
- test: "Open ShareModal, CloudCredentialModal, and SettingsAccountTab in Chrome, Firefox, and Safari. Examine form inputs, selects, checkboxes."
|
||||
expected: "Consistent baseline appearance across browsers — no browser-default borders, outlines, or checkbox shapes visible."
|
||||
why_human: "Can't verify cross-browser rendering programmatically."
|
||||
- test: "Set browser DevTools to iPhone SE (375x667). Tab through the hamburger, sidebar links, StorageBrowser action buttons, and folder tree items."
|
||||
expected: "Focus rings visible on keyboard-navigated elements; hamburger and drawer interactions work smoothly."
|
||||
why_human: "Visual rendering of focus rings cannot be asserted by Vitest DOM tests alone."
|
||||
- test: "On a real or simulated mobile device at 375px width, attempt to tap the Rename, Delete, Share, and Move icon buttons in the document list."
|
||||
expected: "All taps register on first attempt without requiring precision — 36x36px minimum is sufficient."
|
||||
why_human: "Requires physical or emulated touch interaction."
|
||||
uat_gap_closure:
|
||||
verified: 2026-06-17T11:20:00Z
|
||||
plan: 11-07
|
||||
status: passed
|
||||
gaps_closed:
|
||||
- "Row actions are no longer hover-only; folder/file action containers are visible by default."
|
||||
- "Mobile search/sort/new-folder controls collapse into icon buttons below sm."
|
||||
- "Expanded mobile search/sort controls fit inside full-width rows/panels instead of pushing the toolbar off-screen."
|
||||
tests:
|
||||
- "cd frontend && npm run test -- --run src/components/storage/__tests__/StorageBrowser.skeleton.test.js — pass: 1 file, 22 tests"
|
||||
- "cd frontend && npm run test -- --run — pass: 36 files, 277 tests"
|
||||
- "cd frontend && npm run build — pass"
|
||||
---
|
||||
|
||||
# Phase 11: Visual Design, Responsive Layout & Cleanup — Verification Report
|
||||
|
||||
**Phase Goal:** Make the DocuVault frontend visually consistent, responsive across breakpoints, and free of dead code — without regressions to existing functionality.
|
||||
**Verified:** 2026-06-17T09:45:00Z
|
||||
**Status:** human_needed
|
||||
**Status:** passed
|
||||
**Re-verification:** Yes — after gap closure on main (two TreeItem.vue fixes)
|
||||
|
||||
---
|
||||
@@ -39,11 +41,11 @@ human_verification:
|
||||
|
||||
| # | Truth | Status | Evidence |
|
||||
|---|-------|--------|----------|
|
||||
| SC-1 | At 375px: sidebar hidden, hamburger opens drawer, doc list shows icon/name/actions only, 36px touch targets | VERIFIED | App.vue: lg:hidden header, translate-x drawer, Teleport backdrop. StorageBrowser: grid-cols-[2rem_1fr_6rem] base, hidden md/sm columns, min-w-[36px] min-h-[36px] buttons |
|
||||
| SC-1 | At 375px: sidebar hidden, hamburger opens drawer, doc list shows icon/name/actions only, 36px touch targets | VERIFIED | App.vue: lg:hidden header, translate-x drawer, Teleport backdrop. StorageBrowser: grid-cols-[2rem_minmax(0,1fr)_7rem] base, hidden md/sm columns, always-visible action containers, min-w-[36px] min-h-[36px] buttons |
|
||||
| SC-2 | All form inputs/selects/textareas/checkboxes have consistent cross-browser styling | VERIFIED | tailwind.config.js confirms `import forms from '@tailwindcss/forms'` + `plugins: [forms]`; consistent focus:ring-2 focus:outline-none pattern throughout; ShareModal.mobile.test.js verifies |
|
||||
| SC-3 | Every button, card row, interactive link has focus-visible: ring and distinct hover state | VERIFIED | TreeItem.vue line 12: expand/collapse button has focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1; line 27: router-link label row has same; line 38: button label row has same. 62+ focus-visible: occurrences across src/ |
|
||||
| SC-4 | No arbitrary pixel value (px-[13px], style="margin: 5px") in any template | VERIFIED | TreeItem.vue line 54 now uses :class="n === 1 ? 'w-12' : n === 2 ? 'w-16' : 'w-20'". Remaining :style attributes (lines 6, 50, 60, 68) are data-driven tree indentation (paddingLeft: depth * 12) — explicitly categorised as "should remain" in Phase 11 Research document (line 63) |
|
||||
| SC-5 | Two bundle reports committed; all non-initial routes lazy-loaded as separate chunks | VERIFIED | .planning/perf/ contains phase11-baseline.html, phase11-baseline-summary.md, phase11-final.html, phase11-final-summary.md. router/index.js: only FileManagerView synchronous; 20 other routes lazy via () => import(). Build emits 21 chunks |
|
||||
| SC-5 | Two bundle reports committed; all non-initial routes lazy-loaded as separate chunks | VERIFIED | .planning/perf/ contains phase11-baseline.html, phase11-baseline-summary.md, phase11-final.html, phase11-final-summary.md. router/index.js: only FileManagerView synchronous; 20 other routes lazy via () => import(). Current Vite 8 build emits 37 JS chunks |
|
||||
|
||||
**Score:** 12/12 truths verified
|
||||
|
||||
@@ -65,7 +67,7 @@ Both gaps from the initial verification (2026-06-17T09:30:00Z) were closed by di
|
||||
- Line 54: `:class="n === 1 ? 'w-12' : n === 2 ? 'w-16' : 'w-20'"` confirmed present; no `:style` on that element.
|
||||
- Remaining `:style` attributes (lines 6, 50, 60, 68) are all `paddingLeft: depth * 12` — data-driven tree indentation, not decorative fixed widths. The Phase 11 Research document explicitly exempts tree indentation from SC-4.
|
||||
|
||||
**Regression check:** 268/268 Vitest tests pass after the fixes (run 2026-06-17T09:35:54Z, 36 files, 2.26s).
|
||||
**Regression check:** 277/277 Vitest tests pass after the fixes and Vite 8 security remediation (run 2026-06-17T12:40:00+02:00, 36 files, 2.63s).
|
||||
|
||||
---
|
||||
|
||||
@@ -78,13 +80,13 @@ Both gaps from the initial verification (2026-06-17T09:30:00Z) were closed by di
|
||||
| VISUAL-03 | 11-05 | VERIFIED | TreeItem.vue expand/collapse button (line 12), router-link (line 27), button (line 38) all have focus-visible:ring-2 indigo-500 |
|
||||
| VISUAL-04 | 11-05 | VERIFIED | Typography normalized: text-2xl font-semibold (page titles), text-lg font-semibold (section titles), text-sm font-semibold (panel headings); typography.visual.test.js confirms |
|
||||
| RESP-01 | 11-03 | VERIFIED | App.vue: drawerOpen ref, lg:hidden header with hamburger, Teleport backdrop, translate-x-0/-translate-x-full transition, route.fullPath watch closes drawer |
|
||||
| RESP-02 | 11-03 | VERIFIED | StorageBrowser.vue: responsive grid-cols-[2rem_1fr_6rem] base, sm:grid-cols-[2rem_1fr_8rem_6rem], md:grid-cols-[2rem_1fr_6rem_8rem_6rem]; hidden md:block size col, hidden sm:block date col |
|
||||
| RESP-03 | 11-03 | VERIFIED | All StorageBrowser action buttons: min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0; confirmed in StorageBrowser.skeleton.test.js |
|
||||
| RESP-02 | 11-03, 11-07 | VERIFIED | StorageBrowser.vue: responsive `grid-cols-[2rem_minmax(0,1fr)_7rem]` base, `sm:grid-cols-[2rem_minmax(0,1fr)_8rem_7rem]`, `md:grid-cols-[2rem_minmax(0,1fr)_6rem_8rem_7rem]`; hidden md:block size col, hidden sm:block date col |
|
||||
| RESP-03 | 11-03, 11-07 | VERIFIED | All StorageBrowser action buttons: min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0; action containers are visible by default with no `opacity-0` or `group-hover:opacity-100`; confirmed in StorageBrowser.skeleton.test.js |
|
||||
| RESP-04 | 11-04 | VERIFIED | ShareModal, CloudCredentialModal, FolderDeleteModal all have max-h-[90vh] overflow-y-auto on panel; DocumentPreviewModal preserves full-screen with responsive header px-4 sm:px-6 |
|
||||
| RESP-05 | 11-03 | VERIFIED | AdminLayout.vue: mirrors App.vue pattern exactly — drawerOpen ref, lg:hidden admin header, Teleport backdrop, same transition classes |
|
||||
| CODE-07 | 11-06 | VERIFIED | AccountView.vue deleted (commit a8e0a19); FolderRow.vue deleted (commit a928b54); HomeView.vue, FolderView.vue, AdminView.vue confirmed absent; no unreferenced imports found |
|
||||
| PERF-02 | 11-01/06 | VERIFIED | .planning/perf/: phase11-baseline.html, phase11-baseline-summary.md (commit 6d56d25), phase11-final.html (commit 888d376), phase11-final-summary.md (commit df981fb) |
|
||||
| PERF-03 | 11-02 | VERIFIED | router/index.js: only `import FileManagerView` is synchronous; 5 user routes + all auth + admin + SharedView lazy-loaded via () => import(). Build: 21 chunks vs 15 baseline |
|
||||
| PERF-03 | 11-02 | VERIFIED | router/index.js: only `import FileManagerView` is synchronous; 5 user routes + all auth + admin + SharedView lazy-loaded via () => import(). Current Vite 8 build: 37 JS chunks vs 15 baseline |
|
||||
|
||||
---
|
||||
|
||||
@@ -95,7 +97,7 @@ Both gaps from the initial verification (2026-06-17T09:30:00Z) were closed by di
|
||||
| `frontend/src/router/index.js` | Only FileManagerView synchronous | VERIFIED | Confirmed by grep — only 1 static import |
|
||||
| `frontend/src/App.vue` | Hamburger + drawer | VERIFIED | lg:hidden header, Teleport backdrop, translate-x transition, drawerOpen ref |
|
||||
| `frontend/src/layouts/AdminLayout.vue` | Admin hamburger + drawer | VERIFIED | Mirrors App.vue pattern, data-test="admin-hamburger-btn" |
|
||||
| `frontend/src/components/storage/StorageBrowser.vue` | Responsive grid + touch targets | VERIFIED | grid-cols responsive variants, min-w-[36px] on action buttons |
|
||||
| `frontend/src/components/storage/StorageBrowser.vue` | Responsive grid + touch targets + compact mobile toolbar | VERIFIED | responsive `minmax` grid variants, always-visible action containers, min-w-[36px] action buttons, `mobile-toolbar`, `mobile-search-row`, and `mobile-sort-panel` |
|
||||
| `frontend/src/components/sharing/ShareModal.vue` | max-h-[90vh] overflow-y-auto | VERIFIED | Line 13 confirmed |
|
||||
| `frontend/src/components/cloud/CloudCredentialModal.vue` | max-h-[90vh] overflow-y-auto | VERIFIED | Line 8 confirmed |
|
||||
| `frontend/src/components/folders/FolderDeleteModal.vue` | max-h-[90vh] overflow-y-auto | VERIFIED | Line 13 confirmed |
|
||||
@@ -119,6 +121,7 @@ Both gaps from the initial verification (2026-06-17T09:30:00Z) were closed by di
|
||||
| AdminLayout.vue | AdminSidebar | same drawer pattern | VERIFIED | Identical pattern, data-test="admin-sidebar-wrapper" |
|
||||
| router/index.js | 5 view chunks | () => import() | VERIFIED | 21 JS chunks in build output |
|
||||
| StorageBrowser | responsive columns | hidden md:block / hidden sm:block | VERIFIED | Lines 41-42 plus data rows |
|
||||
| StorageBrowser | mobile toolbar | icon buttons below `sm`; full controls at `sm+` | VERIFIED | Search toggles a full-width row, Sort toggles an in-viewport panel, New folder emits the existing event |
|
||||
|
||||
---
|
||||
|
||||
@@ -132,8 +135,10 @@ Not applicable — this phase covers presentation-layer classes only. No new dat
|
||||
|
||||
| Behavior | Command | Result | Status |
|
||||
|----------|---------|--------|--------|
|
||||
| Test suite passes 268/268 | `./node_modules/.bin/vitest run` | 36 files, 268 tests pass (re-verified post-fix) | PASS |
|
||||
| Production build succeeds | `./node_modules/.bin/vite build` | 183.62 kB main bundle, 21 chunks | PASS |
|
||||
| Test suite passes 277/277 | `npm run test -- --run` | 36 files, 277 tests pass (re-verified post-fix and post-Vite-8 bump) | PASS |
|
||||
| Plan 11-07 storage regression tests pass | `npm run test -- --run src/components/storage/__tests__/StorageBrowser.skeleton.test.js` | 1 file, 22 tests pass | PASS |
|
||||
| Full suite passes after plan 11-07 | `npm run test -- --run` | 36 files, 277 tests pass | PASS |
|
||||
| Production build succeeds | `npm run build` | Vite 8.0.16 build succeeds; main entry chunk 30.31 kB raw / 9.59 kB gzip; 37 JS chunks | PASS |
|
||||
| Only FileManagerView is synchronous | `grep "import .*View" frontend/src/router/index.js` | Returns only FileManagerView | PASS |
|
||||
| Modals have max-h-[90vh] | grep on ShareModal, CloudCredentialModal, FolderDeleteModal | All confirmed | PASS |
|
||||
| TreeItem.vue skeleton uses Tailwind classes | `grep ":class.*w-12" TreeItem.vue` | Line 54 confirmed | PASS |
|
||||
@@ -152,25 +157,21 @@ The four remaining `:style` attributes in TreeItem.vue (lines 6, 50, 60, 68) are
|
||||
|
||||
---
|
||||
|
||||
### Human Verification Required
|
||||
### UAT Gap Closure: Plan 11-07
|
||||
|
||||
#### 1. Cross-Browser Form Consistency (SC-2)
|
||||
The mobile storage UAT failures recorded in `11-UAT.md` are closed:
|
||||
|
||||
**Test:** Open ShareModal, CloudCredentialModal, and SettingsAccountTab in Chrome, Firefox, and Safari. Examine form inputs, selects, checkboxes.
|
||||
**Expected:** Consistent baseline appearance across browsers — no browser-default borders, outlines, or checkbox shapes visible.
|
||||
**Why human:** Can't verify cross-browser rendering programmatically.
|
||||
- Row actions are visible without hover on touch devices.
|
||||
- File/folder action containers no longer include `opacity-0` or `group-hover:opacity-100`.
|
||||
- The mobile toolbar uses icon controls below `sm`.
|
||||
- Expanded mobile search and sort controls render in full-width rows/panels instead of forcing horizontal scroll.
|
||||
- `SearchBar.vue` uses `w-full sm:w-56`, preserving desktop width while allowing mobile shrinkage.
|
||||
|
||||
#### 2. Focus Ring Visibility at 375px Viewport
|
||||
Regression evidence:
|
||||
|
||||
**Test:** Set browser DevTools to iPhone SE (375x667). Tab through the hamburger, sidebar links, StorageBrowser action buttons, and folder tree items (including the expand/collapse button in the sidebar tree, which was fixed in this gap-closure pass).
|
||||
**Expected:** Focus rings visible on keyboard-navigated elements; hamburger and drawer interactions work smoothly.
|
||||
**Why human:** Visual rendering of focus rings cannot be asserted by Vitest DOM tests alone.
|
||||
|
||||
#### 3. Touch Target Usability at 375px
|
||||
|
||||
**Test:** On a real or simulated mobile device at 375px width, attempt to tap the Rename, Delete, Share, and Move icon buttons in the document list.
|
||||
**Expected:** All taps register on first attempt without requiring precision — 36x36px minimum is sufficient.
|
||||
**Why human:** Requires physical or emulated touch interaction.
|
||||
- `cd frontend && npm run test -- --run src/components/storage/__tests__/StorageBrowser.skeleton.test.js` — 22 passed.
|
||||
- `cd frontend && npm run test -- --run` — 277 passed.
|
||||
- `cd frontend && npm run build` — passed.
|
||||
|
||||
---
|
||||
|
||||
@@ -178,12 +179,13 @@ The four remaining `:style` attributes in TreeItem.vue (lines 6, 50, 60, 68) are
|
||||
|
||||
No gaps remain. Both blockers from the initial verification pass are closed.
|
||||
|
||||
All 12 requirements (VISUAL-01 through VISUAL-04, RESP-01 through RESP-05, CODE-07, PERF-02, PERF-03) are satisfied by codebase evidence. The test suite passes at 268/268 with no regressions.
|
||||
All 12 requirements (VISUAL-01 through VISUAL-04, RESP-01 through RESP-05, CODE-07, PERF-02, PERF-03) are satisfied by codebase evidence. The test suite passes at 277/277 with no regressions.
|
||||
|
||||
Phase 11 goal is achieved. Status is `human_needed` only because three visual/interaction checks require a browser and cannot be asserted programmatically — the automated gate is fully green.
|
||||
Phase 11 goal is achieved. Status is `passed`; the previously human-reported mobile storage issues are resolved by plan 11-07 and covered by regression tests.
|
||||
|
||||
---
|
||||
|
||||
_Initial verification: 2026-06-17T09:30:00Z_
|
||||
_Re-verification: 2026-06-17T09:45:00Z_
|
||||
_Mobile UAT gap closure: 2026-06-17T11:20:00Z_
|
||||
_Verifier: Claude (gsd-verifier)_
|
||||
|
||||
Reference in New Issue
Block a user