curo1305andClaude Sonnet 4.6
123ae5b29b
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>
95 lines
5.1 KiB
Markdown
95 lines
5.1 KiB
Markdown
# 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
|
|
|