108 lines
5.0 KiB
Markdown
108 lines
5.0 KiB
Markdown
# Implementation Plan: Superset-Style UX Redesign
|
|
|
|
**Branch**: `019-superset-ux-redesign` | **Date**: 2026-02-09 | **Spec**: [spec.md](./spec.md)
|
|
**Input**: Feature specification from `/specs/019-superset-ux-redesign/spec.md`
|
|
|
|
## Summary
|
|
|
|
Redesign the application from a **Task-Centric** model (users navigate to tools) to a **Resource-Centric** model (users navigate to resources like Dashboards, Datasets). Key components include:
|
|
- Persistent left sidebar with resource categories
|
|
- Global Task Drawer for monitoring background operations
|
|
- Dashboard Hub and Dataset Hub as primary management interfaces
|
|
- Unified top navigation bar with activity indicator
|
|
- Consolidated Settings section
|
|
|
|
## Technical Context
|
|
|
|
**Language/Version**: Python 3.9+ (Backend), Node.js 18+ (Frontend)
|
|
**Primary Dependencies**: FastAPI, SvelteKit, Tailwind CSS, SQLAlchemy, WebSocket (existing)
|
|
**Storage**: SQLite (tasks.db, auth.db, migrations.db) - no new database tables required
|
|
**Testing**: pytest (backend), Vitest/Playwright (frontend)
|
|
**Target Platform**: Web (Desktop primary, responsive for mobile)
|
|
**Project Type**: Web application (frontend + backend)
|
|
**Performance Goals**: Task Drawer opens < 200ms, sidebar animation < 300ms
|
|
**Constraints**: No blocking modals for task inputs, real-time log streaming via WebSocket
|
|
**Scale/Scope**: ~20 new frontend components, 5 new API endpoints, 3 new stores
|
|
|
|
## Constitution Check
|
|
|
|
*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
|
|
|
|
| Principle | Status | Notes |
|
|
|-----------|--------|-------|
|
|
| I. Semantic Protocol Compliance | ✅ PASS | All new components will use [DEF] anchors and @UX_STATE tags |
|
|
| II. Everything is a Plugin | ✅ PASS | No new plugins required; existing plugins (Migration, Backup, Git) will be triggered from Resource Hubs |
|
|
| III. Unified Frontend Experience | ✅ PASS | Using existing component library, i18n system, and requestApi wrapper |
|
|
| IV. Security & Access Control | ✅ PASS | ADMIN section visibility controlled by existing RBAC |
|
|
| V. Independent Testability | ✅ PASS | Each User Story has defined independent test scenarios |
|
|
| VI. Asynchronous Execution | ✅ PASS | Task Drawer integrates with existing TaskManager and WebSocket |
|
|
|
|
## Project Structure
|
|
|
|
### Documentation (this feature)
|
|
|
|
```text
|
|
specs/019-superset-ux-redesign/
|
|
├── plan.md # This file
|
|
├── spec.md # Feature specification
|
|
├── ux_reference.md # UX mockups and flows
|
|
├── research.md # Phase 0 output
|
|
├── data-model.md # Phase 1 output
|
|
├── quickstart.md # Phase 1 output
|
|
├── contracts/ # Phase 1 output
|
|
│ └── api.md # API contracts
|
|
├── checklists/
|
|
│ └── requirements.md # Spec quality checklist
|
|
└── tasks.md # Phase 2 output (NOT created yet)
|
|
```
|
|
|
|
### Source Code (repository root)
|
|
|
|
```text
|
|
backend/
|
|
├── src/
|
|
│ ├── api/routes/
|
|
│ │ ├── dashboards.py # NEW: Dashboard hub API
|
|
│ │ ├── datasets.py # NEW: Dataset hub API
|
|
│ │ └── settings.py # EXTEND: Consolidated settings
|
|
│ └── services/
|
|
│ └── resource_service.py # NEW: Shared resource logic
|
|
└── tests/
|
|
|
|
frontend/
|
|
├── src/
|
|
│ ├── lib/
|
|
│ │ ├── components/
|
|
│ │ │ ├── layout/
|
|
│ │ │ │ ├── Sidebar.svelte # NEW: Left sidebar
|
|
│ │ │ │ ├── TopNavbar.svelte # NEW: Top navigation
|
|
│ │ │ │ ├── TaskDrawer.svelte # NEW: Global task drawer
|
|
│ │ │ │ └── Breadcrumbs.svelte # NEW: Breadcrumb nav
|
|
│ │ │ └── hubs/
|
|
│ │ │ ├── DashboardHub.svelte # NEW: Dashboard management
|
|
│ │ │ ├── DatasetHub.svelte # NEW: Dataset management
|
|
│ │ │ └── SettingsPage.svelte # NEW: Consolidated settings
|
|
│ │ ├── stores/
|
|
│ │ │ ├── sidebar.js # NEW: Sidebar state
|
|
│ │ │ ├── taskDrawer.js # NEW: Drawer state + resource-task map
|
|
│ │ │ └── activity.js # NEW: Activity indicator count
|
|
│ │ └── i18n/
|
|
│ │ └── en.json # EXTEND: New navigation labels
|
|
│ └── routes/
|
|
│ ├── /dashboards/+page.svelte # NEW
|
|
│ ├── /datasets/+page.svelte # NEW
|
|
│ ├── /settings/+page.svelte # NEW
|
|
│ └── /+layout.svelte # EXTEND: Add sidebar + drawer
|
|
└── tests/
|
|
```
|
|
|
|
**Structure Decision**: Web application structure with new `layout/` and `hubs/` component directories. The Sidebar and TaskDrawer live in the root `+layout.svelte` for global availability.
|
|
|
|
## Complexity Tracking
|
|
|
|
> No Constitution violations. All changes use existing patterns.
|
|
|
|
| Violation | Why Needed | Simpler Alternative Rejected Because |
|
|
|-----------|------------|-------------------------------------|
|
|
| N/A | N/A | N/A |
|