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

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