Skip to content

fix: use compact datetime rows with edit affordance for date range#592

Open
tykeal wants to merge 6 commits intoFutureTense:mainfrom
tykeal:fix-datetime-layout
Open

fix: use compact datetime rows with edit affordance for date range#592
tykeal wants to merge 6 commits intoFutureTense:mainfrom
tykeal:fix-datetime-layout

Conversation

@tykeal
Copy link
Copy Markdown
Collaborator

@tykeal tykeal commented Apr 3, 2026

Summary

Replace the default datetime entity rows for date range start/end with a lightweight custom Lovelace row component that displays the datetime value as text with a pencil icon (✏️) indicating editability. Tapping opens HA's native more-info dialog which correctly handles timezone conversion, 12/24h locale formatting, and date/time editing across all platforms including the companion app.

Changes

New files

  • lovelace_strategy/datetime-row.ts — Custom keymaster-datetime-row Lit element that wraps hui-generic-entity-row for layout, displays formatted local-time state text, and shows a pencil icon edit affordance
  • lovelace_strategy/datetime-row.test.ts — Tests for the custom row component

Modified files

  • custom_components/keymaster/lovelace.py — Date range datetime entities use custom:keymaster-datetime-row type with tap_action: more-info for non-parent views; parent views use simple-entity with tap_action: none (read-only). Added tap_action parameter to entity config generators.
  • lovelace_strategy/main.ts — Register the new custom element
  • tests/test_lovelace.py — Updated assertions for new entity row types and tap actions
  • custom_components/keymaster/www/generated/keymaster.js — Rebuilt frontend bundle

How it works

  • Non-parent views: custom:keymaster-datetime-row shows icon + name + datetime text + ✏️ pencil. Tap → more-info dialog for editing.
  • Parent views (child lock following parent): simple-entity shows read-only text, no pencil, no edit tap action.
  • Override: When a child slot has override enabled, it shows its own editable datetime rows with the pencil affordance.

Testing

  • 10+ TypeScript tests for the custom row component
  • 31 Python tests for Lovelace card generation
  • Manually tested on desktop and companion app

Closes #591

@github-actions github-actions bot added the bugfix Fixes a bug label Apr 3, 2026
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 3, 2026

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.91%. Comparing base (cdb4922) to head (628a608).
⚠️ Report is 75 commits behind head on main.
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #592      +/-   ##
==========================================
+ Coverage   84.14%   89.91%   +5.76%     
==========================================
  Files          10       36      +26     
  Lines         801     3629    +2828     
  Branches        0       56      +56     
==========================================
+ Hits          674     3263    +2589     
- Misses        127      366     +239     
Flag Coverage Δ
python 89.97% <100.00%> (?)
typescript 88.53% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@tykeal
Copy link
Copy Markdown
Collaborator Author

tykeal commented Apr 3, 2026

@copilot /review

@tykeal tykeal force-pushed the fix-datetime-layout branch from 57b1ab7 to 5f2c1c2 Compare April 3, 2026 17:53
@tykeal tykeal requested review from Copilot and removed request for Copilot April 3, 2026 17:53
Replace the default datetime entity rows for date range start/end
with a lightweight custom Lovelace row component that displays the
datetime value as text with a pencil icon indicating editability.
Tapping opens HA's native more-info dialog which correctly handles
timezone conversion, 12/24h locale formatting, and date/time editing
across all platforms including the companion app.

The custom row delegates layout to hui-generic-entity-row for perfect
alignment with standard entity rows. Parent-view (child locks
following a parent) datetime rows use simple-entity with no edit
affordance since values are controlled by the parent.

Closes FutureTense#591

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Andrew Grimberg <tykeal@bardicgrove.org>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a compact, custom Lovelace entity-row for Keymaster date-range start/end datetime entities to prevent the default datetime row UI from overflowing, while still allowing editing via Home Assistant’s native more-info dialog.

Changes:

  • Added a keymaster-datetime-row custom entity row (with pencil affordance) and registered it in the Lovelace strategy bundle.
  • Updated Lovelace view generation so date-range start/end use custom:keymaster-datetime-row with tap_action: more-info (non-parent) and simple-entity with tap_action: none (parent/read-only).
  • Updated Python and TypeScript tests to validate the new row type and element registrations.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
lovelace_strategy/datetime-row.ts New Lit-based custom datetime entity row (text display + pencil icon).
lovelace_strategy/datetime-row.test.ts Unit tests for the new custom row component.
lovelace_strategy/main.ts Registers the new keymaster-datetime-row custom element.
lovelace_strategy/main.test.ts Updates element registration tests to include the new custom row.
custom_components/keymaster/lovelace.py Switches date-range entities to the new row (editable) vs simple-entity (read-only) and threads tap_action through config generators.
tests/test_lovelace.py Updates assertions for new row types and tap actions in generated Lovelace config.
custom_components/keymaster/www/generated/keymaster.js Rebuilt frontend bundle including the new custom row.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Use Intl.DateTimeFormat with HA locale settings for 12/24h and
  date format preferences instead of hard-coded YYYY-MM-DD HH:mm
- Add HALocaleData interface to type stubs for locale support
- Use explicit 'is not None' check for tap_action parameter
- Rename misleading test to match actual assertion intent
- Tighten parent datetime rows assertion from >= 2 to == 2
- Add tests for 12-hour and 24-hour locale formatting

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Andrew Grimberg <tykeal@bardicgrove.org>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 4 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Add locale change detection to shouldUpdate so 12/24h preference
  changes trigger a re-render
- Fix docstring to accurately describe Intl.DateTimeFormat usage
- Update main.test.ts comments from 'six' to 'seven' elements

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Andrew Grimberg <tykeal@bardicgrove.org>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Honor HA's locale.date_format (DMY/MDY/YMD) preference when
  formatting datetime display
- Add explicit hass-more-info event dispatch on tap for robust
  action handling
- Include date_format in shouldUpdate locale change detection
- Remove ICU-dependent AM/PM regex assertions in favor of exact
  match with expectedFormat helper
- Add tests for DMY/MDY/YMD formatting and action dispatching

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Andrew Grimberg <tykeal@bardicgrove.org>
@tykeal tykeal requested a review from Copilot April 3, 2026 18:47
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Only render pencil icon when tap_action is more-info (editable)
- Remove unused hold_action and double_tap_action from config interface
- Add tests for pencil visibility based on editability

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Andrew Grimberg <tykeal@bardicgrove.org>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 1 comment.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated no new comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@tykeal tykeal force-pushed the fix-datetime-layout branch from acc1567 to 70d311d Compare April 3, 2026 22:18
Use Intl.DateTimeFormat.formatToParts() to extract locale-formatted
year/month/day values before reordering, ensuring non-Latin numeral
systems are handled correctly when date_format is overridden.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Andrew Grimberg <tykeal@bardicgrove.org>
@tykeal tykeal force-pushed the fix-datetime-layout branch from 70d311d to 628a608 Compare April 4, 2026 04:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bugfix Fixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ISSUE: Date/Time box UI

3 participants