Skip to content

feat: compact display mode with tap actions#30

Merged
KadenThomp36 merged 1 commit into
mainfrom
feat/compact-mode
May 13, 2026
Merged

feat: compact display mode with tap actions#30
KadenThomp36 merged 1 commit into
mainfrom
feat/compact-mode

Conversation

@KadenThomp36
Copy link
Copy Markdown
Owner

Closes #20.

Summary

Adds a `display: compact` config option that renders just the title + overall status badge in a smaller card, with optional standard HA tap actions to navigate elsewhere on click.

Use case from the issue: a dashboard overview page that shows a single "All Good" indicator that taps through to the full air quality dashboard.

HA-native approach

Tap actions follow HA's documented pattern for custom cards — dispatch a `hass-action` CustomEvent with `{ config, action: 'tap' | 'hold' | 'double_tap' }`. HA's frontend handles the rest (navigate, more-info, call-service, etc.).

The editor uses the standard `ui_action` selector for each action field, giving users the same picker they see in every other HA card.

Implementation

  • New `_renderCompact()` renders a much smaller DOM: just the title + status badge in a clickable card
  • `set hass` skips `_loadHistory` in compact mode (no graphs → no fetch needed → faster initial render on overview dashboards)
  • `_updateStates` early-returns after the badge update in compact mode
  • Hold detection uses a 500ms timer; tap is suppressed when a hold fires
  • `getCardSize` returns 1 for compact (one row), full size for full mode

Test plan

  • `node test.js` — 216 passed, 0 failed (10 new: `_isCompact` flag, `getCardSize` returns 1, `_fireAction` dispatches `hass-action` only when the action is configured, no-op behavior for missing actions)
  • Manual smoke test: add a compact card with `tap_action: { action: navigate, navigation_path: /air-quality }` → confirm the card is clickable and navigates correctly
  • Manual smoke test: the status badge updates live when sensor values change
  • Visual editor: open the editor for a compact card → confirm the display dropdown shows both options and the tap_action picker works

YAML example

```yaml
type: custom:air-quality-card
name: Air Quality
co2_entity: sensor.air_quality_co2
pm25_entity: sensor.air_quality_pm25
display: compact
tap_action:
action: navigate
navigation_path: /lovelace/air-quality
```

Notes for maintainer

@KadenThomp36 KadenThomp36 merged commit 2c8ced1 into main May 13, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Air Quality overview card

1 participant