Implement Mobile Sync Pairing UI

[gloomcheng]

Parent Epic

Part of #6 (Mobile Notification Sync via KDE Connect Protocol)

Objective

Design and implement the user interface for device pairing and management.

UI Components

1. Settings Page Section

┌─────────────────────────────────────────────────────────┐
│ Mobile Sync                                              │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📱 Connected Devices                                    │
│  ┌───────────────────────────────────────────────────┐  │
│  │ ✅ Pixel 8 Pro                    Connected       │  │
│  │    Last sync: 2 minutes ago       [Disconnect]    │  │
│  └───────────────────────────────────────────────────┘  │
│                                                          │
│  [+ Add Device]                                          │
│                                                          │
│  ─────────────────────────────────────────────────────  │
│                                                          │
│  App Filters                                             │
│  ┌───────────────────────────────────────────────────┐  │
│  │ ☑ LINE                                            │  │
│  │ ☑ Slack                                           │  │
│  │ ☑ Discord                                         │  │
│  │ ☐ WhatsApp (disabled)                             │  │
│  │ ☐ All other apps                                  │  │
│  └───────────────────────────────────────────────────┘  │
│                                                          │
└─────────────────────────────────────────────────────────┘

2. Pairing Dialog

┌─────────────────────────────────────────────────────────┐
│ Pair New Device                                    [×]  │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📡 Searching for devices...                             │
│                                                          │
│  Available Devices:                                      │
│  ┌───────────────────────────────────────────────────┐  │
│  │ 📱 Pixel 8 Pro                          [Pair]    │  │
│  │ 📱 Samsung Galaxy S24                   [Pair]    │  │
│  └───────────────────────────────────────────────────┘  │
│                                                          │
│  ℹ️ Make sure KDE Connect is installed on your phone   │
│     and both devices are on the same network.           │
│                                                          │
│                                         [Cancel]         │
└─────────────────────────────────────────────────────────┘

3. Pairing Confirmation

┌─────────────────────────────────────────────────────────┐
│ Pairing Request                                    [×]  │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📱 Pixel 8 Pro wants to pair                           │
│                                                          │
│  Please confirm on your phone as well.                  │
│                                                          │
│                              [Reject]  [Accept]          │
└─────────────────────────────────────────────────────────┘

Design Principles

Following inboxd design philosophy:

• Calm Technology: Subtle animations instead of exclamation marks
• Glassmorphism: Frosted glass effects
• Minimal: Show only necessary information

Files to Create

renderer/src/components/settings/
├── MobileSyncSettings.tsx      # Main settings section
├── DeviceList.tsx              # Connected devices
├── PairingDialog.tsx           # Pairing flow
└── AppFilterList.tsx           # App selection

renderer/src/hooks/
└── useMobileSync.ts            # State management

IPC Handlers

// New IPC channels
'mobile-sync:list-devices'
'mobile-sync:start-discovery'
'mobile-sync:pair-device'
'mobile-sync:unpair-device'
'mobile-sync:get-app-filters'
'mobile-sync:set-app-filters'

Tasks

• Design mockups (Figma or code)
• Create MobileSyncSettings.tsx
• Create DeviceList.tsx
• Create PairingDialog.tsx
• Create AppFilterList.tsx
• Create useMobileSync.ts hook
• Add IPC handlers
• Add i18n translations (en, ja, zh-TW)
• Write component tests

Acceptance Criteria

• Can view connected devices
• Can initiate pairing from UI
• Pairing confirmation dialog works
• Can disconnect devices
• Can filter which apps sync
• Responsive design
• Dark mode support

Estimated Effort

~1 week