89 lines
4.3 KiB
Markdown
89 lines
4.3 KiB
Markdown
# Implementation Plan: Frontend Navigation Redesign
|
|
|
|
**Branch**: `015-frontend-nav-redesign` | **Date**: 2026-01-26 | **Spec**: [specs/015-frontend-nav-redesign/spec.md](../spec.md)
|
|
**Input**: Feature specification from `specs/015-frontend-nav-redesign/spec.md`
|
|
|
|
**Note**: This template is filled in by the `/speckit.plan` command. See `.specify/templates/commands/plan.md` for the execution workflow.
|
|
|
|
## Summary
|
|
|
|
This feature redesigns the frontend navigation to shift from a Navbar-heavy approach to a Dashboard-centric model. Key changes include moving tool access (Mapper, Storage, Backups) to the Dashboard, simplifying the Navbar to global contexts (Tasks, Settings), removing deprecated features (Dataset Search, Environments), and implementing a dedicated Backup Management UI based on backend capabilities from feature 009.
|
|
|
|
Additionally, the navigation architecture is refactored to be backend-driven. Plugins now expose a `ui_route` property, allowing the frontend to dynamically determine the correct navigation path without hardcoded mapping.
|
|
|
|
## Technical Context
|
|
|
|
**Language/Version**: Python 3.9+ (Backend), Node.js 18+ (Frontend)
|
|
**Primary Dependencies**: FastAPI (Backend), SvelteKit + Tailwind CSS (Frontend)
|
|
**Storage**: N/A (UI reorganization and API integration)
|
|
**Testing**: Playwright (E2E - if available), Vitest (Unit)
|
|
**Target Platform**: Web Browser
|
|
**Project Type**: Web Application (Frontend + Backend)
|
|
**Performance Goals**: Instant navigation (<100ms), fast dashboard load
|
|
**Constraints**: Must maintain responsive design; Backup UI must interface with existing backend endpoints
|
|
**Scale/Scope**: ~5-10 file modifications, 1 new major component (BackupManager)
|
|
|
|
## Constitution Check
|
|
|
|
*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
|
|
|
|
- [x] **Semantic Protocol Compliance**: All new components will follow Svelte component header standards.
|
|
- [x] **Causal Validity**: Contracts (props/events) will be defined before implementation.
|
|
- [x] **Immutability of Architecture**: No core architectural changes; only UI reorganization.
|
|
- [x] **Design by Contract**: New Backup component will define clear interface contracts.
|
|
- [x] **Everything is a Plugin**: N/A (Frontend changes primarily, backend remains plugin-based).
|
|
- [x] **Unified Frontend Experience**: All new UI components will use standardized components and internationalization (i18n).
|
|
|
|
## Project Structure
|
|
|
|
### Documentation (this feature)
|
|
|
|
```text
|
|
specs/015-frontend-nav-redesign/
|
|
├── plan.md # This file
|
|
├── research.md # Phase 0 output
|
|
├── data-model.md # Phase 1 output
|
|
├── quickstart.md # Phase 1 output
|
|
├── contracts/ # Phase 1 output
|
|
└── tasks.md # Phase 2 output
|
|
```
|
|
|
|
### Source Code (repository root)
|
|
|
|
```text
|
|
backend/
|
|
├── src/
|
|
│ ├── core/
|
|
│ │ ├── plugin_base.py # (Modify: Add ui_route property)
|
|
│ │ └── plugin_loader.py # (Modify: Populate ui_route in PluginConfig)
|
|
│ ├── plugins/ # (Modify: Implement ui_route in all plugins)
|
|
│ └── api/routes/ # (Verify backup routes exist)
|
|
|
|
frontend/
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ ├── Navbar.svelte # (Modify: Simplify items)
|
|
│ │ ├── DashboardGrid.svelte # (Modify: Add tool links)
|
|
│ │ └── backups/ # (New: Backup UI)
|
|
│ │ ├── BackupManager.svelte
|
|
│ │ └── BackupList.svelte
|
|
│ ├── pages/
|
|
│ │ └── Dashboard.svelte # (Modify: Layout updates)
|
|
│ └── routes/
|
|
│ ├── +layout.svelte # (Check global nav injection)
|
|
│ ├── +page.svelte # (Modify: Use plugin.ui_route for navigation)
|
|
│ └── tools/
|
|
│ └── backups/ # (New Route)
|
|
│ └── +page.svelte
|
|
```
|
|
|
|
**Structure Decision**: Standard SvelteKit structure. New `backups` component directory for the complex backup UI. Route added under `tools/` to match existing pattern (mapper, storage).
|
|
|
|
## Complexity Tracking
|
|
|
|
> **Fill ONLY if Constitution Check has violations that must be justified**
|
|
|
|
| Violation | Why Needed | Simpler Alternative Rejected Because |
|
|
|-----------|------------|-------------------------------------|
|
|
| N/A | | |
|