chore(release): 1.73.0 [skip ci]

* test(navidrome): hoist album fixture helper

* test(navidrome): address coderabbit cleanup feedback

.cursor/rules/mantine-datatable-migration.mdc

@@ -0,0 +1,622 @@
+# Migrating Tables from mantine-react-table to mantine-datatable
+
+This document captures every pattern, fix, and decision from the downloads widget rework (PR #6430). Use it as a playbook when porting other tables.
+
+## Migration Candidates
+
+Current `mantine-react-table` consumers that could be migrated:
+
+**Widgets (in `packages/widgets/`):**
+- `docker/component.tsx` — Docker container table
+- `media-server/component.tsx` — Media server sessions
+
+**Admin pages (in `apps/nextjs/src/app/[locale]/manage/`):**
+- `tools/docker/docker-table.tsx`
+- `tools/tasks/_components/tasks-table.tsx`
+- `tools/api/components/api-keys.tsx`
+- `users/_components/user-list.tsx`
+- `users/invites/_components/invite-list.tsx`
+- `tools/kubernetes/` — 8 Kubernetes resource tables
+
+**Modals:**
+- `packages/modals-collection/src/search-engines/request-media-modal.tsx`
+
+**Shared hook to remove once all migrated:**
+- `packages/ui/src/hooks/use-translated-mantine-react-table.ts`
+
+---
+
+## 1. Core Migration: mantine-react-table → mantine-datatable
+
+### Import changes
+
+```typescript
+// BEFORE
+import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
+import type { MRT_ColumnDef } from "mantine-react-table";
+
+// AFTER
+import { DataTable, useDataTableColumns } from "mantine-datatable";
+import type { DataTableColumn, DataTableSortStatus } from "mantine-datatable";
+```
+
+### Column definition shape
+
+```typescript
+// BEFORE (MRT)
+const columns: MRT_ColumnDef<MyRow>[] = [
+  {
+    accessorKey: "name",
+    header: "Name",
+    size: 200,
+    enableSorting: true,
+    Cell: ({ row }) => <Text>{row.original.name}</Text>,
+  },
+];
+
+// AFTER (mantine-datatable)
+const columns: DataTableColumn<MyRow>[] = [
+  {
+    accessor: "name",           // not accessorKey
+    title: "Name",              // not header
+    width: 200,                 // not size
+    sortable: true,             // not enableSorting
+    render: (record) => <Text>{record.name}</Text>,  // not Cell
+  },
+];
+```
+
+Key differences:
+- `accessorKey` → `accessor`
+- `header` → `title`
+- `size` → `width`
+- `Cell: ({ row }) =>` → `render: (record) =>`
+- `enableSorting` → `sortable`
+- `enableColumnActions` → does not exist (no column action menus)
+- `mantineTableBodyCellProps` → `cellsStyle` in `defaultColumnProps`
+
+### Table component
+
+```typescript
+// BEFORE
+const table = useTranslatedMantineReactTable({ columns, data, ... });
+return <MantineReactTable table={table} />;
+
+// AFTER
+return (
+  <DataTable
+    records={data}
+    columns={columns}
+    sortStatus={sortStatus}
+    onSortStatusChange={setSortStatus}
+    ...
+  />
+);
+```
+
+### Sorting is manual
+
+mantine-datatable does NOT sort for you. You must sort the data yourself:
+
+```typescript
+const [sortStatus, setSortStatus] = useState<DataTableSortStatus<MyRow>>({
+  columnAccessor: "name",
+  direction: "asc",
+});
+
+const sortedData = useMemo(() => {
+  const mult = sortStatus.direction === "desc" ? -1 : 1;
+  return [...data].toSorted((a, b) => {
+    const aVal = a[sortStatus.columnAccessor];
+    const bVal = b[sortStatus.columnAccessor];
+    if (typeof aVal === "string") return aVal.localeCompare(bVal as string) * mult;
+    return ((aVal as number) - (bVal as number)) * mult;
+  });
+}, [data, sortStatus]);
+
+// Pass sortedData to records, not data
+<DataTable records={sortedData} sortStatus={sortStatus} onSortStatusChange={setSortStatus} />
+```
+
+---
+
+## 2. Making Tables Transparent (Widget Context)
+
+Widgets sit inside board cards that have user-controlled opacity. The table must be fully transparent so the card background shows through. mantine-datatable defaults to `var(--mantine-color-body)` which is opaque.
+
+Create a CSS file alongside the component:
+
+```css
+/* styles.css */
+.my-table,
+.my-table .mantine-datatable-table,
+.my-table .mantine-datatable-table thead,
+.my-table .mantine-datatable-table tbody,
+.my-table .mantine-datatable-table tfoot,
+.my-table th,
+.my-table td {
+  background-color: transparent !important;
+}
+
+.my-table .mantine-datatable-table tr {
+  background-color: transparent;
+}
+
+/* Hover: translucent instead of opaque */
+.my-table .mantine-datatable-table tbody tr:hover {
+  background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
+}
+
+/* Headers: frosted glass effect */
+.my-table th {
+  white-space: nowrap;
+  background-color: color-mix(in srgb, var(--mantine-color-body) 60%, transparent) !important;
+  backdrop-filter: blur(8px);
+}
+
+/* Cell overflow */
+.my-table td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Hide sort icon until hover */
+.my-table .mantine-datatable-header-cell-sortable-icon {
+  opacity: 0;
+  transition: opacity 150ms;
+}
+.my-table th:hover .mantine-datatable-header-cell-sortable-icon {
+  opacity: 1;
+}
+
+/* Row expansion area */
+.my-table .mantine-datatable-row-expansion-cell {
+  background-color: color-mix(in srgb, var(--mantine-color-body) 40%, transparent) !important;
+}
+```
+
+Import it: `import "./styles.css";` and apply via `className="my-table"`.
+
+---
+
+## 3. Responsive Column Visibility
+
+Use a lookup table of width breakpoints instead of media queries. The widget receives `width` as a prop.
+
+```typescript
+interface SizeConfig {
+  fontSize: "xs" | "sm";
+  iconSize: number;
+  cellPadding: number;
+  showSpeedColumns: boolean;
+  showTimeColumn: boolean;
+  showStateColumn: boolean;
+}
+
+const SIZE_BREAKPOINTS: { maxWidth: number; config: SizeConfig }[] = [
+  { maxWidth: 300, config: { fontSize: "xs", iconSize: 12, cellPadding: 2, showSpeedColumns: false, showTimeColumn: false, showStateColumn: false } },
+  { maxWidth: 500, config: { fontSize: "xs", iconSize: 14, cellPadding: 4, showSpeedColumns: false, showTimeColumn: true, showStateColumn: false } },
+];
+
+const DEFAULT_SIZE_CONFIG: SizeConfig = { fontSize: "sm", iconSize: 14, cellPadding: 4, showSpeedColumns: true, showTimeColumn: true, showStateColumn: true };
+
+function getSizeConfig(width: number): SizeConfig {
+  for (const { maxWidth, config } of SIZE_BREAKPOINTS) {
+    if (width < maxWidth) return config;
+  }
+  return DEFAULT_SIZE_CONFIG;
+}
+
+// Usage: memoize it
+const size = useMemo(() => getSizeConfig(width), [width]);
+```
+
+Then use a visibility check lookup table for columns:
+
+```typescript
+const columnVisibilityChecks: Partial<Record<string, (ctx: ColumnContext) => boolean>> = {
+  upSpeed: (ctx) => ctx.hasTorrents && ctx.size.showSpeedColumns,
+  downSpeed: (ctx) => ctx.size.showSpeedColumns,
+  time: (ctx) => ctx.size.showTimeColumn,
+  state: (ctx) => ctx.size.showStateColumn,
+};
+
+function shouldIncludeColumn(accessor: string, ctx: ColumnContext): boolean {
+  if (!ctx.optionsColumnSet.has(accessor)) return false;
+  const check = columnVisibilityChecks[accessor];
+  if (check && !check(ctx)) return false;
+  return true;
+}
+```
+
+---
+
+## 4. Column Persistence (Drag/Resize → Server)
+
+`useDataTableColumns` stores column order and widths in localStorage by default. For widgets, this must persist server-side so it works across devices.
+
+### Hidden widget options
+
+In `index.ts`, add hidden text options:
+
+```typescript
+columnOrder: factory.text({ defaultValue: "" }),
+columnWidths: factory.text({ defaultValue: "" }),
+```
+
+With visibility override:
+
+```typescript
+{
+  columnOrder: { shouldHide: () => true },
+  columnWidths: { shouldHide: () => true },
+}
+```
+
+### Translation keys required
+
+Even hidden options need translation keys or the translation test fails:
+
+```json
+"widget.mywidget.option.columnOrder.label": "Column order",
+"widget.mywidget.option.columnWidths.label": "Column widths"
+```
+
+### Old-import mappings
+
+Add to `packages/old-import/src/widgets/options.ts`:
+
+```typescript
+columnOrder: () => undefined,
+columnWidths: () => undefined,
+```
+
+### Dynamic storeKey
+
+Use a key that includes `itemId` and sorted column names. This prevents cross-widget localStorage bleeding:
+
+```typescript
+const storeKey = `mytable-${itemId ?? "preview"}-${[...options.columns].toSorted().join(",")}`;
+```
+
+### Hydration from server → localStorage
+
+On mount, seed `useDataTableColumns` with server-persisted values. Use a `hydrated` ref to prevent the persist effect from immediately writing defaults back:
+
+```typescript
+const { effectiveColumns, columnsOrder, columnsWidth, setColumnsOrder, setMultipleColumnWidths } =
+  useDataTableColumns<MyRow>({ key: storeKey, columns });
+
+const lastStoreKey = useRef(storeKey);
+const hydrated = useRef(false);
+
+useEffect(() => {
+  if (lastStoreKey.current !== storeKey) {
+    lastStoreKey.current = storeKey;
+    hydrated.current = false;
+  }
+  if (hydrated.current) return;
+  if (savedOrder.length > 0) setColumnsOrder(savedOrder);
+  if (Object.keys(savedWidths).length > 0) {
+    setMultipleColumnWidths(
+      Object.entries(savedWidths).map(([accessor, w]) => ({ accessor, width: w })),
+    );
+  }
+  requestAnimationFrame(() => { hydrated.current = true; });
+}, [storeKey, savedOrder, savedWidths, setColumnsOrder, setMultipleColumnWidths]);
+```
+
+### Persist localStorage → server
+
+Watch for changes and write back:
+
+```typescript
+const prevOrder = useRef(columnsOrder);
+const prevWidths = useRef(columnsWidth);
+
+useEffect(() => {
+  if (!hydrated.current) return;
+  const orderChanged = JSON.stringify(columnsOrder) !== JSON.stringify(prevOrder.current);
+  const widthsChanged = JSON.stringify(columnsWidth) !== JSON.stringify(prevWidths.current);
+  prevOrder.current = columnsOrder;
+  prevWidths.current = columnsWidth;
+
+  if (!orderChanged && !widthsChanged) return;
+
+  if (orderChanged) persistOption({ columnOrder: JSON.stringify(columnsOrder) });
+  if (widthsChanged) {
+    const widthMap: Record<string, number> = {};
+    for (const entry of columnsWidth) {
+      const key = Object.keys(entry)[0];
+      if (!key) continue;
+      const w = entry[key as keyof typeof entry];
+      if (typeof w === "number") widthMap[key] = w;
+      else if (typeof w === "string" && w.endsWith("px")) widthMap[key] = parseInt(w, 10);
+    }
+    persistOption({ columnWidths: JSON.stringify(widthMap) });
+  }
+}, [columnsOrder, columnsWidth, persistOption]);
+```
+
+The `persistOption` helper calls both `setOptions` (local state) and `saveItemOptions` (server mutation).
+
+---
+
+## 5. Context Menu (Right-Click)
+
+Do NOT install `mantine-contextmenu`. Use Mantine's `Menu` + `Portal` directly:
+
+```typescript
+interface ContextMenuState {
+  x: number;
+  y: number;
+  item: MyRow;
+}
+
+const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+
+const handleContextMenu = useCallback(
+  ({ record, event }: { record: MyRow; event: React.MouseEvent }) => {
+    event.preventDefault();
+    setContextMenu({ x: event.clientX, y: event.clientY, item: record });
+  },
+  [],
+);
+
+// On DataTable:
+<DataTable onRowContextMenu={handleContextMenu} />
+
+// Render:
+{contextMenu && <RowContextMenu state={contextMenu} onClose={closeContextMenu} />}
+```
+
+The menu component uses `Portal` for correct z-index:
+
+```tsx
+function RowContextMenu({ state, onClose }: { state: ContextMenuState; onClose: () => void }) {
+  return (
+    <Portal>
+      <Menu opened onClose={onClose} closeOnItemClick={false} position="right-start" offset={0}>
+        <Menu.Target>
+          <Box style={{ position: "fixed", left: state.x, top: state.y, width: 0, height: 0 }} />
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item onClick={() => { /* action */ onClose(); }}>Action</Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </Portal>
+  );
+}
+```
+
+**Key fix:** Use `closeOnItemClick={false}` if any menu item needs a two-step confirmation (like delete → confirm). Close the menu on scroll: `onScroll={() => { if (contextMenu) closeContextMenu(); }}`.
+
+---
+
+## 6. Row Expansion
+
+```typescript
+<DataTable
+  rowExpansion={{
+    trigger: "click",
+    allowMultiple: true,
+    collapseProps: {
+      transitionDuration: 200,
+      animateOpacity: true,
+      transitionTimingFunction: "ease-out",
+    },
+    content: ({ record, collapse }) => <ExpandedRow item={record} collapse={collapse} />,
+  }}
+/>
+```
+
+**Critical:** Do NOT set `onRowClick` when using `rowExpansion` with `trigger: "click"`. They conflict and the expansion won't work.
+
+---
+
+## 7. Common Pitfalls & Fixes
+
+### Status indicator dots
+
+Don't use `<Badge variant="dot" />` without children — it renders a pill with empty space. Use a plain `Box`:
+
+```tsx
+<Box
+  w={8}
+  h={8}
+  style={{
+    borderRadius: "50%",
+    backgroundColor: `var(--mantine-color-${color}-filled)`,
+    flexShrink: 0,
+  }}
+/>
+```
+
+### Tooltip overflow on long text columns
+
+When a column has `ellipsis: true`, the tooltip target element can still extend beyond the cell bounds if inner elements don't clip. Fix:
+
+```tsx
+<Tooltip position="bottom-start" ...>
+  <Group style={{ overflow: "hidden" }}>
+    ...
+  </Group>
+</Tooltip>
+```
+
+Use `position="bottom-start"` instead of `position="right"` so the tooltip never escapes the widget horizontally.
+
+### Dark mode tooltips
+
+Mantine tooltips default to the theme's tooltip color which may be white in light mode and stay white in dark mode. Always set `color="dark"` on informational tooltips inside widgets.
+
+### Division by zero
+
+Guard all ratio calculations:
+
+```typescript
+if (item.size > 0) ratio = item.sent / item.size;
+if (totalDown > 0) ratio = totalUp / totalDown;
+```
+
+### Composite idAccessor
+
+When rows can come from multiple integrations, IDs may collide. Use a composite key:
+
+```typescript
+idAccessor={(record) => `${record.integration.id}:${record.id}`}
+```
+
+### JSON option parsing
+
+Always wrap in try/catch:
+
+```typescript
+function parseJsonOption<T>(value: string | undefined, fallback: T): T {
+  if (!value) return fallback;
+  try { return JSON.parse(value) as T; }
+  catch { return fallback; }
+}
+```
+
+### Clipboard API
+
+`navigator.clipboard.writeText()` can throw in non-HTTPS contexts. Always catch:
+
+```typescript
+void navigator.clipboard.writeText(text).catch(() => {});
+```
+
+### Sync sortStatus with widget options
+
+If the widget has configurable default sort, sync it:
+
+```typescript
+useEffect(() => {
+  setSortStatus({ columnAccessor: options.defaultSort, direction: defaultSortDirection });
+}, [options.defaultSort, defaultSortDirection]);
+```
+
+---
+
+## 8. Accessibility
+
+- All `ActionIcon` components need `aria-label`
+- Filter toggles (client badges, status badges) need `aria-pressed={isActive}`
+- `textSelectionDisabled` on DataTable prevents accidental text selection during drag/resize
+
+---
+
+## 9. Error Handling
+
+- Every mutation needs an `onError` callback with `showErrorNotification`
+- The `saveItemOptions` mutation (column persistence) also needs `onError`
+- Check `isError` on the main query and show a fallback UI
+- Use a shared `mutationOptions` object to avoid repeating `onSettled`/`onError`:
+
+```typescript
+const mutationOptions = {
+  onSettled: () => void utils.myQuery.invalidate(),
+  onError: () => showErrorNotification({ title: t("errors.actionFailed"), message: t("errors.actionFailedMessage") }),
+};
+```
+
+---
+
+## 10. i18n
+
+- No hardcoded strings. Every user-visible string goes through `useScopedI18n`
+- Column titles: `t("items.{accessor}.columnTitle")`
+- Detail labels: `t("items.{accessor}.detailsTitle")`
+- States: `t("states.{state}")`
+- Actions: `t("actions.{action}")`
+- Errors: `t("errors.{errorKey}")`
+- Hidden options still need `.label` translation keys
+
+---
+
+## 11. Edit Mode
+
+Disable pointer events on the table during edit mode to prevent conflicts with the board's drag-and-drop:
+
+```typescript
+let tablePointerEvents: React.CSSProperties["pointerEvents"];
+if (isEditMode) tablePointerEvents = "none";
+
+let rowContextMenuHandler = handleContextMenu;
+if (isEditMode) rowContextMenuHandler = undefined;
+
+<DataTable style={{ pointerEvents: tablePointerEvents }} />
+```
+
+---
+
+## 12. DataTable Props Reference (Commonly Used)
+
+```typescript
+<DataTable
+  records={sortedData}
+  columns={effectiveColumns}
+  storeColumnsKey={storeKey}
+  withTableBorder={false}
+  borderRadius={0}
+  highlightOnHover
+  striped="odd"
+  stripedColor={{ dark: "dark.7", light: "gray.0" }}
+  highlightOnHoverColor={{ dark: "dark.5", light: "gray.1" }}
+  verticalAlign="center"
+  fetching={isFetching && data.length === 0}
+  loaderBackgroundBlur={2}
+  fz={size.fontSize}
+  textSelectionDisabled
+  sortStatus={sortStatus}
+  onSortStatusChange={setSortStatus}
+  noRecordsText={t("errors.noItems")}
+  idAccessor={(record) => record.uniqueKey}
+  height="100%"
+  className="my-table"
+  defaultColumnProps={{
+    noWrap: true,
+    draggable: true,
+    resizable: true,
+    cellsStyle: () => ({ padding: `${size.cellPadding}px 8px` }),
+  }}
+  scrollAreaProps={{ type: "auto", scrollbarSize: 6 }}
+  rowBackgroundColor={(record) => conditionalBgMap[record.state]}
+  onRowContextMenu={handleContextMenu}
+  rowExpansion={{ ... }}
+  onScroll={() => { if (contextMenu) closeContextMenu(); }}
+/>
+```
+
+---
+
+## 13. Layout Stability
+
+- Don't use `table-layout: fixed` — it fights mantine-datatable's resize logic
+- Give non-name columns explicit `width` values so only the name column flexes
+- Use `ellipsis: true` on the name column — it handles `text-overflow: ellipsis` internally
+- Names should truncate at the cell boundary, not a character count, so the layout is stable regardless of content length
+- `flexShrink: 0` on badges/icons prevents them from being squeezed by long names
+
+---
+
+## 14. Checklist for Each Migration
+
+1. Replace imports (`mantine-react-table` → `mantine-datatable`)
+2. Convert column definitions (`accessorKey` → `accessor`, `header` → `title`, `Cell` → `render`, etc.)
+3. Implement manual sorting with `useState` + `useMemo`
+4. Add CSS file for transparent backgrounds (if widget context)
+5. Add responsive column visibility (if widget context)
+6. Add hidden options + hydration logic (if column persistence needed)
+7. Add old-import mappings for new options
+8. Add translation keys (including hidden option labels)
+9. Add context menu if row actions exist
+10. Add row expansion if detail view exists
+11. Add error handling on all mutations
+12. Add accessibility attributes
+13. Test at multiple widget widths
+14. Update docs in `apps/docs/docs/widgets/` if applicable
+15. Run `pnpm turbo typecheck` — catches old-import mismatches
+16. Run translation spec — catches missing keys

.github/renovate.json5

@@ -1,6 +1,6 @@
 {
   $schema: "https://docs.renovatebot.com/renovate-schema.json",
-  extends: ["config:recommended"],
+  extends: ["config:recommended", ":dependencyDashboardApproval"],
   packageRules: [
     {
       matchPackageNames: ["^@homarr/"],
@@ -47,7 +47,7 @@
   rangeStrategy: "bump",
   automerge: false,
   baseBranchPatterns: ["dev"],
-  dependencyDashboard: false,
+  dependencyDashboard: true,
   // prevent special characters in branch names (otherwise git errors occur on windows)
   branchNameStrict: true,
 }

CHANGELOG.md

@@ -1,3 +1,5 @@
+## [1.73.0](https://github.com/homarr-labs/homarr/compare/v1.72.0...v1.73.0) (2026-07-31)
+
 ## [1.72.0](https://github.com/homarr-labs/homarr/compare/v1.71.0...v1.72.0) (2026-07-24)
 
 ## [1.71.0](https://github.com/homarr-labs/homarr/compare/v1.70.0...v1.71.0) (2026-07-17)

apps/docs/docs/advanced/environment-variables/index.mdx

@@ -55,9 +55,9 @@ A random secret can be generated by using the following command: `openssl rand -
 
 | Environment Variable     | Description | Possible values | Default |
 | ------------------------ | ----------- | --------------- | ------- |
-| ``DOCKER_HOSTNAMES``          | Comma seperated list of hostnames to connect to | For example `localhost,docker.example.com` | - |
-| ``DOCKER_PORTS``             | Comma seperated list of ports to connect to | For example `2375,2376` | - |
-| ``DOCKER_SOCKET_PATHS``             | Comma seperated list of paths to sockets | For example `/var/run/docker.sock,/run/user/1000/podman/podman.sock` | - |
+| ``DOCKER_HOSTNAMES``          | Comma-separated list of hostnames to connect to | For example `localhost,docker.example.com` | - |
+| ``DOCKER_PORTS``             | Comma-separated list of ports to connect to | For example `2375,2376` | - |
+| ``DOCKER_SOCKET_PATHS``             | Comma-separated list of mounted Docker-compatible socket paths. See the [Docker and Podman integration guide](/docs/integrations/docker) | For example `/var/run/docker.sock,/var/run/podman.sock` | - |
 
 ## Database
 | Environment Variable     | Description | Possible values | Default |

apps/docs/docs/getting-started/installation/helm.md

@@ -2,9 +2,9 @@
 
 <img src="https://raw.githubusercontent.com/homarr-labs/charts/refs/heads/main/charts/homarr/icon.svg" align="right" width="92" alt="homarr logo">
 
-![Version: 8.23.0](https://img.shields.io/badge/Version-8.23.0-informational?style=flat)
+![Version: 8.24.0](https://img.shields.io/badge/Version-8.24.0-informational?style=flat)
 ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat)
-![AppVersion: v1.71.0](https://img.shields.io/badge/AppVersion-v1.71.0-informational?style=flat)
+![AppVersion: v1.72.0](https://img.shields.io/badge/AppVersion-v1.72.0-informational?style=flat)
 
 A Helm chart to deploy homarr for Kubernetes
 
@@ -429,7 +429,7 @@ All available values are listed on the [artifacthub](https://artifacthub.io/pack
 | httproute.rules[0].matches[0].path.value | string | `"/"` | Path value to match |
 | image.pullPolicy | string | `"IfNotPresent"` | Image pull policy |
 | image.repository | string | `"ghcr.io/homarr-labs/homarr"` | Image repository |
-| image.tag | string | `"v1.71.0"` | Overrides the image tag whose default is the chart appVersion |
+| image.tag | string | `"v1.72.0"` | Overrides the image tag whose default is the chart appVersion |
 | imagePullSecrets | list | `[]` | Secrets for Docker registry |
 | ingress.annotations | object | `{}` | Ingress annotations |
 | ingress.enabled | bool | `false` | Enable ingress |

apps/docs/docs/integrations/docker/index.mdx

@@ -55,6 +55,74 @@ services:
 With docker run, add this parameter: `-v /var/run/docker.sock:/var/run/docker.sock`.
 In Windows, you'll need to adjust the slashes: `-v //var/run/docker.sock:/var/run/docker.sock`
 
+### Using Podman
+
+On Linux, Homarr can connect to Podman's [Docker-compatible API](https://docs.podman.io/en/latest/markdown/podman-system-service.1.html).
+The Podman API socket must be running and mounted into the Homarr container.
+The socket grants full access to Podman, including arbitrary code execution as the user running the API, so only mount it into trusted containers.
+
+For rootless Podman, enable the socket for the user that runs Homarr:
+
+```bash
+systemctl --user enable --now podman.socket
+```
+
+The rootless socket is located at `$XDG_RUNTIME_DIR/podman/podman.sock` (usually `/run/user/<uid>/podman/podman.sock`).
+You can confirm the path with:
+
+```bash
+podman info --format '{{.Host.RemoteSocket.Path}}'
+```
+
+Mount that socket into the Homarr container and point `DOCKER_SOCKET_PATHS` to its path **inside** the container:
+
+```yaml
+services:
+  homarr:
+    container_name: homarr
+    image: ghcr.io/homarr-labs/homarr:latest
+    restart: unless-stopped
+    volumes:
+      - ${XDG_RUNTIME_DIR}/podman/podman.sock:/var/run/podman.sock
+      - ./homarr/appdata:/appdata
+    environment:
+      SECRET_ENCRYPTION_KEY: your_64_character_hex_string
+      DOCKER_SOCKET_PATHS: /var/run/podman.sock
+    ports:
+      - "7575:7575"
+```
+
+Start Homarr with `podman compose up -d`.
+Run the compose project as the same user that owns the rootless Podman socket so `$XDG_RUNTIME_DIR` resolves to the correct path.
+To keep the user socket available after logout and across reboots, enable lingering with `loginctl enable-linger <user>`.
+
+For rootful Podman, enable the system socket with `sudo systemctl enable --now podman.socket`.
+Its default path is `/run/podman/podman.sock`; mount that path instead and start Homarr with `sudo podman compose up -d`.
+
+:::note SELinux
+On systems with SELinux enabled, Podman's documentation recommends disabling label separation for a container that accesses the API socket.
+Add the following to the Homarr service:
+
+```yaml
+security_opt:
+  - label=disable
+```
+
+:::
+
+You can connect Homarr to multiple Docker-compatible sockets by mounting each socket and listing their in-container paths, separated by commas:
+
+```yaml
+services:
+  homarr:
+    image: ghcr.io/homarr-labs/homarr:latest
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ${XDG_RUNTIME_DIR}/podman/podman.sock:/var/run/podman.sock
+    environment:
+      DOCKER_SOCKET_PATHS: /var/run/docker.sock,/var/run/podman.sock
+```
+
 ### Managing your Docker containers within Homarr
 Homarr allows you to interact with Docker containers running on your system.
 Each container row has an action menu with the following options:

apps/docs/docs/integrations/navidrome/index.mdx

@@ -10,19 +10,21 @@ import { AddingIntegration } from '@site/src/components/integrations/adding';
 import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
 import { navidromeIntegration } from '.';
 import { audioStatsWidget } from '@site/docs/widgets/audio-stats';
+import { mediaServerWidget } from '@site/docs/widgets/media-server';
 
 
 <IntegrationHeader
     integration={navidromeIntegration}
-    categories={['Media']}
+    categories={['Media', 'Media server']}
 />
 
-Navidrome provides music library statistics including artist, album, and song counts, as well as now playing information via the Subsonic API.
+Navidrome provides music library statistics including artist, album, and song counts, as well as now playing audio streams via the Subsonic API.
 
 ### Widgets & Capabilities
 <IntegrationCapabilites
     items={[
         { widget: audioStatsWidget },
+        { widget: mediaServerWidget },
     ]}
 />
 

apps/docs/docs/widgets/audio-stats/index.mdx

@@ -1,43 +1,45 @@
 ---
-title: 'Audio Stats'
-description: 'Displays library statistics from Navidrome or Audiobookshelf, adapting its display based on the linked integration.'
+title: "Audio Stats"
+description: "Displays media and listening statistics from Navidrome or Audiobookshelf, adapting its display based on the linked integration."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { audioStatsWidget } from '.';
-import { navidromeIntegration } from '@site/docs/integrations/navidrome';
-import { audiobookshelfIntegration } from '@site/docs/integrations/audiobookshelf';
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { audioStatsWidget } from ".";
+import { navidromeIntegration } from "@site/docs/integrations/navidrome";
+import { audiobookshelfIntegration } from "@site/docs/integrations/audiobookshelf";
 
-
-<WidgetHeader
-  widget={audioStatsWidget}
-  categories={['Media']}
-/>
+<WidgetHeader widget={audioStatsWidget} categories={["Media"]} />
 
 This widget adapts its display based on the linked integration:
 
-- **Navidrome**: Shows artist, album, and song counts, plus a now playing section with active streams
+- **Navidrome**: Shows artist, album, and song counts
 - **Audiobookshelf**: Shows library count, audiobook/podcast totals, listening time, and active sessions
 
 Only options relevant to your linked integration are shown in the configuration panel.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: navidromeIntegration,
-  note: "Displays music library stats and now playing"
-}, {
-  integration: audiobookshelfIntegration,
-  note: "Displays audiobook/podcast library stats and listening time"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: navidromeIntegration,
+      note: "Displays music library statistics",
+    },
+    {
+      integration: audiobookshelfIntegration,
+      note: "Displays audiobook/podcast library stats and listening time",
+    },
+  ]}
+/>
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={audioStatsWidget.configuration} />

