# 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)

```text
docs/
└── plan.md
```

### Source Code (repository root)

```text
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

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. 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 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 |