Skip to content

feat(notifications): show Clear all and Settings as icons in the history - #1107

Merged
pascalandr merged 2 commits into
devfrom
feat/notification-history-icons
Oct 23, 2026
Merged

pascalandr merged 2 commits into
devfrom
feat/notification-history-icons

Conversation

@pascalandr

Copy link
Copy Markdown
Contributor

Summary

  • The notification history's Clear all and Settings text buttons become icon buttons (red trash can, gear), like the panel's close button.
  • Their labels stay as tooltips (title) and accessible names (aria-label), with the existing translations. Mark all as read keeps its text.
  • Shared window-icon-button geometry; the existing toast-history action classes keep hover, danger and disabled styling.

Validation

  • Screenshots of the real ToastHistoryPanel with two notifications, dark and light themes, including the hover state.
  • npm run typecheck --workspace @codenomad/ui.

@pascalandr

Copy link
Copy Markdown
Contributor Author

Findings

  • P3 — Update the affected help for the icon-only Settings control. docs/help/en/settings.md:5 (and the corresponding line in the other nine locales) documents the notification-history Settings shortcut. This PR changes that documented control from visible text to a gear with a tooltip (packages/ui/src/components/toast-history-panel.tsx:259-266), but its only changed file is the component. AGENTS.md requires affected help updates in the same PR for changes to controls. Fix: identify the notification-history Settings gear and its translated tooltip in the English opening-settings instruction, then update the matching instruction in fr, de, es, he, ja, ne, ru, tr, and zh-Hans using their existing UI labels.

No functional findings. Accessible names and tooltips reuse existing translations; icons are hidden from assistive technology and render at the shared 14px size. Opening still focuses Close, followed by Mark all read, Clear all, and Settings. The shared/local stylesheet order preserves the idle danger color and visible keyboard focus; hover text becoming the primary color also occurs with the existing text-button styling. Searches found no tests, skills, or developer documentation depending on the removed text content.

Validation

  • npm run typecheck in packages/ui: passed.
  • node --import tsx --test --test-concurrency=1 tests/browser/notification-icon-badge.test.ts tests/browser/tab-chrome.test.ts: 16 passed, 0 failed, 1 Electron-only test skipped.
  • Additional headless check using the real InstanceTabs/ToastHistoryPanel, existing fixture, and full application CSS in classic/light palettes: translated accessible names/tooltips, 14px icons, initial focus, Tab order, focus-visible outlines, mark-read disabled state, keyboard clearing, empty-history Settings availability, and Escape focus restoration passed.

Repository files were not modified.

@pascalandr

Copy link
Copy Markdown
Contributor Author

Round 2 review of 77a5fe8bc:

  • P3 — Russian grammatical case — docs/help/ru/settings.md:5: the added phrase или шестерёнка **Настройки** is part of the enumeration governed by вроде, which requires the genitive case (as already used in шестерёнки панели миссий). Change it to или шестерёнки **Настройки**, retaining the exact UI label.

The round-1 finding is resolved: all ten locales identify the notification-history shortcut as a gear and use their exact toastHistory.viewSettings label. The other nine updated translations read naturally.

Validation: npm run test:help passed (9 tests; 25 pages × 10 locales).

The notification history's action row showed "Clear all" (with a small
trash icon) and "Settings" as text buttons, which made the row heavy
next to the filters. They are now icon buttons, like the panel's close
button: a red trash can for Clear all and a gear for Settings. Their
labels stay as tooltips and accessible names, translated as before.
"Mark all as read" keeps its text.

Both buttons use the shared window-icon-button geometry; the existing
toast-history action classes keep their hover, danger and disabled
treatment.

Validated with screenshots of the real ToastHistoryPanel with two
notifications in dark and light themes (icons, hover state) and the UI
typecheck.
The Settings shortcut in the notification history is now an icon-only
gear whose label is its tooltip, so the Settings help names it as the
Settings gear, in all ten languages, with each locale's UI label.

Validated with the help test.
@pascalandr
pascalandr force-pushed the feat/notification-history-icons branch from 45bf232 to 12a6f7c Compare October 23, 2026 00:19
@pascalandr
pascalandr merged commit 019203e into dev Oct 23, 2026
@pascalandr
pascalandr deleted the feat/notification-history-icons branch October 23, 2026 00:19
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.

1 participant