fix(widgets): prevent stale cache from serving errored data

Add two layers on top of PR #6399's error boundary recovery:

Layer 1 — QueryCache subscriber (query-cache-error-cleanup.ts):
Subscribe to QueryCache events. When a persistable query transitions
from success to error, resetQueries clears stale data so widgets show
error/loading UI instead of rendering incompatible cached values.
Uses resetQueries (not removeQueries) so active observers get a
refetch triggered rather than being orphaned with a destroyed query.

Layer 2 — Rehydration invalidation (trpc.tsx):
Add onSuccess callback to PersistQueryClientProvider that invalidates
all persistable queries after rehydration. Combined with staleTime: 0,
this ensures rehydrated persisted data is immediately marked stale and
refetches on mount rather than being served as fresh.

Closes #6398

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]/_client-providers/query-cache-error-cleanup.ts

@@ -0,0 +1,29 @@
+import type { QueryClient } from "@tanstack/react-query";
+
+import { isPersistableWidgetQueryKey } from "@homarr/api/query-cache";
+
+export const createQueryCacheErrorCleanup = (queryClient: QueryClient): (() => void) => {
+  const wasSuccessful = new Set<string>();
+
+  return queryClient.getQueryCache().subscribe((event) => {
+    const query = event.query;
+    const key = query.queryHash;
+
+    if (event.type === "removed") {
+      wasSuccessful.delete(key);
+      return;
+    }
+
+    if (event.type !== "updated") return;
+
+    if (query.state.status === "success" && isPersistableWidgetQueryKey(query.queryKey)) {
+      wasSuccessful.add(key);
+      return;
+    }
+
+    if (query.state.status === "error" && wasSuccessful.has(key)) {
+      queryClient.resetQueries({ queryKey: query.queryKey, exact: true });
+      wasSuccessful.delete(key);
+    }
+  });
+};

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { QueryKey } from "@tanstack/react-query";
 import { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
@@ -36,6 +36,7 @@ import { env } from "@homarr/common/env";
 import { showWarningNotification } from "@homarr/notifications";
 import { widgetImports } from "@homarr/widgets";
 
+import { createQueryCacheErrorCleanup } from "./query-cache-error-cleanup";
 import { createWidgetQueryPersister } from "./query-cache-persister";
 
 const getWebSocketProtocol = () => {
@@ -102,6 +103,10 @@ export function TRPCReactProvider(props: PropsWithChildren) {
     return client;
   });
 
+  useEffect(() => {
+    return createQueryCacheErrorCleanup(queryClient);
+  }, [queryClient]);
+
   const [trpcClient] = useState(() => {
     return clientApi.createClient({
       links: [
@@ -162,6 +167,9 @@ export function TRPCReactProvider(props: PropsWithChildren) {
               query.state.status === "success" && isPersistableWidgetQueryKey(query.queryKey),
           },
         }}
+        onSuccess={() => {
+          queryClient.invalidateQueries({ predicate: (query) => isPersistableWidgetQueryKey(query.queryKey) });
+        }}
       >
         <ReactQueryStreamedHydration transformer={superjson}>{props.children}</ReactQueryStreamedHydration>
         <ReactQueryDevtools initialIsOpen={false} />

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,157 @@
+import { QueryClient } from "@tanstack/react-query";
+import { describe, expect, test } from "vitest";
+
+import { isPersistableWidgetQueryKey } from "@homarr/api/query-cache";
+
+import { createQueryCacheErrorCleanup } from "~/app/[locale]/_client-providers/query-cache-error-cleanup";
+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");
+  });
+});
+
+describe("query cache error cleanup", () => {
+  test("resets data when a persistable query transitions from success to error", async () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const unsubscribe = createQueryCacheErrorCleanup(queryClient);
+
+    const widgetKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
+    const userKey = [["user", "me"], { input: {} }];
+
+    queryClient.setQueryData(widgetKey, { old: true });
+    queryClient.setQueryData(userKey, { user: true });
+
+    await queryClient
+      .fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.reject(new Error("API down")) })
+      .catch(() => {});
+
+    expect(queryClient.getQueryData(widgetKey)).toBeUndefined();
+    expect(queryClient.getQueryData(userKey)).toEqual({ user: true });
+
+    unsubscribe();
+  });
+
+  test("preserves stale data for non-persistable query errors", async () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const unsubscribe = createQueryCacheErrorCleanup(queryClient);
+
+    const boardKey = [["board", "getBoardByName"], { input: {} }];
+
+    queryClient.setQueryData(boardKey, { boards: [] });
+
+    await queryClient
+      .fetchQuery({ queryKey: boardKey, queryFn: () => Promise.reject(new Error("API down")) })
+      .catch(() => {});
+
+    expect(queryClient.getQueryData(boardKey)).toEqual({ boards: [] });
+
+    unsubscribe();
+  });
+
+  test("handles success→error→success→error cycling without getting stuck", async () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const unsubscribe = createQueryCacheErrorCleanup(queryClient);
+
+    const widgetKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
+
+    queryClient.setQueryData(widgetKey, "first-success");
+    await queryClient.fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.resolve("second-success") });
+    expect(queryClient.getQueryData(widgetKey)).toBe("second-success");
+
+    await queryClient
+      .fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.reject(new Error("boom")) })
+      .catch(() => {});
+    expect(queryClient.getQueryData(widgetKey)).toBeUndefined();
+
+    await queryClient.fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.resolve("third-success") });
+    expect(queryClient.getQueryData(widgetKey)).toBe("third-success");
+
+    await queryClient
+      .fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.reject(new Error("boom-2")) })
+      .catch(() => {});
+    expect(queryClient.getQueryData(widgetKey)).toBeUndefined();
+
+    unsubscribe();
+  });
+
+  test("unsubscribe stops processing further events", async () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const unsubscribe = createQueryCacheErrorCleanup(queryClient);
+
+    const widgetKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
+    queryClient.setQueryData(widgetKey, "stale");
+
+    unsubscribe();
+
+    await queryClient
+      .fetchQuery({ queryKey: widgetKey, queryFn: () => Promise.reject(new Error("API down")) })
+      .catch(() => {});
+
+    expect(queryClient.getQueryData(widgetKey)).toBe("stale");
+  });
+});
+
+describe("rehydration marks persistable data as stale", () => {
+  test("rehydrated queries are invalidated so they refetch on mount", async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false, staleTime: 0 } },
+    });
+
+    const widgetKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
+    const userKey = [["user", "me"], { input: {} }];
+
+    queryClient.setQueryData(widgetKey, { rehydrated: true });
+    queryClient.setQueryData(userKey, { rehydrated: true });
+
+    queryClient.invalidateQueries({ predicate: (query) => isPersistableWidgetQueryKey(query.queryKey) });
+
+    expect(queryClient.getQueryState(widgetKey)?.isInvalidated).toBe(true);
+    expect(queryClient.getQueryState(userKey)?.isInvalidated).toBe(false);
+  });
+});

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) });
+};

