refactor: drop clock option compatibility

feat (v2 stocks widget):Add a "Show details" toggle to the stock widget's compact view

.gitignore

@@ -92,3 +92,6 @@ homarr-backup*.zip
 *.sqlite-wal
 *.sqlite-shm
 /scripts/benchmarks/
+
+# PR description screenshots belong on the pull request, not in the repository
+.screenshots/

apps/docs/docs/management/api/index.mdx

@@ -72,6 +72,34 @@ API key authentication enables programmatic access for:
 - Custom dashboards and monitoring tools
 - Container orchestration systems that need to sync app definitions
 
+## Permissions
+
+API keys act as the user that created them, so every request is subject to that user's group
+permissions. A call that the user is not allowed to make returns `FORBIDDEN`, and list endpoints
+return only the records the user may see rather than failing.
+
+### App endpoints require app management access
+
+`GET /api/apps`, `GET /api/apps/paginated` and `GET /api/apps/search` (tRPC `app.all`,
+`app.getPaginated`, `app.search`) require the **modify all apps** permission. They previously
+returned the full app catalogue — including internal URLs — to any authenticated user.
+
+If a script that used to work now returns `FORBIDDEN`, grant **modify all apps** to a group the key
+owner belongs to, or switch to `GET /api/apps/selectable`, which returns the reduced fields used by
+board pickers.
+
+### Integration endpoints are filtered per key
+
+`integration.all`, `integration.allThatSupportSearch`, `integration.allOfGivenCategory` and
+`integration.search` filter server side. Without a global integration permission, a key only
+receives the integrations its owner has been granted access to, so responses may contain fewer
+records than before rather than returning an error. `integration.search` applies its `limit` after
+filtering, so a scoped key still receives a full page of results.
+
+Each returned integration carries a `permissions` object — check `hasUseAccess` before reading data
+and `hasInteractAccess` before performing actions; `false` means the key owner lacks that level for
+that integration, not that the call failed.
+
 ## Board Automation
 
 The OpenAPI and MCP APIs include board management endpoints for common automation workflows:

apps/docs/docs/management/apps/index.mdx

@@ -51,6 +51,17 @@ Note that the ping URL only accepts `http://` and `https://` URLs — custom URI
 
 ## List of apps
 
-On the apps management page you find all apps that exist in your Homarr instance. Search by name or URL, open an app directly, or use its row actions to edit and delete it. A filtered search can be cleared without leaving the page.
+On the apps management page you find all apps that exist in your Homarr instance. Search by name or URL, open an app
+directly, or use its row actions to edit and delete it. A filtered search can be cleared without leaving the page.
 
-Any signed-in user can view this list. Creating, editing, and deleting apps requires the corresponding app permission; board permissions are not required.
+### Accessing the page
+
+The `/manage/apps` page is reachable when you can manage all apps (`app-modify-all`) or create apps (`app-create`):
+
+- **Manage all (`app-modify-all`)**: the full list of apps is shown and searchable, and each row can be edited.
+- **Create only (`app-create`)**: the page shows an empty "create an app" state instead of the list, so the names and
+  URLs of existing apps are never disclosed. The create action is still available.
+- **Neither**: the page is not reachable and returns a not-found page.
+
+Creating an app requires `app-create`, editing requires `app-modify-all`, and deleting requires `app-full-all`;
+board permissions are not required.

apps/docs/docs/management/boards/index.mdx

@@ -205,7 +205,7 @@ changes, Homarr asks whether to discard them. If the editor cannot load, the boa
 />
 
 While edit mode is active, **Add board content** opens the same Universal Create surface as the global header action and
-Spotlight. It can add a widget, app, integration, Container, board, Workshop item, or Custom Widget when the
+Spotlight. It lists the available actions directly and can add a widget, app, integration, Container, board, Workshop item, or Custom Widget when the
 current user and context allow it. Widget setup offers the main canvas, enabled rails, and existing Containers as
 destinations before the widget is created, so the common flow does not require a second move step.
 

apps/docs/docs/management/integrations/index.mdx

@@ -17,6 +17,24 @@ To create an integration, choose **New integration** and select the supported ap
 
 The integrations management page uses a searchable list. Each row shows the integration type and URL, with the actions you have permission to use.
 
+### Accessing the page
+
+The `/manage/integrations` page is reachable when at least one of the following applies:
+
+- you can manage all integrations (global `integration-full-all`),
+- you can create integrations (`integration-create`), or
+- you have been granted full access to at least one specific integration.
+
+What the page shows depends on the case:
+
+- **Manage all (`integration-full-all`)**: the full list of integrations is shown.
+- **Create only (`integration-create`)**: the page shows an empty "create an integration" state instead of the list, with the create action still available.
+- **Delegated (full access on one or more)**: only the integrations you have full access to are listed, above a note making clear that the view is scoped to what you can manage.
+- **None**: the page is not reachable and returns a not-found page.
+
+Where you have a mix of access, the list combines the integrations you can manage. Integration lists are filtered
+server side, so a user never receives data about integrations they lack access to.
+
 Next, you'll need to fill out the required fields to configure the integration:
 
 ![](./img/form-create-integration.png)
@@ -63,9 +81,9 @@ When you connect a service from a board, Homarr keeps you in the same setup flow
 confirms whether an application shortcut was linked and offers the widgets that support the new integration. Selecting a
 widget returns to its settings with the new integration already selected.
 
-Users with full access can also test and update a selected integration from **Edit widget → Edit integration** on a
-board. Failed tests keep the editor open and show the same connection diagnostics as the management page. Successful
-changes apply to every app and widget that uses the integration.
+Users with full access can also test and update a selected integration directly in the **Edit widget → Edit integration**
+tab on a board. Failed tests keep the editor open and show the same connection diagnostics as the management page.
+Successful changes apply to every app and widget that uses the integration.
 
 When app creation is not permitted, the setup form offers linking an existing accessible app instead of attempting to
 create one.

apps/docs/docs/management/users/index.mdx

@@ -163,19 +163,77 @@ Members can be removed from the group using the remove button at the end:
 #### Permissions tab
 
 In this tab, you manage what permissions the members of this group will have.
-Currently, the following permissions are available:
+Permissions are shown as a matrix with one row per category (boards, apps, integrations, and so on). Each row has a
+segmented control that lets you pick a single **access level**, plus a checkbox for each **capability** the category
+has.
 
-- Boards
-  - **Create boards**: Allow members to create boards
-  - **View all boards**: Allow members to view all boards
-  - **Modify all boards**: Allow members to modify all boards (Does not include access control and danger zone)
-  - **Full board access**: Allow members to view, modify, and delete all boards (Including access control and danger zone)
-- Integrations
-  - **Create integrations**: Allow members to create integrations
-  - **Use all integrations**: Allows members to add any integrations to their boards
-  - **Interact with any integration**: Allow members to interact with any integration
-  - **Full integration access**: Allow members to manage, use and interact with any integration
-- **Administrator**: Members with this permission have full access to all features and settings
+Levels in a category are cumulative: selecting a level grants that level and every level below it in the same
+category. Choosing **No access** grants no access level for that category.
+
+##### Capabilities are separate from the access level
+
+A capability is something you can grant on its own, independently of how much of everyone else's data the members
+can see. Creating is the usual example: you can let members create their own boards without letting them view or
+modify anyone else's boards. Apps additionally have **use all apps**, which lets members put any app on a board
+without being able to edit apps.
+
+Some access levels already include a capability through permission inheritance (marked in the table below); the
+checkbox is then ticked, disabled, and explains which level includes it.
+
+##### Administration
+
+Selecting the **Administrator** level grants full access to everything. While it is selected, every other category
+is disabled and explains that administrators already have that access. Setting the administrator row back to
+**No access** re-enables the other categories with the selections they had before.
+
+##### Access levels
+
+The access levels below are cumulative, in ascending order, with the category's capabilities listed separately:
+
+| Category       | Access levels (ascending)                                                                | Capabilities                    | Already included at                                  |
+| -------------- | ---------------------------------------------------------------------------------------- | ------------------------------- | ---------------------------------------------------- |
+| Boards         | view all boards → modify all boards → full board access                        | create boards                   | full board access                                    |
+| Apps           | modify all apps → full app access                                                   | use all apps, create apps       | create apps: modify all apps and full app access; use all apps: full app access |
+| Integrations   | use all integrations → interact with any integration → full integration access | create integrations             | full integration access                              |
+| Search engines | modify all search engines → full search engine access                               | create search engines           | modify all search engines, full search engine access |
+| Medias         | view all medias → full media access                                                 | upload medias                   | full media access                                    |
+| Other          | view logs                                                                                | —                               | —                                                    |
+| Administrator  | administrator                                                                            | —                               | —                                                    |
+
+Apps are the one category where "use" is not a level. Being able to modify every app does **not** imply being able
+to put any app on a board — only full app access grants both — so the two are kept independent rather than stacked,
+and picking **Modify** never silently grants use of every app.
+
+The levels grant the following:
+
+- **Boards**: view all boards; modify all boards (not access control and danger zone); full board access (view, modify and delete every board, including access control and the danger zone).
+- **Apps**: modify all apps; full app access (manage, use and delete any app).
+- **Integrations**: use all integrations; interact with any integration; full integration access (manage, use and interact with any integration).
+- **Search engines**: modify all search engines; full search engine access (manage and delete any search engine).
+- **Medias**: view all medias; full media access (manage and delete any media).
+- **Other**: view logs.
+
+##### Presets
+
+Above the rows you can apply a preset to fill in a common configuration in one click:
+
+- **Viewer**: read-only - view all boards and medias, use any app on a board, and use existing integrations.
+- **Editor**: day-to-day management - modify all boards and apps, create boards and integrations, interact with any integration, modify search engines, and upload medias, without deleting resources or managing access.
+- **Admin**: grants the administrator permission (full access to everything).
+
+When the current selection does not match any preset, a **Custom** badge is shown.
+
+##### Also grants
+
+Some levels include additional permissions automatically. When a level implies extra permissions (for example,
+modifying all apps also allows creating apps), a dimmed **Also grants: …** hint is shown below the category row,
+listing the implied permissions.
+
+##### Effective permissions
+
+Below the rows, the **Effective permissions** panel can be expanded to review everything members of this group will
+be able to do - the full, de-duplicated set of permissions, including everything granted indirectly through the
+levels - grouped by category, with a count for each.
 
 Custom Widget authoring, import, migration, preview, secrets, Workshop access, and placement configuration are reserved
 for administrators and are not separate assignable group permissions. Board modifiers can still move, resize, change

apps/docs/docs/widgets/air-quality/index.mdx

@@ -0,0 +1,47 @@
+---
+title: "Air Quality & UV"
+description: "Displays air quality, ultraviolet index, pollutants and pollen for a location."
+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";
+import { airQualityWidget } from ".";
+
+<WidgetHeader widget={airQualityWidget} categories={["Health", "Weather"]} />
+
+The Air Quality & UV widget shows the current air quality index for a selected location. It adds the UV index,
+dominant pollutant, particulate matter and the highest available pollen reading as space allows. Open the advanced
+view for a 24-hour AQI and UV chart, all available pollutant and pollen readings, and seven-day daily maxima.
+
+Select the European or US AQI scale, or use the automatic setting. Automatic uses the US scale for viewers whose
+locale region is the United States and the European scale everywhere else. The selected scale stays in widget options
+instead of being repeated beside every reading. Pollen values are individual measured concentrations; the widget does
+not combine them into a single pollen index.
+
+The categories and colors summarize published index bands and are not medical advice. Pollutant concentrations use
+micrograms per cubic meter (`µg/m³`), and pollen uses grains per cubic meter.
+
+<WidgetInteractionGuide />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={airQualityWidget.configuration} />
+
+### Data source
+
+Homarr uses the free Open-Meteo Air Quality API. The widget refreshes active data every 15 minutes and requests a
+seven-day forecast for European AQI, US AQI, UV, particulate matter, ozone, nitrogen dioxide, sulphur dioxide, carbon
+monoxide, and available alder, birch, grass, mugwort, olive and ragweed pollen. Identical location requests reuse the
+server response for 15 minutes. If a refresh fails, Homarr can keep a recent successful response visible for up to 24
+hours instead of replacing it with an empty state.
+
+Set `NO_EXTERNAL_CONNECTION=true` to disable this and other internet-backed requests. If you need to allowlist the
+service, use `https://air-quality-api.open-meteo.com`.

apps/docs/docs/widgets/air-quality/index.ts

@@ -0,0 +1,43 @@
+import type { WidgetDefinition } from "@site/src/types";
+import { IconWind } from "@tabler/icons-react";
+
+export const airQualityWidget: WidgetDefinition = {
+  icon: IconWind,
+  name: "Air Quality & UV",
+  description: "Displays air quality, ultraviolet index, pollutants and pollen for a location.",
+  path: "../../widgets/air-quality",
+  configuration: {
+    items: [
+      {
+        name: "Air quality location",
+        description: "Location used for air quality, UV and pollen data",
+        values: "Select a location through search or longitude/latitude",
+        defaultValue: "Paris / 48.85341, 2.3488",
+      },
+      {
+        name: "AQI standard",
+        description: "Choose the European or US air quality scale, or select one from the viewer's locale",
+        values: { type: "select", options: ["Automatic for locale", "European AQI", "US AQI"] },
+        defaultValue: "Automatic for locale",
+      },
+      {
+        name: "Show UV index",
+        description: "Display the current UV index and its forecast",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show pollutant concentrations",
+        description: "Display particulate matter and gaseous pollutant concentrations",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show pollen concentrations",
+        description: "Display available pollen concentrations",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/clock/index.mdx

@@ -15,6 +15,26 @@ import { clockWidget } from ".";
 
 The clock widget displays the current date and time in a customizable format.
 
+Advanced view turns it into a World Clock. The configured primary timezone stays prominent while New York, Paris, and
+Tokyo are included as secondary defaults. You can add, rename, remove, and reorder up to six cities in widget options;
+London, Sydney, and UTC are also available as quick presets.
+
+The digital advanced view keeps the primary timezone prominent and presents every secondary city as a concise,
+comparable card. The primary clock includes a segmented 24-hour rail with a current-time marker, elapsed and remaining
+time, six-hour ticks, and a legend for night, dawn, day, and dusk. These phases are based on local clock time and are not
+astronomical sunrise or sunset calculations. Secondary cards stop after their localized date and timezone offsets.
+
+The compact widget remains a single numeric clock. The time-format selector shows common Day.js presets with live
+examples and applies to the primary clock. Choosing a format with seconds enables second-level updates; 12-hour and
+24-hour display are selected through those same formats. The date-format selector likewise
+shows live Day.js examples and their tokens. Secondary cities always include a short localized date and a
+Yesterday, Today, or Tomorrow label relative to the primary timezone. UTC and relative offsets follow current timezone
+rules, including daylight-saving changes.
+
+Weather remains optional and uses its own configured location rather than a World Clock city. Its icon is static by
+default and can be animated explicitly; reduced-motion preferences always disable animation. An unsupported saved
+timezone is identified without preventing valid clocks from rendering.
+
 ### Screenshots
 
 import localClock from "./img/local.png";
@@ -27,7 +47,7 @@ import tokyoClock from "./img/tokyo-12-hour.png";
   <img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
 </div>
 
-<WidgetInteractionGuide advancedView={false} />
+<WidgetInteractionGuide />
 
 ### Adding the widget
 

apps/docs/docs/widgets/clock/index.ts

@@ -20,18 +20,6 @@ export const clockWidget: WidgetDefinition = {
         values: { type: "string" },
         defaultValue: "-",
       },
-      {
-        name: "24-hour format",
-        description: "Use 24-hour format instead of 12-hour format.",
-        values: { type: "boolean" },
-        defaultValue: "yes",
-      },
-      {
-        name: "Display seconds",
-        description: "Whether to show seconds in the clock.",
-        values: { type: "boolean" },
-        defaultValue: "no",
-      },
       {
         name: "Use fixed timezone",
         description: "Select custom timezone to display instead of the client timezone.",
@@ -52,21 +40,46 @@ export const clockWidget: WidgetDefinition = {
       },
       {
         name: "Date format",
-        description: "Format of the date displayed below the clock.",
-        values: "A collection of date formats, e.g. 'DD/MM/YYYY', 'MM/DD/YYYY', etc.",
+        description: "Choose a common Day.js date format with a live example and its tokens.",
+        values: "YYYY-MM-DD, DD/MM/YYYY, MM/DD/YYYY, or common long and short date formats",
         defaultValue: "dddd, MMMM D",
       },
       {
-        name: "Custom time format",
-        description: "Format of the time displayed in the clock.",
-        values: 'ISO 8601 format, e.g. "HH:mm:ss", "hh:mm A", etc.',
-        defaultValue: "-",
+        name: "Time format",
+        description:
+          "Choose a common Day.js time format with a live example. The format controls 12/24-hour display and seconds.",
+        values: "HH:mm, HH:mm:ss, h:mm A, or h:mm:ss A",
+        defaultValue: "HH:mm",
       },
       {
-        name: "Custom date format",
-        description: "Format of the date displayed below the clock.",
-        values: 'ISO 8601 format, e.g. "YYYY-MM-DD", "DD/MM/YYYY", etc.',
-        defaultValue: "-",
+        name: "Show weather",
+        description: "Show a compact weather summary from an independently configured location.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Weather location",
+        description: 'Location used by the weather summary. Only shown if "Show weather" is enabled.',
+        values: "A searched city or custom latitude and longitude",
+        defaultValue: "Brisbane",
+      },
+      {
+        name: "Use Fahrenheit",
+        description: 'Use Fahrenheit in the weather summary. Only shown if "Show weather" is enabled.',
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Animate weather icon",
+        description: "Animate the weather icon unless the device requests reduced motion.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "World clock cities",
+        description: "Add, label, and order up to six IANA timezones for advanced view.",
+        values: "Up to six labeled IANA timezones",
+        defaultValue: "New York, Paris, and Tokyo",
       },
     ],
   },

apps/docs/docs/widgets/countdown/index.mdx

@@ -0,0 +1,44 @@
+---
+title: "Countdowns"
+description: "Tracks upcoming events and recurring anniversaries."
+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";
+import { countdownWidget } from ".";
+
+<WidgetHeader widget={countdownWidget} categories={["Time"]} />
+
+The Countdowns widget tracks up to 20 events without an integration. Add each event in widget options, choose its local
+date and time, and select an IANA timezone. Events can be reordered by dragging them.
+
+The compact widget shows the first configured event, so dragging an event to the top selects the countdown displayed on
+the board. Advanced view uses that same event for its larger summary and preserves the configured order within its
+upcoming and completed groups. List cards keep their occurrence date at the bottom, below the optional progress bar.
+
+One-time events remain completed after their target. A yearly event keeps the same local date and wall-clock time in its
+configured timezone, including when daylight-saving offsets change. A February 29 event waits until the next leap year.
+If a configured local time falls in a daylight-saving gap, the first valid time afterward is used; if it occurs twice,
+the earlier occurrence is used.
+
+Progress is optional. One-time events need a start date before a percentage can be calculated. Yearly events show
+progress from the previous occurrence to the next. When enabled, seconds remain visible for every upcoming event.
+
+Browser notifications are an optional local preference in advanced view and are disabled by default. Permission is
+requested only after you enable notifications, and alerts can fire once per occurrence while Homarr is open. Browser
+storage uses the board and widget identifiers to keep preferences separate and prevent duplicate alerts; clearing site
+data resets them. Widget previews do not persist alert preferences.
+
+<WidgetInteractionGuide />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={countdownWidget.configuration} />

apps/docs/docs/widgets/countdown/index.ts

@@ -0,0 +1,31 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconHourglass } from "@tabler/icons-react";
+
+export const countdownWidget: WidgetDefinition = {
+  icon: IconHourglass,
+  name: "Countdowns",
+  description: "Tracks upcoming events and recurring anniversaries.",
+  path: "../../widgets/countdown",
+  configuration: {
+    items: [
+      {
+        name: "Events",
+        description: "Add, edit, and order one-time or yearly events with a date, time, and IANA timezone.",
+        values: "Up to 20 events",
+        defaultValue: "No events",
+      },
+      {
+        name: "Show progress",
+        description: "Show progress from an optional start date, or between yearly occurrences.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show seconds",
+        description: "Keep seconds visible for every upcoming event, including events more than a day away.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/timer/index.mdx

@@ -0,0 +1,54 @@
+---
+title: "Timer / Pomodoro"
+description: "Runs a simple timer or a configurable Pomodoro sequence."
+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";
+import { timerWidget } from ".";
+
+<WidgetHeader widget={timerWidget} categories={["Productivity", "Time"]} />
+
+The Timer / Pomodoro widget runs entirely in your browser and does not require an integration. The compact widget
+always keeps its start or pause button and reset button visible. A running timer uses a saved deadline, so reopening
+the board or returning to a background tab restores the correct remaining time instead of restarting the countdown.
+
+Timer mode uses one configured duration. Pomodoro mode starts with a focus session, follows most completed focus
+sessions with a short break, and uses a long break after the configured number of focus sessions. Automatic break and
+focus starts are separate options and are disabled by default. When automatic starts are enabled, elapsed phases are
+reconciled from their original deadlines after the board returns to the foreground.
+
+Advanced view shows the current sequence, configured durations, and local alert preferences. Browser notifications are
+requested only when enabled. Notification and sound preferences, live progress, deadlines, and cycle position are
+stored locally using the board and widget identifiers. They are separate for each browser or device, are available to
+guest viewers, and are removed by clearing site data. Widget previews are ephemeral and do not write local timer state.
+
+Timer sounds are enabled by default and use the same low-volume Tiks sound system as onboarding: start and pause use
+rising and falling soft-theme cues, reset uses a short click, and phase completion uses the glass theme's resonant
+notification ding. You can disable them in advanced view. The cues respect the device's reduced-motion preference and
+supplement the visible timer state rather than replacing it.
+
+When automatic start is disabled, a completed phase labels the next step as ready and flashes the widget edges with the
+board's secondary color. The border glow and completion chime run together as a five-beat alarm burst at
+300-millisecond intervals, then stop. Reduced-motion and forced-colors modes replace the flash with a static border.
+The current phase stays pinned to the compact widget's top-left corner and wraps when needed. Timer text and controls
+use the dashboard theme's responsive size scale, with secondary details hidden when the widget preview is narrow or
+short.
+
+Alerts can fire while Homarr is open. Browser and operating-system notification settings may still suppress them.
+The timer's mode, durations, session count, and automatic-start behavior are permanent board settings and are edited
+from the widget context menu.
+
+<WidgetInteractionGuide />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={timerWidget.configuration} />

apps/docs/docs/widgets/timer/index.ts

@@ -0,0 +1,61 @@
+import type { WidgetDefinition } from "@site/src/types";
+import { IconClockPlay } from "@tabler/icons-react";
+
+export const timerWidget: WidgetDefinition = {
+  icon: IconClockPlay,
+  name: "Timer / Pomodoro",
+  description: "Runs a simple timer or a configurable Pomodoro sequence.",
+  path: "../../widgets/timer",
+  configuration: {
+    items: [
+      {
+        name: "Mode",
+        description: "Run one reusable timer or a repeating focus and break sequence",
+        values: { type: "select", options: ["Timer", "Pomodoro"] },
+        defaultValue: "Pomodoro",
+      },
+      {
+        name: "Timer minutes",
+        description: "Duration of the reusable timer",
+        values: "1-1440 minutes",
+        defaultValue: "10",
+      },
+      {
+        name: "Focus minutes",
+        description: "Duration of each Pomodoro focus session",
+        values: "1-180 minutes",
+        defaultValue: "25",
+      },
+      {
+        name: "Short break minutes",
+        description: "Duration of breaks between most focus sessions",
+        values: "1-60 minutes",
+        defaultValue: "5",
+      },
+      {
+        name: "Long break minutes",
+        description: "Duration of the break at the end of a Pomodoro cycle",
+        values: "1-180 minutes",
+        defaultValue: "15",
+      },
+      {
+        name: "Focus sessions before a long break",
+        description: "Number of completed focus sessions in one Pomodoro cycle",
+        values: "1-12 sessions",
+        defaultValue: "4",
+      },
+      {
+        name: "Automatically start breaks",
+        description: "Start the next short or long break when a focus session completes",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Automatically start focus sessions",
+        description: "Start the next focus session when a break completes",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/today/index.mdx

@@ -0,0 +1,34 @@
+---
+title: "Today"
+description: "Displays the current date and progress through the calendar."
+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";
+import { todayWidget } from ".";
+
+<WidgetHeader widget={todayWidget} categories={["Date", "Time"]} />
+
+The Today widget presents the current local date without duplicating a live clock. It progressively adds the week
+number, day of year, quarter, remaining days, and calendar progress as more space becomes available.
+
+The advanced view shows week, month, and year progress together with a twelve-month overview. Week numbers can follow
+your locale or the ISO 8601 convention. “Days after today” excludes the current day to keep the remaining-day count
+unambiguous.
+
+The widget runs entirely in your browser and does not send date or location data to an external service. It follows
+the timezone and locale of the device viewing the board, so viewers in different regions can see their own local date.
+
+<WidgetInteractionGuide />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={todayWidget.configuration} />

apps/docs/docs/widgets/today/index.ts

@@ -0,0 +1,43 @@
+import type { WidgetDefinition } from "@site/src/types";
+import { IconCalendarWeek } from "@tabler/icons-react";
+
+export const todayWidget: WidgetDefinition = {
+  icon: IconCalendarWeek,
+  name: "Today",
+  description: "Displays the current date and progress through the calendar.",
+  path: "../../widgets/today",
+  configuration: {
+    items: [
+      {
+        name: "Week numbering",
+        description: "Use locale-specific week numbering or ISO 8601 week numbers",
+        values: { type: "select", options: ["Use locale rules", "ISO 8601"] },
+        defaultValue: "Use locale rules",
+      },
+      {
+        name: "Show week number",
+        description: "Display the current week number when the widget has room",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show day of year",
+        description: "Display the current day number within the year",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show quarter",
+        description: "Display the current calendar quarter",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show year progress",
+        description: "Display progress through the current year",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/weather/index.mdx

@@ -13,23 +13,21 @@ import { weatherWidget } from ".";
 
 <WidgetHeader widget={weatherWidget} categories={["Weather"]} />
 
-The Weather Widget uses your location to display the current, highest and lowest temperature.
-In the compact view, select a condition icon or forecast day to open details with a mouse, keyboard or touch.
-The compact forecast shows up to the configured number of days. The advanced view combines current conditions with the
-available daily forecast, including humidity, wind, gusts, sunrise and sunset. Both views reuse the same cached Open
-Meteo response.
+The Weather Widget displays current conditions and a responsive forecast for a selected location. New widgets start
+with the city and a three-day forecast visible. As the widget gets smaller, it keeps the current condition and
+temperature readable before removing secondary details or forecast days.
 
-### Screenshots
+Select a forecast day to inspect precipitation, apparent temperature, humidity, wind, UV index, sunrise, sunset and
+daylight duration with a mouse, keyboard or touch. Open the advanced view for a current-condition summary, a 24-hour
+temperature and precipitation chart, and the complete seven-day forecast. The chart has an equivalent data table for
+assistive technologies.
 
-import forecastWeather from "./img/forecast.png";
-import currentWeather from "./img/current.png";
-import advancedWeather from "./img/advanced-view.png";
+The **Show humidity** option controls humidity across the compact current-conditions view, advanced summary, hourly
+details, and daily forecast details. Forecast cards use a roomier adaptive grid in advanced view, with four columns on
+the standard desktop surface and fewer columns as the surface narrows.
 
-<div className="flex flex-col gap-1">
-  <img src={forecastWeather} alt="Weather compact forecast" width={238} height={112} />
-  <img src={currentWeather} alt="Weather compact current conditions" width={198} height={93} />
-  <img src={advancedWeather} alt="Weather advanced view with seven-day forecast details" width={800} height={484} />
-</div>
+Weather icons are static by default. Animation can be enabled in the widget configuration, but the operating system's
+reduced-motion preference always disables it.
 
 <WidgetInteractionGuide />
 
@@ -43,5 +41,10 @@ import advancedWeather from "./img/advanced-view.png";
 
 ### Data source
 
-We use the Open Meteo API to fetch the weather and locations.
+We use the Open Meteo API to fetch the weather and locations. Active weather data refreshes every ten minutes, while
+identical location requests can reuse a server response for five minutes. A manual refresh may therefore return the
+same still-current server response. If a refresh fails, Homarr keeps the last successful data visible and shows an
+error indicator.
+
+Set `NO_EXTERNAL_CONNECTION=true` to disable this and other internet-backed requests.
 If you need to whitelist the api, please use the following URL: `https://open-meteo.com`

apps/docs/docs/widgets/weather/index.tsx

@@ -28,8 +28,24 @@ export const weatherWidget: WidgetDefinition = {
         values: {
           type: "boolean",
         },
+        defaultValue: "no",
+      },
+      {
+        name: "Show humidity",
+        description: "Display humidity in current conditions, hourly details, and daily forecasts",
+        values: {
+          type: "boolean",
+        },
         defaultValue: "yes",
       },
+      {
+        name: "Animate weather icons",
+        description: "Animate condition icons unless the operating system requests reduced motion",
+        values: {
+          type: "boolean",
+        },
+        defaultValue: "no",
+      },
       {
         name: "Use imperial speed units",
         description: "Display wind speed in mph instead of km/h",
@@ -59,7 +75,7 @@ export const weatherWidget: WidgetDefinition = {
         values: {
           type: "boolean",
         },
-        defaultValue: "no",
+        defaultValue: "yes",
       },
       {
         name: "Has forecast",
@@ -67,13 +83,13 @@ export const weatherWidget: WidgetDefinition = {
         values: {
           type: "boolean",
         },
-        defaultValue: "no",
+        defaultValue: "yes",
       },
       {
         name: "Amount of forecast days",
         description: "Number of days to show in the forecast",
         values: "1-7",
-        defaultValue: "5",
+        defaultValue: "3",
       },
     ],
   },

apps/docs/src/components/pages/home/hero/widgets/weather-widget.tsx

@@ -1,4 +1,4 @@
-import { IconCloud, IconWind, IconArrowUpRight, IconArrowDownRight } from "@tabler/icons-react";
+import { IconCloud, IconCloudRain, IconSun } from "@tabler/icons-react";
 import { CommonWidgetProps, WidgetCard } from "./card";
 import clsx from "clsx";
 
@@ -6,21 +6,27 @@ export const WeatherWidget = ({ className }: CommonWidgetProps) => {
   return (
     <WidgetCard width={1} className={clsx("gap-2", className)}>
       <div className="flex gap-2 justify-center items-center">
-        <IconCloud size={20} />
-        <span className="text-xl font-bold">10.8°C</span>
-      </div>
-      <div className="flex gap-2 justify-center items-center">
-        <IconWind size={14} />
-        <span className="text-sm">5 km/h</span>
-      </div>
-      <div className="flex gap-1 justify-center items-center">
-        <div className="flex justify-center items-center">
-          <IconArrowUpRight size={14} />
-          <span className="text-sm">13.5°C</span>
+        <IconSun size={22} />
+        <div className="flex flex-col leading-none">
+          <span className="text-xl font-bold">18.4°C</span>
+          <span className="text-xs text-muted-foreground">Paris</span>
         </div>
-        <div className="flex justify-center items-center">
-          <IconArrowDownRight size={14} />
-          <span className="text-sm">6.4°C</span>
+      </div>
+      <div className="flex justify-evenly items-center w-full">
+        <div className="flex flex-col items-center text-xs">
+          <span>Mon</span>
+          <IconSun size={16} />
+          <span>21°</span>
+        </div>
+        <div className="flex flex-col items-center text-xs">
+          <span>Tue</span>
+          <IconCloud size={16} />
+          <span>19°</span>
+        </div>
+        <div className="flex flex-col items-center text-xs">
+          <span>Wed</span>
+          <IconCloudRain size={16} />
+          <span>16°</span>
         </div>
       </div>
     </WidgetCard>

apps/docs/static/api/open-api-schema.json

@@ -2106,6 +2106,10 @@
                     "enum": [
                       "clock",
                       "weather",
+                      "today",
+                      "airQuality",
+                      "countdown",
+                      "timer",
                       "app",
                       "iframe",
                       "video",

apps/nextjs/src/app/[locale]/manage/_access.ts

@@ -0,0 +1,35 @@
+import type { Session } from "@homarr/auth";
+
+import { api } from "@homarr/api/server";
+import { getAppManagementAccess, getIntegrationManagementAccess } from "@homarr/definitions";
+
+/**
+ * Session-aware wrappers around the shared management access rules in `@homarr/definitions`, so the
+ * navigation and the pages resolve access exactly the same way the API does.
+ */
+
+export const getAppsSectionAccess = (session: Session | null) =>
+  getAppManagementAccess(session?.user.permissions ?? []);
+
+/**
+ * Pure variant for callers that already fetched the integrations the user can see, so the list is
+ * only queried once per request.
+ */
+export const getIntegrationsSectionAccess = (
+  session: Session | null,
+  visibleIntegrations: { permissions: { hasFullAccess: boolean } }[],
+) =>
+  getIntegrationManagementAccess(
+    session?.user.permissions ?? [],
+    visibleIntegrations.some((integration) => integration.permissions.hasFullAccess),
+  );
+
+export const getIntegrationsSectionAccessAsync = async (session: Session | null) => {
+  const permissions = session?.user.permissions ?? [];
+
+  // Only pay for the lookup when the answer is not already known from the global permissions.
+  const needsDelegatedLookup =
+    session !== null && !permissions.includes("integration-full-all") && !permissions.includes("integration-create");
+
+  return getIntegrationsSectionAccess(session, needsDelegatedLookup ? await api.integration.all() : []);
+};

apps/nextjs/src/app/[locale]/manage/apps/page.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Text } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";
@@ -16,6 +16,7 @@ import { TourTarget } from "~/components/layout/header/tour-target";
 import { ManageCollectionItem, ManageCollectionPage } from "~/components/manage/manage-collection";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
 import { NoResults } from "~/components/no-results";
+import { getAppsSectionAccess } from "../_access";
 import { AppDeleteButton } from "./_app-delete-button";
 
 const searchParamsSchema = z.object({
@@ -41,16 +42,27 @@ interface AppsPageProps {
 export default async function AppsPage(props: AppsPageProps) {
   const session = await auth();
   if (!session) redirect("/auth/login");
+  const { canManageAll, canCreate, canAccess } = getAppsSectionAccess(session);
+  if (!canAccess) notFound();
+  const canDelete = session.user.permissions.includes("app-full-all");
 
   const searchParams = searchParamsSchema.parse(await props.searchParams);
-  const { items: apps, totalCount } = await api.app.getPaginated(searchParams);
+  // Without app-modify-all the user may add apps but not browse the ones they cannot manage,
+  // so the list stays empty instead of leaking every app name and URL.
+  const { items: apps, totalCount } = canManageAll
+    ? await api.app.getPaginated(searchParams)
+    : { items: [], totalCount: 0 };
   const t = await getScopedI18n("app");
-  const canCreate = session.user.permissions.includes("app-create");
-  const canModify = session.user.permissions.includes("app-modify-all");
-  const canDelete = session.user.permissions.includes("app-full-all");
-  const hasSearch = Boolean(searchParams.search?.trim());
+  const hasSearch = canManageAll && Boolean(searchParams.search?.trim());
 
-  const emptyState = hasSearch ? (
+  const emptyState = !canManageAll ? (
+    <NoResults
+      icon={IconBox}
+      title={t("page.list.noResults.createOnlyTitle")}
+      description={t("page.list.noResults.createOnlyDescription")}
+      action={{ label: t("page.list.noResults.action"), href: "/manage/apps/new" }}
+    />
+  ) : hasSearch ? (
     <NoResults
       icon={IconBox}
       title={t("page.list.noResults.filteredTitle")}
@@ -82,12 +94,14 @@ export default async function AppsPage(props: AppsPageProps) {
         ) : undefined
       }
       toolbar={
-        <SearchInput
-          placeholder={`${t("search")}...`}
-          ariaLabel={t("search")}
-          defaultValue={searchParams.search}
-          flexExpand
-        />
+        canManageAll ? (
+          <SearchInput
+            placeholder={`${t("search")}...`}
+            ariaLabel={t("search")}
+            defaultValue={searchParams.search}
+            flexExpand
+          />
+        ) : undefined
       }
       footer={
         totalCount > searchParams.pageSize ? (
@@ -100,7 +114,6 @@ export default async function AppsPage(props: AppsPageProps) {
         <AppItem
           key={app.id}
           app={app}
-          canModify={canModify}
           canDelete={canDelete}
           editLabel={t("page.list.action.edit", { name: app.name })}
         />
@@ -113,12 +126,11 @@ export default async function AppsPage(props: AppsPageProps) {
 
 interface AppItemProps {
   app: RouterOutputs["app"]["getPaginated"]["items"][number];
-  canModify: boolean;
   canDelete: boolean;
   editLabel: string;
 }
 
-const AppItem = ({ app, canModify, canDelete, editLabel }: AppItemProps) => {
+const AppItem = ({ app, canDelete, editLabel }: AppItemProps) => {
   const descriptionLines = app.description?.split("\n");
   const safeHref = getSafeAppHref(app.href);
 
@@ -157,23 +169,19 @@ const AppItem = ({ app, canModify, canDelete, editLabel }: AppItemProps) => {
         ) : undefined
       }
       actions={
-        canModify || canDelete ? (
-          <ActionIconGroup>
-            {canModify && (
-              <ActionIcon
-                component={Link}
-                href={`/manage/apps/edit/${app.id}`}
-                variant="subtle"
-                color="gray"
-                size={44}
-                aria-label={editLabel}
-              >
-                <IconPencil size={18} stroke={1.5} />
-              </ActionIcon>
-            )}
-            {canDelete && <AppDeleteButton app={app} />}
-          </ActionIconGroup>
-        ) : undefined
+        <ActionIconGroup>
+          <ActionIcon
+            component={Link}
+            href={`/manage/apps/edit/${app.id}`}
+            variant="subtle"
+            color="gray"
+            size={44}
+            aria-label={editLabel}
+          >
+            <IconPencil size={18} stroke={1.5} />
+          </ActionIcon>
+          {canDelete && <AppDeleteButton app={app} />}
+        </ActionIconGroup>
       }
     />
   );

apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Alert, Anchor, Button, ButtonGroup, Fieldset, Group, Stack, Text, TextInput } from "@mantine/core";
 import { IconInfoCircle, IconPencil, IconPlus, IconUnlink } from "@tabler/icons-react";
@@ -27,8 +27,14 @@ import type { AnyMappedTestConnectionError } from "../../_components/test-connec
 
 interface EditIntegrationFormProps {
   integration: RouterOutputs["integration"]["byId"];
-  embedded?: boolean;
+  hideButtons?: boolean;
   onSuccess?: () => void;
+  formRef?: React.Ref<EditIntegrationFormHandle>;
+}
+
+export interface EditIntegrationFormHandle {
+  submit: () => Promise<boolean>;
+  isDirty: () => boolean;
 }
 
 const formSchema = integrationUpdateSchema.omit({ id: true, appId: true }).and(
@@ -44,7 +50,12 @@ const formSchema = integrationUpdateSchema.omit({ id: true, appId: true }).and(
   }),
 );
 
-export const EditIntegrationForm = ({ integration, embedded = false, onSuccess }: EditIntegrationFormProps) => {
+export const EditIntegrationForm = ({
+  integration,
+  hideButtons = false,
+  onSuccess,
+  formRef,
+}: EditIntegrationFormProps) => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
   const allSecretKinds = getAllSecretKindOptions(integration.kind);
@@ -82,147 +93,172 @@ export const EditIntegrationForm = ({ integration, embedded = false, onSuccess }
 
   const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
 
-  const handleSubmitAsync = async ({ app, ...values }: FormType) => {
-    setError(null);
-    let url: string;
-    try {
-      url = hasUrlSecret
-        ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
-        : values.url;
-    } catch {
-      showErrorNotification({
-        title: t("integration.page.edit.notification.error.title"),
-        message: t("integration.page.edit.notification.error.message"),
+  const handleSubmitAsync = useCallback(
+    async ({ app, ...values }: FormType) => {
+      setError(null);
+      let url: string;
+      try {
+        url = hasUrlSecret
+          ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
+          : values.url;
+      } catch {
+        showErrorNotification({
+          title: t("integration.page.edit.notification.error.title"),
+          message: t("integration.page.edit.notification.error.message"),
+        });
+        return false;
+      }
+
+      const data = await mutateAsync({
+        id: integration.id,
+        ...values,
+        url,
+        secrets: values.secrets.map((secret) => ({
+          kind: secret.kind,
+          value: secret.value === "" ? null : secret.value,
+        })),
+        appId: app?.id ?? null,
       });
-      return;
-    }
 
-    const data = await mutateAsync({
-      id: integration.id,
-      ...values,
-      url,
-      secrets: values.secrets.map((secret) => ({
-        kind: secret.kind,
-        value: secret.value === "" ? null : secret.value,
-      })),
-      appId: app?.id ?? null,
-    });
+      // We do it this way as we are unable to send a typesafe error through onError
+      if (data?.error) {
+        setError(data.error);
+        showErrorNotification({
+          title: t("integration.page.edit.notification.error.title"),
+          message: t("integration.page.edit.notification.error.message"),
+        });
+        requestAnimationFrame(() => errorRef.current?.focus());
+        return false;
+      }
 
-    // We do it this way as we are unable to send a typesafe error through onError
-    if (data?.error) {
-      setError(data.error);
-      showErrorNotification({
-        title: t("integration.page.edit.notification.error.title"),
-        message: t("integration.page.edit.notification.error.message"),
+      showSuccessNotification({
+        title: t("integration.page.edit.notification.success.title"),
+        message: t("integration.page.edit.notification.success.message"),
       });
-      requestAnimationFrame(() => errorRef.current?.focus());
-      return;
-    }
+      void Promise.allSettled([utils.integration.invalidate(), utils.widget.invalidate()]);
+      onSuccess?.();
+      if (!hideButtons) {
+        void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
+      }
+      return true;
+    },
+    [hasUrlSecret, hideButtons, integration.id, mutateAsync, onSuccess, router, t, utils.integration, utils.widget],
+  );
 
-    showSuccessNotification({
-      title: t("integration.page.edit.notification.success.title"),
-      message: t("integration.page.edit.notification.success.message"),
-    });
-    void Promise.allSettled([utils.integration.invalidate(), utils.widget.invalidate()]);
-    onSuccess?.();
-    if (!embedded) {
-      void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
-    }
-  };
+  useImperativeHandle(
+    formRef,
+    () => ({
+      submit: () =>
+        new Promise<boolean>((resolve) => {
+          form.onSubmit(
+            async (values) => {
+              try {
+                resolve(await handleSubmitAsync(values));
+              } catch {
+                resolve(false);
+              }
+            },
+            () => resolve(false),
+          )();
+        }),
+      isDirty: () => form.isDirty(),
+    }),
+    [form, handleSubmitAsync],
+  );
 
   const isInitialSecretKinds =
     initialSecretsKinds.every((kind) => form.values.secrets.some((secret) => secret.kind === kind)) &&
     form.values.secrets.length === initialSecretsKinds.length;
 
-  return (
-    <form onSubmit={form.onSubmit(async (values) => await handleSubmitAsync(values))}>
-      <Stack>
-        <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
+  const formFields = (
+    <Stack>
+      <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
 
-        {hasUrlSecret ? null : (
-          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
-        )}
+      {hasUrlSecret ? null : (
+        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+      )}
 
-        <Fieldset legend={t("integration.secrets.title")}>
-          <Stack gap="sm">
-            {allSecretKinds.length > 1 && (
-              <SecretKindsSegmentedControl
-                defaultKinds={initialSecretsKinds}
-                secretKinds={allSecretKinds}
-                form={form}
-              />
-            )}
-            {!isInitialSecretKinds
-              ? null
-              : form.values.secrets.map((secret, index) => (
-                  <SecretCard
-                    key={secret.kind}
-                    secret={secretsMap.get(secret.kind) ?? { kind: secret.kind, value: null, updatedAt: null }}
-                    onCancel={() =>
-                      new Promise((resolve) => {
-                        // When nothing changed, just close the secret card
-                        if ((secret.value ?? "") === (secretsMap.get(secret.kind)?.value ?? "")) {
-                          return resolve(true);
-                        }
-                        openConfirmModal({
-                          title: t("integration.secrets.reset.title"),
-                          children: t("integration.secrets.reset.message"),
-                          onCancel: () => resolve(false),
-                          onConfirm: () => {
-                            form.setFieldValue(`secrets.${index}.value`, secretsMap.get(secret.kind)?.value ?? "");
-                            resolve(true);
-                          },
-                        });
-                      })
-                    }
-                  >
-                    <IntegrationSecretInput
-                      label={t(`integration.secrets.kind.${secret.kind}.newLabel`)}
-                      key={secret.kind}
-                      kind={secret.kind}
-                      {...form.getInputProps(`secrets.${index}.value`)}
-                    />
-                  </SecretCard>
-                ))}
-            {isInitialSecretKinds
-              ? null
-              : form.values.secrets.map(({ kind }, index) => (
+      <Fieldset legend={t("integration.secrets.title")}>
+        <Stack gap="sm">
+          {allSecretKinds.length > 1 && (
+            <SecretKindsSegmentedControl defaultKinds={initialSecretsKinds} secretKinds={allSecretKinds} form={form} />
+          )}
+          {!isInitialSecretKinds
+            ? null
+            : form.values.secrets.map((secret, index) => (
+                <SecretCard
+                  key={secret.kind}
+                  secret={secretsMap.get(secret.kind) ?? { kind: secret.kind, value: null, updatedAt: null }}
+                  onCancel={() =>
+                    new Promise((resolve) => {
+                      // When nothing changed, just close the secret card
+                      if ((secret.value ?? "") === (secretsMap.get(secret.kind)?.value ?? "")) {
+                        return resolve(true);
+                      }
+                      openConfirmModal({
+                        title: t("integration.secrets.reset.title"),
+                        children: t("integration.secrets.reset.message"),
+                        onCancel: () => resolve(false),
+                        onConfirm: () => {
+                          form.setFieldValue(`secrets.${index}.value`, secretsMap.get(secret.kind)?.value ?? "");
+                          resolve(true);
+                        },
+                      });
+                    })
+                  }
+                >
                   <IntegrationSecretInput
-                    withAsterisk
-                    key={kind}
-                    kind={kind}
+                    label={t(`integration.secrets.kind.${secret.kind}.newLabel`)}
+                    key={secret.kind}
+                    kind={secret.kind}
                     {...form.getInputProps(`secrets.${index}.value`)}
                   />
-                ))}
-            {form.values.secrets.length === 0 && (
-              <Alert icon={<IconInfoCircle size={"1rem"} />} color={"blue"}>
-                <Text c={"blue"}>{t("integration.secrets.noSecretsRequired.text")}</Text>
-              </Alert>
-            )}
-          </Stack>
-        </Fieldset>
-
-        <IntegrationLinkApp value={form.values.app} onChange={(app) => form.setFieldValue("app", app)} />
-
-        {error !== null && (
-          <div ref={errorRef} role="alert" tabIndex={-1}>
-            <IntegrationTestConnectionError error={error} url={form.values.url} />
-          </div>
-        )}
-
-        <Group justify="end" align="center">
-          {!embedded && (
-            <Button variant="default" component={Link} href="/manage/integrations">
-              {t("common.action.backToOverview")}
-            </Button>
+                </SecretCard>
+              ))}
+          {isInitialSecretKinds
+            ? null
+            : form.values.secrets.map(({ kind }, index) => (
+                <IntegrationSecretInput
+                  withAsterisk
+                  key={kind}
+                  kind={kind}
+                  {...form.getInputProps(`secrets.${index}.value`)}
+                />
+              ))}
+          {form.values.secrets.length === 0 && (
+            <Alert icon={<IconInfoCircle size={"1rem"} />} color={"blue"}>
+              <Text c={"blue"}>{t("integration.secrets.noSecretsRequired.text")}</Text>
+            </Alert>
           )}
+        </Stack>
+      </Fieldset>
+
+      <IntegrationLinkApp value={form.values.app} onChange={(app) => form.setFieldValue("app", app)} />
+
+      {error !== null && (
+        <div ref={errorRef} role="alert" tabIndex={-1}>
+          <IntegrationTestConnectionError error={error} url={form.values.url} />
+        </div>
+      )}
+
+      {!hideButtons && (
+        <Group justify="end" align="center">
+          <Button variant="default" component={Link} href="/manage/integrations">
+            {t("common.action.backToOverview")}
+          </Button>
           <Button type="submit" loading={isPending}>
             {t("integration.testConnection.action.edit")}
           </Button>
         </Group>
-      </Stack>
-    </form>
+      )}
+    </Stack>
   );
+
+  if (hideButtons) {
+    return formFields;
+  }
+
+  return <form onSubmit={form.onSubmit(async (values) => await handleSubmitAsync(values))}>{formFields}</form>;
 };
 
 type FormType = z.infer<typeof formSchema>;

apps/nextjs/src/app/[locale]/manage/integrations/page.tsx

@@ -1,5 +1,5 @@
-import { redirect } from "next/navigation";
-import { ActionIcon, ActionIconGroup, Anchor, Badge, Text } from "@mantine/core";
+import { notFound, redirect } from "next/navigation";
+import { ActionIcon, ActionIconGroup, Anchor, Badge, Stack, Text } from "@mantine/core";
 import { IconPencil, IconPlugX } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
@@ -15,6 +15,7 @@ import { TourTarget } from "~/components/layout/header/tour-target";
 import { ManageCollectionItem, ManageCollectionPage } from "~/components/manage/manage-collection";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
 import { NoResults } from "~/components/no-results";
+import { getIntegrationsSectionAccess } from "../_access";
 import { DeleteIntegrationActionButton } from "./_integration-buttons";
 
 const searchParamsSchema = z.object({ search: z.string().optional() });
@@ -29,11 +30,22 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
 
   const searchParams = searchParamsSchema.parse(await props.searchParams);
   const integrations = await api.integration.all();
+  const {
+    canManageAll: hasGlobalFullAccess,
+    canCreate,
+    canAccess,
+  } = getIntegrationsSectionAccess(session, integrations);
+  if (!canAccess) notFound();
+
   const t = await getScopedI18n("integration");
-  const canCreate = session.user.permissions.includes("integration-create");
-  const hasGlobalFullAccess = session.user.permissions.includes("integration-full-all");
+  // Without integration-full-all only the integrations that were explicitly delegated to the user
+  // are manageable, so the list never shows an integration they cannot open.
+  const manageableIntegrations = integrations.filter(
+    (integration) => hasGlobalFullAccess || integration.permissions.hasFullAccess,
+  );
+
   const query = searchParams.search?.trim().toLocaleLowerCase() ?? "";
-  const filteredIntegrations = integrations
+  const filteredIntegrations = manageableIntegrations
     .filter((integration) => {
       if (!query) return true;
       return [integration.name, getIntegrationName(integration.kind), integration.url].some((value) =>
@@ -53,7 +65,14 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
       ariaLabel={t("page.list.ariaLabel")}
       itemCount={filteredIntegrations.length}
       emptyState={
-        hasSearch ? (
+        manageableIntegrations.length === 0 && !hasGlobalFullAccess ? (
+          <NoResults
+            icon={IconPlugX}
+            title={t("page.list.noResults.createOnlyTitle")}
+            description={t("page.list.noResults.createOnlyDescription")}
+            action={{ label: t("page.list.noResults.action"), href: "/manage/integrations/new" }}
+          />
+        ) : hasSearch ? (
           <NoResults
             icon={IconPlugX}
             title={t("page.list.noResults.filteredTitle")}
@@ -93,24 +112,33 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
       floatingPrimaryAction={canCreate}
     >
       {filteredIntegrations.map((integration) => (
-        <IntegrationItem
-          key={integration.id}
-          integration={integration}
-          canManage={hasGlobalFullAccess || integration.permissions.hasFullAccess}
-        />
+        <IntegrationItem key={integration.id} integration={integration} />
       ))}
     </ManageCollectionPage>
   );
 
-  return filteredIntegrations.length > 0 ? <TourTarget id="manage-integrations-list">{page}</TourTarget> : page;
+  const pageContent =
+    filteredIntegrations.length > 0 ? <TourTarget id="manage-integrations-list">{page}</TourTarget> : page;
+
+  if (hasGlobalFullAccess) {
+    return pageContent;
+  }
+
+  return (
+    <Stack gap="sm">
+      <Text size="sm" c="dimmed">
+        {t("page.list.scopedNote")}
+      </Text>
+      {pageContent}
+    </Stack>
+  );
 }
 
 interface IntegrationItemProps {
   integration: RouterOutputs["integration"]["all"][number];
-  canManage: boolean;
 }
 
-const IntegrationItem = async ({ integration, canManage }: IntegrationItemProps) => {
+const IntegrationItem = async ({ integration }: IntegrationItemProps) => {
   const t = await getScopedI18n("integration");
   const kindName = getIntegrationName(integration.kind);
   const safeUrl = getSafeApplicationUrl(integration.url);
@@ -143,21 +171,19 @@ const IntegrationItem = async ({ integration, canManage }: IntegrationItemProps)
         ) : undefined
       }
       actions={
-        canManage ? (
-          <ActionIconGroup>
-            <ActionIcon
-              component={Link}
-              href={`/manage/integrations/edit/${integration.id}`}
-              variant="subtle"
-              color="gray"
-              size={44}
-              aria-label={t("page.list.action.edit", { name: integration.name })}
-            >
-              <IconPencil size={18} stroke={1.5} />
-            </ActionIcon>
-            <DeleteIntegrationActionButton integration={integration} />
-          </ActionIconGroup>
-        ) : undefined
+        <ActionIconGroup>
+          <ActionIcon
+            component={Link}
+            href={`/manage/integrations/edit/${integration.id}`}
+            variant="subtle"
+            color="gray"
+            size={44}
+            aria-label={t("page.list.action.edit", { name: integration.name })}
+          >
+            <IconPencil size={18} stroke={1.5} />
+          </ActionIcon>
+          <DeleteIntegrationActionButton integration={integration} />
+        </ActionIconGroup>
       }
     />
   );

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -44,6 +44,7 @@ import { MainNavigation } from "~/components/layout/navigation";
 import { ClientShell } from "~/components/layout/shell";
 import { ManageTourGate } from "~/components/onboarding/manage-tour-gate";
 import { env as nextEnv } from "~/env";
+import { getAppsSectionAccess, getIntegrationsSectionAccessAsync } from "./_access";
 
 const logger = createLogger({ module: "manageLayout" });
 
@@ -65,6 +66,8 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
     sessionPromise,
     shouldRunManageTourPromise,
   ]);
+  const appsAccess = getAppsSectionAccess(session);
+  const integrationsAccess = await getIntegrationsSectionAccessAsync(session);
   const navigationLinks: NavigationLink[] = [
     {
       label: t("items.home"),
@@ -82,7 +85,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       icon: IconBox,
       href: "/manage/apps",
       label: t("items.apps"),
-      hidden: !session?.user.permissions.includes("app-create"),
+      hidden: !appsAccess.canAccess,
       iconProps: {
         strokeWidth: 2.5,
       },
@@ -92,7 +95,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       icon: IconAffiliateFilled,
       href: "/manage/integrations",
       label: t("items.integrations"),
-      hidden: !session?.user.permissions.includes("integration-create"),
+      hidden: !integrationsAccess.canAccess,
       "data-onboarding-tour-id": "manage-integrations",
     },
     {

apps/nextjs/src/app/[locale]/manage/not-found.tsx

@@ -1,6 +1,7 @@
-import { Center, Stack, Text, Title } from "@mantine/core";
+import { Anchor, Center, Stack, Text, Title } from "@mantine/core";
 
 import { getScopedI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 
 export default async function NotFound() {
   const t = await getScopedI18n("management.notFound");
@@ -9,6 +10,9 @@ export default async function NotFound() {
       <Stack align="center">
         <Title order={1}>{t("title")}</Title>
         <Text>{t("text")}</Text>
+        <Anchor component={Link} href="/manage">
+          {t("backToHome")}
+        </Anchor>
       </Stack>
     </Center>
   );

apps/nextjs/src/app/[locale]/manage/page.tsx

@@ -29,7 +29,12 @@ export default async function ManagementPage() {
       <Space h="md" />
       <SimpleGrid cols={{ xs: 1, sm: 2, md: 3 }}>
         {statistics.map((statistic) => (
-          <Card component={Link} href={statistic.path} key={statistic.path}>
+          <Card
+            component={Link}
+            href={statistic.path}
+            key={statistic.path}
+            aria-label={`${statistic.count} ${t(`statistic.${statistic.titleKey}`)}`}
+          >
             <Group justify="space-between" wrap="nowrap">
               <Group wrap="nowrap">
                 <Text size="xl" fw={700}>
@@ -42,7 +47,7 @@ export default async function ManagementPage() {
                   <Text fw={600}>{t(`statistic.${statistic.titleKey}`)}</Text>
                 </Stack>
               </Group>
-              <IconArrowRight size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />
+              <IconArrowRight size={16} stroke={1.5} color="var(--mantine-color-dimmed)" aria-hidden="true" />
             </Group>
           </Card>
         ))}

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx

@@ -1,17 +1,43 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useCallback } from "react";
-import { Button, Card, Group, Switch, Text, Transition } from "@mantine/core";
+import { useCallback, useId } from "react";
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Collapse,
+  Divider,
+  Group,
+  SegmentedControl,
+  Stack,
+  Text,
+  Tooltip,
+  Transition,
+  UnstyledButton,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconShieldExclamation } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { objectEntries } from "@homarr/common";
-import type { GroupPermissionKey } from "@homarr/definitions";
-import { groupPermissionKeys } from "@homarr/definitions";
+import { objectEntries, objectKeys } from "@homarr/common";
+import type { GroupPermissionKey, PermissionMatrixCategory, PermissionMatrixState } from "@homarr/definitions";
+import {
+  getPermissionsWithChildren,
+  groupPermissionKeys,
+  isCapabilityImpliedByLevel,
+  matrixStateToPermissions,
+  permissionMatrix,
+  permissionsToMatrixState,
+} from "@homarr/definitions";
 import { createFormContext } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
+export type PermissionLabels = Partial<Record<GroupPermissionKey, string>>;
+
 const [FormProvider, useFormContext, useForm] = createFormContext<FormType>();
 
 interface PermissionFormProps {
@@ -19,27 +45,17 @@ interface PermissionFormProps {
 }
 
 export const PermissionForm = ({ children, initialPermissions }: PropsWithChildren<PermissionFormProps>) => {
+  // Mantine compares each field against the values snapshot, so toggling a control back to its
+  // saved value clears the dirty state on its own - no manual bookkeeping needed here.
   const form = useForm({
     initialValues: groupPermissionKeys.reduce((acc, key) => {
       acc[key] = initialPermissions.includes(key);
       return acc;
     }, {} as FormType),
-    onValuesChange(values) {
-      const currentKeys = objectEntries(values)
-        .filter(([_key, value]) => Boolean(value))
-        .map(([key]) => key);
-
-      if (
-        currentKeys.every((key) => initialPermissions.includes(key)) &&
-        initialPermissions.every((key) => currentKeys.includes(key))
-      ) {
-        form.resetDirty(); // Reset dirty state if all keys are the same as initial
-      }
-    },
   });
 
   return (
-    <form>
+    <form onSubmit={(event) => event.preventDefault()}>
       <FormProvider form={form}>{children}</FormProvider>
     </form>
   );
@@ -47,15 +63,329 @@ export const PermissionForm = ({ children, initialPermissions }: PropsWithChildr
 
 type FormType = Record<GroupPermissionKey, boolean>;
 
-export const PermissionSwitch = ({ name }: { name: GroupPermissionKey }) => {
-  const form = useFormContext();
+type MatrixForm = ReturnType<typeof useFormContext>;
 
-  const props = form.getInputProps(name, {
-    withError: false,
-    type: "checkbox",
+const emptyMatrixState = (): PermissionMatrixState =>
+  objectKeys(permissionMatrix).reduce((acc, category) => {
+    acc[category] = { level: 0, capabilities: [] };
+    return acc;
+  }, {} as PermissionMatrixState);
+
+const matrixStateOf = (values: FormType) => permissionsToMatrixState(groupPermissionKeys.filter((key) => values[key]));
+
+export const getMatrixLevel = (values: FormType, category: PermissionMatrixCategory): number =>
+  matrixStateOf(values)[category].level;
+
+export const hasMatrixCapability = (
+  values: FormType,
+  category: PermissionMatrixCategory,
+  capability: GroupPermissionKey,
+): boolean => matrixStateOf(values)[category].capabilities.includes(capability);
+
+export const applyMatrixLevel = (form: MatrixForm, category: PermissionMatrixCategory, level: number) => {
+  const targetKeys = new Set(
+    matrixStateToPermissions({ ...emptyMatrixState(), [category]: { level, capabilities: [] } }),
+  );
+  permissionMatrix[category].levels.forEach((key) => {
+    form.setFieldValue(key, targetKeys.has(key));
   });
+  // Capability keys are deliberately left untouched: a level that implies one already covers it,
+  // and an explicitly granted capability must survive lowering the level again.
+};
 
-  return <Switch {...props} />;
+export const applyMatrixCapability = (form: MatrixForm, capability: GroupPermissionKey, granted: boolean) => {
+  form.setFieldValue(capability, granted);
+};
+
+const presets = {
+  viewer: {
+    board: { level: 1, capabilities: [] },
+    app: { level: 0, capabilities: ["app-use-all"] },
+    integration: { level: 1, capabilities: [] },
+    media: { level: 1, capabilities: [] },
+  },
+  editor: {
+    board: { level: 2, capabilities: ["board-create"] },
+    app: { level: 1, capabilities: ["app-use-all"] },
+    integration: { level: 2, capabilities: ["integration-create"] },
+    "search-engine": { level: 1, capabilities: [] },
+    media: { level: 1, capabilities: ["media-upload"] },
+  },
+  admin: { admin: { level: 1, capabilities: [] } },
+} satisfies Record<string, Partial<PermissionMatrixState>>;
+
+export type PermissionPreset = keyof typeof presets;
+
+const presetToFormState = (preset: PermissionPreset): FormType => {
+  const presetState: Partial<PermissionMatrixState> = presets[preset];
+  const state = objectKeys(permissionMatrix).reduce((acc, category) => {
+    acc[category] = presetState[category] ?? { level: 0, capabilities: [] };
+    return acc;
+  }, {} as PermissionMatrixState);
+  const enabledKeys = new Set(matrixStateToPermissions(state));
+
+  return groupPermissionKeys.reduce((acc, key) => {
+    acc[key] = enabledKeys.has(key);
+    return acc;
+  }, {} as FormType);
+};
+
+export const applyPreset = (form: MatrixForm, preset: PermissionPreset) => {
+  form.setValues(presetToFormState(preset));
+};
+
+export const getActivePreset = (values: FormType): PermissionPreset | null => {
+  return (
+    objectKeys(presets).find((preset) => {
+      const presetValues = presetToFormState(preset);
+      return groupPermissionKeys.every((key) => presetValues[key] === values[key]);
+    }) ?? null
+  );
+};
+
+/**
+ * Short, scannable label for a level. Categories with a single level use their permission label
+ * instead, so the control reads "No access | View logs" rather than "No access | Enabled".
+ */
+const levelLabelKey = (key: GroupPermissionKey) => {
+  if (key.endsWith("-view-all")) return "view" as const;
+  if (key.endsWith("-use-all")) return "use" as const;
+  if (key.endsWith("-interact-all")) return "interact" as const;
+  if (key.endsWith("-modify-all")) return "modify" as const;
+  if (key.endsWith("-full-all")) return "full" as const;
+  return null;
+};
+
+interface MatrixImpliedHintProps {
+  category: PermissionMatrixCategory;
+  permissionLabels: PermissionLabels;
+}
+
+export const MatrixImpliedHint = ({ category, permissionLabels }: MatrixImpliedHintProps) => {
+  const form = useFormContext();
+  const tPermissions = useScopedI18n("group.permission");
+
+  const level = getMatrixLevel(form.getValues(), category);
+  if (level === 0) {
+    return null;
+  }
+
+  const checkedKeys: GroupPermissionKey[] = permissionMatrix[category].levels.slice(0, level);
+  const implied = getPermissionsWithChildren(checkedKeys).filter((key) => !checkedKeys.includes(key));
+  if (implied.length === 0) {
+    return null;
+  }
+
+  const labels = implied.map((key) => permissionLabels[key] ?? key);
+
+  return (
+    <Text size="xs" c="dimmed">
+      {tPermissions("matrix.impliedHint", { permissions: labels.join(", ") })}
+    </Text>
+  );
+};
+
+interface MatrixRowProps {
+  category: PermissionMatrixCategory;
+  permissionLabels: PermissionLabels;
+  permissionDescriptions: PermissionLabels;
+}
+
+export const MatrixRow = ({ category, permissionLabels, permissionDescriptions }: MatrixRowProps) => {
+  const form = useFormContext();
+  const tPermissions = useScopedI18n("group.permission");
+
+  const values = form.getValues();
+  const level = getMatrixLevel(values, category);
+  const isDanger = category === "admin";
+  const disabledByAdmin = !isDanger && getMatrixLevel(values, "admin") > 0;
+  const { levels, capabilities } = permissionMatrix[category];
+  const hasSingleLevel = levels.length === 1;
+
+  const data = [
+    { value: "0", label: tPermissions("matrix.none") },
+    ...levels.map((key, index) => {
+      const shortKey = hasSingleLevel ? null : levelLabelKey(key);
+      return {
+        value: String(index + 1),
+        label: shortKey === null ? (permissionLabels[key] ?? key) : tPermissions(`matrix.level.${shortKey}`),
+      };
+    }),
+  ];
+
+  const capabilityStates = capabilities.map((capability) => ({
+    capability,
+    checked: hasMatrixCapability(values, category, capability),
+    implied: isCapabilityImpliedByLevel(category, capability, level),
+  }));
+
+  const selectedKey = level === 0 ? undefined : levels[level - 1];
+  // With no access level but a capability granted, describing the row as "no access" would
+  // contradict the checkbox next to it, so the granted capability describes the row instead.
+  const describedKey = selectedKey ?? capabilityStates.find(({ checked }) => checked)?.capability;
+  const description =
+    describedKey === undefined ? tPermissions("matrix.noneDescription") : (permissionDescriptions[describedKey] ?? "");
+
+  return (
+    <Stack gap={6}>
+      <Group gap="sm" wrap="wrap" align="center" justify="space-between">
+        <Group gap={6} wrap="nowrap">
+          {isDanger && <IconShieldExclamation size={18} color="var(--mantine-color-red-8)" />}
+          <Text fw={500} c={isDanger ? "red.8" : undefined}>
+            {tPermissions(`${category}.title`)}
+          </Text>
+        </Group>
+        <Group gap="md" wrap="wrap" align="center">
+          <SegmentedControl
+            size="sm"
+            data={data}
+            value={String(level)}
+            disabled={disabledByAdmin}
+            aria-label={tPermissions(`${category}.title`)}
+            onChange={(value) => applyMatrixLevel(form, category, Number(value))}
+          />
+          {/* Fixed-width column so every level control lines up, whatever capabilities a row has. */}
+          <Box w={{ base: "auto", sm: 230 }}>
+            <Stack gap={4}>
+              {capabilityStates.map(({ capability, checked, implied }) => (
+                <Tooltip
+                  key={capability}
+                  label={tPermissions("matrix.capabilityIncluded", { level: data[level]?.label ?? "" })}
+                  disabled={!implied}
+                >
+                  <Checkbox
+                    size="sm"
+                    label={permissionLabels[capability] ?? capability}
+                    checked={checked}
+                    disabled={disabledByAdmin || implied}
+                    onChange={(event) => applyMatrixCapability(form, capability, event.currentTarget.checked)}
+                  />
+                </Tooltip>
+              ))}
+            </Stack>
+          </Box>
+        </Group>
+      </Group>
+      <Text size="xs" c="dimmed">
+        {description}
+      </Text>
+      {disabledByAdmin && (
+        <Text size="xs" c="dimmed">
+          {tPermissions("matrix.grantedViaAdmin")}
+        </Text>
+      )}
+      <MatrixImpliedHint category={category} permissionLabels={permissionLabels} />
+    </Stack>
+  );
+};
+
+interface PermissionMatrixProps {
+  permissionLabels: PermissionLabels;
+  permissionDescriptions: PermissionLabels;
+}
+
+export const PermissionMatrix = ({ permissionLabels, permissionDescriptions }: PermissionMatrixProps) => (
+  <Card withBorder p="md">
+    <Stack gap="md">
+      {objectKeys(permissionMatrix).map((category, index) => (
+        <Stack key={category} gap="md">
+          {index > 0 && <Divider />}
+          <MatrixRow
+            category={category}
+            permissionLabels={permissionLabels}
+            permissionDescriptions={permissionDescriptions}
+          />
+        </Stack>
+      ))}
+    </Stack>
+  </Card>
+);
+
+export const PresetButtons = () => {
+  const form = useFormContext();
+  const tPermissions = useScopedI18n("group.permission");
+  const activePreset = getActivePreset(form.getValues());
+
+  return (
+    <Group gap="xs" wrap="wrap">
+      <Text size="sm" fw={500}>
+        {tPermissions("matrix.preset.label")}
+      </Text>
+      {(["viewer", "editor", "admin"] as const).map((preset) => (
+        <Tooltip key={preset} label={tPermissions(`matrix.preset.${preset}Description`)}>
+          <Button
+            size="xs"
+            variant={activePreset === preset ? "filled" : "default"}
+            onClick={() => applyPreset(form, preset)}
+          >
+            {tPermissions(`matrix.preset.${preset}`)}
+          </Button>
+        </Tooltip>
+      ))}
+      {activePreset === null && <Badge variant="light">{tPermissions("matrix.preset.custom")}</Badge>}
+    </Group>
+  );
+};
+
+interface EffectivePermissionPreviewProps {
+  permissionLabels: PermissionLabels;
+}
+
+export const EffectivePermissionPreview = ({ permissionLabels }: EffectivePermissionPreviewProps) => {
+  const form = useFormContext();
+  const tPermissions = useScopedI18n("group.permission");
+  const [opened, { toggle }] = useDisclosure(false);
+  const panelId = useId();
+
+  const values = form.getValues();
+  const checkedKeys = groupPermissionKeys.filter((key) => values[key]);
+  const effective = getPermissionsWithChildren(checkedKeys);
+
+  const grouped = objectKeys(permissionMatrix)
+    .map((category) => ({
+      category,
+      keys: effective.filter((key) => key === category || key.startsWith(`${category}-`)),
+    }))
+    .filter(({ keys }) => keys.length > 0);
+
+  return (
+    <Card withBorder p="md">
+      <UnstyledButton onClick={toggle} w="100%" aria-expanded={opened} aria-controls={panelId}>
+        <Group justify="space-between" wrap="nowrap">
+          <Stack gap={0}>
+            <Text fw={500}>{tPermissions("matrix.effective.title")}</Text>
+            <Text size="xs" c="dimmed">
+              {tPermissions("matrix.effective.description")}
+            </Text>
+          </Stack>
+          <Badge variant="light">{effective.length}</Badge>
+        </Group>
+      </UnstyledButton>
+      <Collapse id={panelId} expanded={opened}>
+        <Stack gap="xs" mt="sm">
+          {grouped.length === 0 ? (
+            <Text size="sm" c="dimmed">
+              {tPermissions("matrix.effective.empty")}
+            </Text>
+          ) : (
+            grouped.map(({ category, keys }) => (
+              <Group key={category} gap="xs" wrap="wrap" align="flex-start">
+                <Text size="sm" fw={500}>
+                  {tPermissions(`${category}.title`)}
+                </Text>
+                <Badge size="sm" variant="light">
+                  {keys.length}
+                </Badge>
+                <Text size="sm" c="dimmed">
+                  {keys.map((key) => permissionLabels[key] ?? key).join(", ")}
+                </Text>
+              </Group>
+            ))
+          )}
+        </Stack>
+      </Collapse>
+    </Card>
+  );
 };
 
 interface SaveAffixProps {
@@ -80,8 +410,10 @@ export const SaveAffix = ({ groupId }: SaveAffixProps) => {
       },
       {
         onSuccess: () => {
-          // Set new initial values for discard and reset dirty state
+          // setInitialValues moves the snapshot so Discard returns here, but only resetDirty clears
+          // the dirty flags that keep the unsaved-changes bar on screen.
           form.setInitialValues(values);
+          form.resetDirty(values);
           showSuccessNotification({
             title: tNotification("success.title"),
             message: tNotification("success.message"),

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import { notFound } from "next/navigation";
-import { Card, CardSection, Divider, Group, Stack, Text, Title } from "@mantine/core";
+import { Stack, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
@@ -9,7 +8,14 @@ import type { GroupPermissionKey } from "@homarr/definitions";
 import { groupPermissions } from "@homarr/definitions";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
-import { PermissionForm, PermissionSwitch, SaveAffix } from "./_group-permission-form";
+import type { PermissionLabels } from "./_group-permission-form";
+import {
+  EffectivePermissionPreview,
+  PermissionForm,
+  PermissionMatrix,
+  PresetButtons,
+  SaveAffix,
+} from "./_group-permission-form";
 
 interface GroupPermissionsPageProps {
   params: Promise<{
@@ -26,27 +32,21 @@ export default async function GroupPermissionsPage(props: GroupPermissionsPagePr
   }
 
   const group = await api.group.getById({ id: params.id });
-  const tPermissions = await getScopedI18n("group.permission");
   const t = await getI18n();
 
+  const { permissionLabels, permissionDescriptions } = await buildPermissionTextsAsync();
+
   return (
     <Stack>
       <Title>{t("management.page.group.setting.permissions.title")}</Title>
 
       <PermissionForm initialPermissions={group.permissions}>
         <Stack pos="relative">
-          {objectKeys(groupPermissions).map((group) => {
-            const isDanger = group === "admin";
+          <PresetButtons />
 
-            return (
-              <Stack key={group} gap="sm">
-                <Title order={2} c={isDanger ? "red.8" : undefined}>
-                  {tPermissions(`${group}.title`)}
-                </Title>
-                <PermissionCard isDanger={isDanger} group={group} />
-              </Stack>
-            );
-          })}
+          <PermissionMatrix permissionLabels={permissionLabels} permissionDescriptions={permissionDescriptions} />
+
+          <EffectivePermissionPreview permissionLabels={permissionLabels} />
 
           <SaveAffix groupId={group.id} />
         </Stack>
@@ -55,66 +55,21 @@ export default async function GroupPermissionsPage(props: GroupPermissionsPagePr
   );
 }
 
-interface PermissionCardProps {
-  group: keyof typeof groupPermissions;
-  isDanger: boolean;
-}
+const buildPermissionTextsAsync = async () => {
+  const permissionLabels: PermissionLabels = {};
+  const permissionDescriptions: PermissionLabels = {};
 
-const PermissionCard = async ({ group, isDanger }: PermissionCardProps) => {
-  const t = await getScopedI18n(`group.permission.${group}.item`);
-  const item = groupPermissions[group];
-  const permissions = typeof item !== "boolean" ? item : ([group] as "admin"[]);
+  for (const category of objectKeys(groupPermissions)) {
+    const tItem = await getScopedI18n(`group.permission.${category}.item`);
+    const item = groupPermissions[category];
+    const suffixes = typeof item !== "boolean" ? item : (["admin"] as const);
 
-  return (
-    <Card
-      p="md"
-      style={{
-        borderColor: isDanger ? "var(--mantine-color-red-8)" : undefined,
-      }}
-    >
-      <Stack gap="sm">
-        {permissions.map((permission, index) => (
-          <React.Fragment key={permission}>
-            <PermissionRow
-              name={createGroupPermissionKey(group, permission)}
-              label={t(`${permission}.label`)}
-              description={t(`${permission}.description`)}
-            />
-
-            {index < permissions.length - 1 && (
-              <CardSection>
-                <Divider />
-              </CardSection>
-            )}
-          </React.Fragment>
-        ))}
-      </Stack>
-    </Card>
-  );
-};
-
-const createGroupPermissionKey = (group: keyof typeof groupPermissions, permission: string): GroupPermissionKey => {
-  if (typeof groupPermissions[group] === "boolean") {
-    return group as GroupPermissionKey;
+    suffixes.forEach((suffix) => {
+      const key = (typeof item !== "boolean" ? `${category}-${suffix}` : "admin") as GroupPermissionKey;
+      permissionLabels[key] = tItem(`${suffix}.label`);
+      permissionDescriptions[key] = tItem(`${suffix}.description`);
+    });
   }
 
-  return `${group}-${permission}` as GroupPermissionKey;
-};
-
-interface PermissionRowProps {
-  name: GroupPermissionKey;
-  label: string;
-  description: string;
-}
-
-const PermissionRow = ({ name, label, description }: PermissionRowProps) => {
-  return (
-    <Group justify="space-between" align="center" wrap="nowrap">
-      <Stack gap={0}>
-        <Text fw={500}>{label}</Text>
-        <Text c="gray.5">{description}</Text>
-      </Stack>
-      <PermissionSwitch name={name} />
-    </Group>
-  );
+  return { permissionLabels, permissionDescriptions };
 };

apps/nextjs/src/components/board/items/item-content.tsx

@@ -227,7 +227,9 @@ const LoadedBoardItemContent = ({
     (host: HTMLDivElement | null) => {
       if (!host || !surfacePortalTarget || isAdvanced) return;
       cancelPreviewEntrance();
-      host.append(surfacePortalTarget);
+      if (host.childNodes.length !== 1 || host.firstChild !== surfacePortalTarget) {
+        host.replaceChildren(surfacePortalTarget);
+      }
     },
     [cancelPreviewEntrance, isAdvanced, surfacePortalTarget],
   );

apps/nextjs/src/components/board/items/lazy-widget-edit-modal.tsx

@@ -3,16 +3,16 @@
 import { Suspense, use } from "react";
 import { Center, Loader } from "@mantine/core";
 import { ErrorBoundary } from "react-error-boundary";
+import type { FallbackProps } from "react-error-boundary";
 
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal, modalSizeForm } from "@homarr/modals";
-import { useModalAction } from "@homarr/modals";
 import { WidgetError } from "@homarr/widgets/errors";
 import type * as WidgetModalsModule from "@homarr/widgets/modals";
 import type { WidgetEditModalProps } from "@homarr/widgets/modals";
 
-import type * as IntegrationEditModalModule from "~/components/integration/embedded-integration-edit-modal";
-import type { EmbeddedIntegrationEditModalProps } from "~/components/integration/embedded-integration-edit-modal";
+import type * as IntegrationEditFormModule from "~/components/integration/embedded-integration-edit-form";
+import type { EmbeddedIntegrationEditFormProps } from "~/components/integration/embedded-integration-edit-form";
 
 let widgetEditModalPromise: Promise<typeof WidgetModalsModule> | undefined;
 
@@ -29,42 +29,38 @@ export const loadWidgetEditModal = () => {
 
 export const preloadWidgetEditModal = () => void loadWidgetEditModal().catch(() => undefined);
 
-let integrationEditModalPromise: Promise<typeof IntegrationEditModalModule> | undefined;
+let integrationEditFormPromise: Promise<typeof IntegrationEditFormModule> | undefined;
 
-const loadIntegrationEditModal = () => {
-  if (integrationEditModalPromise) return integrationEditModalPromise;
+const loadIntegrationEditForm = () => {
+  if (integrationEditFormPromise) return integrationEditFormPromise;
 
-  const currentPromise = import("~/components/integration/embedded-integration-edit-modal");
-  integrationEditModalPromise = currentPromise;
+  const currentPromise = import("~/components/integration/embedded-integration-edit-form");
+  integrationEditFormPromise = currentPromise;
   void currentPromise.catch(() => {
-    if (integrationEditModalPromise === currentPromise) integrationEditModalPromise = undefined;
+    if (integrationEditFormPromise === currentPromise) integrationEditFormPromise = undefined;
   });
   return currentPromise;
 };
 
-const LazyIntegrationEditModalContent = (props: {
-  actions: { closeModal: () => void };
-  innerProps: EmbeddedIntegrationEditModalProps;
-}) => {
-  const { EmbeddedIntegrationEditModal } = use(loadIntegrationEditModal());
-  const Component = EmbeddedIntegrationEditModal.component;
-  return <Component {...props} />;
+const LazyIntegrationEditFormContent = (props: EmbeddedIntegrationEditFormProps) => {
+  const { EmbeddedIntegrationEditForm } = use(loadIntegrationEditForm());
+  return <EmbeddedIntegrationEditForm {...props} />;
 };
 
-const LazyIntegrationEditModal = createModal<EmbeddedIntegrationEditModalProps>((props) => (
-  <ErrorBoundary
-    fallbackRender={({ error, resetErrorBoundary }) => (
-      <Center py="xl">
-        <WidgetError
-          error={error}
-          resetErrorBoundary={() => {
-            integrationEditModalPromise = undefined;
-            resetErrorBoundary();
-          }}
-        />
-      </Center>
-    )}
-  >
+const IntegrationEditErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
+  <Center py="xl">
+    <WidgetError
+      error={error}
+      resetErrorBoundary={() => {
+        integrationEditFormPromise = undefined;
+        resetErrorBoundary();
+      }}
+    />
+  </Center>
+);
+
+const LazyIntegrationEditForm = (props: EmbeddedIntegrationEditFormProps) => (
+  <ErrorBoundary FallbackComponent={IntegrationEditErrorFallback}>
     <Suspense
       fallback={
         <Center py="xl">
@@ -72,15 +68,10 @@ const LazyIntegrationEditModal = createModal<EmbeddedIntegrationEditModalProps>(
         </Center>
       }
     >
-      <LazyIntegrationEditModalContent {...props} />
+      <LazyIntegrationEditFormContent {...props} />
     </Suspense>
   </ErrorBoundary>
-)).withOptions({
-  defaultTitle: (t) => t("item.edit.tab.integration"),
-  size: modalSizeForm,
-  presentation: "inspector",
-  closeOnClickOutside: true,
-});
+);
 
 interface LazyWidgetEditModalContentProps {
   actions: { closeModal: () => void };
@@ -90,17 +81,12 @@ interface LazyWidgetEditModalContentProps {
 const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
   const { WidgetEditModal } = use(loadWidgetEditModal());
   const Component = WidgetEditModal.component;
-  const { openModal: openIntegrationEditModal } = useModalAction(LazyIntegrationEditModal);
   return (
     <Component
       {...props}
       innerProps={{
         ...props.innerProps,
-        onEditIntegration: (integrationId) =>
-          openIntegrationEditModal({
-            integrationId,
-            onSuccess: props.innerProps.onIntegrationSaved,
-          }),
+        integrationEditForm: LazyIntegrationEditForm,
       }}
     />
   );

apps/nextjs/src/components/create/universal-create-modal.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
-import { Group, Stack, Text, TextInput, ThemeIcon, UnstyledButton } from "@mantine/core";
+import { Group, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
 import {
   IconApps,
   IconBox,
@@ -26,7 +26,7 @@ import type {
   UniversalCreateActionGroup,
   UniversalCreateActionKey,
 } from "./universal-create-actions";
-import { filterAndRankUniversalCreateActions, getUniversalCreateActionDefinitions } from "./universal-create-actions";
+import { getUniversalCreateActionDefinitions } from "./universal-create-actions";
 import type { SetupMetricEntryPoint } from "./setup-analytics";
 import { useSetupAnalytics } from "./setup-analytics";
 
@@ -52,7 +52,6 @@ export const UniversalCreateModal = createModal<UniversalCreateModalProps>(({ ac
   const router = useRouter();
   const t = useScopedI18n("universalCreate");
   const { openModal: openAddBoardModal } = useModalAction(AddBoardModal);
-  const [query, setQuery] = useState("");
   const trackedOpen = useRef(false);
   const boardActions = innerProps.boardActions;
   const entryPoint = innerProps.entryPoint ?? (boardActions ? "board" : "header");
@@ -118,58 +117,43 @@ export const UniversalCreateModal = createModal<UniversalCreateModalProps>(({ ac
         keywords: t(`action.${definition.key}.keywords`).split(" "),
       }) satisfies RankedUniversalCreateAction,
   );
-  const visibleActions = filterAndRankUniversalCreateActions(resolvedActions, query);
+  const orderedActions = resolvedActions.toSorted((left, right) => right.priority - left.priority);
   const groups = ["currentBoard", "library", "boards"] satisfies UniversalCreateActionGroup[];
 
   return (
     <Stack gap="md">
-      <TextInput
-        data-autofocus
-        value={query}
-        onChange={(event) => setQuery(event.currentTarget.value)}
-        leftSection={<IconSearch size={16} />}
-        placeholder={t("search.placeholder")}
-        aria-label={t("search.label")}
-      />
+      {groups.map((group) => {
+        const groupActions = orderedActions.filter((action) => action.group === group);
+        if (groupActions.length === 0) return null;
 
-      {visibleActions.length === 0 ? (
-        <Text c="dimmed" ta="center" py="lg">
-          {t("search.noResults")}
-        </Text>
-      ) : (
-        groups.map((group) => {
-          const groupActions = visibleActions.filter((action) => action.group === group);
-          if (groupActions.length === 0) return null;
-
-          return (
-            <Stack key={group} gap={4}>
-              <Text c="dimmed" fw={600} size="xs" tt="uppercase" px="sm">
-                {t(`group.${group}`)}
-              </Text>
-              {groupActions.map((action) => {
-                const Icon = actionIcons[action.key];
-                return (
-                  <UnstyledButton key={action.key} className={classes.action} onClick={() => invokeAction(action.key)}>
-                    <Group wrap="nowrap" align="flex-start">
-                      <ThemeIcon className={classes.actionIcon} variant="light" radius="md">
-                        <Icon size={18} stroke={1.5} />
-                      </ThemeIcon>
-                      <Stack gap={1}>
-                        <Text fw={600} size="sm">
-                          {action.name}
-                        </Text>
-                        <Text c="dimmed" size="xs">
-                          {action.description}
-                        </Text>
-                      </Stack>
-                    </Group>
-                  </UnstyledButton>
-                );
-              })}
-            </Stack>
-          );
-        })
-      )}
+        return (
+          <Stack key={group} gap={4}>
+            <Text c="dimmed" fw={600} size="xs" tt="uppercase" px="sm">
+              {t(`group.${group}`)}
+            </Text>
+            {groupActions.map((action) => {
+              const Icon = actionIcons[action.key];
+              return (
+                <UnstyledButton key={action.key} className={classes.action} onClick={() => invokeAction(action.key)}>
+                  <Group wrap="nowrap" align="flex-start">
+                    <ThemeIcon className={classes.actionIcon} variant="light" radius="md">
+                      <Icon size={18} stroke={1.5} />
+                    </ThemeIcon>
+                    <Stack gap={1}>
+                      <Text fw={600} size="sm">
+                        {action.name}
+                      </Text>
+                      <Text c="dimmed" size="xs">
+                        {action.description}
+                      </Text>
+                    </Stack>
+                  </Group>
+                </UnstyledButton>
+              );
+            })}
+          </Stack>
+        );
+      })}
     </Stack>
   );
 }).withOptions({

apps/nextjs/src/components/integration/embedded-integration-edit-form.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useImperativeHandle, useRef } from "react";
+import { Alert, Button, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { getIntegrationName } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+import { IntegrationAvatar } from "@homarr/ui";
+import type { EmbeddedIntegrationEditFormProps } from "@homarr/widgets/modals";
+
+import type { EditIntegrationFormHandle } from "~/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form";
+import { EditIntegrationForm } from "~/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form";
+
+export type { EmbeddedIntegrationEditFormProps } from "@homarr/widgets/modals";
+
+export const EmbeddedIntegrationEditForm = ({
+  integrationId,
+  handleRef,
+  onSuccess,
+}: EmbeddedIntegrationEditFormProps) => {
+  const t = useI18n();
+  const integrationFormRef = useRef<EditIntegrationFormHandle>(null);
+  const {
+    data: integration,
+    isPending,
+    isError,
+    refetch,
+  } = clientApi.integration.byId.useQuery({
+    id: integrationId,
+  });
+
+  useImperativeHandle(
+    handleRef,
+    () => ({
+      submitIfDirty: async () => {
+        if (!integrationFormRef.current?.isDirty()) {
+          return true;
+        }
+
+        return integrationFormRef.current.submit();
+      },
+    }),
+    [],
+  );
+
+  if (isPending) {
+    return (
+      <Stack gap="sm" aria-busy="true" aria-label={t("item.edit.integration.loading")}>
+        <Skeleton height={36} width="60%" />
+        <Skeleton height={60} />
+        <Skeleton height={120} />
+      </Stack>
+    );
+  }
+
+  if (isError || !integration) {
+    return (
+      <Alert color="red" title={t("common.error")}>
+        <Stack gap="sm">
+          <Text size="sm">{t("item.edit.integration.loadError")}</Text>
+          <Button variant="light" color="red" onClick={() => void refetch()}>
+            {t("common.action.tryAgain")}
+          </Button>
+        </Stack>
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack>
+      <Group gap="sm" wrap="nowrap">
+        <IntegrationAvatar kind={integration.kind} size="sm" />
+        <Stack gap={0} style={{ minWidth: 0 }}>
+          <Text fw={600} truncate>
+            {integration.name}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {getIntegrationName(integration.kind)}
+          </Text>
+        </Stack>
+      </Group>
+      <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
+        {t("item.edit.integration.propagationNotice")}
+      </Alert>
+      <EditIntegrationForm integration={integration} hideButtons formRef={integrationFormRef} onSuccess={onSuccess} />
+    </Stack>
+  );
+};

apps/nextjs/src/components/integration/embedded-integration-edit-modal.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { Alert, Button, Group, Skeleton, Stack, Text } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
-
-import { clientApi } from "@homarr/api/client";
-import { getIntegrationName } from "@homarr/definitions";
-import { createModal, modalSizeForm } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
-import { IntegrationAvatar } from "@homarr/ui";
-
-import { EditIntegrationForm } from "~/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form";
-
-export interface EmbeddedIntegrationEditModalProps {
-  integrationId: string;
-  onSuccess?: () => void;
-}
-
-export const EmbeddedIntegrationEditModal = createModal<EmbeddedIntegrationEditModalProps>(
-  ({ actions, innerProps }) => {
-    const t = useI18n();
-    const {
-      data: integration,
-      isPending,
-      isError,
-      refetch,
-    } = clientApi.integration.byId.useQuery({
-      id: innerProps.integrationId,
-    });
-
-    if (isPending) {
-      return (
-        <Stack gap="sm" aria-busy="true" aria-label={t("item.edit.integration.loading")}>
-          <Skeleton height={36} width="60%" />
-          <Skeleton height={60} />
-          <Skeleton height={120} />
-        </Stack>
-      );
-    }
-
-    if (isError || !integration) {
-      return (
-        <Alert color="red" title={t("common.error")}>
-          <Stack gap="sm">
-            <Text size="sm">{t("item.edit.integration.loadError")}</Text>
-            <Button variant="light" color="red" onClick={() => void refetch()}>
-              {t("common.action.tryAgain")}
-            </Button>
-          </Stack>
-        </Alert>
-      );
-    }
-
-    return (
-      <Stack>
-        <Group gap="sm" wrap="nowrap">
-          <IntegrationAvatar kind={integration.kind} size="sm" />
-          <Stack gap={0} style={{ minWidth: 0 }}>
-            <Text fw={600} truncate>
-              {integration.name}
-            </Text>
-            <Text size="xs" c="dimmed">
-              {getIntegrationName(integration.kind)}
-            </Text>
-          </Stack>
-        </Group>
-        <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
-          {t("item.edit.integration.propagationNotice")}
-        </Alert>
-        <EditIntegrationForm
-          integration={integration}
-          embedded
-          onSuccess={() => {
-            innerProps.onSuccess?.();
-            actions.closeModal();
-          }}
-        />
-      </Stack>
-    );
-  },
-).withOptions({
-  defaultTitle: (t) => t("item.edit.tab.integration"),
-  size: modalSizeForm,
-  presentation: "inspector",
-  closeOnClickOutside: true,
-});

packages/api/src/mcp.ts

@@ -12,6 +12,7 @@ import { iconsRouter } from "./router/icons";
 import { infoRouter } from "./router/info";
 import { integrationRouter } from "./router/integration/integration-router";
 import { inviteRouter } from "./router/invite";
+import { airQualityRouter } from "./router/widgets/air-quality";
 import { bazarrRouter } from "./router/widgets/bazarr";
 import { serverSettingsRouter } from "./router/serverSettings";
 import { beszelRouter } from "./router/widgets/beszel";
@@ -35,6 +36,7 @@ export const mcpRouter = createTRPCRouter({
   info: infoRouter,
   integration: integrationRouter,
   invite: inviteRouter,
+  airQuality: airQualityRouter,
   bazarr: bazarrRouter,
   serverSettings: serverSettingsRouter,
   beszel: beszelRouter,

packages/api/src/router/app.ts

@@ -18,7 +18,8 @@ import { AppAccessControl } from "./app/app-access-control";
 const defaultIcon = "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/homarr.svg";
 
 export const appRouter = createTRPCRouter({
-  getPaginated: protectedProcedure
+  getPaginated: permissionRequiredProcedure
+    .requiresPermission("app-modify-all")
     .meta({
       openapi: {
         method: "GET",
@@ -50,7 +51,8 @@ export const appRouter = createTRPCRouter({
         totalCount,
       };
     }),
-  all: protectedProcedure
+  all: permissionRequiredProcedure
+    .requiresPermission("app-modify-all")
     .input(z.void())
     .output(z.array(selectAppSchema))
     .meta({
@@ -88,6 +90,16 @@ export const appRouter = createTRPCRouter({
       },
     })
     .query(({ ctx, input }) => {
+      if (
+        !ctx.session.user.permissions.includes("app-modify-all") &&
+        !ctx.session.user.permissions.includes("board-modify-all")
+      ) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Permission denied",
+        });
+      }
+
       return ctx.db.query.apps.findMany({
         where: like(apps.name, `%${input.query}%`),
         orderBy: asc(apps.name),

packages/api/src/router/group.ts

@@ -302,16 +302,43 @@ export const groupRouter = createTRPCRouter({
     .mutation(async ({ input, ctx }) => {
       await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
 
-      await ctx.db.delete(groupPermissions).where(eq(groupPermissions.groupId, input.groupId));
+      // Stored exactly as selected - implied permissions are resolved at read time through
+      // getPermissionsWithChildren, so nothing is silently escalated here.
+      const permissions = [...new Set(input.permissions)];
 
-      if (input.permissions.length > 0) {
-        await ctx.db.insert(groupPermissions).values(
-          input.permissions.map((permission) => ({
-            groupId: input.groupId,
-            permission,
-          })),
-        );
-      }
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            await transaction.delete(schema.groupPermissions).where(eq(schema.groupPermissions.groupId, input.groupId));
+            if (permissions.length === 0) {
+              return;
+            }
+            await transaction.insert(schema.groupPermissions).values(
+              permissions.map((permission) => ({
+                groupId: input.groupId,
+                permission,
+              })),
+            );
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction.delete(groupPermissions).where(eq(groupPermissions.groupId, input.groupId)).run();
+            if (permissions.length === 0) {
+              return;
+            }
+            transaction
+              .insert(groupPermissions)
+              .values(
+                permissions.map((permission) => ({
+                  groupId: input.groupId,
+                  permission,
+                })),
+              )
+              .run();
+          });
+        },
+      });
     }),
   transferOwnership: permissionRequiredProcedure
     .requiresPermission("admin")

packages/api/src/router/home.ts

@@ -1,4 +1,6 @@
 import { isProviderEnabled } from "@homarr/auth/server";
+import { constructIntegrationPermissions } from "@homarr/auth/shared";
+import type { Database } from "@homarr/db";
 import { db, eq, inArray, or } from "@homarr/db";
 import {
   apps,
@@ -6,16 +8,46 @@ import {
   boardUserPermissions,
   groupMembers,
   groups,
+  integrationGroupPermissions,
+  integrationUserPermissions,
   integrations,
   invites,
   medias,
   searchEngines,
   users,
 } from "@homarr/db/schema";
+import { getAppManagementAccess, getIntegrationManagementAccess } from "@homarr/definitions";
 import type { TranslationObject } from "@homarr/translation";
 
 import { createTRPCRouter, publicProcedure } from "../trpc";
 
+const getFullAccessIntegrationIdsAsync = async (db: Database, userId: string) => {
+  const groupsOfCurrentUser = await db.query.groupMembers.findMany({
+    where: eq(groupMembers.userId, userId),
+  });
+
+  const accessibleIntegrations = await db.query.integrations.findMany({
+    columns: {
+      id: true,
+    },
+    with: {
+      userPermissions: {
+        where: eq(integrationUserPermissions.userId, userId),
+      },
+      groupPermissions: {
+        where: inArray(
+          integrationGroupPermissions.groupId,
+          groupsOfCurrentUser.map((group) => group.groupId),
+        ),
+      },
+    },
+  });
+
+  return accessibleIntegrations
+    .filter((integration) => constructIntegrationPermissions(integration, null).hasFullAccess)
+    .map((integration) => integration.id);
+};
+
 interface HomeStatistic {
   titleKey: keyof TranslationObject["management"]["page"]["home"]["statistic"];
   subtitleKey: keyof TranslationObject["management"]["page"]["home"]["statisticLabel"];
@@ -92,20 +124,30 @@ export const homeRouter = createTRPCRouter({
       });
     }
 
-    if (ctx.session?.user.permissions.includes("integration-create")) {
+    // A card is only shown when the page behind it is reachable, and it counts only what the user is
+    // allowed to see. The rules come from @homarr/definitions so this cannot drift from the pages.
+    const permissions = ctx.session?.user.permissions ?? [];
+    const hasGlobalFullIntegrationAccess = permissions.includes("integration-full-all");
+    const fullAccessIntegrationIds =
+      hasGlobalFullIntegrationAccess || !ctx.session?.user
+        ? []
+        : await getFullAccessIntegrationIdsAsync(ctx.db, ctx.session.user.id);
+    const integrationAccess = getIntegrationManagementAccess(permissions, fullAccessIntegrationIds.length > 0);
+    if (integrationAccess.canAccess) {
       statistics.push({
         titleKey: "integration",
         subtitleKey: "resources",
-        count: await db.$count(integrations),
+        count: integrationAccess.canManageAll ? await db.$count(integrations) : fullAccessIntegrationIds.length,
         path: "/manage/integrations",
       });
     }
 
-    if (ctx.session?.user.permissions.includes("app-create")) {
+    const appAccess = getAppManagementAccess(permissions);
+    if (appAccess.canAccess) {
       statistics.push({
         titleKey: "app",
         subtitleKey: "resources",
-        count: await db.$count(apps),
+        count: appAccess.canManageAll ? await db.$count(apps) : 0,
         path: "/manage/apps",
       });
     }

packages/api/src/router/integration/integration-router.ts

@@ -1,12 +1,13 @@
 import { TRPCError } from "@trpc/server";
 import { z } from "zod/v4";
 
+import type { Session } from "@homarr/auth";
 import { hasQueryAccessToIntegrationsAsync } from "@homarr/auth/server";
 import { constructIntegrationPermissions } from "@homarr/auth/shared";
 import { createId, objectEntries } from "@homarr/common";
 import { decryptSecret, encryptSecret } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
-import type { Database } from "@homarr/db";
+import type { Database, SQL } from "@homarr/db";
 import { and, asc, eq, handleTransactionsAsync, inArray, like, or } from "@homarr/db";
 import {
   apps,
@@ -17,7 +18,7 @@ import {
   integrationSecrets,
   integrationUserPermissions,
 } from "@homarr/db/schema";
-import type { IntegrationSecretKind } from "@homarr/definitions";
+import type { GroupPermissionKey, IntegrationPermission, IntegrationSecretKind } from "@homarr/definitions";
 import {
   getIntegrationKindsByCategory,
   getPermissionsWithParents,
@@ -71,80 +72,18 @@ export const integrationRouter = createTRPCRouter({
       },
     })
     .query(async ({ ctx }) => {
-      const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
-        where: eq(groupMembers.userId, ctx.session.user.id),
-      });
-
-      const integrations = await ctx.db.query.integrations.findMany({
-        with: {
-          userPermissions: {
-            where: eq(integrationUserPermissions.userId, ctx.session.user.id),
-          },
-          groupPermissions: {
-            where: inArray(
-              integrationGroupPermissions.groupId,
-              groupsOfCurrentUser.map((group) => group.groupId),
-            ),
-          },
-        },
-      });
-      return integrations
-        .map((integration) => {
-          const permissions = constructIntegrationPermissions(integration, ctx.session);
-
-          return {
-            id: integration.id,
-            name: integration.name,
-            kind: integration.kind,
-            url: integration.url,
-            permissions,
-          };
-        })
-        .toSorted(
-          (integrationA, integrationB) =>
-            integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
-        );
+      return await getAccessibleIntegrationsAsync(ctx);
     }),
   allThatSupportSearch: protectedProcedure.query(async ({ ctx }) => {
-    const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
-      where: eq(groupMembers.userId, ctx.session.user.id),
-    });
-
-    const integrationsFromDb = await ctx.db.query.integrations.findMany({
-      with: {
-        userPermissions: {
-          where: eq(integrationUserPermissions.userId, ctx.session.user.id),
-        },
-        groupPermissions: {
-          where: inArray(
-            integrationGroupPermissions.groupId,
-            groupsOfCurrentUser.map((group) => group.groupId),
-          ),
-        },
-      },
-      where: inArray(
+    return await getAccessibleIntegrationsAsync(
+      ctx,
+      inArray(
         integrations.kind,
         objectEntries(integrationDefs)
           .filter(([_, integration]) => [...integration.category].includes("search"))
           .map(([kind, _]) => kind),
       ),
-    });
-    return integrationsFromDb
-      .map((integration) => {
-        const permissions = constructIntegrationPermissions(integration, ctx.session);
-
-        return {
-          id: integration.id,
-          name: integration.name,
-          kind: integration.kind,
-          url: integration.url,
-          permissions,
-        };
-      })
-      .toSorted(
-        (integrationA, integrationB) =>
-          integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
-      );
+    );
   }),
   allOfGivenCategory: protectedProcedure
     .input(
@@ -153,42 +92,10 @@ export const integrationRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
-        where: eq(groupMembers.userId, ctx.session.user.id),
-      });
-
-      const intergrationKinds = getIntegrationKindsByCategory(input.category);
-
-      const integrationsFromDb = await ctx.db.query.integrations.findMany({
-        with: {
-          userPermissions: {
-            where: eq(integrationUserPermissions.userId, ctx.session.user.id),
-          },
-          groupPermissions: {
-            where: inArray(
-              integrationGroupPermissions.groupId,
-              groupsOfCurrentUser.map((group) => group.groupId),
-            ),
-          },
-        },
-        where: inArray(integrations.kind, intergrationKinds),
-      });
-      return integrationsFromDb
-        .map((integration) => {
-          const permissions = constructIntegrationPermissions(integration, ctx.session);
-
-          return {
-            id: integration.id,
-            name: integration.name,
-            kind: integration.kind,
-            url: integration.url,
-            permissions,
-          };
-        })
-        .toSorted(
-          (integrationA, integrationB) =>
-            integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
-        );
+      return await getAccessibleIntegrationsAsync(
+        ctx,
+        inArray(integrations.kind, getIntegrationKindsByCategory(input.category)),
+      );
     }),
   search: protectedProcedure
     .meta({
@@ -205,11 +112,29 @@ export const integrationRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      return await ctx.db.query.integrations.findMany({
+      const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
+        where: eq(groupMembers.userId, ctx.session.user.id),
+      });
+
+      const integrationsFromDb = await ctx.db.query.integrations.findMany({
         where: like(integrations.name, `%${input.query}%`),
         orderBy: asc(integrations.name),
-        limit: input.limit,
+        with: getIntegrationAccessRelationsAsync(
+          ctx.session.user.id,
+          groupsOfCurrentUser.map((group) => group.groupId),
+        ),
       });
+
+      return integrationsFromDb
+        .filter((integration) => hasIntegrationQueryAccess(ctx.session, integration))
+        .toSorted(
+          (integrationA, integrationB) =>
+            integrationA.name.localeCompare(integrationB.name) || integrationA.id.localeCompare(integrationB.id),
+        )
+        .slice(0, input.limit)
+        .map(
+          ({ userPermissions: _userPermissions, groupPermissions: _groupPermissions, ...integration }) => integration,
+        );
     }),
   // This is used to get the integrations by their ids it's public because it's needed to get integrations data in the boards
   byIds: publicProcedure.input(z.array(z.string())).query(async ({ ctx, input }) => {
@@ -774,6 +699,66 @@ export const integrationRouter = createTRPCRouter({
     }),
 });
 
+const globalIntegrationPermissions = [
+  "integration-use-all",
+  "integration-interact-all",
+  "integration-full-all",
+] satisfies GroupPermissionKey[];
+
+const hasGlobalIntegrationAccess = (session: Session | null) =>
+  globalIntegrationPermissions.some((permission) => session?.user.permissions.includes(permission) ?? false);
+
+const hasIntegrationQueryAccess = (
+  session: Session | null,
+  integration: {
+    userPermissions: { permission: IntegrationPermission }[];
+    groupPermissions: { permission: IntegrationPermission }[];
+  },
+) => hasGlobalIntegrationAccess(session) || constructIntegrationPermissions(integration, session).hasUseAccess;
+
+const getIntegrationAccessRelationsAsync = (userId: string, groupIds: string[]) => ({
+  userPermissions: {
+    where: eq(integrationUserPermissions.userId, userId),
+  },
+  groupPermissions: {
+    where: inArray(integrationGroupPermissions.groupId, groupIds),
+  },
+});
+
+const getAccessibleIntegrationsAsync = async (ctx: { db: Database; session: Session }, where?: SQL) => {
+  const groupsOfCurrentUser = await ctx.db.query.groupMembers.findMany({
+    where: eq(groupMembers.userId, ctx.session.user.id),
+  });
+
+  const integrationsFromDb = await ctx.db.query.integrations.findMany({
+    where,
+    with: getIntegrationAccessRelationsAsync(
+      ctx.session.user.id,
+      groupsOfCurrentUser.map((group) => group.groupId),
+    ),
+  });
+
+  return integrationsFromDb
+    .filter((integration) => hasIntegrationQueryAccess(ctx.session, integration))
+    .map((integration) => {
+      const permissions = constructIntegrationPermissions(integration, ctx.session);
+
+      return {
+        id: integration.id,
+        name: integration.name,
+        kind: integration.kind,
+        url: integration.url,
+        permissions,
+      };
+    })
+    .toSorted(
+      (integrationA, integrationB) =>
+        integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind) ||
+        integrationA.name.localeCompare(integrationB.name) ||
+        integrationA.id.localeCompare(integrationB.id),
+    );
+};
+
 interface IntegrationRouterContext {
   db: Database;
   session: Parameters<typeof hasQueryAccessToIntegrationsAsync>[2];

packages/api/src/router/test/app.spec.ts

@@ -33,7 +33,7 @@ describe("all should return all apps", () => {
     const caller = appRouter.createCaller({
       db,
       deviceType: undefined,
-      session: createDefaultSession(),
+      session: createDefaultSession(["app-modify-all"]),
     });
 
     await db.insert(apps).values([
@@ -74,6 +74,20 @@ describe("all should return all apps", () => {
     // Assert
     await expect(actAsync()).rejects.toThrow("UNAUTHORIZED");
   });
+  test("should throw FORBIDDEN without app-modify-all permission", async () => {
+    // Arrange
+    const caller = appRouter.createCaller({
+      db: createDb(),
+      deviceType: undefined,
+      session: createDefaultSession(),
+    });
+
+    // Act
+    const actAsync = async () => await caller.all();
+
+    // Assert
+    await expect(actAsync()).rejects.toThrow("Permission denied");
+  });
 });
 
 describe("getPaginated should return apps to authenticated users", () => {
@@ -87,12 +101,12 @@ describe("getPaginated should return apps to authenticated users", () => {
     await expect(caller.getPaginated({ page: 1, pageSize: 10 })).rejects.toThrow("UNAUTHORIZED");
   });
 
-  test("should return apps without board permissions", async () => {
+  test("should return apps with app-modify-all permission", async () => {
     const db = createDb();
     const caller = appRouter.createCaller({
       db,
       deviceType: undefined,
-      session: createDefaultSession(),
+      session: createDefaultSession(["app-modify-all"]),
     });
     await db.insert(apps).values({ id: "1", name: "Homarr", iconUrl: "https://homarr.dev/icon.svg" });
 
@@ -101,6 +115,43 @@ describe("getPaginated should return apps to authenticated users", () => {
       items: [{ id: "1" }],
     });
   });
+
+  test("should throw FORBIDDEN without app-modify-all permission", async () => {
+    const caller = appRouter.createCaller({
+      db: createDb(),
+      deviceType: undefined,
+      session: createDefaultSession(),
+    });
+
+    await expect(caller.getPaginated({ page: 1, pageSize: 10 })).rejects.toThrow("Permission denied");
+  });
+});
+
+describe("search should require app-modify-all or board-modify-all permission", () => {
+  test("should throw FORBIDDEN without app-modify-all or board-modify-all permission", async () => {
+    const caller = appRouter.createCaller({
+      db: createDb(),
+      deviceType: undefined,
+      session: createDefaultSession(),
+    });
+
+    await expect(caller.search({ query: "Homarr" })).rejects.toThrow("Permission denied");
+  });
+
+  test("should return apps with board-modify-all permission", async () => {
+    const db = createDb();
+    const caller = appRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: createDefaultSession(["board-modify-all"]),
+    });
+    await db.insert(apps).values({ id: "1", name: "Homarr", iconUrl: "https://homarr.dev/icon.svg" });
+
+    const result = await caller.search({ query: "Homarr" });
+
+    expect(result).toHaveLength(1);
+    expect(result[0]!.id).toBe("1");
+  });
 });
 
 describe("byId should return an app by id", () => {

packages/api/src/router/test/group.spec.ts

@@ -449,6 +449,165 @@ describe("savePermissions should save permissions for group", () => {
     expect(permissions.map(({ permission }) => permission)).toEqual(["integration-use-all", "board-full-all"]);
   });
 
+  test("with a standalone create permission it should not escalate to its parent permission", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
+
+    const groupId = createId();
+    await db.insert(groups).values({
+      id: groupId,
+      name: "Group",
+      position: 1,
+    });
+
+    // Act
+    await caller.savePermissions({
+      groupId,
+      permissions: ["board-create"],
+    });
+
+    // Assert
+    const permissions = await db.query.groupPermissions.findMany({
+      where: eq(groupPermissions.groupId, groupId),
+    });
+
+    expect(permissions.map(({ permission }) => permission)).toEqual(["board-create"]);
+  });
+
+  test.each([["app-create"], ["integration-create"], ["search-engine-create"], ["media-upload"]] as const)(
+    "with %s alone it should persist exactly that permission",
+    async (permission) => {
+      // Arrange
+      const db = createDb();
+      const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
+
+      const groupId = createId();
+      await db.insert(groups).values({
+        id: groupId,
+        name: "Group",
+        position: 1,
+      });
+
+      // Act
+      await caller.savePermissions({ groupId, permissions: [permission] });
+
+      // Assert
+      const permissions = await db.query.groupPermissions.findMany({
+        where: eq(groupPermissions.groupId, groupId),
+      });
+
+      expect(permissions.map(({ permission: key }) => key)).toEqual([permission]);
+    },
+  );
+
+  test("with a create permission and its parent it should persist exactly two rows", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
+
+    const groupId = createId();
+    await db.insert(groups).values({
+      id: groupId,
+      name: "Group",
+      position: 1,
+    });
+
+    // Act
+    await caller.savePermissions({
+      groupId,
+      permissions: ["app-create", "app-modify-all"],
+    });
+
+    // Assert
+    const permissions = await db.query.groupPermissions.findMany({
+      where: eq(groupPermissions.groupId, groupId),
+    });
+
+    expect(permissions.length).toBe(2);
+    expect(permissions.map(({ permission }) => permission).toSorted()).toEqual(["app-create", "app-modify-all"]);
+  });
+
+  test("with duplicate permissions it should persist each permission only once", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
+
+    const groupId = createId();
+    await db.insert(groups).values({
+      id: groupId,
+      name: "Group",
+      position: 1,
+    });
+
+    // Act
+    await caller.savePermissions({
+      groupId,
+      permissions: ["board-view-all", "board-view-all", "board-modify-all"],
+    });
+
+    // Assert
+    const permissions = await db.query.groupPermissions.findMany({
+      where: eq(groupPermissions.groupId, groupId),
+    });
+
+    expect(permissions.map(({ permission }) => permission).toSorted()).toEqual(["board-modify-all", "board-view-all"]);
+  });
+
+  test("saving the same permissions twice should be idempotent", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
+
+    const groupId = createId();
+    await db.insert(groups).values({
+      id: groupId,
+      name: "Group",
+      position: 1,
+    });
+
+    // Act
+    await caller.savePermissions({ groupId, permissions: ["board-create", "media-upload"] });
+    await caller.savePermissions({ groupId, permissions: ["board-create", "media-upload"] });
+
+    // Assert
+    const permissions = await db.query.groupPermissions.findMany({
+      where: eq(groupPermissions.groupId, groupId),
+    });
+
+    expect(permissions.map(({ permission }) => permission).toSorted()).toEqual(["board-create", "media-upload"]);
+  });
+
+  test("with an empty permission list it should clear all existing permissions", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = groupRouter.createCaller({ db, deviceType: undefined, session: adminSession });
+
+    const groupId = createId();
+    await db.insert(groups).values({
+      id: groupId,
+      name: "Group",
+      position: 1,
+    });
+    await db.insert(groupPermissions).values([
+      { groupId, permission: "admin" },
+      { groupId, permission: "board-full-all" },
+    ]);
+
+    // Act
+    await caller.savePermissions({
+      groupId,
+      permissions: [],
+    });
+
+    // Assert
+    const permissions = await db.query.groupPermissions.findMany({
+      where: eq(groupPermissions.groupId, groupId),
+    });
+
+    expect(permissions.length).toBe(0);
+  });
+
   test("with non existing group it should throw not found error", async () => {
     // Arrange
     const db = createDb();

packages/api/src/router/test/integration/integration-router.spec.ts

@@ -58,6 +58,171 @@ describe("all should return all integrations", () => {
     expect(result[1]!.kind).toBe("homeAssistant");
     expect(result.every(({ permissions }) => permissions.hasFullAccess && permissions.hasUseAccess)).toBe(true);
   });
+
+  test("with integration full access and no per-integration rows should return all integrations with full access", async () => {
+    const db = createDb();
+    const caller = integrationRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSessionWithPermissions(["integration-full-all"]),
+    });
+
+    await db.insert(integrations).values([
+      {
+        id: "1",
+        name: "Home assistant",
+        kind: "homeAssistant",
+        url: "http://homeassist.local",
+      },
+      {
+        id: "2",
+        name: "Home plex server",
+        kind: "plex",
+        url: "http://plex.local",
+      },
+    ]);
+
+    const result = await caller.all();
+    expect(result).toHaveLength(2);
+    for (const integration of result) {
+      expect(integration.permissions.hasFullAccess).toBe(true);
+    }
+  });
+
+  test("with integration use access should return all integrations", async () => {
+    const db = createDb();
+    const caller = integrationRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSessionWithPermissions(["integration-use-all"]),
+    });
+
+    await db.insert(integrations).values([
+      {
+        id: "1",
+        name: "Home assistant",
+        kind: "homeAssistant",
+        url: "http://homeassist.local",
+      },
+      {
+        id: "2",
+        name: "Home plex server",
+        kind: "plex",
+        url: "http://plex.local",
+      },
+    ]);
+
+    const result = await caller.all();
+    expect(result.length).toBe(2);
+  });
+
+  test("without global integration access should only return integrations with use access", async () => {
+    const db = createDb();
+    const caller = integrationRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSessionWithPermissions(),
+    });
+
+    await db.insert(integrations).values([
+      {
+        id: "1",
+        name: "Home assistant",
+        kind: "homeAssistant",
+        url: "http://homeassist.local",
+      },
+      {
+        id: "2",
+        name: "Home plex server",
+        kind: "plex",
+        url: "http://plex.local",
+      },
+    ]);
+    await db.insert(users).values({ id: defaultUserId });
+    await db.insert(integrationUserPermissions).values({
+      integrationId: "1",
+      userId: defaultUserId,
+      permission: "use",
+    });
+
+    const result = await caller.all();
+    expect(result).toHaveLength(1);
+    expect(result[0]!.id).toBe("1");
+    expect(result[0]!.permissions.hasUseAccess).toBe(true);
+  });
+
+  test("with a per-integration interact grant should return the integration with use access", async () => {
+    const db = createDb();
+    const caller = integrationRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSessionWithPermissions(),
+    });
+
+    await db.insert(integrations).values([
+      {
+        id: "1",
+        name: "Home assistant",
+        kind: "homeAssistant",
+        url: "http://homeassist.local",
+      },
+      {
+        id: "2",
+        name: "Home plex server",
+        kind: "plex",
+        url: "http://plex.local",
+      },
+    ]);
+    await db.insert(users).values({ id: defaultUserId });
+    await db.insert(integrationUserPermissions).values({
+      integrationId: "1",
+      userId: defaultUserId,
+      permission: "interact",
+    });
+
+    const result = await caller.all();
+    expect(result).toHaveLength(1);
+    expect(result[0]!.id).toBe("1");
+    expect(result[0]!.permissions.hasUseAccess).toBe(true);
+  });
+});
+
+describe("search should return accessible integrations", () => {
+  test("without global integration access should only return integrations with use access as plain rows", async () => {
+    const db = createDb();
+    const caller = integrationRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSessionWithPermissions(),
+    });
+
+    await db.insert(integrations).values([
+      {
+        id: "1",
+        name: "Home assistant",
+        kind: "homeAssistant",
+        url: "http://homeassist.local",
+      },
+      {
+        id: "2",
+        name: "Home plex server",
+        kind: "plex",
+        url: "http://plex.local",
+      },
+    ]);
+    await db.insert(users).values({ id: defaultUserId });
+    await db.insert(integrationUserPermissions).values({
+      integrationId: "1",
+      userId: defaultUserId,
+      permission: "use",
+    });
+
+    const result = await caller.search({ query: "Home" });
+    expect(result).toHaveLength(1);
+    expect(result[0]!.id).toBe("1");
+    expect(result[0]).not.toHaveProperty("userPermissions");
+    expect(result[0]).not.toHaveProperty("groupPermissions");
+  });
 });
 
 describe("mediaRequestSearchTargets should return accessible media search integrations", () => {

packages/api/src/router/widgets/air-quality.ts

@@ -0,0 +1,29 @@
+import { z } from "zod/v4";
+
+import { env } from "@homarr/common/env";
+import { airQualityRequestHandler } from "@homarr/request-handler/air-quality";
+
+import { createTRPCRouter, publicProcedure } from "../../trpc";
+
+const atLocationInput = z.object({
+  longitude: z.number().min(-180).max(180),
+  latitude: z.number().min(-90).max(90),
+});
+
+export const airQualityRouter = createTRPCRouter({
+  atLocation: publicProcedure
+    .meta({
+      mcp: {
+        enabled: true,
+        description:
+          "Get current and forecast air quality, UV, pollutant, and pollen data for geographic coordinates. REQUIRED: latitude (-90 to 90) and longitude (-180 to 180).",
+      },
+    })
+    .input(atLocationInput)
+    .query(async ({ input }) => {
+      if (env.NO_EXTERNAL_CONNECTION) return null;
+
+      const handler = airQualityRequestHandler.handler(input);
+      return await handler.getDataAsync().then((result) => result.data);
+    }),
+});

packages/api/src/router/widgets/index.ts

@@ -13,6 +13,7 @@ export const widgetRouter = createTRPCRouter({
   bazarr: lazy(() => import("./bazarr").then((mod) => mod.bazarrRouter)),
   notebook: lazy(() => import("./notebook").then((mod) => mod.notebookRouter)),
   weather: lazy(() => import("./weather").then((mod) => mod.weatherRouter)),
+  airQuality: lazy(() => import("./air-quality").then((mod) => mod.airQualityRouter)),
   app: lazy(() => import("./app").then((mod) => mod.appRouter)),
   dnsHole: lazy(() => import("./dns-hole").then((mod) => mod.dnsHoleRouter)),
   smartHome: lazy(() => import("./smart-home").then((mod) => mod.smartHomeRouter)),

packages/api/src/router/widgets/weather.ts

@@ -6,8 +6,8 @@ import { weatherRequestHandler } from "@homarr/request-handler/weather";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const atLocationInput = z.object({
-  longitude: z.number(),
-  latitude: z.number(),
+  longitude: z.number().min(-180).max(180),
+  latitude: z.number().min(-90).max(90),
 });
 
 export const weatherRouter = createTRPCRouter({

packages/api/src/test/mcp.spec.ts

@@ -9,6 +9,7 @@ vi.mock("@homarr/auth", () => ({}));
 
 const MCP_TOOL_ALLOWLIST = {
   query: [
+    "airQuality_atLocation",
     "apiKeys_getAll",
     "app_all",
     "app_byId",

packages/definitions/src/docs/homarr-docs-sitemap.ts

@@ -336,6 +336,10 @@ export type HomarrDocumentationPath =
   | "/docs/integrations/whats-up-docker"
   | "/docs/widgets/clock"
   | "/docs/widgets/weather"
+  | "/docs/widgets/today"
+  | "/docs/widgets/air-quality"
+  | "/docs/widgets/countdown"
+  | "/docs/widgets/timer"
   | "/docs/widgets/app"
   | "/docs/widgets/iframe"
   | "/docs/widgets/video"

packages/definitions/src/docs/widget-doc-slugs.ts

@@ -3,6 +3,10 @@ import type { WidgetKind } from "../widget";
 export const widgetDocSlugs: Record<WidgetKind, string | null> = {
   clock: "clock",
   weather: "weather",
+  today: "today",
+  airQuality: "air-quality",
+  countdown: "countdown",
+  timer: "timer",
   app: "app",
   iframe: "iframe",
   video: "video",

packages/definitions/src/permissions.ts

@@ -117,3 +117,139 @@ export const groupPermissionKeys = objectKeys(groupPermissions).reduce((acc, key
   }
   return acc;
 }, [] as GroupPermissionKey[]);
+
+/**
+ * Describes how each permission category is presented in the group permission matrix UI.
+ *
+ * `levels` is an ordered escalation of access: every level implies the one below it through
+ * {@link groupPermissionParents}, so picking level N grants everything up to N.
+ *
+ * `capabilities` are the keys that are NOT part of that ladder - "may add new resources", "may
+ * upload", "may put any app on a board". They can be granted on their own (e.g. "members may create
+ * their own boards but not see anyone else's") and some levels already imply them; use
+ * {@link isCapabilityImpliedByLevel} to detect that instead of hard-coding it.
+ *
+ * Only keys that genuinely imply each other may share a ladder. `app-modify-all` implies
+ * `app-create` but NOT `app-use-all` (only `app-full-all` does), so `app-use-all` is a capability -
+ * putting it in the ladder would make picking "Modify" silently grant use of every app.
+ *
+ * Together, `levels` and `capabilities` cover every key in {@link groupPermissionKeys}, so the
+ * matrix is a lossless representation of a group's permissions.
+ */
+export const permissionMatrix = {
+  board: { levels: ["board-view-all", "board-modify-all", "board-full-all"], capabilities: ["board-create"] },
+  app: { levels: ["app-modify-all", "app-full-all"], capabilities: ["app-use-all", "app-create"] },
+  integration: {
+    levels: ["integration-use-all", "integration-interact-all", "integration-full-all"],
+    capabilities: ["integration-create"],
+  },
+  "search-engine": {
+    levels: ["search-engine-modify-all", "search-engine-full-all"],
+    capabilities: ["search-engine-create"],
+  },
+  media: { levels: ["media-view-all", "media-full-all"], capabilities: ["media-upload"] },
+  other: { levels: ["other-view-logs"], capabilities: [] },
+  admin: { levels: ["admin"], capabilities: [] },
+} as const satisfies Record<
+  string,
+  { levels: readonly GroupPermissionKey[]; capabilities: readonly GroupPermissionKey[] }
+>;
+
+export type PermissionMatrixCategory = keyof typeof permissionMatrix;
+
+export interface PermissionMatrixCategoryState {
+  /** 0 = no access, N = every key up to `permissionMatrix[category].levels[N - 1]` */
+  level: number;
+  /** The category's granted capability keys, including the ones the level already implies */
+  capabilities: readonly GroupPermissionKey[];
+}
+
+export type PermissionMatrixState = Record<PermissionMatrixCategory, PermissionMatrixCategoryState>;
+
+/**
+ * Whether the given level already grants a capability through permission inheritance.
+ * For example board level 3 (`board-full-all`) implies `board-create`.
+ */
+export const isCapabilityImpliedByLevel = (
+  category: PermissionMatrixCategory,
+  capability: GroupPermissionKey,
+  level: number,
+) => {
+  if (level <= 0) {
+    return false;
+  }
+
+  return getPermissionsWithChildren([...permissionMatrix[category].levels.slice(0, level)]).includes(capability);
+};
+
+export const permissionsToMatrixState = (permissions: GroupPermissionKey[]): PermissionMatrixState => {
+  const permissionSet = new Set(permissions);
+
+  return objectKeys(permissionMatrix).reduce((acc, category) => {
+    let level = 0;
+    permissionMatrix[category].levels.forEach((key, index) => {
+      if (permissionSet.has(key)) {
+        level = index + 1;
+      }
+    });
+
+    acc[category] = {
+      level,
+      capabilities: permissionMatrix[category].capabilities.filter(
+        (capability) => permissionSet.has(capability) || isCapabilityImpliedByLevel(category, capability, level),
+      ),
+    };
+    return acc;
+  }, {} as PermissionMatrixState);
+};
+
+export const matrixStateToPermissions = (state: PermissionMatrixState): GroupPermissionKey[] => {
+  return objectKeys(permissionMatrix).reduce((acc, category) => {
+    const { level, capabilities } = state[category];
+    acc.push(...permissionMatrix[category].levels.slice(0, level));
+    // Skip capabilities the chosen level already implies, so the stored permissions stay minimal
+    // and a state -> permissions -> state round-trip is exact.
+    acc.push(...capabilities.filter((capability) => !isCapabilityImpliedByLevel(category, capability, level)));
+    return acc;
+  }, [] as GroupPermissionKey[]);
+};
+
+export interface ManagementSectionAccess {
+  /** May see and manage every resource of the section */
+  canManageAll: boolean;
+  /** May add new resources to the section */
+  canCreate: boolean;
+  /** May open the section at all */
+  canAccess: boolean;
+}
+
+/**
+ * A management section is reachable when the user can do at least one thing in it. Both rules live
+ * here so the navigation, the pages themselves and the management home statistics cannot drift
+ * apart - each of them consumes the same function.
+ */
+export const getAppManagementAccess = (permissions: readonly GroupPermissionKey[]): ManagementSectionAccess => {
+  const canManageAll = permissions.includes("app-modify-all");
+  const canCreate = permissions.includes("app-create");
+
+  return { canManageAll, canCreate, canAccess: canManageAll || canCreate };
+};
+
+/**
+ * `hasDelegatedFullAccess` is whether the user was granted full access to at least one specific
+ * integration; it has to be looked up per request, so the caller resolves it.
+ */
+export const getIntegrationManagementAccess = (
+  permissions: readonly GroupPermissionKey[],
+  hasDelegatedFullAccess: boolean,
+): ManagementSectionAccess & { hasDelegatedFullAccess: boolean } => {
+  const canManageAll = permissions.includes("integration-full-all");
+  const canCreate = permissions.includes("integration-create");
+
+  return {
+    canManageAll,
+    canCreate,
+    hasDelegatedFullAccess,
+    canAccess: canManageAll || canCreate || hasDelegatedFullAccess,
+  };
+};

packages/definitions/src/test/permissions.spec.ts

@@ -1,7 +1,28 @@
 import { describe, expect, test } from "vitest";
 
-import type { GroupPermissionKey } from "../permissions";
-import { getPermissionsWithChildren, getPermissionsWithParents } from "../permissions";
+import type { GroupPermissionKey, PermissionMatrixState } from "../permissions";
+import {
+  getAppManagementAccess,
+  getIntegrationManagementAccess,
+  getPermissionsWithChildren,
+  getPermissionsWithParents,
+  groupPermissionKeys,
+  isCapabilityImpliedByLevel,
+  matrixStateToPermissions,
+  permissionMatrix,
+  permissionsToMatrixState,
+} from "../permissions";
+
+const emptyState = (overrides: Partial<PermissionMatrixState> = {}): PermissionMatrixState => ({
+  board: { level: 0, capabilities: [] },
+  app: { level: 0, capabilities: [] },
+  integration: { level: 0, capabilities: [] },
+  "search-engine": { level: 0, capabilities: [] },
+  media: { level: 0, capabilities: [] },
+  other: { level: 0, capabilities: [] },
+  admin: { level: 0, capabilities: [] },
+  ...overrides,
+});
 
 describe("getPermissionsWithParents should return the correct permissions", () => {
   test.each([
@@ -45,3 +66,204 @@ describe("getPermissionsWithChildren should return the correct permissions", ()
     expect(getPermissionsWithChildren(input)).toEqual(expect.arrayContaining(expectedOutput));
   });
 });
+
+describe("the matrix must be able to represent every permission", () => {
+  test("every group permission key is covered by exactly one category", () => {
+    const covered = Object.values(permissionMatrix).flatMap(({ levels, capabilities }) => [...levels, ...capabilities]);
+    expect(covered.toSorted()).toEqual(groupPermissionKeys.toSorted());
+  });
+
+  test.each(groupPermissionKeys.map((key) => [key]))("expect %s to survive a round-trip on its own", (key) => {
+    expect(matrixStateToPermissions(permissionsToMatrixState([key]))).toContain(key);
+  });
+
+  test("every ladder is a real chain, so no level can fabricate a sibling permission", () => {
+    Object.values(permissionMatrix).forEach(({ levels }) => {
+      levels.forEach((key, index) => {
+        // Selecting a level must never grant more than that level's key already implies.
+        const implied = getPermissionsWithChildren([key]);
+        expect(levels.slice(0, index + 1).every((lower) => implied.includes(lower))).toBe(true);
+      });
+    });
+  });
+});
+
+describe("permissionsToMatrixState should resolve the highest present level per category", () => {
+  test("resolves the highest present level key", () => {
+    expect(permissionsToMatrixState(["board-view-all", "board-modify-all"]).board.level).toBe(2);
+  });
+
+  test("resolves the admin category", () => {
+    expect(permissionsToMatrixState(["admin"]).admin.level).toBe(1);
+  });
+
+  test("resolves an empty selection to all zero", () => {
+    const state = permissionsToMatrixState([]);
+    expect(Object.values(state).every(({ level, capabilities }) => level === 0 && capabilities.length === 0)).toBe(
+      true,
+    );
+  });
+
+  test("resolves a standalone create key without granting any level", () => {
+    expect(permissionsToMatrixState(["board-create"]).board).toEqual({ level: 0, capabilities: ["board-create"] });
+  });
+
+  test("marks a capability as granted when the level implies it", () => {
+    expect(permissionsToMatrixState(["board-full-all"]).board.capabilities).toEqual(["board-create"]);
+    expect(permissionsToMatrixState(["app-modify-all"]).app.capabilities).toEqual(["app-create"]);
+    expect(permissionsToMatrixState(["media-full-all"]).media.capabilities).toEqual(["media-upload"]);
+  });
+
+  test("does not mark a capability as granted for a level that does not imply it", () => {
+    expect(permissionsToMatrixState(["board-modify-all"]).board.capabilities).toEqual([]);
+    expect(permissionsToMatrixState(["integration-interact-all"]).integration.capabilities).toEqual([]);
+  });
+
+  test("app-use-all is a capability, not a level, because app-modify-all does not imply it", () => {
+    // Regression: modelling use as the level below modify made picking Modify silently grant the
+    // use of every app, which the permission graph does not do.
+    const state = permissionsToMatrixState(["app-modify-all"]);
+    expect(state.app).toEqual({ level: 1, capabilities: ["app-create"] });
+    expect(matrixStateToPermissions(state)).toEqual(["app-modify-all"]);
+  });
+
+  test("app-full-all implies both app capabilities", () => {
+    expect(permissionsToMatrixState(["app-full-all"]).app).toEqual({
+      level: 2,
+      capabilities: ["app-use-all", "app-create"],
+    });
+  });
+});
+
+describe("isCapabilityImpliedByLevel", () => {
+  test.each([
+    ["board", "board-create", 0, false],
+    ["board", "board-create", 1, false],
+    ["board", "board-create", 2, false],
+    ["board", "board-create", 3, true],
+    ["app", "app-create", 1, true],
+    ["app", "app-use-all", 1, false],
+    ["app", "app-use-all", 2, true],
+    ["integration", "integration-create", 2, false],
+    ["integration", "integration-create", 3, true],
+    ["search-engine", "search-engine-create", 1, true],
+    ["media", "media-upload", 1, false],
+    ["media", "media-upload", 2, true],
+  ] satisfies [keyof typeof permissionMatrix, GroupPermissionKey, number, boolean][])(
+    "expect %s at level %i to imply %s: %s",
+    (category, capability, level, expected) => {
+      expect(isCapabilityImpliedByLevel(category, capability, level)).toBe(expected);
+    },
+  );
+});
+
+describe("matrixStateToPermissions should expand levels into permission keys", () => {
+  test("expands a level into the ordered level keys", () => {
+    expect(matrixStateToPermissions(emptyState({ board: { level: 2, capabilities: [] } }))).toEqual([
+      "board-view-all",
+      "board-modify-all",
+    ]);
+  });
+
+  test("expands the admin category into the admin key", () => {
+    expect(matrixStateToPermissions(emptyState({ admin: { level: 1, capabilities: [] } }))).toEqual(["admin"]);
+  });
+
+  test("emits a standalone capability without any level", () => {
+    expect(matrixStateToPermissions(emptyState({ board: { level: 0, capabilities: ["board-create"] } }))).toEqual([
+      "board-create",
+    ]);
+  });
+
+  test("emits media-upload as the capability of the media category", () => {
+    expect(matrixStateToPermissions(emptyState({ media: { level: 0, capabilities: ["media-upload"] } }))).toEqual([
+      "media-upload",
+    ]);
+  });
+
+  test("emits app-use-all without granting any app level", () => {
+    expect(matrixStateToPermissions(emptyState({ app: { level: 0, capabilities: ["app-use-all"] } }))).toEqual([
+      "app-use-all",
+    ]);
+  });
+
+  test("omits a capability that the chosen level already implies", () => {
+    expect(matrixStateToPermissions(emptyState({ board: { level: 3, capabilities: ["board-create"] } }))).toEqual([
+      "board-view-all",
+      "board-modify-all",
+      "board-full-all",
+    ]);
+  });
+});
+
+describe("matrix helpers should round-trip stably", () => {
+  test.each([
+    [["board-view-all", "board-modify-all"]],
+    [["integration-use-all", "integration-interact-all", "integration-full-all"]],
+    [["admin"]],
+    [[]],
+    [["search-engine-modify-all", "search-engine-full-all", "media-view-all", "other-view-logs"]],
+    [["board-create"]],
+    [["media-upload"]],
+    [["board-create", "app-create", "integration-create", "search-engine-create", "media-upload"]],
+    [["board-create", "board-view-all"]],
+    [["app-modify-all"]],
+    [["app-use-all"]],
+    [["app-use-all", "app-modify-all"]],
+  ] satisfies [GroupPermissionKey[]][])("expect %s to round-trip", (permissions) => {
+    const roundTripped = matrixStateToPermissions(permissionsToMatrixState(permissions));
+    expect(roundTripped).toEqual(expect.arrayContaining(permissions));
+    expect(roundTripped).toHaveLength(permissions.length);
+  });
+
+  test("expect a redundant capability key to be normalised away by the level that implies it", () => {
+    // app-modify-all already grants app-create, so the matrix stores the minimal set. The permission
+    // is not lost: getPermissionsWithChildren re-derives it whenever permissions are read.
+    const roundTripped = matrixStateToPermissions(permissionsToMatrixState(["app-create", "app-modify-all"]));
+    expect(roundTripped).toEqual(["app-modify-all"]);
+    expect(getPermissionsWithChildren(roundTripped)).toContain("app-create");
+  });
+
+  test("expect a single higher-level key to expand to its full set on round-trip", () => {
+    expect(matrixStateToPermissions(permissionsToMatrixState(["board-full-all"]))).toEqual([
+      "board-view-all",
+      "board-modify-all",
+      "board-full-all",
+    ]);
+  });
+});
+
+describe("management section access", () => {
+  test.each([
+    [[], false, false],
+    [["app-create"], true, false],
+    [["app-modify-all"], true, true],
+    [["app-full-all", "app-modify-all"], true, true],
+    [["app-use-all"], false, false],
+    [["board-modify-all"], false, false],
+  ] satisfies [GroupPermissionKey[], boolean, boolean][])(
+    "expect apps with %s to be reachable: %s, manage-all: %s",
+    (permissions, canAccess, canManageAll) => {
+      const access = getAppManagementAccess(permissions);
+      expect(access.canAccess).toBe(canAccess);
+      expect(access.canManageAll).toBe(canManageAll);
+    },
+  );
+
+  test.each([
+    [[], false, false, false],
+    [[], true, true, false],
+    [["integration-create"], false, true, false],
+    [["integration-full-all"], false, true, true],
+    [["integration-use-all"], false, false, false],
+    [["integration-interact-all"], false, false, false],
+    [["integration-interact-all"], true, true, false],
+  ] satisfies [GroupPermissionKey[], boolean, boolean, boolean][])(
+    "expect integrations with %s and delegated access %s to be reachable: %s, manage-all: %s",
+    (permissions, hasDelegatedFullAccess, canAccess, canManageAll) => {
+      const access = getIntegrationManagementAccess(permissions, hasDelegatedFullAccess);
+      expect(access.canAccess).toBe(canAccess);
+      expect(access.canManageAll).toBe(canManageAll);
+    },
+  );
+});

packages/definitions/src/widget.ts

@@ -1,6 +1,10 @@
 export const widgetKinds = [
   "clock",
   "weather",
+  "today",
+  "airQuality",
+  "countdown",
+  "timer",
   "app",
   "iframe",
   "video",
@@ -59,6 +63,10 @@ export const widgetKinds = [
 export type WidgetKind = (typeof widgetKinds)[number];
 
 export const widgetDefaultSizes: Partial<Record<WidgetKind, { width: number; height: number }>> = {
+  today: { width: 2, height: 1 },
+  airQuality: { width: 2, height: 1 },
+  countdown: { width: 2, height: 1 },
+  timer: { width: 2, height: 1 },
   uptimeKuma: { width: 2, height: 3 },
   audioStats: { width: 2, height: 2 },
   paperlessNgx: { width: 2, height: 2 },

packages/request-handler/src/air-quality.spec.ts

@@ -0,0 +1,101 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import { airQualityRequestHandler } from "./air-quality";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  fetchWithTrustedCertificatesAsync: vi.fn(),
+}));
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+
+const makeAirQualityResponse = () => {
+  const times = ["2026-07-01T00:00", "2026-07-01T01:00", "2026-07-02T00:00"];
+  const values = [10, 20, 30];
+  const fields = [
+    "european_aqi",
+    "us_aqi",
+    "uv_index",
+    "pm10",
+    "pm2_5",
+    "carbon_monoxide",
+    "nitrogen_dioxide",
+    "sulphur_dioxide",
+    "ozone",
+    "european_aqi_pm2_5",
+    "european_aqi_pm10",
+    "european_aqi_nitrogen_dioxide",
+    "european_aqi_ozone",
+    "european_aqi_sulphur_dioxide",
+    "us_aqi_pm2_5",
+    "us_aqi_pm10",
+    "us_aqi_nitrogen_dioxide",
+    "us_aqi_carbon_monoxide",
+    "us_aqi_ozone",
+    "us_aqi_sulphur_dioxide",
+    "alder_pollen",
+    "birch_pollen",
+    "grass_pollen",
+    "mugwort_pollen",
+    "olive_pollen",
+    "ragweed_pollen",
+  ] as const;
+
+  return {
+    timezone: "Europe/Berlin",
+    utc_offset_seconds: 7200,
+    current: {
+      time: "2026-07-01T12:00",
+      ...Object.fromEntries(fields.map((field) => [field, field === "ragweed_pollen" ? null : 12])),
+    },
+    hourly: {
+      time: times,
+      ...Object.fromEntries(fields.map((field) => [field, field === "ragweed_pollen" ? [null, null, null] : values])),
+    },
+    fields,
+  };
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  airQualityRequestHandler.invalidateCache();
+});
+
+describe("air quality request handler", () => {
+  it("requests and normalizes the full useful forecast field set", async () => {
+    const fixture = makeAirQualityResponse();
+    mockFetch.mockResolvedValue(new Response(JSON.stringify(fixture)));
+
+    const first = await airQualityRequestHandler.handler({ latitude: 48.85, longitude: 2.35 }).getDataAsync();
+    const second = await airQualityRequestHandler.handler({ latitude: 48.85, longitude: 2.35 }).getDataAsync();
+
+    expect(first.data.current.observedAt).toBe("2026-07-01T10:00:00.000Z");
+    expect(first.data.current.pollutants.pm2_5).toBe(12);
+    expect(first.data.current.pollen.ragweed).toBeNull();
+    expect(first.data.hourly[0]?.observedAt).toBe("2026-06-30T22:00:00.000Z");
+    expect(first.data.daily).toEqual([
+      { date: "2026-07-01", europeanAqiMax: 20, usAqiMax: 20, uvIndexMax: 20, pm2_5Max: 20, pm10Max: 20 },
+      { date: "2026-07-02", europeanAqiMax: 30, usAqiMax: 30, uvIndexMax: 30, pm2_5Max: 30, pm10Max: 30 },
+    ]);
+    expect(second.data).toStrictEqual(first.data);
+    expect(mockFetch).toHaveBeenCalledOnce();
+
+    const requestUrl = new URL(String(mockFetch.mock.calls[0]?.[0]));
+    expect(requestUrl.origin).toBe("https://air-quality-api.open-meteo.com");
+    expect(requestUrl.searchParams.get("forecast_days")).toBe("7");
+    expect(requestUrl.searchParams.get("timezone")).toBe("auto");
+    expect(requestUrl.searchParams.get("current")).toContain("european_aqi_pm2_5");
+    expect(requestUrl.searchParams.get("hourly")).toContain("us_aqi_carbon_monoxide");
+    expect(requestUrl.searchParams.get("hourly")).toContain("ragweed_pollen");
+  });
+
+  it("rejects unsuccessful Open-Meteo responses", async () => {
+    mockFetch.mockResolvedValue(new Response("unavailable", { status: 503 }));
+
+    await expect(
+      airQualityRequestHandler.handler({ latitude: 48.85, longitude: 2.35 }).getDataAsync(),
+    ).rejects.toThrow();
+  });
+});

packages/request-handler/src/air-quality.ts

@@ -0,0 +1,283 @@
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import { z } from "zod";
+
+import { ResponseError } from "@homarr/common/server";
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+import { withTimeoutAsync } from "@homarr/core/infrastructure/http/timeout";
+
+import { createWidgetRequestHandler } from "./lib/widget-request-handler";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const FORECAST_DAYS = 7;
+
+const requestedVariables = [
+  "european_aqi",
+  "us_aqi",
+  "uv_index",
+  "pm10",
+  "pm2_5",
+  "carbon_monoxide",
+  "nitrogen_dioxide",
+  "sulphur_dioxide",
+  "ozone",
+  "european_aqi_pm2_5",
+  "european_aqi_pm10",
+  "european_aqi_nitrogen_dioxide",
+  "european_aqi_ozone",
+  "european_aqi_sulphur_dioxide",
+  "us_aqi_pm2_5",
+  "us_aqi_pm10",
+  "us_aqi_nitrogen_dioxide",
+  "us_aqi_carbon_monoxide",
+  "us_aqi_ozone",
+  "us_aqi_sulphur_dioxide",
+  "alder_pollen",
+  "birch_pollen",
+  "grass_pollen",
+  "mugwort_pollen",
+  "olive_pollen",
+  "ragweed_pollen",
+] as const;
+
+export const airQualityRequestHandler = createWidgetRequestHandler({
+  cacheTtlMs: 15 * 60 * 1000,
+  fallbackToStaleOnError: true,
+  staleIfErrorTtlMs: 24 * 60 * 60 * 1000,
+  async requestAsync(input: { latitude: number; longitude: number }) {
+    const url = new URL("https://air-quality-api.open-meteo.com/v1/air-quality");
+    url.searchParams.set("latitude", input.latitude.toString());
+    url.searchParams.set("longitude", input.longitude.toString());
+    url.searchParams.set("current", requestedVariables.join(","));
+    url.searchParams.set("hourly", requestedVariables.join(","));
+    url.searchParams.set("forecast_days", FORECAST_DAYS.toString());
+    url.searchParams.set("timezone", "auto");
+
+    const response = await withTimeoutAsync(async (signal) => {
+      return await fetchWithTrustedCertificatesAsync(url.toString(), { signal });
+    });
+    if (!response.ok) throw new ResponseError(response);
+
+    const json: unknown = await response.json();
+    const airQuality = await atLocationOutput.parseAsync(json);
+    const hourly = airQuality.hourly.time.map((value, index) => {
+      return normalizePoint(airQuality.hourly, index, toUtcInstant(value, airQuality.timezone));
+    });
+
+    return {
+      timezone: airQuality.timezone,
+      utcOffsetSeconds: airQuality.utc_offset_seconds,
+      current: normalizePoint(
+        airQuality.current,
+        undefined,
+        toUtcInstant(airQuality.current.time, airQuality.timezone),
+      ),
+      hourly,
+      daily: getDailyMaximums(airQuality.hourly),
+    } satisfies AirQuality;
+  },
+});
+
+const nullableNumber = z.number().nullable();
+const nullableNumberArray = z.array(nullableNumber);
+
+const currentValues = z.object({
+  time: z.string(),
+  european_aqi: nullableNumber,
+  us_aqi: nullableNumber,
+  uv_index: nullableNumber,
+  pm10: nullableNumber,
+  pm2_5: nullableNumber,
+  carbon_monoxide: nullableNumber,
+  nitrogen_dioxide: nullableNumber,
+  sulphur_dioxide: nullableNumber,
+  ozone: nullableNumber,
+  european_aqi_pm2_5: nullableNumber,
+  european_aqi_pm10: nullableNumber,
+  european_aqi_nitrogen_dioxide: nullableNumber,
+  european_aqi_ozone: nullableNumber,
+  european_aqi_sulphur_dioxide: nullableNumber,
+  us_aqi_pm2_5: nullableNumber,
+  us_aqi_pm10: nullableNumber,
+  us_aqi_nitrogen_dioxide: nullableNumber,
+  us_aqi_carbon_monoxide: nullableNumber,
+  us_aqi_ozone: nullableNumber,
+  us_aqi_sulphur_dioxide: nullableNumber,
+  alder_pollen: nullableNumber,
+  birch_pollen: nullableNumber,
+  grass_pollen: nullableNumber,
+  mugwort_pollen: nullableNumber,
+  olive_pollen: nullableNumber,
+  ragweed_pollen: nullableNumber,
+});
+
+const hourlyValues = z.object({
+  time: z.array(z.string()),
+  european_aqi: nullableNumberArray,
+  us_aqi: nullableNumberArray,
+  uv_index: nullableNumberArray,
+  pm10: nullableNumberArray,
+  pm2_5: nullableNumberArray,
+  carbon_monoxide: nullableNumberArray,
+  nitrogen_dioxide: nullableNumberArray,
+  sulphur_dioxide: nullableNumberArray,
+  ozone: nullableNumberArray,
+  european_aqi_pm2_5: nullableNumberArray,
+  european_aqi_pm10: nullableNumberArray,
+  european_aqi_nitrogen_dioxide: nullableNumberArray,
+  european_aqi_ozone: nullableNumberArray,
+  european_aqi_sulphur_dioxide: nullableNumberArray,
+  us_aqi_pm2_5: nullableNumberArray,
+  us_aqi_pm10: nullableNumberArray,
+  us_aqi_nitrogen_dioxide: nullableNumberArray,
+  us_aqi_carbon_monoxide: nullableNumberArray,
+  us_aqi_ozone: nullableNumberArray,
+  us_aqi_sulphur_dioxide: nullableNumberArray,
+  alder_pollen: nullableNumberArray,
+  birch_pollen: nullableNumberArray,
+  grass_pollen: nullableNumberArray,
+  mugwort_pollen: nullableNumberArray,
+  olive_pollen: nullableNumberArray,
+  ragweed_pollen: nullableNumberArray,
+});
+
+const atLocationOutput = z.object({
+  timezone: z.string().min(1),
+  utc_offset_seconds: z.number(),
+  current: currentValues,
+  hourly: hourlyValues,
+});
+
+type CurrentValues = z.infer<typeof currentValues>;
+type HourlyValues = z.infer<typeof hourlyValues>;
+
+const getValue = (values: CurrentValues | HourlyValues, field: keyof Omit<CurrentValues, "time">, index?: number) => {
+  const value = values[field];
+  if (Array.isArray(value)) return value[index ?? 0] ?? null;
+  return value;
+};
+
+const normalizePoint = (
+  values: CurrentValues | HourlyValues,
+  index: number | undefined,
+  observedAt: string,
+): AirQualityPoint => ({
+  observedAt,
+  europeanAqi: getValue(values, "european_aqi", index),
+  usAqi: getValue(values, "us_aqi", index),
+  uvIndex: getValue(values, "uv_index", index),
+  pollutants: {
+    pm2_5: getValue(values, "pm2_5", index),
+    pm10: getValue(values, "pm10", index),
+    ozone: getValue(values, "ozone", index),
+    nitrogenDioxide: getValue(values, "nitrogen_dioxide", index),
+    sulphurDioxide: getValue(values, "sulphur_dioxide", index),
+    carbonMonoxide: getValue(values, "carbon_monoxide", index),
+  },
+  europeanSubIndices: {
+    pm2_5: getValue(values, "european_aqi_pm2_5", index),
+    pm10: getValue(values, "european_aqi_pm10", index),
+    ozone: getValue(values, "european_aqi_ozone", index),
+    nitrogenDioxide: getValue(values, "european_aqi_nitrogen_dioxide", index),
+    sulphurDioxide: getValue(values, "european_aqi_sulphur_dioxide", index),
+    carbonMonoxide: null,
+  },
+  usSubIndices: {
+    pm2_5: getValue(values, "us_aqi_pm2_5", index),
+    pm10: getValue(values, "us_aqi_pm10", index),
+    ozone: getValue(values, "us_aqi_ozone", index),
+    nitrogenDioxide: getValue(values, "us_aqi_nitrogen_dioxide", index),
+    sulphurDioxide: getValue(values, "us_aqi_sulphur_dioxide", index),
+    carbonMonoxide: getValue(values, "us_aqi_carbon_monoxide", index),
+  },
+  pollen: {
+    alder: getValue(values, "alder_pollen", index),
+    birch: getValue(values, "birch_pollen", index),
+    grass: getValue(values, "grass_pollen", index),
+    mugwort: getValue(values, "mugwort_pollen", index),
+    olive: getValue(values, "olive_pollen", index),
+    ragweed: getValue(values, "ragweed_pollen", index),
+  },
+});
+
+const getDailyMaximums = (hourly: HourlyValues): AirQuality["daily"] => {
+  const grouped = new Map<string, AirQuality["daily"][number]>();
+
+  hourly.time.forEach((time, index) => {
+    const date = time.slice(0, 10);
+    const existing = grouped.get(date) ?? {
+      date,
+      europeanAqiMax: null,
+      usAqiMax: null,
+      uvIndexMax: null,
+      pm2_5Max: null,
+      pm10Max: null,
+    };
+
+    existing.europeanAqiMax = maxNullable(existing.europeanAqiMax, hourly.european_aqi[index]);
+    existing.usAqiMax = maxNullable(existing.usAqiMax, hourly.us_aqi[index]);
+    existing.uvIndexMax = maxNullable(existing.uvIndexMax, hourly.uv_index[index]);
+    existing.pm2_5Max = maxNullable(existing.pm2_5Max, hourly.pm2_5[index]);
+    existing.pm10Max = maxNullable(existing.pm10Max, hourly.pm10[index]);
+    grouped.set(date, existing);
+  });
+
+  return Array.from(grouped.values()).slice(0, FORECAST_DAYS);
+};
+
+const maxNullable = (current: number | null, candidate: number | null | undefined): number | null => {
+  if (candidate === null || candidate === undefined) return current;
+  if (current === null) return candidate;
+  return Math.max(current, candidate);
+};
+
+const toUtcInstant = (value: string, timeZone: string): string => {
+  const parsed = dayjs.tz(value, timeZone);
+  if (!parsed.isValid()) throw new Error(`Invalid air quality timestamp: ${value}`);
+  return parsed.utc().toISOString();
+};
+
+export interface AirQualityPollutants {
+  pm2_5: number | null;
+  pm10: number | null;
+  ozone: number | null;
+  nitrogenDioxide: number | null;
+  sulphurDioxide: number | null;
+  carbonMonoxide: number | null;
+}
+
+export interface AirQualityPoint {
+  observedAt: string;
+  europeanAqi: number | null;
+  usAqi: number | null;
+  uvIndex: number | null;
+  pollutants: AirQualityPollutants;
+  europeanSubIndices: AirQualityPollutants;
+  usSubIndices: AirQualityPollutants;
+  pollen: {
+    alder: number | null;
+    birch: number | null;
+    grass: number | null;
+    mugwort: number | null;
+    olive: number | null;
+    ragweed: number | null;
+  };
+}
+
+export interface AirQuality {
+  timezone: string;
+  utcOffsetSeconds: number;
+  current: AirQualityPoint;
+  hourly: AirQualityPoint[];
+  daily: {
+    date: string;
+    europeanAqiMax: number | null;
+    usAqiMax: number | null;
+    uvIndexMax: number | null;
+    pm2_5Max: number | null;
+    pm10Max: number | null;
+  }[];
+}

packages/request-handler/src/lib/widget-request-handler.ts

@@ -2,11 +2,14 @@ import { createRequestHandler } from "./request-handler";
 
 interface Options<TData, TInput extends Record<string, unknown>> {
   requestAsync: (input: TInput) => Promise<TData>;
+  cacheTtlMs?: number;
+  fallbackToStaleOnError?: boolean;
+  staleIfErrorTtlMs?: number;
 }
 
 export const createWidgetRequestHandler = <TData, TInput extends Record<string, unknown>>(
   options: Options<TData, TInput>,
 ) => {
-  const inner = createRequestHandler<TData, TInput>({ requestAsync: options.requestAsync });
+  const inner = createRequestHandler<TData, TInput>(options);
   return inner;
 };

packages/request-handler/src/weather.spec.ts

@@ -0,0 +1,112 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import { weatherRequestHandler } from "./weather";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  fetchWithTrustedCertificatesAsync: vi.fn(),
+}));
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+
+const makeWeatherResponse = () => {
+  const hours = Array.from({ length: 25 }, (_, index) => `2026-07-01T${String(index % 24).padStart(2, "0")}:00`);
+  const days = [
+    "2026-06-30",
+    ...Array.from({ length: 7 }, (_, index) => `2026-07-${String(index + 1).padStart(2, "0")}`),
+  ];
+  const hourlyValues = hours.map<number | null>((_, index) => index);
+  const dailyValues = days.map<number | null>((_, index) => index);
+  const sunrise = days.map<string | null>((day) => `${day}T05:00`);
+
+  return {
+    timezone: "Europe/Berlin",
+    utc_offset_seconds: 7200,
+    current: {
+      time: "2026-07-01T12:00",
+      temperature_2m: 24,
+      relative_humidity_2m: 55,
+      apparent_temperature: 25,
+      is_day: 1,
+      precipitation: 0,
+      weather_code: 1,
+      wind_speed_10m: 12,
+      wind_gusts_10m: 20,
+    },
+    hourly: {
+      time: hours,
+      temperature_2m: hourlyValues,
+      apparent_temperature: hourlyValues,
+      precipitation_probability: hourlyValues,
+      precipitation: hourlyValues,
+      weather_code: hourlyValues,
+      relative_humidity_2m: hourlyValues,
+      wind_speed_10m: hourlyValues,
+      wind_gusts_10m: hourlyValues,
+    },
+    daily: {
+      time: days,
+      weather_code: dailyValues,
+      temperature_2m_max: dailyValues,
+      temperature_2m_min: dailyValues,
+      apparent_temperature_max: dailyValues,
+      apparent_temperature_min: dailyValues,
+      precipitation_probability_max: dailyValues,
+      precipitation_sum: dailyValues,
+      relative_humidity_2m_mean: dailyValues,
+      wind_speed_10m_max: dailyValues,
+      wind_gusts_10m_max: dailyValues,
+      uv_index_max: dailyValues,
+      sunrise,
+      sunset: days.map((day) => `${day}T21:00`),
+      daylight_duration: dailyValues,
+    },
+  };
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  weatherRequestHandler.invalidateCache();
+});
+
+describe("weather request handler", () => {
+  it("requests bounded useful forecasts and normalizes location times", async () => {
+    const response = makeWeatherResponse();
+    response.hourly.temperature_2m = [null];
+    Reflect.deleteProperty(response.hourly, "wind_gusts_10m");
+    response.daily.sunrise[1] = null;
+    mockFetch.mockResolvedValue(new Response(JSON.stringify(response)));
+
+    const first = await weatherRequestHandler.handler({ latitude: 48.85, longitude: 2.35 }).getDataAsync();
+    const second = await weatherRequestHandler.handler({ latitude: 48.85, longitude: 2.35 }).getDataAsync();
+
+    expect(first.data.current.observedAt).toBe("2026-07-01T10:00:00.000Z");
+    expect(first.data.hourly).toHaveLength(24);
+    expect(first.data.daily).toHaveLength(7);
+    expect(first.data.daily[0]?.date).toBe("2026-07-01");
+    expect(first.data.hourly[0]?.temperature).toBeNull();
+    expect(first.data.hourly[1]?.temperature).toBeNull();
+    expect(first.data.hourly[0]?.windGusts).toBeNull();
+    expect(first.data.daily[0]?.sunriseAt).toBeNull();
+    expect(first.data.daily[1]?.sunriseAt).toBe("2026-07-02T03:00:00.000Z");
+    expect(second.data).toStrictEqual(first.data);
+    expect(mockFetch).toHaveBeenCalledOnce();
+
+    const requestUrl = new URL(String(mockFetch.mock.calls[0]?.[0]));
+    expect(requestUrl.searchParams.get("forecast_hours")).toBe("24");
+    expect(requestUrl.searchParams.get("forecast_days")).toBe("7");
+    expect(requestUrl.searchParams.has("past_days")).toBe(false);
+    expect(requestUrl.searchParams.get("timezone")).toBe("auto");
+    expect(requestUrl.searchParams.get("current")).toContain("apparent_temperature");
+    expect(requestUrl.searchParams.get("hourly")).toContain("precipitation_probability");
+    expect(requestUrl.searchParams.get("daily")).toContain("uv_index_max");
+  });
+
+  it("rejects unsuccessful Open-Meteo responses", async () => {
+    mockFetch.mockResolvedValue(new Response("unavailable", { status: 503 }));
+
+    await expect(weatherRequestHandler.handler({ latitude: 48.85, longitude: 2.35 }).getDataAsync()).rejects.toThrow();
+  });
+});

packages/request-handler/src/weather.ts

@@ -1,73 +1,255 @@
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
 import { z } from "zod";
 
+import { ResponseError } from "@homarr/common/server";
 import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 import { withTimeoutAsync } from "@homarr/core/infrastructure/http/timeout";
 
 import { createWidgetRequestHandler } from "./lib/widget-request-handler";
 
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const HOURLY_FORECAST_LENGTH = 24;
+const DAILY_FORECAST_LENGTH = 7;
+
+const requestWeatherAsync = async (input: { latitude: number; longitude: number }): Promise<Weather> => {
+  const url = new URL("https://api.open-meteo.com/v1/forecast");
+  url.searchParams.set("latitude", input.latitude.toString());
+  url.searchParams.set("longitude", input.longitude.toString());
+  url.searchParams.set(
+    "current",
+    [
+      "temperature_2m",
+      "relative_humidity_2m",
+      "apparent_temperature",
+      "is_day",
+      "precipitation",
+      "weather_code",
+      "wind_speed_10m",
+      "wind_gusts_10m",
+    ].join(","),
+  );
+  url.searchParams.set(
+    "hourly",
+    [
+      "temperature_2m",
+      "apparent_temperature",
+      "precipitation_probability",
+      "precipitation",
+      "weather_code",
+      "relative_humidity_2m",
+      "wind_speed_10m",
+      "wind_gusts_10m",
+    ].join(","),
+  );
+  url.searchParams.set(
+    "daily",
+    [
+      "weather_code",
+      "temperature_2m_max",
+      "temperature_2m_min",
+      "apparent_temperature_max",
+      "apparent_temperature_min",
+      "precipitation_probability_max",
+      "precipitation_sum",
+      "relative_humidity_2m_mean",
+      "wind_speed_10m_max",
+      "wind_gusts_10m_max",
+      "uv_index_max",
+      "sunrise",
+      "sunset",
+      "daylight_duration",
+    ].join(","),
+  );
+  url.searchParams.set("timezone", "auto");
+  url.searchParams.set("forecast_hours", HOURLY_FORECAST_LENGTH.toString());
+  url.searchParams.set("forecast_days", DAILY_FORECAST_LENGTH.toString());
+
+  const res = await withTimeoutAsync(async (signal) => {
+    return await fetchWithTrustedCertificatesAsync(url.toString(), { signal });
+  });
+  if (!res.ok) throw new ResponseError(res);
+
+  const json: unknown = await res.json();
+  const weather = await atLocationOutput.parseAsync(json);
+  const currentLocalDate = weather.current.time.slice(0, 10);
+  const matchedCurrentDayIndex = weather.daily.time.indexOf(currentLocalDate);
+  const currentDayIndex = matchedCurrentDayIndex < 0 ? 0 : matchedCurrentDayIndex;
+  const dailyIndexes = weather.daily.time
+    .map((_, index) => index)
+    .slice(currentDayIndex, currentDayIndex + DAILY_FORECAST_LENGTH);
+  return {
+    timezone: weather.timezone,
+    utcOffsetSeconds: weather.utc_offset_seconds,
+    current: {
+      observedAt: toUtcInstant(weather.current.time, weather.timezone),
+      temperature: weather.current.temperature_2m,
+      apparentTemperature: weather.current.apparent_temperature,
+      relativeHumidity: weather.current.relative_humidity_2m,
+      precipitation: weather.current.precipitation,
+      weatherCode: weather.current.weather_code,
+      weathercode: weather.current.weather_code,
+      windSpeed: weather.current.wind_speed_10m,
+      windspeed: weather.current.wind_speed_10m,
+      windGusts: weather.current.wind_gusts_10m,
+      isDay: weather.current.is_day === 1,
+    },
+    hourly: weather.hourly.time.slice(0, HOURLY_FORECAST_LENGTH).map((value, index) => {
+      return {
+        observedAt: toUtcInstant(value, weather.timezone),
+        temperature: weather.hourly.temperature_2m[index] ?? null,
+        apparentTemperature: weather.hourly.apparent_temperature[index] ?? null,
+        precipitationProbability: weather.hourly.precipitation_probability[index] ?? null,
+        precipitation: weather.hourly.precipitation[index] ?? null,
+        weatherCode: weather.hourly.weather_code[index] ?? null,
+        relativeHumidity: weather.hourly.relative_humidity_2m[index] ?? null,
+        windSpeed: weather.hourly.wind_speed_10m[index] ?? null,
+        windGusts: weather.hourly.wind_gusts_10m[index] ?? null,
+      };
+    }),
+    daily: dailyIndexes.map((index) => {
+      const value = weather.daily.time[index] ?? currentLocalDate;
+      return {
+        date: value,
+        time: value,
+        weatherCode: weather.daily.weather_code[index] ?? 404,
+        maxTemperature: weather.daily.temperature_2m_max[index] ?? null,
+        maxTemp: weather.daily.temperature_2m_max[index] ?? undefined,
+        minTemperature: weather.daily.temperature_2m_min[index] ?? null,
+        minTemp: weather.daily.temperature_2m_min[index] ?? undefined,
+        maxApparentTemperature: weather.daily.apparent_temperature_max[index] ?? null,
+        minApparentTemperature: weather.daily.apparent_temperature_min[index] ?? null,
+        precipitationProbability: weather.daily.precipitation_probability_max[index] ?? null,
+        precipitation: weather.daily.precipitation_sum[index] ?? null,
+        averageHumidity: weather.daily.relative_humidity_2m_mean[index] ?? null,
+        humidity: weather.daily.relative_humidity_2m_mean[index] ?? undefined,
+        maxWindSpeed: weather.daily.wind_speed_10m_max[index] ?? null,
+        maxWindGusts: weather.daily.wind_gusts_10m_max[index] ?? null,
+        uvIndex: weather.daily.uv_index_max[index] ?? null,
+        sunriseAt: toOptionalUtcInstant(weather.daily.sunrise[index], weather.timezone),
+        sunrise: weather.daily.sunrise[index] ?? undefined,
+        sunsetAt: toOptionalUtcInstant(weather.daily.sunset[index], weather.timezone),
+        sunset: weather.daily.sunset[index] ?? undefined,
+        daylightDuration: weather.daily.daylight_duration[index] ?? null,
+      };
+    }),
+  } satisfies Weather;
+};
+
 export const weatherRequestHandler = createWidgetRequestHandler({
-  async requestAsync(input: { latitude: number; longitude: number }) {
-    const res = await withTimeoutAsync(async (signal) => {
-      return await fetchWithTrustedCertificatesAsync(
-        `https://api.open-meteo.com/v1/forecast?latitude=${input.latitude}&longitude=${input.longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min,sunrise,sunset,wind_speed_10m_max,wind_gusts_10m_max,relative_humidity_2m_mean&current_weather=true&timezone=auto`,
-        { signal },
-      );
-    });
-    const json: unknown = await res.json();
-    const weather = await atLocationOutput.parseAsync(json);
-    return {
-      current: weather.current_weather,
-      daily: weather.daily.time.map((value, index) => {
-        return {
-          time: value,
-          weatherCode: weather.daily.weathercode[index] ?? 404,
-          maxTemp: weather.daily.temperature_2m_max[index],
-          minTemp: weather.daily.temperature_2m_min[index],
-          sunrise: weather.daily.sunrise[index],
-          sunset: weather.daily.sunset[index],
-          maxWindSpeed: weather.daily.wind_speed_10m_max[index],
-          maxWindGusts: weather.daily.wind_gusts_10m_max[index],
-          humidity: weather.daily.relative_humidity_2m_mean[index],
-        };
-      }),
-    } satisfies Weather;
-  },
+  cacheTtlMs: 5 * 60 * 1000,
+  requestAsync: requestWeatherAsync,
 });
 
+const nullableNumberArray = z.array(z.number().nullable()).default([]);
+const nullableStringArray = z.array(z.string().nullable()).default([]);
+
 const atLocationOutput = z.object({
-  current_weather: z.object({
-    weathercode: z.number(),
-    temperature: z.number(),
-    windspeed: z.number(),
+  timezone: z.string().min(1),
+  utc_offset_seconds: z.number(),
+  current: z.object({
+    time: z.string(),
+    temperature_2m: z.number(),
+    relative_humidity_2m: z.number(),
+    apparent_temperature: z.number(),
+    is_day: z.number(),
+    precipitation: z.number(),
+    weather_code: z.number(),
+    wind_speed_10m: z.number(),
+    wind_gusts_10m: z.number(),
+  }),
+  hourly: z.object({
+    time: z.array(z.string()),
+    temperature_2m: nullableNumberArray,
+    apparent_temperature: nullableNumberArray,
+    precipitation_probability: nullableNumberArray,
+    precipitation: nullableNumberArray,
+    weather_code: nullableNumberArray,
+    relative_humidity_2m: nullableNumberArray,
+    wind_speed_10m: nullableNumberArray,
+    wind_gusts_10m: nullableNumberArray,
   }),
   daily: z.object({
     time: z.array(z.string()),
-    weathercode: z.array(z.number()),
-    temperature_2m_max: z.array(z.number()),
-    temperature_2m_min: z.array(z.number()),
-    sunrise: z.array(z.string()),
-    sunset: z.array(z.string()),
-    wind_speed_10m_max: z.array(z.number()),
-    wind_gusts_10m_max: z.array(z.number()),
-    relative_humidity_2m_mean: z.array(z.number()),
+    weather_code: nullableNumberArray,
+    temperature_2m_max: nullableNumberArray,
+    temperature_2m_min: nullableNumberArray,
+    apparent_temperature_max: nullableNumberArray,
+    apparent_temperature_min: nullableNumberArray,
+    precipitation_probability_max: nullableNumberArray,
+    precipitation_sum: nullableNumberArray,
+    relative_humidity_2m_mean: nullableNumberArray,
+    wind_speed_10m_max: nullableNumberArray,
+    wind_gusts_10m_max: nullableNumberArray,
+    uv_index_max: nullableNumberArray,
+    sunrise: nullableStringArray,
+    sunset: nullableStringArray,
+    daylight_duration: nullableNumberArray,
   }),
 });
 
+const toUtcInstant = (value: string, timeZone: string): string => {
+  const parsed = dayjs.tz(value, timeZone);
+  if (!parsed.isValid()) throw new Error(`Invalid weather timestamp: ${value}`);
+  return parsed.utc().toISOString();
+};
+
+const toOptionalUtcInstant = (value: string | null | undefined, timeZone: string): string | null => {
+  if (!value) return null;
+  return toUtcInstant(value, timeZone);
+};
+
 export interface Weather {
+  timezone: string;
+  utcOffsetSeconds: number;
   current: {
-    weathercode: number;
     temperature: number;
+    apparentTemperature: number;
+    relativeHumidity: number;
+    precipitation: number;
+    weatherCode: number;
+    weathercode: number;
+    windSpeed: number;
     windspeed: number;
+    windGusts: number;
+    isDay: boolean;
+    observedAt: string;
   };
+  hourly: {
+    observedAt: string;
+    temperature: number | null;
+    apparentTemperature: number | null;
+    precipitationProbability: number | null;
+    precipitation: number | null;
+    weatherCode: number | null;
+    relativeHumidity: number | null;
+    windSpeed: number | null;
+    windGusts: number | null;
+  }[];
   daily: {
+    date: string;
     time: string;
     weatherCode: number;
+    maxTemperature: number | null;
     maxTemp: number | undefined;
+    minTemperature: number | null;
     minTemp: number | undefined;
-    sunrise: string | undefined;
-    sunset: string | undefined;
-    maxWindSpeed: number | undefined;
-    maxWindGusts: number | undefined;
+    maxApparentTemperature: number | null;
+    minApparentTemperature: number | null;
+    precipitationProbability: number | null;
+    precipitation: number | null;
+    averageHumidity: number | null;
     humidity: number | undefined;
+    maxWindSpeed: number | null;
+    maxWindGusts: number | null;
+    uvIndex: number | null;
+    sunriseAt: string | null;
+    sunrise: string | undefined;
+    sunsetAt: string | null;
+    sunset: string | undefined;
+    daylightDuration: number | null;
   }[];
 }

packages/spotlight/src/modes/app-integration-board/index.tsx

@@ -17,10 +17,11 @@ export const appIntegrationBoardMode = {
       return groups;
     }
 
-    return groups.concat(
-      session.user.permissions.includes("board-modify-all")
-        ? [appsSearchGroup, integrationsSearchGroup]
-        : [integrationsSearchGroup],
-    );
+    // Mirrors the gate on app.search: either permission may browse the app catalogue, so an app
+    // administrator without board access still gets the group instead of a FORBIDDEN response.
+    const canSearchApps =
+      session.user.permissions.includes("board-modify-all") || session.user.permissions.includes("app-modify-all");
+
+    return groups.concat(canSearchApps ? [appsSearchGroup, integrationsSearchGroup] : [integrationsSearchGroup]);
   },
 } satisfies SearchMode;

packages/translation/src/lang/en.json

@@ -648,6 +648,35 @@
             "description": "Allow members to manage and delete any search engine"
           }
         }
+      },
+      "matrix": {
+        "none": "No access",
+        "impliedHint": "Also grants: {permissions}",
+        "grantedViaAdmin": "Administrators already have this. Set Admin to “No access” to configure it separately.",
+        "preset": {
+          "label": "Presets",
+          "viewer": "Viewer",
+          "viewerDescription": "Read-only: view boards and medias, use apps and integrations that already exist.",
+          "editor": "Editor",
+          "editorDescription": "Day-to-day management: create and edit boards, apps, integrations and search engines.",
+          "admin": "Admin",
+          "adminDescription": "Unrestricted access to every feature and setting, including user management.",
+          "custom": "Custom"
+        },
+        "effective": {
+          "title": "Effective permissions",
+          "description": "The full, de-duplicated set of actions members of this group can perform, including permissions granted indirectly.",
+          "empty": "No permissions selected"
+        },
+        "noneDescription": "Members get no access to this area.",
+        "level": {
+          "view": "View",
+          "use": "Use",
+          "interact": "Interact",
+          "modify": "Modify",
+          "full": "Full"
+        },
+        "capabilityIncluded": "Already included in “{level}”"
       }
     },
     "memberNotice": {
@@ -774,7 +803,9 @@
           "action": "Create your first app",
           "filteredTitle": "No apps match your search",
           "filteredDescription": "No apps match \"{search}\". Try another name or URL.",
-          "clearSearch": "Clear search"
+          "clearSearch": "Clear search",
+          "createOnlyTitle": "You can only add apps",
+          "createOnlyDescription": "Your permissions let you create apps but not browse existing ones. Ask an administrator for app management access to see the full list."
         }
       },
       "create": {
@@ -1576,6 +1607,7 @@
         "title": "Integrations",
         "ariaLabel": "Configured integrations",
         "search": "Search integrations",
+        "scopedNote": "Showing only the integrations you are allowed to manage.",
         "action": {
           "edit": "Edit {name}",
           "delete": "Delete {name}"
@@ -1586,7 +1618,9 @@
           "action": "Create your first integration",
           "filteredTitle": "No integrations match your search",
           "filteredDescription": "No integrations match \"{search}\". Try another name, type, or URL.",
-          "clearSearch": "Clear search"
+          "clearSearch": "Clear search",
+          "createOnlyTitle": "You can only add integrations",
+          "createOnlyDescription": "Your permissions let you create integrations but not manage existing ones. Ask an administrator for access to the ones you need."
         }
       },
       "create": {
@@ -3119,9 +3153,6 @@
           "label": "24-hour format",
           "description": "Use 24-hour format instead of 12-hour format"
         },
-        "showSeconds": {
-          "label": "Display seconds"
-        },
         "useCustomTimezone": {
           "label": "Use a fixed timezone"
         },
@@ -3133,16 +3164,12 @@
           "label": "Show the date"
         },
         "dateFormat": {
-          "label": "Date Format",
-          "description": "How the date should look like"
+          "label": "Date format",
+          "description": "Choose a Day.js preset. Each option shows a live example and its format tokens."
         },
         "customTimeFormat": {
-          "label": "Custom time format",
-          "description": "Use ISO 8601 to format time (this will override other options)"
-        },
-        "customDateFormat": {
-          "label": "Custom date format",
-          "description": "Use ISO 8601 to format date (this will override other options)"
+          "label": "Time format",
+          "description": "Choose a Day.js preset. The selected format controls 12/24-hour display and whether the clock updates every second."
         },
         "showWeather": {
           "label": "Show weather",
@@ -3153,7 +3180,317 @@
         },
         "isWeatherFormatFahrenheit": {
           "label": "Use Fahrenheit"
+        },
+        "animateWeatherIcon": {
+          "label": "Animate weather icon",
+          "description": "Animate the weather icon. Disabled by default and always disabled when reduced motion is requested."
+        },
+        "worldClockCities": {
+          "label": "World clock cities",
+          "description": "Add and order up to six cities for advanced view."
         }
+      },
+      "timezoneList": {
+        "timezone": "Timezone",
+        "cityLabel": "City label",
+        "searchPlaceholder": "Search timezones",
+        "noResults": "No timezones found",
+        "unsupportedOption": "Unsupported: {timeZone}",
+        "add": "Add city",
+        "remove": "Remove {city}",
+        "reorder": "Reorder {city}",
+        "limit": "{count} of {maximum} cities configured"
+      },
+      "worldClock": {
+        "primary": "Primary clock",
+        "local": "Local time",
+        "today": "Today",
+        "tomorrow": "Tomorrow",
+        "yesterday": "Yesterday",
+        "noSecondaryCities": "Add cities in widget options to compare them here.",
+        "unsupportedPrimaryTitle": "Primary timezone is unavailable",
+        "unsupportedPrimary": "{timeZone} is not supported in this browser. Showing UTC as a clearly marked fallback.",
+        "unsupportedTimeZone": "Unsupported timezone: {timeZone}",
+        "accessibleTime": "{city}: {time}, {date}, {timeZone}",
+        "advancedLabel": "Advanced world clock",
+        "cities": "World clocks",
+        "cityCount": "{count} timezones",
+        "timeBarLabel": "24-hour time-of-day position for {city}",
+        "dayProgress": "{percent}% elapsed · {hours}h {minutes}m remaining",
+        "phaseLegend": "Time-of-day legend",
+        "tick": {
+          "midnight": "00",
+          "morning": "06",
+          "noon": "12",
+          "evening": "18",
+          "end": "24"
+        },
+        "phaseRange": {
+          "night": "00–05 · 21–24",
+          "dawn": "05–08",
+          "day": "08–18",
+          "dusk": "18–21"
+        },
+        "phase": {
+          "night": "Night",
+          "dawn": "Dawn",
+          "day": "Day",
+          "dusk": "Dusk"
+        }
+      }
+    },
+    "airQuality": {
+      "name": "Air Quality & UV",
+      "description": "Displays air quality, ultraviolet index, pollutants and pollen for a location.",
+      "option": {
+        "location": {
+          "label": "Air quality location"
+        },
+        "aqiStandard": {
+          "label": "AQI standard",
+          "options": {
+            "auto": "Automatic for locale",
+            "european": "European AQI",
+            "us": "US AQI"
+          }
+        },
+        "showUv": {
+          "label": "Show UV index"
+        },
+        "showPollutants": {
+          "label": "Show pollutant concentrations"
+        },
+        "showPollen": {
+          "label": "Show pollen concentrations"
+        }
+      },
+      "category": {
+        "good": "Good",
+        "fair": "Fair",
+        "moderate": "Moderate",
+        "unhealthySensitive": "Unhealthy for sensitive groups",
+        "unhealthy": "Unhealthy",
+        "poor": "Poor",
+        "veryPoor": "Very poor",
+        "veryUnhealthy": "Very unhealthy",
+        "extremelyPoor": "Extremely poor",
+        "hazardous": "Hazardous",
+        "unknown": "No AQI reading"
+      },
+      "uv": {
+        "label": "UV index",
+        "category": {
+          "low": "Low",
+          "moderate": "Moderate",
+          "high": "High",
+          "veryHigh": "Very high",
+          "extreme": "Extreme",
+          "unknown": "No reading"
+        }
+      },
+      "dominantPollutant": "Dominant pollutant",
+      "aqiLabel": "AQI",
+      "strongestPollen": "Highest pollen",
+      "unit": {
+        "concentration": "{value} µg/m³",
+        "pollen": "{value} grains/m³"
+      },
+      "pollutant": {
+        "pm2_5": "PM2.5",
+        "pm10": "PM10",
+        "ozone": "Ozone",
+        "nitrogenDioxide": "Nitrogen dioxide",
+        "sulphurDioxide": "Sulphur dioxide",
+        "carbonMonoxide": "Carbon monoxide"
+      },
+      "pollen": {
+        "alder": "Alder",
+        "birch": "Birch",
+        "grass": "Grass",
+        "mugwort": "Mugwort",
+        "olive": "Olive",
+        "ragweed": "Ragweed"
+      },
+      "compact": {
+        "sixHourTrend": "AQI trend for the next six hours"
+      },
+      "advanced": {
+        "observedAt": "Updated at {time}",
+        "next24Hours": "Next 24 hours",
+        "pollutants": "Pollutant concentrations",
+        "pollen": "Pollen concentrations",
+        "sevenDayForecast": "7-day maximum forecast",
+        "aqiValue": "AQI {value}",
+        "uvValue": "UV {value}",
+        "uvShort": "UV {value}",
+        "noForecast": "No forecast data available"
+      }
+    },
+    "countdown": {
+      "name": "Countdowns",
+      "description": "Tracks upcoming events and recurring anniversaries.",
+      "option": {
+        "events": {
+          "label": "Events",
+          "description": "Add and order up to 20 one-time or yearly countdowns. Dates are entered in the selected timezone."
+        },
+        "showProgress": {
+          "label": "Show progress"
+        },
+        "showSeconds": {
+          "label": "Show seconds",
+          "description": "Keep seconds visible for every upcoming event."
+        }
+      },
+      "dateTimeEventList": {
+        "newEvent": "New event",
+        "add": "Add event",
+        "remove": "Remove {event}",
+        "reorder": "Reorder {event}",
+        "eventLabel": "Event label",
+        "timezone": "Timezone",
+        "unsupportedOption": "Unsupported: {timeZone}",
+        "recurrence": "Repeats",
+        "recurrenceOption": {
+          "none": "Does not repeat",
+          "yearly": "Every year"
+        },
+        "target": "Event date and time",
+        "trackProgress": "Track progress from a start date",
+        "start": "Progress start date and time",
+        "confirmDateTime": "Confirm date and time",
+        "limit": "{count} of {maximum} events configured"
+      },
+      "empty": {
+        "title": "No countdowns yet",
+        "description": "Add an event in widget options to start counting down."
+      },
+      "completed": "Completed",
+      "yearly": "Yearly",
+      "progress": "Event progress",
+      "upcoming": "Upcoming",
+      "completedEvents": "Completed events",
+      "invalid": {
+        "title": "Some events cannot be displayed",
+        "description": "{count, plural, one {One event has an invalid date or unsupported timezone.} other {# events have an invalid date or unsupported timezone.}}",
+        "value": "Unavailable"
+      },
+      "alert": {
+        "notifications": "Browser notifications",
+        "permissionDenied": "Notifications are blocked in this browser.",
+        "reached": "The countdown has reached its target."
+      }
+    },
+    "timer": {
+      "name": "Timer / Pomodoro",
+      "description": "Runs a simple timer or a configurable Pomodoro sequence.",
+      "option": {
+        "mode": {
+          "label": "Mode",
+          "options": {
+            "timer": "Timer",
+            "pomodoro": "Pomodoro"
+          }
+        },
+        "timerMinutes": {
+          "label": "Timer minutes"
+        },
+        "focusMinutes": {
+          "label": "Focus minutes"
+        },
+        "shortBreakMinutes": {
+          "label": "Short break minutes"
+        },
+        "longBreakMinutes": {
+          "label": "Long break minutes"
+        },
+        "sessionsBeforeLongBreak": {
+          "label": "Focus sessions before a long break"
+        },
+        "autoStartBreaks": {
+          "label": "Automatically start breaks"
+        },
+        "autoStartFocus": {
+          "label": "Automatically start focus sessions"
+        }
+      },
+      "phase": {
+        "timer": "Timer",
+        "focus": "Focus",
+        "shortBreak": "Short break",
+        "longBreak": "Long break"
+      },
+      "action": {
+        "start": "Start",
+        "pause": "Pause",
+        "reset": "Reset"
+      },
+      "attention": {
+        "timerComplete": "Timer complete",
+        "phaseReady": "{phase} ready"
+      },
+      "progress": "Timer progress: {progress}%",
+      "compact": {
+        "completedFocus": "{count, plural, =0 {No focus sessions completed} one {# focus session completed} other {# focus sessions completed}}"
+      },
+      "alert": {
+        "title": "Timer complete",
+        "completed": "{phase} completed."
+      },
+      "advanced": {
+        "sequence": "Pomodoro sequence",
+        "focusSession": "Focus {session}",
+        "settings": "Permanent settings",
+        "settingsHint": "Use the widget context menu to edit these board settings.",
+        "localAlerts": "Local alerts",
+        "notifications": "Browser notifications",
+        "sound": "Timer sounds",
+        "localAlertsHint": "Timer sounds are enabled by default. Sounds and notifications apply only to this widget in this browser.",
+        "notificationsDenied": "Notifications are blocked in this browser."
+      }
+    },
+    "today": {
+      "name": "Today",
+      "description": "Displays the current date and progress through the calendar.",
+      "option": {
+        "weekConvention": {
+          "label": "Week numbering",
+          "options": {
+            "locale": "Use locale rules",
+            "iso": "ISO 8601"
+          }
+        },
+        "showWeekNumber": {
+          "label": "Show week number"
+        },
+        "showDayOfYear": {
+          "label": "Show day of year"
+        },
+        "showQuarter": {
+          "label": "Show quarter"
+        },
+        "showYearProgress": {
+          "label": "Show year progress"
+        }
+      },
+      "weekNumber": "Week {week}",
+      "dayOfYear": "Day {day} of {total}",
+      "quarter": "Quarter {quarter}",
+      "daysAfterToday": "{days, plural, =0 {Last day of the year} one {# day after today} other {# days after today}}",
+      "weekProgressLabel": "Week progress",
+      "monthProgressLabel": "Month progress",
+      "yearProgressLabel": "Year progress",
+      "yearProgress": "Year progress: {progress}%",
+      "weekConvention": {
+        "locale": "Week numbers follow your locale",
+        "iso": "ISO 8601 week numbers"
+      },
+      "advanced": {
+        "week": "Week number",
+        "dayOfYear": "Day of year",
+        "quarter": "Quarter",
+        "quarterValue": "Q{quarter}",
+        "daysRemaining": "Days after today"
       }
     },
     "minecraftServerStatus": {
@@ -3499,6 +3836,10 @@
               "label": "1 Month"
             }
           }
+        },
+        "showDetails": {
+          "label": "Show details",
+          "description": "Show the name, change, and time range in the compact view. Turn off for just the symbol and price."
         }
       }
     },
@@ -3545,6 +3886,13 @@
         "disableTemperatureDecimals": {
           "label": "Disable temperature decimals"
         },
+        "animateIcons": {
+          "label": "Animate weather icons"
+        },
+        "showHumidity": {
+          "label": "Show humidity",
+          "description": "Display humidity in current conditions, hourly details and daily forecasts"
+        },
         "showCurrentWindSpeed": {
           "label": "Show current wind speed",
           "description": "Only on current weather"
@@ -3598,11 +3946,40 @@
       "detailsFor": "Show weather details for {date}",
       "advanced": {
         "forecast": "7-day forecast",
+        "hourlyForecast": "Next 24 hours",
         "day": "Day",
+        "time": "Time",
         "conditions": "Conditions",
-        "temperature": "High / low",
+        "temperature": "Temperature",
+        "feelsLike": "Feels like {temperature}",
+        "feelsLikeLabel": "Feels like",
+        "feelsLikeRange": "Feels like: {maximum} / {minimum}",
+        "highLow": "High {maximum} · low {minimum}",
+        "observedAt": "Updated at {time}",
         "humidity": "Humidity",
+        "averageHumidity": "Average humidity: {humidity}%",
+        "currentHumidity": "Current humidity",
         "wind": "Wind / gusts ({unit})",
+        "currentWind": "Current wind / gusts",
+        "windValue": "{speed} / {gusts} {unit}",
+        "windDetail": "Max wind / gusts: {speed} / {gusts} {unit}",
+        "nextHourPrecipitation": "Precipitation next hour",
+        "precipitationChance": "Precipitation chance",
+        "precipitationValue": "{probability}% · {amount} mm",
+        "precipitationDetail": "Precipitation: {probability}% · {amount} mm",
+        "todayUv": "Today's max UV index",
+        "uvIndex": "Max UV index: {value}",
+        "daylight": "Daylight: {duration}",
+        "hourlyTooltip": "Feels like {feelsLike}{temperatureUnit} · {amount} mm · {humidity}% humidity · {speed} {speedUnit} wind",
+        "hourlyTooltipWithoutHumidity": "Feels like {feelsLike}{temperatureUnit} · {amount} mm · {speed} {speedUnit} wind",
+        "detailLabel": {
+          "feelsLike": "Feels like",
+          "precipitation": "Precipitation",
+          "humidity": "Average humidity",
+          "wind": "Max wind / gusts",
+          "uv": "Max UV index",
+          "daylight": "Daylight"
+        },
         "sun": "Sunrise / sunset",
         "noForecast": "No forecast data available"
       }
@@ -6142,7 +6519,8 @@
     },
     "notFound": {
       "title": "Not Found",
-      "text": "Could not find requested resource"
+      "text": "Could not find requested resource",
+      "backToHome": "Back to management home"
     },
     "error": {
       "title": "This page couldn't load",

packages/widgets/package.json

@@ -65,6 +65,7 @@
     "@mantine/dates": "catalog:",
     "@mantine/form": "catalog:",
     "@mantine/hooks": "catalog:",
+    "@rexa-developer/tiks": "catalog:",
     "@tabler/icons-react": "catalog:",
     "@tiptap/extension-color": "catalog:",
     "@tiptap/extension-highlight": "catalog:",

packages/widgets/src/_inputs/index.ts

@@ -3,6 +3,7 @@ import { WidgetAnchorNoteInput } from "./widget-anchor-note-input";
 import { WidgetAppInput } from "./widget-app-input";
 import { WidgetCustomWidgetSelectInput } from "./widget-custom-widget-select-input";
 import { WidgetCustomWidgetConfigurationInput } from "./widget-custom-widget-configuration-input";
+import { WidgetDateTimeEventListInput } from "./widget-date-time-event-list-input";
 import { WidgetDynamicSelectInput } from "./widget-dynamic-select-input";
 import { WidgetDynamicMultiSelectInput } from "./widget-dynamic-multiselect-input";
 import { WidgetLocationInput } from "./widget-location-input";
@@ -15,6 +16,7 @@ import { WidgetSliderInput } from "./widget-slider-input";
 import { WidgetSortedItemListInput } from "./widget-sortable-item-list-input";
 import { WidgetSwitchInput } from "./widget-switch-input";
 import { WidgetTextInput } from "./widget-text-input";
+import { WidgetTimezoneListInput } from "./widget-timezone-list-input";
 import { WidgetUmamiEventInput } from "./widget-umami-event-input";
 import { WidgetUmamiEventNamesInput } from "./widget-umami-event-names-input";
 import { WidgetUmamiWebsiteInput } from "./widget-umami-website-input";
@@ -26,6 +28,8 @@ const mapping = {
   internal: WidgetInternalInput,
   anchorNote: WidgetAnchorNoteInput,
   text: WidgetTextInput,
+  dateTimeEventList: WidgetDateTimeEventListInput,
+  timezoneList: WidgetTimezoneListInput,
   location: WidgetLocationInput,
   multiSelect: WidgetMultiSelectInput,
   multiText: WidgetMultiTextInput,

packages/widgets/src/_inputs/widget-date-time-event-list-input.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { ActionIcon, Button, Card, Fieldset, Group, Select, Stack, Switch, Text, TextInput } from "@mantine/core";
+import { DateTimePicker } from "@mantine/dates";
+import { IconGripVertical, IconPlus, IconTrash } from "@tabler/icons-react";
+import dayjs from "dayjs";
+
+import { createId } from "@homarr/common";
+import type { WidgetKind } from "@homarr/definitions";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { formatWallDateTime, resolveWallDateTimeString } from "../countdown/recurrence";
+import type { DateTimeEventRecurrence, OptionDateTimeEvent } from "../options";
+import type { CommonWidgetInputProps } from "./common";
+import { useWidgetInputTranslation } from "./common";
+import { useFormContext } from "./form";
+
+export const WidgetDateTimeEventListInput = ({
+  property,
+  kind,
+  options,
+}: CommonWidgetInputProps<"dateTimeEventList">) => {
+  const t = useWidgetInputTranslation(kind, property);
+  const tEditor = useEventListTranslation(kind);
+  const form = useFormContext();
+  const fieldPath = `options.${property}`;
+  const currentValue = form.values.options[property];
+  const values = Array.isArray(currentValue) ? (currentValue as OptionDateTimeEvent[]) : options.defaultValue;
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  useEffect(() => {
+    if (Array.isArray(currentValue)) return;
+    form.setFieldValue(fieldPath, options.defaultValue);
+  }, [currentValue, fieldPath, form, options.defaultValue]);
+
+  const setValues = (nextValues: OptionDateTimeEvent[]) => form.setFieldValue(fieldPath, nextValues);
+  const addEvent = () => {
+    if (values.length >= options.maxValues) return;
+    const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    const target = dayjs().add(1, "day").minute(0).second(0).millisecond(0);
+    setValues([
+      ...values,
+      {
+        id: createId(),
+        label: tEditor("newEvent"),
+        targetUtc: target.toISOString(),
+        timeZone: localTimeZone,
+        recurrence: "none",
+      },
+    ]);
+  };
+
+  return (
+    <Fieldset legend={t("label")}>
+      <Stack gap="sm">
+        {options.withDescription && (
+          <Text size="sm" c="dimmed">
+            {t("description")}
+          </Text>
+        )}
+
+        <Button
+          type="button"
+          variant="light"
+          leftSection={<IconPlus size="var(--mantine-font-size-md)" />}
+          onClick={addEvent}
+          disabled={values.length >= options.maxValues}
+        >
+          {tEditor("add")}
+        </Button>
+
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={({ active, over }) => {
+            if (!over || active.id === over.id) return;
+            const activeIndex = values.findIndex(({ id }) => id === active.id);
+            const overIndex = values.findIndex(({ id }) => id === over.id);
+            if (activeIndex < 0 || overIndex < 0) return;
+            setValues(arrayMove(values, activeIndex, overIndex));
+          }}
+        >
+          <SortableContext items={values.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
+            <Stack gap="xs">
+              {values.map((event) => (
+                <SortableEvent
+                  key={event.id}
+                  kind={kind}
+                  event={event}
+                  timeZoneOptions={options.timeZoneOptions}
+                  onChange={(nextEvent) =>
+                    setValues(values.map((candidate) => (candidate.id === event.id ? nextEvent : candidate)))
+                  }
+                  onRemove={() => setValues(values.filter((candidate) => candidate.id !== event.id))}
+                />
+              ))}
+            </Stack>
+          </SortableContext>
+        </DndContext>
+
+        <Text size="xs" c="dimmed">
+          {tEditor("limit", { count: values.length, maximum: options.maxValues })}
+        </Text>
+      </Stack>
+    </Fieldset>
+  );
+};
+
+interface SortableEventProps {
+  kind: WidgetKind;
+  event: OptionDateTimeEvent;
+  timeZoneOptions: readonly { value: string; label: string }[];
+  onChange: (event: OptionDateTimeEvent) => void;
+  onRemove: () => void;
+}
+
+const SortableEvent = ({ kind, event, timeZoneOptions, onChange, onRemove }: SortableEventProps) => {
+  const t = useEventListTranslation(kind);
+  const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: event.id,
+  });
+  const style = {
+    transform: transform ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)` : undefined,
+    transition,
+    opacity: isDragging ? 0.6 : undefined,
+    zIndex: isDragging ? 1 : undefined,
+  };
+  const hasCurrentTimeZone = timeZoneOptions.some(({ value }) => value === event.timeZone);
+  const selectableTimeZones = hasCurrentTimeZone
+    ? timeZoneOptions
+    : [{ value: event.timeZone, label: t("unsupportedOption", { timeZone: event.timeZone }) }, ...timeZoneOptions];
+  const targetValue = formatWallDateTime(event.targetUtc, event.timeZone);
+  const startValue = event.startUtc ? formatWallDateTime(event.startUtc, event.timeZone) : null;
+
+  const changeTimeZone = (timeZone: string) => {
+    const target = resolveWallDateTimeString(targetValue, timeZone);
+    const start = startValue ? resolveWallDateTimeString(startValue, timeZone) : null;
+    onChange({
+      ...event,
+      timeZone,
+      targetUtc: target?.toISOString() ?? event.targetUtc,
+      startUtc: event.startUtc ? (start?.toISOString() ?? event.startUtc) : undefined,
+    });
+  };
+
+  const updateWallDateTime = (value: string | null, field: "targetUtc" | "startUtc") => {
+    if (!value) return;
+    const resolved = resolveWallDateTimeString(value, event.timeZone);
+    if (!resolved) return;
+    onChange({ ...event, [field]: resolved.toISOString() });
+  };
+
+  return (
+    <Card ref={setNodeRef} withBorder p="sm" style={style}>
+      <Stack gap="xs">
+        <Group gap="xs" wrap="nowrap" align="end">
+          <ActionIcon
+            ref={setActivatorNodeRef}
+            {...attributes}
+            {...listeners}
+            variant="subtle"
+            color="gray"
+            size="lg"
+            aria-label={t("reorder", { event: event.label })}
+            style={{ cursor: "grab" }}
+          >
+            <IconGripVertical size="var(--mantine-font-size-lg)" />
+          </ActionIcon>
+          <TextInput
+            flex={1}
+            label={t("eventLabel")}
+            value={event.label}
+            maxLength={64}
+            onChange={(changeEvent) => onChange({ ...event, label: changeEvent.currentTarget.value })}
+          />
+          <ActionIcon
+            color="red"
+            variant="subtle"
+            size="lg"
+            aria-label={t("remove", { event: event.label })}
+            onClick={onRemove}
+          >
+            <IconTrash size="var(--mantine-font-size-lg)" />
+          </ActionIcon>
+        </Group>
+
+        <Group align="end" grow>
+          <Select
+            label={t("timezone")}
+            searchable
+            data={selectableTimeZones}
+            value={event.timeZone}
+            onChange={(timeZone) => {
+              if (timeZone) changeTimeZone(timeZone);
+            }}
+          />
+          <Select
+            label={t("recurrence")}
+            value={event.recurrence}
+            data={(["none", "yearly"] as const).map((value) => ({ value, label: t(`recurrenceOption.${value}`) }))}
+            onChange={(value) => {
+              if (value) onChange({ ...event, recurrence: value as DateTimeEventRecurrence });
+            }}
+          />
+        </Group>
+
+        <ConfirmedDateTimePicker
+          label={t("target")}
+          value={targetValue || null}
+          onChange={(value) => updateWallDateTime(value, "targetUtc")}
+          confirmLabel={t("confirmDateTime")}
+        />
+
+        {event.recurrence === "none" && (
+          <>
+            <Switch
+              label={t("trackProgress")}
+              checked={event.startUtc !== undefined}
+              onChange={(changeEvent) => {
+                if (!changeEvent.currentTarget.checked) {
+                  const nextEvent = { ...event };
+                  delete nextEvent.startUtc;
+                  onChange(nextEvent);
+                  return;
+                }
+                onChange({ ...event, startUtc: new Date().toISOString() });
+              }}
+            />
+            {event.startUtc && (
+              <ConfirmedDateTimePicker
+                label={t("start")}
+                value={startValue}
+                onChange={(value) => updateWallDateTime(value, "startUtc")}
+                confirmLabel={t("confirmDateTime")}
+              />
+            )}
+          </>
+        )}
+      </Stack>
+    </Card>
+  );
+};
+
+interface ConfirmedDateTimePickerProps {
+  label: string;
+  value: string | null;
+  confirmLabel: string;
+  onChange: (value: string | null) => void;
+}
+
+const ConfirmedDateTimePicker = ({ label, value, confirmLabel, onChange }: ConfirmedDateTimePickerProps) => {
+  const [draftValue, setDraftValue] = useState(value);
+
+  useEffect(() => setDraftValue(value), [value]);
+
+  const resetDraft = () => setDraftValue(value);
+  const confirmDraft = () => {
+    if (!draftValue) return;
+    onChange(draftValue);
+  };
+
+  return (
+    <DateTimePicker
+      label={label}
+      value={draftValue}
+      valueFormat="YYYY-MM-DD HH:mm"
+      timePickerProps={{ withDropdown: true, popoverProps: { withinPortal: false } }}
+      popoverProps={{ withinPortal: true }}
+      submitButtonProps={{ "aria-label": confirmLabel, onClick: confirmDraft }}
+      onChange={setDraftValue}
+      onDropdownClose={resetDraft}
+    />
+  );
+};
+
+type EventListTranslationKey =
+  | "newEvent"
+  | "add"
+  | "remove"
+  | "reorder"
+  | "eventLabel"
+  | "timezone"
+  | "unsupportedOption"
+  | "recurrence"
+  | "recurrenceOption.none"
+  | "recurrenceOption.yearly"
+  | "target"
+  | "trackProgress"
+  | "start"
+  | "confirmDateTime"
+  | "limit";
+
+type EventListTranslation = (key: EventListTranslationKey, values?: Record<string, string | number>) => string;
+
+const useEventListTranslation = (kind: WidgetKind) =>
+  useScopedI18n(`widget.${kind}.dateTimeEventList` as never) as unknown as EventListTranslation;

packages/widgets/src/_inputs/widget-select-input.tsx

@@ -72,6 +72,7 @@ export const WidgetSelectInput = ({ property, kind, options }: CommonWidgetInput
         );
       }}
       description={options.withDescription ? tWidget("description") : undefined}
+      placeholder={options.withPlaceholder ? tWidget("placeholder") : undefined}
       searchable={options.searchable}
       {...inputProps}
     />

packages/widgets/src/_inputs/widget-timezone-list-input.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { ActionIcon, Button, Card, Fieldset, Group, Select, Stack, Text, TextInput } from "@mantine/core";
+import { IconGripVertical, IconPlus, IconTrash } from "@tabler/icons-react";
+
+import { createId } from "@homarr/common";
+import type { WidgetKind } from "@homarr/definitions";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { OptionTimezone } from "../options";
+import type { CommonWidgetInputProps } from "./common";
+import { useWidgetInputTranslation } from "./common";
+import { useFormContext } from "./form";
+
+export const WidgetTimezoneListInput = ({ property, kind, options }: CommonWidgetInputProps<"timezoneList">) => {
+  const t = useWidgetInputTranslation(kind, property);
+  const tEditor = useTimezoneListTranslation(kind);
+  const form = useFormContext();
+  const fieldPath = `options.${property}`;
+  const currentValue = form.values.options[property];
+  const values = Array.isArray(currentValue) ? (currentValue as OptionTimezone[]) : options.defaultValue;
+  const [selectedTimeZone, setSelectedTimeZone] = useState<string | null>(null);
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  useEffect(() => {
+    if (Array.isArray(currentValue)) return;
+    form.setFieldValue(fieldPath, options.defaultValue);
+  }, [currentValue, fieldPath, form, options.defaultValue]);
+
+  const usedTimeZones = useMemo(() => new Set(values.map(({ timeZone }) => timeZone)), [values]);
+  const availableOptions = options.timeZoneOptions.map((option) => ({
+    ...option,
+    disabled: usedTimeZones.has(option.value),
+  }));
+  const isFull = values.length >= options.maxValues;
+
+  const setValues = (nextValues: OptionTimezone[]) => form.setFieldValue(fieldPath, nextValues);
+  const addCity = (city: OptionTimezone) => {
+    if (isFull || usedTimeZones.has(city.timeZone)) return;
+    setValues([...values, city]);
+  };
+  const addSelectedTimeZone = () => {
+    if (!selectedTimeZone) return;
+    const option = options.timeZoneOptions.find(({ value }) => value === selectedTimeZone);
+    if (!option) return;
+    const label = option.label.replace(` (${option.value})`, "");
+    addCity({ id: createId(), label, timeZone: option.value });
+    setSelectedTimeZone(null);
+  };
+
+  return (
+    <Fieldset legend={t("label")}>
+      <Stack gap="sm">
+        {options.withDescription && (
+          <Text size="sm" c="dimmed">
+            {t("description")}
+          </Text>
+        )}
+
+        <Group gap="xs" align="end" wrap="nowrap">
+          <Select
+            flex={1}
+            label={tEditor("timezone")}
+            placeholder={tEditor("searchPlaceholder")}
+            searchable
+            clearable
+            data={availableOptions}
+            value={selectedTimeZone}
+            onChange={setSelectedTimeZone}
+            disabled={isFull}
+            nothingFoundMessage={tEditor("noResults")}
+          />
+          <Button
+            leftSection={<IconPlus size="var(--mantine-font-size-md)" />}
+            onClick={addSelectedTimeZone}
+            disabled={isFull || selectedTimeZone === null}
+          >
+            {tEditor("add")}
+          </Button>
+        </Group>
+
+        <Group gap="xs">
+          {options.presets.map((preset) => (
+            <Button
+              key={preset.timeZone}
+              size="compact-xs"
+              variant="light"
+              disabled={isFull || usedTimeZones.has(preset.timeZone)}
+              onClick={() => addCity({ ...preset, id: createId() })}
+            >
+              {preset.label}
+            </Button>
+          ))}
+        </Group>
+
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={({ active, over }) => {
+            if (!over || active.id === over.id) return;
+            const activeIndex = values.findIndex(({ id }) => id === active.id);
+            const overIndex = values.findIndex(({ id }) => id === over.id);
+            if (activeIndex < 0 || overIndex < 0) return;
+            setValues(arrayMove(values, activeIndex, overIndex));
+          }}
+        >
+          <SortableContext items={values.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
+            <Stack gap="xs">
+              {values.map((city) => (
+                <SortableTimezone
+                  key={city.id}
+                  kind={kind}
+                  city={city}
+                  timeZoneOptions={options.timeZoneOptions}
+                  usedTimeZones={usedTimeZones}
+                  onChange={(nextCity) =>
+                    setValues(values.map((candidate) => (candidate.id === city.id ? nextCity : candidate)))
+                  }
+                  onRemove={() => setValues(values.filter((candidate) => candidate.id !== city.id))}
+                />
+              ))}
+            </Stack>
+          </SortableContext>
+        </DndContext>
+
+        <Text size="xs" c="dimmed">
+          {tEditor("limit", { count: values.length, maximum: options.maxValues })}
+        </Text>
+      </Stack>
+    </Fieldset>
+  );
+};
+
+interface SortableTimezoneProps {
+  kind: WidgetKind;
+  city: OptionTimezone;
+  timeZoneOptions: readonly { value: string; label: string }[];
+  usedTimeZones: ReadonlySet<string>;
+  onChange: (city: OptionTimezone) => void;
+  onRemove: () => void;
+}
+
+const SortableTimezone = ({
+  kind,
+  city,
+  timeZoneOptions,
+  usedTimeZones,
+  onChange,
+  onRemove,
+}: SortableTimezoneProps) => {
+  const t = useTimezoneListTranslation(kind);
+  const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: city.id,
+  });
+  const style = {
+    transform: transform ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)` : undefined,
+    transition,
+    opacity: isDragging ? 0.6 : undefined,
+    zIndex: isDragging ? 1 : undefined,
+  };
+  const hasCurrentTimeZone = timeZoneOptions.some(({ value }) => value === city.timeZone);
+  const selectableTimeZones = hasCurrentTimeZone
+    ? timeZoneOptions
+    : [{ value: city.timeZone, label: t("unsupportedOption", { timeZone: city.timeZone }) }, ...timeZoneOptions];
+
+  return (
+    <Card ref={setNodeRef} withBorder p="xs" style={style}>
+      <Group gap="xs" wrap="wrap" align="end">
+        <ActionIcon
+          ref={setActivatorNodeRef}
+          {...attributes}
+          {...listeners}
+          variant="subtle"
+          color="gray"
+          size="lg"
+          aria-label={t("reorder", { city: city.label })}
+          style={{ cursor: "grab" }}
+        >
+          <IconGripVertical size="var(--mantine-font-size-lg)" />
+        </ActionIcon>
+        <TextInput
+          flex={1}
+          label={t("cityLabel")}
+          value={city.label}
+          onChange={(event) => onChange({ ...city, label: event.currentTarget.value })}
+        />
+        <Select
+          flex={2}
+          label={t("timezone")}
+          searchable
+          data={selectableTimeZones.map((option) => ({
+            ...option,
+            disabled: option.value !== city.timeZone && usedTimeZones.has(option.value),
+          }))}
+          value={city.timeZone}
+          onChange={(timeZone) => {
+            if (timeZone) onChange({ ...city, timeZone });
+          }}
+        />
+        <ActionIcon
+          color="red"
+          variant="subtle"
+          size="lg"
+          aria-label={t("remove", { city: city.label })}
+          onClick={onRemove}
+        >
+          <IconTrash size="var(--mantine-font-size-lg)" />
+        </ActionIcon>
+      </Group>
+    </Card>
+  );
+};
+
+type TimezoneListTranslationKey =
+  | "timezone"
+  | "cityLabel"
+  | "searchPlaceholder"
+  | "noResults"
+  | "unsupportedOption"
+  | "add"
+  | "remove"
+  | "reorder"
+  | "limit";
+
+type TimezoneListTranslation = (key: TimezoneListTranslationKey, values?: Record<string, string | number>) => string;
+
+const useTimezoneListTranslation = (kind: WidgetKind) =>
+  useScopedI18n(`widget.${kind}.timezoneList` as never) as unknown as TimezoneListTranslation;

packages/widgets/src/air-quality/component.tsx

@@ -0,0 +1,399 @@
+"use client";
+
+import { useId } from "react";
+import { CompositeChart, Sparkline } from "@mantine/charts";
+import { Box, Group, Paper, ScrollArea, SimpleGrid, Stack, Text, VisuallyHidden } from "@mantine/core";
+import { IconMapPin } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
+
+import { WidgetEmptyState } from "../common/empty-state";
+import { formatLocalizedDate, formatLocalizedTime } from "../common/locale";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
+import type { WidgetComponentProps } from "../definition";
+import type { AirQualityData, PollutantKey, PollenKey } from "./display";
+import {
+  getAqiCategory,
+  getAqiColor,
+  getAqiStandard,
+  getAqiValue,
+  getCompactAirQualityLayout,
+  getDailyAqiValue,
+  getDominantPollutant,
+  getStrongestPollen,
+  getUpcomingHours,
+  getUvCategory,
+} from "./display";
+
+export default function AirQualityWidget({ options, width, height, displayMode }: WidgetComponentProps<"airQuality">) {
+  const t = useScopedI18n("widget.airQuality");
+  const query = clientApi.widget.airQuality.atLocation.useQuery({
+    latitude: options.location.latitude,
+    longitude: options.location.longitude,
+  });
+  const airQuality = getUsableWidgetQueryData(query);
+
+  if (isInitialWidgetQueryPending(query)) return <WidgetQueryLoadingState />;
+  if (!airQuality) return <WidgetEmptyState />;
+
+  return (
+    <Box h="100%" w="100%" pos="relative">
+      {displayMode === "advanced" ? (
+        <AdvancedAirQuality airQuality={airQuality} options={options} width={width} />
+      ) : (
+        <CompactAirQuality airQuality={airQuality} height={height} options={options} width={width} />
+      )}
+      {query.error && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator error={query.error} label={t("name")} />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+interface AirQualityViewProps {
+  airQuality: AirQualityData;
+  options: WidgetComponentProps<"airQuality">["options"];
+}
+
+const CompactAirQuality = ({
+  airQuality,
+  height,
+  options,
+  width,
+}: AirQualityViewProps & { height: number; width: number }) => {
+  const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("widget.airQuality");
+  const layout = getCompactAirQualityLayout(width, height);
+  const standard = getAqiStandard(options.aqiStandard, locale);
+  const value = getAqiValue(airQuality.current, standard);
+  const category = getAqiCategory(value, standard);
+  const dominant = getDominantPollutant(airQuality.current, standard);
+  const strongestPollen = getStrongestPollen(airQuality.current);
+  const labels = useAirQualityLabels();
+  const sixHours = getUpcomingHours(airQuality, 6)
+    .map((hour) => getAqiValue(hour, standard))
+    .filter((hour): hour is number => hour !== null);
+
+  return (
+    <Stack
+      h="100%"
+      w="100%"
+      justify="center"
+      align="center"
+      gap={layout.tiny ? 2 : "xs"}
+      p="xs"
+      style={{ overflow: "hidden" }}
+    >
+      <Group gap="xs" wrap="nowrap" align="center">
+        <Text fz={layout.tiny ? 34 : 42} fw={700} lh={1} c={getAqiColor(category)}>
+          {formatAqi(value, locale)}
+        </Text>
+        <Stack gap={1} align="flex-start">
+          <Text size={layout.tiny ? "xs" : "sm"} fw={600}>
+            {t(`category.${category}`)}
+          </Text>
+        </Stack>
+      </Group>
+
+      {!layout.tiny && (
+        <Group gap="md" justify="center" wrap="wrap">
+          {options.showUv && (
+            <MetricLine
+              label={t("uv.label")}
+              value={`${formatDecimal(airQuality.current.uvIndex, locale)} · ${t(`uv.category.${getUvCategory(airQuality.current.uvIndex)}`)}`}
+            />
+          )}
+          {options.showPollutants && dominant && (
+            <MetricLine label={t("dominantPollutant")} value={labels.pollutants[dominant.key]} />
+          )}
+        </Group>
+      )}
+
+      {!layout.tiny && layout.showParticulatesAndPollen && (
+        <Group gap="md" justify="center" wrap="wrap">
+          {options.showPollutants && (
+            <>
+              <MetricLine
+                label={labels.pollutants.pm2_5}
+                value={formatConcentration(airQuality.current.pollutants.pm2_5, locale, t)}
+              />
+              <MetricLine
+                label={labels.pollutants.pm10}
+                value={formatConcentration(airQuality.current.pollutants.pm10, locale, t)}
+              />
+            </>
+          )}
+          {options.showPollen && strongestPollen && (
+            <MetricLine
+              label={t("strongestPollen")}
+              value={`${labels.pollen[strongestPollen.key]} · ${formatPollen(strongestPollen.value, locale, t)}`}
+            />
+          )}
+        </Group>
+      )}
+
+      {!layout.tiny && layout.showSparkline && sixHours.length > 1 && (
+        <Box component="figure" w="100%" h={34} m={0}>
+          <Sparkline
+            aria-hidden
+            h="100%"
+            w="100%"
+            data={sixHours}
+            color={getAqiColor(category)}
+            curveType="monotone"
+            fillOpacity={0.2}
+            strokeWidth={2}
+          />
+          <VisuallyHidden component="figcaption">{t("compact.sixHourTrend")}</VisuallyHidden>
+        </Box>
+      )}
+    </Stack>
+  );
+};
+
+const AdvancedAirQuality = ({ airQuality, options, width }: AirQualityViewProps & { width: number }) => {
+  const chartId = useId();
+  const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("widget.airQuality");
+  const standard = getAqiStandard(options.aqiStandard, locale);
+  const value = getAqiValue(airQuality.current, standard);
+  const category = getAqiCategory(value, standard);
+  const labels = useAirQualityLabels();
+  const upcoming = getUpcomingHours(airQuality, 24);
+  const chartData = upcoming.map((hour) => ({
+    observedAt: hour.observedAt,
+    aqi: getAqiValue(hour, standard) ?? Number.NaN,
+    uv: hour.uvIndex ?? Number.NaN,
+  }));
+  const series = [
+    { name: "aqi", label: t("aqiLabel"), color: getAqiColor(category), type: "line" as const },
+    ...(options.showUv
+      ? [{ name: "uv", label: t("uv.label"), color: "yellow.7", type: "line" as const, yAxisId: "right" as const }]
+      : []),
+  ];
+
+  return (
+    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
+      <Stack gap="md" p="md">
+        <Group justify="space-between" align="flex-start" wrap="wrap">
+          <Stack gap={2}>
+            <Text fz={38} fw={700} lh={1} c={getAqiColor(category)}>
+              {formatAqi(value, locale)}
+            </Text>
+            <Text fw={600}>{t(`category.${category}`)}</Text>
+          </Stack>
+          <Stack gap={2} align="flex-end">
+            <Group gap={5} wrap="nowrap">
+              <IconMapPin size="var(--mantine-font-size-md)" aria-hidden />
+              <Text size="sm" fw={600}>
+                {options.location.name}
+              </Text>
+            </Group>
+            <Text size="xs" c="dimmed">
+              {t("advanced.observedAt", {
+                time: formatLocalizedTime(airQuality.current.observedAt, locale, { timeZone: airQuality.timezone }),
+              })}
+            </Text>
+          </Stack>
+        </Group>
+
+        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="xs">
+          <MetricCard label={t("aqiLabel")} value={formatAqi(value, locale)} />
+          {options.showUv && (
+            <MetricCard label={t("uv.label")} value={formatDecimal(airQuality.current.uvIndex, locale)} />
+          )}
+          {options.showPollutants && (
+            <>
+              <MetricCard
+                label={labels.pollutants.pm2_5}
+                value={formatConcentration(airQuality.current.pollutants.pm2_5, locale, t)}
+              />
+              <MetricCard
+                label={labels.pollutants.pm10}
+                value={formatConcentration(airQuality.current.pollutants.pm10, locale, t)}
+              />
+            </>
+          )}
+        </SimpleGrid>
+
+        <SimpleGrid cols={width >= 800 ? 2 : 1} spacing="md">
+          <Paper withBorder p="sm">
+            <Text id={chartId} size="sm" fw={600} mb="xs">
+              {t("advanced.next24Hours")}
+            </Text>
+            {chartData.length > 0 ? (
+              <>
+                <Box aria-hidden>
+                  <CompositeChart
+                    h={220}
+                    data={chartData}
+                    dataKey="observedAt"
+                    series={series}
+                    curveType="monotone"
+                    gridAxis="y"
+                    tickLine="none"
+                    withDots={false}
+                    withLegend
+                    withRightYAxis={options.showUv}
+                    rightYAxisProps={{ width: 34 }}
+                    xAxisProps={{
+                      tickFormatter: (time: string) =>
+                        formatLocalizedTime(time, locale, { timeZone: airQuality.timezone }),
+                    }}
+                  />
+                </Box>
+                <VisuallyHidden>
+                  <ul aria-labelledby={chartId}>
+                    {upcoming.map((hour) => (
+                      <li key={hour.observedAt}>
+                        {formatLocalizedTime(hour.observedAt, locale, { timeZone: airQuality.timezone })}:{" "}
+                        {t("advanced.aqiValue", {
+                          value: formatAqi(getAqiValue(hour, standard), locale),
+                        })}
+                        {options.showUv
+                          ? `, ${t("advanced.uvValue", { value: formatDecimal(hour.uvIndex, locale) })}`
+                          : ""}
+                      </li>
+                    ))}
+                  </ul>
+                </VisuallyHidden>
+              </>
+            ) : (
+              <Text size="sm" c="dimmed">
+                {t("advanced.noForecast")}
+              </Text>
+            )}
+          </Paper>
+
+          <Stack gap="md">
+            {options.showPollutants && (
+              <Paper withBorder p="sm">
+                <Text size="sm" fw={600} mb="xs">
+                  {t("advanced.pollutants")}
+                </Text>
+                <SimpleGrid cols={2} spacing="xs">
+                  {pollutantKeys.map((key) => (
+                    <MetricLine
+                      key={key}
+                      label={labels.pollutants[key]}
+                      value={formatConcentration(airQuality.current.pollutants[key], locale, t)}
+                    />
+                  ))}
+                </SimpleGrid>
+              </Paper>
+            )}
+
+            {options.showPollen && hasAvailableValue(airQuality.current.pollen) && (
+              <Paper withBorder p="sm">
+                <Text size="sm" fw={600} mb="xs">
+                  {t("advanced.pollen")}
+                </Text>
+                <SimpleGrid cols={2} spacing="xs">
+                  {pollenKeys.map((key) => {
+                    const pollen = airQuality.current.pollen[key];
+                    if (pollen === null) return null;
+                    return <MetricLine key={key} label={labels.pollen[key]} value={formatPollen(pollen, locale, t)} />;
+                  })}
+                </SimpleGrid>
+              </Paper>
+            )}
+          </Stack>
+        </SimpleGrid>
+
+        <Paper withBorder p="sm">
+          <Text size="sm" fw={600} mb="xs">
+            {t("advanced.sevenDayForecast")}
+          </Text>
+          <SimpleGrid cols={{ base: 2, sm: 4, md: 7 }} spacing="xs">
+            {airQuality.daily.map((day) => {
+              const dailyAqi = getDailyAqiValue(day, standard);
+              return (
+                <Stack key={day.date} gap={2} align="center">
+                  <Text size="xs" c="dimmed">
+                    {formatLocalizedDate(day.date, locale, { weekday: "short" })}
+                  </Text>
+                  <Text fw={700} c={getAqiColor(getAqiCategory(dailyAqi, standard))}>
+                    {formatAqi(dailyAqi, locale)}
+                  </Text>
+                  {options.showUv && (
+                    <Text size="xs">{t("advanced.uvShort", { value: formatDecimal(day.uvIndexMax, locale) })}</Text>
+                  )}
+                </Stack>
+              );
+            })}
+          </SimpleGrid>
+        </Paper>
+      </Stack>
+    </ScrollArea>
+  );
+};
+
+const MetricCard = ({ label, value }: { label: string; value: string }) => (
+  <Paper withBorder p="xs">
+    <Text size="xs" c="dimmed">
+      {label}
+    </Text>
+    <Text fz="lg" fw={700}>
+      {value}
+    </Text>
+  </Paper>
+);
+
+const MetricLine = ({ label, value }: { label: string; value: string }) => (
+  <Stack gap={0} miw={0}>
+    <Text size="xs" c="dimmed" truncate>
+      {label}
+    </Text>
+    <Text size="sm" fw={600} truncate>
+      {value}
+    </Text>
+  </Stack>
+);
+
+const pollutantKeys: PollutantKey[] = ["pm2_5", "pm10", "ozone", "nitrogenDioxide", "sulphurDioxide", "carbonMonoxide"];
+const pollenKeys: PollenKey[] = ["alder", "birch", "grass", "mugwort", "olive", "ragweed"];
+
+const useAirQualityLabels = () => {
+  const t = useScopedI18n("widget.airQuality");
+  return {
+    pollutants: {
+      pm2_5: t("pollutant.pm2_5"),
+      pm10: t("pollutant.pm10"),
+      ozone: t("pollutant.ozone"),
+      nitrogenDioxide: t("pollutant.nitrogenDioxide"),
+      sulphurDioxide: t("pollutant.sulphurDioxide"),
+      carbonMonoxide: t("pollutant.carbonMonoxide"),
+    } satisfies Record<PollutantKey, string>,
+    pollen: {
+      alder: t("pollen.alder"),
+      birch: t("pollen.birch"),
+      grass: t("pollen.grass"),
+      mugwort: t("pollen.mugwort"),
+      olive: t("pollen.olive"),
+      ragweed: t("pollen.ragweed"),
+    } satisfies Record<PollenKey, string>,
+  };
+};
+
+const formatAqi = (value: number | null, locale: string) => {
+  if (value === null) return "—";
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value);
+};
+
+const formatDecimal = (value: number | null, locale: string) => {
+  if (value === null) return "—";
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value);
+};
+
+type ScopedAirQualityTranslator = ReturnType<typeof useScopedI18n<"widget.airQuality">>;
+
+const formatConcentration = (value: number | null, locale: string, t: ScopedAirQualityTranslator) =>
+  t("unit.concentration", { value: formatDecimal(value, locale) });
+const formatPollen = (value: number | null, locale: string, t: ScopedAirQualityTranslator) =>
+  t("unit.pollen", { value: formatDecimal(value, locale) });
+const hasAvailableValue = (values: Record<string, number | null>) =>
+  Object.values(values).some((value) => value !== null);

packages/widgets/src/air-quality/display.spec.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getAqiCategory,
+  getAqiStandard,
+  getCompactAirQualityLayout,
+  getDominantPollutant,
+  getStrongestPollen,
+} from "./display";
+
+const point = {
+  observedAt: "2026-07-01T10:00:00.000Z",
+  europeanAqi: 42,
+  usAqi: 60,
+  uvIndex: 4,
+  pollutants: { pm2_5: 12, pm10: 20, ozone: 30, nitrogenDioxide: 4, sulphurDioxide: 3, carbonMonoxide: 100 },
+  europeanSubIndices: {
+    pm2_5: 20,
+    pm10: 31,
+    ozone: 42,
+    nitrogenDioxide: 10,
+    sulphurDioxide: 5,
+    carbonMonoxide: null,
+  },
+  usSubIndices: {
+    pm2_5: 50,
+    pm10: 40,
+    ozone: 30,
+    nitrogenDioxide: 20,
+    sulphurDioxide: 10,
+    carbonMonoxide: 60,
+  },
+  pollen: { alder: null, birch: 12, grass: 20, mugwort: 5, olive: null, ragweed: 2 },
+};
+
+describe("air quality display", () => {
+  it("uses the US scale only for US locales in automatic mode", () => {
+    expect(getAqiStandard("auto", "en-US")).toBe("us");
+    expect(getAqiStandard("auto", "fr-FR")).toBe("european");
+    expect(getAqiStandard("auto", "en")).toBe("european");
+    expect(getAqiStandard("us", "fr-FR")).toBe("us");
+  });
+
+  it("uses the defined AQI band boundaries", () => {
+    expect(getAqiCategory(20, "european")).toBe("good");
+    expect(getAqiCategory(21, "european")).toBe("fair");
+    expect(getAqiCategory(101, "european")).toBe("extremelyPoor");
+    expect(getAqiCategory(50, "us")).toBe("good");
+    expect(getAqiCategory(51, "us")).toBe("moderate");
+    expect(getAqiCategory(301, "us")).toBe("hazardous");
+  });
+
+  it("finds dominant subindices and raw pollen without combining them", () => {
+    expect(getDominantPollutant(point, "european")).toEqual({ key: "ozone", value: 42 });
+    expect(getDominantPollutant(point, "us")).toEqual({ key: "carbonMonoxide", value: 60 });
+    expect(getStrongestPollen(point)).toEqual({ key: "grass", value: 20 });
+  });
+
+  it("progressively reveals compact details", () => {
+    expect(getCompactAirQualityLayout(149, 200)).toMatchObject({ tiny: true });
+    expect(getCompactAirQualityLayout(250, 150)).toMatchObject({ showParticulatesAndPollen: true });
+    expect(getCompactAirQualityLayout(300, 170)).toMatchObject({ showSparkline: true });
+  });
+});

packages/widgets/src/air-quality/display.ts

@@ -0,0 +1,144 @@
+export interface AirQualityPollutants {
+  pm2_5: number | null;
+  pm10: number | null;
+  ozone: number | null;
+  nitrogenDioxide: number | null;
+  sulphurDioxide: number | null;
+  carbonMonoxide: number | null;
+}
+
+export interface AirQualityPoint {
+  observedAt: string;
+  europeanAqi: number | null;
+  usAqi: number | null;
+  uvIndex: number | null;
+  pollutants: AirQualityPollutants;
+  europeanSubIndices: AirQualityPollutants;
+  usSubIndices: AirQualityPollutants;
+  pollen: Record<"alder" | "birch" | "grass" | "mugwort" | "olive" | "ragweed", number | null>;
+}
+
+export interface AirQualityData {
+  timezone: string;
+  utcOffsetSeconds: number;
+  current: AirQualityPoint;
+  hourly: AirQualityPoint[];
+  daily: {
+    date: string;
+    europeanAqiMax: number | null;
+    usAqiMax: number | null;
+    uvIndexMax: number | null;
+    pm2_5Max: number | null;
+    pm10Max: number | null;
+  }[];
+}
+
+export type AqiStandard = "european" | "us";
+export type AqiStandardOption = "auto" | AqiStandard;
+export type AqiCategory =
+  | "good"
+  | "fair"
+  | "moderate"
+  | "unhealthySensitive"
+  | "unhealthy"
+  | "poor"
+  | "veryPoor"
+  | "veryUnhealthy"
+  | "extremelyPoor"
+  | "hazardous"
+  | "unknown";
+export type UvCategory = "low" | "moderate" | "high" | "veryHigh" | "extreme" | "unknown";
+export type PollutantKey = keyof AirQualityPoint["pollutants"];
+export type PollenKey = keyof AirQualityPoint["pollen"];
+
+export const getAqiStandard = (option: AqiStandardOption, locale: string): AqiStandard => {
+  if (option !== "auto") return option;
+  try {
+    return new Intl.Locale(locale).region === "US" ? "us" : "european";
+  } catch {
+    return "european";
+  }
+};
+
+export const getAqiValue = (point: AirQualityPoint, standard: AqiStandard): number | null => {
+  if (standard === "us") return point.usAqi;
+  return point.europeanAqi;
+};
+
+export const getDailyAqiValue = (day: AirQualityData["daily"][number], standard: AqiStandard): number | null => {
+  if (standard === "us") return day.usAqiMax;
+  return day.europeanAqiMax;
+};
+
+export const getAqiCategory = (value: number | null, standard: AqiStandard): AqiCategory => {
+  if (value === null) return "unknown";
+
+  if (standard === "us") {
+    if (value <= 50) return "good";
+    if (value <= 100) return "moderate";
+    if (value <= 150) return "unhealthySensitive";
+    if (value <= 200) return "unhealthy";
+    if (value <= 300) return "veryUnhealthy";
+    return "hazardous";
+  }
+
+  if (value <= 20) return "good";
+  if (value <= 40) return "fair";
+  if (value <= 60) return "moderate";
+  if (value <= 80) return "poor";
+  if (value <= 100) return "veryPoor";
+  return "extremelyPoor";
+};
+
+export const getAqiColor = (category: AqiCategory): string => {
+  if (category === "good") return "green.6";
+  if (category === "fair") return "lime.7";
+  if (category === "moderate") return "yellow.7";
+  if (category === "unhealthySensitive" || category === "poor") return "orange.7";
+  if (category === "unhealthy" || category === "veryPoor") return "red.7";
+  if (category === "veryUnhealthy" || category === "extremelyPoor") return "grape.7";
+  if (category === "hazardous") return "dark.6";
+  return "gray.6";
+};
+
+export const getUvCategory = (value: number | null): UvCategory => {
+  if (value === null) return "unknown";
+  if (value < 3) return "low";
+  if (value < 6) return "moderate";
+  if (value < 8) return "high";
+  if (value < 11) return "veryHigh";
+  return "extreme";
+};
+
+export const getDominantPollutant = (
+  point: AirQualityPoint,
+  standard: AqiStandard,
+): { key: PollutantKey; value: number } | null => {
+  const values = standard === "us" ? point.usSubIndices : point.europeanSubIndices;
+  return getHighestValue(values);
+};
+
+export const getStrongestPollen = (point: AirQualityPoint): { key: PollenKey; value: number } | null =>
+  getHighestValue(point.pollen);
+
+const getHighestValue = <TKey extends string>(
+  values: Record<TKey, number | null>,
+): { key: TKey; value: number } | null => {
+  let highest: { key: TKey; value: number } | null = null;
+  for (const [key, value] of Object.entries(values) as [TKey, number | null][]) {
+    if (value === null) continue;
+    if (highest === null || value > highest.value) highest = { key, value };
+  }
+  return highest;
+};
+
+export const getCompactAirQualityLayout = (width: number, height: number) => ({
+  tiny: width < 150 || height < 96,
+  showParticulatesAndPollen: width >= 240 && height >= 140,
+  showSparkline: width >= 300 && height >= 170,
+});
+
+export const getUpcomingHours = (data: AirQualityData, count: number): AirQualityData["hourly"] => {
+  const currentTime = Date.parse(data.current.observedAt);
+  return data.hourly.filter((hour) => Date.parse(hour.observedAt) >= currentTime).slice(0, count);
+};

packages/widgets/src/air-quality/index.ts

@@ -0,0 +1,43 @@
+import { IconWind } from "@tabler/icons-react";
+
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
+import { optionsBuilder } from "../options";
+
+export const { definition, componentLoader } = createWidgetDefinition("airQuality", {
+  icon: IconWind,
+  supportsAdvancedFocus: true,
+  queryKey: [["widget", "airQuality", "atLocation"]],
+  refetchInterval: 900,
+  queryMatcher: ({ input }, scope) => {
+    const location = scope.options.location;
+    if (location === null || typeof location !== "object" || !("latitude" in location) || !("longitude" in location)) {
+      return false;
+    }
+    return widgetQueryInputMatches(input, {
+      latitude: location.latitude,
+      longitude: location.longitude,
+    });
+  },
+  createOptions() {
+    return optionsBuilder.from((factory) => ({
+      location: factory.location({
+        defaultValue: {
+          name: "Paris",
+          latitude: 48.85341,
+          longitude: 2.3488,
+        },
+      }),
+      aqiStandard: factory.select({
+        defaultValue: "auto",
+        options: [
+          { value: "auto", label: (t) => t("widget.airQuality.option.aqiStandard.options.auto") },
+          { value: "european", label: (t) => t("widget.airQuality.option.aqiStandard.options.european") },
+          { value: "us", label: (t) => t("widget.airQuality.option.aqiStandard.options.us") },
+        ],
+      }),
+      showUv: factory.switch({ defaultValue: true }),
+      showPollutants: factory.switch({ defaultValue: true }),
+      showPollen: factory.switch({ defaultValue: true }),
+    }));
+  },
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/catalog.ts

@@ -15,15 +15,18 @@ import {
   IconBuildingBank,
   IconBusStop,
   IconCalendar,
+  IconCalendarWeek,
   IconChartAreaLine,
   IconChartBar,
   IconClock,
+  IconClockPlay,
   IconCloud,
   IconDeviceCctv,
   IconDeviceGamepad,
   IconDownload,
   IconFileText,
   IconGraphFilled,
+  IconHourglass,
   IconHeadphones,
   IconHeartRateMonitor,
   IconHeartbeat,
@@ -47,6 +50,7 @@ import {
   IconTransform,
   IconVideo,
   IconWall,
+  IconWind,
   IconZoomQuestion,
 } from "@tabler/icons-react";
 
@@ -56,6 +60,10 @@ import type { TablerIcon } from "@homarr/ui";
 export const widgetCatalogIcons: Record<WidgetKind, TablerIcon> = {
   clock: IconClock,
   weather: IconCloud,
+  today: IconCalendarWeek,
+  airQuality: IconWind,
+  countdown: IconHourglass,
+  timer: IconClockPlay,
   app: IconApps,
   assistant: IconRobot,
   iframe: IconBrowser,

packages/widgets/src/clock/advanced-view.tsx

@@ -0,0 +1,329 @@
+import {
+  Alert,
+  Badge,
+  Box,
+  Divider,
+  Group,
+  Paper,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import { IconAlertTriangle, IconClock } from "@tabler/icons-react";
+import type { Dayjs } from "dayjs";
+
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
+
+import { formatLocalizedDate, formatLocalizedTime } from "../common/locale";
+import type { WidgetComponentProps } from "../definition";
+import { clockTimeFormatShowsSeconds, clockTimeFormatUses12Hours, resolveClockTimeFormat } from "./format";
+import { TimeOfDayBar } from "./time-of-day-bar";
+import { ClockWeatherSummary } from "./weather-summary";
+import {
+  createWorldClockTime,
+  formatRelativeOffset,
+  formatUtcOffset,
+  getTimeOfDayPhase,
+  humanizeTimeZone,
+  maximumWorldClockCities,
+} from "./world-clock";
+import type { TimeOfDayPhase, WorldClockTime } from "./world-clock";
+
+interface AdvancedClockViewProps {
+  now: Date;
+  options: WidgetComponentProps<"clock">["options"];
+  primaryTime: Dayjs;
+  primaryTimeZone: string;
+  primaryTimeZoneInvalid: boolean;
+}
+
+export const AdvancedClockView = ({
+  now,
+  options,
+  primaryTime,
+  primaryTimeZone,
+  primaryTimeZoneInvalid,
+}: AdvancedClockViewProps) => {
+  const t = useScopedI18n("widget.clock");
+  const primaryLabel = getPrimaryLabel(options, t);
+  const primary: WorldClockTime = {
+    id: "primary",
+    label: primaryLabel,
+    timeZone: primaryTimeZone,
+    zonedTime: primaryTime,
+    phase: getTimeOfDayPhase(primaryTime.hour()),
+    minuteOfDay: primaryTime.hour() * 60 + primaryTime.minute() + primaryTime.second() / 60,
+    utcOffset: primaryTime.utcOffset(),
+    dayDifference: 0,
+  };
+  const cities = options.worldClockCities
+    .slice(0, maximumWorldClockCities)
+    .filter(({ timeZone }) => timeZone !== primaryTimeZone)
+    .map((city) => createWorldClockTime({ city, now, primaryTime }));
+
+  return (
+    <ScrollArea
+      h="100%"
+      w="100%"
+      type="auto"
+      offsetScrollbars
+      scrollbarSize={6}
+      aria-label={t("worldClock.advancedLabel")}
+    >
+      <Stack gap="md" p={{ base: "sm", sm: "md" }}>
+        {primaryTimeZoneInvalid && (
+          <Alert icon={<IconAlertTriangle />} color="yellow" title={t("worldClock.unsupportedPrimaryTitle")}>
+            {t("worldClock.unsupportedPrimary", { timeZone: options.timezone })}
+          </Alert>
+        )}
+        <PrimaryClock now={now} options={options} primary={primary} />
+        <OverviewMode now={now} options={options} primary={primary} cities={cities} />
+      </Stack>
+    </ScrollArea>
+  );
+};
+
+interface ModeProps {
+  now: Date;
+  options: WidgetComponentProps<"clock">["options"];
+  primary: WorldClockTime;
+  cities: WorldClockTime[];
+}
+
+const PrimaryClock = ({ now, options, primary }: Pick<ModeProps, "now" | "options" | "primary">) => {
+  const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("widget.clock");
+  const primaryTime = primary.zonedTime;
+  if (!primaryTime || primary.phase === null || primary.minuteOfDay === null) return null;
+
+  return (
+    <Paper withBorder radius="md" p="md">
+      <Group justify="space-between" align="flex-start" gap="lg" wrap="wrap">
+        <Stack gap={5} miw={0}>
+          <Group gap="xs" wrap="nowrap">
+            <ThemeIcon color={getPhaseColor(primary.phase)} variant="light" radius="xl" size="md">
+              <IconClock size={16} />
+            </ThemeIcon>
+            <Title order={2} size="h4" fw={600}>
+              {primary.label}
+            </Title>
+          </Group>
+          <ClockTime entry={primary} now={now} options={options} primary />
+          {options.showDate && (
+            <Text size="sm" c="dimmed">
+              {formatLocalizedDate(now, locale, { dateStyle: "full", timeZone: primary.timeZone })}
+            </Text>
+          )}
+          <Group gap="xs" wrap="wrap">
+            <Badge color="gray" variant="light" tt="none">
+              {primary.timeZone}
+            </Badge>
+            <Badge color="gray" variant="outline" tt="none">
+              {formatUtcOffset(primaryTime.utcOffset())}
+            </Badge>
+          </Group>
+        </Stack>
+        {options.showWeather && (
+          <Paper withBorder radius="md" p="sm">
+            <ClockWeatherSummary
+              latitude={options.weatherLocation.latitude}
+              longitude={options.weatherLocation.longitude}
+              locationName={options.weatherLocation.name}
+              isFahrenheit={options.isWeatherFormatFahrenheit}
+              animateIcon={options.animateWeatherIcon}
+              detailed
+            />
+          </Paper>
+        )}
+      </Group>
+      <Divider my="sm" />
+      <TimeOfDayBar
+        minuteOfDay={primary.minuteOfDay}
+        phase={primary.phase}
+        showLegend
+        showTicks
+        label={t("worldClock.timeBarLabel", { city: primary.label })}
+      />
+    </Paper>
+  );
+};
+
+const OverviewMode = ({ now, options, primary, cities }: ModeProps) => {
+  const t = useScopedI18n("widget.clock");
+  if (cities.length === 0) return <EmptyCities />;
+
+  return (
+    <Stack gap="xs">
+      <Group justify="space-between" align="baseline">
+        <Title order={3} size="h5">
+          {t("worldClock.cities")}
+        </Title>
+        <Text size="xs" c="dimmed">
+          {t("worldClock.cityCount", { count: cities.length })}
+        </Text>
+      </Group>
+      <SimpleGrid component="ul" cols={{ base: 1, sm: 2 }} spacing="sm" p={0} m={0} style={{ listStyle: "none" }}>
+        {cities.map((city) => (
+          <WorldClockCard
+            key={city.id}
+            entry={city}
+            now={now}
+            options={options}
+            primaryOffset={primary.utcOffset ?? 0}
+          />
+        ))}
+      </SimpleGrid>
+    </Stack>
+  );
+};
+
+interface ClockEntryProps {
+  entry: WorldClockTime;
+  now: Date;
+  options: WidgetComponentProps<"clock">["options"];
+  primaryOffset: number;
+}
+
+const WorldClockCard = ({ entry, now, options, primaryOffset }: ClockEntryProps) => {
+  if (!entry.zonedTime || entry.utcOffset === null) {
+    return <InvalidTimeZone entry={entry} />;
+  }
+
+  return (
+    <Paper component="li" withBorder radius="md" p="md">
+      <Stack gap="sm">
+        <Stack gap={0} miw={0}>
+          <Text fw={600} truncate>
+            {entry.label}
+          </Text>
+          <Text size="xs" c="dimmed" truncate>
+            {entry.timeZone}
+          </Text>
+        </Stack>
+        <ClockTime entry={entry} now={now} options={options} compact />
+        <DayAndOffset entry={entry} now={now} primaryOffset={primaryOffset} />
+      </Stack>
+    </Paper>
+  );
+};
+
+const ClockTime = ({
+  entry,
+  now,
+  options,
+  primary = false,
+  compact = false,
+}: Omit<ClockEntryProps, "primaryOffset"> & { primary?: boolean; compact?: boolean }) => {
+  const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("widget.clock");
+  if (!entry.zonedTime) return null;
+  let formattedTime = formatLocalizedTime(now, locale, {
+    hour12: clockTimeFormatUses12Hours(options.customTimeFormat, options.is24HourFormat),
+    includeSeconds: clockTimeFormatShowsSeconds(options.customTimeFormat),
+    timeZone: entry.timeZone,
+  });
+  if (primary) {
+    formattedTime = entry.zonedTime.format(resolveClockTimeFormat(options.customTimeFormat, options.is24HourFormat));
+  }
+  const accessibleDate = formatLocalizedDate(now, locale, {
+    dateStyle: "medium",
+    timeZone: entry.timeZone,
+  });
+  const fontSize = compact ? { base: 30, sm: 34 } : { base: 44, sm: 56 };
+
+  return (
+    <Text
+      component="time"
+      dateTime={now.toISOString()}
+      fz={fontSize}
+      fw={700}
+      ff="var(--mantine-font-family-monospace)"
+      lh={1}
+      lts="-0.04em"
+      aria-label={t("worldClock.accessibleTime", {
+        city: entry.label,
+        time: formattedTime,
+        date: accessibleDate,
+        timeZone: entry.timeZone,
+      })}
+    >
+      {formattedTime}
+    </Text>
+  );
+};
+
+const DayAndOffset = ({ entry, now, primaryOffset }: Pick<ClockEntryProps, "entry" | "now" | "primaryOffset">) => {
+  const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("widget.clock");
+  if (entry.dayDifference === null || entry.utcOffset === null) return null;
+  const dayRelation = getDayRelation(entry.dayDifference, t);
+  const date = formatLocalizedDate(now, locale, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    timeZone: entry.timeZone,
+  });
+
+  return (
+    <Group gap="xs" wrap="wrap">
+      <Badge color="gray" variant="light" size="sm" tt="none">
+        {date} · {dayRelation}
+      </Badge>
+      <Text size="xs" c="dimmed">
+        {formatRelativeOffset(entry.utcOffset - primaryOffset)} · {formatUtcOffset(entry.utcOffset)}
+      </Text>
+    </Group>
+  );
+};
+
+const InvalidTimeZone = ({ entry }: { entry: WorldClockTime }) => {
+  const t = useScopedI18n("widget.clock");
+  return (
+    <Paper component="li" withBorder radius="md" p="md">
+      <Group gap="xs" wrap="nowrap">
+        <IconAlertTriangle color="var(--mantine-color-yellow-6)" aria-hidden />
+        <Box>
+          <Text fw={600}>{entry.label}</Text>
+          <Text size="xs" c="dimmed">
+            {t("worldClock.unsupportedTimeZone", { timeZone: entry.timeZone })}
+          </Text>
+        </Box>
+      </Group>
+    </Paper>
+  );
+};
+
+const EmptyCities = () => {
+  const t = useScopedI18n("widget.clock");
+  return (
+    <Paper withBorder radius="md" p="xl">
+      <Text c="dimmed" ta="center">
+        {t("worldClock.noSecondaryCities")}
+      </Text>
+    </Paper>
+  );
+};
+
+type ScopedClockTranslator = ReturnType<typeof useScopedI18n<"widget.clock">>;
+
+const getDayRelation = (difference: number, t: ScopedClockTranslator) => {
+  if (difference < 0) return t("worldClock.yesterday");
+  if (difference > 0) return t("worldClock.tomorrow");
+  return t("worldClock.today");
+};
+
+const getPrimaryLabel = (options: ModeProps["options"], t: ScopedClockTranslator) => {
+  if (options.customTitleToggle) return options.customTitle || t("worldClock.primary");
+  if (options.useCustomTimezone) return humanizeTimeZone(options.timezone);
+  return t("worldClock.local");
+};
+
+const getPhaseColor = (phase: TimeOfDayPhase) => {
+  if (phase === "night") return "indigo";
+  if (phase === "dawn") return "orange";
+  if (phase === "day") return "cyan";
+  return "grape";
+};

packages/widgets/src/clock/component.tsx

@@ -1,51 +1,62 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, Group, Loader, Stack, Text, Title } from "@mantine/core";
+import { Box, Center, Stack, Text, Title } from "@mantine/core";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
-import timezones from "dayjs/plugin/timezone";
-import utc from "dayjs/plugin/utc";
 
-import { clientApi } from "@homarr/api/client";
-import { metricToImperial } from "@homarr/common";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-
-import { isInitialWidgetQueryPending } from "../common/query-state";
-import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
-import { AnimatedWeatherIcon } from "../weather/animated-icon";
-import { WeatherDescription } from "../weather/icon";
+import { AdvancedClockView } from "./advanced-view";
+import { clockTimeFormatShowsSeconds, resolveClockTimeFormat } from "./format";
+import { useCurrentTime } from "./use-current-time";
+import { ClockWeatherSummary } from "./weather-summary";
+import { getResolvedLocalTimeZone, isTimeZoneSupported } from "./world-clock";
 
 dayjs.extend(advancedFormat);
-dayjs.extend(utc);
-dayjs.extend(timezones);
 
 export default function ClockWidget({ options, width, height, displayMode }: WidgetComponentProps<"clock">) {
   const isAdvanced = displayMode === "advanced";
-  const secondsFormat = options.showSeconds || isAdvanced ? ":ss" : "";
-  const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `hh:mm${secondsFormat} A`;
-  const dateFormat = options.dateFormat;
-  const customTimeFormat = options.customTimeFormat;
-  const customDateFormat = options.customDateFormat;
-  const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const time = useCurrentTime({ showSeconds: options.showSeconds || isAdvanced });
-  const zonedTime = time === null ? null : dayjs(time).tz(timezone);
+  const showSeconds = clockTimeFormatShowsSeconds(options.customTimeFormat);
+  const time = useCurrentTime({ showSeconds });
+  const requestedTimeZone = options.useCustomTimezone ? options.timezone : getResolvedLocalTimeZone();
+  const primaryTimeZoneInvalid = !isTimeZoneSupported(requestedTimeZone);
+  const primaryTimeZone = primaryTimeZoneInvalid ? "UTC" : requestedTimeZone;
+  const zonedTime = time === null ? null : dayjs(time).tz(primaryTimeZone);
 
+  if (isAdvanced) {
+    if (time && zonedTime) {
+      return (
+        <AdvancedClockView
+          now={time}
+          options={options}
+          primaryTime={zonedTime}
+          primaryTimeZone={primaryTimeZone}
+          primaryTimeZoneInvalid={primaryTimeZoneInvalid}
+        />
+      );
+    }
+    return <Center h="100%">--:--</Center>;
+  }
+
+  const resolvedTimeFormat = resolveClockTimeFormat(options.customTimeFormat, options.is24HourFormat);
   const minimumAxis = Math.min(width, height * 1.5);
-  const sizing = minimumAxis < 128 ? "xs" : minimumAxis < 196 ? "sm" : "md";
+  let sizing: "xs" | "sm" | "md" = "md";
+  if (minimumAxis < 128) sizing = "xs";
+  else if (minimumAxis < 196) sizing = "sm";
   const showWeatherCorner = options.showWeather && sizing !== "xs";
 
   return (
     <Box className="clock-widget-container" h="100%" pos="relative">
       {showWeatherCorner && (
-        <ClockWeatherCorner
-          latitude={options.weatherLocation.latitude}
-          longitude={options.weatherLocation.longitude}
-          locationName={options.weatherLocation.name}
-          isFahrenheit={options.isWeatherFormatFahrenheit}
-          showDetails={isAdvanced}
-        />
+        <Box pos="absolute" top={4} left={4}>
+          <ClockWeatherSummary
+            latitude={options.weatherLocation.latitude}
+            longitude={options.weatherLocation.longitude}
+            locationName={options.weatherLocation.name}
+            isFahrenheit={options.isWeatherFormatFahrenheit}
+            animateIcon={options.animateWeatherIcon}
+            detailed={false}
+          />
+        </Box>
       )}
       <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap={sizing}>
         {options.customTitleToggle && (
@@ -53,19 +64,14 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid
             {options.customTitle}
           </Text>
         )}
-        <Title className="clock-time-text" fw={700} order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6} lh="1">
+        <Title className="clock-time-text" fw={700} order={getTitleOrder(sizing)} lh="1">
           <time dateTime={zonedTime?.toISOString()}>
-            {zonedTime === null ? "--:--" : zonedTime.format(options.customTimeFormat ? customTimeFormat : timeFormat)}
+            {zonedTime === null ? "--:--" : zonedTime.format(resolvedTimeFormat)}
           </time>
         </Title>
-        {(isAdvanced || options.showDate) && (
+        {options.showDate && (
           <Text className="clock-date-text" size={sizing} lineClamp={1}>
-            {zonedTime?.format(options.customDateFormat ? customDateFormat : dateFormat)}
-          </Text>
-        )}
-        {isAdvanced && (
-          <Text size="xs" c="dimmed" lineClamp={1}>
-            {zonedTime === null ? null : `${timezone} · UTC${zonedTime.format("Z")}`}
+            {zonedTime?.format(options.dateFormat)}
           </Text>
         )}
       </Stack>
@@ -73,117 +79,8 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid
   );
 }
 
-interface ClockWeatherCornerProps {
-  latitude: number;
-  longitude: number;
-  locationName: string;
-  isFahrenheit: boolean;
-  showDetails: boolean;
-}
-
-const ClockWeatherCorner = ({
-  latitude,
-  longitude,
-  locationName,
-  isFahrenheit,
-  showDetails,
-}: ClockWeatherCornerProps) => {
-  const t = useI18n();
-  const tCommon = useScopedI18n("common");
-  const weatherQuery = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
-  const weather = weatherQuery.data;
-
-  if (!weather) {
-    return (
-      <Box pos="absolute" top={4} left={4}>
-        {isInitialWidgetQueryPending(weatherQuery) ? (
-          <Loader size="xs" aria-label={tCommon("action.loading")} />
-        ) : (
-          <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
-        )}
-      </Box>
-    );
-  }
-
-  const temp = isFahrenheit ? weather.current.temperature * (9 / 5) + 32 : weather.current.temperature;
-  const unit = isFahrenheit ? "°F" : "°C";
-  const today = weather.daily[0];
-  const formatTemperature = (value: number | undefined) => {
-    if (value === undefined) return "—";
-    const preferred = isFahrenheit ? value * (9 / 5) + 32 : value;
-    return `${Math.round(preferred)}${unit}`;
-  };
-
-  return (
-    <Stack
-      className="clock-weather-corner"
-      pos="absolute"
-      top={4}
-      left={4}
-      gap={showDetails ? 4 : 0}
-      align="flex-start"
-    >
-      <Group gap={4} wrap="nowrap">
-        <AnimatedWeatherIcon code={weather.current.weathercode} size={22} />
-        <Text className="clock-weather-corner-temp" size="xs" c="dimmed">
-          {Math.round(temp)}
-          {unit}
-        </Text>
-        {showDetails && <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />}
-      </Group>
-      {showDetails && (
-        <Stack gap={1}>
-          <Text size="xs" fw={600}>
-            {locationName}
-          </Text>
-          <Text size="xs" c="dimmed">
-            {formatTemperature(today?.maxTemp)} / {formatTemperature(today?.minTemp)} · {today?.humidity ?? "—"}%
-          </Text>
-          <Text size="xs" c="dimmed">
-            {Math.round(isFahrenheit ? metricToImperial(weather.current.windspeed) : weather.current.windspeed)}{" "}
-            {isFahrenheit ? tCommon("unit.speed.milesPerHour") : tCommon("unit.speed.kilometersPerHour")}
-          </Text>
-          <Text size="xs" c="dimmed">
-            {t("widget.weather.dailyForecast.sunrise")}: {formatClockWeatherTime(today?.sunrise)} ·{" "}
-            {t("widget.weather.dailyForecast.sunset")}: {formatClockWeatherTime(today?.sunset)}
-          </Text>
-        </Stack>
-      )}
-      <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
-    </Stack>
-  );
-};
-
-const formatClockWeatherTime = (value: string | undefined) => value?.split("T")[1] ?? "—";
-
-interface UseCurrentTimeProps {
-  showSeconds: boolean;
-}
-
-const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
-  const [time, setTime] = useState<Date | null>(null);
-  const timeoutRef = useRef<NodeJS.Timeout>(null);
-  const intervalRef = useRef<NodeJS.Timeout>(null);
-  const intervalMultiplier = useMemo(() => (showSeconds ? 1 : 60), [showSeconds]);
-
-  useEffect(() => {
-    setTime(new Date());
-    timeoutRef.current = setTimeout(
-      () => {
-        setTime(new Date());
-
-        intervalRef.current = setInterval(() => {
-          setTime(new Date());
-        }, intervalMultiplier * 1000);
-      },
-      intervalMultiplier * 1000 - (1000 * (showSeconds ? 0 : dayjs().second()) + dayjs().millisecond()),
-    );
-
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      if (intervalRef.current) clearInterval(intervalRef.current);
-    };
-  }, [intervalMultiplier, showSeconds]);
-
-  return time;
+const getTitleOrder = (sizing: "xs" | "sm" | "md") => {
+  if (sizing === "md") return 2;
+  if (sizing === "sm") return 4;
+  return 6;
 };

packages/widgets/src/clock/format.ts

@@ -0,0 +1,19 @@
+export const automaticTimeFormat = "automatic";
+
+export const resolveClockTimeFormat = (format: string, legacyIs24HourFormat: boolean) => {
+  if (format && format !== automaticTimeFormat) return format;
+  if (legacyIs24HourFormat) return "HH:mm";
+  return "hh:mm A";
+};
+
+export const clockTimeFormatUses12Hours = (format: string, legacyIs24HourFormat: boolean) => {
+  if (!format || format === automaticTimeFormat) return !legacyIs24HourFormat;
+  const formatWithoutLiterals = format.replace(/\[[^\]]*\]/g, "");
+  return /h{1,2}/.test(formatWithoutLiterals);
+};
+
+export const clockTimeFormatShowsSeconds = (format: string) => {
+  if (!format || format === automaticTimeFormat) return false;
+  const formatWithoutLiterals = format.replace(/\[[^\]]*\]/g, "");
+  return /s{1,2}/.test(formatWithoutLiterals);
+};

packages/widgets/src/clock/index.ts

@@ -3,9 +3,18 @@ import dayjs from "dayjs";
 
 import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
+import {
+  defaultWorldClockCities,
+  getTimeZoneOptions,
+  maximumWorldClockCities,
+  worldClockCityPresets,
+} from "./world-clock";
+
+const timeZoneOptions = getTimeZoneOptions();
 
 export const { definition, componentLoader } = createWidgetDefinition("clock", {
   icon: IconClock,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "weather", "atLocation"]],
   queryMatcher: ({ input }, scope) => {
     const location = scope.options.weatherLocation;
@@ -37,12 +46,9 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
           defaultValue: true,
           withDescription: true,
         }),
-        showSeconds: factory.switch({
-          defaultValue: false,
-        }),
         useCustomTimezone: factory.switch({ defaultValue: false }),
         timezone: factory.select({
-          options: Intl.supportedValuesOf("timeZone").map((value) => value),
+          options: timeZoneOptions,
           defaultValue: "Europe/London",
           searchable: true,
           withDescription: true,
@@ -52,24 +58,29 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
         }),
         dateFormat: factory.select({
           options: [
-            { value: "dddd, MMMM D", label: dayjs().format("dddd, MMMM D") },
-            { value: "dddd, D MMMM", label: dayjs().format("dddd, D MMMM") },
-            { value: "MMM D", label: dayjs().format("MMM D") },
-            { value: "D MMM", label: dayjs().format("D MMM") },
-            { value: "DD/MM/YYYY", label: dayjs().format("DD/MM/YYYY") },
-            { value: "MM/DD/YYYY", label: dayjs().format("MM/DD/YYYY") },
-            { value: "DD/MM", label: dayjs().format("DD/MM") },
-            { value: "MM/DD", label: dayjs().format("MM/DD") },
+            { value: "YYYY-MM-DD", label: `${dayjs().format("YYYY-MM-DD")} · YYYY-MM-DD` },
+            { value: "DD/MM/YYYY", label: `${dayjs().format("DD/MM/YYYY")} · DD/MM/YYYY` },
+            { value: "MM/DD/YYYY", label: `${dayjs().format("MM/DD/YYYY")} · MM/DD/YYYY` },
+            { value: "dddd, MMMM D", label: `${dayjs().format("dddd, MMMM D")} · dddd, MMMM D` },
+            { value: "dddd, D MMMM", label: `${dayjs().format("dddd, D MMMM")} · dddd, D MMMM` },
+            { value: "MMM D, YYYY", label: `${dayjs().format("MMM D, YYYY")} · MMM D, YYYY` },
+            { value: "D MMM YYYY", label: `${dayjs().format("D MMM YYYY")} · D MMM YYYY` },
+            { value: "MMM D", label: `${dayjs().format("MMM D")} · MMM D` },
+            { value: "D MMM", label: `${dayjs().format("D MMM")} · D MMM` },
+            { value: "DD/MM", label: `${dayjs().format("DD/MM")} · DD/MM` },
+            { value: "MM/DD", label: `${dayjs().format("MM/DD")} · MM/DD` },
           ],
           defaultValue: "dddd, MMMM D",
           withDescription: true,
         }),
-        customTimeFormat: factory.text({
-          defaultValue: "",
-          withDescription: true,
-        }),
-        customDateFormat: factory.text({
-          defaultValue: "",
+        customTimeFormat: factory.select({
+          options: [
+            { value: "HH:mm", label: `${dayjs().format("HH:mm")} · HH:mm` },
+            { value: "HH:mm:ss", label: `${dayjs().format("HH:mm:ss")} · HH:mm:ss` },
+            { value: "h:mm A", label: `${dayjs().format("h:mm A")} · h:mm A` },
+            { value: "h:mm:ss A", label: `${dayjs().format("h:mm:ss A")} · h:mm:ss A` },
+          ],
+          defaultValue: "HH:mm",
           withDescription: true,
         }),
         showWeather: factory.switch({
@@ -86,8 +97,22 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
         isWeatherFormatFahrenheit: factory.switch({
           defaultValue: false,
         }),
+        animateWeatherIcon: factory.switch({
+          defaultValue: false,
+          withDescription: true,
+        }),
+        worldClockCities: factory.timezoneList({
+          defaultValue: defaultWorldClockCities.map((city) => ({ ...city })),
+          maxValues: maximumWorldClockCities,
+          presets: worldClockCityPresets,
+          timeZoneOptions,
+          withDescription: true,
+        }),
       }),
       {
+        is24HourFormat: {
+          shouldHide: () => true,
+        },
         customTitle: {
           shouldHide: (options) => !options.customTitleToggle,
         },
@@ -103,6 +128,9 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
         isWeatherFormatFahrenheit: {
           shouldHide: (options) => !options.showWeather,
         },
+        animateWeatherIcon: {
+          shouldHide: (options) => !options.showWeather,
+        },
       },
     );
   },

packages/widgets/src/clock/time-of-day-bar.tsx

@@ -0,0 +1,108 @@
+import { Badge, Box, Group, Progress, Stack, Text } from "@mantine/core";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { TimeOfDayPhase } from "./world-clock";
+
+interface TimeOfDayBarProps {
+  minuteOfDay: number;
+  phase: TimeOfDayPhase;
+  showLegend?: boolean;
+  showTicks?: boolean;
+  label: string;
+}
+
+const phaseSections = [
+  { key: "nightStart", value: 20.833, color: "indigo.8" },
+  { key: "dawn", value: 12.5, color: "orange.6" },
+  { key: "day", value: 41.667, color: "cyan.6" },
+  { key: "dusk", value: 12.5, color: "grape.6" },
+  { key: "nightEnd", value: 12.5, color: "indigo.8" },
+] as const;
+
+const phaseLegend = [
+  { key: "night", color: "indigo.8" },
+  { key: "dawn", color: "orange.6" },
+  { key: "day", color: "cyan.6" },
+  { key: "dusk", color: "grape.6" },
+] as const;
+
+const timeTicks = ["midnight", "morning", "noon", "evening", "end"] as const;
+
+export const TimeOfDayBar = ({
+  minuteOfDay,
+  phase,
+  showLegend = false,
+  showTicks = false,
+  label,
+}: TimeOfDayBarProps) => {
+  const t = useScopedI18n("widget.clock");
+  const progress = Math.max(0, Math.min(100, (minuteOfDay / 1440) * 100));
+  const remainingMinutes = Math.max(0, 1440 - Math.floor(minuteOfDay));
+  const remainingHours = Math.floor(remainingMinutes / 60);
+  const remainder = remainingMinutes % 60;
+
+  return (
+    <Stack component="figure" gap={6} m={0} aria-label={label}>
+      <Group justify="space-between" align="center" gap="xs" wrap="nowrap">
+        <Badge color={getPhaseColor(phase)} variant="dot" size="sm">
+          {t(`worldClock.phase.${phase}`)}
+        </Badge>
+        <Text size="xs" c="dimmed" ta="right">
+          {t("worldClock.dayProgress", {
+            percent: Math.round(progress),
+            hours: remainingHours,
+            minutes: remainder.toString().padStart(2, "0"),
+          })}
+        </Text>
+      </Group>
+      <Box pos="relative">
+        <Progress.Root size="md" radius="xl" aria-hidden>
+          {phaseSections.map((section) => (
+            <Progress.Section key={section.key} value={section.value} color={section.color} withAria={false} />
+          ))}
+        </Progress.Root>
+        <Box
+          pos="absolute"
+          top="50%"
+          left={`${progress}%`}
+          w={4}
+          h={24}
+          bg="var(--mantine-color-text)"
+          style={{ borderRadius: "var(--mantine-radius-xl)", transform: "translate(-50%, -50%)" }}
+        />
+      </Box>
+      {showTicks && (
+        <Group justify="space-between" wrap="nowrap">
+          {timeTicks.map((tick) => (
+            <Text key={tick} size="xs" c="dimmed" aria-hidden>
+              {t(`worldClock.tick.${tick}`)}
+            </Text>
+          ))}
+        </Group>
+      )}
+      {showLegend && (
+        <Group gap="md" mt={4} align="center" wrap="wrap">
+          <Text size="xs" fw={600}>
+            {t("worldClock.phaseLegend")}
+          </Text>
+          {phaseLegend.map((item) => (
+            <Group key={item.key} gap={6} wrap="nowrap">
+              <Box w={9} h={9} bg={item.color} style={{ borderRadius: "var(--mantine-radius-xl)" }} />
+              <Text size="xs" c="dimmed">
+                {t(`worldClock.phase.${item.key}`)} · {t(`worldClock.phaseRange.${item.key}`)}
+              </Text>
+            </Group>
+          ))}
+        </Group>
+      )}
+    </Stack>
+  );
+};
+
+const getPhaseColor = (phase: TimeOfDayPhase) => {
+  if (phase === "night") return "indigo";
+  if (phase === "dawn") return "orange";
+  if (phase === "day") return "cyan";
+  return "grape";
+};

packages/widgets/src/clock/use-current-time.ts

@@ -0,0 +1,27 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import dayjs from "dayjs";
+
+export const useCurrentTime = ({ showSeconds }: { showSeconds: boolean }) => {
+  const [time, setTime] = useState<Date | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(null);
+  const intervalMultiplier = useMemo(() => (showSeconds ? 1 : 60), [showSeconds]);
+
+  useEffect(() => {
+    setTime(new Date());
+    timeoutRef.current = setTimeout(
+      () => {
+        setTime(new Date());
+        intervalRef.current = setInterval(() => setTime(new Date()), intervalMultiplier * 1000);
+      },
+      intervalMultiplier * 1000 - (1000 * (showSeconds ? 0 : dayjs().second()) + dayjs().millisecond()),
+    );
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [intervalMultiplier, showSeconds]);
+
+  return time;
+};

packages/widgets/src/clock/weather-summary.tsx

@@ -0,0 +1,78 @@
+import { Box, Group, Loader, Stack, Text } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+import { isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
+import { AnimatedWeatherIcon } from "../weather/animated-icon";
+import { WeatherDescription } from "../weather/icon";
+
+interface ClockWeatherSummaryProps {
+  latitude: number;
+  longitude: number;
+  locationName: string;
+  isFahrenheit: boolean;
+  animateIcon: boolean;
+  detailed: boolean;
+}
+
+export const ClockWeatherSummary = ({
+  latitude,
+  longitude,
+  locationName,
+  isFahrenheit,
+  animateIcon,
+  detailed,
+}: ClockWeatherSummaryProps) => {
+  const t = useI18n();
+  const tCommon = useScopedI18n("common");
+  const weatherQuery = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
+  const weather = weatherQuery.data;
+
+  if (!weather) {
+    return isInitialWidgetQueryPending(weatherQuery) ? (
+      <Loader size="xs" aria-label={tCommon("action.loading")} />
+    ) : (
+      <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
+    );
+  }
+
+  const temperature = isFahrenheit ? weather.current.temperature * (9 / 5) + 32 : weather.current.temperature;
+  const unit = isFahrenheit ? "°F" : "°C";
+  const today = weather.daily[0];
+  const formatTemperature = (value: number | null | undefined) => {
+    if (value === undefined || value === null) return "—";
+    const preferred = isFahrenheit ? value * (9 / 5) + 32 : value;
+    return `${Math.round(preferred)}${unit}`;
+  };
+
+  return (
+    <Stack gap={detailed ? 3 : 0} align="flex-start">
+      <Group gap={5} wrap="nowrap">
+        <AnimatedWeatherIcon
+          animated={animateIcon}
+          code={weather.current.weatherCode}
+          isDay={weather.current.isDay}
+          size={detailed ? 28 : 22}
+        />
+        <Text size={detailed ? "sm" : "xs"} fw={detailed ? 600 : undefined} c={detailed ? undefined : "dimmed"}>
+          {Math.round(temperature)}
+          {unit}
+        </Text>
+        {detailed && <WeatherDescription weatherOnly weatherCode={weather.current.weatherCode} />}
+      </Group>
+      {detailed && (
+        <Box>
+          <Text size="xs" fw={600} lineClamp={1}>
+            {locationName}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {formatTemperature(today?.maxTemperature)} / {formatTemperature(today?.minTemperature)}
+          </Text>
+        </Box>
+      )}
+      <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
+    </Stack>
+  );
+};

packages/widgets/src/clock/world-clock.spec.ts

@@ -0,0 +1,63 @@
+import dayjs from "dayjs";
+import { describe, expect, test } from "vitest";
+
+import {
+  createWorldClockTime,
+  formatRelativeOffset,
+  formatUtcOffset,
+  getTimeOfDayPhase,
+  getTimeZoneOptions,
+} from "./world-clock";
+
+describe("world clock helpers", () => {
+  test("adds UTC to the available timezone options", () => {
+    expect(getTimeZoneOptions()).toContainEqual({ value: "UTC", label: "UTC (UTC)" });
+  });
+
+  test("classifies the fixed time-of-day phases at their boundaries", () => {
+    expect([0, 4, 5, 7, 8, 17, 18, 20, 21, 23].map(getTimeOfDayPhase)).toEqual([
+      "night",
+      "night",
+      "dawn",
+      "dawn",
+      "day",
+      "day",
+      "dusk",
+      "dusk",
+      "night",
+      "night",
+    ]);
+  });
+
+  test("formats whole-hour and fractional offsets", () => {
+    expect(formatUtcOffset(345)).toBe("UTC+05:45");
+    expect(formatRelativeOffset(-210)).toBe("−3h 30m");
+    expect(formatRelativeOffset(0)).toBe("±0h");
+  });
+
+  test("compares civil dates across the date line from one instant", () => {
+    const now = new Date("2026-01-01T02:30:00.000Z");
+    const primaryTime = dayjs(now).tz("America/New_York");
+    const tokyo = createWorldClockTime({
+      city: { id: "tokyo", label: "Tokyo", timeZone: "Asia/Tokyo" },
+      now,
+      primaryTime,
+    });
+
+    expect(primaryTime.format("YYYY-MM-DD")).toBe("2025-12-31");
+    expect(tokyo.zonedTime?.format("YYYY-MM-DD")).toBe("2026-01-01");
+    expect(tokyo.dayDifference).toBe(1);
+  });
+
+  test("isolates unsupported timezones", () => {
+    const now = new Date("2026-01-01T00:00:00.000Z");
+    const result = createWorldClockTime({
+      city: { id: "invalid", label: "Invalid", timeZone: "Invalid/Timezone" },
+      now,
+      primaryTime: dayjs(now).tz("UTC"),
+    });
+
+    expect(result.zonedTime).toBeNull();
+    expect(result.utcOffset).toBeNull();
+  });
+});

packages/widgets/src/clock/world-clock.ts

@@ -0,0 +1,127 @@
+import dayjs from "dayjs";
+import type { Dayjs } from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+import type { OptionTimezone } from "../options";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export const maximumWorldClockCities = 6;
+
+export const worldClockCityPresets = [
+  { id: "new-york", label: "New York", timeZone: "America/New_York" },
+  { id: "london", label: "London", timeZone: "Europe/London" },
+  { id: "paris", label: "Paris", timeZone: "Europe/Paris" },
+  { id: "tokyo", label: "Tokyo", timeZone: "Asia/Tokyo" },
+  { id: "sydney", label: "Sydney", timeZone: "Australia/Sydney" },
+  { id: "utc", label: "UTC", timeZone: "UTC" },
+] as const satisfies readonly OptionTimezone[];
+
+export const defaultWorldClockCities = worldClockCityPresets.filter(({ id }) =>
+  ["new-york", "paris", "tokyo"].includes(id),
+);
+
+export const getTimeZoneOptions = () => {
+  const timeZones = Intl.supportedValuesOf("timeZone");
+  if (!timeZones.includes("UTC")) timeZones.push("UTC");
+
+  return timeZones.map((timeZone) => ({
+    value: timeZone,
+    label: `${humanizeTimeZone(timeZone)} (${timeZone})`,
+  }));
+};
+
+export const humanizeTimeZone = (timeZone: string) => {
+  if (timeZone === "UTC") return "UTC";
+  const segments = timeZone.split("/");
+  return (segments.at(-1) ?? timeZone).replaceAll("_", " ");
+};
+
+export const isTimeZoneSupported = (timeZone: string) => {
+  try {
+    new Intl.DateTimeFormat("en", { timeZone }).format(0);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export type TimeOfDayPhase = "night" | "dawn" | "day" | "dusk";
+
+export interface WorldClockTime {
+  id: string;
+  label: string;
+  timeZone: string;
+  zonedTime: Dayjs | null;
+  phase: TimeOfDayPhase | null;
+  minuteOfDay: number | null;
+  utcOffset: number | null;
+  dayDifference: number | null;
+}
+
+export const getResolvedLocalTimeZone = () => {
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  return timeZone && isTimeZoneSupported(timeZone) ? timeZone : "UTC";
+};
+
+export const createWorldClockTime = ({
+  city,
+  now,
+  primaryTime,
+}: {
+  city: OptionTimezone;
+  now: Date;
+  primaryTime: Dayjs;
+}): WorldClockTime => {
+  if (!isTimeZoneSupported(city.timeZone)) {
+    return {
+      ...city,
+      zonedTime: null,
+      phase: null,
+      minuteOfDay: null,
+      utcOffset: null,
+      dayDifference: null,
+    };
+  }
+
+  const zonedTime = dayjs(now).tz(city.timeZone);
+  return {
+    ...city,
+    zonedTime,
+    phase: getTimeOfDayPhase(zonedTime.hour()),
+    minuteOfDay: zonedTime.hour() * 60 + zonedTime.minute() + zonedTime.second() / 60,
+    utcOffset: zonedTime.utcOffset(),
+    dayDifference: getCivilDayNumber(zonedTime) - getCivilDayNumber(primaryTime),
+  };
+};
+
+export const getTimeOfDayPhase = (hour: number): TimeOfDayPhase => {
+  if (hour < 5 || hour >= 21) return "night";
+  if (hour < 8) return "dawn";
+  if (hour < 18) return "day";
+  return "dusk";
+};
+
+export const formatUtcOffset = (minutes: number) => {
+  if (minutes === 0) return "UTC±00:00";
+  const sign = minutes < 0 ? "−" : "+";
+  const absoluteMinutes = Math.abs(minutes);
+  const hours = Math.floor(absoluteMinutes / 60)
+    .toString()
+    .padStart(2, "0");
+  const remainingMinutes = (absoluteMinutes % 60).toString().padStart(2, "0");
+  return `UTC${sign}${hours}:${remainingMinutes}`;
+};
+
+export const formatRelativeOffset = (minutes: number) => {
+  if (minutes === 0) return "±0h";
+  const sign = minutes < 0 ? "−" : "+";
+  const absoluteMinutes = Math.abs(minutes);
+  const hours = Math.floor(absoluteMinutes / 60);
+  const remainingMinutes = absoluteMinutes % 60;
+  return remainingMinutes === 0 ? `${sign}${hours}h` : `${sign}${hours}h ${remainingMinutes}m`;
+};
+
+const getCivilDayNumber = (value: Dayjs) => Date.UTC(value.year(), value.month(), value.date()) / 86_400_000;

packages/widgets/src/common/browser-alert.spec.ts

@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { addRememberedBrowserAlert, requestBrowserNotificationPermission } from "./browser-alert";
+
+const originalNotification = window.Notification;
+
+afterEach(() => {
+  if (originalNotification === undefined) {
+    Reflect.deleteProperty(window, "Notification");
+    return;
+  }
+  Object.defineProperty(window, "Notification", { configurable: true, value: originalNotification });
+});
+
+describe("browser alert occurrence history", () => {
+  it("moves a repeated occurrence to the end without duplicating it", () => {
+    expect(addRememberedBrowserAlert(["first", "second"], "first")).toEqual(["second", "first"]);
+  });
+
+  it("bounds remembered occurrences", () => {
+    const values = Array.from({ length: 110 }, (_, index) => String(index));
+    const result = addRememberedBrowserAlert(values, "next");
+    expect(result).toHaveLength(100);
+    expect(result.at(-1)).toBe("next");
+  });
+
+  it("keeps the current permission when the browser rejects a permission request", async () => {
+    Object.defineProperty(window, "Notification", {
+      configurable: true,
+      value: {
+        permission: "default",
+        requestPermission: vi.fn().mockRejectedValue(new Error("blocked")),
+      },
+    });
+
+    await expect(requestBrowserNotificationPermission()).resolves.toBe("default");
+  });
+});

packages/widgets/src/common/browser-alert.ts

@@ -0,0 +1,87 @@
+export type BrowserNotificationPermission = NotificationPermission | "unsupported";
+
+export interface BrowserNotificationOptions {
+  title: string;
+  body?: string;
+  icon?: string;
+  tag?: string;
+}
+
+const maxRememberedOccurrences = 100;
+
+export const getBrowserNotificationPermission = (): BrowserNotificationPermission => {
+  if (typeof window === "undefined" || !("Notification" in window)) return "unsupported";
+  return window.Notification.permission;
+};
+
+export const requestBrowserNotificationPermission = async (): Promise<BrowserNotificationPermission> => {
+  if (typeof window === "undefined" || !("Notification" in window)) return "unsupported";
+  try {
+    return await window.Notification.requestPermission();
+  } catch {
+    return getBrowserNotificationPermission();
+  }
+};
+
+export const showBrowserNotification = ({ title, body, icon, tag }: BrowserNotificationOptions): boolean => {
+  if (typeof window === "undefined" || !("Notification" in window) || window.Notification.permission !== "granted") {
+    return false;
+  }
+
+  try {
+    const notification = new window.Notification(title, { body, icon, tag });
+    void notification;
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const playBrowserAlertSound = (): boolean => {
+  if (typeof window === "undefined") return false;
+  const AudioContextConstructor =
+    window.AudioContext ?? (window as typeof window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+  if (!AudioContextConstructor) return false;
+
+  try {
+    const context = new AudioContextConstructor();
+    const oscillator = context.createOscillator();
+    const gain = context.createGain();
+    const start = context.currentTime;
+    oscillator.type = "sine";
+    oscillator.frequency.setValueAtTime(880, start);
+    gain.gain.setValueAtTime(0.0001, start);
+    gain.gain.exponentialRampToValueAtTime(0.18, start + 0.01);
+    gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.3);
+    oscillator.connect(gain);
+    gain.connect(context.destination);
+    oscillator.start(start);
+    oscillator.stop(start + 0.32);
+    oscillator.addEventListener("ended", () => void context.close(), { once: true });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const addRememberedBrowserAlert = (occurrences: string[], occurrence: string): string[] => {
+  const withoutDuplicate = occurrences.filter((value) => value !== occurrence);
+  return [...withoutDuplicate, occurrence].slice(-maxRememberedOccurrences);
+};
+
+export const claimBrowserAlertOccurrence = (storageKey: string, occurrence: string): boolean => {
+  if (typeof window === "undefined") return false;
+
+  try {
+    const serialized = window.localStorage.getItem(storageKey);
+    const parsed: unknown = serialized === null ? [] : JSON.parse(serialized);
+    const occurrences = Array.isArray(parsed)
+      ? parsed.filter((value): value is string => typeof value === "string")
+      : [];
+    if (occurrences.includes(occurrence)) return false;
+    window.localStorage.setItem(storageKey, JSON.stringify(addRememberedBrowserAlert(occurrences, occurrence)));
+    return true;
+  } catch {
+    return false;
+  }
+};

packages/widgets/src/common/use-local-widget-state.spec.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import { parseLocalWidgetState, serializeLocalWidgetState } from "./use-local-widget-state";
+
+const isCounterState = (value: unknown): value is { count: number } =>
+  typeof value === "object" && value !== null && "count" in value && typeof value.count === "number";
+
+describe("local widget state serialization", () => {
+  it("round trips validated state", () => {
+    const serialized = serializeLocalWidgetState(1, { count: 3 });
+    expect(parseLocalWidgetState(serialized, 1, isCounterState)).toEqual({ count: 3 });
+  });
+
+  it("rejects malformed and invalid state", () => {
+    expect(parseLocalWidgetState("not-json", 1, isCounterState)).toBeUndefined();
+    expect(parseLocalWidgetState('{"version":1,"value":{"count":"3"}}', 1, isCounterState)).toBeUndefined();
+  });
+
+  it("uses the supplied migration for old versions", () => {
+    const serialized = serializeLocalWidgetState(1, { oldCount: 4 });
+    expect(
+      parseLocalWidgetState(serialized, 2, isCounterState, (value) => {
+        if (typeof value !== "object" || value === null || !("oldCount" in value)) return undefined;
+        return { count: Number(value.oldCount) };
+      }),
+    ).toEqual({ count: 4 });
+  });
+});

packages/widgets/src/common/use-local-widget-state.ts

@@ -0,0 +1,146 @@
+"use client";
+
+import type { Dispatch, SetStateAction } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface StoredWidgetState {
+  version: number;
+  value: unknown;
+}
+
+interface UseLocalWidgetStateOptions<T> {
+  key: string | undefined;
+  version: number;
+  defaultValue: T | (() => T);
+  validate?: (value: unknown) => value is T;
+  migrate?: (value: unknown, storedVersion: number) => T | undefined;
+}
+
+const resolveDefaultValue = <T>(value: T | (() => T)): T =>
+  typeof value === "function" ? (value as () => T)() : value;
+
+export const serializeLocalWidgetState = <T>(version: number, value: T): string => JSON.stringify({ version, value });
+
+export const parseLocalWidgetState = <T>(
+  serialized: string,
+  version: number,
+  validate?: (value: unknown) => value is T,
+  migrate?: (value: unknown, storedVersion: number) => T | undefined,
+): T | undefined => {
+  try {
+    const parsed: unknown = JSON.parse(serialized);
+    if (typeof parsed !== "object" || parsed === null || !("version" in parsed) || !("value" in parsed)) {
+      return undefined;
+    }
+
+    const stored = parsed as StoredWidgetState;
+    if (typeof stored.version !== "number") return undefined;
+    if (stored.version !== version) {
+      const migrated = migrate?.(stored.value, stored.version);
+      if (migrated === undefined || (validate && !validate(migrated))) return undefined;
+      return migrated;
+    }
+    if (validate && !validate(stored.value)) return undefined;
+    return stored.value as T;
+  } catch {
+    return undefined;
+  }
+};
+
+export const useLocalWidgetState = <T>({
+  key,
+  version,
+  defaultValue,
+  validate,
+  migrate,
+}: UseLocalWidgetStateOptions<T>): [T, Dispatch<SetStateAction<T>>, () => void] => {
+  const defaultValueRef = useRef(defaultValue);
+  const validateRef = useRef(validate);
+  const migrateRef = useRef(migrate);
+  defaultValueRef.current = defaultValue;
+  validateRef.current = validate;
+  migrateRef.current = migrate;
+
+  const createDefaultValue = useCallback(() => resolveDefaultValue(defaultValueRef.current), []);
+  const [value, setValueState] = useState<T>(createDefaultValue);
+  const valueRef = useRef(value);
+
+  const setMemoryValue = useCallback((nextValue: T) => {
+    valueRef.current = nextValue;
+    setValueState(nextValue);
+  }, []);
+
+  const removeStoredValue = useCallback(() => {
+    if (!key) return;
+    try {
+      window.localStorage.removeItem(key);
+    } catch {
+      // Storage can be unavailable in private or restricted browser contexts.
+    }
+  }, [key]);
+
+  useEffect(() => {
+    if (!key) {
+      setMemoryValue(createDefaultValue());
+      return;
+    }
+
+    try {
+      const serialized = window.localStorage.getItem(key);
+      if (serialized === null) {
+        setMemoryValue(createDefaultValue());
+        return;
+      }
+      const parsed = parseLocalWidgetState(serialized, version, validateRef.current, migrateRef.current);
+      if (parsed === undefined) {
+        window.localStorage.removeItem(key);
+        setMemoryValue(createDefaultValue());
+        return;
+      }
+      setMemoryValue(parsed);
+    } catch {
+      setMemoryValue(createDefaultValue());
+    }
+  }, [createDefaultValue, key, setMemoryValue, version]);
+
+  useEffect(() => {
+    if (!key) return;
+
+    const handleStorage = (event: StorageEvent) => {
+      if (event.storageArea !== window.localStorage || event.key !== key) return;
+      if (event.newValue === null) {
+        setMemoryValue(createDefaultValue());
+        return;
+      }
+
+      const parsed = parseLocalWidgetState(event.newValue, version, validateRef.current, migrateRef.current);
+      if (parsed !== undefined) setMemoryValue(parsed);
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [createDefaultValue, key, setMemoryValue, version]);
+
+  const setValue: Dispatch<SetStateAction<T>> = useCallback(
+    (nextValue) => {
+      const resolved =
+        typeof nextValue === "function" ? (nextValue as (previous: T) => T)(valueRef.current) : nextValue;
+      if (Object.is(resolved, valueRef.current)) return;
+      setMemoryValue(resolved);
+      if (key) {
+        try {
+          window.localStorage.setItem(key, serializeLocalWidgetState(version, resolved));
+        } catch {
+          // Keep the in-memory state usable when persistence is unavailable.
+        }
+      }
+    },
+    [key, setMemoryValue, version],
+  );
+
+  const resetValue = useCallback(() => {
+    removeStoredValue();
+    setMemoryValue(createDefaultValue());
+  }, [createDefaultValue, removeStoredValue, setMemoryValue]);
+
+  return [value, setValue, resetValue];
+};

packages/widgets/src/common/use-widget-now.spec.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+
+import { getNextWidgetTickDelay } from "./use-widget-now";
+
+describe("getNextWidgetTickDelay", () => {
+  it("aligns second and minute ticks", () => {
+    const now = new Date(2026, 7, 20, 12, 34, 45, 250);
+    expect(getNextWidgetTickDelay(now, "second")).toBe(750);
+    expect(getNextWidgetTickDelay(now, "minute")).toBe(14_750);
+  });
+
+  it("aligns day ticks to the next local midnight", () => {
+    const now = new Date(2026, 7, 20, 23, 59, 59, 500);
+    expect(getNextWidgetTickDelay(now, "day")).toBe(500);
+  });
+});

packages/widgets/src/common/use-widget-now.ts

@@ -0,0 +1,54 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export type WidgetClockPrecision = "second" | "minute" | "day";
+
+const minimumDelayMs = 10;
+
+export const getNextWidgetTickDelay = (now: Date, precision: WidgetClockPrecision): number => {
+  let next: number;
+  if (precision === "second") {
+    next = now.getTime() - now.getMilliseconds() + 1_000;
+  } else if (precision === "minute") {
+    next = now.getTime() - now.getSeconds() * 1_000 - now.getMilliseconds() + 60_000;
+  } else {
+    next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).getTime();
+  }
+
+  return Math.max(minimumDelayMs, next - now.getTime());
+};
+
+export const useWidgetNow = (precision: WidgetClockPrecision = "minute"): Date | null => {
+  const [now, setNow] = useState<Date | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const cancelTick = useCallback(() => {
+    if (timeoutRef.current === undefined) return;
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = undefined;
+  }, []);
+
+  const scheduleTick = useCallback(() => {
+    cancelTick();
+    const current = new Date();
+    setNow(current);
+    timeoutRef.current = setTimeout(scheduleTick, getNextWidgetTickDelay(current, precision));
+  }, [cancelTick, precision]);
+
+  useEffect(() => {
+    scheduleTick();
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") scheduleTick();
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      cancelTick();
+    };
+  }, [cancelTick, scheduleTick]);
+
+  return now;
+};

packages/widgets/src/countdown/component.module.css

@@ -0,0 +1,42 @@
+.root {
+  container-type: size;
+  overflow: hidden;
+}
+
+.duration {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.04em;
+}
+
+.compactDuration {
+  font-size: var(--mantine-font-size-xl);
+  white-space: nowrap;
+}
+
+.compactProgress {
+  width: 100%;
+  max-width: 14rem;
+}
+
+.eventCard {
+  min-width: 0;
+}
+
+@container (max-width: 10.625rem) {
+  .compactStatus,
+  .compactTarget {
+    display: none;
+  }
+}
+
+@container (max-width: 8.75rem) {
+  .compactDuration {
+    font-size: clamp(var(--mantine-font-size-sm), 15cqw, var(--mantine-font-size-md));
+  }
+}
+
+@container (max-height: 6.5625rem) {
+  .compactTarget {
+    display: none;
+  }
+}

packages/widgets/src/countdown/component.tsx

@@ -0,0 +1,361 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Alert,
+  Badge,
+  Group,
+  Paper,
+  Progress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Switch,
+  Text,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import { IconBell, IconBellOff, IconHourglass } from "@tabler/icons-react";
+
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
+
+import {
+  claimBrowserAlertOccurrence,
+  getBrowserNotificationPermission,
+  requestBrowserNotificationPermission,
+  showBrowserNotification,
+} from "../common/browser-alert";
+import { useLocalWidgetState } from "../common/use-local-widget-state";
+import { useWidgetNow } from "../common/use-widget-now";
+import type { WidgetComponentProps } from "../definition";
+import { formatCountdownDuration } from "./display";
+import styles from "./component.module.css";
+import { getCountdownEventState, getCountdownProgress, groupCountdownStates } from "./recurrence";
+import type { CountdownEventState } from "./recurrence";
+
+interface AlertPreferences {
+  notifications: boolean;
+}
+
+const defaultAlertPreferences: AlertPreferences = { notifications: false };
+
+const isAlertPreferences = (value: unknown): value is AlertPreferences => {
+  if (typeof value !== "object" || value === null) return false;
+  return "notifications" in value && typeof value.notifications === "boolean";
+};
+
+const migrateAlertPreferences = (value: unknown, storedVersion: number): AlertPreferences | undefined => {
+  if (storedVersion !== 1 || !isAlertPreferences(value)) return undefined;
+  return { notifications: value.notifications };
+};
+
+export default function CountdownWidget({
+  boardId,
+  displayMode,
+  isEditMode,
+  itemId,
+  options,
+  width,
+}: WidgetComponentProps<"countdown">) {
+  const now = useWidgetNow(options.showSeconds ? "second" : "minute");
+  const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("widget.countdown");
+  const storagePrefix = boardId && itemId ? `homarr:countdown:${boardId}:${itemId}` : undefined;
+  const [preferences, setPreferences] = useLocalWidgetState<AlertPreferences>({
+    key: storagePrefix ? `${storagePrefix}:alert-preferences` : undefined,
+    version: 2,
+    defaultValue: defaultAlertPreferences,
+    validate: isAlertPreferences,
+    migrate: migrateAlertPreferences,
+  });
+  const [notificationPermission, setNotificationPermission] = useState(() => getBrowserNotificationPermission());
+  const previousNowRef = useRef<Date | null>(null);
+  const states = useMemo(() => {
+    if (!now) return [];
+    return options.events.map((event) => getCountdownEventState(event, now));
+  }, [now, options.events]);
+  const grouped = useMemo(() => groupCountdownStates(states), [states]);
+
+  useEffect(() => {
+    if (!now || !storagePrefix) return;
+    const previousNow = previousNowRef.current;
+    previousNowRef.current = now;
+    if (!previousNow || !preferences.notifications) return;
+
+    states.forEach((state) => {
+      const occurrence = state.previousOccurrence;
+      if (!occurrence || occurrence <= previousNow || occurrence > now) return;
+      const claimKey = `${storagePrefix}:alerted-occurrences`;
+      const occurrenceKey = `${state.event.id}:${occurrence.toISOString()}`;
+      if (!claimBrowserAlertOccurrence(claimKey, occurrenceKey)) return;
+      showBrowserNotification({
+        title: state.event.label,
+        body: t("alert.reached"),
+        tag: occurrenceKey,
+      });
+    });
+  }, [now, preferences.notifications, states, storagePrefix, t]);
+
+  if (!now) {
+    return (
+      <Stack h="100%" align="center" justify="center">
+        <Text c="dimmed">—</Text>
+      </Stack>
+    );
+  }
+
+  const hero = states[0];
+  if (!hero) {
+    return (
+      <Stack h="100%" align="center" justify="center" gap="xs" p="md">
+        <ThemeIcon variant="light" size="xl" radius="xl">
+          <IconHourglass />
+        </ThemeIcon>
+        <Text fw={600}>{t("empty.title")}</Text>
+        <Text size="sm" c="dimmed" ta="center">
+          {t("empty.description")}
+        </Text>
+      </Stack>
+    );
+  }
+
+  let heroStatus: string | null = null;
+  if (hero.invalid) heroStatus = t("invalid.value");
+  else if (hero.completed) heroStatus = t("completed");
+
+  if (displayMode !== "advanced") {
+    return (
+      <Stack className={styles.root} h="100%" justify="center" align="center" gap={6} p="sm">
+        <Group gap="xs" wrap="nowrap" maw="100%">
+          {heroStatus && (
+            <Badge className={styles.compactStatus} variant="outline" size="xs" flex="0 0 auto">
+              {heroStatus}
+            </Badge>
+          )}
+          <Text size="sm" fw={600} truncate>
+            {hero.event.label}
+          </Text>
+        </Group>
+        <CountdownValue state={hero} now={now} locale={locale} showSeconds={options.showSeconds} compact />
+        <Text className={styles.compactTarget} size="xs" c="dimmed" truncate maw="100%">
+          {formatOccurrence(hero, locale)}
+        </Text>
+        {options.showProgress && (
+          <ProgressBar className={styles.compactProgress} state={hero} now={now} label={t("progress")} />
+        )}
+      </Stack>
+    );
+  }
+
+  const setNotifications = async (enabled: boolean) => {
+    if (!enabled) {
+      setPreferences((current) => ({ ...current, notifications: false }));
+      return;
+    }
+    const permission = await requestBrowserNotificationPermission();
+    setNotificationPermission(permission);
+    if (permission === "granted") setPreferences((current) => ({ ...current, notifications: true }));
+  };
+  const eventColumns = width >= 700 ? 2 : 1;
+
+  return (
+    <Stack className={styles.root} h="100%" gap="md" p="md">
+      <Paper withBorder p="lg" radius="md">
+        <Stack gap="md">
+          <Group gap="xs" wrap="nowrap">
+            {heroStatus && <Badge variant="outline">{heroStatus}</Badge>}
+            <Text size="sm" c="dimmed" truncate>
+              {formatOccurrence(hero, locale)}
+            </Text>
+          </Group>
+          <Title order={2} lineClamp={1}>
+            {hero.event.label}
+          </Title>
+          <CountdownValue state={hero} now={now} locale={locale} showSeconds={options.showSeconds} />
+        </Stack>
+        {options.showProgress && <ProgressBar state={hero} now={now} label={t("progress")} />}
+      </Paper>
+
+      <AlertControls
+        disabled={isEditMode}
+        persistent={storagePrefix !== undefined}
+        preferences={preferences}
+        notificationPermission={notificationPermission}
+        onNotificationsChange={setNotifications}
+      />
+
+      <ScrollArea type="auto" style={{ flex: 1, minHeight: 0 }}>
+        <Stack gap="md" pb="xs">
+          <EventSection
+            title={t("upcoming")}
+            states={grouped.upcoming}
+            now={now}
+            locale={locale}
+            showSeconds={options.showSeconds}
+            showProgress={options.showProgress}
+            columns={eventColumns}
+          />
+          <EventSection
+            title={t("completedEvents")}
+            states={grouped.completed}
+            now={now}
+            locale={locale}
+            showSeconds={options.showSeconds}
+            showProgress={options.showProgress}
+            columns={eventColumns}
+          />
+          {grouped.invalid.length > 0 && (
+            <Alert color="yellow" title={t("invalid.title")}>
+              {t("invalid.description", { count: grouped.invalid.length })}
+            </Alert>
+          )}
+        </Stack>
+      </ScrollArea>
+    </Stack>
+  );
+}
+
+const CountdownValue = ({
+  state,
+  now,
+  locale,
+  showSeconds,
+  compact = false,
+}: {
+  state: CountdownEventState;
+  now: Date;
+  locale: string;
+  showSeconds: boolean;
+  compact?: boolean;
+}) => {
+  const t = useScopedI18n("widget.countdown");
+  let value = t("invalid.value");
+  if (state.completed) value = t("completed");
+  else if (state.nextOccurrence)
+    value = formatCountdownDuration(state, now, showSeconds, locale, compact ? "narrow" : "short");
+  return (
+    <Text
+      className={compact ? `${styles.duration} ${styles.compactDuration}` : styles.duration}
+      fz={compact ? undefined : 42}
+      fw={750}
+      lh={1.05}
+      ta={compact ? "center" : undefined}
+    >
+      {value}
+    </Text>
+  );
+};
+
+const ProgressBar = ({
+  className,
+  state,
+  now,
+  label,
+}: {
+  className?: string;
+  state: CountdownEventState;
+  now: Date;
+  label: string;
+}) => {
+  const progress = getCountdownProgress(state, now);
+  if (progress === null) return null;
+  return (
+    <Progress
+      className={className}
+      mt="xs"
+      value={progress}
+      aria-label={`${label}: ${Math.round(progress)}%`}
+      animated={false}
+    />
+  );
+};
+
+const EventSection = ({
+  title,
+  states,
+  now,
+  locale,
+  showSeconds,
+  showProgress,
+  columns,
+}: {
+  title: string;
+  states: CountdownEventState[];
+  now: Date;
+  locale: string;
+  showSeconds: boolean;
+  showProgress: boolean;
+  columns: number;
+}) => {
+  const t = useScopedI18n("widget.countdown");
+  if (states.length === 0) return null;
+  return (
+    <Stack gap="xs">
+      <Text fw={700}>{title}</Text>
+      <SimpleGrid cols={columns} spacing="xs">
+        {states.map((state) => (
+          <Paper className={styles.eventCard} key={state.event.id} withBorder p="sm">
+            <Stack gap={4} h="100%">
+              <Group justify="space-between" wrap="nowrap">
+                <Text fw={600} truncate>
+                  {state.event.label}
+                </Text>
+                {state.event.recurrence === "yearly" && <Badge variant="outline">{t("yearly")}</Badge>}
+              </Group>
+              <CountdownValue state={state} now={now} locale={locale} showSeconds={showSeconds} compact />
+              <Stack gap={4} mt="auto">
+                {showProgress && <ProgressBar state={state} now={now} label={title} />}
+                <Text size="xs" c="dimmed">
+                  {formatOccurrence(state, locale)}
+                </Text>
+              </Stack>
+            </Stack>
+          </Paper>
+        ))}
+      </SimpleGrid>
+    </Stack>
+  );
+};
+
+const AlertControls = ({
+  disabled,
+  persistent,
+  preferences,
+  notificationPermission,
+  onNotificationsChange,
+}: {
+  disabled: boolean;
+  persistent: boolean;
+  preferences: AlertPreferences;
+  notificationPermission: ReturnType<typeof getBrowserNotificationPermission>;
+  onNotificationsChange: (enabled: boolean) => Promise<void>;
+}) => {
+  const t = useScopedI18n("widget.countdown.alert");
+  if (!persistent) return null;
+  return (
+    <Paper withBorder p="sm" radius="md">
+      <Switch
+        checked={preferences.notifications && notificationPermission === "granted"}
+        disabled={disabled || notificationPermission === "unsupported" || notificationPermission === "denied"}
+        onChange={(event) => void onNotificationsChange(event.currentTarget.checked)}
+        label={t("notifications")}
+        thumbIcon={preferences.notifications ? <IconBell size={12} /> : <IconBellOff size={12} />}
+      />
+      {notificationPermission === "denied" && (
+        <Text size="xs" c="dimmed" mt="xs">
+          {t("permissionDenied")}
+        </Text>
+      )}
+    </Paper>
+  );
+};
+
+const formatOccurrence = (state: CountdownEventState, locale: string) => {
+  const occurrence = state.nextOccurrence ?? state.previousOccurrence;
+  if (!occurrence) return state.event.timeZone;
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZone: state.event.timeZone,
+  }).format(occurrence);
+};

packages/widgets/src/countdown/display.ts

@@ -0,0 +1,64 @@
+import type { CountdownEventState } from "./recurrence";
+
+const secondMs = 1_000;
+const minuteMs = 60 * secondMs;
+const hourMs = 60 * minuteMs;
+const dayMs = 24 * hourMs;
+
+export interface CountdownDurationPart {
+  unit: Intl.NumberFormatOptions["unit"];
+  value: number;
+}
+
+export const getCountdownDurationParts = (
+  state: CountdownEventState,
+  now: Date,
+  showSeconds: boolean,
+): CountdownDurationPart[] => {
+  const occurrence = state.nextOccurrence;
+  if (!occurrence) return [];
+  const remaining = Math.max(0, occurrence.getTime() - now.getTime());
+  const days = Math.floor(remaining / dayMs);
+  const hours = Math.floor((remaining % dayMs) / hourMs);
+  const minutes = Math.floor((remaining % hourMs) / minuteMs);
+  const seconds = Math.floor((remaining % minuteMs) / secondMs);
+
+  if (showSeconds) {
+    const parts: CountdownDurationPart[] = [];
+    if (days > 0) parts.push({ unit: "day", value: days });
+    if (days > 0 || hours > 0) parts.push({ unit: "hour", value: hours });
+    if (days > 0 || hours > 0 || minutes > 0) parts.push({ unit: "minute", value: minutes });
+    parts.push({ unit: "second", value: seconds });
+    return parts;
+  }
+
+  if (days > 0)
+    return compactParts([
+      { unit: "day", value: days },
+      { unit: "hour", value: hours },
+    ]);
+  if (hours > 0)
+    return compactParts([
+      { unit: "hour", value: hours },
+      { unit: "minute", value: minutes },
+    ]);
+  if (minutes > 0) return [{ unit: "minute", value: minutes }];
+  return [{ unit: "minute", value: 0 }];
+};
+
+const compactParts = (parts: CountdownDurationPart[]) => {
+  const nonZero = parts.filter(({ value }) => value > 0);
+  return nonZero.length > 0 ? nonZero : parts.slice(0, 1);
+};
+
+export const formatCountdownDuration = (
+  state: CountdownEventState,
+  now: Date,
+  showSeconds: boolean,
+  locale: string,
+  unitDisplay: Intl.NumberFormatOptions["unitDisplay"] = "short",
+) => {
+  return getCountdownDurationParts(state, now, showSeconds)
+    .map(({ unit, value }) => new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay }).format(value))
+    .join(" ");
+};

packages/widgets/src/countdown/index.ts

@@ -0,0 +1,24 @@
+import { IconHourglass } from "@tabler/icons-react";
+
+import { createWidgetDefinition } from "../definition";
+import { optionsBuilder } from "../options";
+import { getTimeZoneOptions } from "../clock/world-clock";
+
+const maximumCountdownEvents = 20;
+
+export const { definition, componentLoader } = createWidgetDefinition("countdown", {
+  icon: IconHourglass,
+  supportsAdvancedFocus: true,
+  createOptions() {
+    return optionsBuilder.from((factory) => ({
+      events: factory.dateTimeEventList({
+        defaultValue: [],
+        maxValues: maximumCountdownEvents,
+        timeZoneOptions: getTimeZoneOptions(),
+        withDescription: true,
+      }),
+      showProgress: factory.switch({ defaultValue: true }),
+      showSeconds: factory.switch({ defaultValue: false, withDescription: true }),
+    }));
+  },
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/countdown/recurrence.spec.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from "vitest";
+
+import type { OptionDateTimeEvent } from "../options";
+import { getCountdownDurationParts } from "./display";
+import {
+  getCountdownEventState,
+  getCountdownProgress,
+  resolveWallDateTimeString,
+  groupCountdownStates,
+} from "./recurrence";
+
+const event = (overrides: Partial<OptionDateTimeEvent> = {}): OptionDateTimeEvent => ({
+  id: "event",
+  label: "Event",
+  targetUtc: "2026-07-15T13:00:00.000Z",
+  timeZone: "America/New_York",
+  recurrence: "none",
+  ...overrides,
+});
+
+describe("countdown recurrence", () => {
+  it("preserves a yearly event's wall-clock time across DST offsets", () => {
+    const recurring = event({ recurrence: "yearly" });
+    const winterState = getCountdownEventState(recurring, new Date("2027-01-01T00:00:00.000Z"));
+
+    expect(winterState.nextOccurrence?.toISOString()).toBe("2027-07-15T13:00:00.000Z");
+  });
+
+  it("skips non-leap years for a February 29 recurrence", () => {
+    const recurring = event({
+      recurrence: "yearly",
+      targetUtc: "2024-02-29T12:00:00.000Z",
+      timeZone: "UTC",
+    });
+    const state = getCountdownEventState(recurring, new Date("2025-01-01T00:00:00.000Z"));
+
+    expect(state.nextOccurrence?.toISOString()).toBe("2028-02-29T12:00:00.000Z");
+    expect(state.previousOccurrence?.toISOString()).toBe("2024-02-29T12:00:00.000Z");
+  });
+
+  it("selects the first valid time after a DST gap", () => {
+    const resolved = resolveWallDateTimeString("2026-03-08 02:30:45", "America/New_York");
+    expect(resolved?.toISOString()).toBe("2026-03-08T07:00:00.000Z");
+  });
+
+  it("selects the earlier occurrence when a wall-clock time repeats", () => {
+    const resolved = resolveWallDateTimeString("2026-11-01 01:30:00", "America/New_York");
+    expect(resolved?.toISOString()).toBe("2026-11-01T05:30:00.000Z");
+  });
+});
+
+describe("countdown ordering and progress", () => {
+  const now = new Date("2026-06-01T12:00:00.000Z");
+
+  it("preserves configured order within event groups", () => {
+    const states = [
+      getCountdownEventState(event({ id: "later", targetUtc: "2026-06-03T12:00:00.000Z" }), now),
+      getCountdownEventState(event({ id: "older", targetUtc: "2026-05-01T12:00:00.000Z" }), now),
+      getCountdownEventState(event({ id: "sooner", targetUtc: "2026-06-02T12:00:00.000Z" }), now),
+      getCountdownEventState(event({ id: "newer", targetUtc: "2026-05-31T12:00:00.000Z" }), now),
+    ];
+
+    const grouped = groupCountdownStates(states);
+    expect(grouped.upcoming.map(({ event: item }) => item.id)).toEqual(["later", "sooner"]);
+    expect(grouped.completed.map(({ event: item }) => item.id)).toEqual(["older", "newer"]);
+  });
+
+  it("clamps one-time progress and omits it without a start", () => {
+    const withStart = getCountdownEventState(
+      event({ targetUtc: "2026-06-02T12:00:00.000Z", startUtc: "2026-05-31T12:00:00.000Z" }),
+      now,
+    );
+    const withoutStart = getCountdownEventState(event({ targetUtc: "2026-06-02T12:00:00.000Z" }), now);
+
+    expect(getCountdownProgress(withStart, now)).toBe(50);
+    expect(getCountdownProgress(withStart, new Date("2026-06-04T12:00:00.000Z"))).toBe(100);
+    expect(getCountdownProgress(withoutStart, now)).toBeNull();
+  });
+
+  it("uses the previous and next occurrence for yearly progress", () => {
+    const state = getCountdownEventState(
+      event({ recurrence: "yearly", targetUtc: "2024-01-01T00:00:00.000Z", timeZone: "UTC" }),
+      new Date("2026-07-02T12:00:00.000Z"),
+    );
+    const progress = getCountdownProgress(state, new Date("2026-07-02T12:00:00.000Z"));
+
+    expect(progress).not.toBeNull();
+    if (progress === null) throw new Error("Expected yearly progress");
+    expect(progress).toBeGreaterThan(49);
+    expect(progress).toBeLessThan(51);
+  });
+
+  it("keeps seconds visible at every duration when enabled", () => {
+    const longState = getCountdownEventState(event({ targetUtc: "2026-06-03T13:00:00.000Z" }), now);
+    const shortState = getCountdownEventState(event({ targetUtc: "2026-06-02T11:30:45.000Z" }), now);
+
+    expect(getCountdownDurationParts(longState, now, true).some(({ unit }) => unit === "second")).toBe(true);
+    expect(getCountdownDurationParts(shortState, now, true).some(({ unit }) => unit === "second")).toBe(true);
+    expect(getCountdownDurationParts(longState, now, false).some(({ unit }) => unit === "second")).toBe(false);
+  });
+});

packages/widgets/src/countdown/recurrence.ts

@@ -0,0 +1,232 @@
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+import type { OptionDateTimeEvent } from "../options";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const minuteMs = 60_000;
+const dayMs = 86_400_000;
+const timeZoneSupportCache = new Map<string, boolean>();
+
+export interface WallDateTime {
+  year: number;
+  month: number;
+  day: number;
+  hour: number;
+  minute: number;
+  second: number;
+}
+
+export interface CountdownEventState {
+  event: OptionDateTimeEvent;
+  nextOccurrence: Date | null;
+  previousOccurrence: Date | null;
+  completed: boolean;
+  invalid: boolean;
+}
+
+export const isCountdownTimeZoneSupported = (timeZone: string) => {
+  const cached = timeZoneSupportCache.get(timeZone);
+  if (cached !== undefined) return cached;
+  try {
+    new Intl.DateTimeFormat("en", { timeZone }).format(0);
+    timeZoneSupportCache.set(timeZone, true);
+    return true;
+  } catch {
+    timeZoneSupportCache.set(timeZone, false);
+    return false;
+  }
+};
+
+export const parseWallDateTime = (value: string): WallDateTime | null => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value);
+  if (!match) return null;
+  const parts: WallDateTime = {
+    year: Number(match[1]),
+    month: Number(match[2]),
+    day: Number(match[3]),
+    hour: Number(match[4]),
+    minute: Number(match[5]),
+    second: Number(match[6] ?? 0),
+  };
+  const validationDate = new Date(
+    Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second),
+  );
+  if (
+    validationDate.getUTCFullYear() !== parts.year ||
+    validationDate.getUTCMonth() !== parts.month - 1 ||
+    validationDate.getUTCDate() !== parts.day ||
+    validationDate.getUTCHours() !== parts.hour ||
+    validationDate.getUTCMinutes() !== parts.minute ||
+    validationDate.getUTCSeconds() !== parts.second
+  ) {
+    return null;
+  }
+  return parts;
+};
+
+export const formatWallDateTime = (instant: string | Date, timeZone: string) => {
+  if (!isCountdownTimeZoneSupported(timeZone)) return "";
+  const value = dayjs(instant);
+  if (!value.isValid()) return "";
+  return value.tz(timeZone).format("YYYY-MM-DD HH:mm:ss");
+};
+
+const wallDateTimeEquals = (value: WallDateTime, candidate: dayjs.Dayjs) =>
+  candidate.year() === value.year &&
+  candidate.month() + 1 === value.month &&
+  candidate.date() === value.day &&
+  candidate.hour() === value.hour &&
+  candidate.minute() === value.minute &&
+  candidate.second() === value.second;
+
+const resolveExactWallDateTime = (value: WallDateTime, timeZone: string): Date[] => {
+  const naiveUtc = Date.UTC(value.year, value.month - 1, value.day, value.hour, value.minute, value.second);
+  const offsets = new Set<number>();
+  for (const dayOffset of [-2, -1, 0, 1, 2]) {
+    offsets.add(
+      dayjs
+        .utc(naiveUtc + dayOffset * dayMs)
+        .tz(timeZone)
+        .utcOffset(),
+    );
+  }
+
+  const matches: Date[] = [];
+  for (const offset of offsets) {
+    const candidate = new Date(naiveUtc - offset * minuteMs);
+    if (wallDateTimeEquals(value, dayjs(candidate).tz(timeZone))) matches.push(candidate);
+  }
+  // oxlint-disable-next-line unicorn/no-array-sort -- Array.toSorted is not supported in all target browsers.
+  return [...matches].sort((left, right) => left.getTime() - right.getTime());
+};
+
+/** Resolves a local wall-clock value, preferring the earlier repeated time and the first valid time after a DST gap. */
+export const resolveWallDateTime = (value: WallDateTime, timeZone: string): Date | null => {
+  if (!isCountdownTimeZoneSupported(timeZone)) return null;
+  const exactMatches = resolveExactWallDateTime(value, timeZone);
+  if (exactMatches[0]) return exactMatches[0];
+
+  const naiveUtc = Date.UTC(value.year, value.month - 1, value.day, value.hour, value.minute);
+  for (let minuteOffset = 1; minuteOffset <= 180; minuteOffset += 1) {
+    const candidateWallDate = new Date(naiveUtc + minuteOffset * minuteMs);
+    const candidateWall: WallDateTime = {
+      year: candidateWallDate.getUTCFullYear(),
+      month: candidateWallDate.getUTCMonth() + 1,
+      day: candidateWallDate.getUTCDate(),
+      hour: candidateWallDate.getUTCHours(),
+      minute: candidateWallDate.getUTCMinutes(),
+      second: candidateWallDate.getUTCSeconds(),
+    };
+    const matches = resolveExactWallDateTime(candidateWall, timeZone);
+    if (matches[0]) return matches[0];
+  }
+  return null;
+};
+
+export const resolveWallDateTimeString = (value: string, timeZone: string) => {
+  const wallDateTime = parseWallDateTime(value);
+  if (!wallDateTime) return null;
+  return resolveWallDateTime(wallDateTime, timeZone);
+};
+
+const isLeapYear = (year: number) => year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+
+const occurrenceForYear = (target: WallDateTime, year: number, timeZone: string) => {
+  if (target.month === 2 && target.day === 29 && !isLeapYear(year)) return null;
+  return resolveWallDateTime({ ...target, year }, timeZone);
+};
+
+const findYearlyOccurrence = (
+  target: WallDateTime,
+  timeZone: string,
+  startYear: number,
+  direction: 1 | -1,
+  predicate: (date: Date) => boolean,
+) => {
+  for (let index = 0; index < 12; index += 1) {
+    const occurrence = occurrenceForYear(target, startYear + index * direction, timeZone);
+    if (occurrence && predicate(occurrence)) return occurrence;
+  }
+  return null;
+};
+
+export const getCountdownEventState = (event: OptionDateTimeEvent, now: Date): CountdownEventState => {
+  const target = dayjs(event.targetUtc);
+  if (!target.isValid() || !isCountdownTimeZoneSupported(event.timeZone)) {
+    return { event, nextOccurrence: null, previousOccurrence: null, completed: false, invalid: true };
+  }
+
+  if (event.recurrence === "none") {
+    const targetDate = target.toDate();
+    const completed = targetDate.getTime() <= now.getTime();
+    return {
+      event,
+      nextOccurrence: completed ? null : targetDate,
+      previousOccurrence: completed ? targetDate : null,
+      completed,
+      invalid: false,
+    };
+  }
+
+  const targetWall = parseWallDateTime(formatWallDateTime(event.targetUtc, event.timeZone));
+  if (!targetWall) {
+    return { event, nextOccurrence: null, previousOccurrence: null, completed: false, invalid: true };
+  }
+  const currentYear = dayjs(now).tz(event.timeZone).year();
+  const nextOccurrence = findYearlyOccurrence(
+    targetWall,
+    event.timeZone,
+    currentYear,
+    1,
+    (occurrence) => occurrence.getTime() > now.getTime(),
+  );
+  const previousOccurrence = findYearlyOccurrence(
+    targetWall,
+    event.timeZone,
+    currentYear,
+    -1,
+    (occurrence) => occurrence.getTime() <= now.getTime(),
+  );
+  return {
+    event,
+    nextOccurrence,
+    previousOccurrence,
+    completed: false,
+    invalid: nextOccurrence === null,
+  };
+};
+
+export const getCountdownProgress = (state: CountdownEventState, now: Date): number | null => {
+  let start: Date | null = null;
+  let end: Date | null = null;
+
+  if (state.event.recurrence === "yearly") {
+    start = state.previousOccurrence;
+    end = state.nextOccurrence;
+  } else if (state.event.startUtc) {
+    const parsedStart = dayjs(state.event.startUtc);
+    const parsedEnd = dayjs(state.event.targetUtc);
+    if (parsedStart.isValid() && parsedEnd.isValid()) {
+      start = parsedStart.toDate();
+      end = parsedEnd.toDate();
+    }
+  }
+
+  if (!start || !end || end.getTime() <= start.getTime()) return null;
+  const progress = ((now.getTime() - start.getTime()) / (end.getTime() - start.getTime())) * 100;
+  return Math.min(100, Math.max(0, progress));
+};
+
+export const groupCountdownStates = (states: CountdownEventState[]) => {
+  const upcoming = states.filter((state) => state.nextOccurrence !== null && !state.invalid);
+  const completed = states.filter((state) => state.completed && state.previousOccurrence !== null && !state.invalid);
+  const invalid = states.filter((state) => state.invalid);
+  return { upcoming, completed, invalid };
+};
+
+export const getLatestReachedOccurrence = (event: OptionDateTimeEvent, now: Date) =>
+  getCountdownEventState(event, now).previousOccurrence;

packages/widgets/src/definition.spec.ts

@@ -38,7 +38,6 @@ describe("supportsAdvancedFocus", () => {
     beszelSystemGridDefinition,
     beszelSystemStatsDefinition,
     beszelSystemTableDefinition,
-    clockDefinition,
     customApiDefinition,
     dockerDefinition,
     indexerManagerDefinition,
@@ -49,6 +48,7 @@ describe("supportsAdvancedFocus", () => {
 
   test("requires an explicit opt-in", () => {
     expect(supportsAdvancedFocus({})).toBe(false);
+    expect(supportsAdvancedFocus(clockDefinition)).toBe(true);
     expect(supportsAdvancedFocus(downloadsDefinition)).toBe(true);
   });
 });

packages/widgets/src/index.tsx

@@ -63,6 +63,10 @@ import * as beszelAlerts from "./beszel-alerts";
 import * as beszelSystemStats from "./beszel-system-stats";
 import * as video from "./video";
 import * as weather from "./weather";
+import * as today from "./today";
+import * as airQuality from "./air-quality";
+import * as countdown from "./countdown";
+import * as timer from "./timer";
 import * as customApi from "./custom-api";
 import * as assistant from "./assistant";
 import * as wud from "./wud";
@@ -94,6 +98,10 @@ export { AssistantWidgetRendererProvider } from "./assistant/context";
 export const widgetImports = {
   clock,
   weather,
+  today,
+  airQuality,
+  countdown,
+  timer,
   app,
   archiveTeamWarrior,
   anchorNote,

packages/widgets/src/manifest.spec.ts

@@ -17,6 +17,8 @@ import { widgetQueryRefetchIntervals } from "./refetch-intervals";
 import { widgetCatalogIcons } from "./catalog";
 import { getWidgetQueryKeys } from "./definition";
 
+const serializePollingPolicy = (entry: { queryKey: QueryKey; intervalSeconds: number | null }) => JSON.stringify(entry);
+
 describe("widget manifest promise stability", () => {
   it("returns the same module promise for every render", () => {
     expect(loadWidgetModule("clock")).toBe(loadWidgetModule("clock"));
@@ -145,9 +147,8 @@ describe("widget manifest promise stability", () => {
       }
     }
 
-    const serializePolicy = (entry: PollingPolicy) => JSON.stringify(entry);
-    expect(widgetQueryRefetchIntervals.map(serializePolicy).toSorted()).toEqual(
-      [...expectedByQueryKey.values()].map(serializePolicy).toSorted(),
+    expect(widgetQueryRefetchIntervals.map(serializePollingPolicy).toSorted()).toEqual(
+      [...expectedByQueryKey.values()].map(serializePollingPolicy).toSorted(),
     );
   });
 

packages/widgets/src/manifest.ts

@@ -24,6 +24,10 @@ export type WidgetResources = {
 const moduleLoaders: Record<WidgetKind, () => Promise<WidgetModule>> = {
   clock: () => import("./clock") as Promise<WidgetModule>,
   weather: () => import("./weather") as Promise<WidgetModule>,
+  today: () => import("./today") as Promise<WidgetModule>,
+  airQuality: () => import("./air-quality") as Promise<WidgetModule>,
+  countdown: () => import("./countdown") as Promise<WidgetModule>,
+  timer: () => import("./timer") as Promise<WidgetModule>,
   app: () => import("./app") as Promise<WidgetModule>,
   assistant: () => import("./assistant") as Promise<WidgetModule>,
   archiveTeamWarrior: () => import("./archive-team-warrior") as Promise<WidgetModule>,
@@ -85,6 +89,10 @@ const moduleLoaders: Record<WidgetKind, () => Promise<WidgetModule>> = {
 const componentLoaders: Record<WidgetKind, () => Promise<WidgetComponentModule>> = {
   clock: () => import("./clock/component") as Promise<WidgetComponentModule>,
   weather: () => import("./weather/component") as Promise<WidgetComponentModule>,
+  today: () => import("./today/component") as Promise<WidgetComponentModule>,
+  airQuality: () => import("./air-quality/component") as Promise<WidgetComponentModule>,
+  countdown: () => import("./countdown/component") as Promise<WidgetComponentModule>,
+  timer: () => import("./timer/component") as Promise<WidgetComponentModule>,
   app: () => import("./app/component") as Promise<WidgetComponentModule>,
   assistant: () => import("./assistant/component") as Promise<WidgetComponentModule>,
   archiveTeamWarrior: () => import("./archive-team-warrior/component") as Promise<WidgetComponentModule>,

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import type { FormEvent } from "react";
+import type { ComponentType, FormEvent } from "react";
 import { Box, Button, Group, Stack, Tabs, Text } from "@mantine/core";
 import { schemaResolver } from "@mantine/form";
-import { IconPencil } from "@tabler/icons-react";
+import { IconArrowLeft, IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { objectEntries } from "@homarr/common";
@@ -35,6 +35,16 @@ export interface WidgetEditModalState {
   advancedOptions: BoardItemAdvancedOptions;
 }
 
+export interface EmbeddedIntegrationEditFormHandle {
+  submitIfDirty: () => Promise<boolean>;
+}
+
+export interface EmbeddedIntegrationEditFormProps {
+  integrationId: string;
+  handleRef: React.Ref<EmbeddedIntegrationEditFormHandle>;
+  onSuccess?: () => void;
+}
+
 export interface WidgetEditModalProps<TSort extends WidgetKind> {
   kind: TSort;
   definition: WidgetDefinition;
@@ -46,7 +56,7 @@ export interface WidgetEditModalProps<TSort extends WidgetKind> {
   itemId?: string;
   boardId?: string;
   appId?: string;
-  onEditIntegration?: (integrationId: string) => void;
+  integrationEditForm?: ComponentType<EmbeddedIntegrationEditFormProps>;
   onIntegrationSaved?: () => void;
 }
 
@@ -61,6 +71,12 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
   const { data: session } = useSession();
   const [advancedOptions, setAdvancedOptions] = useState<BoardItemAdvancedOptions>(innerProps.value.advancedOptions);
   const appEditRef = useRef<EmbeddedAppEditFormHandle>(null);
+  const integrationEditHandles = useRef(new Map<string, EmbeddedIntegrationEditFormHandle>());
+  const integrationEditRefCallbacks = useRef(
+    new Map<string, (handle: EmbeddedIntegrationEditFormHandle | null) => void>(),
+  );
+  const [mountedIntegrationIds, setMountedIntegrationIds] = useState<string[]>([]);
+  const [activeIntegrationId, setActiveIntegrationId] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   z.config({
@@ -118,7 +134,24 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
   const showAppTab = innerProps.kind === "app" && canModifyApps && Boolean(appId);
   const canModifyAllIntegrations = session?.user.permissions.includes("integration-full-all") ?? false;
   const selectedIntegrations = getSelectedWidgetIntegrations(innerProps.integrationData, form.values.integrationIds);
-  const showIntegrationTab = Boolean(innerProps.onEditIntegration) && selectedIntegrations.length > 0;
+  const editableIntegrationIds = selectedIntegrations
+    .filter((integration) => canModifyAllIntegrations || integration.permissions?.hasFullAccess === true)
+    .map((integration) => integration.id);
+  let soleEditableIntegrationId: string | null = null;
+  if (selectedIntegrations.length === 1) {
+    soleEditableIntegrationId = editableIntegrationIds[0] ?? null;
+  }
+
+  let displayedIntegrationId = soleEditableIntegrationId;
+  if (activeIntegrationId && editableIntegrationIds.includes(activeIntegrationId)) {
+    displayedIntegrationId = activeIntegrationId;
+  }
+  const integrationIdsToRender = mountedIntegrationIds.filter((id) => editableIntegrationIds.includes(id));
+  if (displayedIntegrationId && !integrationIdsToRender.includes(displayedIntegrationId)) {
+    integrationIdsToRender.push(displayedIntegrationId);
+  }
+  const IntegrationEditForm = innerProps.integrationEditForm;
+  const showIntegrationTab = Boolean(IntegrationEditForm) && selectedIntegrations.length > 0;
   const showResourceTabs = showAppTab || showIntegrationTab;
   const [activeTab, setActiveTab] = useState<string | null>("widget");
 
@@ -127,15 +160,31 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
     if (activeTab === "app" && !showAppTab) setActiveTab("widget");
   }, [activeTab, showAppTab, showIntegrationTab]);
 
-  const handleTabChange = (value: string | null) => {
-    if (value === "integration" && selectedIntegrations.length === 1) {
-      const integration = selectedIntegrations[0];
-      if (integration) {
-        innerProps.onEditIntegration?.(integration.id);
-        return;
-      }
+  const getIntegrationEditRef = (integrationId: string) => {
+    const existingCallback = integrationEditRefCallbacks.current.get(integrationId);
+    if (existingCallback) {
+      return existingCallback;
     }
-    setActiveTab(value);
+
+    const callback = (handle: EmbeddedIntegrationEditFormHandle | null) => {
+      if (handle) {
+        integrationEditHandles.current.set(integrationId, handle);
+      } else {
+        integrationEditHandles.current.delete(integrationId);
+      }
+    };
+    integrationEditRefCallbacks.current.set(integrationId, callback);
+    return callback;
+  };
+
+  const beginEditingIntegration = (integrationId: string) => {
+    setMountedIntegrationIds((current) => {
+      if (current.includes(integrationId)) {
+        return current;
+      }
+      return [...current, integrationId];
+    });
+    setActiveIntegrationId(integrationId);
   };
 
   const handleSubmit = form.onSubmit(async (values) => {
@@ -147,6 +196,13 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
         return;
       }
 
+      for (const integrationEditHandle of integrationEditHandles.current.values()) {
+        const integrationSaved = await integrationEditHandle.submitIfDirty();
+        if (!integrationSaved) {
+          return;
+        }
+      }
+
       innerProps.onSuccessfulEdit({
         ...values,
         advancedOptions,
@@ -240,7 +296,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
       <FormProvider form={form}>
         {showResourceTabs ? (
           <Stack>
-            <Tabs value={activeTab} onChange={handleTabChange}>
+            <Tabs value={activeTab} onChange={setActiveTab}>
               <Tabs.List grow>
                 <Tabs.Tab value="widget">{t("item.edit.tab.widget")}</Tabs.Tab>
                 {showAppTab && <Tabs.Tab value="app">{t("item.edit.tab.app")}</Tabs.Tab>}
@@ -257,42 +313,68 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
               {showIntegrationTab && (
                 <Tabs.Panel value="integration" pt="md">
                   <Stack>
-                    <Text size="sm" c="dimmed">
-                      {t("item.edit.integration.description")}
-                    </Text>
-                    {selectedIntegrations.map((integration) => {
-                      const canEdit = canModifyAllIntegrations || integration.permissions?.hasFullAccess === true;
-                      return (
-                        <Group key={integration.id} justify="space-between" wrap="nowrap" gap="sm">
-                          <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-                            <IntegrationAvatar kind={integration.kind} size="sm" />
-                            <Stack gap={0} style={{ minWidth: 0 }}>
-                              <Text fw={600} size="sm" truncate>
-                                {integration.name}
-                              </Text>
-                              <Text size="xs" c="dimmed" truncate>
-                                {integration.url}
-                              </Text>
-                            </Stack>
-                          </Group>
-                          {canEdit ? (
-                            <Button
-                              type="button"
-                              variant="light"
-                              leftSection={<IconPencil size={16} />}
-                              onClick={() => innerProps.onEditIntegration?.(integration.id)}
-                              aria-label={t("item.edit.integration.editLabel", { name: integration.name })}
-                            >
-                              {t("item.edit.integration.action")}
-                            </Button>
-                          ) : (
-                            <Text size="xs" c="dimmed" ta="end">
-                              {t("item.edit.integration.fullAccessRequired")}
-                            </Text>
-                          )}
-                        </Group>
-                      );
-                    })}
+                    {displayedIntegrationId === null && (
+                      <>
+                        <Text size="sm" c="dimmed">
+                          {t("item.edit.integration.description")}
+                        </Text>
+                        {selectedIntegrations.map((integration) => {
+                          const canEdit = editableIntegrationIds.includes(integration.id);
+                          return (
+                            <Group key={integration.id} justify="space-between" wrap="nowrap" gap="sm">
+                              <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                                <IntegrationAvatar kind={integration.kind} size="sm" />
+                                <Stack gap={0} style={{ minWidth: 0 }}>
+                                  <Text fw={600} size="sm" truncate>
+                                    {integration.name}
+                                  </Text>
+                                  <Text size="xs" c="dimmed" truncate>
+                                    {integration.url}
+                                  </Text>
+                                </Stack>
+                              </Group>
+                              {canEdit ? (
+                                <Button
+                                  type="button"
+                                  variant="light"
+                                  leftSection={<IconPencil size={16} />}
+                                  onClick={() => beginEditingIntegration(integration.id)}
+                                  aria-label={t("item.edit.integration.editLabel", { name: integration.name })}
+                                >
+                                  {t("item.edit.integration.action")}
+                                </Button>
+                              ) : (
+                                <Text size="xs" c="dimmed" ta="end">
+                                  {t("item.edit.integration.fullAccessRequired")}
+                                </Text>
+                              )}
+                            </Group>
+                          );
+                        })}
+                      </>
+                    )}
+                    {displayedIntegrationId !== null && selectedIntegrations.length > 1 && (
+                      <Button
+                        type="button"
+                        variant="subtle"
+                        leftSection={<IconArrowLeft size={16} />}
+                        onClick={() => setActiveIntegrationId(null)}
+                        style={{ alignSelf: "start" }}
+                      >
+                        {t("common.action.previous")}
+                      </Button>
+                    )}
+                    {integrationIdsToRender.map((integrationId) => (
+                      <Box key={integrationId} hidden={displayedIntegrationId !== integrationId}>
+                        {IntegrationEditForm && (
+                          <IntegrationEditForm
+                            integrationId={integrationId}
+                            handleRef={getIntegrationEditRef(integrationId)}
+                            onSuccess={innerProps.onIntegrationSaved}
+                          />
+                        )}
+                      </Box>
+                    ))}
                   </Stack>
                 </Tabs.Panel>
               )}

packages/widgets/src/options.ts

@@ -52,6 +52,7 @@ interface SelectInput<TOptions extends readonly SelectOption[]> extends CommonIn
 > {
   options: TOptions;
   searchable?: boolean;
+  withPlaceholder?: boolean;
 }
 
 interface DynamicSelectInput extends CommonInput<DynamicSelectOption | null> {
@@ -107,6 +108,34 @@ interface SliderInput extends CommonInput<number> {
   step?: number;
 }
 
+export interface OptionTimezone {
+  id: string;
+  label: string;
+  timeZone: string;
+}
+
+interface TimezoneListInput extends CommonInput<OptionTimezone[]> {
+  maxValues?: number;
+  presets?: readonly OptionTimezone[];
+  timeZoneOptions: readonly { value: string; label: string }[];
+}
+
+export type DateTimeEventRecurrence = "none" | "yearly";
+
+export interface OptionDateTimeEvent {
+  id: string;
+  label: string;
+  targetUtc: string;
+  timeZone: string;
+  startUtc?: string;
+  recurrence: DateTimeEventRecurrence;
+}
+
+interface DateTimeEventListInput extends CommonInput<OptionDateTimeEvent[]> {
+  maxValues?: number;
+  timeZoneOptions: readonly { value: string; label: string }[];
+}
+
 export interface OptionLocation {
   name: string;
   latitude: number;
@@ -163,6 +192,7 @@ const optionsFactory = {
     options: input.options,
     searchable: input.searchable ?? false,
     withDescription: input.withDescription ?? false,
+    withPlaceholder: input.withPlaceholder ?? false,
   }),
   number: (input: NumberInput) => ({
     type: "number" as const,
@@ -192,6 +222,72 @@ const optionsFactory = {
       longitude: z.number(),
     }),
   }),
+  timezoneList: (input: TimezoneListInput) => {
+    const maxValues = input.maxValues ?? 6;
+    return {
+      type: "timezoneList" as const,
+      defaultValue: input.defaultValue ?? [],
+      maxValues,
+      presets: input.presets ?? [],
+      timeZoneOptions: input.timeZoneOptions,
+      withDescription: input.withDescription ?? false,
+      validate: z
+        .array(
+          z.object({
+            id: z.string().min(1),
+            label: z.string().trim().min(1).max(64),
+            timeZone: z.string().min(1),
+          }),
+        )
+        .max(maxValues)
+        .superRefine((values, ctx) => {
+          const ids = new Set<string>();
+          const timeZones = new Set<string>();
+
+          values.forEach((value, index) => {
+            if (ids.has(value.id)) {
+              ctx.addIssue({ code: "custom", path: [index, "id"], message: "Duplicate identifier" });
+            }
+            if (timeZones.has(value.timeZone)) {
+              ctx.addIssue({ code: "custom", path: [index, "timeZone"], message: "Duplicate timezone" });
+            }
+            ids.add(value.id);
+            timeZones.add(value.timeZone);
+          });
+        }),
+    };
+  },
+  dateTimeEventList: (input: DateTimeEventListInput) => {
+    const maxValues = input.maxValues ?? 20;
+    const dateTimeEventSchema = z.object({
+      id: z.string().min(1),
+      label: z.string().trim().min(1).max(64),
+      targetUtc: z.iso.datetime(),
+      timeZone: z.string().min(1),
+      startUtc: z.iso.datetime().optional(),
+      recurrence: z.enum(["none", "yearly"]),
+    });
+
+    return {
+      type: "dateTimeEventList" as const,
+      defaultValue: input.defaultValue ?? [],
+      maxValues,
+      timeZoneOptions: input.timeZoneOptions,
+      withDescription: input.withDescription ?? false,
+      validate: z
+        .array(dateTimeEventSchema)
+        .max(maxValues)
+        .superRefine((values, ctx) => {
+          const ids = new Set<string>();
+          values.forEach((value, index) => {
+            if (ids.has(value.id)) {
+              ctx.addIssue({ code: "custom", path: [index, "id"], message: "Duplicate identifier" });
+            }
+            ids.add(value.id);
+          });
+        }),
+    };
+  },
   multiText: (input?: CommonInput<string[]> & { validate?: ZodType }) => ({
     type: "multiText" as const,
     defaultValue: input?.defaultValue ?? [],

packages/widgets/src/refetch-intervals.ts

@@ -13,6 +13,8 @@ export const widgetQueryRefetchIntervals = [
   { queryKey: [["widget", "healthMonitoring"]], intervalSeconds: 10 },
   { queryKey: [["widget", "mediaServer", "getCurrentStreams"]], intervalSeconds: 10 },
   { queryKey: [["widget", "tracearr"]], intervalSeconds: 10 },
+  { queryKey: [["widget", "weather", "atLocation"]], intervalSeconds: 600 },
+  { queryKey: [["widget", "airQuality", "atLocation"]], intervalSeconds: 900 },
   { queryKey: [["widget", "immich", "getAlbum"]], intervalSeconds: null },
   { queryKey: [["widget", "immich", "getServerStats"]], intervalSeconds: null },
   { queryKey: [["widget", "immich", "getAlbums"]], intervalSeconds: null },

packages/widgets/src/stocks/component.spec.ts

@@ -33,7 +33,7 @@ describe("stock summary", () => {
 
 describe("stock layout", () => {
   it("keeps compact widgets focused on symbol and price", () => {
-    expect(getStockLayout(320, 100)).toMatchObject({
+    expect(getStockLayout(320, 100, true)).toMatchObject({
       showName: false,
       showChange: false,
       showRange: false,
@@ -42,12 +42,12 @@ describe("stock layout", () => {
   });
 
   it("reveals secondary data only when both axes have room", () => {
-    expect(getStockLayout(320, 160)).toMatchObject({
+    expect(getStockLayout(320, 160, true)).toMatchObject({
       showName: false,
       showChange: true,
       showRange: true,
     });
-    expect(getStockLayout(320, 220)).toMatchObject({
+    expect(getStockLayout(320, 220, true)).toMatchObject({
       showName: true,
       showChange: true,
       showRange: true,
@@ -56,7 +56,7 @@ describe("stock layout", () => {
   });
 
   it("exposes the complete summary when the widget is roomy", () => {
-    expect(getStockLayout(640, 360)).toEqual({
+    expect(getStockLayout(640, 360, true)).toEqual({
       showName: true,
       showChange: true,
       showRange: true,
@@ -64,4 +64,12 @@ describe("stock layout", () => {
       priceOrder: 1,
     });
   });
+
+  it("hides name, change, and range regardless of size when showDetails is off", () => {
+    expect(getStockLayout(640, 360, false)).toMatchObject({
+      showName: false,
+      showChange: false,
+      showRange: false,
+    });
+  });
 });

packages/widgets/src/stocks/component.tsx

@@ -43,11 +43,11 @@ export interface StockLayout {
   priceOrder: 1 | 2;
 }
 
-export function getStockLayout(width: number, height: number): StockLayout {
+export function getStockLayout(width: number, height: number, showDetails: boolean): StockLayout {
   return {
-    showName: width >= 300 && height >= 190,
-    showChange: width >= 260 && height >= 130,
-    showRange: width >= 220 && height >= 130,
+    showName: showDetails && width >= 300 && height >= 190,
+    showChange: showDetails && width >= 260 && height >= 130,
+    showRange: showDetails && width >= 220 && height >= 130,
     graphHeight: height >= 320 ? "75%" : height >= 220 ? "68%" : "48%",
     priceOrder: width >= 280 && height >= 120 ? 1 : 2,
   };
@@ -92,7 +92,7 @@ export default function StockPriceWidget({
   const stockValuesChangePercentage = summary.changePercentage === null ? null : round(summary.changePercentage);
   const stockGraphValues = summary.graphValues;
   const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6";
-  const layout = getStockLayout(width, height);
+  const layout = getStockLayout(width, height, options.showDetails);
   const formatValue = (value: number) => numberFormatter.format(round(value));
   const formatSignedValue = (value: number) => `${value > 0 ? "+" : ""}${formatValue(value)}`;
 

packages/widgets/src/stocks/index.ts

@@ -41,6 +41,10 @@ export const { definition, componentLoader } = createWidgetDefinition("stockPric
           label: (t) => t(`widget.stockPrice.option.timeInterval.option.${value}.label`),
         })),
       }),
+      showDetails: factory.switch({
+        defaultValue: true,
+        withDescription: true,
+      }),
     }));
   },
 }).withDynamicImport(() => import("./component"));

packages/widgets/src/timer/component.tsx

@@ -0,0 +1,628 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ActionIcon,
+  Alert,
+  Badge,
+  Group,
+  Paper,
+  Progress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Switch,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { IconBell, IconPlayerPause, IconPlayerPlay, IconRefresh, IconSettings, IconVolume } from "@tabler/icons-react";
+import { useTiks } from "@rexa-developer/tiks/react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import {
+  claimBrowserAlertOccurrence,
+  getBrowserNotificationPermission,
+  requestBrowserNotificationPermission,
+  showBrowserNotification,
+} from "../common/browser-alert";
+import { useLocalWidgetState } from "../common/use-local-widget-state";
+import { useWidgetNow } from "../common/use-widget-now";
+import type { WidgetComponentProps } from "../definition";
+import {
+  createTimerRuntime,
+  getRemainingMs,
+  isTimerRuntimeState,
+  migrateTimerRuntimeState,
+  pauseTimerRuntime,
+  reconcileTimerRuntime,
+  resetTimerRuntime,
+  setTimerAlertPreference,
+  startTimerRuntime,
+  synchronizeTimerRuntime,
+} from "./runtime";
+import type { TimerDurations, TimerRuntimeState } from "./runtime";
+
+const completionSoundCount = 5;
+const completionSoundIntervalMs = 300;
+
+export default function TimerWidget({
+  boardId,
+  displayMode,
+  height,
+  isEditMode,
+  itemId,
+  options,
+  width,
+}: WidgetComponentProps<"timer">) {
+  const now = useWidgetNow("second");
+  const t = useScopedI18n("widget.timer");
+  const reducedMotion = useReducedMotion();
+  const forcedColors = useMediaQuery("(forced-colors: active)") ?? false;
+  const { click: playResetSound, toggle: playRunningSound } = useTiks({
+    theme: "soft",
+    volume: 0.12,
+    respectReducedMotion: true,
+  });
+  const { notify: playCompletionSound } = useTiks({
+    theme: "glass",
+    volume: 0.12,
+    respectReducedMotion: true,
+  });
+  const durations = useMemo<TimerDurations>(
+    () => ({
+      timerMinutes: options.timerMinutes,
+      focusMinutes: options.focusMinutes,
+      shortBreakMinutes: options.shortBreakMinutes,
+      longBreakMinutes: options.longBreakMinutes,
+      sessionsBeforeLongBreak: options.sessionsBeforeLongBreak,
+      autoStartBreaks: options.autoStartBreaks,
+      autoStartFocus: options.autoStartFocus,
+    }),
+    [
+      options.autoStartBreaks,
+      options.autoStartFocus,
+      options.focusMinutes,
+      options.longBreakMinutes,
+      options.sessionsBeforeLongBreak,
+      options.shortBreakMinutes,
+      options.timerMinutes,
+    ],
+  );
+  const storagePrefix = boardId && itemId ? `homarr:timer:${boardId}:${itemId}` : undefined;
+  const [runtime, setRuntime] = useLocalWidgetState<TimerRuntimeState>({
+    key: storagePrefix ? `${storagePrefix}:state` : undefined,
+    version: 3,
+    defaultValue: () => createTimerRuntime(options.mode, durations),
+    validate: isTimerRuntimeState,
+    migrate: migrateTimerRuntimeState,
+  });
+  const [notificationPermission, setNotificationPermission] = useState(() => getBrowserNotificationPermission());
+  const [attentionFlash, setAttentionFlash] = useState(false);
+  const historyInitializedRef = useRef(false);
+  const handledHistoryIdRef = useRef<string | null>(null);
+  const completionSoundTimeoutRef = useRef<number | null>(null);
+  const attentionFlashTimeoutRef = useRef<number | null>(null);
+  const stopCompletionSoundSequence = useCallback(() => {
+    if (completionSoundTimeoutRef.current !== null) {
+      window.clearTimeout(completionSoundTimeoutRef.current);
+      completionSoundTimeoutRef.current = null;
+    }
+    if (attentionFlashTimeoutRef.current !== null) {
+      window.clearTimeout(attentionFlashTimeoutRef.current);
+      attentionFlashTimeoutRef.current = null;
+    }
+    setAttentionFlash(false);
+  }, []);
+  const flashAttention = useCallback(() => {
+    if (attentionFlashTimeoutRef.current !== null) {
+      window.clearTimeout(attentionFlashTimeoutRef.current);
+    }
+    setAttentionFlash(true);
+    attentionFlashTimeoutRef.current = window.setTimeout(() => {
+      attentionFlashTimeoutRef.current = null;
+      setAttentionFlash(false);
+    }, 180);
+  }, []);
+
+  useEffect(() => {
+    setRuntime((current) => synchronizeTimerRuntime(current, options.mode, durations));
+  }, [durations, options.mode, setRuntime]);
+
+  useEffect(() => {
+    if (!now) return;
+    setRuntime((current) => reconcileTimerRuntime(current, now.getTime(), durations));
+  }, [durations, now, setRuntime]);
+
+  useEffect(() => {
+    const latest = runtime.history.at(-1);
+    if (!historyInitializedRef.current) {
+      historyInitializedRef.current = true;
+      handledHistoryIdRef.current = latest?.id ?? null;
+      return;
+    }
+    if (!latest || handledHistoryIdRef.current === latest.id) return;
+    handledHistoryIdRef.current = latest.id;
+
+    const alertKey = storagePrefix ? `${storagePrefix}:alerted-completions` : undefined;
+    if (alertKey && !claimBrowserAlertOccurrence(alertKey, latest.id)) return;
+    if (runtime.alerts.notifications) {
+      showBrowserNotification({
+        title: t("alert.title"),
+        body: t("alert.completed", { phase: t(`phase.${latest.phase}`) }),
+        tag: latest.id,
+      });
+    }
+    if (!runtime.alerts.sound) return;
+    stopCompletionSoundSequence();
+    playCompletionSound();
+    if (!runtime.awaitingManualStart) return;
+    flashAttention();
+
+    let remainingSounds = completionSoundCount - 1;
+    const playNextSound = () => {
+      completionSoundTimeoutRef.current = window.setTimeout(() => {
+        completionSoundTimeoutRef.current = null;
+        playCompletionSound();
+        flashAttention();
+        remainingSounds -= 1;
+        if (remainingSounds > 0) playNextSound();
+      }, completionSoundIntervalMs);
+    };
+    playNextSound();
+  }, [
+    playCompletionSound,
+    flashAttention,
+    runtime.alerts.notifications,
+    runtime.alerts.sound,
+    runtime.awaitingManualStart,
+    runtime.history,
+    stopCompletionSoundSequence,
+    storagePrefix,
+    t,
+  ]);
+
+  useEffect(() => {
+    if (runtime.awaitingManualStart && runtime.alerts.sound) return;
+    stopCompletionSoundSequence();
+  }, [runtime.alerts.sound, runtime.awaitingManualStart, stopCompletionSoundSequence]);
+
+  useEffect(() => stopCompletionSoundSequence, [stopCompletionSoundSequence]);
+
+  if (!now) {
+    return (
+      <Stack h="100%" align="center" justify="center">
+        <Text c="dimmed">—</Text>
+      </Stack>
+    );
+  }
+
+  const nowMs = now.getTime();
+  const remainingMs = getRemainingMs(runtime, nowMs);
+  const phaseDurationMs = runtime.totalDurationMs;
+  let progress = 0;
+  if (phaseDurationMs > 0) {
+    progress = Math.min(100, Math.max(0, ((phaseDurationMs - remainingMs) / phaseDurationMs) * 100));
+  }
+  const controlSize = getTimerControlSize(width, height, displayMode);
+  const attentionStyle = getTimerAttentionStyle({
+    awaitingManualStart: runtime.awaitingManualStart,
+    flash: attentionFlash,
+    forcedColors,
+    reducedMotion,
+  });
+  const toggleRunning = () => {
+    if (runtime.alerts.sound) playRunningSound(runtime.status !== "running");
+    if (runtime.status === "running") {
+      setRuntime((current) => pauseTimerRuntime(current, nowMs));
+      return;
+    }
+    setRuntime((current) => startTimerRuntime(current, nowMs, durations));
+  };
+  const reset = () => {
+    if (runtime.alerts.sound) playResetSound();
+    setRuntime((current) => resetTimerRuntime(current, durations));
+  };
+  const setNotifications = async (enabled: boolean) => {
+    if (!enabled) {
+      setRuntime((current) => setTimerAlertPreference(current, "notifications", false));
+      return;
+    }
+    const permission = await requestBrowserNotificationPermission();
+    setNotificationPermission(permission);
+    if (permission === "granted") {
+      setRuntime((current) => setTimerAlertPreference(current, "notifications", true));
+    }
+  };
+  const setSound = (enabled: boolean) => {
+    playRunningSound(enabled);
+    setRuntime((current) => setTimerAlertPreference(current, "sound", enabled));
+  };
+
+  const shared = {
+    disabled: isEditMode,
+    attentionStyle,
+    controlSize,
+    height,
+    onReset: reset,
+    onToggleRunning: toggleRunning,
+    progress,
+    remainingMs,
+    runtime,
+    width,
+  };
+
+  if (displayMode !== "advanced") return <CompactTimer {...shared} />;
+
+  return (
+    <AdvancedTimer
+      {...shared}
+      durations={durations}
+      notificationPermission={notificationPermission}
+      onNotificationsChange={setNotifications}
+      onSoundChange={setSound}
+    />
+  );
+}
+
+type TimerControlSize = "sm" | "md" | "lg";
+
+interface TimerDisplayProps {
+  attentionStyle: CSSProperties;
+  controlSize: TimerControlSize;
+  disabled: boolean;
+  height: number;
+  onReset: () => void;
+  onToggleRunning: () => void;
+  progress: number;
+  remainingMs: number;
+  runtime: TimerRuntimeState;
+  width: number;
+}
+
+const CompactTimer = ({
+  attentionStyle,
+  controlSize,
+  disabled,
+  height,
+  onReset,
+  onToggleRunning,
+  progress,
+  remainingMs,
+  runtime,
+  width,
+}: TimerDisplayProps) => {
+  const t = useScopedI18n("widget.timer");
+  const phaseLabel = getTimerPhaseLabel(runtime, t);
+  const showCompletedFocus = runtime.mode === "pomodoro" && width >= 320;
+  const showProgress = height >= 125;
+  let phaseBadgeMaxWidth = "calc(100% - var(--mantine-spacing-md))";
+  if (showCompletedFocus) phaseBadgeMaxWidth = "60%";
+  return (
+    <Stack
+      h="100%"
+      w="100%"
+      align="center"
+      justify="center"
+      gap="xs"
+      p="xs"
+      style={{ ...attentionStyle, overflow: "hidden", position: "relative" }}
+    >
+      <Badge
+        variant="light"
+        size="xs"
+        h="auto"
+        maw={phaseBadgeMaxWidth}
+        py="calc(var(--mantine-spacing-xs) / 2)"
+        aria-live="polite"
+        style={{
+          insetInlineStart: "var(--mantine-spacing-xs)",
+          position: "absolute",
+          top: "var(--mantine-spacing-xs)",
+        }}
+        styles={{
+          label: {
+            lineHeight: "var(--mantine-line-height-xs)",
+            overflow: "visible",
+            textOverflow: "clip",
+            whiteSpace: "normal",
+          },
+        }}
+      >
+        {phaseLabel}
+      </Badge>
+      {showCompletedFocus && (
+        <Text
+          size="xs"
+          c="dimmed"
+          style={{
+            insetInlineEnd: "var(--mantine-spacing-xs)",
+            position: "absolute",
+            top: "var(--mantine-spacing-xs)",
+          }}
+        >
+          {t("compact.completedFocus", { count: runtime.completedFocusSessions })}
+        </Text>
+      )}
+      <Text component="time" fz="xl" fw={700} lh={1} style={{ fontVariantNumeric: "tabular-nums" }}>
+        {formatTimerDuration(remainingMs)}
+      </Text>
+      {showProgress && (
+        <Progress w="100%" value={progress} aria-label={t("progress", { progress: Math.round(progress) })} />
+      )}
+      <TimerControls
+        controlSize={controlSize}
+        disabled={disabled}
+        isRunning={runtime.status === "running"}
+        onReset={onReset}
+        onToggleRunning={onToggleRunning}
+      />
+    </Stack>
+  );
+};
+
+interface AdvancedTimerProps extends TimerDisplayProps {
+  durations: TimerDurations;
+  notificationPermission: ReturnType<typeof getBrowserNotificationPermission>;
+  onNotificationsChange: (enabled: boolean) => Promise<void>;
+  onSoundChange: (enabled: boolean) => void;
+}
+
+const AdvancedTimer = ({
+  attentionStyle,
+  controlSize,
+  disabled,
+  durations,
+  notificationPermission,
+  onNotificationsChange,
+  onReset,
+  onSoundChange,
+  onToggleRunning,
+  progress,
+  remainingMs,
+  runtime,
+}: AdvancedTimerProps) => {
+  const t = useScopedI18n("widget.timer");
+  const phaseLabel = getTimerPhaseLabel(runtime, t);
+  return (
+    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
+      <Stack gap="md" p="md">
+        <Paper
+          withBorder
+          p="lg"
+          style={{
+            ...attentionStyle,
+            background:
+              "linear-gradient(145deg, var(--mantine-primary-color-light), var(--mantine-color-secondaryColor-light))",
+          }}
+        >
+          <Stack align="center" gap="sm">
+            <Badge variant="light" size="sm" aria-live="polite">
+              {phaseLabel}
+            </Badge>
+            <Text
+              component="time"
+              fz="var(--mantine-h1-font-size)"
+              fw={700}
+              lh={1}
+              style={{ fontVariantNumeric: "tabular-nums" }}
+            >
+              {formatTimerDuration(remainingMs)}
+            </Text>
+            <Progress w="100%" value={progress} aria-label={t("progress", { progress: Math.round(progress) })} />
+            <TimerControls
+              controlSize={controlSize}
+              disabled={disabled}
+              isRunning={runtime.status === "running"}
+              onReset={onReset}
+              onToggleRunning={onToggleRunning}
+            />
+          </Stack>
+        </Paper>
+
+        {runtime.mode === "pomodoro" && <PomodoroSequence runtime={runtime} durations={durations} />}
+
+        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+          <Paper withBorder p="md">
+            <Group gap="xs" mb="sm">
+              <IconSettings size={18} aria-hidden />
+              <Text fw={600}>{t("advanced.settings")}</Text>
+            </Group>
+            <SettingsSummary mode={runtime.mode} durations={durations} />
+            <Text size="xs" c="dimmed" mt="sm">
+              {t("advanced.settingsHint")}
+            </Text>
+          </Paper>
+
+          <Paper withBorder p="md">
+            <Group gap="xs" mb="sm">
+              <IconBell size={18} aria-hidden />
+              <Text fw={600}>{t("advanced.localAlerts")}</Text>
+            </Group>
+            <Stack gap="sm">
+              <Switch
+                checked={runtime.alerts.notifications && notificationPermission === "granted"}
+                disabled={disabled || notificationPermission === "unsupported" || notificationPermission === "denied"}
+                label={t("advanced.notifications")}
+                onChange={(event) => void onNotificationsChange(event.currentTarget.checked)}
+              />
+              <Switch
+                checked={runtime.alerts.sound}
+                disabled={disabled}
+                label={t("advanced.sound")}
+                onChange={(event) => onSoundChange(event.currentTarget.checked)}
+                thumbIcon={<IconVolume size={12} />}
+              />
+              <Text size="xs" c="dimmed">
+                {t("advanced.localAlertsHint")}
+              </Text>
+              {notificationPermission === "denied" && <Alert color="yellow">{t("advanced.notificationsDenied")}</Alert>}
+            </Stack>
+          </Paper>
+        </SimpleGrid>
+      </Stack>
+    </ScrollArea>
+  );
+};
+
+const TimerControls = ({
+  controlSize,
+  disabled,
+  isRunning,
+  onReset,
+  onToggleRunning,
+}: {
+  controlSize: TimerControlSize;
+  disabled: boolean;
+  isRunning: boolean;
+  onReset: () => void;
+  onToggleRunning: () => void;
+}) => {
+  const t = useScopedI18n("widget.timer");
+  const toggleLabel = isRunning ? t("action.pause") : t("action.start");
+  return (
+    <Group gap="xs" wrap="nowrap">
+      <Tooltip label={toggleLabel}>
+        <ActionIcon
+          size={controlSize}
+          variant="filled"
+          disabled={disabled}
+          onClick={onToggleRunning}
+          aria-label={toggleLabel}
+        >
+          {isRunning ? <IconPlayerPause /> : <IconPlayerPlay />}
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={t("action.reset")}>
+        <ActionIcon
+          size={controlSize}
+          variant="light"
+          disabled={disabled}
+          onClick={onReset}
+          aria-label={t("action.reset")}
+        >
+          <IconRefresh />
+        </ActionIcon>
+      </Tooltip>
+    </Group>
+  );
+};
+
+type ScopedTimerTranslator = ReturnType<typeof useScopedI18n<"widget.timer">>;
+
+const getTimerPhaseLabel = (runtime: TimerRuntimeState, t: ScopedTimerTranslator) => {
+  const phase = t(`phase.${runtime.phase}`);
+  if (!runtime.awaitingManualStart) return phase;
+  if (runtime.mode === "timer") return t("attention.timerComplete");
+  return t("attention.phaseReady", { phase });
+};
+
+const getTimerControlSize = (
+  width: number,
+  height: number,
+  displayMode: "compact" | "advanced" | undefined,
+): TimerControlSize => {
+  if (displayMode === "advanced") return "lg";
+  if (width < 150 || height < 115) return "sm";
+  if (width < 220 || height < 150) return "md";
+  return "lg";
+};
+
+const getTimerAttentionStyle = ({
+  awaitingManualStart,
+  flash,
+  forcedColors,
+  reducedMotion,
+}: {
+  awaitingManualStart: boolean;
+  flash: boolean;
+  forcedColors: boolean;
+  reducedMotion: boolean;
+}): CSSProperties => {
+  if (forcedColors && awaitingManualStart) {
+    return {
+      outline: "0.125rem solid Highlight",
+      outlineOffset: "0.125rem",
+    };
+  }
+  if (reducedMotion && awaitingManualStart) {
+    return {
+      boxShadow:
+        "inset 0 0 1rem 0.125rem color-mix(in srgb, var(--mantine-color-secondaryColor-filled) 45%, transparent)",
+    };
+  }
+  if (!flash) {
+    return {
+      boxShadow: "none",
+      transition: "box-shadow 0.12s ease-out",
+    };
+  }
+  return {
+    boxShadow:
+      "inset 0 0 1rem 0.125rem color-mix(in srgb, var(--mantine-color-secondaryColor-filled) 45%, transparent), 0 0 3rem 0.875rem color-mix(in srgb, var(--mantine-color-secondaryColor-filled) 40%, transparent)",
+    transition: "box-shadow 0.12s ease-out",
+  };
+};
+
+const PomodoroSequence = ({ runtime, durations }: { runtime: TimerRuntimeState; durations: TimerDurations }) => {
+  const t = useScopedI18n("widget.timer");
+  return (
+    <Paper withBorder p="md">
+      <Text fw={600} mb="xs">
+        {t("advanced.sequence")}
+      </Text>
+      <Group gap="xs" wrap="wrap">
+        {Array.from({ length: durations.sessionsBeforeLongBreak }, (_, index) => (
+          <Group key={index} gap={4} wrap="nowrap">
+            <Badge variant={index < runtime.completedFocusSessions ? "filled" : "light"}>
+              {t("advanced.focusSession", { session: index + 1 })}
+            </Badge>
+            <Text size="xs" c="dimmed">
+              {t("phase.shortBreak")}
+            </Text>
+          </Group>
+        ))}
+        <Badge color="violet" variant={runtime.phase === "longBreak" ? "filled" : "light"}>
+          {t("phase.longBreak")}
+        </Badge>
+      </Group>
+    </Paper>
+  );
+};
+
+const SettingsSummary = ({ mode, durations }: { mode: TimerRuntimeState["mode"]; durations: TimerDurations }) => {
+  const t = useScopedI18n("widget.timer");
+  if (mode === "timer") return <SettingLine label={t("option.timerMinutes.label")} value={durations.timerMinutes} />;
+  return (
+    <Stack gap={5}>
+      <SettingLine label={t("option.focusMinutes.label")} value={durations.focusMinutes} />
+      <SettingLine label={t("option.shortBreakMinutes.label")} value={durations.shortBreakMinutes} />
+      <SettingLine label={t("option.longBreakMinutes.label")} value={durations.longBreakMinutes} />
+      <SettingLine label={t("option.sessionsBeforeLongBreak.label")} value={durations.sessionsBeforeLongBreak} />
+    </Stack>
+  );
+};
+
+const SettingLine = ({ label, value }: { label: string; value: number }) => (
+  <Group justify="space-between" gap="md" wrap="nowrap">
+    <Text size="sm" c="dimmed">
+      {label}
+    </Text>
+    <Text size="sm" fw={600}>
+      {value}
+    </Text>
+  </Group>
+);
+
+export const formatTimerDuration = (durationMs: number): string => {
+  const totalSeconds = Math.max(0, Math.ceil(durationMs / 1_000));
+  const hours = Math.floor(totalSeconds / 3_600);
+  const minutes = Math.floor((totalSeconds % 3_600) / 60);
+  const seconds = totalSeconds % 60;
+  const minuteText = String(minutes).padStart(2, "0");
+  const secondText = String(seconds).padStart(2, "0");
+  if (hours === 0) return `${minuteText}:${secondText}`;
+  return `${String(hours).padStart(2, "0")}:${minuteText}:${secondText}`;
+};