feat: expand advanced widget experiences

2026-08-13 19:54:55 +02:00
1 parent 55226842f9
commit 65a7e84bea
@@ -14,7 +14,7 @@ import { archiveTeamWarriorWidget } from ".";

 <WidgetHeader widget={archiveTeamWarriorWidget} categories={["Archiving", "Monitoring"]} />

-Use this widget to see what your ArchiveTeam Warrior is preserving without leaving Homarr. The compact view keeps the current project, runner state, job counts, bandwidth, and broadcast message visible. Advanced view adds the complete active-job list and exact update time.
+Use this widget to see what your ArchiveTeam Warrior is preserving without leaving Homarr. The compact view keeps the current project, runner state, job counts, bandwidth, and broadcast message visible. Advanced view adds the complete active-job list, job start times, project and bandwidth-session identifiers, session transfer totals, and exact update time.

 ### Supported integration

@@ -36,7 +36,9 @@ import widgetOverview from "./img/widget-overview.png";
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view shows every missing-subtitle and health summary regardless of compact visibility options, together with the already-fetched Sonarr and Radarr SignalR states and announcement count.
+
+<WidgetInteractionGuide advancedView />

 ### Adding the widget

@@ -34,6 +34,8 @@ This widget displays your Beszel alert configurations separated by status (trigg
  ]}
 />

+In advanced view, the widget always shows triggered and OK alerts, their descriptions, integration source names, and the complete fetched history. Advanced view requests history even when compact history is disabled and raises the bounded per-integration history request to at least 50 entries, without exceeding 100.
+
 <WidgetInteractionGuide />

 ### Adding the widget
@@ -4,6 +4,8 @@ description: "Card grid view of all Beszel-monitored systems with real-time metr
 hide_title: true
 ---

+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -34,6 +36,10 @@ Select a system card to open the complete statistics view, including system, fil
  ]}
 />

+In advanced view, every applicable metric is shown even when its compact visibility option is disabled. Each card also shows its integration source, hostname, operating system, CPU model, core count, and total memory. Cards remain selectable to open the complete statistics view.
+
+<WidgetInteractionGuide />
+
 ### Adding the widget

 <AddingWidget />
@@ -15,6 +15,8 @@ import { clockWidget } from ".";

 The clock widget displays the current date and time in a customizable format.

+Advanced view always exposes seconds, the full date, timezone and UTC offset. When weather is enabled, it also shows the configured location, conditions, today's high/low and humidity, wind, sunrise, and sunset from the same cached forecast.
+
 ### Screenshots

 import localClock from "./img/local.png";
@@ -27,7 +27,11 @@ The Coolify widget displays a compact overview of your Coolify instance. It can
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view opens the Servers, Applications, and Services sections regardless of their compact visibility switches. It identifies each Coolify integration, shows server `is_reachable` and `is_usable` values, and lists applications nested in services when the API provides them. Healthy integrations remain visible if another source fails, with the failed source identified by a warning.
+
+IP addresses remain masked in advanced view until you explicitly use the eye control. Public resource, Coolify dashboard, and log links retain the widget's safe new-tab handling.
+
+<WidgetInteractionGuide advancedView />

 ### Adding the widget

@@ -20,6 +20,8 @@ import { technitiumDnsIntegration } from "@site/docs/integrations/technitium-dns

 <WidgetHeader widget={dnsHoleControlsWidget} categories={["DNS Hole"]} />

+When several DNS integrations are selected, Homarr keeps healthy controls available if one source fails and shows a warning identifying the unavailable integration.
+
 This widget lets permitted users enable, disable, or temporarily pause one or more DNS services. It shares the summary query and cache with DNS Hole Summary. Every selected source stays available in the normal scrollable view, while cards and controls adapt to the widget&apos;s width and height.

 ### Screenshots
@@ -17,6 +17,8 @@ import { dnsHoleSummaryWidget } from ".";

 <WidgetHeader widget={dnsHoleSummaryWidget} categories={["DNS Hole"]} />