deployments/prebuilt-debian/package.json

@@ -6,7 +6,7 @@
   },
   "engines": {
     "node": ">=24.18.0",
-    "pnpm": ">=11.11.0"
+    "pnpm": ">=11.13.1"
   },
-  "packageManager": "pnpm@11.11.0"
+  "packageManager": "pnpm@11.13.1"
 }

package.json

@@ -69,7 +69,7 @@
   },
   "engines": {
     "node": ">=24.18.0",
-    "pnpm": ">=11.11.0"
+    "pnpm": ">=11.13.1"
   },
-  "packageManager": "pnpm@11.11.0"
+  "packageManager": "pnpm@11.13.1"
 }

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

@@ -271,6 +271,7 @@ export const onboardRouter = createTRPCRouter({
   setupIntegrations: onboardingProcedure.requiresStep("integrations").mutation(async ({ ctx }) => {
     const db = ctx.db;
 
+    const allIntegrations = await db.query.integrations.findMany();
     const allApps = await db.query.apps.findMany();
 
     const board = await db.query.boards.findFirst({
@@ -315,6 +316,7 @@ export const onboardRouter = createTRPCRouter({
           layoutId: layout.id,
           columnCount: layout.columnCount,
         },
+        allIntegrations,
         allApps,
       );
     }

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/db/migrations/seed.ts

@@ -698,11 +698,13 @@ const seedBoardWidgetsAsync = async (db: Database) => {
   const layout = board.layouts[0];
   if (!section || !layout) return;
 
+  const allIntegrations = await db.query.integrations.findMany();
   const allApps = await db.query.apps.findMany();
 
   const count = await placeAllWidgetsAsync(
     db,
     { boardId: board.id, sectionId: section.id, layoutId: layout.id, columnCount: layout.columnCount },
+    allIntegrations,
     allApps,
   );
 

packages/db/queries/widget-placement.ts

@@ -1,11 +1,19 @@
-import { stringify } from "superjson";
+import superjson from "superjson";
 
 import { createId } from "@homarr/common";
-import { defaultBookmarkApps, defaultWidgetConfigs, emptySuperJSON } from "@homarr/definitions";
+import {
+  defaultBookmarkApps,
+  defaultWidgetConfigs,
+  emptySuperJSON,
+  getWidgetKindsForIntegration,
+} from "@homarr/definitions";
 import type { WidgetKind } from "@homarr/definitions";
 
 import type { Database } from "..";
 import { integrationItems, itemLayouts, items } from "../schema";
+import type { Integration } from "../schema";
+
+const widgetConfigMap = new Map(defaultWidgetConfigs.map((config) => [config.kind, config]));
 
 interface BoardTarget {
   boardId: string;
@@ -69,7 +77,12 @@ interface App {
   name: string;
 }
 
-export const placeAllWidgetsAsync = async (db: Database, target: BoardTarget, allApps: App[]) => {
+export const placeAllWidgetsAsync = async (
+  db: Database,
+  target: BoardTarget,
+  allIntegrations: Integration[],
+  allApps: App[],
+) => {
   const ctx: PlacementContext = {
     ...target,
     xOffset: 0,
@@ -79,11 +92,38 @@ export const placeAllWidgetsAsync = async (db: Database, target: BoardTarget, al
 
   const placedWidgets = new Set<WidgetKind>();
 
+  for (const integration of allIntegrations) {
+    for (const widgetKind of getWidgetKindsForIntegration(integration.kind)) {
+      if (placedWidgets.has(widgetKind)) continue;
+      const config = widgetConfigMap.get(widgetKind);
+      if (config?.skip) continue;
+      placedWidgets.add(widgetKind);
+
+      const matchingIds = allIntegrations
+        .filter((row) => getWidgetKindsForIntegration(row.kind).includes(widgetKind))
+        .map((row) => row.id);
+
+      const options = config?.options ? superjson.stringify(config.options) : undefined;
+      await placeWidgetAsync(
+        db,
+        ctx,
+        widgetKind,
+        matchingIds,
+        options,
+        config && { width: config.width, height: config.height },
+      );
+    }
+  }
+
   for (const app of allApps) {
-    await placeWidgetAsync(db, ctx, "app", [], stringify({ appId: app.id, openInNewTab: true, showTitle: true }), {
-      width: 1,
-      height: 1,
-    });
+    await placeWidgetAsync(
+      db,
+      ctx,
+      "app",
+      [],
+      superjson.stringify({ appId: app.id, openInNewTab: true, showTitle: true }),
+      { width: 1, height: 1 },
+    );
   }
 
   const bookmarkAppNames = new Set(defaultBookmarkApps.map((bookmark) => bookmark.name));
@@ -98,7 +138,7 @@ export const placeAllWidgetsAsync = async (db: Database, target: BoardTarget, al
       options = { ...options, items: bookmarkAppIds };
     }
 
-    await placeWidgetAsync(db, ctx, config.kind, [], options ? stringify(options) : undefined, {
+    await placeWidgetAsync(db, ctx, config.kind, [], options ? superjson.stringify(options) : undefined, {
       width: config.width,
       height: config.height,
     });

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/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/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/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",

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/media-server/component.tsx

@@ -66,10 +66,12 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
           const currentlyPlaying = row.original.currentlyPlaying;
           if (!currentlyPlaying) return null;
 
-          const isPaused = currentlyPlaying.playback.state === "paused";
+          const playback = currentlyPlaying.playback;
+          const isPaused = playback?.state === "paused";
           const Icon = isPaused ? IconPlayerPause : mediaTypeIconMap[currentlyPlaying.type];
 
-          const { positionMs, durationMs } = currentlyPlaying.playback;
+          const positionMs = playback?.positionMs ?? null;
+          const durationMs = playback?.durationMs ?? null;
           const progressPercent =
             positionMs !== null && durationMs !== null && durationMs > 0
               ? Math.min(100, Math.round((positionMs / durationMs) * 100))

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", {