chore: archive v0.2 phase directories to milestones/v0.2-phases/

Moves phases 08–11 execution artifacts from .planning/phases/ to
.planning/milestones/v0.2-phases/ to keep .planning/phases/ clean
for the next milestone.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.planning/milestones/v0.2-phases/11-visual-design-responsive-layout-cleanup/11-RESEARCH.md

@@ -0,0 +1,94 @@
+# 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
+