feat(mobile): add card picker sheet with QR card switching persistence

[rohtheroos-84]

Summary

This PR adds a reusable bottom-sheet card picker in the mobile app and wires a Scan-screen “Switch Card” flow that updates the QR code and persists the last selected card. It also updates the mobile test setup to handle new native deps and fixes two screens with broken imports so the app/test suite runs cleanly.

Closes #34

---

Type of Change

• Bug fix
• New feature
• Refactor (no functional change)
• UI / Design change
• Tests only
• Documentation
• Infrastructure / DevOps
• Security

---

What Changed

• Added CardPickerSheet bottom sheet component and integrated it into ScanScreen with QR switching and AsyncStorage persistence (CardPickerSheet.tsx, ScanScreen.tsx).
• Wired bottom sheet prerequisites in the app including gesture handler, reanimated setup, providers, and added required mobile dependencies (index.js, App.tsx, babel.config.js, package.json).
• Added tests for CardPickerSheet and updated Jest setup/mocks to support RN ESM dependencies. Fixed broken imports and API helpers in ConnectPlatformsScreen.tsx and ViewsScreen.tsx to prevent runtime/test crashes (CardPickerSheet.test.tsx, jest.config.js, jest.setup.js).

---

How to Test

1. Run:

   pnpm install

2. Run tests:

   pnpm --filter @devcard/mobile test

3. Verify mobile app flow:

   • Open Scan screen
   • Tap “Switch Card”
   • Select another card and verify QR updates
   • Relaunch app and verify last selected card persists
   • With only one card, verify picker shows:
     "Create another card in Cards tab"

---

Checklist

• My code follows the project's coding style (pnpm -r run lint passes).
• TypeScript compiles without errors (pnpm -r run typecheck).
• I have added or updated tests for the changes I made.
• All tests pass locally (pnpm -r run test).
• I have updated documentation where necessary.
• No new console.log or debug statements left in the code.
• Breaking changes are documented in this PR description.

---

Screenshots

All Tests passing:

---

Additional Context

• QR currently encodes /devcard/{id}?card={id} to avoid requiring web/backend changes.
• If /u/{username}?card={id} support is preferred later, it can be added separately.
• Jest setup includes mocks for React Native ESM dependencies introduced by this change.
• Lint/typecheck may still fail due to pre-existing issues outside this PR scope.

[Copilot]

Pull request overview

Adds a reusable card-picker bottom sheet to the mobile app, integrates it into ScanScreen to switch the displayed QR card, and persists the last selected card across sessions. Also updates RN app bootstrap and Jest setup to support new native dependencies, plus fixes broken imports / API usage in a couple of screens so the mobile app/tests run cleanly.

Changes:

• Introduced CardPickerSheet bottom-sheet UI and added unit tests for rendering/selection.
• Updated ScanScreen to fetch cards, switch QR payload by selected card, and persist the last selection via AsyncStorage.
• Added required RN setup/deps for bottom-sheet (gesture-handler, reanimated) and adjusted Jest config/mocks to support these deps.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks newly added mobile dependencies (bottom sheet, async storage, gesture handler, reanimated, typings).
apps/mobile/src/components/CardPickerSheet.tsx	New reusable bottom-sheet card picker component.
apps/mobile/src/screens/ScanScreen.tsx	Fetches cards, shows share QR section, opens picker, persists selected card id.
apps/mobile/src/screens/ViewsScreen.tsx	Fixes imports/auth usage and switches to direct fetch with token.
apps/mobile/src/screens/ConnectPlatformsScreen.tsx	Fixes imports/auth usage and switches to direct fetch with token.
apps/mobile/package.json	Adds bottom sheet + async storage + gesture handler + reanimated deps and vector-icons types.
apps/mobile/jest.setup.js	Adds mocks/setup for bottom-sheet, reanimated, gesture-handler, async storage, etc.
apps/mobile/jest.config.js	Wires Jest setup file and adjusts transforms for RN/@gorhom modules.
apps/mobile/index.js	Imports react-native-gesture-handler at entry for proper initialization.
apps/mobile/babel.config.js	Adds react-native-reanimated/plugin required by Reanimated.
apps/mobile/App.tsx	Wraps app with GestureHandlerRootView + BottomSheetModalProvider.
apps/mobile/tests/CardPickerSheet.test.tsx	Adds tests for picker rendering, selection callback, and single-card empty state.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.