Skip to content

feat: port details panel in EditPanel #256

@ggfevans

Description

@ggfevans

Parent Epic

Part of #71 (Network Interface Visualization and Connectivity)

Summary

When a port is clicked, show its details in the EditPanel sidebar.

Acceptance Criteria

  • Add "Port Details" section to EditPanel when port is selected
  • Display port name, type, label
  • Display PoE information if applicable
  • Display management-only flag
  • Show connection info (future: which device/port connected to)
  • Allow editing port properties (name, label)
  • "Deselect port" returns to device details

UI Design

┌─────────────────────────┐
│ ◄ Back to Device        │
├─────────────────────────┤
│ Port: GigabitEthernet0/1│
│                         │
│ Type: 1000BASE-T        │
│ Label: [___________]    │
│ ☐ Management only       │
│                         │
│ PoE: PSE (802.3at)      │
│                         │
│ Connection:             │
│ ○ Not connected         │
│ [Connect to...]         │
└─────────────────────────┘

State Management

  • Add selectedPort to layout store or canvas store
  • Clear on device deselect
  • Clear on escape key

Dependencies

References

  • EditPanel: src/lib/components/EditPanel.svelte

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions