Task #192: Show row color + merge range previews in row-actions kebab menu
Original task: The Executive Meetings row-actions kebab menu has three sub-views
(delete, color, merge). Users couldn't tell at a glance which colour or merge
range a row already had — they had to drill into the sub-view first. Add subtle
inline indicators to the main menu so the current state is visible without
extra clicks.
Implementation:
- artifacts/tx-os/src/pages/executive-meetings.tsx
• RowActionsMenu now renders an inline circular swatch next to the "Row
color" item, reflecting the row's saved colour. "default" shows a hatched
pattern matching the swatch picker; other keys show the saved tint.
Decorative (aria-hidden) since the swatch sub-view is the actual control.
Carries data-testid="em-row-color-indicator-{id}" plus a data-color-key
attribute for stable, language-agnostic tests.
• Renders a "Merged: <cols>" badge next to the "Merge cells" item only when
the row has a stored merge. Column names come from the canonical merge
order (number, meeting, attendees, time) and are localized via the
existing executiveMeetings.col.{id} keys.
• New mergeColumnLabels prop is computed in MeetingRow against
CANONICAL_MERGE_ORDER (not visibleColumns) so the badge still describes
the full saved range when a boundary column is hidden. Threaded into
both call sites — the first-visible-cell anchor and the merged-cell
anchor.
• Widened the local t prop type to (k, opts?) so the badge can use the
{{cols}} interpolation template.
- artifacts/tx-os/src/locales/en.json + ar.json
• Added executiveMeetings.merge.activeBadge ("Merged: {{cols}}" /
"مدموج: {{cols}}").
Tests:
- Added artifacts/tx-os/tests/executive-meetings-row-actions-previews.spec.mjs
with two specs:
1. Row-color indicator updates from "default" → "red" → "default" via the
sub-view picker, and the dot's computed background tracks the saved
colour (#fee2e2 → rgb(254,226,226)).
2. Plain rows render no merge badge; merged rows render the badge with
text "<MeetingColLabel> + <AttendeesColLabel>". Column labels are
resolved from the live header DOM so the assertion works in both
English and Arabic (admin's preferredLanguage overrides the
tx-lang=en init seed after login).
Both pass; existing executive-meetings-row-actions-menu.spec.mjs and
executive-meetings-merge.spec.mjs continue to pass (5/5 regression).
Notable subtleties:
- A first attempt at the merge spec hit a flake where Escape-then-force-click
on the next row's kebab landed on the previous popover's Delete item
(which was still mounted), triggering a stray confirm dialog. Added an
explicit waitFor on the previous popover's unmount before opening the
next one.
Follow-up proposed: #276 (next_steps) — show the same cues directly on the
row itself, not only inside the kebab popover.
Replit-Task-Id: 7ff92dcd-f4bd-421d-93c8-4d7d3dbe0077
This commit is contained in:
@@ -1118,7 +1118,8 @@
|
||||
"meetingAttendees": "دمج الاجتماع + الحضور",
|
||||
"meetingTime": "دمج الاجتماع + الحضور + الوقت",
|
||||
"all": "دمج الصف بالكامل",
|
||||
"unmerge": "إلغاء الدمج"
|
||||
"unmerge": "إلغاء الدمج",
|
||||
"activeBadge": "مدموج: {{cols}}"
|
||||
},
|
||||
"nav": {
|
||||
"schedule": "جدول الاجتماعات اليومي",
|
||||
|
||||
Reference in New Issue
Block a user