apps/docs/docs/widgets/audio-stats/index.ts

@@ -27,24 +27,6 @@ export const audioStatsWidget: WidgetDefinition = {
         values: { type: "boolean" },
         defaultValue: "yes",
       },
-      {
-        name: "Show now playing",
-        description: "Displays currently playing tracks (Navidrome only)",
-        values: { type: "boolean" },
-        defaultValue: "yes",
-      },
-      {
-        name: "Show now playing list",
-        description: "Displays a detailed list of now playing tracks (Navidrome only)",
-        values: { type: "boolean" },
-        defaultValue: "yes",
-      },
-      {
-        name: "Max now playing items",
-        description: "Maximum number of now playing tracks to display (Navidrome only)",
-        values: "Number (1-5)",
-        defaultValue: "3",
-      },
       {
         name: "Show library count",
         description: "Displays the number of libraries (Audiobookshelf only)",

apps/docs/docs/widgets/downloads/index.mdx

@@ -4,6 +4,7 @@ description: 'Allows you to view and manage your Downloads from both Torrent and
 hide_title: true
 ---
 
+import { aria2Integration } from '@site/docs/integrations/aria2';
 import { delugeIntegration } from '@site/docs/integrations/deluge';
 import { nzbgetIntegration } from '@site/docs/integrations/nzbget';
 import { qBittorentIntegration } from '@site/docs/integrations/q-bittorent';
@@ -14,9 +15,6 @@ 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 { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { IconAd } from "@tabler/icons-react";
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
 import { downloadsWidget } from '.';
 
 
@@ -25,16 +23,37 @@ import { downloadsWidget } from '.';
   categories={['Torrent client', 'Usenet client', 'Downloads']}
 />
 
-This widget displays a list of torrents or usenet-articles that are currently being downloaded, along with their progress and other relevant information.
+This widget displays a list of torrents or usenet-articles that are currently being downloaded, along with their progress and other relevant information. It supports 7 download client integrations and provides a rich, responsive table interface.
 
 ### Screenshots
 
 import downloadsCard from './img/screenshot.png';
+import contextMenuImg from './img/context-menu.png';
 
 <div>
-    <img src={downloadsCard} alt="downloads" width={128 * 4} />
+    <img src={downloadsCard} alt="Downloads widget showing torrent and usenet items" width={128 * 4} />
 </div>
 
+#### Right-click context menu
+
+<div>
+    <img src={contextMenuImg} alt="Downloads widget context menu with pause, delete, and copy actions" width={128 * 4} />
+</div>
+
+### Features
+
+- **Responsive table** — columns automatically adapt to widget width, hiding less important columns at smaller sizes
+- **Sortable columns** — click any column header to sort ascending/descending
+- **Column customization** — choose which columns to display via the widget options panel
+- **Right-click context menu** — pause, resume, delete downloads, or copy download names directly from the context menu
+- **Row expansion** — click any row to see full details inline without opening a separate modal
+- **Hover tooltips** — hover a download name to see size, speeds, ETA, ratio, and category
+- **Global stats bar** — toggle a summary bar showing queue progress, total size, speeds, ratio, and per-state counts
+- **Client filtering** — filter downloads by integration or status using the footer filter panel
+- **Global controls** — pause/resume all downloads across all clients from the footer bar
+- **Status indicators** — color-coded badges show download state at a glance
+- **Speed overview** — total download and upload speeds displayed in the footer
+
 ### Supported Integrations
 
 <WidgetIntegrations items={[{
@@ -52,16 +71,23 @@ import downloadsCard from './img/screenshot.png';
 }, {
   integration: qBittorentIntegration,
   note: "Torrent client"
+}, {
+  integration: aria2Integration,
+  note: "Multi-protocol download client"
 }, {
   integration: slskdIntegration,
-  note: "Soulseek client"
+  note: "Soulseek client (read-only)"
 }]} />
 
 ### Interactions
 
-- Pause / Resume one download by clicking on the according icon.
-- Delete one download by clicking on the trash icon. (Can also delete the files)
-- Pause / Resume all downloads by using the bottom button.
+- **Right-click** any download to open a context menu with pause/resume, delete, and copy actions
+- **Click** any row to expand it and see full download details inline
+- **Hover** a download name for a quick stats tooltip
+- **Stats toggle** — show or hide the global stats bar from the footer
+- **Pause / Resume** all downloads using the footer controls
+- **Filter** by integration or status using the filter button in the footer
+- **Sort** by clicking column headers (with persistent sort direction)
 
 ### Adding the widget
 

apps/docs/docs/widgets/downloads/index.ts

@@ -2,26 +2,23 @@ import { WidgetDefinition } from "@site/src/types";
 import { IconDownload } from "@tabler/icons-react";
 
 const columnsList = [
-  "id",
-  "actions",
-  "added",
-  "category",
-  "downSpeed",
-  "index",
-  "integration",
   "name",
   "progress",
+  "size",
+  "downSpeed",
+  "upSpeed",
+  "time",
+  "state",
+  "added",
   "ratio",
   "received",
   "sent",
-  "size",
-  "state",
-  "time",
+  "category",
+  "integration",
+  "index",
   "type",
-  "upSpeed",
 ];
-const sortingExclusion = ["actions", "id", "state"];
-const columnsSort = columnsList.filter((column) => !sortingExclusion.some((exclusion) => exclusion === column));
+const sortColumns = columnsList.filter((c) => !["state", "category", "integration"].includes(c));
 
 export const downloadsWidget: WidgetDefinition = {
   icon: IconDownload,
@@ -32,25 +29,20 @@ export const downloadsWidget: WidgetDefinition = {
     items: [
       {
         name: "Columns to show",
-        description: "Select the columns you want to display in the widget.",
+        description:
+          "Select the columns you want to display in the widget. Columns automatically hide/show based on widget width.",
         values: `List of columns: ${columnsList.join(", ")}`,
-        defaultValue: ["integration", "name", "progress", "time", "actions"].join(", "),
+        defaultValue: ["name", "progress", "downSpeed", "time", "state"].join(", "),
       },
       {
-        name: "Enable items sorting",
-        description: "Enables the sorting in the table.",
-        values: { type: "boolean" },
-        defaultValue: "no",
-      },
-      {
-        name: "Column used for sorting by default",
-        description: "By default it will sort by this column.",
-        defaultValue: "type",
-        values: `List of columns: ${columnsSort.join(", ")}`,
+        name: "Default sort column",
+        description: "The column used for initial sorting when the widget loads.",
+        defaultValue: "progress",
+        values: `List of columns: ${sortColumns.join(", ")}`,
       },
       {
         name: "Invert sorting",
-        description: "This will invert the sorting order of the table.",
+        description: "This will invert the default sorting order.",
         values: { type: "boolean" },
         defaultValue: "no",
       },
@@ -76,13 +68,13 @@ export const downloadsWidget: WidgetDefinition = {
         name: "Hide completed torrent under this threshold (in kiB/s)",
         description:
           "This will hide completed torrent entries that have a download speed below the specified threshold.",
-        values: "Any number above 1, 0 to disable",
+        values: "Any number above 0, 0 to disable",
         defaultValue: "0",
       },
       {
-        name: "Categories/names to filter",
-        description: "You can filter the items by categories or names. Use a comma to separate multiple values.",
-        values: "Comma-separated list of categories or names",
+        name: "Categories/labels to filter",
+        description: "You can filter the items by categories or labels. Use a comma to separate multiple values.",
+        values: "Comma-separated list of categories or labels",
         defaultValue: "-",
       },
       {
@@ -94,13 +86,13 @@ export const downloadsWidget: WidgetDefinition = {
       },
       {
         name: "Use filter to calculate Ratio",
-        description: "This will use the filter to calculate the ratio of items shown in the widget.",
+        description: "This will use the category filter when calculating the global torrent ratio.",
         values: { type: "boolean" },
         defaultValue: "yes",
       },
       {
         name: "Limit items per integration",
-        description: "This will limit the number of items shown per integration, not globally",
+        description: "This will limit the number of items shown per integration, not globally.",
         values: "Any number above 1",
         defaultValue: "50",
       },

apps/docs/docs/widgets/media-server/index.mdx

@@ -14,6 +14,7 @@ import TabItem from '@theme/TabItem';
 import { mediaServerWidget } from '.';
 import { embyIntegration } from '@site/docs/integrations/emby';
 import { jellyfinIntegration } from '@site/docs/integrations/jellyfin';
+import { navidromeIntegration } from '@site/docs/integrations/navidrome';
 import { plexIntegration } from '@site/docs/integrations/plex';
 
 
@@ -39,6 +40,9 @@ import mediaTable from './img/table.png';
   integration: embyIntegration,
 }, {
   integration: jellyfinIntegration,
+}, {
+  integration: navidromeIntegration,
+  note: "Will always show only currently playing audio streams, not all active sessions."
 }, {
   integration: plexIntegration,
   note: "Will always show only currently playing streams, not all active sessions."
@@ -50,4 +54,3 @@ import mediaTable from './img/table.png';
 
 ### Configuration
 <WidgetConfig configuration={mediaServerWidget.configuration} />
-

apps/docs/docs/widgets/media-server/index.ts

@@ -10,7 +10,7 @@ export const mediaServerWidget: WidgetDefinition = {
     items: [
       {
         name: "Show only currently playing",
-        description: "Disabling this will not work for plex.",
+        description: "Plex and Navidrome always show only currently playing streams.",
         values: { type: "boolean" },
         defaultValue: "yes",
       },

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

@@ -19,6 +19,7 @@ import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
 import { BoardItemMenu } from "./item-menu";
 import { WidgetContextMenu } from "./widget-context-menu";
+import { removePersistedWidgetQueries } from "./widget-query-recovery";
 
 interface BoardItemContentProps {
   item: SectionItem;
@@ -112,7 +113,7 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
       {({ reset }) => (
         <ErrorBoundary
           onReset={() => {
-            void queryClient.invalidateQueries({ queryKey: [["widget"]] });
+            removePersistedWidgetQueries(queryClient);
             reset();
           }}
           fallbackRender={({ resetErrorBoundary, error }) => (

apps/nextjs/src/components/board/items/widget-query-recovery.spec.ts

@@ -0,0 +1,54 @@
+import { QueryClient } from "@tanstack/react-query";
+import { describe, expect, test } from "vitest";
+
+import { removePersistedWidgetQueries } from "./widget-query-recovery";
+
+describe("removePersistedWidgetQueries", () => {
+  test("removes stale widget queries and allows fresh data to be fetched", async () => {
+    const queryClient = new QueryClient();
+    const crashedWidgetQueryKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
+    const unrelatedQueryKey = [["user", "me"], { input: {} }];
+
+    queryClient.setQueryData(crashedWidgetQueryKey, "stale");
+    queryClient.setQueryData(unrelatedQueryKey, "unrelated");
+
+    removePersistedWidgetQueries(queryClient);
+
+    expect(queryClient.getQueryData(crashedWidgetQueryKey)).toBeUndefined();
+    expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
+    await expect(
+      queryClient.fetchQuery({ queryKey: crashedWidgetQueryKey, queryFn: () => Promise.resolve("fresh") }),
+    ).resolves.toBe("fresh");
+  });
+
+  test("removes persisted queries outside the widget router", () => {
+    const queryClient = new QueryClient();
+    const dockerQueryKey = [["docker", "getContainers"], { input: {} }];
+    const appQueryKey = [["app", "byId"], { input: {} }];
+    const unrelatedQueryKey = [["user", "me"], { input: {} }];
+
+    queryClient.setQueryData(dockerQueryKey, "stale");
+    queryClient.setQueryData(appQueryKey, "stale");
+    queryClient.setQueryData(unrelatedQueryKey, "unrelated");
+
+    removePersistedWidgetQueries(queryClient);
+
+    expect(queryClient.getQueryData(dockerQueryKey)).toBeUndefined();
+    expect(queryClient.getQueryData(appQueryKey)).toBeUndefined();
+    expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
+  });
+
+  test("removes persisted widget queries when the widget kind and query path differ", () => {
+    const queryClient = new QueryClient();
+    const crashedWidgetQueryKey = [["widget", "anchorNotes", "getNote"], { input: {} }];
+    const unrelatedQueryKey = [["user", "me"], { input: {} }];
+
+    queryClient.setQueryData(crashedWidgetQueryKey, "stale");
+    queryClient.setQueryData(unrelatedQueryKey, "unrelated");
+
+    removePersistedWidgetQueries(queryClient);
+
+    expect(queryClient.getQueryData(crashedWidgetQueryKey)).toBeUndefined();
+    expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
+  });
+});

apps/nextjs/src/components/board/items/widget-query-recovery.ts

@@ -0,0 +1,7 @@
+import type { QueryClient } from "@tanstack/react-query";
+
+import { isPersistableWidgetQueryKey } from "@homarr/api/query-cache";
+
+export const removePersistedWidgetQueries = (queryClient: QueryClient) => {
+  queryClient.removeQueries({ predicate: (query) => isPersistableWidgetQueryKey(query.queryKey) });
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "1.72.0",
+  "version": "1.73.0",
   "private": true,
   "scripts": {
     "build": "cross-env CI=true turbo build",

packages/api/src/router/widgets/media-server.ts

@@ -17,7 +17,7 @@ export const mediaServerRouter = createTRPCRouter({
       mcp: {
         enabled: true,
         description:
-          "Get currently active streams from Plex/Jellyfin/Emby media servers. REQUIRED: integrationIds (array of media server integration IDs from integration_all), showOnlyPlaying (boolean — true to filter to actively playing streams only)",
+          "Get currently active streams from Plex/Jellyfin/Emby/Navidrome media servers. REQUIRED: integrationIds (array of media server integration IDs from integration_all), showOnlyPlaying (boolean — true to filter to actively playing streams only)",
       },
     })
     .concat(createMediaServerIntegrationMiddleware("query"))

packages/api/src/settle-integrations.ts

@@ -19,8 +19,15 @@ export async function settleIntegrationQueries<TIntegration extends IntegrationL
   options?: Options<TIntegration, TResult>,
 ): Promise<TResult[]> {
   const settled = await Promise.allSettled(integrations.map(async (integration) => fn(integration)));
-  return settled.flatMap((result, index) => {
-    if (result.status === "fulfilled") return [result.value];
+  const results: TResult[] = [];
+  const errors: unknown[] = [];
+
+  settled.forEach((result, index) => {
+    if (result.status === "fulfilled") {
+      results.push(result.value);
+      return;
+    }
+
     const integration = integrations[index];
     logger.warn(
       new ErrorWithMetadata(
@@ -29,7 +36,18 @@ export async function settleIntegrationQueries<TIntegration extends IntegrationL
         { cause: result.reason },
       ),
     );
-    if (options?.fallback && integration) return [options.fallback(integration, result.reason)];
-    return [];
+
+    if (options?.fallback && integration) {
+      results.push(options.fallback(integration, result.reason));
+      return;
+    }
+
+    errors.push(result.reason);
   });
+
+  if (results.length === 0 && errors.length > 0) {
+    throw errors[0];
+  }
+
+  return results;
 }

packages/api/src/test/settle-integrations.spec.ts

@@ -0,0 +1,50 @@
+import { describe, expect, test, vi } from "vitest";
+
+import { settleIntegrationQueries } from "../settle-integrations";
+
+const mocks = vi.hoisted(() => ({
+  logger: { warn: vi.fn() },
+}));
+
+vi.mock("@homarr/core/infrastructure/logs", () => ({
+  createLogger: () => mocks.logger,
+}));
+
+vi.mock("@homarr/core/infrastructure/logs/error", () => ({
+  ErrorWithMetadata: Error,
+}));
+
+const integrations = [
+  { id: "first", name: "First", kind: "plex" },
+  { id: "second", name: "Second", kind: "jellyfin" },
+];
+
+describe("settleIntegrationQueries", () => {
+  test("returns an empty result when no integrations are configured", async () => {
+    await expect(settleIntegrationQueries([], vi.fn())).resolves.toEqual([]);
+  });
+
+  test("keeps successful integrations when another integration fails", async () => {
+    const error = new Error("Plex unavailable");
+
+    await expect(
+      settleIntegrationQueries(integrations, (integration) =>
+        integration.id === "first" ? Promise.reject(error) : Promise.resolve(integration.name),
+      ),
+    ).resolves.toEqual(["Second"]);
+  });
+
+  test("rejects when every integration fails", async () => {
+    const error = new Error("Integration unavailable");
+
+    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error))).rejects.toBe(error);
+  });
+
+  test("uses configured fallbacks when every integration fails", async () => {
+    await expect(
+      settleIntegrationQueries(integrations, () => Promise.reject(new Error("Integration unavailable")), {
+        fallback: (integration) => integration.name,
+      }),
+    ).resolves.toEqual(["First", "Second"]);
+  });
+});

packages/definitions/src/integration.ts

@@ -418,7 +418,7 @@ export const integrationDefs = {
     name: "Navidrome",
     secretKinds: [["username", "password"]],
     iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/navidrome.svg",
-    category: ["mediaLibrary"],
+    category: ["mediaLibrary", "mediaService"],
     documentationUrl: null,
     defaultPort: 4533,
   },

packages/integrations/src/download-client/qbittorrent/qbittorrent-integration.ts

@@ -30,7 +30,7 @@ export class QBitTorrentIntegration extends Integration implements IDownloadClie
   public async getClientJobsAndStatusAsync(input: { limit: number }): Promise<DownloadClientJobsAndStatus> {
     const type = "torrent";
     const client = await this.getClientAsync();
-    const torrents = await client.listTorrents({ limit: input.limit, sort: "progress", reverse: false });
+    const torrents = await client.listTorrents({ limit: input.limit });
     const rates = torrents.reduce(
       ({ down, up }, { dlspeed, upspeed }) => ({ down: down + dlspeed, up: up + upspeed }),
       { down: 0, up: 0 },

packages/integrations/src/navidrome/navidrome-integration.ts

@@ -6,6 +6,8 @@ import type { IntegrationTestingInput } from "../base/integration";
 import { Integration } from "../base/integration";
 import { TestConnectionError } from "../base/test-connection/test-connection-error";
 import type { TestingResult } from "../base/test-connection/test-connection-service";
+import type { IMediaServerIntegration } from "../interfaces/media-server/media-server-integration";
+import type { CurrentSessionsInput, StreamSession } from "../interfaces/media-server/media-server-types";
 import type { NavidromeDashboardData, NavidromeNowPlayingEntry, SubsonicResponseBody } from "./navidrome-types";
 import { subsonicResponseSchema } from "./navidrome-types";
 
@@ -22,7 +24,7 @@ const subsonicAuthErrorCodes = new Set([40, 41]);
 const asArray = <TValue>(value: TValue | TValue[] | undefined): TValue[] =>
   [value].flat().filter((item): item is TValue => item !== undefined);
 
-export class NavidromeIntegration extends Integration {
+export class NavidromeIntegration extends Integration implements IMediaServerIntegration {
   protected async testingAsync(input: IntegrationTestingInput): Promise<TestingResult> {
     const url = this.url("/rest/ping.view", this.getAuthParams());
     const response = await input.fetchAsync(url);
@@ -53,20 +55,49 @@ export class NavidromeIntegration extends Integration {
   }
 
   public async getDashboardDataAsync(): Promise<NavidromeDashboardData> {
-    const [artistCount, libraryCounts, nowPlaying] = await Promise.all([
+    const [artistCount, libraryCounts] = await Promise.all([
       this.getArtistCountAsync(),
       this.getAlbumAndSongCountsAsync(),
-      this.getNowPlayingAsync(),
     ]);
 
     return {
       artistCount,
       albumCount: libraryCounts.albumCount,
       songCount: libraryCounts.songCount,
-      nowPlaying,
     };
   }
 
+  public async getCurrentSessionsAsync(_options: CurrentSessionsInput): Promise<StreamSession[]> {
+    const nowPlaying = await this.getNowPlayingAsync();
+
+    return nowPlaying.map(
+      (entry): StreamSession => ({
+        sessionId: `${entry.username}-${entry.playerName}`,
+        sessionName: entry.playerName,
+        user: {
+          userId: entry.username,
+          username: entry.username,
+          profilePictureUrl: null,
+        },
+        currentlyPlaying: {
+          type: "audio",
+          name: entry.title,
+          seasonName: entry.artist || undefined,
+          episodeName: null,
+          albumName: entry.album,
+          episodeCount: null,
+          playback: {
+            state: null,
+            positionMs: null,
+            durationMs: null,
+          },
+          location: null,
+          metadata: null,
+        },
+      }),
+    );
+  }
+
   private async getArtistCountAsync(): Promise<number> {
     const response = await this.subsonicRequestAsync("/rest/getArtists.view", {}, { tolerateEmptyLibrary: true });
     return asArray(response.artists?.index).reduce((count, index) => count + asArray(index.artist).length, 0);

packages/integrations/src/navidrome/navidrome-types.ts

@@ -67,5 +67,4 @@ export interface NavidromeDashboardData {
   artistCount: number;
   albumCount: number;
   songCount: number;
-  nowPlaying: NavidromeNowPlayingEntry[];
 }

packages/integrations/src/navidrome/test/navidrome-integration.spec.ts

@@ -1,6 +1,12 @@
+// @vitest-environment node
 import { Response } from "undici";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 
+vi.hoisted(() => {
+  process.env.SKIP_ENV_VALIDATION = "true";
+  process.env.SECRET_ENCRYPTION_KEY = "0".repeat(64);
+});
+
 import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 
 import type { IntegrationSecret } from "../../base/types";
@@ -34,24 +40,24 @@ const subsonicOk = <T extends Record<string, unknown>>(data: T) =>
     "subsonic-response": { status: "ok", version: "1.16.1", ...data },
   });
 
-const subsonicFailed = (message: string) =>
+const subsonicFailed = (message: string, code = 70) =>
   JSON.stringify({
-    "subsonic-response": { status: "failed", error: { code: 70, message } },
+    "subsonic-response": { status: "failed", error: { code, message } },
   });
 
+const makeAlbums = (count: number, songCount: number) =>
+  Array.from({ length: count }, (_, index) => ({
+    id: `album-${index}`,
+    name: `Album ${index}`,
+    songCount,
+  }));
+
 beforeEach(() => {
   mockFetch.mockReset();
 });
 
 describe("NavidromeIntegration.getDashboardDataAsync", () => {
   test("paginates album list and counts songs", async () => {
-    const makeAlbums = (count: number, songCount: number) =>
-      Array.from({ length: count }, (_, i) => ({
-        id: `album-${i}`,
-        name: `Album ${i}`,
-        songCount,
-      }));
-
     mockFetch.mockImplementation((url) => {
       const urlStr = toUrlString(url);
 
@@ -84,13 +90,7 @@ describe("NavidromeIntegration.getDashboardDataAsync", () => {
         >;
       }
 
-      if (urlStr.includes("getNowPlaying")) {
-        return Promise.resolve(new Response(subsonicOk({ nowPlaying: {} }), { status: 200 })) as unknown as ReturnType<
-          typeof fetchWithTrustedCertificatesAsync
-        >;
-      }
-
-      return Promise.resolve(new Response(subsonicOk({}), { status: 200 })) as unknown as ReturnType<
+      return Promise.reject(new Error(`Unexpected dashboard request: ${urlStr}`)) as unknown as ReturnType<
         typeof fetchWithTrustedCertificatesAsync
       >;
     });
@@ -101,7 +101,6 @@ describe("NavidromeIntegration.getDashboardDataAsync", () => {
     expect(result.albumCount).toBe(700);
     expect(result.songCount).toBe(500 * 10 + 200 * 5);
     expect(result.artistCount).toBe(1);
-    expect(result.nowPlaying).toEqual([]);
   });
 
   test("handles empty library gracefully", async () => {
@@ -120,13 +119,7 @@ describe("NavidromeIntegration.getDashboardDataAsync", () => {
         ) as unknown as ReturnType<typeof fetchWithTrustedCertificatesAsync>;
       }
 
-      if (urlStr.includes("getNowPlaying")) {
-        return Promise.resolve(
-          new Response(subsonicFailed("Library not found or empty"), { status: 200 }),
-        ) as unknown as ReturnType<typeof fetchWithTrustedCertificatesAsync>;
-      }
-
-      return Promise.resolve(new Response(subsonicOk({}), { status: 200 })) as unknown as ReturnType<
+      return Promise.reject(new Error(`Unexpected dashboard request: ${urlStr}`)) as unknown as ReturnType<
         typeof fetchWithTrustedCertificatesAsync
       >;
     });
@@ -137,7 +130,6 @@ describe("NavidromeIntegration.getDashboardDataAsync", () => {
     expect(result.artistCount).toBe(0);
     expect(result.albumCount).toBe(0);
     expect(result.songCount).toBe(0);
-    expect(result.nowPlaying).toEqual([]);
   });
 
   test("throws on non-empty-library subsonic error", async () => {
@@ -151,8 +143,10 @@ describe("NavidromeIntegration.getDashboardDataAsync", () => {
     const integration = createIntegration();
     await expect(integration.getDashboardDataAsync()).rejects.toThrow();
   });
+});
 
-  test("now playing maps entries correctly", async () => {
+describe("NavidromeIntegration.getCurrentSessionsAsync", () => {
+  test("maps now playing entries to stream sessions", async () => {
     mockFetch.mockImplementation((url) => {
       const urlStr = toUrlString(url);
 
@@ -161,7 +155,22 @@ describe("NavidromeIntegration.getDashboardDataAsync", () => {
           new Response(
             subsonicOk({
               nowPlaying: {
-                entry: { title: "Song", artist: "Band", album: "LP", username: "user1", playerName: "Chrome" },
+                entry: [
+                  {
+                    title: "Song",
+                    artist: "Band",
+                    album: "LP",
+                    username: "user1",
+                    playerName: "Chrome",
+                  },
+                  {
+                    title: "Second Song",
+                    artist: "Second Artist",
+                    album: "Second Album",
+                    username: "user2",
+                    playerName: "Mobile",
+                  },
+                ],
               },
             }),
             { status: 200 },
@@ -169,14 +178,72 @@ describe("NavidromeIntegration.getDashboardDataAsync", () => {
         ) as unknown as ReturnType<typeof fetchWithTrustedCertificatesAsync>;
       }
 
-      if (urlStr.includes("getArtists")) {
-        return Promise.resolve(new Response(subsonicOk({ artists: {} }), { status: 200 })) as unknown as ReturnType<
-          typeof fetchWithTrustedCertificatesAsync
-        >;
-      }
+      return Promise.resolve(new Response(subsonicOk({}), { status: 200 })) as unknown as ReturnType<
+        typeof fetchWithTrustedCertificatesAsync
+      >;
+    });
 
-      if (urlStr.includes("getAlbumList2")) {
-        return Promise.resolve(new Response(subsonicOk({ albumList2: {} }), { status: 200 })) as unknown as ReturnType<
+    const integration = createIntegration();
+    const result = await integration.getCurrentSessionsAsync({ showOnlyPlaying: true });
+
+    expect(result).toEqual([
+      {
+        sessionId: "user1-Chrome",
+        sessionName: "Chrome",
+        user: {
+          userId: "user1",
+          username: "user1",
+          profilePictureUrl: null,
+        },
+        currentlyPlaying: {
+          type: "audio",
+          name: "Song",
+          seasonName: "Band",
+          episodeName: null,
+          albumName: "LP",
+          episodeCount: null,
+          playback: {
+            state: null,
+            positionMs: null,
+            durationMs: null,
+          },
+          location: null,
+          metadata: null,
+        },
+      },
+      {
+        sessionId: "user2-Mobile",
+        sessionName: "Mobile",
+        user: {
+          userId: "user2",
+          username: "user2",
+          profilePictureUrl: null,
+        },
+        currentlyPlaying: {
+          type: "audio",
+          name: "Second Song",
+          seasonName: "Second Artist",
+          episodeName: null,
+          albumName: "Second Album",
+          episodeCount: null,
+          playback: {
+            state: null,
+            positionMs: null,
+            durationMs: null,
+          },
+          location: null,
+          metadata: null,
+        },
+      },
+    ]);
+  });
+
+  test("returns an empty array when there are no now playing entries", async () => {
+    mockFetch.mockImplementation((url) => {
+      const urlStr = toUrlString(url);
+
+      if (urlStr.includes("getNowPlaying")) {
+        return Promise.resolve(new Response(subsonicOk({ nowPlaying: {} }), { status: 200 })) as unknown as ReturnType<
           typeof fetchWithTrustedCertificatesAsync
         >;
       }
@@ -187,15 +254,31 @@ describe("NavidromeIntegration.getDashboardDataAsync", () => {
     });
 
     const integration = createIntegration();
-    const result = await integration.getDashboardDataAsync();
+    const result = await integration.getCurrentSessionsAsync({ showOnlyPlaying: false });
 
-    expect(result.nowPlaying).toHaveLength(1);
-    expect(result.nowPlaying[0]).toEqual({
-      title: "Song",
-      artist: "Band",
-      album: "LP",
-      username: "user1",
-      playerName: "Chrome",
+    expect(result).toEqual([]);
+  });
+
+  test("throws on subsonic auth failure", async () => {
+    mockFetch.mockImplementation((url) => {
+      const urlStr = toUrlString(url);
+
+      if (urlStr.includes("getNowPlaying")) {
+        return Promise.resolve(
+          new Response(subsonicFailed("Wrong username or password", 40), { status: 200 }),
+        ) as unknown as ReturnType<typeof fetchWithTrustedCertificatesAsync>;
+      }
+
+      return Promise.resolve(new Response(subsonicOk({}), { status: 200 })) as unknown as ReturnType<
+        typeof fetchWithTrustedCertificatesAsync
+      >;
+    });
+
+    const integration = createIntegration();
+
+    await expect(integration.getCurrentSessionsAsync({ showOnlyPlaying: true })).rejects.toMatchObject({
+      message: "An unknown error occured while executing Integration method",
+      cause: { message: "Wrong username or password" },
     });
   });
 });

packages/old-import/src/widgets/options.ts

@@ -77,15 +77,16 @@ const optionMapping: OptionMapping = {
     categoryFilter: (oldOptions) => ("labelFilter" in oldOptions ? oldOptions.labelFilter : undefined),
     filterIsWhitelist: (oldOptions) =>
       "labelFilterIsWhitelist" in oldOptions ? oldOptions.labelFilterIsWhitelist : undefined,
-    enableRowSorting: (oldOptions) => ("rowSorting" in oldOptions ? oldOptions.rowSorting : undefined),
     showCompletedTorrent: (oldOptions) =>
       "displayCompletedTorrents" in oldOptions ? oldOptions.displayCompletedTorrents : undefined,
-    columns: () => ["integration", "name", "progress", "time", "actions"],
-    defaultSort: () => "type",
+    columns: () => ["integration", "name", "progress", "time", "state"],
+    defaultSort: () => "progress",
     descendingDefaultSort: () => false,
     showCompletedUsenet: () => true,
     showCompletedHttp: () => true,
     limitPerIntegration: () => undefined,
+    columnOrder: () => undefined,
+    columnWidths: () => undefined,
   },
   weather: {
     forecastDayCount: (oldOptions) => oldOptions.forecastDays,

packages/request-handler/src/media-release.ts

@@ -13,4 +13,6 @@ export const mediaReleaseRequestHandler = createIntegrationRequestHandler<
     const integrationInstance = await createIntegrationAsync(integration);
     return await integrationInstance.getMediaReleasesAsync();
   },
+  cacheTtlMs: 5 * 60 * 1000,
+  fallbackToStaleOnError: true,
 });

packages/request-handler/src/test/media-release.spec.ts

@@ -0,0 +1,45 @@
+import type { MediaRelease } from "@homarr/integrations/types";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { mediaReleaseRequestHandler } from "../media-release";
+
+const mocks = vi.hoisted(() => ({
+  createIntegrationAsync: vi.fn(),
+}));
+
+vi.mock("@homarr/integrations", () => ({
+  createIntegrationAsync: mocks.createIntegrationAsync,
+}));
+
+const integration = {
+  id: "plex-integration",
+  kind: "plex",
+} as Parameters<typeof mediaReleaseRequestHandler.handler>[0];
+
+describe("mediaReleaseRequestHandler", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-28T00:00:00Z"));
+    mediaReleaseRequestHandler.invalidateCache();
+    mocks.createIntegrationAsync.mockReset();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test("keeps the last successful releases when a refresh fails", async () => {
+    const releases = [{ id: "release-1" }] as MediaRelease[];
+    const getMediaReleasesAsync = vi.fn().mockResolvedValueOnce(releases).mockRejectedValueOnce(new Error("Plex down"));
+    mocks.createIntegrationAsync.mockResolvedValue({ getMediaReleasesAsync });
+
+    const handler = mediaReleaseRequestHandler.handler(integration, {});
+    const initial = await handler.getDataAsync();
+
+    vi.advanceTimersByTime(5 * 60 * 1000 + 1);
+    const fallback = await handler.getDataAsync();
+
+    expect(fallback).toEqual(initial);
+    expect(getMediaReleasesAsync).toHaveBeenCalledTimes(2);
+  });
+});

packages/translation/src/lang/en.json

@@ -3079,11 +3079,20 @@
         "limitPerIntegration": {
           "label": "Limit items per integration",
           "description": "This will limit the number of items shown per integration, not globally"
+        },
+        "columnOrder": {
+          "label": "Column order"
+        },
+        "columnWidths": {
+          "label": "Column widths"
         }
       },
       "errors": {
         "noColumns": "Select Columns in Items",
-        "noCommunications": "Can't load data from integration"
+        "noCommunications": "Can't load data from integration",
+        "noItems": "No downloads found",
+        "actionFailed": "Action failed",
+        "actionFailedMessage": "The action could not be completed. Please try again."
       },
       "items": {
         "actions": {
@@ -3106,7 +3115,8 @@
           "detailsTitle": "Current index within client"
         },
         "id": {
-          "columnTitle": "Id"
+          "columnTitle": "Id",
+          "detailsTitle": "Item ID"
         },
         "integration": {
           "columnTitle": "Integration"
@@ -3140,7 +3150,8 @@
         },
         "time": {
           "columnTitle": "Finish time",
-          "detailsTitle": "Time since/to completion"
+          "detailsTitle": "Time since/to completion",
+          "eta": "ETA"
         },
         "type": {
           "columnTitle": "Type",
@@ -3184,7 +3195,23 @@
           }
         }
       },
-      "globalRatio": "Global Ratio"
+      "globalRatio": "Global Ratio",
+      "contextMenu": {
+        "copyName": "Copy name",
+        "copyId": "Copy ID",
+        "clearFilters": "Clear filters"
+      },
+      "footer": {
+        "filter": "Filter downloads"
+      },
+      "stats": {
+        "show": "Show global stats",
+        "hide": "Hide global stats",
+        "overallProgress": "Overall queue progress",
+        "totalSize": "Total queue size",
+        "clients": "{count, plural, one {# client} other {# clients}}"
+      },
+      "disconnected": "(disconnected)"
     },
     "mediaReleases": {
       "name": "Media releases",
@@ -3741,18 +3768,6 @@
           "label": "Show songs",
           "description": "Show the total number of songs in your music library (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Show now playing",
-          "description": "Show tracks currently being played (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Show now playing list",
-          "description": "Show individual tracks instead of only the active stream count (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Max now playing items",
-          "description": "Maximum number of tracks to show in the now playing list (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Show library count",
           "description": "Show the number of libraries on your instance (Audiobookshelf)"
@@ -3786,8 +3801,6 @@
       "podcasts": "Podcasts",
       "listeningTime": "Listening Time",
       "activeSessions": "Active Sessions",
-      "nowPlaying": "Now Playing",
-      "nowPlayingCount": "{count, plural, one {# stream} other {# streams}}",
       "error": {
         "internalServerError": "Failed to fetch audio stats data"
       }

packages/widgets/src/audio-stats/audio-stats-content.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import type { CSSProperties } from "react";
-import { Badge, Text } from "@mantine/core";
-import { IconHeadphones } from "@tabler/icons-react";
+import { Text } from "@mantine/core";
 
 import type { AudiobookshelfDashboardData, NavidromeDashboardData } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -40,29 +39,6 @@ export function AudioStatsContent({ backend, stats, options, width }: AudioStats
   const gridCols = getGridCols(width, visibleStats.length, options.compactMode ?? false);
   const iconSize = getIconSize(width, options.compactMode ?? false);
 
-  const navidromeStatsByBackend: Record<AudioStatsBackend, NavidromeDashboardData | null> = {
-    navidrome: stats as NavidromeDashboardData,
-    audiobookshelf: null,
-  };
-  const navidromeStats = navidromeStatsByBackend[backend];
-  const showNowPlayingSection =
-    navidromeStats !== null && Boolean(options.showNowPlaying) && navidromeStats.nowPlaying.length > 0;
-
-  const nowPlayingLimitByListVisibility = {
-    true: options.maxNowPlayingItems ?? 3,
-    false: 0,
-  } as const;
-
-  const nowPlayingTracks =
-    navidromeStats?.nowPlaying.slice(
-      0,
-      nowPlayingLimitByListVisibility[
-        String(options.showNowPlayingList) as keyof typeof nowPlayingLimitByListVisibility
-      ],
-    ) ?? [];
-
-  const hasContent = visibleStats.length > 0 || showNowPlayingSection;
-
   return (
     <div className={`${classes.root} ${rootClassByCompact[compactKey]}`}>
       {visibleStats.length > 0 && (
@@ -80,40 +56,7 @@ export function AudioStatsContent({ backend, stats, options, width }: AudioStats
         </div>
       )}
 
-      {showNowPlayingSection && navidromeStats && (
-        <div className={classes.nowPlaying}>
-          <div className={classes.nowPlayingHeader}>
-            <IconHeadphones size={iconSize} stroke={1.5} />
-            <span className={classes.nowPlayingTitle}>{t("nowPlaying" as never)}</span>
-            {!options.showNowPlayingList && (
-              <Badge className={classes.nowPlayingCount} variant="light" size="sm">
-                {(t as unknown as (key: string, params?: { count: number }) => string)("nowPlayingCount", {
-                  count: navidromeStats.nowPlaying.length,
-                })}
-              </Badge>
-            )}
-          </div>
-          {options.showNowPlayingList && (
-            <div className={classes.nowPlayingList}>
-              {nowPlayingTracks.map((track, index) => (
-                <div key={`${track.username}-${track.title}-${index}`} className={classes.nowPlayingItem}>
-                  <div className={classes.trackInfo}>
-                    <span className={classes.trackTitle}>{track.title}</span>
-                    <span className={classes.trackArtist}>
-                      {[track.artist, track.album].filter(Boolean).join(" · ")}
-                    </span>
-                  </div>
-                  <Badge className={classes.trackUser} variant="outline" size="xs">
-                    {track.username || track.playerName}
-                  </Badge>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      {!hasContent && (
+      {visibleStats.length === 0 && (
         <div className={classes.emptyState}>
           <Text size="sm" c="dimmed">
             —

packages/widgets/src/audio-stats/audio-stats-shared.spec.ts

@@ -42,7 +42,6 @@ describe("getVisibleStats", () => {
     artistCount: 100,
     albumCount: 200,
     songCount: 3000,
-    nowPlaying: [],
   };
 
   const audiobookshelfStats: AudiobookshelfDashboardData = {

packages/widgets/src/audio-stats/component.module.css

@@ -87,92 +87,6 @@
   font-size: clamp(11px, 4cqi, 16px);
 }
 
-.nowPlaying {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(3px, 1.2cqi, 5px);
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.nowPlayingHeader {
-  display: flex;
-  align-items: center;
-  gap: clamp(4px, 1.5cqi, 6px);
-  font-size: clamp(10px, 2.8cqi, 12px);
-  font-weight: 600;
-  flex-shrink: 0;
-  min-width: 0;
-}
-
-.nowPlayingTitle {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.nowPlayingCount {
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-
-.nowPlayingList {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(2px, 0.8cqi, 4px);
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.nowPlayingItem {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: clamp(4px, 1.5cqi, 6px);
-  padding: clamp(3px, 1.2cqi, 6px) clamp(4px, 1.5cqi, 8px);
-  border-radius: var(--mantine-radius-sm);
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  min-width: 0;
-  flex-shrink: 0;
-}
-
-.trackInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-  flex: 1;
-}
-
-.trackTitle {
-  font-size: clamp(9px, 2.6cqi, 12px);
-  font-weight: 500;
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.trackArtist {
-  font-size: clamp(8px, 2.2cqi, 10px);
-  color: var(--mantine-color-dimmed);
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.trackUser {
-  flex-shrink: 0;
-  max-width: clamp(40px, 22cqi, 88px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .emptyState {
   display: flex;
   flex: 1;

packages/widgets/src/audio-stats/index.ts

@@ -1,5 +1,4 @@
 import { IconHeadphones, IconServerOff } from "@tabler/icons-react";
-import { z } from "zod/v4";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
@@ -23,14 +22,6 @@ export const { definition, componentLoader } = createWidgetDefinition("audioStat
         showArtists: factory.switch({ defaultValue: true, withDescription: true }),
         showAlbums: factory.switch({ defaultValue: true, withDescription: true }),
         showSongs: factory.switch({ defaultValue: true, withDescription: true }),
-        showNowPlaying: factory.switch({ defaultValue: true, withDescription: true }),
-        showNowPlayingList: factory.switch({ defaultValue: true, withDescription: true }),
-        maxNowPlayingItems: factory.number({
-          defaultValue: 3,
-          validate: z.number().min(1).max(5),
-          step: 1,
-          withDescription: true,
-        }),
         showLibraryCount: factory.switch({ defaultValue: true, withDescription: true }),
         showAudiobooks: factory.switch({ defaultValue: true, withDescription: true }),
         showPodcasts: factory.switch({ defaultValue: true, withDescription: true }),
@@ -42,9 +33,6 @@ export const { definition, componentLoader } = createWidgetDefinition("audioStat
         showArtists: hideUnlessNavidrome,
         showAlbums: hideUnlessNavidrome,
         showSongs: hideUnlessNavidrome,
-        showNowPlaying: hideUnlessNavidrome,
-        showNowPlayingList: hideUnlessNavidrome,
-        maxNowPlayingItems: hideUnlessNavidrome,
         showLibraryCount: hideUnlessAudiobookshelf,
         showAudiobooks: hideUnlessAudiobookshelf,
         showPodcasts: hideUnlessAudiobookshelf,

packages/widgets/src/audio-stats/shared.ts

@@ -19,9 +19,6 @@ export interface NavidromeDisplayOptions {
   showArtists: boolean;
   showAlbums: boolean;
   showSongs: boolean;
-  showNowPlaying: boolean;
-  showNowPlayingList: boolean;
-  maxNowPlayingItems: number;
   compactMode?: boolean;
 }
 

packages/widgets/src/downloads/index.ts

@@ -8,28 +8,37 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 const columnsList = [
-  "id",
-  "actions",
-  "added",
-  "category",
-  "downSpeed",
-  "index",
-  "integration",
   "name",
   "progress",
+  "size",
+  "downSpeed",
+  "upSpeed",
+  "time",
+  "state",
+  "added",
   "ratio",
   "received",
   "sent",
-  "size",
-  "state",
-  "time",
+  "category",
+  "integration",
+  "index",
   "type",
-  "upSpeed",
 ] as const satisfies (keyof ExtendedDownloadClientItem)[];
-const sortingExclusion = ["actions", "id", "state"] as const satisfies readonly (typeof columnsList)[number][];
-const columnsSort = columnsList.filter((column) =>
-  sortingExclusion.every((exclusion) => exclusion !== column),
-) as Exclude<typeof columnsList, (typeof sortingExclusion)[number]>;
+
+const sortColumns = [
+  "name",
+  "progress",
+  "size",
+  "downSpeed",
+  "upSpeed",
+  "time",
+  "added",
+  "ratio",
+  "received",
+  "sent",
+  "index",
+  "type",
+] as const satisfies readonly (typeof columnsList)[number][];
 
 export const { definition, componentLoader } = createWidgetDefinition("downloads", {
   icon: IconDownload,
@@ -38,19 +47,16 @@ export const { definition, componentLoader } = createWidgetDefinition("downloads
     return optionsBuilder.from(
       (factory) => ({
         columns: factory.multiSelect({
-          defaultValue: ["integration", "name", "progress", "time", "actions"],
+          defaultValue: ["name", "progress", "downSpeed", "time", "state"],
           options: columnsList.map((value) => ({
             value,
             label: (t) => t(`widget.downloads.items.${value}.columnTitle`),
           })),
           searchable: true,
         }),
-        enableRowSorting: factory.switch({
-          defaultValue: false,
-        }),
         defaultSort: factory.select({
-          defaultValue: "type",
-          options: columnsSort.map((value) => ({
+          defaultValue: "progress",
+          options: sortColumns.map((value) => ({
             value,
             label: (t) => t(`widget.downloads.items.${value}.columnTitle`),
           })),
@@ -68,7 +74,6 @@ export const { definition, componentLoader } = createWidgetDefinition("downloads
           defaultValue: true,
         }),
         activeTorrentThreshold: factory.number({
-          //in KiB/s
           validate: z.number().min(0),
           defaultValue: 0,
           step: 1,
@@ -88,14 +93,12 @@ export const { definition, componentLoader } = createWidgetDefinition("downloads
           validate: z.number().min(1),
           withDescription: true,
         }),
+        columnOrder: factory.text({ defaultValue: "" }),
+        columnWidths: factory.text({ defaultValue: "" }),
       }),
       {
-        defaultSort: {
-          shouldHide: (options) => !options.enableRowSorting,
-        },
-        descendingDefaultSort: {
-          shouldHide: (options) => !options.enableRowSorting,
-        },
+        columnOrder: { shouldHide: () => true },
+        columnWidths: { shouldHide: () => true },
         showCompletedUsenet: {
           shouldHide: (_, integrationKinds) =>
             !getIntegrationKindsByCategory("usenet").some((kinds) => integrationKinds.includes(kinds)),

packages/widgets/src/downloads/styles.css

@@ -1,12 +1,52 @@
-/* Make the MantineReactTable transparent so the board card's opacity-controlled
-   background shows through. MRT defaults to var(--mantine-color-body) which is opaque. */
-.downloads-widget-table,
-.downloads-widget-table .mantine-Table-table,
-.downloads-widget-table .mantine-Table-thead,
-.downloads-widget-table .mantine-Table-tbody,
-.downloads-widget-table .mantine-Table-tfoot,
-.downloads-widget-table .mantine-Table-tr,
-.downloads-widget-table th,
-.downloads-widget-table td {
+/* Make the DataTable transparent so the board card's opacity-controlled
+   background shows through. The mantine-datatable defaults to
+   var(--mantine-color-body) which is opaque. */
+.downloads-table,
+.downloads-table .mantine-datatable-table,
+.downloads-table .mantine-datatable-table thead,
+.downloads-table .mantine-datatable-table tbody,
+.downloads-table .mantine-datatable-table tfoot,
+.downloads-table th,
+.downloads-table td {
   background-color: transparent !important;
 }
+
+.downloads-table .mantine-datatable-table tr {
+  background-color: transparent;
+}
+
+.downloads-table .mantine-datatable-table tbody tr:hover {
+  background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
+}
+
+.downloads-table th {
+  white-space: nowrap;
+  background-color: color-mix(in srgb, var(--mantine-color-body) 60%, transparent) !important;
+  backdrop-filter: blur(8px);
+}
+
+.downloads-table td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.downloads-table td .mantine-Text-root,
+.downloads-table td .mantine-Group-root {
+  white-space: nowrap;
+  flex-wrap: nowrap;
+}
+
+.downloads-table .mantine-datatable-header-cell-sortable-icon {
+  opacity: 0;
+  transition: opacity 150ms;
+}
+
+.downloads-table th:hover .mantine-datatable-header-cell-sortable-icon {
+  opacity: 1;
+}
+
+/* Row expansion styling */
+.downloads-table .mantine-datatable-row-expansion-cell {
+  background-color: color-mix(in srgb, var(--mantine-color-body) 40%, transparent) !important;
+}