feat: expand portal entry flows and dynamic recommendation routing

docs/plan.md

@@ -1,30 +1,30 @@
-# Implementation Plan: portal-senior-color-redesign
+# Implementation Plan: portal-tenant-home-route-query-sync
 
-**Branch**: `[feat/portal-senior-color-redesign]` | **Date**: 2026-02-06 | **Spec**: `N/A`
-**Input**: User request to redesign Portal color system for minimal, senior-friendly UX and provide a branch for visual validation.
+**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
 
-Implement a senior-friendly, minimal color system for `frontend/portal` by introducing semantic design tokens (default + high-contrast), applying them to shared shells/components (layouts, navbar, footer), and adding PrimeVue-friendly global styling so visual changes are broad, consistent, and easy to validate by product stakeholders.
+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 (ESM), JavaScript, CSS (Tailwind v4)  
-**Primary Dependencies**: Vite, TailwindCSS v4, PrimeVue 4 (`@primevue/themes/aura`), PrimeIcons  
-**Storage**: N/A  
-**Testing**: `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`  
-**Target Platform**: Web browser (Portal tenant-facing frontend)  
-**Project Type**: Web frontend module (`frontend/portal`)  
-**Performance Goals**: No regressions in initial render and interactivity; preserve current bundle behavior  
-**Constraints**: Keep changes focused on styling/theme surfaces; no route/business-logic changes; avoid generated files; maintain readability and accessibility contrast goals  
-**Scale/Scope**: Global portal style tokens + shared layout/component surfaces for meaningful visual review
+**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
 
-- Conforms to repository planning rule: complete plan defined before non-trivial implementation.
-- Scope limited to `frontend/portal` styling/theme layers and shared UI shell.
-- No generated files are modified.
-- Verification includes frontend lint/build checks before handoff.
+- 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
 
@@ -39,66 +39,68 @@ docs/
 
 ```text
 frontend/portal/
-├── src/assets/main.css
-├── src/main.js
-├── src/layout/LayoutMain.vue
-├── src/layout/LayoutUser.vue
-├── src/layout/LayoutCreator.vue
-├── src/layout/LayoutAuth.vue
-├── src/components/TopNavbar.vue
-└── src/components/AppFooter.vue
+├── src/router/index.js
+├── src/views/tenant/HomeView.vue
+└── src/views/HomeView.vue (optional tiny entry-path adjustment only if needed)
 ```
 
-**Structure Decision**: Apply color redesign through centralized tokens and shared shell/components to maximize consistency and minimize page-level edits.
+**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
 
-1. **Token Foundation**
-   - Define semantic color tokens for senior-light and high-contrast modes.
-   - Map tokens for Tailwind and global CSS usage.
-2. **Shared Surface Application**
-   - Update shared layouts/navbar/footer from hardcoded slate/dark palette to semantic tokens.
-   - Remove distracting decorative backgrounds and improve contrast/focus cues.
-3. **PrimeVue Alignment + Verification**
-   - Add global PrimeVue color overrides for button/input/panel/readability consistency.
-   - Run lint/build verification and prepare branch handoff for visual QA.
+1. **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.
+
+2. **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.
+
+3. **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
 
-1. Create and verify a dedicated feature branch for this redesign.
-2. Rebuild `src/assets/main.css` with:
-   - semantic palette tokens,
-   - default + high-contrast variable sets,
-   - global base styles (body/link/focus),
-   - PrimeVue global color overrides.
-3. Ensure `src/main.js` imports and theme setup remain compatible after token changes.
-4. Refactor shared shells to semantic colors and reduced visual noise:
-   - `LayoutMain.vue`, `LayoutUser.vue`, `LayoutCreator.vue`, `LayoutAuth.vue`.
-5. Refactor shared navigation/footer surfaces to semantic tokens:
-   - `TopNavbar.vue`, `AppFooter.vue`.
-6. Run portal checks (`lint`, `build`) and resolve any regressions caused by this change set.
-7. Provide branch name and reviewer instructions for visual validation.
+1. Add tenant profile route in `router/index.js` to load `views/tenant/HomeView.vue`.
+2. In `tenant/HomeView.vue`, add helper to normalize `route.query.genre` and initialize `selectedTopic` from it.
+3. Add watcher for route query changes (`genre`) to update in-page filter state.
+4. Add safe guard/initialization flag to avoid duplicate or race-condition fetches.
+5. Ensure existing data fetch (`query.genre`) continues to rely on selected topic string.
+6. (If needed) Add minimal navigation entry in existing pages so new route is reachable through UI.
+7. Run `lsp_diagnostics` on changed files.
+8. Run `npm -C frontend/portal run lint`.
+9. Run `npm -C frontend/portal run build`.
+10. Run backend `go test ./...`.
+11. Execute browser verification for route access and `genre` prefilter behavior.
 
 ## Dependencies
 
-- Phase 2 depends on semantic token completion from Phase 1.
-- Phase 3 depends on Phase 2 to verify final visual consistency and avoid rework.
-- Reviewer validation depends on successful lint/build completion.
+- 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
 
-- A new branch exists containing only portal color-system redesign changes.
-- Portal shared shells/components use semantic color tokens instead of ad-hoc hardcoded palette where modified.
-- High-contrast mode token set is available for accessibility-forward validation.
+- `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.
-- User can run portal and visually compare revised palette/readability across login, home shell, user shell, and creator shell.
+- backend `go test ./...` passes (or unrelated pre-existing failures explicitly reported).
+- Browser page-flow checks pass for route + query-sync scenarios.
 
 ## Risks
 
-- Broad visual changes may impact component contrast unexpectedly in edge views not directly edited.
-- PrimeVue internal styles can override utility classes; requires targeted global overrides.
-- Overly aggressive recolor could reduce brand recognition; keep primary brand hue stable while improving accessibility.
+- 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