feat: port display in image mode

[ggfevans]

Parent Epic

Part of #71 (Network Interface Visualization and Connectivity)

Summary

Define and implement how port indicators behave when device is in image display mode.

Problem Statement

When displayMode: 'image', the device shows a photograph. Port indicators need a strategy:

• Overlay on image may obscure important details
• Below image increases device height
• Hidden loses functionality

Options to Evaluate

1. Overlay at bottom - Semi-transparent bar with ports
2. Overlay on hover - Ports appear when hovering device
3. Separate row below - Ports outside device bounds
4. Hide in image mode - Only show in label mode
5. Hotspot mapping - Clickable regions mapped to actual port positions in photo

Acceptance Criteria

• Research and select approach (document decision)
• Implement chosen approach
• Ensure ports remain clickable
• Test with various device images
• Consider accessibility (ports visible without hover for keyboard users)

Considerations

• Device images vary widely in content
• Some images may already show ports clearly
• Need consistency across different device types

Dependencies

• feat: integrate PortIndicators into RackDevice #250 (PortIndicators integrated)

References

• RackDevice image mode: src/lib/components/RackDevice.svelte lines 264-307