fix(media-requests): cache statistics responses

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

@@ -1,622 +0,0 @@
-# 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

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

@@ -4,7 +4,6 @@ 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';
@@ -15,6 +14,9 @@ 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 '.';
 
 
@@ -23,37 +25,16 @@ 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. It supports 7 download client integrations and provides a rich, responsive table interface.
+This widget displays a list of torrents or usenet-articles that are currently being downloaded, along with their progress and other relevant information.
 
 ### Screenshots
 
 import downloadsCard from './img/screenshot.png';
-import contextMenuImg from './img/context-menu.png';
 
 <div>
-    <img src={downloadsCard} alt="Downloads widget showing torrent and usenet items" width={128 * 4} />
+    <img src={downloadsCard} alt="downloads" 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={[{
@@ -71,23 +52,16 @@ import contextMenuImg from './img/context-menu.png';
 }, {
   integration: qBittorentIntegration,
   note: "Torrent client"
-}, {
-  integration: aria2Integration,
-  note: "Multi-protocol download client"
 }, {
   integration: slskdIntegration,
-  note: "Soulseek client (read-only)"
+  note: "Soulseek client"
 }]} />
 
 ### Interactions
 
-- **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)
+- 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.
 
 ### Adding the widget
 

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

@@ -2,23 +2,26 @@ 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",
-  "category",
-  "integration",
-  "index",
+  "size",
+  "state",
+  "time",
   "type",
+  "upSpeed",
 ];