+When several DNS integrations are selected, Homarr keeps healthy sources visible if one source fails and shows a warning identifying the unavailable integration.
+
 This widget combines statistics from every selected DNS service, including total queries, blocked queries, and blocklist size. Its data is cached under the same DNS query family as DNS Hole Controls, so placing both widgets on a board does not create a second integration request. When the widget has enough room, it adds a scrollable status row naming each selected source.

 ### Screenshots
@@ -23,6 +23,8 @@ import { glancesIntegration } from "@site/docs/integrations/glances";

 This widget displays information about the health and status of your system(s), including CPU, memory, disk usage, and more.

+Advanced view is a complete health workspace: it shows every available CPU, temperature, memory, GPU, filesystem, update, reboot, and system-information section even when compact visibility switches hide some of them on the board. Storage-volume filters, units, and permissions remain in effect.
+
 ### Screenshots

 import systemView from "./img/system-view.png";
@@ -39,7 +39,9 @@ import { prowlarrIntegration } from "@site/docs/integrations/prowlarr";

 - Test all indexers by clicking on the test button.

-<WidgetInteractionGuide advancedView={false} />
+In advanced view, every indexer is grouped under its integration source and receives an explicit Healthy, Unhealthy, or Disabled status. Safe indexer links and the permission-checked test action behave exactly as they do on the board.
+
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -18,6 +18,8 @@ import { sonarrIntegration } from "@site/docs/integrations/sonarr";

 Monitor which movies and episodes are missing from your library, and track what is currently being downloaded. The widget pulls data from Radarr and Sonarr and groups results by type in two tabs.

+Advanced view always shows both Missing and Queued panels side by side when space allows, requests at least 50 items per source, exposes queue status and time remaining, and keeps partial-integration warnings visible. Compact tab visibility and page-size choices continue to shape the board tile.
+
 ### Screenshots

 import widgetMissing from "./img/missing.png";
@@ -19,6 +19,10 @@ import { plexIntegration } from "@site/docs/integrations/plex";

 Provides a list of newly added media or upcoming releases from your media server.

+Releases retain the name and icon of the integration that supplied them. If one integration is unavailable, releases from healthy integrations remain visible and a warning identifies the failed source without exposing connection details. The widget reports an error only when every selected integration fails.
+
+Advanced view displays every release in a roomy poster layout with its complete available metadata, description, tags, and visible source name, regardless of the compact layout and visibility options.
+
 ### Screenshots

 import backdrop from "./img/backdrop.png";
@@ -36,7 +36,9 @@ import summaryCard from "./img/summary.png";
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+In advanced view, each controller gets its own information matrix showing source, last update, WAN and web status, latency, ping, web uptime, separate Wi-Fi and LAN user and guest counts, and connected VPN users. The compact board view keeps its progressive aggregate layout.
+
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -26,7 +26,7 @@ import editOn from "./img/edit.png";
  <img src={editOn} alt="notebook edit-on" width={128 * 3} />
 </div>

-<WidgetInteractionGuide advancedView={false} />
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -46,6 +46,10 @@ You can then decide to save your changes or cancel them to exit editing, using t

 ![](./img/notebook-exit-editing.webp)

+### Advanced view
+
+Advanced view keeps the notebook read-only until an authorized user enters editing. While editing, it always shows the complete, unclipped toolbar even when **Show the toolbar** is disabled, and it always displays the document word and character counts regardless of the widget height. Permissions, saving and cancellation, and the **Allow check in read only mode** setting work exactly as they do in the compact widget.
+
 ### Notebook toolbar functions

 The notebook offers a variety of functions to edit the text and more.
