kawa/Ready2Blob
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity
Files
02a696c05f9f6a8d7681d287efa4d0fb3fed260e
Ready2Blob/.planning/phases/13-add-remaining-rclone-remotes/13-02-SUMMARY.md
T
kawaandClaude Sonnet 4.6 a26608791f 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

5.2 KiB
Raw Blame History

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, patterns-established, requirements-completed, duration, completed
phase plan subsystem tags requires provides affects tech-stack key-files key-decisions patterns-established requirements-completed duration completed
13-add-remaining-rclone-remotes 02 ui
react
tailwind
svg
rclone
oauth
wizard
components
phase provides
13-add-remaining-rclone-remotes BackendType derived from BACKEND_REGISTRY (18 backends), registry as const pattern
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
13-03-BackendSelectionStep
13-04-RemoteConfigStep
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
created modified
src/components/wizard/OAuthInstructions.tsx
src/components/wizard/OAuthInstructions.test.tsx
src/components/wizard/GdriveAuthToggle.tsx
src/components/icons/BackendIcons.tsx
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
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
REMOTE-04
4min 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

Reference in New Issue View Git Blame Copy Permalink