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>
- SUMMARY.md: dark mode h2 and form control semantic token fixes
- STATE.md: position updated, decisions recorded
- ROADMAP.md: phase 12 marked complete
- REQUIREMENTS.md: DARK-01, DARK-02 marked complete
- Added bg-surface-container and text-on-surface semantic token classes to select element className
- Fixes select dropdown invisible text in dark mode (browser-applied white background)
- 204 tests pass, zero regressions
- BackendSelectionStep: add onInvalidSubmit scrolling to remote-name input
- BackendSelectionStep: pass onInvalidSubmit to form onSubmit and handleCardClick
- RemoteConfigStep: add FieldErrors import from react-hook-form
- RemoteConfigStep: add onInvalidSubmit scrolling to first errored field by key
- RemoteConfigStep: pass onInvalidSubmit to form onSubmit
- Add scrollIntoView mock (vi.fn()) in beforeEach to both test files
- Add POLISH-04 test in BackendSelectionStep: scrolls to remote-name on empty submit
- Add POLISH-04 test in RemoteConfigStep: scrolls to first errored field on empty submit
- md3-buttons.ts: upgrade ring-2/50 to ring-3 on all three constants (FILLED, OUTLINED, TEXT)
- BackendCard: add focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary
- StepIndicator: upgrade group-focus-visible completed-step circle from ring-2/50 to ring-3
- ThemeToggle: add focus-visible ring-3 with ring-inset to both selected/unselected branches
- FieldRenderer: select uses focus-visible:ring-2 (was focus:ring-2); tooltip buttons get focus-visible:ring-2 rounded
- BackendSelectionStep: responsive grid (1-col mobile, 2-col desktop) for cards; button row stacks vertically on mobile
- BackendCard: add w-full to fill grid cell on all viewports
- RemoteConfigStep/DeploymentStep/ReviewStep: flex-col sm:flex-row button rows; w-full sm:w-auto on Back/Next buttons
- StepIndicator: add hidden sm:block to all three label spans (completed, active, future)
- Add useState import to WizardShell
- Add showIntro local state (default true) — no persistence, resets on reload
- Add IntroSection component with action-first copy and Get Started CTA
- Copy mentions Azure Blob, S3, OneDrive, and 4 more backends
- Explains rclone.conf + deployment script generation
- Uses MD3_BTN_FILLED for CTA, MD3 tokens throughout
- When showIntro false, renders existing StepIndicator + step content unchanged
- Stateless component accepting value prop (string)
- Empty/whitespace state: shows grayed [my-remote] placeholder + guidance text
- Value state: shows [typed-value] in on-surface-variant color
- Renders only div/span elements — no form controls
- 9 tests covering empty state, value state, and element type constraints
3 plans in 1 wave covering UX-01 through UX-04: intro section,
remote name preview, step descriptions, and credential help text.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- FieldRenderer: 4 new tests for hover show/hide, click-pin, click-unpin
- TextFieldMD3: 3 new tests for helpTextPrefix with helpText, without, and prefix-only
- Import fireEvent from @testing-library/react added to FieldRenderer.test.tsx
- TextFieldMD3: add helpTextPrefix prop rendered inline left of helpText
- Guard changed to (helpText || helpTextPrefix) so icon renders without helpText
- FieldRenderer: move tooltip icon from above field to inline with helpText via helpTextPrefix
- FieldRenderer: add hoverTooltip state; tooltip visible on mouseEnter, dismisses on mouseLeave
- FieldRenderer: click-to-unpin clears hoverTooltip to prevent sticky tooltip after dismiss
- PasswordField: same tooltip fix as FieldRenderer text-branch
- Select-branch also gains hover support