Implementation Plan: portal-tenant-home-route-query-sync

Branch: [main] | Date: 2026-02-06 | Spec: N/A Input: User confirmed next step should be “connect route first, then implement query-sync” for frontend/portal/src/views/tenant/HomeView.vue.

Summary

Expose tenant/HomeView.vue through an active router path, then implement full genre query synchronization for its topic filter so navigation into this page with ?genre=... produces consistent filtering behavior (and optional URL state sync when in-page filters change), while preserving existing content loading and UX.

Technical Context

Language/Version: Vue 3 + JavaScript (Vite)
Primary Dependencies: Vue Router, PrimeVue, TailwindCSS
Storage: N/A (frontend behavior/routing only)
Testing: npm -C frontend/portal run lint, npm -C frontend/portal run build, browser flow checks for tenant page + query sync; go test ./... for frontend-involved phase completion governance
Target Platform: Web browser (frontend/portal)
Project Type: Web frontend module
Performance Goals: No notable regression in tenant page load/filter response
Constraints: Minimal incremental changes; no backend API contract changes; keep existing page styles/layout; avoid generated-file edits
Scale/Scope: frontend/portal/src/router/index.js, frontend/portal/src/views/tenant/HomeView.vue (optional minimal caller path adjustment if needed)

Constitution Check

Plan-first requirement satisfied before non-trivial implementation.
Scope constrained to route exposure + query-sync behavior for tenant page.
No generated files involved.
Acceptance includes frontend page-flow validation and backend go test ./... evidence per repository rules.

Project Structure

Documentation (this feature)

docs/
└── plan.md

Source Code (repository root)

frontend/portal/
├── src/router/index.js
├── src/views/tenant/HomeView.vue
└── src/views/HomeView.vue (optional tiny entry-path adjustment only if needed)

Structure Decision: Activate existing tenant/HomeView.vue via router first, then add robust route-query synchronization inside that page to avoid broad refactor.

Plan Phases

Phase 1 — Route Activation
- Add explicit route entry for tenant profile page to render views/tenant/HomeView.vue.
- Ensure route path does not conflict with existing tenant homepage / creator routes.
Phase 2 — Topic/Query Synchronization
- Parse incoming route.query.genre and initialize selected topic filter.
- Watch query changes to keep selected topic in sync.
- Optionally sync selected topic back to URL query (replace) for deep-link consistency.
- Keep sort/topic/search/loadMore behavior consistent with existing logic.
Phase 3 — Entry Path and Validation
- Ensure there is at least one practical navigation path to this newly connected route.
- Run diagnostics and command checks.
- Verify browser flows for route rendering and query-driven filtering.

Tasks

Add tenant profile route in router/index.js to load views/tenant/HomeView.vue.
In tenant/HomeView.vue, add helper to normalize route.query.genre and initialize selectedTopic from it.
Add watcher for route query changes (genre) to update in-page filter state.
Add safe guard/initialization flag to avoid duplicate or race-condition fetches.
Ensure existing data fetch (query.genre) continues to rely on selected topic string.
(If needed) Add minimal navigation entry in existing pages so new route is reachable through UI.
Run lsp_diagnostics on changed files.
Run npm -C frontend/portal run lint.
Run npm -C frontend/portal run build.
Run backend go test ./....
Execute browser verification for route access and genre prefilter behavior.

Dependencies

Phase 2 depends on Phase 1 route activation.
Phase 3 depends on completed route/query behavior.
Browser acceptance depends on build/runtime availability.

Acceptance Criteria

tenant/HomeView.vue is reachable via a real router path (not dead code).
Entering tenant page with ?genre=xxx preselects topic filter and requests content with matching genre query.
Query updates (navigation changes) keep topic filter state synchronized.
Existing tenant page sort/topic/search/loadMore behaviors remain functional.
No new 404 regressions introduced by route activation.
lsp_diagnostics clean on changed files (or only known template-analysis false positives reported).
npm -C frontend/portal run lint passes.
npm -C frontend/portal run build passes.
backend go test ./... passes (or unrelated pre-existing failures explicitly reported).
Browser page-flow checks pass for route + query-sync scenarios.

Risks

Newly connected route may require clearer entry path from existing UI to be practically discoverable.
Query-sync watchers can accidentally trigger duplicate fetches without initialization guards.
Topic list values and query genre may not always align exactly, requiring graceful fallback behavior.

Complexity Tracking

Fill ONLY if Constitution Check has violations that must be justified

Violation	Why Needed	Simpler Alternative Rejected Because
N/A	N/A	N/A

5.3 KiB Raw Permalink Blame History