docs(13): create phase plan for backend expansion

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>
2026-04-01 15:58:51 +02:00
parent fac90462f7
commit 4bf3f1e45f
6 changed files with 1019 additions and 30 deletions
@@ -0,0 +1,193 @@
+---
+phase: 13-add-remaining-rclone-remotes
+plan: 02
+type: execute
+wave: 2
+depends_on: [13-01]
+files_modified:
+  - src/components/wizard/OAuthInstructions.tsx
+  - src/components/wizard/OAuthInstructions.test.tsx
+  - src/components/wizard/GdriveAuthToggle.tsx
+  - src/components/icons/BackendIcons.tsx
+autonomous: true
+requirements: [REMOTE-04]
+
+must_haves:
+  truths:
+    - "OAuthInstructions renders collapsed by default and expands on click"
+    - "OAuthInstructions shows backend-specific rclone authorize command"
+    - "GdriveAuthToggle switches between OAuth Token and Service Account tabs"
+    - "Backend icons are inline SVGs with no external dependency"
+  artifacts:
+    - path: "src/components/wizard/OAuthInstructions.tsx"
+      provides: "Collapsible OAuth step-by-step guide"
+      exports: ["OAuthInstructions"]
+    - path: "src/components/wizard/GdriveAuthToggle.tsx"
+      provides: "Google Drive dual-auth toggle (OAuth vs Service Account)"
+      exports: ["GdriveAuthToggle"]
+    - path: "src/components/icons/BackendIcons.tsx"
+      provides: "Inline SVG icon map keyed by BackendType"
+      exports: ["BACKEND_ICONS"]
+    - path: "src/components/wizard/OAuthInstructions.test.tsx"
+      provides: "Tests for collapsed/expanded behavior"
+  key_links:
+    - from: "src/components/wizard/GdriveAuthToggle.tsx"
+      to: "src/components/wizard/OAuthInstructions.tsx"
+      via: "import and render"
+      pattern: "OAuthInstructions"
+    - from: "src/components/icons/BackendIcons.tsx"
+      to: "src/schemas/registry.ts"
+      via: "BackendType key mapping"
+      pattern: "Record.*BackendType"
+---
+
+<objective>
+Build the three new components needed by Phase 13: OAuthInstructions (collapsible guide for OAuth token-paste backends), GdriveAuthToggle (dual-auth toggle for Google Drive), and BackendIcons (inline SVG icon map).
+
+Purpose: These components are consumed by plans 03 (BackendSelectionStep) and 04 (RemoteConfigStep). Building them in isolation ensures clean interfaces and testability.
+Output: Three new component files with tests for OAuthInstructions.
+</objective>
+
+<execution_context>
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/phases/13-add-remaining-rclone-remotes/13-CONTEXT.md
+@.planning/phases/13-add-remaining-rclone-remotes/13-RESEARCH.md
+@.planning/phases/13-add-remaining-rclone-remotes/13-01-SUMMARY.md
+
+<interfaces>
+<!-- Existing patterns to follow -->
+
+From src/components/wizard/AzureAuthToggle.tsx (AuthToggle pattern):
+```typescript
+interface AzureAuthToggleProps {
+  register: UseFormRegister<any>;
+  errors: {
+    key?: FieldError;
+    sas_url?: FieldError;
+  };
+}
+// Uses useState for tab, segmented control buttons, CSS hidden/block for inactive/active
+```
+
+From src/components/ui/PasswordField.tsx (used for token fields):
+```typescript
+// PasswordField wraps TextFieldMD3 with show/hide toggle
+// Used for all password/token inputs
+```
+
+From src/components/ui/BackendCard.tsx (icon will be added here):
+```typescript
+interface BackendCardProps {
+  name: string;
+  description: string;
+  selected?: boolean;
+  onClick: () => void;
+}
+```
+
+MD3 styling tokens used throughout:
+- bg-surface, bg-surface-container, bg-primary
+- text-on-surface, text-on-surface-variant, text-on-primary
+- border-outline, rounded-xl, shadow
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto" tdd="true">
+  <name>Task 1: OAuthInstructions component with tests</name>
+  <files>src/components/wizard/OAuthInstructions.tsx, src/components/wizard/OAuthInstructions.test.tsx</files>
+  <behavior>
+    - Test 1: Renders collapsed by default (instructions not visible)
+    - Test 2: Expands when user clicks the toggle button, showing numbered steps
+    - Test 3: Shows the backend-specific `authorizeCommand` in the expanded content
+    - Test 4: Shows backend name in the toggle button text
+  </behavior>
+  <action>
+Create OAuthInstructions component with these props:
+```typescript
+interface OAuthInstructionsProps {
+  backendName: string;       // e.g. "Google Drive"
+  authorizeCommand: string;  // e.g. 'rclone authorize "drive"'
+  steps?: string[];          // optional custom steps (defaults to generic OAuth flow)
+}
+```
+
+Implementation:
+- Use `useState(false)` for expanded state
+- Render a button/disclosure that reads "How to get your OAuth token" (or similar with backendName)
+- When expanded, show numbered steps: (1) Install rclone on a machine with a browser, (2) Run the authorize command (show in a code block), (3) Authenticate in the browser, (4) Copy the JSON token from terminal, (5) Paste it in the field above
+- Use `steps` prop to override default steps if provided
+- Style with MD3 tokens: bg-surface-container, text-on-surface, border-outline, rounded-xl
+- Use an expand/collapse chevron icon (inline SVG, simple caret)
+- Collapse transition is optional (CSS-only if added)
+
+Write tests first (RED), then implement (GREEN).
+  </action>
+  <verify>
+    <automated>npx vitest run src/components/wizard/OAuthInstructions.test.tsx --reporter=verbose</automated>
+  </verify>
+  <done>OAuthInstructions renders collapsed by default, expands on click, shows backend-specific command and steps. All 4 tests pass.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: GdriveAuthToggle and BackendIcons components</name>
+  <files>src/components/wizard/GdriveAuthToggle.tsx, src/components/icons/BackendIcons.tsx</files>
+  <action>
+1. Create GdriveAuthToggle following the exact same pattern as AzureAuthToggle:
+```typescript
+interface GdriveAuthToggleProps {
+  register: UseFormRegister<any>;
+  errors: {
+    token?: FieldError;
+    service_account_credentials?: FieldError;
+  };
+}
+```
+   - Two tabs: "OAuth Token" and "Service Account"
+   - Tab 1 (OAuth Token): OAuthInstructions component (backendName="Google Drive", authorizeCommand='rclone authorize "drive"') + PasswordField for token
+   - Tab 2 (Service Account): PasswordField for service_account_credentials with helpText about JSON key file
+   - Both fields always registered (CSS hidden/block), same as Azure/SFTP pattern
+   - Use same segmented control styling as AzureAuthToggle
+
+2. Create BackendIcons.tsx with inline SVG icons for all 17 backends:
+   - Export `BACKEND_ICONS: Partial<Record<BackendType, React.FC<IconProps>>>` where `IconProps = { className?: string }`
+   - Each icon is a simple monochrome SVG using `fill="currentColor"` for MD3 dark mode compatibility
+   - Icons should be recognizable at 24x24px size (viewBox="0 0 24 24")
+   - Use simplified/stylized versions of brand icons (cloud shape for generic cloud storage, drive icon for Google Drive, folder for file-based, server for protocol-based, etc.)
+   - For backends where a distinctive icon is hard to create (swift, seafile), use a generic category icon (cloud, server, globe)
+   - The icon map is Partial — missing entries just mean no icon rendered on the card
+
+Create the icons directory: src/components/icons/
+  </action>
+  <verify>
+    <automated>npx tsc --noEmit 2>&1 | tail -20 && npx vitest run src/components/wizard/ --reporter=verbose 2>&1 | tail -30</automated>
+  </verify>
+  <done>GdriveAuthToggle renders two-tab auth toggle with OAuthInstructions in OAuth tab. BackendIcons exports BACKEND_ICONS map with inline SVG icons for backends. TypeScript compiles, existing tests pass.</done>
+</task>
+
+</tasks>
+
+<verification>
+- `npx vitest run` — full suite green
+- `npx tsc --noEmit` — no type errors
+- OAuthInstructions test file passes all 4 behavior tests
+- GdriveAuthToggle follows AzureAuthToggle pattern exactly
+</verification>
+
+<success_criteria>
+- OAuthInstructions component: collapsed by default, expands on click, shows authorize command
+- GdriveAuthToggle: two-tab toggle (OAuth Token + Service Account), both fields always registered
+- BackendIcons: inline SVG map keyed by BackendType, monochrome, no external dependency
+- All tests pass
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/13-add-remaining-rclone-remotes/13-02-SUMMARY.md`
+</output>