---
phase: 13-add-remaining-rclone-remotes
plan: "02"
subsystem: ui
tags: [react, tailwind, svg, rclone, oauth, wizard, components]

# Dependency graph
requires:
  - phase: 13-add-remaining-rclone-remotes
    provides: "BackendType derived from BACKEND_REGISTRY (18 backends), registry as const pattern"
provides:
  - "OAuthInstructions: collapsible step-by-step OAuth token guide (TDD, 4 tests)"
  - "GdriveAuthToggle: two-tab OAuth/Service Account toggle for Google Drive"
  - "BACKEND_ICONS: inline SVG icon map for all 18 BackendType entries"
affects: [13-03-BackendSelectionStep, 13-04-RemoteConfigStep]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "TDD for UI components: test → implement → verify cycle"
    - "Collapsible disclosure via useState(false) + conditional render"
    - "Both form fields always registered, visibility toggled via CSS hidden/block"
    - "Inline SVG icons with fill=currentColor for dark-mode compatibility"
    - "Partial<Record<BackendType, FC<IconProps>>> for optional icon map"

key-files:
  created:
    - src/components/wizard/OAuthInstructions.tsx
    - src/components/wizard/OAuthInstructions.test.tsx
    - src/components/wizard/GdriveAuthToggle.tsx
    - src/components/icons/BackendIcons.tsx
  modified: []

key-decisions:
  - "OAuthInstructions renders authorizeCommand in a <code> block (detected via step text prefix), not inline text — ensures test getByText exact-match works"
  - "BACKEND_ICONS is Partial<Record<BackendType,...>> — missing entries mean no icon rendered on the card; allows incremental icon addition"
  - "GdriveAuthToggle defaults to oauth tab (not service-account) — OAuth is the more common flow for personal use"
  - "BackendIcons uses text SVG elements for letter-based icons (S3, B2, G, p) — simpler than path-based glyphs for recognizable short labels at 24px"

patterns-established:
  - "AuthToggle pattern: segmented control + CSS hidden/block for always-registered dual fields"
  - "OAuthInstructions: generic collapsible guide reusable for any OAuth backend (backendName + authorizeCommand props)"
  - "IconProps = { className?: string } — minimal prop surface for SVG components"

requirements-completed: [REMOTE-04]

# Metrics
duration: 4min
completed: 2026-04-01
---

# Phase 13 Plan 02: Component Library for OAuth and Icons Summary

**Collapsible OAuthInstructions, GdriveAuthToggle dual-auth toggle, and 18-backend inline SVG icon map — all with zero external dependencies**

## Performance

- **Duration:** 4 min
- **Started:** 2026-04-01T14:24:33Z
- **Completed:** 2026-04-01T14:28:00Z
- **Tasks:** 2 (Task 1 TDD, Task 2 standard)
- **Files modified:** 4 created

## Accomplishments
- OAuthInstructions: collapsible disclosure (collapsed by default), shows backend-specific rclone authorize command in code block, 5-step generic OAuth flow, MD3 styled — TDD with 4 passing tests
- GdriveAuthToggle: two-tab segmented control (OAuth Token / Service Account) following AzureAuthToggle pattern exactly; OAuth tab embeds OAuthInstructions; both fields always registered via CSS hidden/block
- BackendIcons: inline SVG icon map covering all 18 BackendType keys, fill="currentColor" throughout, viewBox 0 0 24 24, no external icon library

## Task Commits

Each task was committed atomically:

1. **Task 1: OAuthInstructions component with tests** - `e00fc2b` (feat + test TDD)
2. **Task 2: GdriveAuthToggle and BackendIcons components** - `683faf6` (feat)

## Files Created/Modified
- `src/components/wizard/OAuthInstructions.tsx` - Collapsible OAuth step-by-step guide component
- `src/components/wizard/OAuthInstructions.test.tsx` - 4 behavior tests (collapsed default, expand on click, authorize command display, backend name in button)
- `src/components/wizard/GdriveAuthToggle.tsx` - Google Drive dual-auth toggle (OAuth Token + Service Account tabs)
- `src/components/icons/BackendIcons.tsx` - Inline SVG icon map for all 18 backends

## Decisions Made
- OAuthInstructions uses step-prefix detection to render the authorize command in a `<code>` element — the step text "Run the authorize command: ..." is matched by prefix so the command value is extracted cleanly for the code block while keeping getByText test assertions working correctly.
- BACKEND_ICONS is `Partial<Record<BackendType,...>>` so missing icons simply render nothing — plans 03/04 handle the absent-icon case in BackendCard.
- GdriveAuthToggle defaults to oauth tab since OAuth is the typical personal-use flow; service account is the secondary option.
- Letter-based SVG icons (S3, B2, G, p) use `<text>` elements for simplicity at 24px — path-based glyph construction for single characters is over-engineered.

## Deviations from Plan

None - plan executed exactly as written.

## Issues Encountered
None.

## User Setup Required
None - no external service configuration required.

## Next Phase Readiness
- OAuthInstructions ready for embedding in any OAuth backend config step
- GdriveAuthToggle ready for use in RemoteConfigStep (plan 13-04) as gdrive's auth renderer
- BACKEND_ICONS ready for BackendCard integration in BackendSelectionStep (plan 13-03)
- Full test suite (270 tests, 17 files) remains green

---
*Phase: 13-add-remaining-rclone-remotes*
*Completed: 2026-04-01*