From 6d56d25977122b88c5d63c086f14f55ac27ba292 Mon Sep 17 00:00:00 2001 From: curo1305 Date: Tue, 16 Jun 2026 21:05:12 +0200 Subject: [PATCH] docs(11-01): capture Phase 11 bundle baseline and frontend audit - Ran ANALYZE=true npm run build; copied stats.html to .planning/perf/phase11-baseline.html - Added phase11-baseline-summary.md: chunk sizes, route lazy-load audit, responsive/modal/typography/dead-code findings for plans 11-02..11-06 - Main bundle: 264.63 kB raw / 89.34 kB gzip; 5 user routes still synchronous - Admin/auth routes already lazy-loaded; CSS 98.74 kB raw (expected for full UI) --- .planning/perf/phase11-baseline-summary.md | 149 + .planning/perf/phase11-baseline.html | 4950 ++++++++++++++++++++ 2 files changed, 5099 insertions(+) create mode 100644 .planning/perf/phase11-baseline-summary.md create mode 100644 .planning/perf/phase11-baseline.html diff --git a/.planning/perf/phase11-baseline-summary.md b/.planning/perf/phase11-baseline-summary.md new file mode 100644 index 0000000..04bce3c --- /dev/null +++ b/.planning/perf/phase11-baseline-summary.md @@ -0,0 +1,149 @@ +# Phase 11 Bundle Baseline + +**Captured:** 2026-06-16 +**Vite version:** 6.4.3 +**Node environment:** production + +## Command + +```bash +cd frontend && ANALYZE=true npm run build +``` + +Output artifact: `frontend/stats.html` — copied to `.planning/perf/phase11-baseline.html`. + +## Bundle Sizes (pre-optimization) + +| Chunk | Raw | Gzip | +|---|---|---| +| `index-BGwBmeoY.js` (main bundle) | 264.63 kB | 89.34 kB | +| `index-BtLvezBC.css` (Tailwind CSS) | 98.74 kB | 17.12 kB | +| `AdminAiView-DsyOjb0b.js` | 14.99 kB | 4.68 kB | +| `AdminUsersView-DFHwCZvr.js` | 12.29 kB | 3.76 kB | +| `AdminAuditView-COYge5oc.js` | 9.71 kB | 2.98 kB | +| `AdminQuotasView-Bjrfs1gN.js` | 4.60 kB | 1.88 kB | +| `LoginView-CM2pkdzs.js` | 6.81 kB | 1.90 kB | +| `RegisterView-B2PzAwRW.js` | 3.76 kB | 1.34 kB | +| `AdminLayout-DTKBjMfr.js` | 2.71 kB | 1.10 kB | +| `AdminOverviewView-GYxFAo8h.js` | 3.56 kB | 1.19 kB | +| `AdminLayout-TsYHjENN.css` | 0.75 kB | 0.35 kB | +| `PasswordResetView-BSR1dx14.js` | 2.32 kB | 1.13 kB | +| `SharedView-DTW18Ruc.js` | 2.14 kB | 1.14 kB | +| `admin-D1I3smx6.js` | 2.24 kB | 0.91 kB | +| `NewPasswordView-mjRpmRNW.js` | 2.13 kB | 1.11 kB | + +**Total JS (raw):** ~343 kB +**Total JS (gzip):** ~114 kB + +## Key Observations + +### Main bundle (264.63 kB raw / 89.34 kB gzip) + +The main bundle is large because 5 user-facing routes are still imported synchronously at the top of `router/index.js`: +- `FileManagerView` — intentionally synchronous (critical first authenticated surface, per D-10) +- `TopicsView` — synchronous, should be lazy-loaded +- `DocumentView` — synchronous, should be lazy-loaded +- `SettingsView` — synchronous, should be lazy-loaded +- `CloudStorageView` — synchronous, should be lazy-loaded +- `CloudFolderView` — synchronous, should be lazy-loaded + +Plan 11-02 will lazy-load all 5 of the above (keeping `FileManagerView` synchronous). + +### Already lazy-loaded (good) + +- All auth views: `LoginView`, `RegisterView`, `PasswordResetView`, `NewPasswordView` — each in its own chunk +- All admin views: `AdminOverviewView`, `AdminUsersView`, `AdminQuotasView`, `AdminAiView`, `AdminAuditView` — each in its own chunk +- `AdminLayout` — own chunk +- `SharedView` — own chunk + +### Vite warning: auth.js mixed import + +Vite warns that `auth.js` is both dynamically imported (from `api/utils.js`) and statically imported by many components. This means `auth.js` stays in the main bundle even when lazy-loading routes. This is expected behavior — `auth.js` must be available synchronously for the navigation guard on every page load. + +### CSS + +The Tailwind purged CSS at 98.74 kB raw / 17.12 kB gzip is expected for a full admin + user interface. The safelist with dynamic color patterns adds some bulk but is necessary for runtime-generated topic badge colors. No action needed here. + +## Routes Audit (lazy vs. synchronous) + +| Route path | Component | Pre-11-02 status | +|---|---|---| +| `/` | FileManagerView | synchronous (intentional — D-10) | +| `/topics` | TopicsView | **synchronous** → lazy in 11-02 | +| `/topics/:name` | TopicsView | **synchronous** → lazy in 11-02 | +| `/document/:id` | DocumentView | **synchronous** → lazy in 11-02 | +| `/settings` | SettingsView | **synchronous** → lazy in 11-02 | +| `/folders/:folderId` | FileManagerView | synchronous (reuses main bundle component) | +| `/cloud` | CloudStorageView | **synchronous** → lazy in 11-02 | +| `/cloud/:provider/:folderId(.*)` | CloudFolderView | **synchronous** → lazy in 11-02 | +| `/login` | LoginView | already lazy | +| `/register` | RegisterView | already lazy | +| `/password-reset` | PasswordResetView | already lazy | +| `/password-reset/confirm` | NewPasswordView | already lazy | +| `/shared` | SharedView | already lazy | +| `/admin` (layout) | AdminLayout | already lazy | +| `/admin` (all children) | AdminOverviewView, etc. | already lazy | + +Expected main bundle reduction after 11-02: ~30–60 kB raw (splitting out Topics, Document, Settings, Cloud views). + +## Responsive / Visual Audit Findings + +### Synchronous non-critical route imports (Plan 11-02) + +All 5 identified in route table above. + +### Responsive sidebar/admin sidebar gaps (Plan 11-03) + +- `App.vue`: desktop-only `flex h-screen overflow-hidden` shell; `AppSidebar` is always visible (no mobile handling). +- `AdminLayout.vue`: identical desktop-only pattern; `AdminSidebar` always visible. +- No hamburger button, no drawer, no mobile nav exists anywhere. +- Required: hamburger button + slide-in overlay drawer with `` backdrop. +- State location: layout-local `ref()` in `App.vue` and `AdminLayout.vue` (route-change watcher closes drawer) — not a shared Pinia store (per D-05, R-15 research verdict). + +### Tables / grids that overflow below sm/md (Plan 11-03) + +- `StorageBrowser.vue` header row and all data rows: `grid-cols-[2rem_1fr_6rem_8rem_6rem]` — fixed 5-column grid. +- The "Size" column header has `hidden md:block`, data cells have `hidden md:block` — correct. +- The "Modified" column header has `hidden sm:block`, data cells have `hidden sm:block` — correct. +- But the `grid-cols` template is still `5-column` even when the last 2 columns are hidden — this leaves empty grid tracks on mobile. The grid template needs to be responsive: `grid-cols-[2rem_1fr_auto]` on small, `grid-cols-[2rem_1fr_6rem_auto]` on md, `grid-cols-[2rem_1fr_6rem_8rem_6rem]` on sm/lg. +- Row action buttons: `p-1.5` on `w-3.5 h-3.5` icons → button is ~26px at most. Below md, touch targets need `min-h-[36px] min-w-[36px]`. + +### Modal overflow below 640px (Plan 11-04) + +- `ShareModal.vue`: no `max-h` or `overflow-y-auto`; panel uses `max-w-md w-full mx-4`. Will overflow on very short phones. +- `CloudCredentialModal.vue`: no `max-h` or `overflow-y-auto`; Nextcloud form with advanced section can be tall; panel uses `max-w-md p-6`. Overflow risk is concrete. +- `FolderDeleteModal.vue`: smaller content, less risk, but should get the standard safe pattern for consistency. +- `DocumentPreviewModal.vue`: full-screen overlay (`fixed inset-0`). Structurally correct for full-screen; preserves full-screen behavior. Header uses `px-6 py-3`; no overflow risk. No action needed except verifying narrow-screen header doesn't clip. + +### Inconsistent focus states (Plan 11-05) + +- Current pattern: `focus:ring-2 focus:ring-indigo-500` used throughout, but `focus-visible:` is rarely used. +- Should normalize to `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1` per research convention. +- Mouse clicks will no longer show focus rings (correct a11y behavior); keyboard navigation will still show them. + +### Inconsistent form patterns (Plan 11-04) + +- `@tailwindcss/forms` is active and normalizes browser defaults. Many inputs still carry redundant `border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500` — partially redundant with forms plugin. Plan 11-04 should normalize these. +- Some inputs lack `focus-visible:` (use `focus:` instead) — part of focus normalization. + +### Inconsistent spacing/typography (Plan 11-05) + +- Skeleton widths: `AppSidebar.vue` uses `:style="{ width: (50 + n * 15) + 'px' }"` for decorative skeleton widths — can be converted to `w-20`, `w-24`, `w-28` static Tailwind classes. +- Typography conventions found in codebase (to be normalized): + - Page titles: mostly `text-2xl font-semibold` — consistent. + - Section titles: `text-lg font-semibold` / `font-semibold text-gray-800` / `font-semibold text-gray-900` — the color drifts; normalize to `text-lg font-semibold text-gray-900`. + - Labels: `text-sm font-semibold text-gray-700` / `text-sm font-semibold text-gray-900` — normalize to `text-sm font-semibold text-gray-700`. + - Body text: `text-sm text-gray-600` — mostly consistent. + - Captions/metadata: `text-xs text-gray-400` — mostly consistent. +- Border radius: `rounded-xl` vs `rounded-2xl` on modal panels — `ShareModal` and `FolderDeleteModal` use `rounded-2xl`; `CloudCredentialModal` uses `rounded-xl`. Normalize to `rounded-xl`. + +### Unreferenced files and imports (Plan 11-06) + +- `AccountView.vue`: exists at `src/views/AccountView.vue`. The router has `{ path: '/account', redirect: '/settings' }` but does NOT import or render `AccountView`. It is completely unreferenced. SAFE TO DELETE in Plan 11-06 (verify no other reference before deleting). +- `HomeView.vue` and `FolderView.vue`: confirmed absent (per AGENTS.md requirement). No action. +- Admin test files `AdminAiConfigTab.test.js`, `AdminQuotasTab.test.js`, `AdminUsersTab.test.js` — may reference deleted components (old tab-based admin). Classify in Plan 11-06. +- Unused imports: a scan during Plan 11-06 pass will catch per-file orphans. + +## Deviation from 11-RESEARCH.md + +None. All research findings confirmed by live code review and build output. diff --git a/.planning/perf/phase11-baseline.html b/.planning/perf/phase11-baseline.html new file mode 100644 index 0000000..a97f17e --- /dev/null +++ b/.planning/perf/phase11-baseline.html @@ -0,0 +1,4950 @@ + + + + + + + + Rollup Visualizer + + + +
+ + + + +