# Phase 11 Research Refresh — Visual Design, Responsive Layout & Cleanup

**Researched:** 2026-06-16
**Inputs:** Phase 11 context, roadmap, requirements, pitfall notes, live frontend code.

## Executive Summary

The six-plan Phase 11 sequence is structurally sound: measure first, lazy-load routes, fix responsive shells, normalize forms/modals, do the visual consistency pass, then delete dead code and measure again. The second review found several places where the plans needed sharper implementation constraints, especially because `11-CONTEXT.md` contains locked decisions that were not fully reflected in the first review.

## Current Code Findings

### Performance

- `frontend/package.json` already includes `rollup-plugin-visualizer@^7.0.1`.
- `frontend/vite.config.js` currently has only `vue()` in `plugins`; analyzer wiring still needs to be added behind an opt-in flag.
- `frontend/src/router/index.js` still synchronously imports:
  - `FileManagerView`
  - `TopicsView`
  - `DocumentView`
  - `SettingsView`
  - `CloudFolderView`
  - `CloudStorageView`
- Auth routes, admin layout, admin child views, and `SharedView` are already lazy-loaded.
- Recommendation: keep `FileManagerView` synchronous only for `/` as the critical first authenticated surface. Lazy-load `TopicsView`, `DocumentView`, `SettingsView`, `CloudStorageView`, and `CloudFolderView`. Reuse the synchronous `FileManagerView` for `/folders/:folderId` unless the bundle baseline proves it should be split later.

### Responsive Shells

- `App.vue` renders a desktop-only `flex h-screen overflow-hidden` shell with permanent `AppSidebar`.
- `AdminLayout.vue` mirrors that desktop-only shell with permanent `AdminSidebar`.
- `AppSidebar.vue` and `AdminSidebar.vue` are presentational enough to stay drawer-agnostic.
- Recommendation: use layout-local refs in `App.vue` and `AdminLayout.vue`, not a new Pinia store. Nav link close behavior can be handled by watching route changes in each layout root; no child component needs global drawer state.

### Storage Rows

- `StorageBrowser.vue` already hides Size below `md` and Modified below `sm` via `hidden md:block` and `hidden sm:block`.
- The grid template remains fixed at `grid-cols-[2rem_1fr_6rem_8rem_6rem]`, so responsive column sizing still needs explicit adjustment to avoid empty tracks and mobile overflow.
- Existing row action buttons use `p-1.5`, which may not guarantee 36x36 touch targets below `md`.

### Forms

- `@tailwindcss/forms` is already installed and active in `frontend/tailwind.config.js`.
- Many controls still carry repeated full border/focus class stacks. Plan 11-04 should normalize those without introducing a new component library.

### Modals

Mobile overflow risk is concrete:

- `ShareModal.vue`: fixed overlay, centered panel, `rounded-2xl`, no `max-h` or `overflow-y-auto`.
- `CloudCredentialModal.vue`: fixed overlay, centered panel, `max-w-md p-6`, no `max-h` or `overflow-y-auto`; form can become tall with advanced Nextcloud fields.
- `FolderDeleteModal.vue`: smaller but should still receive the shared mobile-safe panel pattern.
- `DocumentPreviewModal.vue`: full-screen preview is structurally different; it should preserve full-screen behavior and ensure header/content do not overflow on narrow screens.

Recommended modal shell pattern: overlay uses `p-4 sm:p-6`; panel uses `max-h-[calc(100vh-2rem)] overflow-y-auto` below `sm`, with desktop styling preserved.

### Visual Consistency

- Current frontend heavily uses `focus:ring-2` but rarely `focus-visible:`.
- `rounded-xl` and `rounded-2xl` appear on several ordinary panels/modals even though AGENTS.md prefers cards at 8px radius unless the design system requires otherwise.
- There are data-driven inline styles that should remain:
  - topic color swatches
  - quota/progress bar widths
  - Teleport dropdown coordinates
  - tree indentation
- There are skeleton width styles such as `:style="{ width: (50 + n * 15) + 'px' }"` that are decorative and can be converted to static Tailwind widths during the visual pass.

Recommended convention:

- Page title: `text-2xl font-semibold`
- Section title: `text-lg font-semibold`
- Panel/table heading: `text-sm font-semibold`
- Body: `text-sm`
- Caption/metadata: `text-xs`
- Focus ring: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1`

### Dead Code Signals

- `HomeView.vue` and `FolderView.vue` remain absent, satisfying AGENTS.md.
- Legacy admin-tab test names still exist under `frontend/src/components/admin/__tests__/`:
  - `AdminAiConfigTab.test.js`
  - `AdminQuotasTab.test.js`
  - `AdminUsersTab.test.js`
- These tests may still cover current components via renamed imports or may be stale; Plan 11-06 should explicitly classify them.
- `AccountView.vue` exists but `/account` redirects to `/settings`. It may be dead unless imported outside the router. Plan 11-06 should confirm before deleting.

## Review Verdict

The plan set remains valid after review, but it should be refined with:

- a documented layout-local drawer-state decision
- exact route lazy-loading scope
- exact modal overflow targets
- a locked focus-ring and typography convention
- explicit dead-code suspects for Plan 11-06