fix: remove auto-placement of widgets for all integrations on new boards

The seed pipeline and onboarding flow auto-placed a widget for every
integration that existed in the database. This is overly aggressive
and places obscure widgets (like ArchiveTeam Warrior) on every new
dashboard. Now only explicitly listed default widgets (clock, weather,
bookmarks) and apps are placed automatically.

apps/docs/docs/integrations/immich/index.mdx

@@ -50,12 +50,11 @@ import { immichServerStatsWidget } from '../../widgets/immich-server-stats';
     <code>user.read</code>,{" "}
     <code>user.update</code>,{" "}
     <code>asset.read</code>,{" "}
+    <code>asset.view</code>,{" "}
     <code>asset.download</code>,{" "}
     <code>asset.statistics</code>,{" "}
     <code>server.statistics</code>,{" "}
     <code>server.about</code>.
-    <br />
-    Additional permissions may be required depending on your Immich version. If you encounter authorization errors, grant any missing permissions requested by the server.
   </span>
 
 ),

apps/nextjs/src/app/api/image-proxy/[id]/route.ts

@@ -1,19 +1,25 @@
-import { notFound } from "next/navigation";
-
 import { ImageProxy } from "@homarr/image-proxy";
 
 export const GET = async (_request: Request, props: { params: Promise<{ id: string }> }) => {
   const { id } = await props.params;
 
   const imageProxy = new ImageProxy();
-  const image = await imageProxy.forwardImageAsync(id);
-  if (!image) {
-    notFound();
+  const result = await imageProxy.forwardImageAsync(id);
+
+  if ("error" in result) {
+    const status = result.error === "upstream-error" ? result.statusCode : result.error === "fetch-error" ? 502 : 404;
+    return new Response(null, {
+      status,
+      headers: {
+        "X-Homarr-Image-Proxy-Error": result.error,
+      },
+    });
   }
 
-  return new Response(image, {
+  return new Response(result.image, {
     headers: {
       "Cache-Control": "public, max-age=3600, immutable", // Cache for 1 hour
+      ...(result.contentType ? { "Content-Type": result.contentType } : {}),
     },
   });
 };

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

@@ -271,7 +271,6 @@ 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({
@@ -316,7 +315,6 @@ export const onboardRouter = createTRPCRouter({
           layoutId: layout.id,
           columnCount: layout.columnCount,
         },
-        allIntegrations,
         allApps,
       );
     }

packages/db/migrations/seed.ts

@@ -698,13 +698,11 @@ 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,19 +1,11 @@
-import superjson from "superjson";
+import { stringify } from "superjson";
 
 import { createId } from "@homarr/common";
-import {
-  defaultBookmarkApps,
-  defaultWidgetConfigs,
-  emptySuperJSON,
-  getWidgetKindsForIntegration,
-} from "@homarr/definitions";
+import { defaultBookmarkApps, defaultWidgetConfigs, emptySuperJSON } 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;
@@ -77,12 +69,7 @@ interface App {
   name: string;
 }
 
-export const placeAllWidgetsAsync = async (
-  db: Database,
-  target: BoardTarget,
-  allIntegrations: Integration[],
-  allApps: App[],
-) => {
+export const placeAllWidgetsAsync = async (db: Database, target: BoardTarget, allApps: App[]) => {
   const ctx: PlacementContext = {
     ...target,
     xOffset: 0,
@@ -92,38 +79,11 @@ export const placeAllWidgetsAsync = async (
 
   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",
-      [],
-      superjson.stringify({ appId: app.id, openInNewTab: true, showTitle: true }),
-      { width: 1, height: 1 },
-    );
+    await placeWidgetAsync(db, ctx, "app", [], stringify({ appId: app.id, openInNewTab: true, showTitle: true }), {
+      width: 1,
+      height: 1,
+    });
   }
 
   const bookmarkAppNames = new Set(defaultBookmarkApps.map((bookmark) => bookmark.name));
@@ -138,7 +98,7 @@ export const placeAllWidgetsAsync = async (
       options = { ...options, items: bookmarkAppIds };
     }
 
-    await placeWidgetAsync(db, ctx, config.kind, [], options ? superjson.stringify(options) : undefined, {
+    await placeWidgetAsync(db, ctx, config.kind, [], options ? stringify(options) : undefined, {
       width: config.width,
       height: config.height,
     });

packages/db/test/mysql-migration.spec.ts

@@ -37,5 +37,5 @@ describe("Mysql Migration", () => {
 
     connection.end();
     await mysqlContainer.stop();
-  }, 40_000);
+  }, 120_000);
 });

packages/definitions/src/integration.ts

@@ -467,7 +467,6 @@ export const integrationDefs = {
     iconUrl: "https://cdn.jsdelivr.net/gh/selfhst/icons/png/archiveteam-warrior.png",
     category: ["archiving"],
     documentationUrl: null,
-    defaultUrl: "http://localhost:8001",
   },
   // This integration only returns mock data, it is used during development (but can also be used in production by directly going to the create page)
   mock: {

packages/image-proxy/src/index.ts

@@ -19,6 +19,12 @@ const createUrlByIdChannel = (id: string) =>
     headers: `${string}.${string}`;
   }>(`image-proxy:url:${id}`);
 
+export type ForwardImageResult =
+  | { image: ArrayBuffer; contentType: string | null }
+  | { error: "not-found" }
+  | { error: "upstream-error"; statusCode: number }
+  | { error: "fetch-error" };
+
 export class ImageProxy {
   private static hmacKey: Buffer<ArrayBuffer> | null = null;
 
@@ -47,17 +53,34 @@ export class ImageProxy {
     return this.createImageUrl(id);
   }
 
-  public async forwardImageAsync(id: string): Promise<ArrayBuffer | null> {
+  public async forwardImageAsync(id: string): Promise<ForwardImageResult> {
     const urlAndHeaders = await this.getImageUrlAndHeadersAsync(id);
     if (!urlAndHeaders) {
-      return null;
+      return { error: "not-found" };
     }
 
-    const response = await fetchWithTrustedCertificatesAsync(urlAndHeaders.url, {
-      headers: urlAndHeaders.headers ?? {},
-    });
-
     const proxyUrl = this.createImageUrl(id);
+    let response: Awaited<ReturnType<typeof fetchWithTrustedCertificatesAsync>>;
+    try {
+      response = await fetchWithTrustedCertificatesAsync(urlAndHeaders.url, {
+        headers: urlAndHeaders.headers ?? {},
+      });
+    } catch (error) {
+      logger.error(
+        new ErrorWithMetadata(
+          "Failed to connect to image source",
+          {
+            id,
+            url: this.redactUrl(urlAndHeaders.url),
+            headers: this.redactHeaders(urlAndHeaders.headers),
+            proxyUrl,
+          },
+          { cause: error },
+        ),
+      );
+      return { error: "fetch-error" };
+    }
+
     if (!response.ok) {
       logger.error(
         new ErrorWithMetadata("Failed to fetch image", {
@@ -68,7 +91,7 @@ export class ImageProxy {
           statusCode: response.status,
         }),
       );
-      return null;
+      return { error: "upstream-error", statusCode: response.status };
     }
 
     const arrayBuffer = await response.arrayBuffer();
@@ -80,7 +103,7 @@ export class ImageProxy {
       size: `${(arrayBuffer.byteLength / 1024).toFixed(1)}KB`,
     });
 
-    return arrayBuffer;
+    return { image: arrayBuffer, contentType: response.headers.get("content-type") };
   }
 
   private createImageUrl(id: string): string {

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

@@ -1,4 +1,5 @@
 import {
+  AssetMediaSize,
   getAlbumInfo,
   getAllAlbums,
   getMyUser,
@@ -75,7 +76,9 @@ export class ImmichIntegration extends Integration {
       assets: await Promise.all(
         albumAssets.map(async (asset) => {
           const publicLink = await imageProxy.createImageAsync(
-            this.url(`/api/assets/${asset.id}/original`).toString(),
+            // 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"),
             },