feat: refine widget interactions

2026-08-13 19:54:38 +02:00
1 parent a9f1293077
commit 49ef7748ad
@@ -12,7 +12,7 @@ Homarr has the following keyboard shortcuts:
 | `MOD` + `J`                                | Toggles Dark Mode                                          |
 | `MOD` + `E`                                | Toggles Edit Mode                                          |
 | Hold `Shift` while hovering a widget       | Opens its temporary advanced view                          |
-| `Shift` + `Enter` on a focused widget      | Opens and pins its advanced view                           |
+| `Shift` + `Enter` on a focused widget      | Opens its advanced view until it is closed                 |
 | `Esc`                                      | Closes an open advanced view or board menu                 |
 | `Shift` + `F10` on a focused board section | Opens the precise add-item menu at the next available cell |

@@ -20,8 +20,9 @@ Homarr has the following keyboard shortcuts:

 Here `MOD` refers to the modifier key, which is `Ctrl` on Windows and `Cmd` on macOS.

-Advanced view and precise placement are available outside edit mode. Precise placement still requires permission to
-change the board and the right-click interaction preference to be enabled.
+Advanced view and precise placement are available outside edit mode. App tiles stay compact and do not have an
+advanced view. Precise placement still requires permission to change the board and the right-click interaction
+preference to be enabled.

 :::

@@ -35,7 +35,7 @@ import anchorNoteWidgetScreenshot from "./img/widget.png";

 ### Interactions

- Click **Edit** to start editing the selected note.
+- Hover the widget, focus within it, or use a touch device to reveal **Edit**, then select it to start editing the note.
 - Click **Save** to persist changes to Anchor.
 - Click **Cancel** to discard unsaved changes.

@@ -4,8 +4,6 @@ description: "Embeds an app into the board."
 hide_title: true
 ---

-import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
-
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
@@ -27,7 +25,10 @@ import piHoleApp from "./img/pi-hole-ping-icon.png";
  <img src={piHoleApp} alt="app pi-hole with-status-check status-check-icon" width={128 * 1.5} height={128 * 1.5} />
  <img src={jellyseerrApp} alt="app jellyseerr with-description-tooltip" height={128 * 1.5} />
 </div>
-<WidgetInteractionGuide />
+
+### Interactions
+
+App tiles stay compact and open their configured destination directly. Right-click a tile to inspect its status or change its settings when the board and your preferences allow it.

 ### Adding the widget

@@ -15,6 +15,7 @@ import { bookmarksWidget } from ".";

 The bookmarks widget allows you to display multiple app links in a single widget.
 You can add links to your favorite applications, websites, or any other resources you want quick access to.
+Its normal view adapts each configured layout to the available width and height: lower-priority hostnames are hidden before names or icons, and larger collections scroll instead of crushing cards.

 ### Screenshots

@@ -72,8 +72,7 @@ import withoutIntegrations from "./img/without-integrations.png";
 ### Interactions

 - Hover over a marked date to preview its events in a popover.
- Click on a marked date to pin the popover open (it will stay visible even after moving the mouse away).
- Click the date again or click outside to close the pinned popover.
+- The advanced view replaces the month grid with a grouped event list. Use its previous and next controls to change months.
 - If one selected integration is unavailable, its warning indicator remains visible while events from healthy integrations continue to load.

 <WidgetInteractionGuide />
@@ -33,6 +33,8 @@ import screen from "./img/screen.png";

 <WidgetInteractionGuide />

+Hover or focus the widget to pause its slideshow; touch devices keep the control available. A paused slideshow keeps its resume control visible. The advanced view groups previous, pause or resume, and next together and adds a thumbnail strip for quick navigation.
+
 ### Adding the widget

 <AddingWidget />
@@ -38,7 +38,7 @@ import editOn from "./img/edit.png";

 ### Editing

-When the permissions of the user allows it, you can enter the editing of the text by clicking the following button in the top right.
+When your permissions allow it, hover the widget, focus within it, or use a touch device to reveal the edit button in the top right. You can also double-click the document to edit it directly.

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

@@ -14,6 +14,7 @@ import { stockPriceWidget } from ".";
 <WidgetHeader widget={stockPriceWidget} categories={["Finance", "Market"]} />

 Using the Stocks widget, you can show the current stock prices of your favorite companies on your dashboard.
+The compact view prioritizes the symbol, current price, and trend. Company name, change, and time range appear only when both the widget width and height can support them; the advanced view always shows the complete summary.

 ### Screenshots

@@ -14,6 +14,8 @@ import { weatherWidget } from ".";
 <WidgetHeader widget={weatherWidget} categories={["Weather"]} />

 The Weather Widget uses your location to display the current, highest and lowest temperature.
+The advanced view always combines current conditions with the full seven-day forecast, including humidity, wind,
+gusts, sunrise and sunset. Both views reuse the same cached Open Meteo response.

 ### Screenshots

@@ -1,11 +1,11 @@
-import { IconArrowsMaximize, IconMouse2, IconPlus } from "@tabler/icons-react";
+import { IconArrowsMaximize, IconLayoutGrid, IconMouse2, IconPlus } from "@tabler/icons-react";

 const interactions = [
  {
    icon: IconArrowsMaximize,
    title: "Advanced view",
    description:
-      "Hold Shift while hovering (then pin it), press Shift + Enter, or choose Open advanced view from the widget menu.",
+      "Hold Shift while hovering for an in-place preview, press Shift + Enter, or choose Open advanced view from the widget menu.",
  },
  {
    icon: IconMouse2,
@@ -19,6 +19,12 @@ const interactions = [
    description:
      "With board changes allowed, right-click or touch and hold empty grid space to add there. Keyboard users can press Shift + F10.",
  },
+  {
+    icon: IconLayoutGrid,
+    title: "Adaptive detail",
+    description:
+      "Resize a widget to tune its density. Compact views keep primary status visible, then reveal details and controls as space or intent allows.",
+  },
 ] as const;

 export const WidgetInteractionGuide = () => (
@@ -30,7 +36,7 @@ export const WidgetInteractionGuide = () => (
        Hide shortcuts
      </span>
    </summary>
-    <div className="grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-3 dark:border-[#333]">
+    <div className="grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-2 xl:grid-cols-4 dark:border-[#333]">
      {interactions.map(({ icon: Icon, title, description }) => (
        <div key={title} className="rounded-lg bg-white p-3 shadow-sm dark:bg-gray-950">
          <Icon aria-hidden size={20} stroke={1.5} className="mb-2 stroke-red-500" />
@@ -40,8 +46,8 @@ export const WidgetInteractionGuide = () => (
      ))}
    </div>
    <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
-      Advanced view reuses the widget&apos;s live data and cache. Touch devices expose a maximize control; board actions
-      respect your permissions and right-click preference.
+      Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed. Touch
+      devices expose a maximize control; app tiles stay compact.
    </p>
  </details>
 );