P2: Core CRUD + Tests

[ryota-murakami]

P2: Core CRUD + Tests

全22 UIコンポーネントをRaindrop.io APIに接続。mock-dataを完全に削除しRTK Queryキャッシュに置換。

Ref: SPEC.md §4 API ↔ UI Mapping
Dependencies: P1
Scope: ~25 files modified

---

Tasks

Type Mapping Layer

• Create toUiRaindrop() — API RaindropApiResponse → UI Raindrop 型変換
• Create toUiCollection() — API CollectionApiResponse → UI Collection 型変換
• Create toUiGroup() — Collections → Groups 構築ロジック

Sidebar (Collections & Tags)

• left-sidebar.tsx: Connect useGetCollectionsQuery + useGetChildCollectionsQuery for collection tree
• left-sidebar.tsx: Connect useGetFiltersQuery for type/tag filter counts
• left-sidebar.tsx: Trash operations — useEmptyTrashMutation

Main Content (Raindrop List)

• main-content.tsx: Connect useGetRaindropsQuery with infinite scroll pagination (page, perpage=50)
• main-content.tsx: Connect sort functionality (sort query param: -created, title, domain, etc.)
• main-content.tsx: Bulk operations bar — useBatchUpdateRaindropsMutation + useBatchDeleteRaindropsMutation

Detail Panel

• right-detail-panel.tsx: Connect useGetRaindropQuery for detail display
• right-detail-panel.tsx: Connect useUpdateRaindropMutation for saving edits
• right-detail-panel.tsx: Connect useDeleteRaindropMutation for deletion

Dialogs

• add-bookmark-dialog.tsx: Connect useCreateRaindropMutation for new bookmark
• add-bookmark-dialog.tsx: Connect useSuggestNewQuery for URL metadata auto-fill
• collection-dialog.tsx: Connect useCreateCollectionMutation / useUpdateCollectionMutation
• group-dialog.tsx: Connect group create/update API calls
• tag-management.tsx: Connect useGetTagsQuery + useRenameTagMutation + useDeleteTagMutation
• merge-dialog.tsx: Connect useMergeCollectionsMutation

Cleanup

• Remove all imports of src/data/mock-data.ts from every component
• main-app.tsx: Replace ALL console.log stubs with real RTK Query mutations
• Delete src/data/mock-data.ts (or keep as test fixture only)

Unit Tests

• Raindrop CRUD tests: create → read → update → delete with MSW
• Collection CRUD tests: create → read → update → delete
• Tag operations tests: list → rename → delete

E2E Tests

• e2e/specs/auth.spec.ts: Login screen → OAuth flow → MainApp display
• e2e/specs/crud.spec.ts: Create bookmark → list → edit → delete
• Verify: pnpm test && pnpm lint && pnpm typecheck && pnpm build