kawaandClaude Opus 4.6
4bf3f1e45f
4 plans across 3 waves to expand from 7 to 17 rclone backends: - Plan 01 (W1): Registry refactoring, BackendType derivation, 10 new entries - Plan 02 (W2): OAuthInstructions, GdriveAuthToggle, BackendIcons components - Plan 03 (W2): BackendSelectionStep UX overhaul with categories, search, icons - Plan 04 (W3): RemoteConfigStep wiring for all new backends + visual verify Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
5.9 KiB
5.9 KiB
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
- THEME-01: App uses a consistent MD3 color token system (CSS custom properties) that all components reference instead of hardcoded Tailwind color classes
- 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
- COMP-01: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content
- COMP-02: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary
- COMP-03: Backend selection cards and output blocks use MD3 elevation with tonal surface tint, consistent padding, and shape tokens
- 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
- UX-01: First-time visitor sees an intro section explaining what Ready2Blob does, with a clear call-to-action to start the wizard
- 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 - UX-03: Each wizard step has a 1-2 sentence description below the heading explaining what the user is doing and why
- UX-04: All backend credential fields have contextual help text explaining what to enter and where to find it
Polish
- POLISH-01: Wizard layout adapts to mobile screens — backend cards stack, form fields go full-width, step indicator collapses, buttons stretch
- POLISH-02: All interactive elements have visible MD3 focus indicators (3px outline) using
focus-visiblefor keyboard navigation - POLISH-03: Step transitions use subtle fade/slide animation that respects
prefers-reduced-motion - POLISH-04: On validation failure, the view auto-scrolls to the first errored field
Tech Debt
- DEBT-01: FieldRenderer uses consistent
aria-labelpattern across text-branch and select-branch (resolving v1.1 cosmetic debt)
Dark Mode Visibility
- DARK-01: All wizard step h2 headings are visible (readable text with proper contrast) in dark mode
- DARK-02: DeploymentStep native form controls (labels, legends, checkboxes, radios) are visible and styled with semantic tokens in dark mode
- DARK-03: FieldRenderer select element has proper background and text color in dark mode
v1.3 Requirements
Remote Backend Expansion
- REMOTE-01: BACKEND_REGISTRY contains all 17 backends (7 existing + 10 new) with correct rclone field definitions, displayName, description, and category
- 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 - REMOTE-03: BackendSelectionStep displays backends grouped by category (Cloud Object Storage, Cloud Drives, Protocol-based) with instant search filtering and inline SVG icons
- REMOTE-04: OAuth-token backends (Google Drive, Dropbox, Box, pCloud, OneDrive) display a collapsible OAuthInstructions component with backend-specific
rclone authorizecommand - REMOTE-05: RemoteConfigStep renders the correct form fields for every backend, including GdriveAuthToggle for Google Drive's dual-auth (OAuth token vs service account)
- REMOTE-06: buildRcloneConf produces valid rclone.conf output with correct type strings for all 17 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 | Planned |
| REMOTE-02 | Phase 13 | Planned |
| REMOTE-03 | Phase 13 | Planned |
| REMOTE-04 | Phase 13 | Planned |
| REMOTE-05 | Phase 13 | Planned |
| REMOTE-06 | Phase 13 | Planned |
Coverage:
- v1.2 requirements: 18 total (18 complete)
- v1.3 requirements: 6 total (0 complete)
- Mapped to phases: 24
- Unmapped: 0
Requirements defined: 2026-03-31 Last updated: 2026-04-01 after Phase 13 planning