Skip to content

Settings: multi-bridge Bridges list should match single-bridge Connection card styling #96

@tashda

Description

@tashda

Description

When only one bridge is connected, the Connection card on Settings has a polished look: a tinted, rounded-square icon (using the bridge's assigned color) on the left, the bridge name as the primary label, "Connected" underneath, and a chevron on the right.

When two or more bridges are connected, the Bridges section in Settings switches to a list of rows with a small colored status dot, the URL underneath the name, an enable toggle, and a chevron — visually quite different from the single-bridge card. The colored bridge icon (which already exists per-bridge via `DesignTokens.Bridge`) is missing entirely.

The two views should feel like the same design language. The multi-bridge rows should adopt the single-bridge card's tinted icon treatment.

Expected

Each row in the Bridges list shows:

  • The bridge's tinted, rounded-square connection icon (matching the single-bridge "Connection" card; uses the per-bridge color from `DesignTokens.Bridge`).
  • Bridge display name as the primary label.
  • Connection status ("Connected" / "Disconnected" / "Connecting…") as the secondary label, instead of the URL — the URL is already shown on the bridge's detail page.
  • The existing per-bridge enable toggle and chevron remain.

The status dot becomes redundant once the icon is colored and the status text is present, so it can be dropped.

Actual

Multi-bridge rows use a plain text layout with a status dot + URL subtitle, while the single-bridge view uses a tinted icon card. The two designs feel inconsistent.

Screenshots

(to be attached on github.com — current multi-bridge Bridges section, current single-bridge Connection card for two different bridges showing the per-bridge icon color)

Files (likely)

  • `Shellbee/Features/Settings/SavedBridgesView.swift` — row layout
  • `Shellbee/Shared/Components/BridgeConnectionCardLabel.swift` (or equivalent) — already used by the single-bridge card; reuse here
  • `Shellbee/Core/DesignTokens/DesignTokens+Bridge.swift` — per-bridge color palette (already exists)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions