test(phase-11): record mobile UAT gaps

2026-06-17 10:37:21 +02:00
parent 64aa960d20
commit c48ebf152c
2 changed files with 209 additions and 0 deletions
@@ -0,0 +1,105 @@
+---
+phase: 11-visual-design-responsive-layout-cleanup
+plan: 7
+subsystem: frontend
+tags: [gap-closure, mobile, responsive, storage-browser, uat]
+requirements: [RESP-02, RESP-03, VISUAL-03]
+depends_on: [11-UAT]
+---
+
+# Plan 11-07 - Mobile Storage Toolbar and Action Visibility Gap Closure
+
+## Goal
+
+Close the Phase 11 UAT gaps for small mobile widths: row actions must be visible without hover, and the StorageBrowser toolbar must fit below 550px by collapsing search, sort, and new-folder controls into compact icon controls.
+
+## Source Gaps
+
+From `11-UAT.md`:
+
+1. Row actions are hover-only, making touchscreen use unsafe and invisible.
+2. Search, sort, and new-folder controls overflow to the right below roughly 550px.
+3. Mobile file-browser navigation should use icon controls for search/sort/new-folder instead of requiring sideways scrolling.
+
+## Implementation Tasks
+
+### Task 1 - Make row actions visible without hover
+
+Files:
+- `frontend/src/components/storage/StorageBrowser.vue`
+- `frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js`
+
+Steps:
+1. Replace both row action container class stacks that currently include `opacity-0 group-hover:opacity-100 transition-opacity`.
+2. Keep actions visible by default. Prefer subdued default icon color plus hover/active background over hiding.
+3. Preserve `min-w-[36px] min-h-[36px]` below `md`.
+4. Add tests asserting folder and file action containers/buttons are present and visible without a hover state.
+
+Acceptance:
+- At 375px, folder/file row actions are visible immediately.
+- Delete controls are discoverable; the user does not have to guess where destructive actions live.
+- Existing click-after-drag guard and folder picker behavior remain unchanged.
+
+### Task 2 - Add compact mobile toolbar controls
+
+Files:
+- `frontend/src/components/storage/StorageBrowser.vue`
+- `frontend/src/components/ui/AppIcon.vue` if a missing sort/filter icon is needed
+- `frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js`
+
+Steps:
+1. Split the sticky header into a responsive layout:
+   - Breadcrumb area can wrap/truncate safely.
+   - Desktop/tablet controls keep existing full SearchBar, SortControls, and "New folder" text button at `sm` and above.
+   - Below `sm`, show icon buttons for search, sort, and new folder.
+2. Search icon behavior:
+   - Toggles a full-width mobile search input row below the header controls.
+   - Search row must fit the viewport, use `w-full`, and preserve Escape-to-clear behavior through the existing search event.
+3. Sort icon behavior:
+   - Opens a compact menu or panel with Name/Date/Size options.
+   - The active option and order must remain visible to screen readers and keyboard users.
+   - The panel must fit within viewport width and close after selection.
+4. New-folder icon behavior:
+   - Emits the existing `new-folder` event.
+   - Has `aria-label="New folder"` and a tooltip/title.
+5. Avoid creating a new file browser or parallel grid; keep `StorageBrowser.vue` as the single browser surface.
+
+Acceptance:
+- At 375px and below 550px, no horizontal scroll is needed to access search, sort, or new-folder.
+- Mobile controls are icon-sized, keyboard focusable, and labelled.
+- Existing desktop layout remains visually equivalent.
+
+### Task 3 - Add responsive regression tests
+
+Files:
+- `frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js`
+- Optional: `frontend/src/components/ui/__tests__/AppIcon.test.js` if a new icon is added.
+
+Tests:
+1. Mobile toolbar renders icon controls with accessible labels.
+2. Full desktop controls are hidden below `sm`; compact controls are hidden at `sm` and above.
+3. Search icon toggles a full-width mobile search row.
+4. Sort icon opens mobile sort options and emits the existing `sort-change` shape.
+5. New-folder icon emits the existing `new-folder` event.
+6. Row action containers do not contain `opacity-0` or `group-hover:opacity-100`.
+
+Acceptance:
+- `cd frontend && npm run test -- --run src/components/storage/__tests__/StorageBrowser.skeleton.test.js` passes.
+- `cd frontend && npm run test -- --run` passes.
+- `cd frontend && npm run build` passes.
+
+## Verification
+
+Manual UAT after implementation:
+
+1. Set viewport to 375px.
+2. Confirm row action buttons are visible without hover.
+3. Confirm search/sort/new-folder are icon controls and can be used without horizontal scrolling.
+4. Confirm list rows still show icon/name/actions only, with size hidden below `md` and modified hidden below `sm`.
+
+## Non-Goals
+
+- No redesign of the whole file browser.
+- No new component parallel to `StorageBrowser.vue`.
+- No backend or API changes.
+- No changes to document/folder permissions or destructive action semantics.