style: auto-fix lint and format

- Remove wrapper div that broke HoverCard hover tracking between
  target and dropdown (root cause of instant disappear)
- Remove useElementSize, always show notification dots
- Increase closeDelay to 400ms (per Mantine interactive-elements
  pattern) so users can move mouse into dropdown with link buttons
- Remove HoverCard.Group from component.tsx per feedback

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 } : {}),
     },
   });
 };

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

packages/widgets/src/calendar/calender-day.tsx

@@ -1,6 +1,4 @@
-import { useCallback, useState } from "react";
-import { Box, Container, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
-import { useElementSize } from "@mantine/hooks";
+import { Box, Container, Flex, HoverCard, Text, useMantineTheme } from "@mantine/core";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
@@ -13,14 +11,9 @@ interface CalendarDayProps {
   disabled: boolean;
   rootWidth: number;
   rootHeight: number;
-  onOpen: (close: () => void) => void;
 }
 
-export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onOpen }: CalendarDayProps) => {
-  const [opened, setOpened] = useState(false);
-  const [pinned, setPinned] = useState(false);
-  const { primaryColor } = useMantineTheme();
-  const { ref, height } = useElementSize();
+export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
   const board = useRequiredBoard();
   const mantineTheme = useMantineTheme();
   const actualItemRadius = mantineTheme.radius[board.itemRadius];
@@ -29,39 +22,19 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onO
   const shouldScaleDown = minAxisSize < 350;
   const isSmall = rootHeight < 256;
 
-  const isTooSmallForIndicators = height < 30;
-
-  const handleMouseEnter = useCallback(() => {
-    if (disabled) return;
-    onOpen(() => {
-      setOpened(false);
-      setPinned(false);
-    });
-    setOpened(true);
-  }, [disabled, onOpen]);
-
-  const handleMouseLeave = useCallback(() => {
-    if (!pinned) setOpened(false);
-  }, [pinned]);
-
   return (
-    <Popover
+    <HoverCard
       position="bottom"
       withArrow
       withinPortal
       radius="lg"
       shadow="sm"
-      transitionProps={{
-        transition: "pop",
-      }}
-      onChange={(value) => {
-        setOpened(value);
-        if (!value) setPinned(false);
-      }}
-      opened={opened}
+      transitionProps={{ transition: "pop" }}
+      openDelay={350}
+      closeDelay={400}
       disabled={disabled}
     >
-      <Popover.Target>
+      <HoverCard.Target>
         <Container
           h="100%"
           w="100%"
@@ -69,38 +42,23 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onO
           pt={isSmall ? 0 : 10}
           pb={isSmall ? 0 : 10}
           m={0}
-          ref={ref}
-          bd={`2px solid ${opened && !disabled ? primaryColor : "transparent"}`}
+          pos="relative"
           style={{
             alignContent: "center",
             borderRadius: actualItemRadius,
             cursor: disabled ? "default" : "pointer",
           }}
-          onClick={() => {
-            if (!disabled) setPinned((prev) => !prev);
-          }}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
         >
           <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
             {date.getDate()}
           </Text>
-          {!isTooSmallForIndicators && <NotificationIndicator events={events} isSmall={isSmall} />}
+          <NotificationIndicator events={events} isSmall={isSmall} />
         </Container>
-      </Popover.Target>
-      {/* Popover has some offset on the left side, padding is removed because of scrollarea paddings */}
-      <Popover.Dropdown
-        maw="calc(100vw - 24px)"
-        w={512}
-        pe={4}
-        pb={0}
-        style={{ overflow: "hidden" }}
-        onMouseEnter={() => setOpened(true)}
-        onMouseLeave={handleMouseLeave}
-      >
+      </HoverCard.Target>
+      <HoverCard.Dropdown maw="calc(100vw - 24px)" w={512} pe={4} pb={0} style={{ overflow: "hidden" }}>
         <CalendarEventList events={events} />
-      </Popover.Dropdown>
-    </Popover>
+      </HoverCard.Dropdown>
+    </HoverCard>
   );
 };
 
@@ -111,7 +69,6 @@ interface NotificationIndicatorProps {
 
 const NotificationIndicator = ({ events, isSmall }: NotificationIndicatorProps) => {
   const notificationEvents = [...new Set(events.map((event) => event.indicatorColor))].filter(String);
-  /* position bottom is lower when small to not be on top of number*/
   return (
     <Flex
       w="75%"

packages/widgets/src/calendar/component.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useParams } from "next/navigation";
 import { useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
@@ -65,11 +65,6 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
   const isSmall = width < 256;
 
   const normalizedEvents = useMemo(() => splitEvents(events), [events]);
-  const activeCloseRef = useRef<(() => void) | null>(null);
-  const onDayOpen = useCallback((close: () => void) => {
-    activeCloseRef.current?.();
-    activeCloseRef.current = close;
-  }, []);
 
   return (
     <Calendar
@@ -146,7 +141,6 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
             disabled={isEditMode || eventsForDate.length === 0}
             rootWidth={width}
             rootHeight={height}
-            onOpen={onDayOpen}
           />
         );
       }}