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