busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
master
ss-tools/specs/004-integrate-svelte-kit/tasks.md
busya d05344e604 fixed css
2025-12-20 23:33:47 +03:00

7.6 KiB
Raw Permalink Blame History

Tasks: Integrate SvelteKit

Input: Design documents from /specs/004-integrate-svelte-kit/ Prerequisites: plan.md (required), spec.md (required for user stories), research.md, data-model.md, contracts/

Tests: Tests are NOT explicitly requested in the feature specification, so no test-specific tasks are included. Verification will be done via the "Independent Test" criteria for each story.

Organization: Tasks are grouped by user story to enable independent implementation and testing of each story.

Format: [ID] [P?] [Story] Description

  • [P]: Can run in parallel (different files, no dependencies)
  • [Story]: Which user story this task belongs to (e.g., US1, US2, US3)
  • Include exact file paths in descriptions

Path Conventions

  • Web app: backend/src/, frontend/src/

Phase 1: Setup (Shared Infrastructure)

Purpose: Project initialization and basic structure

  • T001 Initialize SvelteKit in frontend/ directory (replacing current setup)
  • T002 Install @sveltejs/adapter-static in frontend/package.json
  • T003 [P] Configure frontend/svelte.config.js for static adapter and SPA fallback

Phase 2: Foundational (Blocking Prerequisites)

Purpose: Core infrastructure that MUST be complete before ANY user story can be implemented

⚠️ CRITICAL: No user story work can begin until this phase is complete

  • T004 Create frontend/src/routes/+layout.ts to disable SSR and prerendering (ssr = false, prerender = false)
  • T005 Implement catch-all route in backend/src/app.py to serve index.html for SPA routing
  • T006 [P] Update backend/src/app.py to mount frontend/build directory using StaticFiles
  • T007 [P] Update frontend/src/lib/api.js to ensure compatibility with SvelteKit environment
  • T022 [FR-008] Configure WebSocket proxying in backend/src/app.py and frontend/vite.config.js

Checkpoint: Foundation ready - user story implementation can now begin in parallel

Phase 3: User Story 1 - Seamless Navigation (Priority: P1) 🎯 MVP

Goal: Navigate between Dashboard and Settings using standard URL paths so that users can bookmark pages and use browser navigation.

Independent Test: Click navigation links and verify the URL changes and the correct content renders without a full page reload. Verify deep linking by refreshing at /settings.

Implementation for User Story 1

  • T008 [P] [US1] Create Dashboard route in frontend/src/routes/+page.svelte (migrating from App.svelte/Dashboard.svelte)
  • T009 [P] [US1] Create Settings route in frontend/src/routes/settings/+page.svelte (migrating from Settings.svelte)
  • T010 [US1] Implement navigation links between Dashboard and Settings in frontend/src/routes/+page.svelte and frontend/src/routes/settings/+page.svelte
  • T023 [US1] Implement "Save Settings" form submission in frontend/src/routes/settings/+page.svelte
  • T024 [US1] Implement plugin action triggers (e.g., "Run Backup") in frontend/src/routes/+page.svelte

Checkpoint: At this point, User Story 1 should be fully functional and testable independently.

Phase 4: User Story 2 - Improved Data Loading (Priority: P2)

Goal: Use modern data loading patterns so that data is fetched efficiently before the page renders.

Independent Test: Observe the page load sequence and verify that data is available to the component immediately upon mount via the data prop.

Implementation for User Story 2

  • T011 [P] [US2] Implement load function for Dashboard in frontend/src/routes/+page.ts to fetch plugins from /api/plugins/
  • T012 [P] [US2] Implement load function for Settings in frontend/src/routes/settings/+page.ts to fetch config and environments from /api/settings/
  • T013 [US2] Update frontend/src/routes/+page.svelte to use data from load function via export let data;
  • T014 [US2] Update frontend/src/routes/settings/+page.svelte to use data from load function via export let data;

Checkpoint: At this point, User Stories 1 AND 2 should both work independently.

Phase 5: User Story 3 - Unified Layout (Priority: P3)

Goal: Consistent look and feel across all pages with a shared navigation bar and footer.

Independent Test: Navigate between Dashboard and Settings and verify that the header/footer remain static and do not re-render or flicker.

Implementation for User Story 3

  • T015 [US3] Create shared layout in frontend/src/routes/+layout.svelte with <slot />
  • T016 [P] [US3] Move navigation bar component to frontend/src/components/Navbar.svelte and include in +layout.svelte
  • T017 [P] [US3] Create footer component in frontend/src/components/Footer.svelte and include in +layout.svelte

Checkpoint: All user stories should now be independently functional.

Phase 6: Polish & Cross-Cutting Concerns

Purpose: Improvements that affect multiple user stories

  • T018 [P] Implement custom 404 error page in frontend/src/routes/+error.svelte
  • T019 Add graceful error handling for API failures in load functions (T011, T012)
  • T020 [P] Update frontend/README.md with new SvelteKit-based development and build instructions
  • T021 Run specs/004-integrate-svelte-kit/quickstart.md validation
  • T025 [FR-008] Update TaskRunner.svelte to use SvelteKit-compatible WebSocket connection logic
  • T026 [SC-001] Perform performance benchmarking to verify < 200ms transition time

Dependencies & Execution Order

Phase Dependencies

  • Setup (Phase 1): No dependencies - can start immediately
  • Foundational (Phase 2): Depends on Setup completion - BLOCKS all user stories
  • User Stories (Phase 3+): All depend on Foundational phase completion
    • User stories can then proceed in parallel (if staffed)
    • Or sequentially in priority order (P1 → P2 → P3)
  • Polish (Final Phase): Depends on all desired user stories being complete

User Story Dependencies

  • User Story 1 (P1): Can start after Foundational (Phase 2) - No dependencies on other stories
  • User Story 2 (P2): Can start after Foundational (Phase 2) - Depends on US1 routes existing
  • User Story 3 (P3): Can start after Foundational (Phase 2) - Can be implemented independently of US1/US2 content

Within Each User Story

  • Models/Data fetching before UI implementation
  • Core implementation before integration
  • Story complete before moving to next priority

Parallel Opportunities

  • T003 (Svelte config) can run in parallel with other setup
  • T006 (Backend mount) and T007 (API client) can run in parallel
  • T008 (Dashboard route) and T009 (Settings route) can run in parallel
  • T011 and T012 (Load functions) can run in parallel
  • T016 and T017 (Navbar/Footer components) can run in parallel

Parallel Example: User Story 2

# Launch all load function implementations for User Story 2 together:
Task: "Implement load function for Dashboard in frontend/src/routes/+page.ts"
Task: "Implement load function for Settings in frontend/src/routes/settings/+page.ts"

Implementation Strategy

MVP First (User Story 1 Only)

  1. Complete Phase 1: Setup
  2. Complete Phase 2: Foundational (CRITICAL - blocks all stories)
  3. Complete Phase 3: User Story 1
  4. STOP and VALIDATE: Test User Story 1 independently (Navigation and Deep Linking)
  5. Deploy/demo if ready

Incremental Delivery

  1. Complete Setup + Foundational → Foundation ready
  2. Add User Story 1 → Test independently → Deploy/Demo (MVP!)
  3. Add User Story 2 → Test independently → Deploy/Demo
  4. Add User Story 3 → Test independently → Deploy/Demo
  5. Each story adds value without breaking previous stories