Skip to content

Redesign integration card and remove double navigation#52828

Open
pcan08 wants to merge 12 commits into
home-assistant:devfrom
pcan08:revamp-integration-card
Open

Redesign integration card and remove double navigation#52828
pcan08 wants to merge 12 commits into
home-assistant:devfrom
pcan08:revamp-integration-card

Conversation

@pcan08

@pcan08 pcan08 commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Proposed change

Redesign the integration card to align with the apps card visual style for UI consistency, and remove the redundant double-navigation.

Previously, clicking the card header navigated to the integration detail page, while clicking the device/entity count badge navigated to the devices or entities panel with a URL filter. Both destinations ultimately showed a similar list, IMO the two distinct click targets were redundant.

This PR:

  • Aligns the card visual style with the apps card (logo, title, footer separator, spacing)
  • Consolidates navigation: the entire card is now a single clickable area that navigates to the integration detail page
  • Removes the navigation chevron (no longer needed with a single action I guess), similar to the App card
  • Improve CSS using spacing tokens

Screenshots

Before/After

Capture d’écran du 2026-06-24 05-47-36

App and Integration card comparison (sorry i miss images for app card in dev env)

Capture d’écran du 2026-06-24 05-48-40

Type of change

  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Additional information

Checklist

  • I understand the code I am submitting and can explain how it works.
  • The code change is tested and works locally.
  • There is no commented out code in this PR.
  • I have followed the perfect PR recommendations
  • Any generated code has been carefully reviewed for correctness and compliance with project standards.

If user exposed functionality or configuration variables are added/changed:

To help with the load of incoming pull requests:

@pcan08 pcan08 changed the title Revamp integration card and remove double navigation Redesign integration card and remove double navigation Jun 24, 2026
@bramkragten bramkragten added the Needs UX Items requiring a review from the Home Assistant design team label Jun 24, 2026
pcan08 and others added 10 commits June 26, 2026 15:51
Replace ha-button navigation links with a plain count badge, remove the
ha-icon-next chevron, make the entire card clickable on all content, and match the apps card hover/separator/spacing patterns.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Move footer rendering logic (count badge, custom/cloud/yaml icons) and
their computations into a dedicated component, mirroring the
ha-integration-header split.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@pcan08
pcan08 force-pushed the revamp-integration-card branch 2 times, most recently from a50ef4d to d473b78 Compare July 3, 2026 06:42
@pcan08
pcan08 force-pushed the revamp-integration-card branch from d473b78 to ccafb78 Compare July 3, 2026 06:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cla-signed Needs UX Items requiring a review from the Home Assistant design team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants