From 8775597d5a883322a23fae4d0496050d886c4381 Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Thu, 13 Aug 2026 12:31:32 +0200 Subject: [PATCH] feat: expand advanced widget experiences --- apps/docs/docs/widgets/beszel-alerts/index.mdx | 4 +++- apps/docs/docs/widgets/beszel-system-grid/index.mdx | 6 +++--- apps/docs/docs/widgets/beszel-system-table/index.mdx | 6 +++--- apps/docs/docs/widgets/clock/index.mdx | 2 ++ apps/docs/docs/widgets/indexer-manager/index.mdx | 4 +++- apps/docs/docs/widgets/notebook/index.mdx | 6 +++++- apps/docs/docs/widgets/notebook/index.ts | 3 ++- packages/widgets/src/beszel-alerts/index.ts | 1 + packages/widgets/src/beszel-system-grid/index.ts | 1 + packages/widgets/src/beszel-system-table/index.ts | 1 + packages/widgets/src/indexer-manager/index.ts | 1 + packages/widgets/src/notebook/index.ts | 1 + 12 files changed, 26 insertions(+), 10 deletions(-) diff --git a/apps/docs/docs/widgets/beszel-alerts/index.mdx b/apps/docs/docs/widgets/beszel-alerts/index.mdx index b2affc3f1..39b074594 100644 --- a/apps/docs/docs/widgets/beszel-alerts/index.mdx +++ b/apps/docs/docs/widgets/beszel-alerts/index.mdx @@ -34,7 +34,9 @@ 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. + + ### Adding the widget diff --git a/apps/docs/docs/widgets/beszel-system-grid/index.mdx b/apps/docs/docs/widgets/beszel-system-grid/index.mdx index eb42c4800..a99195a9f 100644 --- a/apps/docs/docs/widgets/beszel-system-grid/index.mdx +++ b/apps/docs/docs/widgets/beszel-system-grid/index.mdx @@ -4,8 +4,6 @@ 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"; @@ -37,7 +35,9 @@ 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. + + ### Adding the widget diff --git a/apps/docs/docs/widgets/beszel-system-table/index.mdx b/apps/docs/docs/widgets/beszel-system-table/index.mdx index 8636b3945..32bd98f77 100644 --- a/apps/docs/docs/widgets/beszel-system-table/index.mdx +++ b/apps/docs/docs/widgets/beszel-system-table/index.mdx @@ -4,8 +4,6 @@ description: "Table view of all Beszel-monitored systems with sortable columns a 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"; @@ -38,7 +36,9 @@ Select a system row to open the complete statistics view. ]} /> - +In advanced view, the table removes its compact width budget and shows every Beszel metric even when its compact visibility option is disabled. It also adds the integration source, hostname, operating system, CPU model, core count, and total memory columns. Sorting, saved column order and widths, and row selection continue to work the same way. + + ### Adding the widget diff --git a/apps/docs/docs/widgets/clock/index.mdx b/apps/docs/docs/widgets/clock/index.mdx index 6ec75e9f6..6f070c679 100644 --- a/apps/docs/docs/widgets/clock/index.mdx +++ b/apps/docs/docs/widgets/clock/index.mdx @@ -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"; diff --git a/apps/docs/docs/widgets/indexer-manager/index.mdx b/apps/docs/docs/widgets/indexer-manager/index.mdx index 2deeecd66..4efeb5840 100644 --- a/apps/docs/docs/widgets/indexer-manager/index.mdx +++ b/apps/docs/docs/widgets/indexer-manager/index.mdx @@ -39,7 +39,9 @@ import { prowlarrIntegration } from "@site/docs/integrations/prowlarr"; - Test all indexers by clicking on the test button. - +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. + + ### Adding the widget diff --git a/apps/docs/docs/widgets/notebook/index.mdx b/apps/docs/docs/widgets/notebook/index.mdx index 887908372..aae4ba46f 100644 --- a/apps/docs/docs/widgets/notebook/index.mdx +++ b/apps/docs/docs/widgets/notebook/index.mdx @@ -26,7 +26,7 @@ import editOn from "./img/edit.png"; notebook edit-on - + ### 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. diff --git a/apps/docs/docs/widgets/notebook/index.ts b/apps/docs/docs/widgets/notebook/index.ts index f477281e1..8e2c1c991 100644 --- a/apps/docs/docs/widgets/notebook/index.ts +++ b/apps/docs/docs/widgets/notebook/index.ts @@ -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", }, diff --git a/packages/widgets/src/beszel-alerts/index.ts b/packages/widgets/src/beszel-alerts/index.ts index e8a32796d..12bd3d419 100644 --- a/packages/widgets/src/beszel-alerts/index.ts +++ b/packages/widgets/src/beszel-alerts/index.ts @@ -6,6 +6,7 @@ import { optionsBuilder } from "../options"; export const { definition, componentLoader } = createWidgetDefinition("beszelAlerts", { icon: IconBell, + supportsAdvancedFocus: true, queryKey: [["widget", "beszel", "getAlerts"]], queryMatcher(query, scope) { const hasRuntimeAlertsQuery = scope.runtimeQueries.some(({ path }) => path.at(-1) === "getAlerts"); diff --git a/packages/widgets/src/beszel-system-grid/index.ts b/packages/widgets/src/beszel-system-grid/index.ts index 9a5444e28..c4ac8ae75 100644 --- a/packages/widgets/src/beszel-system-grid/index.ts +++ b/packages/widgets/src/beszel-system-grid/index.ts @@ -6,6 +6,7 @@ import { optionsBuilder } from "../options"; export const { definition, componentLoader } = createWidgetDefinition("beszelSystemGrid", { icon: IconLayoutGrid, + supportsAdvancedFocus: true, queryKey: [["widget", "beszel", "getSystems"]], supportedIntegrations: ["beszel", "mock"], integrationsRequired: true, diff --git a/packages/widgets/src/beszel-system-table/index.ts b/packages/widgets/src/beszel-system-table/index.ts index 76fb0264f..44209614a 100644 --- a/packages/widgets/src/beszel-system-table/index.ts +++ b/packages/widgets/src/beszel-system-table/index.ts @@ -25,6 +25,7 @@ const sortDirectionOptions = [ export const { definition, componentLoader } = createWidgetDefinition("beszelSystemTable", { icon: IconTable, + supportsAdvancedFocus: true, queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]], queryMatcher: (query, scope) => query.path.at(-1) === "getSystems" diff --git a/packages/widgets/src/indexer-manager/index.ts b/packages/widgets/src/indexer-manager/index.ts index 8cc1e0eed..aa8bc73f8 100644 --- a/packages/widgets/src/indexer-manager/index.ts +++ b/packages/widgets/src/indexer-manager/index.ts @@ -13,6 +13,7 @@ const createOptions = () => })); export const { definition, componentLoader } = createWidgetDefinition("indexerManager", { + supportsAdvancedFocus: true, icon: IconReportSearch, contextActions: ({ widgetRuntimeRef, context }) => [ { diff --git a/packages/widgets/src/notebook/index.ts b/packages/widgets/src/notebook/index.ts index 6b85f3e33..b4221e55c 100644 --- a/packages/widgets/src/notebook/index.ts +++ b/packages/widgets/src/notebook/index.ts @@ -5,6 +5,7 @@ import { optionsBuilder } from "../options"; import { defaultContent } from "./default-content"; export const { definition, componentLoader } = createWidgetDefinition("notebook", { + supportsAdvancedFocus: true, icon: IconNotes, createOptions() { return optionsBuilder.from(