Add release information modal and ? button to the brand panel #17

New Issue

2026-07-23T09:46:23Z

jfig commented

2026-07-23 09:46:23 +00:00

Request

Add a release-information modal to the map visualizer and expose it through a ? button in the brand panel.

UI placement

The current brand panel contains the XPro logo and the “Map Visualizer” subtitle in index.html.

Add a help button with:

Visible label/icon: ?
Placement on the same horizontal line as “Map Visualizer”
Right alignment within that line
Accessible name such as “Show release information”
Keyboard focusability and visible focus styling
No change to the existing logo/title treatment

The layout should remain usable on narrow screens without overlapping or clipping the subtitle or button.

Modal contents

Clicking the ? button should open a release-information modal using the existing feature-modal interaction pattern.

The modal should display the repository versions/revisions for:

xpro-viz
xprov

For each repository, show a clear repository name and its deployed version or revision. Prefer a human-readable release/tag when available, with a short commit SHA as a fallback. The source of the displayed values should be explicit and build/deployment-safe; do not expose Gitea credentials or require unauthenticated browser access to private repository APIs.

Include a loading, unavailable, or unknown state if release metadata cannot be resolved.

Interaction and visual requirements

Reuse the existing modal close button, Escape handling, and backdrop-click behavior.
Apply the same semi-transparent/glass-panel treatment requested in #16.
Keep the modal readable over every supported basemap.
Set correct dialog labeling and focus the close control when opened.
Restore focus to the ? button when the modal closes.
Ensure screen-reader users receive the repository names and version values.

Acceptance criteria

A ? button appears on the right side of the “Map Visualizer” line in the brand panel.
The button has an accessible name, keyboard support, hover state, and visible focus state.
Activating it opens a release-information modal.
The modal shows both xpro-viz and xprov versions/revisions.
Missing metadata is represented gracefully rather than displaying blank or misleading values.
No repository credentials or private API tokens are sent to the browser.
Existing feature-information modal behavior remains unchanged.
The layout and modal work on desktop and small screens.
Automated UI tests cover opening, rendering both repositories, fallback/error state, closing, Escape, backdrop click, and focus restoration.

## Request Add a release-information modal to the map visualizer and expose it through a `?` button in the brand panel. ## UI placement The current brand panel contains the XPro logo and the “Map Visualizer” subtitle in `index.html`. Add a help button with: - Visible label/icon: `?` - Placement on the same horizontal line as “Map Visualizer” - Right alignment within that line - Accessible name such as “Show release information” - Keyboard focusability and visible focus styling - No change to the existing logo/title treatment The layout should remain usable on narrow screens without overlapping or clipping the subtitle or button. ## Modal contents Clicking the `?` button should open a release-information modal using the existing feature-modal interaction pattern. The modal should display the repository versions/revisions for: - `xpro-viz` - `xprov` For each repository, show a clear repository name and its deployed version or revision. Prefer a human-readable release/tag when available, with a short commit SHA as a fallback. The source of the displayed values should be explicit and build/deployment-safe; do not expose Gitea credentials or require unauthenticated browser access to private repository APIs. Include a loading, unavailable, or unknown state if release metadata cannot be resolved. ## Interaction and visual requirements - Reuse the existing modal close button, Escape handling, and backdrop-click behavior. - Apply the same semi-transparent/glass-panel treatment requested in #16. - Keep the modal readable over every supported basemap. - Set correct dialog labeling and focus the close control when opened. - Restore focus to the `?` button when the modal closes. - Ensure screen-reader users receive the repository names and version values. ## Acceptance criteria - A `?` button appears on the right side of the “Map Visualizer” line in the brand panel. - The button has an accessible name, keyboard support, hover state, and visible focus state. - Activating it opens a release-information modal. - The modal shows both `xpro-viz` and `xprov` versions/revisions. - Missing metadata is represented gracefully rather than displaying blank or misleading values. - No repository credentials or private API tokens are sent to the browser. - Existing feature-information modal behavior remains unchanged. - The layout and modal work on desktop and small screens. - Automated UI tests cover opening, rendering both repositories, fallback/error state, closing, Escape, backdrop click, and focus restoration.

jfig added the Kind/Enhancement label 2026-07-23 09:46:23 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: jfig/xprov#17