feat: mobile UX for port interaction

[ggfevans]

Parent Epic

Part of #71 (Network Interface Visualization and Connectivity)

Summary

Design and implement mobile-optimized UX for interacting with ports and connections.

Challenges

• Port indicators too small for accurate touch (6px diameter)
• No hover state on touch devices
• High-density devices unusable on mobile
• Connection creation needs different flow

Solutions to Implement

1. Grouped Port View (Always on Mobile)

Force grouped badge view instead of individual ports:

• Tap badge → expand to port list in bottom sheet
• Select port from list

2. Port Details Bottom Sheet

┌─────────────────────────────────┐
│ ≡ GigabitEthernet1/0/1          │
│   Type: 1000BASE-T              │
│   PoE: 802.3at                  │
│                                 │
│ ○ Not connected                 │
│                                 │
│ [Connect to...] [Edit] [Close]  │
└─────────────────────────────────┘

3. Port Selection via List

When connecting, show device/port list instead of tap-on-canvas:

• Device picker (searchable)
• Port picker for selected device
• Confirm connection

4. Zoom-to-Select

Allow pinch-zoom to enlarge device, then tap port.
Enable individual port targets when zoom > 2x.

Acceptance Criteria

• Grouped view default on mobile
• Port list accessible via tap
• Bottom sheet for port details
• Connection via picker flow
• 44px minimum touch targets
• Long-press for additional options
• Haptic feedback

Dependencies

• feat: PortIndicators SVG component #249 (PortIndicators component)
• feat: connection creation workflow (mobile) #264 (Connection creation mobile)

References

• Mobile viewport store: src/lib/utils/viewport.svelte.ts
• Existing mobile patterns in Rackula