-const sortColumns = columnsList.filter((c) => !["state", "category", "integration"].includes(c));
+const sortingExclusion = ["actions", "id", "state"];
+const columnsSort = columnsList.filter((column) => !sortingExclusion.some((exclusion) => exclusion === column));
 
 export const downloadsWidget: WidgetDefinition = {
   icon: IconDownload,
@@ -29,20 +32,25 @@ export const downloadsWidget: WidgetDefinition = {
     items: [
       {
         name: "Columns to show",
-        description:
-          "Select the columns you want to display in the widget. Columns automatically hide/show based on widget width.",
+        description: "Select the columns you want to display in the widget.",
         values: `List of columns: ${columnsList.join(", ")}`,
-        defaultValue: ["name", "progress", "downSpeed", "time", "state"].join(", "),
+        defaultValue: ["integration", "name", "progress", "time", "actions"].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: "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: "Invert sorting",
-        description: "This will invert the default sorting order.",
+        description: "This will invert the sorting order of the table.",
         values: { type: "boolean" },
         defaultValue: "no",
       },
@@ -68,13 +76,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 0, 0 to disable",
+        values: "Any number above 1, 0 to disable",
         defaultValue: "0",
       },
       {
-        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",
+        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",
         defaultValue: "-",
       },
       {
@@ -86,13 +94,13 @@ export const downloadsWidget: WidgetDefinition = {
       },
       {
         name: "Use filter to calculate Ratio",
-        description: "This will use the category filter when calculating the global torrent ratio.",
+        description: "This will use the filter to calculate the ratio of items shown in the widget.",
         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/immich-album-carousel/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Immich Album Carousel'
-description: 'Shows a slideshow of your album pictures from Immich'
+description: 'Shows a slideshow of pictures from an Immich album or your full library'
 hide_title: true
 ---
 
@@ -37,4 +37,3 @@ import screen from './img/screen.png';
 
 ### Configuration
 <WidgetConfig configuration={immichAlbumCarouselWidget.configuration} />
-

apps/docs/docs/widgets/immich-album-carousel/index.ts

@@ -4,15 +4,16 @@ import { IconPhoto } from "@tabler/icons-react";
 export const immichAlbumCarouselWidget: WidgetDefinition = {
   icon: IconPhoto,
   name: "Immich Album",
-  description: "Shows a slideshow of your album pictures from Immich",
+  description: "Shows a slideshow of pictures from an Immich album or your full library",
   path: "../../widgets/immich-album-carousel",
   configuration: {
     items: [
       {
         name: "Album",
-        description: "Select the Immich album to show in the slideshow.",
+        description:
+          "Select an Immich album or All photos. An empty selection also shows random photos from your full library.",
         values: { type: "string" },
-        defaultValue: "",
+        defaultValue: "All photos",
       },
       {
         name: "Interval in seconds",

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

@@ -16,7 +16,10 @@ export default async function AppEditPage(props: AppEditPageProps) {
   const params = await props.params;
   const session = await auth();
 
-  if (!session?.user.permissions.includes("app-modify-all")) {
+  if (
+    !session?.user.permissions.includes("board-modify-all") ||
+    !session?.user.permissions.includes("app-modify-all")
+  ) {
     notFound();
   }
   const app = await api.app.byId({ id: params.id });

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

@@ -10,7 +10,7 @@ import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 export default async function AppNewPage() {
   const session = await auth();
 
-  if (!session?.user.permissions.includes("app-create")) {
+  if (!session?.user.permissions.includes("board-modify-all") || !session?.user.permissions.includes("app-create")) {
     notFound();
   }
 

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, Card, Group, Stack, Text } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";
@@ -33,6 +33,9 @@ export default async function AppsPage(props: AppsPageProps) {
   if (!session) {
     redirect("/auth/login");
   }
+  if (!session.user.permissions.includes("board-modify-all")) {
+    notFound();
+  }
 
   const searchParams = searchParamsSchema.parse(await props.searchParams);
 

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

@@ -61,7 +61,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       icon: IconBox,
       href: "/manage/apps",
       label: t("items.apps"),
-      hidden: !session,
+      hidden: !session?.user.permissions.includes("board-modify-all"),
       iconProps: {
         strokeWidth: 2.5,
       },

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("board-modify-all")
     .input(paginatedSchema)
     .output(z.object({ items: z.array(selectAppSchema), totalCount: z.number() }))
     .meta({

packages/api/src/router/home.ts

@@ -101,7 +101,7 @@ export const homeRouter = createTRPCRouter({
       });
     }
 
-    if (ctx.session?.user) {
+    if (ctx.session?.user.permissions.includes("board-modify-all")) {
       statistics.push({
         titleKey: "app",
         subtitleKey: "resources",

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

@@ -76,6 +76,33 @@ describe("all should return all apps", () => {
   });
 });
 
+describe("getPaginated should require board modification access", () => {
+  test("should throw FORBIDDEN without board-modify-all", async () => {
+    const caller = appRouter.createCaller({
+      db: createDb(),
+      deviceType: undefined,
+      session: createDefaultSession(),
+    });
+
+    await expect(caller.getPaginated({ page: 1, pageSize: 10 })).rejects.toThrow("Permission denied");
+  });
+
+  test("should return apps with board-modify-all", 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" });
+
+    await expect(caller.getPaginated({ page: 1, pageSize: 10 })).resolves.toMatchObject({
+      totalCount: 1,
+      items: [{ id: "1" }],
+    });
+  });
+});
+
 describe("byId should return an app by id", () => {
   test("should return an app by id when canUserSeeAppAsync returns true", async () => {
     // Arrange

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

@@ -25,7 +25,7 @@ export const immichRouter = createTRPCRouter({
     .concat(createImmichIntegrationMiddleware("query"))
     .input(
       z.object({
-        albumId: z.string(),
+        albumId: z.string().optional(),
       }),
     )
     .query(async ({ ctx, input }) => {

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 });
+    const torrents = await client.listTorrents({ limit: input.limit, sort: "progress", reverse: false });
     const rates = torrents.reduce(
       ({ down, up }, { dlspeed, upspeed }) => ({ down: down + dlspeed, up: up + upspeed }),
       { down: 0, up: 0 },

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

@@ -1,11 +1,14 @@
 import {
   AssetMediaSize,
+  AssetTypeEnum,
+  AssetVisibility,
   getAlbumInfo,
   getAllAlbums,
   getMyUser,
   getServerStatistics,
   init,
   searchAssets,
+  searchRandom,
   searchUsers,
 } from "@immich/sdk";
 import type { AssetResponseDto, MetadataSearchDto } from "@immich/sdk";
@@ -43,6 +46,7 @@ export interface ImmichAsset {
 }
 
 const logger = createLogger({ module: "immich-integration" });
+const randomPhotoCount = 50;
 
 export class ImmichIntegration extends Integration {
   constructor(integration: IntegrationInput) {
@@ -63,38 +67,36 @@ export class ImmichIntegration extends Integration {
     };
   }
 
-  public async getAlbumAsync(albumId: string): Promise<ImmichAlbum> {
+  public async getAlbumAsync(albumId?: string): Promise<ImmichAlbum> {
     this.initClient();
     const requestOptions = this.getRequestOptions();
+
+    if (!albumId) {
+      const assets = await searchRandom(
+        {
+          randomSearchDto: {
+            size: randomPhotoCount,
+            type: AssetTypeEnum.Image,
+            visibility: AssetVisibility.Timeline,
+          },
+        },
+        requestOptions,
+      );
+
+      return {
+        id: "",
+        albumName: "",
+        assets: await this.createAssetsAsync(assets),
+      };
+    }
+
     const [album, albumAssets] = await Promise.all([
       getAlbumInfo({ id: albumId }, requestOptions),
       this.searchAlbumAssetsAsync(albumId),
     ]);
-    const imageProxy = new ImageProxy();
     return {
       albumName: album.albumName,
-      assets: await Promise.all(
-        albumAssets.map(async (asset) => {
-          const publicLink = await imageProxy.createImageAsync(
-            // This is the URL generated by the SDK's viewAsset call. Preview images are
-            // browser-compatible while avoiding the large original asset download.
-            this.url(`/api/assets/${asset.id}/thumbnail`, { size: AssetMediaSize.Preview }).toString(),
-            {
-              "x-api-key": this.getSecretValue("apiKey"),
-            },
-          );
-          return {
-            id: asset.id,
-            type: asset.type,
-            thumbhash: asset.thumbhash,
-            fileCreatedAt: asset.fileCreatedAt,
-            fileModifiedAt: asset.fileModifiedAt,
-            originalPath: asset.originalPath,
-            updatedAt: asset.updatedAt,
-            publicLink,
-          };
-        }),
-      ),
+      assets: await this.createAssetsAsync(albumAssets),
       id: album.id,
     };
   }
@@ -136,6 +138,32 @@ export class ImmichIntegration extends Integration {
     return assets;
   }
 
+  private async createAssetsAsync(assets: AssetResponseDto[]): Promise<ImmichAsset[]> {
+    const imageProxy = new ImageProxy();
+    return await Promise.all(
+      assets.map(async (asset) => {
+        const publicLink = await imageProxy.createImageAsync(
+          // This is the URL generated by the SDK's viewAsset call. Preview images are
+          // browser-compatible while avoiding the large original asset download.
+          this.url(`/api/assets/${asset.id}/thumbnail`, { size: AssetMediaSize.Preview }).toString(),
+          {
+            "x-api-key": this.getSecretValue("apiKey"),
+          },
+        );
+        return {
+          id: asset.id,
+          type: asset.type,
+          thumbhash: asset.thumbhash,
+          fileCreatedAt: asset.fileCreatedAt,
+          fileModifiedAt: asset.fileModifiedAt,
+          originalPath: asset.originalPath,
+          updatedAt: asset.updatedAt,
+          publicLink,
+        };
+      }),
+    );
+  }
+
   private getRequestOptions(fetchAsync = fetchWithTrustedCertificatesAsync) {
     return {
       // Undici and node types are not the same

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

@@ -74,16 +74,15 @@ 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", "state"],
-    defaultSort: () => "progress",
+    columns: () => ["integration", "name", "progress", "time", "actions"],
+    defaultSort: () => "type",
     descendingDefaultSort: () => false,
     showCompletedUsenet: () => true,
     showCompletedHttp: () => true,
     limitPerIntegration: () => undefined,
-    columnOrder: () => undefined,
-    columnWidths: () => undefined,
   },
   weather: {
     forecastDayCount: (oldOptions) => oldOptions.forecastDays,

packages/request-handler/src/immich.ts

@@ -33,7 +33,7 @@ export const immichAlbumsRequestHandler = createIntegrationRequestHandler<
 export const immichAlbumRequestHandler = createIntegrationRequestHandler<
   ImmichAlbum,
   IntegrationKindByCategory<"photoService">,
-  { albumId: string }
+  { albumId?: string }
 >({
   async requestAsync(integration, input) {
     const integrationInstance = await createIntegrationAsync(integration);

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

@@ -16,4 +16,6 @@ export const mediaRequestStatsRequestHandler = createIntegrationRequestHandler<
       users: await integrationInstance.getUsersAsync(),
     };
   },
+  cacheTtlMs: 60_000,
+  fallbackToStaleOnError: true,
 });

packages/request-handler/src/weather.ts

@@ -9,7 +9,7 @@ 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&current_weather=true&timezone=auto`,
+        `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 },
       );
     });
@@ -27,6 +27,7 @@ export const weatherRequestHandler = createWidgetRequestHandler({
           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;
@@ -48,6 +49,7 @@ const atLocationOutput = z.object({
     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()),
   }),
 });
 
@@ -66,5 +68,6 @@ export interface Weather {
     sunset: string | undefined;
     maxWindSpeed: number | undefined;
     maxWindGusts: number | undefined;
+    humidity: number | undefined;
   }[];
 }

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

@@ -17,6 +17,10 @@ export const appIntegrationBoardMode = {
       return groups;
     }
 
-    return groups.concat([appsSearchGroup, integrationsSearchGroup]);
+    return groups.concat(
+      session.user.permissions.includes("board-modify-all")
+        ? [appsSearchGroup, integrationsSearchGroup]
+        : [integrationsSearchGroup],
+    );
   },
 } satisfies SearchMode;

packages/spotlight/src/modes/command/global-group.tsx

@@ -87,7 +87,8 @@ export const globalCommandGroup = createGroup<Command>({
         icon: IconBox,
         name: tOption("newApp.label"),
         useInteraction: interaction.link(() => ({ href: "/manage/apps/new" })),
-        hidden: !session?.user.permissions.includes("app-create"),
+        hidden:
+          !session?.user.permissions.includes("board-modify-all") || !session?.user.permissions.includes("app-create"),
       },
       {
         commandKey: "newIntegration",

packages/spotlight/src/modes/page/pages-search-group.tsx

@@ -76,7 +76,7 @@ export const pagesSearchGroup = createGroup<{
         icon: IconBox,
         path: "/manage/apps",
         name: t("manageApp.label"),
-        hidden: !session,
+        hidden: !session?.user.permissions.includes("board-modify-all"),
       },
       {
         icon: IconPlug,

packages/translation/src/lang/en.json

@@ -2257,7 +2257,8 @@
         "sunrise": "Sunrise",
         "sunset": "Sunset",
         "maxWindSpeed": "Max wind speed: {maxWindSpeed} {unit}",
-        "maxWindGusts": "Max wind gusts: {maxWindGusts} {unit}"
+        "maxWindGusts": "Max wind gusts: {maxWindGusts} {unit}",
+        "humidity": "Humidity: {humidity}%"
       },
       "kind": {
         "clear": "Clear",
@@ -3006,10 +3007,11 @@
     },
     "immich-albumCarousel": {
       "name": "Immich Album",
+      "allPhotos": "All photos",
       "option": {
         "albumId": {
           "label": "Album",
-          "description": "Select the Immich album to show in the slideshow."
+          "description": "Select an Immich album or All photos. An empty selection also shows random photos from your full library."
         },
         "rotationIntervalSeconds": {
           "label": "Interval in seconds",
@@ -3024,9 +3026,8 @@
           "description": "Show photos in a random order instead of always starting with the same album order."
         }
       },
-      "description": "Slideshow of pictures in your Immich album",
-      "noAlbumSelected": "No album selected, edit widget and choose an album",
-      "noPhotos": "No photos in this album"
+      "description": "Slideshow of pictures from an Immich album or your full library",
+      "noPhotos": "No photos found"
     },
     "downloads": {
       "name": "Download Client",
@@ -3068,20 +3069,11 @@
         "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",
-        "noItems": "No downloads found",
-        "actionFailed": "Action failed",
-        "actionFailedMessage": "The action could not be completed. Please try again."
+        "noCommunications": "Can't load data from integration"
       },
       "items": {
         "actions": {
@@ -3104,8 +3096,7 @@
           "detailsTitle": "Current index within client"
         },
         "id": {
-          "columnTitle": "Id",
-          "detailsTitle": "Item ID"
+          "columnTitle": "Id"
         },
         "integration": {
           "columnTitle": "Integration"
@@ -3139,8 +3130,7 @@
         },
         "time": {
           "columnTitle": "Finish time",
-          "detailsTitle": "Time since/to completion",
-          "eta": "ETA"
+          "detailsTitle": "Time since/to completion"
         },
         "type": {
           "columnTitle": "Type",
@@ -3184,23 +3174,7 @@
           }
         }
       },
-      "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)"
+      "globalRatio": "Global Ratio"
     },
     "mediaReleases": {
       "name": "Media releases",

packages/widgets/src/downloads/index.ts

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

packages/widgets/src/downloads/styles.css

@@ -1,52 +1,12 @@
-/* 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 {
+/* 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 {
   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;
-}

packages/widgets/src/immich/album-carousel/component.tsx

@@ -11,6 +11,7 @@ import { useI18n } from "@homarr/translation/client";
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
 import classes from "./component.module.css";
+import { ALL_PHOTOS_ALBUM_ID } from "./constants";
 
 export default function ImmichAlbumCarouselWidget({
   integrationIds,
@@ -21,9 +22,9 @@ export default function ImmichAlbumCarouselWidget({
   const { data: album } = clientApi.widget.immich.getAlbum.useQuery(
     {
       integrationId: integrationIds[0] ?? "",
-      albumId: options.albumId ?? "",
+      albumId: options.albumId && options.albumId !== ALL_PHOTOS_ALBUM_ID ? options.albumId : undefined,
     },
-    { enabled: Boolean(options.albumId) },
+    { enabled: integrationIds.length > 0 },
   );
 
   const photoAssets = useMemo(() => {
@@ -35,10 +36,6 @@ export default function ImmichAlbumCarouselWidget({
     setCurrentPhotoIndex(0);
   }, [photoAssets]);
 
-  if (!options.albumId) {
-    return <NoAlbumSelected />;
-  }
-
   if (!album) return <WidgetEmptyState />;
 
   if (album.assets.length === 0) {
@@ -117,20 +114,6 @@ function Carousel({ assets, currentIndex, setCurrentIndex, rotationInterval, sho
   );
 }
 
-function NoAlbumSelected() {
-  const t = useI18n();
-  return (
-    <Center h="100%">
-      <Stack align="center" gap="xs">
-        <IconAlertCircle size={32} />
-        <Text size="sm" fw={500}>
-          {t("widget.immich-albumCarousel.noAlbumSelected")}
-        </Text>
-      </Stack>
-    </Center>
-  );
-}
-
 function NoPhotosInAlbum() {
   const t = useI18n();
   return (

packages/widgets/src/immich/album-carousel/constants.ts

@@ -0,0 +1 @@
+export const ALL_PHOTOS_ALBUM_ID = "all";

packages/widgets/src/immich/album-carousel/index.ts

@@ -2,9 +2,11 @@ import { IconPhoto } from "@tabler/icons-react";
 import z from "zod";
 
 import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import { createWidgetDefinition } from "../../definition";
 import { optionsBuilder } from "../../options";
+import { ALL_PHOTOS_ALBUM_ID } from "./constants";
 
 export const { definition, componentLoader } = createWidgetDefinition("immich-albumCarousel", {
   icon: IconPhoto,
@@ -15,9 +17,11 @@ export const { definition, componentLoader } = createWidgetDefinition("immich-al
   createOptions() {
     return optionsBuilder.from((factory) => ({
       albumId: factory.integrationSelect({
+        defaultValue: ALL_PHOTOS_ALBUM_ID,
         withDescription: true,
         clearable: true,
         useOptions: (integrationIds: string[]) => {
+          const t = useScopedI18n("widget.immich-albumCarousel");
           const {
             data = [],
             isPending,
@@ -26,7 +30,14 @@ export const { definition, componentLoader } = createWidgetDefinition("immich-al
             { integrationId: integrationIds[0] ?? "" },
             { enabled: integrationIds.length > 0, staleTime: 15 * 60 * 1000 },
           );
-          return { data: data.map((album) => ({ value: album.id, label: album.albumName })), isPending, isError };
+          return {
+            data: [
+              { value: ALL_PHOTOS_ALBUM_ID, label: t("allPhotos") },
+              ...data.map((album) => ({ value: album.id, label: album.albumName })),
+            ],
+            isPending,
+            isError,
+          };
         },
       }),
       rotationIntervalSeconds: factory.number({

packages/widgets/src/weather/component.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Box, Group, HoverCard, Stack, Text } from "@mantine/core";
-import { IconArrowDownRight, IconArrowUpRight, IconMapPin, IconWind } from "@tabler/icons-react";
+import { IconArrowDownRight, IconArrowUpRight, IconDroplets, IconMapPin, IconWind } from "@tabler/icons-react";
 import combineClasses from "clsx";
 import dayjs from "dayjs";
 
@@ -87,6 +87,12 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
             </Text>
           </Group>
         )}
+        {weather.daily[0]?.humidity !== undefined && (
+          <Group className="weather-humidity-group" wrap="nowrap" gap="xs">
+            <IconDroplets size={16} />
+            <Text fz={16}>{t("dailyForecast.humidity", { humidity: weather.daily[0].humidity })}</Text>
+          </Group>
+        )}
         <Group className="weather-max-min-temp-group" wrap="nowrap" gap="sm">
           <Group gap="xs" wrap="nowrap">
             <IconArrowUpRight size={16} />
@@ -204,6 +210,7 @@ function Forecast({ weather, options }: WeatherProps) {
               sunset={dayjs(dayWeather.sunset).format("HH:mm")}
               maxWindSpeed={dayWeather.maxWindSpeed}
               maxWindGusts={dayWeather.maxWindGusts}
+              humidity={dayWeather.humidity}
             />
           </HoverCard.Dropdown>
         </HoverCard>

packages/widgets/src/weather/icon.tsx

@@ -5,6 +5,7 @@ import {
   IconCloudRain,
   IconCloudSnow,
   IconCloudStorm,
+  IconDroplets,
   IconMoon,
   IconQuestionMark,
   IconSnowflake,
@@ -51,6 +52,7 @@ interface WeatherDescriptionProps {
   sunset?: string;
   maxWindSpeed?: number;
   maxWindGusts?: number;
+  humidity?: number;
 }
 
 /**
@@ -78,6 +80,7 @@ export const WeatherDescription = ({
   sunset,
   maxWindSpeed,
   maxWindGusts,
+  humidity,
 }: WeatherDescriptionProps) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
@@ -97,6 +100,9 @@ export const WeatherDescription = ({
         <List.Item icon={<IconTemperatureMinus size={15} />}>{`${tCommon("information.min")}: ${minTemp}`}</List.Item>
         <List.Item icon={<IconSun size={15} />}>{`${t("dailyForecast.sunrise")}: ${sunrise}`}</List.Item>
         <List.Item icon={<IconMoon size={15} />}>{`${t("dailyForecast.sunset")}: ${sunset}`}</List.Item>
+        {humidity !== undefined && (
+          <List.Item icon={<IconDroplets size={15} />}>{t("dailyForecast.humidity", { humidity })}</List.Item>
+        )}
         {maxWindSpeed !== undefined && (
           <List.Item icon={<IconWind size={15} />}>
             {t("dailyForecast.maxWindSpeed", {