@@ -10,7 +10,8 @@ export const notebookWidget: WidgetDefinition = {
    items: [
      {
        name: "Show the toolbar to help you write markdown",
-        description: "Upon editing, enables a toolbar at the top with document editing functions.",
+        description:
+          "Upon editing in compact mode, enables a toolbar at the top with document editing functions. Advanced view always shows the complete toolbar while editing.",
        values: { type: "boolean" },
        defaultValue: "yes",
      },
@@ -34,7 +34,9 @@ import notificationsScreenshot from "./img/notifications.png";
  items={[{ integration: ntfyIntegration }, { integration: nextcloudIntegration }, { integration: gotifyIntegration }]}
 />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view always shows available notification logos and sources and removes the compact body line limit. External notification links retain the same safe new-tab behavior.
+
+<WidgetInteractionGuide advancedView />

 ### Adding the widget

@@ -72,6 +72,10 @@ The widget adapts its layout based on the available space:

 When the widget has enough space, a "last updated" timestamp appears at the bottom showing how recently PatchMon refreshed its data. Narrow layouts use a shortened timestamp such as `5m ago`; wider short layouts can show the full translated text.

+### Advanced view
+
+Advanced view is a complete PatchMon posture view. It always shows the compliance hero, all eight host and package statistics, the full OS distribution with versions, and the last-updated time. Compact visibility switches and OS limits still shape the board tile, but do not hide already-fetched security information in advanced view. Threshold and chart-style choices remain in effect.
+
 ### Supported Integrations

 <WidgetIntegrations
@@ -83,7 +87,7 @@ When the widget has enough space, a "last updated" timestamp appears at the bott
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -35,7 +35,9 @@ GitHub, Docker Hub, GitLab, NPM, Codeberg, GitHub Container Registry, Quay, and
 For GitHub Container Registry, use `owner/package` identifiers such as `homarr-labs/homarr`.
 Full image references such as `ghcr.io/homarr-labs/homarr:latest` are also accepted.

-<WidgetInteractionGuide advancedView={false} />
+Advanced view shows every configured repository even when compact view is limited to highlighted or top releases. Repository names and details remain visible, and selecting a repository still expands its description and links.
+
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -21,7 +21,9 @@ import screenshot from "./img/screenshot.png";

 <img src={screenshot} alt="rss-feed noted-lol" width={128 * 4} />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view keeps the configured feeds and post limit unchanged while showing each fetched post's full description, image, source, relative time, and exact publication timestamp. Right-to-left text and safe external links continue to follow the widget configuration.
+
+<WidgetInteractionGuide advancedView />

 ### Adding the widget

@@ -22,6 +22,8 @@ The entity state enables you to display the current state of an entity.
 This works with most entities and enables you display almost any data.
 It is recommended that you transform data on the integration as much as possible since Homarr's capabilities in transformation are very limited.

+Advanced view shows the safe Home Assistant metadata owned by Homarr: the friendly name, entity ID, unit, device class, icon, last-changed time, and last-updated time. Arbitrary attributes remain intentionally excluded.
+
 ### Screenshots

 import sun from "./img/sun.png";
@@ -20,6 +20,8 @@ import { homeAssistantIntegration } from "@site/docs/integrations/home-assistant

 The execute automation widget allows you to trigger an automation with one click.

+Advanced view shows the automation ID, interaction permission, last successful run in the current browser session, and the latest action error together. Session-only history is not presented as Home Assistant history.
+
 ### Screenshots

 import empty from "./img/empty.png";
@@ -18,6 +18,10 @@ import { speedtestTrackerIntegration } from "@site/docs/integrations/speedtest-t
 This widget displays internet speed test results from your [Speedtest Tracker](https://docs.speedtest-tracker.dev/) instance,
 including the latest result, historical averages, and a live chart of the last 12 hours.

+Advanced view renders a source-labeled panel for every healthy integration. Each panel exposes that source's latest test, statistics, speed and ping charts, plus 12-hour, 24-hour, and truthful **Last 30** result ranges regardless of compact visibility switches. Compact mode keeps the responsive aggregate overview and names its healthy sources when multiple integrations are selected.
+
+When multiple Speedtest Tracker integrations are selected, results from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Screenshots

 import screenshot from "./img/screenshot.png";
@@ -16,6 +16,8 @@ import { stockPriceWidget } from ".";
 Using the Stocks widget, you can show the current stock prices of your favorite companies on your dashboard.
 The widget prioritizes the symbol, current price, and trend. Company name, change, time range, and a taller chart appear progressively when both widget dimensions can support them.

+In advanced view, the widget always shows the returned symbol and company name, configured range and interval, current and previous close, absolute and percentage change, range minimum and maximum, and the full price-history chart. These values use the same configured Yahoo Finance query as the compact widget; advanced view does not change the symbol, range, or interval.
+
 ### Screenshots

 import apple from "./img/apple.png";
@@ -34,7 +36,7 @@ import nvidia from "./img/nvidia.png";
  <img src={nvidia} alt="stock-price nvidia" width={128 * 2 + 2} height={128 * 2 + 4} />
 </div>

-<WidgetInteractionGuide advancedView={false} />
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -44,7 +44,9 @@ This widget displays filesystem and SMART disk usage for supported server and NA
  ]}
 />

-<WidgetInteractionGuide advancedView={false} />
+Advanced view keeps your configured volume filters while showing each integration name, usage percentage, used and total space, free-space percentage, SMART status, available temperature, and the usage background bar regardless of compact display options.
+
+<WidgetInteractionGuide />

 ### Adding the widget

@@ -17,6 +17,8 @@ import { tracearrIntegration } from "@site/docs/integrations/tracearr";

 The Tracearr widget provides a real-time monitoring dashboard for your media server activity. It displays active streams, user statistics, recent watching history, and policy violations.

+When multiple Tracearr integrations are selected, every stream, violation, and activity row keeps its source identity and an integration-scoped key. Data from healthy sources remains visible if another source fails, and a warning identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Sections

 | Section             | Description                                                                                                                            |
@@ -17,6 +17,10 @@ import { traefikIntegration } from "@site/docs/integrations/traefik";

 This widget displays a compact overview of your Traefik instance, including total routers, entry points, protocol-specific router/service/middleware counts, and warning or error totals when Traefik reports them.

+Advanced view shows every protocol and entry point, identifies every healthy Traefik source and version, and labels each resource or failed endpoint with its owning integration. Compact mode keeps the responsive aggregate overview and names each healthy source when multiple integrations are selected.
+
+When multiple Traefik integrations are selected, data from healthy sources remains visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Supported Integrations

 <WidgetIntegrations
@@ -19,6 +19,10 @@ This widget displays the status of the UPS devices reported by a Network UPS Too
 status (online, on battery, charging or low battery), battery charge and estimated runtime, output load, and input and
 output voltage.

+Every device keeps an integration-scoped identity. Advanced view always labels each device with its owning integration, while compact layouts add the source label only when multiple healthy integrations are present.
+
+When multiple UPS integrations are selected, devices from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Layouts

 import screenshotFull from "./img/screenshot.png";
@@ -17,6 +17,10 @@ import { uptimeKumaIntegration } from "@site/docs/integrations/uptime-kuma";

 This widget displays uptime statistics from your Uptime Kuma status page, including a visual uptime ring, average uptime percentage, and per-status monitor counts.

+Advanced view always shows the uptime ring, all status totals, and the complete monitor list with source identity, regardless of compact visibility switches.
+
+When multiple Uptime Kuma integrations are selected, monitors from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
+
 ### Supported Integrations

 <WidgetIntegrations
@@ -8,6 +8,7 @@ import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 import { wudWidget } from ".";
 import { wudIntegration } from "@site/docs/integrations/whats-up-docker";

@@ -26,6 +27,10 @@ This widget shows two stats from your WUD instance: the total number of monitore
  ]}
 />

+<WidgetInteractionGuide />
+
+In advanced view, the widget always shows its title, update ring, monitored-container summary, and the full list of available container updates. The configured horizontal or vertical layout still applies. Visibility options only affect the compact board view.
+
 ### Adding the widget

 <AddingWidget />