Skip to content

ui: add dismissible What's New announcement banner and modal - #665

Merged
rgushchin merged 2 commits into
mainfrom
feat/whats-new-banner
Oct 10, 2026
Merged

rgushchin merged 2 commits into
mainfrom
feat/whats-new-banner

Conversation

@rgushchin

Copy link
Copy Markdown
Member

Summary

Adds a top-level What's New announcement banner and modal to the web UI (static/index.html) for periodic manual announcements:

  • Easy configuration: Controlled by a WHATS_NEW constant at the top of the <script> section in static/index.html ({ id, date, headline, body }), left empty by default with a commented example.
  • Visible but non-intrusive: When headline or body is populated, a compact banner appears at the top of the page. Clicking the banner opens a modal with the full announcement and stores a digest of the announcement in localStorage (sashiko_whats_new_dismissed) so the banner stays hidden across future visits until id, headline, or body is changed.
  • Direct dismissal: Includes a × close button on the banner to dismiss without opening the modal.

@sashiko-bot

sashiko-bot Bot commented Oct 9, 2026

Copy link
Copy Markdown

Sashiko review

Commit 1/1 — 4bc55d7c ui: add dismissible Whats New announcement banner and modal

  • [MEDIUM] In static/index.html (document.addEventListener), the commit
    message focuses exclusively on adding the What's New banner and modal.
    However, the diff also introduces two global, undocumented side-effects:
    1. it modifies a global keydown event listener to abort keyboard
      shortcuts when any modal is open, which changes the behavior of
      pre-existing modals like Auth and About; 2) it wraps auth-header and
      app inside a new app-shell container and adjusts global CSS absolute
      positioning. Both changes alter global behavior and layout but are
      neither motivated nor explained in the commit message, violating the
      single responsibility (mixed concerns) and commit rationale guidelines.

Full review and stage logs on sashiko.sashiko.dev

In the global keydown listener in static/index.html, keyboard
navigation shortcuts (such as /, j, k, Enter, and q) previously only
checked whether an input or textarea element had focus. Pressing
navigation keys while an overlay modal (such as the About, Settings,
or Sign In modal) was open, or after an interactive element already
called preventDefault on the key event, still triggered background
list navigation and row activation behind the modal.

Abort the global navigation keydown handler when e.defaultPrevented is
true or when any .modal-overlay.open element is present so keyboard
events do not leak into background view navigation while a modal is
active.

Signed-off-by: Roman Gushchin <roman.gushchin@linux.dev>
Add a top-level Whats New banner and announcement modal to the web UI
configured via the WHATS_NEW constant at the top of the script section
in static/index.html.

When WHATS_NEW.headline or WHATS_NEW.body is populated, the banner
renders at the top of the page above the application header with a
Whats New badge and headline. Clicking the banner opens a modal
displaying the full announcement and records a digest of the
announcement in localStorage so the banner stays hidden across page
loads until the announcement is updated. A close button on the banner
also allows dismissing it directly without opening the modal. By
default WHATS_NEW is left empty with a commented example so the banner
remains hidden until populated.

Because auth-header is absolutely positioned outside the re-rendered
app container and previously used body-relative coordinates (top:
32px; right: 16px) that assumed app was at the top of body, wrap
auth-header and app in a relative app-shell container (with top: 20px;
right: 0 accounting for body padding) so auth-header shifts down
together with the application header when the Whats New banner is
visible above it.

Signed-off-by: Roman Gushchin <roman.gushchin@linux.dev>
@rgushchin
rgushchin force-pushed the feat/whats-new-banner branch from 4bc55d7 to 5b3db59 Compare October 9, 2026 11:53
@rgushchin

Copy link
Copy Markdown
Member Author

Addressed in the updated branch:

  1. Split the global modal keyboard-shortcut guard (.modal-overlay.open / e.defaultPrevented) into a separate preparatory commit (b8815e10486d, ui: suppress background navigation shortcuts when a modal is open) with dedicated rationale.
  2. Documented the #app-shell wrapper and #auth-header coordinate adjustment in the What's New banner commit message (5b3db59b6f13), and kept #authModal outside #app-shell so only #auth-header and #app are wrapped.

@sashiko-bot

sashiko-bot Bot commented Oct 9, 2026

Copy link
Copy Markdown

Sashiko review — v2

Commit 1/2 — b8815e10 ui: suppress background navigation shortcuts when a modal is open

  • [LOW] In static/index.html (keydown event listener and openAuthModal), the
    new navigation suppression check queries for the .modal-overlay.open class
    to detect active modals. However, the auth modal is displayed using inline
    styles rather than the .open class. As a result, the query selector
    returns null when the Sign In modal is active, allowing navigation keys to
    bypass the suppression and trigger background list navigation.

Full review and stage logs on sashiko.sashiko.dev

@rgushchin
rgushchin merged commit fe11c50 into main Oct 10, 2026
1 check 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.

1 participant