chore: complete v1.3 milestone — Backend Expansion

Archives v1.3 milestone (Phase 13: 18 rclone backends), updates PROJECT.md with all 30 validated requirements, reorganizes ROADMAP.md with all 4 milestones in collapsed details blocks, adds v1.2 and v1.3 retrospective entries. Also commits minor CSS token fixes in src/ (text-on-surface-container class alignment) that were uncommitted from phase 13 execution. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-16 16:54:45 +02:00
parent f75b499ad6
commit a26608791f
19 changed files with 591 additions and 230 deletions
@@ -0,0 +1,118 @@
+# Requirements Archive: v1.3 Backend Expansion
+
+**Archived:** 2026-04-16
+**Status:** SHIPPED
+
+For current requirements, see `.planning/REQUIREMENTS.md`.
+
+---
+
+# Requirements: Ready2Blob
+
+**Defined:** 2026-03-31
+**Core Value:** An IT pro can go from zero to a deployable rclone setup in minutes — without needing to know rclone's config syntax or PowerShell deployment conventions.
+
+## v1.2 Requirements
+
+### Theme
+
+- [x] **THEME-01**: App uses a consistent MD3 color token system (CSS custom properties) that all components reference instead of hardcoded Tailwind color classes
+- [x] **THEME-02**: User can toggle between System, Light, and Dark themes, with choice persisted across sessions and no flash of unstyled content on load
+
+### Components
+
+- [x] **COMP-01**: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content
+- [x] **COMP-02**: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary
+- [x] **COMP-03**: Backend selection cards and output blocks use MD3 elevation with tonal surface tint, consistent padding, and shape tokens
+- [x] **COMP-04**: Step indicator displays as numbered circles connected by lines, with completed steps showing a checkmark, current step highlighted, and future steps muted
+
+### Content & Clarity
+
+- [x] **UX-01**: First-time visitor sees an intro section explaining what Ready2Blob does, with a clear call-to-action to start the wizard
+- [x] **UX-02**: Remote name field includes a placeholder example, help text explaining what it is, and a visual preview showing how it appears in the generated `[remote-name]` config
+- [x] **UX-03**: Each wizard step has a 1-2 sentence description below the heading explaining what the user is doing and why
+- [x] **UX-04**: All backend credential fields have contextual help text explaining what to enter and where to find it
+
+### Polish
+
+- [x] **POLISH-01**: Wizard layout adapts to mobile screens — backend cards stack, form fields go full-width, step indicator collapses, buttons stretch
+- [x] **POLISH-02**: All interactive elements have visible MD3 focus indicators (3px outline) using `focus-visible` for keyboard navigation
+- [x] **POLISH-03**: Step transitions use subtle fade/slide animation that respects `prefers-reduced-motion`
+- [x] **POLISH-04**: On validation failure, the view auto-scrolls to the first errored field
+
+### Tech Debt
+
+- [x] **DEBT-01**: FieldRenderer uses consistent `aria-label` pattern across text-branch and select-branch (resolving v1.1 cosmetic debt)
+
+### Dark Mode Visibility
+
+- [x] **DARK-01**: All wizard step h2 headings are visible (readable text with proper contrast) in dark mode
+- [x] **DARK-02**: DeploymentStep native form controls (labels, legends, checkboxes, radios) are visible and styled with semantic tokens in dark mode
+- [x] **DARK-03**: FieldRenderer select element has proper background and text color in dark mode
+
+## v1.3 Requirements
+
+### Remote Backend Expansion
+
+- [x] **REMOTE-01**: BACKEND_REGISTRY contains all 18 backends (7 existing + 11 new) with correct rclone field definitions, displayName, description, and category
+- [x] **REMOTE-02**: BackendType is derived from registry keys (`keyof typeof BACKEND_REGISTRY`) instead of an explicit union literal, eliminating a touch-point when adding backends
+- [x] **REMOTE-03**: BackendSelectionStep displays backends grouped by category (Cloud Object Storage, Cloud Drives, Protocol-based) with instant search filtering and inline SVG icons
+- [x] **REMOTE-04**: OAuth-token backends (Google Drive, Dropbox, Box, pCloud, OneDrive) display a collapsible OAuthInstructions component with backend-specific `rclone authorize` command
+- [x] **REMOTE-05**: RemoteConfigStep renders the correct form fields for every backend, including GdriveAuthToggle for Google Drive's dual-auth (OAuth token vs service account)
+- [x] **REMOTE-06**: buildRcloneConf produces valid rclone.conf output with correct type strings for all 18 backends
+
+## Future Requirements
+
+- Accent color presets (5-8 curated themes) — deferred from v1.2 scoping
+- Code block syntax highlighting in ReviewStep output blocks
+- Upgraded tooltip popovers with Floating UI positioning
+- Custom styled select/dropdown replacing native `<select>`
+
+## Out of Scope
+
+| Feature | Reason |
+|---------|--------|
+| MUI or Material Tailwind component library | Bundle bloat (~300KB+) for 4-step wizard; custom tokens + Tailwind lighter and fully controlled |
+| Page-per-step routing (React Router) | Wizard state is ephemeral credentials in memory; refreshing loses context; bookmarking credential step is security anti-pattern |
+| Glassmorphism / neomorphism effects | CPU-intensive, low contrast accessibility issues, will look dated quickly |
+| Arbitrary user-picked hex color | Breaks accessibility (contrast ratios); curated presets cover 95% of personalization need |
+| Custom checkbox/radio styling | High effort for few toggles; native inputs with MD3-inspired wrappers sufficient |
+
+## Traceability
+
+| Requirement | Phase | Status |
+|-------------|-------|--------|
+| THEME-01 | Phase 8 | Complete |
+| THEME-02 | Phase 8 | Complete |
+| COMP-01 | Phase 9 | Complete |
+| COMP-02 | Phase 9 | Complete |
+| COMP-03 | Phase 9 | Complete |
+| COMP-04 | Phase 9 | Complete |
+| DEBT-01 | Phase 9 | Complete |
+| UX-01 | Phase 10 | Complete |
+| UX-02 | Phase 10 | Complete |
+| UX-03 | Phase 10 | Complete |
+| UX-04 | Phase 10 | Complete |
+| POLISH-01 | Phase 11 | Complete |
+| POLISH-02 | Phase 11 | Complete |
+| POLISH-03 | Phase 11 | Complete |
+| POLISH-04 | Phase 11 | Complete |
+| DARK-01 | Phase 12 | Complete |
+| DARK-02 | Phase 12 | Complete |
+| DARK-03 | Phase 12 | Complete |
+| REMOTE-01 | Phase 13 | Complete |
+| REMOTE-02 | Phase 13 | Complete |
+| REMOTE-03 | Phase 13 | Planned |
+| REMOTE-04 | Phase 13 | Planned |
+| REMOTE-05 | Phase 13 | Planned |
+| REMOTE-06 | Phase 13 | Complete |
+
+**Coverage:**
+- v1.2 requirements: 18 total (18 complete)
+- v1.3 requirements: 6 total (3 complete)
+- Mapped to phases: 24
+- Unmapped: 0
+
+---
+*Requirements defined: 2026-03-31*
+*Last updated: 2026-04-01 after Phase 13 planning*
@@ -0,0 +1,164 @@
+# Roadmap: Ready2Blob
+
+## Milestones
+
+- ✅ **v1.0 MVP** — Phases 1–4 (shipped 2026-03-27)
+- ✅ **v1.1 Backlog & Tech Debt** — Phases 5–7 (shipped 2026-03-31)
+- ✅ **v1.2 UI Polish & Clarity** — Phases 8–12 (shipped 2026-04-01)
+- **v1.3 Backend Expansion** — Phase 13 (in progress)
+
+## Phases
+
+<details>
+<summary>✅ v1.0 MVP (Phases 1–4) — SHIPPED 2026-03-27</summary>
+
+- [x] Phase 1: Foundation (4/4 plans) — completed 2026-03-26
+- [x] Phase 2: Generators (4/4 plans) — completed 2026-03-26
+- [x] Phase 3: Wizard UI (5/5 plans) — completed 2026-03-27
+- [x] Phase 4: Review, Download & Security (5/5 plans) — completed 2026-03-27
+
+Full phase details: [.planning/milestones/v1.0-ROADMAP.md](milestones/v1.0-ROADMAP.md)
+
+</details>
+
+<details>
+<summary>✅ v1.1 Backlog & Tech Debt (Phases 5–7) — SHIPPED 2026-03-31</summary>
+
+- [x] Phase 5: Tech Debt (4/4 plans) — completed 2026-03-30
+- [x] Phase 6: New Backends (4/4 plans) — completed 2026-03-31
+- [x] Phase 7: Validation & UX Polish (3/3 plans) — completed 2026-03-31
+
+Full phase details: [.planning/milestones/v1.1-ROADMAP.md](milestones/v1.1-ROADMAP.md)
+
+</details>
+
+<details>
+<summary>✅ v1.2 UI Polish & Clarity (Phases 8–12) — SHIPPED 2026-04-01</summary>
+
+- [x] **Phase 8: Theme Foundation** - MD3 color token system and dark mode infrastructure (completed 2026-04-01)
+- [x] **Phase 9: MD3 Components** - UI primitives and component migration to semantic tokens (completed 2026-04-01)
+- [x] **Phase 10: Content & Clarity** - Intro section, step descriptions, and contextual help (completed 2026-04-01)
+- [x] **Phase 11: Polish & Responsiveness** - Mobile layout, focus states, transitions, scroll-to-error (completed 2026-04-01)
+- [x] **Phase 12: Dark mode visibility fixes** - Fix dark mode regressions (completed 2026-04-01)
+
+</details>
+
+### v1.3 Backend Expansion (In Progress)
+
+**Milestone Goal:** Expand backend support from 7 to 17 rclone backends with categorized selection, search filtering, OAuth token-paste guidance, and inline icons.
+
+## Phase Details
+
+### Phase 8: Theme Foundation
+**Goal**: App has a complete MD3 color token system and working dark mode toggle with no flash of unstyled content
+**Depends on**: Phase 7 (v1.1 complete)
+**Requirements**: THEME-01, THEME-02
+**Success Criteria** (what must be TRUE):
+  1. All color values in the app flow from CSS custom properties defined in a single token file, not from hardcoded Tailwind color classes
+  2. User can toggle between System, Light, and Dark themes via a visible control, and the entire UI responds immediately
+  3. Theme preference persists in localStorage and applies on reload without any flash of wrong theme
+  4. Tailwind v4 `@theme` directive maps MD3 token names to utility classes (e.g., `bg-surface`, `text-on-primary`)
+**Plans:** 2/2 plans complete
+Plans:
+- [ ] 08-01-PLAN.md — Token system, flash prevention, ThemeToggle component
+- [ ] 08-02-PLAN.md — Color class migration across all components
+
+### Phase 9: MD3 Components
+**Goal**: All interactive elements use MD3-styled primitives with consistent visual language across the entire wizard
+**Depends on**: Phase 8
+**Requirements**: COMP-01, COMP-02, COMP-03, COMP-04, DEBT-01
+**Success Criteria** (what must be TRUE):
+  1. Text inputs render as outlined fields with floating labels that animate on focus and when the field has content
+  2. Buttons visually distinguish primary (filled), secondary (outlined), and tertiary (text) actions across all wizard steps
+  3. Backend selection cards and output blocks display MD3 elevation with tonal surface tint and consistent shape tokens
+  4. Step indicator shows numbered circles connected by lines, with checkmarks on completed steps, highlight on current, and muted future steps
+  5. FieldRenderer produces identical `aria-label` attributes for both text-branch and select-branch inputs
+**Plans:** 5/5 plans complete
+Plans:
+- [x] 09-01-PLAN.md — TextFieldMD3 component, MD3 button constants, DEBT-01 aria-label fix
+- [x] 09-02-PLAN.md — StepIndicator rebuild with MD3 circles and connectors
+- [x] 09-03-PLAN.md — Integration: wire TextFieldMD3 + button styles + elevation into all wizard steps
+- [x] 09-04-PLAN.md — Gap closure: Replace BackendSelectionStep plain input with TextFieldMD3
+- [x] 09-05-PLAN.md — Gap closure: Tooltip hover behavior + icon placement beside helpText
+
+### Phase 10: Content & Clarity
+**Goal**: A first-time visitor understands what Ready2Blob does and what each wizard step expects without external documentation
+**Depends on**: Phase 8 (tokens needed for consistent styling of new content)
+**Requirements**: UX-01, UX-02, UX-03, UX-04
+**Success Criteria** (what must be TRUE):
+  1. Landing view shows an intro section explaining what Ready2Blob does with a clear call-to-action to start the wizard
+  2. Remote name field displays a placeholder example, help text, and a live preview showing how the name appears in `[remote-name]` config syntax
+  3. Every wizard step has a 1-2 sentence description below the heading explaining what the user is doing and why
+  4. All backend credential fields have contextual help text explaining what to enter and where to find the value
+**Plans:** 3/3 plans complete
+Plans:
+- [ ] 10-01-PLAN.md — Intro section with CTA and step descriptions for all 4 steps
+- [ ] 10-02-PLAN.md — Remote name live config preview with helpText
+- [ ] 10-03-PLAN.md — Credential field tooltipText and helpText enrichment
+
+### Phase 11: Polish & Responsiveness
+**Goal**: The wizard feels production-ready on any device with smooth interactions and accessible keyboard navigation
+**Depends on**: Phase 9, Phase 10
+**Requirements**: POLISH-01, POLISH-02, POLISH-03, POLISH-04
+**Success Criteria** (what must be TRUE):
+  1. On a mobile viewport (< 640px), backend cards stack vertically, form fields span full width, step indicator collapses, and buttons stretch to fill width
+  2. Every interactive element shows a visible 3px MD3 focus outline when navigated via keyboard (using `focus-visible`)
+  3. Step transitions use a subtle fade/slide animation that is suppressed when the user has `prefers-reduced-motion` enabled
+  4. When form validation fails, the view auto-scrolls to the first field with an error
+**Plans:** 2/2 plans complete
+Plans:
+- [ ] 11-01-PLAN.md — Mobile responsive layout + MD3 focus-visible indicators
+- [ ] 11-02-PLAN.md — Step transition animation + auto-scroll to first error
+
+### Phase 12: Dark mode visibility fixes
+
+**Goal:** Fix dark mode visibility regressions where step headings, DeploymentStep form controls, and FieldRenderer select elements are invisible or unstyled against the dark background
+**Requirements**: DARK-01, DARK-02, DARK-03
+**Depends on:** Phase 11
+**Success Criteria** (what must be TRUE):
+  1. All wizard step h2 headings are readable in dark mode with proper contrast
+  2. DeploymentStep labels, legends, checkboxes, and radios are visible and styled in dark mode
+  3. FieldRenderer select element has proper background and text color in dark mode
+**Plans:** 2/2 plans complete
+
+Plans:
+- [ ] 12-01-PLAN.md — Fix step headings, DeploymentStep form controls, ReviewStep checkbox
+- [ ] 12-02-PLAN.md — Fix FieldRenderer select dark mode styling
+
+### Phase 13: Add remaining RClone remotes
+
+**Goal:** Expand backend support from 7 to 17 rclone backends with categorized selection UI, instant search, OAuth token-paste guidance, and inline SVG icons — covering all backends suitable for unattended Windows deployment
+**Requirements**: REMOTE-01, REMOTE-02, REMOTE-03, REMOTE-04, REMOTE-05, REMOTE-06
+**Depends on:** Phase 12
+**Success Criteria** (what must be TRUE):
+  1. BACKEND_REGISTRY contains 17 backends with correct fields, categories, and rclone type mappings
+  2. BackendType is derived from registry keys (not an explicit union)
+  3. BackendSelectionStep groups backends by category with instant search and inline SVG icons
+  4. OAuth-token backends show collapsible OAuthInstructions with backend-specific rclone authorize command
+  5. RemoteConfigStep renders correct form for every backend including GdriveAuthToggle
+  6. buildRcloneConf produces valid rclone.conf for all 17 backends
+**Plans:** 4/4 plans complete
+
+Plans:
+- [x] 13-01-PLAN.md — Registry refactoring: derive BackendType, add categories, 11 new backend entries (18 total), auto-generate schemas
+- [ ] 13-02-PLAN.md — New components: OAuthInstructions, GdriveAuthToggle, BackendIcons
+- [ ] 13-03-PLAN.md — BackendSelectionStep UX overhaul: categories, search, icons
+- [ ] 13-04-PLAN.md — RemoteConfigStep wiring for all new backends + visual verification
+
+## Progress
+
+| Phase | Milestone | Plans Complete | Status | Completed |
+|-------|-----------|----------------|--------|-----------|
+| 1. Foundation | v1.0 | 4/4 | Complete | 2026-03-26 |
+| 2. Generators | v1.0 | 4/4 | Complete | 2026-03-26 |
+| 3. Wizard UI | v1.0 | 5/5 | Complete | 2026-03-27 |
+| 4. Review, Download & Security | v1.0 | 5/5 | Complete | 2026-03-27 |
+| 5. Tech Debt | v1.1 | 4/4 | Complete | 2026-03-30 |
+| 6. New Backends | v1.1 | 4/4 | Complete | 2026-03-31 |
+| 7. Validation & UX Polish | v1.1 | 3/3 | Complete | 2026-03-31 |
+| 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 |
+| 9. MD3 Components | v1.2 | 5/5 | Complete | 2026-04-01 |
+| 10. Content & Clarity | v1.2 | 3/3 | Complete | 2026-04-01 |
+| 11. Polish & Responsiveness | v1.2 | 2/2 | Complete | 2026-04-01 |
+| 12. Dark mode visibility fixes | v1.2 | 2/2 | Complete | 2026-04-01 |
+| 13. Add remaining RClone remotes | 4/4 | Complete    | 2026-04-01 | — |