Dashboard: Browser title + Hints

[nielslyngsoe]

Implements View Contexts for Dashboards and Section Views, to support browser title and Hints

test by adding this, to the dataset-dahsboard example:

	constructor() {
		super();

		this.consumeContext(UMB_VIEW_CONTEXT, (view) => {
			view?.hints.addOne({
				unique: 'exampleHintFromToggleAction',
				text: '!',
				color: 'invalid',
				weight: 100,
			});
		});
	}
	```

[claude]

Claude finished @nielslyngsoe's task in 6m 44s —— View job

---

PR Review

Target: origin/main · Based on commit: d06fad43

Adds view contexts (UmbViewContext) for every dashboard and section view, wiring up browser title updates and a hint/badge system for inactive tabs. Closely mirrors the pattern already established in UmbWorkspaceEditorElement.

• Modified public API: None — all changes are private implementation details within UmbSectionMainViewElement.
• Other changes: Tabs for inactive dashboards/views can now display umb-badge hint indicators; the manifest type imports for UmbDashboardElement and UmbSectionViewElement are removed in favour of component?: any in route setup callbacks (matching the sibling element pattern).

---

Suggestions

• section-main-views.element.ts:209–215: Dashboard badges are placed directly inside <uui-tab> without a position: relative container. umb-badge's :host is position: absolute; inset: -8px -8px auto auto, so without a positioned ancestor it falls back to the nearest one in the layout — possibly the section root. View tabs avoid this by wrapping in <div slot="icon"> (and the matching div[slot='icon'] { position: relative } CSS rule). Modern browsers handle this with the CSS anchor API (position-anchor), but the fallback path may still misplace dashboard badges. Consider wrapping the dashboard tab content in a positioned container:

  <uui-tab href="${this._routerPath}/${dashboardPath}" label=${dashboardName} ?active="${isActive}">
      <span style="position: relative;">
          ${dashboardName}
          ${hint && !isActive ? html`<umb-badge ...>${hint.text}</umb-badge>` : nothing}
      </span>
  </uui-tab>

  Or add a dedicated CSS rule (e.g. #dashboards uui-tab span { position: relative; }).

• section-main-views.element.ts:92–93: Observer keys use 'umbObserveHint_' + index (matching the sibling workspace-editor.element.ts pattern). Since observers are fully rebuilt in #observeHints() this is safe, but using the alias (e.g. 'umbObserveHint_' + alias) would be slightly clearer and avoids any implicit coupling to Map iteration order.

---

Approved with Suggestions for improvement

Good to go, but please carefully consider the importance of the suggestions.

The implementation faithfully mirrors UmbWorkspaceEditorElement patterns — context creation, hint observation, and route setup are all consistent. The dashboard badge positioning is the only concern worth double-checking visually before merge.

[Copilot]

Pull request overview

This PR introduces per-dashboard and per-section-view View Contexts in the section main views host, enabling browser title updates and hint badges to be surfaced in the section navigation UI.

Changes:

• Added creation/management of UmbViewContext instances keyed by dashboard/view alias, including context title setup and route-time provisioning.
• Implemented observation of firstHintOfVariant per view context and rendered hint badges for dashboards and section views.
• Updated view tab rendering to support icon+badge overlays with accompanying CSS.

[engijlr]

Looks good! Hints and titles show as expected. I tweaked the CSS rule for the hint badge in section views, it was covering the icon. The fix doesn't affect the dashboard hint positioning. 🙌