style: auto-fix lint and format

feat: consolidate feature
Merge remote-tracking branch 'origin/dev' into feat/static-board-ssr
2026-06-04 21:26:19 +00:00 · 2026-06-04 23:25:31 +02:00 · 2026-06-04 23:09:38 +02:00 · 2026-06-04 11:07:31 +02:00 · 2026-06-04 08:58:12 +00:00 · 2026-06-04 09:50:02 +02:00
74 changed files with 2193 additions and 1219 deletions
@@ -2,7 +2,7 @@

 import type { PropsWithChildren } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { DirectionProvider, MantineProvider } from "@mantine/core";
+import { DirectionProvider, MantineProvider, v8CssVariablesResolver } from "@mantine/core";
 import dayjs from "dayjs";

 import { clientApi } from "@homarr/api/client";
@@ -18,7 +18,12 @@ export const CustomMantineProvider = ({
  const manager = useColorSchemeManager();
  return (
    <DirectionProvider>
-      <MantineProvider defaultColorScheme={defaultColorScheme} colorSchemeManager={manager} theme={theme}>
+      <MantineProvider
+        defaultColorScheme={defaultColorScheme}
+        colorSchemeManager={manager}
+        theme={theme}
+        cssVariablesResolver={v8CssVariablesResolver}
+      >
        {children}
      </MantineProvider>
    </DirectionProvider>
@@ -1,9 +1,11 @@
+import { cache } from "react";
+
 import { api } from "@homarr/api/server";

 import { createBoardContentPage } from "../_creator";

+const getHomeBoardAsync = cache(() => api.board.getHomeBoard());
+
 export default createBoardContentPage<{ locale: string }>({
-  async getInitialBoardAsync() {
-    return await api.board.getHomeBoard();
-  },
+  getInitialBoardAsync: getHomeBoardAsync,
 });
@@ -1,9 +1,11 @@
+import { cache } from "react";
+
 import { api } from "@homarr/api/server";

 import { createBoardContentPage } from "../../_creator";

+const getBoardByNameAsync = cache((name: string) => api.board.getBoardByName({ name }));
+
 export default createBoardContentPage<{ locale: string; name: string }>({
-  async getInitialBoardAsync({ name }) {
-    return await api.board.getBoardByName({ name });
-  },
+  getInitialBoardAsync: async ({ name }) => getBoardByNameAsync(name),
 });
@@ -1,33 +1,24 @@
 "use client";

-import { Box, Stack } from "@mantine/core";
+import dynamic from "next/dynamic";
+import { Box } from "@mantine/core";

-import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";

-import { BoardCategorySection } from "~/components/board/sections/category-section";
-import { BoardEmptySection } from "~/components/board/sections/empty-section";
+import { StaticBoardGrid } from "~/components/board/sections/static-grid";
 import { BoardBackgroundVideo } from "~/components/layout/background";

+const EditModeBoard = dynamic(() => import("./_edit-board"), { ssr: false });
+
 export const ClientBoard = () => {
  const board = useRequiredBoard();
-  const currentLayoutId = useCurrentLayout();
-
-  const fullWidthSortedSections = board.sections
-    .filter((section) => section.kind === "empty" || section.kind === "category")
-    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
+  const [isEditMode] = useEditMode();

  return (
    <Box h="100%" pos="relative">
      <BoardBackgroundVideo />
-      <Stack h="100%">
-        {fullWidthSortedSections.map((section) =>
-          section.kind === "empty" ? (
-            <BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
-          ) : (
-            <BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
-          ),
-        )}
-      </Stack>
+      {isEditMode ? <EditModeBoard /> : <StaticBoardGrid board={board} />}
    </Box>
  );
 };
@@ -1,7 +1,3 @@
 "use client";

-import dynamic from "next/dynamic";
-
-export const DynamicClientBoard = dynamic(() => import("./_client").then((mod) => mod.ClientBoard), {
-  ssr: false,
-});
+export { ClientBoard as DynamicClientBoard } from "./_client";
@@ -0,0 +1,31 @@
+"use client";
+
+import { Stack } from "@mantine/core";
+
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+
+import { BoardCategorySection } from "~/components/board/sections/category-section";
+import { BoardEmptySection } from "~/components/board/sections/empty-section";
+
+const EditModeBoard = () => {
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+
+  const fullWidthSortedSections = board.sections
+    .filter((section) => section.kind === "empty" || section.kind === "category")
+    .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
+
+  return (
+    <Stack h="100%">
+      {fullWidthSortedSections.map((section) =>
+        section.kind === "empty" ? (
+          <BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
+        ) : (
+          <BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
+        ),
+      )}
+    </Stack>
+  );
+};
+
+export default EditModeBoard;
@@ -2,7 +2,7 @@

 import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
-import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem } from "@mantine/core";
+import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem, v8CssVariablesResolver } from "@mantine/core";

 import { useRequiredBoard } from "@homarr/boards/context";
 import type { ColorScheme } from "@homarr/definitions";
@@ -33,7 +33,12 @@ export const BoardMantineProvider = ({
  });

  return (
-    <MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
+    <MantineProvider
+      defaultColorScheme={defaultColorScheme}
+      theme={theme}
+      colorSchemeManager={colorSchemeManager}
+      cssVariablesResolver={v8CssVariablesResolver}
+    >
      {children}
    </MantineProvider>
  );
@@ -1,15 +1,15 @@
 "use client";

-import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import { Button, Stack, TextInput } from "@mantine/core";
 import type { z } from "zod/v4";

 import { clientApi } from "@homarr/api/client";
 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
+import { UserCreatePasswordFields } from "@homarr/forms-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { CustomPasswordInput } from "@homarr/ui";
 import { userInitSchema } from "@homarr/validation/user";

 export const InitUserForm = () => {
@@ -59,12 +59,10 @@ export const InitUserForm = () => {
      >
        <Stack gap="lg">
          <TextInput label={t("field.username.label")} {...form.getInputProps("username")} />
-          <CustomPasswordInput
-            withPasswordRequirements
-            label={t("field.password.label")}
-            {...form.getInputProps("password")}
+          <UserCreatePasswordFields
+            passwordInputProps={form.getInputProps("password")}
+            confirmPasswordInputProps={form.getInputProps("confirmPassword")}
          />
-          <PasswordInput label={t("field.passwordConfirm.label")} {...form.getInputProps("confirmPassword")} />
          <Button type="submit" fullWidth loading={isPending}>
            {t("action.create")}
          </Button>
@@ -107,6 +107,23 @@ export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"
    refetchOnReconnect: false,
  });
  const relativeTime = useTimeAgo(data.timestamp);
+  const utils = clientApi.useUtils();
+  const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
+    async onSuccess() {
+      await utils.docker.getContainers.invalidate();
+      showSuccessNotification({
+        title: tDocker("action.refresh.notification.success.title"),
+        message: tDocker("action.refresh.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        title: tDocker("action.refresh.notification.error.title"),
+        message: tDocker("action.refresh.notification.error.message"),
+      });
+    },
+  });
+
  const table = useTranslatedMantineReactTable({
    data: data.containers,
    enableDensityToggle: false,
@@ -125,35 +142,11 @@ export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"
    },

    initialState: { density: "xs", showGlobalFilter: true },
-    renderTopToolbarCustomActions: () => {
-      const utils = clientApi.useUtils();
-      const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
-        async onSuccess() {
-          await utils.docker.getContainers.invalidate();
-          showSuccessNotification({
-            title: tDocker("action.refresh.notification.success.title"),
-            message: tDocker("action.refresh.notification.success.message"),
-          });
-        },
-        onError() {
-          showErrorNotification({
-            title: tDocker("action.refresh.notification.error.title"),
-            message: tDocker("action.refresh.notification.error.message"),
-          });
-        },
-      });
-
-      return (
-        <Button
-          variant="default"
-          rightSection={<IconRefresh size="1rem" />}
-          onClick={() => mutate()}
-          loading={isPending}
-        >
-          {tDocker("action.refresh.label")}
-        </Button>
-      );
-    },
+    renderTopToolbarCustomActions: () => (
+      <Button variant="default" rightSection={<IconRefresh size="1rem" />} onClick={() => mutate()} loading={isPending}>
+        {tDocker("action.refresh.label")}
+      </Button>
+    ),
    renderToolbarAlertBannerContent: ({ groupedAlert, table }) => {
      const dockerContainers = table.getSelectedRowModel().rows.map((row) => row.original);
      return (
@@ -1,20 +1,7 @@
 "use client";

 import { startTransition, useCallback, useState } from "react";
-import {
-  Badge,
-  Button,
-  Card,
-  Group,
-  PasswordInput,
-  Stack,
-  Stepper,
-  Table,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from "@mantine/core";
+import { Badge, Button, Card, Group, Stack, Stepper, Table, Text, TextInput, Title, Tooltip } from "@mantine/core";
 import { useListState } from "@mantine/hooks";
 import { IconPlus, IconUserCheck } from "@tabler/icons-react";
 import { z } from "zod/v4";
@@ -24,10 +11,11 @@ import type { GroupPermissionKey } from "@homarr/definitions";
 import { everyoneGroup, groupPermissions } from "@homarr/definitions";
 import type { IsValid } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
+import { UserCreatePasswordFields } from "@homarr/forms-collection";
 import { useModalAction } from "@homarr/modals";
 import { showErrorNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { CustomPasswordInput, UserAvatar } from "@homarr/ui";
+import { UserAvatar } from "@homarr/ui";
 import { createCustomErrorParams } from "@homarr/validation/form/i18n";
 import { userPasswordSchema } from "@homarr/validation/user";

@@ -167,18 +155,10 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
          <form>
            <Card p="xl">
              <Stack gap="md">
-                <CustomPasswordInput
-                  withPasswordRequirements
-                  label={tUserField("password.label")}
+                <UserCreatePasswordFields
                  variant="filled"
-                  withAsterisk
-                  {...securityForm.getInputProps("password")}
-                />
-                <PasswordInput
-                  label={tUserField("passwordConfirm.label")}
-                  variant="filled"
-                  withAsterisk
-                  {...securityForm.getInputProps("confirmPassword")}
+                  passwordInputProps={securityForm.getInputProps("password")}
+                  confirmPasswordInputProps={securityForm.getInputProps("confirmPassword")}
                />
              </Stack>
            </Card>
@@ -19,6 +19,10 @@ import { BoardItemMenu } from "./item-menu";

 interface BoardItemContentProps {
  item: SectionItem;
+  fallbackDimensions?: {
+    width: number;
+    height: number;
+  };
 }

 const getOverflowFromKind = (kind: SectionItem["kind"]) => {
@@ -27,9 +31,11 @@ const getOverflowFromKind = (kind: SectionItem["kind"]) => {
  return undefined;
 };

-export const BoardItemContent = ({ item }: BoardItemContentProps) => {
+export const BoardItemContent = ({ item, fallbackDimensions }: BoardItemContentProps) => {
  const { ref, width, height } = useElementSize<HTMLDivElement>();
  const board = useRequiredBoard();
+  const fallbackWidth = fallbackDimensions?.width ?? 0;
+  const fallbackHeight = fallbackDimensions?.height ?? 0;

  return (
    <>
@@ -52,7 +58,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
        }}
        p={0}
      >
-        <InnerContent item={item} width={width} height={height} />
+        <InnerContent item={item} width={width || fallbackWidth} height={height || fallbackHeight} />
      </Card>
      {item.advancedOptions.title?.trim() && (
        <Badge
@@ -12,7 +12,7 @@ import { widgetImports } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";

 import type { SectionItem } from "~/app/[locale]/boards/_types";
-import { useSectionContext } from "../sections/section-context";
+import { useOptionalSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
 import { ItemMoveModal } from "./item-move-modal";

@@ -41,7 +41,8 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
    useItemActions();
  const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
  const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
-  const { gridstack } = useSectionContext().refs;
+  const sectionContext = useOptionalSectionContext();
+  const gridstack = sectionContext?.refs.gridstack;
  const settings = useSettings();

  // Reset error boundary on next render if item has been edited
@@ -127,7 +128,7 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
        <Menu.Item
          leftSection={<IconLayoutKanban size={16} />}
          onClick={() => {
-            if (!gridstack.current) return;
+            if (!gridstack?.current) return;
            openMoveModal({ item, columnCount: gridstack.current.getColumn(), gridStack: gridstack.current });
          }}
        >
@@ -1,48 +1,21 @@
 import { Card, Collapse, Group, Stack, Title, UnstyledButton } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";

-import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";

 import type { CategorySection } from "~/app/[locale]/boards/_types";
 import { CategoryMenu } from "./category/category-menu";
 import { GridStack } from "./gridstack/gridstack";
 import classes from "./item.module.css";
-
-const localStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`;
+import { useCategoryCollapse } from "./use-category-collapse";

 interface Props {
  section: CategorySection;
 }

 export const BoardCategorySection = ({ section }: Props) => {
-  const { status } = useSession();
-  const { mutate } = clientApi.section.changeCollapsed.useMutation();
  const board = useRequiredBoard();
-
-  const initialCollapsed =
-    typeof window !== "undefined"
-      ? (localStorage.getItem(localStorageKey(section.id)) ?? String(section.collapsed)) === "true"
-      : section.collapsed;
-
-  const [opened, { toggle }] = useDisclosure(initialCollapsed, {
-    onOpen() {
-      if (status === "authenticated") {
-        mutate({ sectionId: section.id, collapsed: true });
-      } else if (status === "unauthenticated") {
-        localStorage.setItem(localStorageKey(section.id), "true");
-      }
-    },
-    onClose() {
-      if (status === "authenticated") {
-        mutate({ sectionId: section.id, collapsed: false });
-      } else if (status === "unauthenticated") {
-        localStorage.setItem(localStorageKey(section.id), "false");
-      }
-    },
-  });
+  const [opened, { toggle }] = useCategoryCollapse(section);

  return (
    <Card style={{ "--opacity": board.opacity / 100 }} radius={board.itemRadius} p={0} className={classes.itemCard}>
@@ -20,4 +20,8 @@ export const useSectionContext = () => {
  return context;
 };

+export const useOptionalSectionContext = () => {
+  return useContext(SectionContext);
+};
+
 export const SectionProvider = SectionContext.Provider;
@@ -0,0 +1,93 @@
+import { describe, expect, test } from "vitest";
+
+import { BoardMockBuilder } from "../items/actions/test/mocks/board-mock";
+import { DynamicSectionMockBuilder } from "../items/actions/test/mocks/dynamic-section-mock";
+import { ItemMockBuilder } from "../items/actions/test/mocks/item-mock";
+import { LayoutMockBuilder } from "../items/actions/test/mocks/layout-mock";
+import {
+  getEstimatedGridWidth,
+  getFallbackDimensions,
+  getFullWidthSortedSections,
+  getStaticGridElements,
+  getStaticGridLayouts,
+  getStaticGridRowCount,
+  getStaticLayoutSelectionCss,
+} from "./static-grid-layout";
+
+describe("static grid layout", () => {
+  test("sorts layouts and creates breakpoint CSS in mobile-first order", () => {
+    const mobile = new LayoutMockBuilder({ id: "mobile", breakpoint: 0, columnCount: 4 }).build();
+    const tablet = new LayoutMockBuilder({ id: "tablet", breakpoint: 768, columnCount: 8 }).build();
+    const desktop = new LayoutMockBuilder({ id: "desktop", breakpoint: 1024, columnCount: 12 }).build();
+
+    const sortedLayouts = getStaticGridLayouts([desktop, mobile, tablet]);
+    const css = getStaticLayoutSelectionCss("board-1", sortedLayouts);
+
+    expect(sortedLayouts.map((layout) => layout.id)).toEqual(["mobile", "tablet", "desktop"]);
+    expect(css).toContain('[data-static-layout="mobile"] { display: block; }');
+    expect(css).toContain("@media (min-width: 768px)");
+    expect(css).toContain('[data-static-layout="tablet"] { display: block; }');
+    expect(css).toContain("@media (min-width: 1024px)");
+    expect(css).toContain('[data-static-layout="desktop"] { display: block; }');
+  });
+
+  test("selects and sorts layout-specific section elements", () => {
+    const rootSectionId = "root";
+    const mobileLayoutId = "mobile";
+    const desktopLayoutId = "desktop";
+    const mobile = new LayoutMockBuilder({ id: mobileLayoutId, breakpoint: 0, columnCount: 4 }).build();
+    const desktop = new LayoutMockBuilder({ id: desktopLayoutId, breakpoint: 1024, columnCount: 12 }).build();
+    const item = new ItemMockBuilder({ id: "item" })
+      .addLayout({ layoutId: mobileLayoutId, sectionId: rootSectionId, xOffset: 2, yOffset: 1, width: 1, height: 1 })
+      .addLayout({ layoutId: desktopLayoutId, sectionId: rootSectionId, xOffset: 0, yOffset: 1, width: 4, height: 2 })
+      .build();
+    const dynamicSection = new DynamicSectionMockBuilder({ id: "dynamic" })
+      .addLayout({
+        layoutId: mobileLayoutId,
+        parentSectionId: rootSectionId,
+        xOffset: 0,
+        yOffset: 0,
+        width: 2,
+        height: 2,
+      })
+      .addLayout({
+        layoutId: desktopLayoutId,
+        parentSectionId: rootSectionId,
+        xOffset: 4,
+        yOffset: 1,
+        width: 4,
+        height: 2,
+      })
+      .build();
+    const board = new BoardMockBuilder()
+      .addEmptySection({ id: rootSectionId, yOffset: 2 })
+      .addEmptySection({ id: "first", yOffset: 0 })
+      .addSection(dynamicSection)
+      .addItem(item)
+      .build();
+    board.layouts = [desktop, mobile];
+
+    const mobileElements = getStaticGridElements(board, rootSectionId, mobileLayoutId);
+    const desktopElements = getStaticGridElements(board, rootSectionId, desktopLayoutId);
+    const fullWidthSections = getFullWidthSortedSections(board);
+
+    expect(mobileElements.map((element) => element.id)).toEqual(["dynamic", "item"]);
+    expect(desktopElements.map((element) => ({ id: element.id, width: element.width }))).toEqual([
+      { id: "item", width: 4 },
+      { id: "dynamic", width: 4 },
+    ]);
+    expect(getStaticGridRowCount(mobileElements)).toBe(2);
+    expect(fullWidthSections.map((section) => section.id)).toEqual(["first", rootSectionId]);
+  });
+
+  test("estimates grid and item dimensions per layout range", () => {
+    const mobile = new LayoutMockBuilder({ id: "mobile", breakpoint: 0, columnCount: 4 }).build();
+    const tablet = new LayoutMockBuilder({ id: "tablet", breakpoint: 768, columnCount: 8 }).build();
+    const desktop = new LayoutMockBuilder({ id: "desktop", breakpoint: 1024, columnCount: 12 }).build();
+
+    expect(getEstimatedGridWidth(mobile, tablet)).toBe(384);
+    expect(getEstimatedGridWidth(tablet, desktop)).toBe(896);
+    expect(getEstimatedGridWidth(desktop)).toBe(1280);
+    expect(getFallbackDimensions({ width: 2, height: 3 }, 400, 4)).toEqual({ width: 180, height: 280 });
+  });
+});
@@ -0,0 +1,103 @@
+import type { Board, DynamicSectionItem, EmptySection, SectionItem } from "~/app/[locale]/boards/_types";
+
+type BoardLayout = Board["layouts"][number];
+type StaticGridElement = SectionItem | DynamicSectionItem;
+
+const STATIC_GRID_ITEM_INSET = 20;
+const DEFAULT_SMALL_VIEWPORT_WIDTH = 360;
+const DEFAULT_LARGE_VIEWPORT_WIDTH = 1280;
+
+export const getStaticGridLayouts = (layouts: Board["layouts"]) =>
+  [...layouts].toSorted((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint);
+
+const escapeCssString = (value: string) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+
+export const getStaticLayoutSelectionCss = (boardId: string, layouts: Board["layouts"]) => {
+  const sortedLayouts = getStaticGridLayouts(layouts);
+  const initialLayout = sortedLayouts.at(0);
+
+  if (!initialLayout) return "";
+
+  const scope = `[data-static-board="${escapeCssString(boardId)}"]`;
+  const css = [
+    `${scope} .static-board-layout { display: none; }`,
+    `${scope} .static-board-layout[data-static-layout="${escapeCssString(initialLayout.id)}"] { display: block; }`,
+  ];
+
+  for (const layout of sortedLayouts.slice(1)) {
+    css.push(
+      `@media (min-width: ${layout.breakpoint}px) { ${scope} .static-board-layout { display: none; } ${scope} .static-board-layout[data-static-layout="${escapeCssString(layout.id)}"] { display: block; } }`,
+    );
+  }
+
+  return css.join("\n");
+};
+
+export const getFullWidthSortedSections = (board: Board) =>
+  board.sections
+    .filter(
+      (section): section is EmptySection | Extract<Board["sections"][number], { kind: "category" }> =>
+        section.kind === "empty" || section.kind === "category",
+    )
+    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
+
+export const getSectionItemsForLayout = (board: Board, sectionId: string, layoutId: string): SectionItem[] => {
+  return board.items
+    .map(({ layouts, ...item }) => {
+      const layout = layouts.find((candidate) => candidate.layoutId === layoutId);
+      if (!layout) return null;
+      return { ...layout, ...item, type: "item" as const };
+    })
+    .filter((item): item is SectionItem => item !== null && item.sectionId === sectionId);
+};
+
+export const getDynamicSectionsForLayout = (
+  board: Board,
+  sectionId: string,
+  layoutId: string,
+): DynamicSectionItem[] => {
+  return board.sections
+    .filter((section) => section.kind === "dynamic")
+    .map(({ layouts, ...section }) => {
+      const layout = layouts.find((candidate) => candidate.layoutId === layoutId);
+      if (!layout) return null;
+      return { ...layout, ...section, type: "section" as const };
+    })
+    .filter((entry): entry is DynamicSectionItem => entry !== null && entry.parentSectionId === sectionId);
+};
+
+export const getStaticGridElements = (board: Board, sectionId: string, layoutId: string): StaticGridElement[] => {
+  return [
+    ...getSectionItemsForLayout(board, sectionId, layoutId),
+    ...getDynamicSectionsForLayout(board, sectionId, layoutId),
+  ].toSorted((itemA, itemB) => {
+    if (itemA.yOffset === itemB.yOffset) return itemA.xOffset - itemB.xOffset;
+    return itemA.yOffset - itemB.yOffset;
+  });
+};
+
+export const getStaticGridRowCount = (items: StaticGridElement[], fixedRowCount?: number) => {
+  return fixedRowCount ?? Math.max(...items.map((item) => item.yOffset + item.height));
+};
+
+export const getEstimatedGridWidth = (layout: BoardLayout, nextLayout?: BoardLayout) => {
+  if (nextLayout) {
+    const upperBound = Math.max(nextLayout.breakpoint - 1, DEFAULT_SMALL_VIEWPORT_WIDTH);
+    return Math.max(DEFAULT_SMALL_VIEWPORT_WIDTH, Math.round((layout.breakpoint + upperBound) / 2));
+  }
+
+  return Math.max(layout.breakpoint, DEFAULT_LARGE_VIEWPORT_WIDTH);
+};
+
+export const getFallbackDimensions = (
+  item: Pick<StaticGridElement, "width" | "height">,
+  estimatedGridWidth: number,
+  columnCount: number,
+) => {
+  const cellSize = estimatedGridWidth / columnCount;
+
+  return {
+    width: Math.max(0, item.width * cellSize - STATIC_GRID_ITEM_INSET),
+    height: Math.max(0, item.height * cellSize - STATIC_GRID_ITEM_INSET),
+  };
+};
@@ -0,0 +1,289 @@
+"use client";
+
+import { Badge, Card, Collapse, Group, Stack, Title, UnstyledButton } from "@mantine/core";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+
+import { useRequiredBoard } from "@homarr/boards/context";
+
+import type {
+  Board,
+  CategorySection,
+  DynamicSectionItem,
+  EmptySection,
+  SectionItem,
+} from "~/app/[locale]/boards/_types";
+import { BoardItemContent } from "../items/item-content";
+import { CategoryMenu } from "./category/category-menu";
+import classes from "./item.module.css";
+import {
+  getEstimatedGridWidth,
+  getFallbackDimensions,
+  getFullWidthSortedSections,
+  getStaticGridElements,
+  getStaticGridLayouts,
+  getStaticGridRowCount,
+  getStaticLayoutSelectionCss,
+} from "./static-grid-layout";
+import { useCategoryCollapse } from "./use-category-collapse";
+
+interface StaticBoardGridProps {
+  board: Board;
+}
+
+export const StaticBoardGrid = ({ board }: StaticBoardGridProps) => {
+  const boardId = `board-${board.id}`;
+  const layouts = getStaticGridLayouts(board.layouts);
+  const layoutSelectionCss = getStaticLayoutSelectionCss(boardId, layouts);
+  const fullWidthSortedSections = getFullWidthSortedSections(board);
+
+  if (layouts.length === 0) return null;
+
+  return (
+    <>
+      <style>{layoutSelectionCss}</style>
+      <div data-static-board={boardId}>
+        {layouts.map((layout, index) => (
+          <div key={layout.id} className="static-board-layout" data-static-layout={layout.id}>
+            <Stack h="100%">
+              {fullWidthSortedSections.map((section) =>
+                section.kind === "empty" ? (
+                  <StaticEmptySection
+                    key={section.id}
+                    section={section}
+                    board={board}
+                    layoutId={layout.id}
+                    columnCount={layout.columnCount}
+                    estimatedGridWidth={getEstimatedGridWidth(layout, layouts.at(index + 1))}
+                  />
+                ) : (
+                  <StaticCategorySection
+                    key={section.id}
+                    section={section}
+                    board={board}
+                    layoutId={layout.id}
+                    columnCount={layout.columnCount}
+                    estimatedGridWidth={getEstimatedGridWidth(layout, layouts.at(index + 1))}
+                  />
+                ),
+              )}
+            </Stack>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+interface StaticSectionGridProps {
+  sectionId: string;
+  board: Board;
+  layoutId: string;
+  columnCount: number;
+  estimatedGridWidth: number;
+  isDynamic?: boolean;
+  fixedRowCount?: number;
+}
+
+const StaticSectionGrid = ({
+  sectionId,
+  board,
+  layoutId,
+  columnCount,
+  estimatedGridWidth,
+  isDynamic,
+  fixedRowCount,
+}: StaticSectionGridProps) => {
+  const allItems = getStaticGridElements(board, sectionId, layoutId);
+
+  if (allItems.length === 0) return null;
+
+  const rowCount = getStaticGridRowCount(allItems, fixedRowCount);
+
+  return (
+    <div className="static-grid-container" style={{ height: isDynamic ? "100%" : undefined }}>
+      <div
+        className="static-grid"
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+          gridTemplateRows: isDynamic
+            ? `repeat(${rowCount}, 1fr)`
+            : `repeat(${rowCount}, calc(100cqi / ${columnCount}))`,
+          height: isDynamic ? "100%" : undefined,
+        }}
+      >
+        {allItems.map((item) => (
+          <StaticGridItem
+            key={item.id}
+            item={item}
+            board={board}
+            layoutId={layoutId}
+            estimatedGridWidth={estimatedGridWidth}
+            columnCount={columnCount}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface StaticGridItemProps {
+  item: SectionItem | DynamicSectionItem;
+  board: Board;
+  layoutId: string;
+  estimatedGridWidth: number;
+  columnCount: number;
+}
+
+const StaticGridItem = ({ item, board, layoutId, estimatedGridWidth, columnCount }: StaticGridItemProps) => {
+  const fallbackDimensions = getFallbackDimensions(item, estimatedGridWidth, columnCount);
+
+  return (
+    <div
+      style={{
+        gridColumn: `${item.xOffset + 1} / span ${item.width}`,
+        gridRow: `${item.yOffset + 1} / span ${item.height}`,
+        position: "relative",
+      }}
+    >
+      <div className="static-grid-item-content">
+        {item.type === "item" ? (
+          <BoardItemContent item={item} fallbackDimensions={fallbackDimensions} />
+        ) : (
+          <StaticDynamicSection
+            section={item}
+            board={board}
+            layoutId={layoutId}
+            estimatedGridWidth={fallbackDimensions.width}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface StaticEmptySectionProps {
+  section: EmptySection;
+  board: Board;
+  layoutId: string;
+  columnCount: number;
+  estimatedGridWidth: number;
+}
+
+const StaticEmptySection = ({ section, board, layoutId, columnCount, estimatedGridWidth }: StaticEmptySectionProps) => {
+  const items = getStaticGridElements(board, section.id, layoutId);
+
+  if (items.length === 0) return null;
+
+  return (
+    <StaticSectionGrid
+      sectionId={section.id}
+      board={board}
+      layoutId={layoutId}
+      columnCount={columnCount}
+      estimatedGridWidth={estimatedGridWidth}
+    />
+  );
+};
+
+interface StaticCategorySectionProps {
+  section: CategorySection;
+  board: Board;
+  layoutId: string;
+  columnCount: number;
+  estimatedGridWidth: number;
+}
+
+const StaticCategorySection = ({
+  section,
+  board,
+  layoutId,
+  columnCount,
+  estimatedGridWidth,
+}: StaticCategorySectionProps) => {
+  const boardData = useRequiredBoard();
+  const [opened, { toggle }] = useCategoryCollapse(section);
+
+  return (
+    <Card
+      style={{ "--opacity": boardData.opacity / 100 }}
+      radius={boardData.itemRadius}
+      p={0}
+      className={classes.itemCard}
+    >
+      <Stack>
+        <Group wrap="nowrap" gap="sm">
+          <UnstyledButton w="100%" p="sm" onClick={toggle}>
+            <Group wrap="nowrap">
+              {opened ? <IconChevronUp size={20} /> : <IconChevronDown size={20} />}
+              <Title order={3}>{section.name}</Title>
+            </Group>
+          </UnstyledButton>
+          <CategoryMenu category={section} />
+        </Group>
+        <Collapse expanded={opened} p="sm" pt={0}>
+          <StaticSectionGrid
+            sectionId={section.id}
+            board={board}
+            layoutId={layoutId}
+            columnCount={columnCount}
+            estimatedGridWidth={estimatedGridWidth}
+          />
+        </Collapse>
+      </Stack>
+    </Card>
+  );
+};
+
+interface StaticDynamicSectionProps {
+  section: DynamicSectionItem;
+  board: Board;
+  layoutId: string;
+  estimatedGridWidth: number;
+}
+
+const StaticDynamicSection = ({ section, board, layoutId, estimatedGridWidth }: StaticDynamicSectionProps) => {
+  const boardData = useRequiredBoard();
+  const options = section.options;
+
+  return (
+    <Card
+      className={classes.itemCard}
+      w="100%"
+      h="100%"
+      styles={{
+        root: {
+          overflow: "visible",
+          "--opacity": boardData.opacity / 100,
+          "--border-color": options.borderColor || undefined,
+        },
+      }}
+      radius={boardData.itemRadius}
+      p={0}
+    >
+      {options.title && (
+        <Badge
+          pos="absolute"
+          top={-15}
+          left={10}
+          size="md"
+          radius={boardData.itemRadius}
+          color="var(--background-color)"
+          c="var(--mantine-color-text)"
+          bd="1px solid var(--border-color)"
+        >
+          {options.title}
+        </Badge>
+      )}
+      <StaticSectionGrid
+        sectionId={section.id}
+        board={board}
+        layoutId={layoutId}
+        columnCount={section.width}
+        estimatedGridWidth={estimatedGridWidth}
+        isDynamic
+        fixedRowCount={section.height}
+      />
+    </Card>
+  );
+};
@@ -0,0 +1,77 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
+
+import type { CategorySection } from "~/app/[locale]/boards/_types";
+
+export const getCategoryCollapseStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`;
+
+const categoryCollapseChangeEventName = "homarr-section-collapse-change";
+
+interface CategoryExpandedChangeEventDetail {
+  sectionId: string;
+  expanded: boolean;
+}
+
+const getInitialExpanded = (section: CategorySection) => {
+  if (typeof window === "undefined") return section.collapsed;
+
+  return (localStorage.getItem(getCategoryCollapseStorageKey(section.id)) ?? String(section.collapsed)) === "true";
+};
+
+export const useCategoryCollapse = (section: CategorySection) => {
+  const { status } = useSession();
+  const { mutate } = clientApi.section.changeCollapsed.useMutation();
+  const [opened, setOpened] = useState(() => getInitialExpanded(section));
+
+  const persistExpanded = useCallback(
+    (expanded: boolean) => {
+      if (status === "authenticated") {
+        mutate({ sectionId: section.id, collapsed: expanded });
+      } else if (status === "unauthenticated") {
+        localStorage.setItem(getCategoryCollapseStorageKey(section.id), String(expanded));
+      }
+    },
+    [mutate, section.id, status],
+  );
+
+  useEffect(() => {
+    const handleCollapseChange = (event: Event) => {
+      const { sectionId, expanded } = (event as CustomEvent<CategoryExpandedChangeEventDetail>).detail;
+      if (sectionId === section.id) {
+        setOpened(expanded);
+      }
+    };
+
+    window.addEventListener(categoryCollapseChangeEventName, handleCollapseChange);
+
+    return () => {
+      window.removeEventListener(categoryCollapseChangeEventName, handleCollapseChange);
+    };
+  }, [section.id]);
+
+  const toggle = useCallback(() => {
+    setOpened((current) => {
+      const expanded = !current;
+      persistExpanded(expanded);
+
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent<CategoryExpandedChangeEventDetail>(categoryCollapseChangeEventName, {
+            detail: {
+              sectionId: section.id,
+              expanded,
+            },
+          }),
+        );
+      }
+
+      return expanded;
+    });
+  }, [persistExpanded, section.id]);
+
+  return [opened, { toggle }] as const;
+};
@@ -112,3 +112,17 @@
 .grid-stack-empty-wrapper {
  display: none !important;
 }
+
+.static-grid-container {
+  container-type: inline-size;
+}
+
+.static-grid-item-content {
+  position: absolute;
+  inset: 10px;
+
+  > .grid-stack-item-content {
+    width: 100%;
+    height: 100%;
+  }
+}
@@ -6,9 +6,9 @@
  },
  "engines": {
    "node": ">=24.16.0",
-    "pnpm": ">=10.33.4"
+    "pnpm": ">=10.34.1"
  },
-  "packageManager": "pnpm@10.33.4",
+  "packageManager": "pnpm@10.34.1",
  "pnpm": {
    "onlyBuiltDependencies": [
      "better-sqlite3"
@@ -0,0 +1,304 @@
+import { chromium } from "@playwright/test";
+import { createId } from "@paralleldrive/cuid2";
+import SuperJSON from "superjson";
+import { describe, expect, test } from "vitest";
+
+import * as sqliteSchema from "../packages/db/schema/sqlite";
+import { hashPasswordAsync } from "../packages/auth/security";
+import { createHomarrContainer } from "./shared/create-homarr-container";
+import { createSqliteDbFileAsync } from "./shared/e2e-db";
+import type { SqliteDatabase } from "./shared/e2e-db";
+
+const boardName = "responsive-board";
+const credentials = {
+  username: "responsive-admin",
+  password: "Comp(exP4sswOrd",
+};
+const viewports = [
+  { width: 320, height: 568 },
+  { width: 375, height: 667 },
+  { width: 768, height: 1024 },
+  { width: 1024, height: 768 },
+  { width: 1366, height: 768 },
+  { width: 1920, height: 1080 },
+];
+
+describe("Board responsive layout", () => {
+  test("renders static board layouts across common viewports and loads edit mode", async () => {
+    const { db, localMountPath } = await createSqliteDbFileAsync();
+    const { categorySectionId } = await seedResponsiveBoardAsync(db);
+    const homarrContainer = await createHomarrContainer({
+      mounts: {
+        "/appdata": localMountPath,
+      },
+    }).start();
+    const browser = await chromium.launch();
+    const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
+
+    try {
+      for (const viewport of viewports) {
+        const context = await browser.newContext({ viewport });
+        await context.addInitScript(() => {
+          window.__homarrLayoutShiftScore = 0;
+          new PerformanceObserver((entries) => {
+            for (const entry of entries.getEntries()) {
+              const layoutShift = entry as PerformanceEntry & { value: number; hadRecentInput: boolean };
+              if (!layoutShift.hadRecentInput) {
+                window.__homarrLayoutShiftScore += layoutShift.value;
+              }
+            }
+          }).observe({ type: "layout-shift", buffered: true });
+        });
+        await context.addInitScript(
+          ({ sectionId }) => {
+            localStorage.setItem(`homarr-section-collapsed-${sectionId}`, "true");
+          },
+          { sectionId: categorySectionId },
+        );
+        const page = await context.newPage();
+
+        await page.goto(`${baseUrl}/boards/${boardName}`);
+        await page.waitForSelector(".static-grid-item-content", { state: "visible" });
+        await page.waitForTimeout(500);
+
+        const result = await page.evaluate(() => {
+          const visibleLayout = Array.from(document.querySelectorAll<HTMLElement>(".static-board-layout")).find(
+            (element) => getComputedStyle(element).display !== "none",
+          );
+          const grids = Array.from(visibleLayout?.querySelectorAll<HTMLElement>(".static-grid") ?? []);
+          const hasOverlappingItems = grids.some((grid) => {
+            const rects = Array.from(grid.children)
+              .map((element) => element.getBoundingClientRect())
+              .filter((rect) => rect.width > 0 && rect.height > 0);
+
+            return rects.some((rect, index) =>
+              rects.slice(index + 1).some((otherRect) => {
+                const horizontalOverlap = Math.min(rect.right, otherRect.right) - Math.max(rect.left, otherRect.left);
+                const verticalOverlap = Math.min(rect.bottom, otherRect.bottom) - Math.max(rect.top, otherRect.top);
+                return horizontalOverlap > 1 && verticalOverlap > 1;
+              }),
+            );
+          });
+          const visibleItems = Array.from(
+            visibleLayout?.querySelectorAll<HTMLElement>(".static-grid-item-content") ?? [],
+          ).filter((element) => {
+            const rect = element.getBoundingClientRect();
+            return rect.width > 0 && rect.height > 0;
+          });
+
+          return {
+            hasVisibleLayout: Boolean(visibleLayout),
+            visibleItemCount: visibleItems.length,
+            hasHorizontalOverflow: document.documentElement.scrollWidth > window.innerWidth + 1,
+            hasOverlappingItems,
+            layoutShiftScore: window.__homarrLayoutShiftScore,
+          };
+        });
+
+        expect(result.hasVisibleLayout).toBe(true);
+        expect(result.visibleItemCount).toBe(4);
+        expect(result.hasHorizontalOverflow).toBe(false);
+        expect(result.hasOverlappingItems).toBe(false);
+        expect(result.layoutShiftScore).toBeLessThanOrEqual(0.01);
+
+        await context.close();
+      }
+
+      const context = await browser.newContext({ viewport: { width: 1366, height: 768 } });
+      const page = await context.newPage();
+      await page.goto(`${baseUrl}/auth/login`);
+      await page.getByLabel("Username").fill(credentials.username);
+      await page.getByLabel("Password").fill(credentials.password);
+      await page.locator("css=button[type='submit']").click();
+      await page.waitForURL(baseUrl);
+      await page.goto(`${baseUrl}/boards/${boardName}`);
+      await page.waitForSelector(".static-grid-item-content", { state: "visible" });
+
+      await page.keyboard.press("ControlOrMeta+E");
+
+      await page.waitForSelector(".grid-stack", { state: "visible" });
+      await expect.poll(() => page.locator(".grid-stack-item").count()).toBeGreaterThan(0);
+      await context.close();
+    } finally {
+      await browser.close();
+      await homarrContainer.stop();
+    }
+  }, 120_000);
+});
+
+const seedResponsiveBoardAsync = async (db: SqliteDatabase) => {
+  const userId = createId();
+  const boardId = createId();
+  const mobileLayoutId = createId();
+  const tabletLayoutId = createId();
+  const desktopLayoutId = createId();
+  const rootSectionId = createId();
+  const categorySectionId = createId();
+  const dynamicSectionId = createId();
+
+  await db.update(sqliteSchema.onboarding).set({ step: "finish" });
+  await db.insert(sqliteSchema.users).values({
+    id: userId,
+    name: credentials.username,
+    password: await hashPasswordAsync(credentials.password),
+  });
+  await db.insert(sqliteSchema.boards).values({
+    id: boardId,
+    name: boardName,
+    isPublic: true,
+    creatorId: userId,
+  });
+  await db.insert(sqliteSchema.layouts).values([
+    { id: mobileLayoutId, name: "Mobile", boardId, columnCount: 4, breakpoint: 0 },
+    { id: tabletLayoutId, name: "Tablet", boardId, columnCount: 8, breakpoint: 768 },
+    { id: desktopLayoutId, name: "Desktop", boardId, columnCount: 12, breakpoint: 1024 },
+  ]);
+  await db.insert(sqliteSchema.sections).values([
+    { id: rootSectionId, boardId, kind: "empty", xOffset: 0, yOffset: 0 },
+    { id: categorySectionId, boardId, kind: "category", xOffset: 0, yOffset: 1, name: "Systems" },
+    {
+      id: dynamicSectionId,
+      boardId,
+      kind: "dynamic",
+      options: SuperJSON.stringify({ title: "Nested", borderColor: "", customCssClasses: [] }),
+    },
+  ]);
+  await db.insert(sqliteSchema.sectionLayouts).values([
+    {
+      sectionId: dynamicSectionId,
+      layoutId: mobileLayoutId,
+      parentSectionId: categorySectionId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 4,
+      height: 2,
+    },
+    {
+      sectionId: dynamicSectionId,
+      layoutId: tabletLayoutId,
+      parentSectionId: categorySectionId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 4,
+      height: 2,
+    },
+    {
+      sectionId: dynamicSectionId,
+      layoutId: desktopLayoutId,
+      parentSectionId: categorySectionId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 6,
+      height: 2,
+    },
+  ]);
+
+  const rootItemId = await insertClockItemAsync(db, boardId);
+  const categoryItemId = await insertClockItemAsync(db, boardId);
+  const dynamicItemId = await insertClockItemAsync(db, boardId);
+  await db.insert(sqliteSchema.itemLayouts).values([
+    {
+      itemId: rootItemId,
+      sectionId: rootSectionId,
+      layoutId: mobileLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 2,
+      height: 1,
+    },
+    {
+      itemId: rootItemId,
+      sectionId: rootSectionId,
+      layoutId: tabletLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 3,
+      height: 1,
+    },
+    {
+      itemId: rootItemId,
+      sectionId: rootSectionId,
+      layoutId: desktopLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 4,
+      height: 1,
+    },
+    {
+      itemId: categoryItemId,
+      sectionId: categorySectionId,
+      layoutId: mobileLayoutId,
+      xOffset: 0,
+      yOffset: 2,
+      width: 4,
+      height: 1,
+    },
+    {
+      itemId: categoryItemId,
+      sectionId: categorySectionId,
+      layoutId: tabletLayoutId,
+      xOffset: 4,
+      yOffset: 0,
+      width: 4,
+      height: 2,
+    },
+    {
+      itemId: categoryItemId,
+      sectionId: categorySectionId,
+      layoutId: desktopLayoutId,
+      xOffset: 6,
+      yOffset: 0,
+      width: 6,
+      height: 2,
+    },
+    {
+      itemId: dynamicItemId,
+      sectionId: dynamicSectionId,
+      layoutId: mobileLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 2,
+      height: 1,
+    },
+    {
+      itemId: dynamicItemId,
+      sectionId: dynamicSectionId,
+      layoutId: tabletLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 2,
+      height: 1,
+    },
+    {
+      itemId: dynamicItemId,
+      sectionId: dynamicSectionId,
+      layoutId: desktopLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 3,
+      height: 1,
+    },
+  ]);
+
+  return {
+    categorySectionId,
+  };
+};
+
+const insertClockItemAsync = async (db: SqliteDatabase, boardId: string) => {
+  const itemId = createId();
+  await db.insert(sqliteSchema.items).values({
+    id: itemId,
+    boardId,
+    kind: "clock",
+    options: SuperJSON.stringify({ is24HourFormat: true }),
+    advancedOptions: SuperJSON.stringify({ title: null, customCssClasses: [], borderColor: "" }),
+  });
+  return itemId;
+};
+
+declare global {
+  interface Window {
+    __homarrLayoutShiftScore: number;
+  }
+}
@@ -60,9 +60,9 @@
  },
  "engines": {
    "node": ">=24.16.0",
-    "pnpm": ">=10.33.4"
+    "pnpm": ">=10.34.1"
  },
-  "packageManager": "pnpm@10.33.4",
+  "packageManager": "pnpm@10.34.1",
  "pnpm": {
    "onlyBuiltDependencies": [
      "@tree-sitter-grammars/tree-sitter-yaml",
@@ -76,14 +76,14 @@
      "tree-sitter-json"
    ],
    "overrides": {
-      "@babel/helpers@<7.26.10": ">=7.29.2",
-      "@babel/runtime@<7.26.10": ">=7.29.2",
+      "@babel/helpers@<7.26.10": ">=7.29.7",
+      "@babel/runtime@<7.26.10": ">=7.29.7",
      "axios@>=1.0.0 <1.8.2": ">=1.16.1",
      "brace-expansion@>=2.0.0 <=2.0.1": ">=5.0.6",
      "brace-expansion@>=1.0.0 <=1.1.11": ">=5.0.6",
      "esbuild@<=0.24.2": ">=0.28.0",
      "form-data@>=4.0.0 <4.0.4": ">=4.0.5",
-      "hono@<4.6.5": ">=4.12.22",
+      "hono@<4.6.5": ">=4.12.23",
      "linkifyjs@<4.3.2": ">=4.3.3",
      "nanoid@>=4.0.0 <5.0.9": ">=5.1.11",
      "prismjs@<1.30.0": ">=1.30.0",
@@ -93,7 +93,7 @@
      "sha.js@<=2.4.11": ">=2.4.12",
      "tar-fs@>=3.0.0 <3.0.9": ">=3.1.2",
      "tar-fs@>=2.0.0 <2.1.3": ">=3.1.2",
-      "tmp@<=0.2.3": ">=0.2.5",
+      "tmp@<=0.2.3": ">=0.2.7",
      "vite@>=5.0.0 <=5.4.18": ">=8.0.14"
    },
    "patchedDependencies": {
@@ -81,13 +81,7 @@ describe("initUser should initialize the first user", () => {
    await expect(actAsync()).rejects.toThrow("passwordsDoNotMatch");
  });

-  it.each([
-    ["aB2%"], // too short
-    ["abc123DEF"], // does not contain special characters
-    ["abcDEFghi+"], // does not contain numbers
-    ["ABC123+/-"], // does not contain lowercase
-    ["abc123+/-"], // does not contain uppercase
-  ])("should throw error that password requirements do not match for '%s' as password", async (password) => {
+  it.each([["aB2%"], ["short"]])("should reject passwords shorter than 8 characters for '%s'", async (password) => {
    const db = createDb();
    await createOnboardingStepAsync(db, "user");
    const caller = userRouter.createCaller({
@@ -103,7 +97,55 @@ describe("initUser should initialize the first user", () => {
        confirmPassword: password,
      });

-    await expect(actAsync()).rejects.toThrow("passwordRequirements");
+    await expect(actAsync()).rejects.toThrow();
+  });
+
+  it("should accept passwords without complexity requirements", async () => {
+    const db = createDb();
+    await createOnboardingStepAsync(db, "user");
+    const caller = userRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: null,
+    });
+
+    await caller.initUser({
+      username: "test",
+      password: "abc123DEF",
+      confirmPassword: "abc123DEF",
+    });
+
+    const user = await db.query.users.findFirst({
+      columns: {
+        id: true,
+      },
+    });
+
+    expect(user).toBeDefined();
+  });
+
+  it("should accept passwords with special characters like LoveHomarr<3", async () => {
+    const db = createDb();
+    await createOnboardingStepAsync(db, "user");
+    const caller = userRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: null,
+    });
+
+    await caller.initUser({
+      username: "test",
+      password: "LoveHomarr<3",
+      confirmPassword: "LoveHomarr<3",
+    });
+
+    const user = await db.query.users.findFirst({
+      columns: {
+        id: true,
+      },
+    });
+
+    expect(user).toBeDefined();
  });
 });

@@ -5,3 +5,5 @@ export * from "./icon-picker/icon-picker";
 export * from "./new-app/icon-matcher";

 export * from "./upload-media/upload-media";
+
+export * from "./user-create/user-create-password-fields";
@@ -0,0 +1,33 @@
+"use client";
+
+import { PasswordInput, Stack } from "@mantine/core";
+import type { PasswordInputProps } from "@mantine/core";
+
+import { useScopedI18n } from "@homarr/translation/client";
+import { CustomPasswordInput } from "@homarr/ui";
+
+interface UserCreatePasswordFieldsProps {
+  passwordInputProps: PasswordInputProps;
+  confirmPasswordInputProps: PasswordInputProps;
+  variant?: PasswordInputProps["variant"];
+}
+
+export const UserCreatePasswordFields = ({
+  passwordInputProps,
+  confirmPasswordInputProps,
+  variant,
+}: UserCreatePasswordFieldsProps) => {
+  const t = useScopedI18n("user.field");
+
+  return (
+    <Stack gap="md">
+      <CustomPasswordInput
+        withPasswordRequirements
+        label={t("password.label")}
+        variant={variant}
+        {...passwordInputProps}
+      />
+      <PasswordInput label={t("passwordConfirm.label")} variant={variant} {...confirmPasswordInputProps} />
+    </Stack>
+  );
+};
@@ -44,6 +44,7 @@ const optionMapping: OptionMapping = {
    hideIcon: (oldOptions) => oldOptions.items.some((item) => item.hideIcon),
    hideHostname: (oldOptions) => oldOptions.items.some((item) => item.hideHostname),
    openNewTab: (oldOptions) => oldOptions.items.some((item) => item.openNewTab),
+    withBorder: () => undefined,
  },
  calendar: {
    releaseType: (oldOptions) => [oldOptions.radarrReleaseType],
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Contrasenya",
-        "requirement": {
+        "suggestion": {
          "length": "Inclou com a mínim 8 caràcters",
          "lowercase": "Inclou minúscules",
          "uppercase": "Inclou majúscules",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "密码",
-        "requirement": {
+        "suggestion": {
          "length": "至少包含 8 个字符",
          "lowercase": "包含小写字母",
          "uppercase": "包含大写字母",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "crwdns26:0crwdne26:0",
-        "requirement": {
+        "suggestion": {
          "length": "crwdns28:0crwdne28:0",
          "lowercase": "crwdns30:0crwdne30:0",
          "uppercase": "crwdns32:0crwdne32:0",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Heslo",
-        "requirement": {
+        "suggestion": {
          "length": "Obsahuje alespoň 8 znaků",
          "lowercase": "Obsahuje malé písmeno",
          "uppercase": "Obsahuje velké písmeno",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Adgangskode",
-        "requirement": {
+        "suggestion": {
          "length": "Inkluderer mindst 8 tegn",
          "lowercase": "Inkluderer små bogstaver",
          "uppercase": "Inkluderer store bogstaver",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Passwort",
-        "requirement": {
+        "suggestion": {
          "length": "Enthält mindestens 8 Zeichen",
          "lowercase": "Enthält Kleinbuchstaben",
          "uppercase": "Enthält Großbuchstaben",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Passwort",
-        "requirement": {
+        "suggestion": {
          "length": "Enthält mindestens 8 Zeichen",
          "lowercase": "Enthält Kleinbuchstaben",
          "uppercase": "Enthält Großbuchstaben",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Κωδικός",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "Περιλαμβάνει πεζό γράμμα",
          "uppercase": "Περιλαμβάνει κεφαλαίο γράμμα",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Password",
-        "requirement": {
+        "suggestion": {
          "length": "Includes a minimum of 8 characters",
          "lowercase": "Includes a lower-case letter",
          "uppercase": "Includes an upper-case letter",
@@ -132,8 +132,9 @@
      },
      "password": {
        "label": "Password",
-        "requirement": {
-          "length": "Includes at least 8 characters",
+        "suggestionsTitle": "Password suggestions",
+        "suggestion": {
+          "length": "At least 8 characters",
          "lowercase": "Includes lowercase letter",
          "uppercase": "Includes uppercase letter",
          "number": "Includes number",
@@ -1405,6 +1406,9 @@
        "openNewTab": {
          "label": "Open in new tab"
        },
+        "withBorder": {
+          "label": "Show border"
+        },
        "items": {
          "label": "Bookmarks",
          "add": "Add bookmark"
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Contraseña",
-        "requirement": {
+        "suggestion": {
          "length": "Incluye al menos 8 caracteres",
          "lowercase": "Incluye al menos una letra minúscula",
          "uppercase": "Incluye al menos una letra mayúscula",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "",
          "uppercase": "",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Mot de passe",
-        "requirement": {
+        "suggestion": {
          "length": "Contient au moins 8 caractères",
          "lowercase": "Inclut une lettre minuscule",
          "uppercase": "Inclut une lettre majuscule",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "סיסמה",
-        "requirement": {
+        "suggestion": {
          "length": "כולל לפחות 8 תווים",
          "lowercase": "אפשר אותיות קטנות",
          "uppercase": "אפשר אותיות גדולות",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Lozinka",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "Uključuje mala slova",
          "uppercase": "Uključuje veliko slovo",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Jelszó",
-        "requirement": {
+        "suggestion": {
          "length": "Tartalmazzon legalább 8 karaktert",
          "lowercase": "Tartalmazzon kisbetűt",
          "uppercase": "Tartalmazzon nagybetűt",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Password",
-        "requirement": {
+        "suggestion": {
          "length": "Include almeno 8 caratteri",
          "lowercase": "Include lettera minuscola",
          "uppercase": "Include lettera maiuscola",
@@ -1056,7 +1056,7 @@
      }
    },
    "noResults": {
-      "title": ""
+      "title": "Nessun media caricato"
    }
  },
  "common": {
@@ -1088,8 +1088,8 @@
      "checkLogs": "Controlla i log per maggiori dettagli",
      "tryAgain": "Riprova",
      "loading": "Caricamento",
-      "show": "",
-      "hide": ""
+      "show": "Visualizza",
+      "hide": "Nascondi"
    },
    "here": "qui",
    "iconPicker": {
@@ -1255,7 +1255,7 @@
        "label": {
          "create": "Nuova categoria",
          "changePosition": "Cambia posizione",
-          "settings": ""
+          "settings": "Impostazioni"
        }
      },
      "openAllInNewTabs": {
@@ -3459,7 +3459,7 @@
          "private": "Questa board è privata"
        },
        "noResults": {
-          "title": ""
+          "title": "Ancora nessuna board"
        },
        "modal": {
          "createBoard": {
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "パスワード",
-        "requirement": {
+        "suggestion": {
          "length": "少なくとも 8 文字以上を含む",
          "lowercase": "小文字を含む",
          "uppercase": "大文字を含む",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "비밀번호",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "소문자 포함",
          "uppercase": "대문자 포함",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Slaptažodis",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "",
          "uppercase": "",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Parole",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "Ietver mazo burtu",
          "uppercase": "Ietver lielo burtu",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Wachtwoord",
-        "requirement": {
+        "suggestion": {
          "length": "Bevat ten minste 8 tekens",
          "lowercase": "Inclusief kleine letter",
          "uppercase": "Inclusief hoofdletter",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Passord",
-        "requirement": {
+        "suggestion": {
          "length": "Inkluderer minst 8 tegn",
          "lowercase": "Inkluderer liten bokstav",
          "uppercase": "Inkluderer stor bokstav",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Hasło",
-        "requirement": {
+        "suggestion": {
          "length": "Zawiera co najmniej 8 znaków",
          "lowercase": "Zawiera małą literę",
          "uppercase": "Zawiera wielką literę",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Senha",
-        "requirement": {
+        "suggestion": {
          "length": "Inclua pelo menos 8 caracteres",
          "lowercase": "Inclui letras minúsculas",
          "uppercase": "Inclui letras maiúsculas",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "",
          "uppercase": "",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Parola",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "Să includă litere mici",
          "uppercase": "Să includă litere mari",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Пароль",
-        "requirement": {
+        "suggestion": {
          "length": "Содержит не менее 8 символов",
          "lowercase": "Содержит строчную букву",
          "uppercase": "Содержит заглавную букву",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Heslo",
-        "requirement": {
+        "suggestion": {
          "length": "Obsahuje aspoň 8 znakov",
          "lowercase": "Zahŕňa malé písmeno",
          "uppercase": "Zahŕňa veľké písmená",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Geslo",
-        "requirement": {
+        "suggestion": {
          "length": "",
          "lowercase": "Vključuje male črke",
          "uppercase": "Vključuje velike tiskane črke",
@@ -82,7 +82,7 @@
        "form": {
          "name": {
            "label": "Gruppens namn",
-            "description": ""
+            "description": "Namnet måste matcha admin-grupp i extern tjänst"
          }
        }
      },
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Lösenord",
-        "requirement": {
+        "suggestion": {
          "length": "Använd minst 8 tecken",
          "lowercase": "Använd liten bokstav",
          "uppercase": "Använd stor bokstav",
@@ -159,7 +159,7 @@
        "label": "Visa sökresultat i ny flik"
      },
      "ddgBangs": {
-        "label": ""
+        "label": "Aktivera DuckDuckGo bangs"
      }
    },
    "error": {
@@ -252,10 +252,10 @@
      "changeDdgBangs": {
        "notification": {
          "success": {
-            "message": ""
+            "message": "DuckDuckGo bangs inställningen ändrad"
          },
          "error": {
-            "message": ""
+            "message": "DuckDuckGo bangs inställningen kunde inte ändras"
          }
        }
      },
@@ -350,12 +350,12 @@
            "description": "Tillåt medlemmar att addera valfri applikation på sina tavlor"
          },
          "modify-all": {
-            "label": "",
-            "description": ""
+            "label": "Modifiera alla appar",
+            "description": "Tillåt att medlemmar modifierar alla appar"
          },
          "full-all": {
-            "label": "",
-            "description": ""
+            "label": "Fullständiga rättigheter till appar",
+            "description": "Tillåt att medlemmar hanterar, använder och raderar alla appar"
          }
        }
      },
@@ -363,20 +363,20 @@
        "title": "Tavlor",
        "item": {
          "create": {
-            "label": "",
-            "description": ""
+            "label": "Skapa tavlor",
+            "description": "Tillåt att medlemmar skapar tavlor"
          },
          "view-all": {
-            "label": "",
-            "description": ""
+            "label": "Se alla tavlor",
+            "description": "Tillåt att medlemmar ser alla tavlor"
          },
          "modify-all": {
-            "label": "",
-            "description": ""
+            "label": "Modifiera alla tavlor",
+            "description": "Tillåt att medlemmar modifierar alla tavlor (Detta inkluderar inte åtkomstkontroll eller farozonen)"
          },
          "full-all": {
-            "label": "",
-            "description": ""
+            "label": "Fullständiga rättigheter till tavlor",
+            "description": "Tillåt att medlemmar ser, modifierar och tar bort alla tavlor (detta inkluderar åtkomstkontroll och farozonen)"
          }
        }
      },
@@ -392,38 +392,38 @@
            "description": "Tillåter medlemmar att addera valfri integration till sina tavlor"
          },
          "interact-all": {
-            "label": "",
-            "description": ""
+            "label": "Interagera med alla integrationer",
+            "description": "Tillåt att medlemmar interagerar med alla integrationer"
          },
          "full-all": {
-            "label": "",
-            "description": ""
+            "label": "Fullständiga rättigheter till integrationer",
+            "description": "Tillåt att medlemmar hanterar, använder och interagerar med alla integrationer"
          }
        }
      },
      "media": {
-        "title": "",
+        "title": "Media",
        "item": {
          "upload": {
-            "label": "",
-            "description": ""
+            "label": "Ladda upp media",
+            "description": "Tillåt att medlemmar laddar upp media"
          },
          "view-all": {
-            "label": "",
-            "description": ""
+            "label": "Se all media",
+            "description": "Tillåt att medlemmar ser all media"
          },
          "full-all": {
-            "label": "",
-            "description": ""
+            "label": "Fullständiga rättigheter till media",
+            "description": "Tillåt att medlemmar hanterar och raderar all media"
          }
        }
      },
      "other": {
-        "title": "",
+        "title": "Annat",
        "item": {
          "view-logs": {
-            "label": "",
-            "description": ""
+            "label": "Se loggar",
+            "description": "Tillåt att medlemmar ser loggar"
          }
        }
      },
@@ -435,32 +435,32 @@
            "description": "Tillåt medlemmar att skapa sökmotorer"
          },
          "modify-all": {
-            "label": "",
-            "description": ""
+            "label": "Modifiera alla sökmotorer",
+            "description": "Tillåt att medlemmar modifierar alla sökmotorer"
          },
          "full-all": {
-            "label": "",
-            "description": ""
+            "label": "Fullständiga rättigheter till sökmotorer",
+            "description": "Tillåt att medlemmar hanterar och raderar alla sökmotorer"
          }
        }
      }
    },
    "memberNotice": {
-      "mixed": "",
-      "external": ""
+      "mixed": "Vissa medlemmar är från externa tjänster och kan inte hantera här",
+      "external": "Alla medlemmar är från externa tjänster och kan inte hanteras här"
    },
    "reservedNotice": {
-      "message": ""
+      "message": "Denna grupp är reserverad för systemet så vissa åtgärder är begränsade. <checkoutDocs></checkoutDocs>"
    },
    "action": {
      "create": {
        "label": "Addera en grupp",
        "notification": {
          "success": {
-            "message": ""
+            "message": "Gruppen har skapats"
          },
          "error": {
-            "message": ""
+            "message": "Gruppen kunde inte skapas"
          }
        }
      },
@@ -470,7 +470,7 @@
        "confirm": "Är du säker på att du vill överföra ägarskapet för gruppen {name} till {username}?",
        "notification": {
          "success": {
-            "message": ""
+            "message": "Överfört grupp {group} till {user}"
          },
          "error": {
            "message": "Kunde inte överföra ägarskap"
@@ -501,38 +501,38 @@
        "notification": {
          "success": {
            "title": "Behörigheter sparade",
-            "message": ""
+            "message": "Rättigheterna sparade"
          },
          "error": {
-            "title": "",
-            "message": ""
+            "title": "Rättigheterna ej sparade",
+            "message": "Rättigheterna har inte sparats"
          }
        }
      },
      "update": {
        "notification": {
          "success": {
-            "message": ""
+            "message": "Gruppen {name} har sparats"
          },
          "error": {
-            "message": ""
+            "message": "Kunde inte spara gruppen {name}"
          }
        }
      },
      "select": {
        "label": "Välj en grupp",
-        "notFound": ""
+        "notFound": "Ingen grupp hittad"
      },
      "settings": {
        "board": {
          "notification": {
            "success": {
              "title": "Inställningarna sparades",
-              "message": ""
+              "message": "Inställningarna för tavlan har sparats"
            },
            "error": {
              "title": "Kunde inte spara inställningarna",
-              "message": ""
+              "message": "Kunde inte spara inställningarna för tavlan"
            }
          }
        }
@@ -540,10 +540,10 @@
      "changePosition": {
        "notification": {
          "success": {
-            "message": ""
+            "message": "Ordning ändrad"
          },
          "error": {
-            "message": ""
+            "message": "Ordningen kunde ändras"
          }
        }
      }
@@ -559,20 +559,20 @@
      "list": {
        "title": "Applikationer",
        "noResults": {
-          "title": "",
-          "action": ""
+          "title": "Det finns inga appar ännu",
+          "action": "Skapa din första app"
        }
      },
      "create": {
        "title": "Addera applikation",
        "notification": {
          "success": {
-            "title": "",
-            "message": ""
+            "title": "Skapandet lyckades",
+            "message": "Appen skapades framgångsrikt"
          },
          "error": {
-            "title": "",
-            "message": ""
+            "title": "Skapandet misslyckades",
+            "message": "Appen kunde inte skapas"
          }
        }
      },
@@ -581,11 +581,11 @@
        "notification": {
          "success": {
            "title": "Ändringarna har sparats",
-            "message": ""
+            "message": "Appen sparades"
          },
          "error": {
            "title": "Misslyckades med att spara ändringarna",
-            "message": ""
+            "message": "Appen kunde inte sparas"
          }
        }
      },
@@ -594,12 +594,12 @@
        "message": "Är du säker på att du vill ta bort applikationen {name}?",
        "notification": {
          "success": {
-            "title": "",
-            "message": ""
+            "title": "Borttagning lyckades",
+            "message": "Appen har tagits bort"
          },
          "error": {
-            "title": "",
-            "message": ""
+            "title": "Borttagning misslyckades",
+            "message": "Kunde inte ta bort appen"
          }
        }
      }
@@ -612,21 +612,21 @@
        "label": "Beskrivning"
      },
      "url": {
-        "label": ""
+        "label": "URL"
      },
      "useDifferentUrlForPing": {
        "checkbox": {
-          "label": "",
-          "description": ""
+          "label": "Använd annan URL för ping",
+          "description": "Användbart om Homarr kan komma åt appen direkt via ett internt host-namn eller nätverk för att undvika bandbreddsanvändning hos internetleverantör"
        }
      }
    },
    "action": {
      "select": {
-        "label": "",
-        "notFound": "",
+        "label": "Välj app",
+        "notFound": "Ingen app hittades",
        "search": "Sök efter en applikation",
-        "noResults": "",
+        "noResults": "Inga resultat",
        "action": "Välj {app}",
        "title": "Välj en applikation att lägga till på tavlan"
      },
@@ -642,56 +642,56 @@
    "page": {
      "list": {
        "title": "Integrationer",
-        "search": "",
+        "search": "Sök integrationer",
        "noResults": {
-          "title": ""
+          "title": "Det finns inga integrationer ännu"
        }
      },
      "create": {
-        "title": "",
+        "title": "Ny {name} integration",
        "notification": {
          "success": {
-            "title": "",
-            "message": ""
+            "title": "Skapandet lyckades",
+            "message": "Integrationen har skapats"
          },
          "error": {
-            "title": "",
-            "message": ""
+            "title": "Skapandet misslyckades",
+            "message": "Integrationen kunde inte skapas"
          }
        },
        "app": {
          "option": {
            "existing": {
-              "title": "",
-              "label": ""
+              "title": "Befintlig",
+              "label": "Välj befintlig app"
            },
            "new": {
-              "title": "",
+              "title": "Ny",
              "url": {
-                "label": "",
-                "description": ""
+                "label": "App URL",
+                "description": "URL:en som appen kommer att öppna när den används från tavlan"
              }
            }
          }
        }
      },
      "edit": {
-        "title": "",
+        "title": "Redigera {name} integration",
        "notification": {
          "success": {
            "title": "Ändringarna har sparats",
-            "message": ""
+            "message": "Integrationen sparad"
          },
          "error": {
-            "title": "",
-            "message": ""
+            "title": "Kunde inte tillämpa ändringar",
+            "message": "Integrationen kunde inte sparas"
          }
        },
        "app": {
          "action": {
-            "add": "",
-            "remove": "",
-            "select": ""
+            "add": "Länka en app",
+            "remove": "Ta bort länk",
+            "select": "Välj en app att länka till"
          }
        }
      },
@@ -700,12 +700,12 @@
        "message": "Är du säker på att du vill ta bort integrationen {name}?",
        "notification": {
          "success": {
-            "title": "",
-            "message": ""
+            "title": "Borttagning lyckades",
+            "message": "Integrationen har tagits bort"
          },
          "error": {
-            "title": "",
-            "message": ""
+            "title": "Borttagning misslyckades",
+            "message": "Kunde inte ta bort integrationen"
          }
        }
      }
@@ -715,44 +715,44 @@
        "label": "Namn"
      },
      "url": {
-        "label": ""
+        "label": "URL"
      },
      "attemptSearchEngineCreation": {
-        "label": "",
-        "description": ""
+        "label": "Skapa sökmotor",
+        "description": "Integrationen \"{kind}\" kan inte användas med sökmotorer. Markera detta för att automatiskt konfigurera sökmotorn."
      },
      "app": {
-        "sectionTitle": ""
+        "sectionTitle": "Länkad app"
      },
      "createApp": {
-        "label": "",
-        "description": ""
+        "label": "Skapa app",
+        "description": "Skapa en app med samma namn och ikon som integrationen. Lämna fältet nedan tomt för att skapa en app med integrationens URL."
      },
      "appHref": {
-        "placeholder": ""
+        "placeholder": "Egen app-URL"
      }
    },
    "action": {
-      "create": ""
+      "create": "Ny integration"
    },
    "testConnection": {
      "action": {
-        "create": "",
-        "edit": ""
+        "create": "Testa anslutningen och skapa",
+        "edit": "Testa anslutningen och skapa"
      },
      "error": {
        "common": {
          "cause": {
-            "title": ""
+            "title": "Orsak med mer detaljer"
          }
        },
        "unknown": {
-          "title": "",
-          "description": ""
+          "title": "Okänt fel",
+          "description": "Ett okänt fel inträffade, öppna orsaken nedan för att se mer detaljer"
        },
        "parse": {
-          "title": "",
-          "description": ""
+          "title": "Parsningsfel",
+          "description": "Svaret kunde inte analyseras. Verifiera att URL pekar på bas-URL för tjänsten."
        },
        "authorization": {
          "title": "",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Şifre",
-        "requirement": {
+        "suggestion": {
          "length": "En az 8 karakter içermeli",
          "lowercase": "Küçük harf içermeli",
          "uppercase": "Büyük harf içermeli",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Пароль",
-        "requirement": {
+        "suggestion": {
          "length": "Включає принаймні 8 символів",
          "lowercase": "Включає малу літеру",
          "uppercase": "Включає велику літеру",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "Mật khẩu",
-        "requirement": {
+        "suggestion": {
          "length": "Bao gồm ít nhất 8 kí tự",
          "lowercase": "Bao gồm chữ thường",
          "uppercase": "Bao gồm chữ in hoa",
@@ -132,7 +132,7 @@
      },
      "password": {
        "label": "密碼",
-        "requirement": {
+        "suggestion": {
          "length": "至少包含 8 個字符",
          "lowercase": "包含小寫字母",
          "uppercase": "包含大寫字母",
@@ -20,15 +20,15 @@ export const CustomPasswordInput = ({ withPasswordRequirements, ...props }: Cust
 };

 const WithPasswordRequirements = (props: PasswordInputProps) => {
-  const [value, setValue] = useState("");
+  const [password, setPassword] = useState("");

  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setValue(event.currentTarget.value);
+    setPassword(event.currentTarget.value);
    props.onChange?.(event);
  };

  return (
-    <PasswordRequirementsPopover password={value}>
+    <PasswordRequirementsPopover password={password}>
      <PasswordInput {...props} onChange={onChange} />
    </PasswordRequirementsPopover>
  );
@@ -1,14 +1,19 @@
 import { rem, Text } from "@mantine/core";
-import { IconCheck, IconX } from "@tabler/icons-react";
+import { IconCheck, IconPoint } from "@tabler/icons-react";
+
+const getRequirementDisplay = (meets: boolean) =>
+  ({
+    true: { color: "teal", Icon: IconCheck },
+    false: { color: "dimmed", Icon: IconPoint },
+  })[String(meets) as "true" | "false"];

 export function PasswordRequirement({ meets, label }: { meets: boolean; label: string }) {
+  const display = getRequirementDisplay(meets);
+  const Icon = display.Icon;
+
  return (
-    <Text c={meets ? "teal" : "red"} display="flex" style={{ alignItems: "center" }} size="sm">
-      {meets ? (
-        <IconCheck style={{ width: rem(14), height: rem(14) }} />
-      ) : (
-        <IconX style={{ width: rem(14), height: rem(14) }} />
-      )}
+    <Text c={display.color} display="flex" style={{ alignItems: "center" }} size="sm">
+      <Icon style={{ width: rem(14), height: rem(14) }} />
      <Text span ml={10}>
        {label}
      </Text>
@@ -1,16 +1,24 @@
 import type { PropsWithChildren } from "react";
 import { useState } from "react";
-import { Popover, Progress } from "@mantine/core";
+import { Popover, Progress, Text } from "@mantine/core";

 import { useScopedI18n } from "@homarr/translation/client";
 import { passwordRequirements } from "@homarr/validation/user";

 import { PasswordRequirement } from "./password-requirement";

+const strengthColorMap = [
+  { min: 100, color: "teal" },
+  { min: 51, color: "yellow" },
+  { min: 0, color: "dimmed" },
+] as const;
+
 export const PasswordRequirementsPopover = ({ password, children }: PropsWithChildren<{ password: string }>) => {
+  const tPassword = useScopedI18n("user.field.password");
  const requirements = useRequirements();
  const strength = useStrength(password);
  const [popoverOpened, setPopoverOpened] = useState(false);
+  const strengthColor = strengthColorMap.find(({ min }) => strength >= min)?.color ?? "dimmed";
  const checks = (
    <>
      {requirements.map((requirement) => (
@@ -19,8 +27,6 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
    </>
  );

-  const color = strength === 100 ? "teal" : strength > 50 ? "yellow" : "red";
-
  return (
    <Popover opened={popoverOpened} position="bottom" width="target" transitionProps={{ transition: "pop" }}>
      <Popover.Target>
@@ -29,7 +35,10 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
        </div>
      </Popover.Target>
      <Popover.Dropdown>
-        <Progress color={color} value={strength} size={5} mb="xs" />
+        <Progress color={strengthColor} value={strength} size={5} mb="xs" />
+        <Text size="sm" c="dimmed" mb="xs">
+          {tPassword("suggestionsTitle")}
+        </Text>
        {checks}
      </Popover.Dropdown>
    </Popover>
@@ -37,7 +46,7 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
 };

 const useRequirements = () => {
-  const t = useScopedI18n("user.field.password.requirement");
+  const t = useScopedI18n("user.field.password.suggestion");

  return passwordRequirements.map(({ check, value }) => ({ check, label: t(value) }));
 };
@@ -19,24 +19,10 @@ export const passwordRequirements = [
  { check: regexCheck(/[$&+,:;=?@#|'<>.^*()%!\-~`"_/\\[\]{}]/), value: "special" },
 ] satisfies {
  check: (value: string) => boolean;
-  value: keyof TranslationObject["user"]["field"]["password"]["requirement"];
+  value: keyof TranslationObject["user"]["field"]["password"]["suggestion"];
 }[];

-export const userPasswordSchema = z
-  .string()
-  .min(8)
-  .max(255)
-  .refine(
-    (value) => {
-      return passwordRequirements.every((requirement) => requirement.check(value));
-    },
-    {
-      params: createCustomErrorParams({
-        key: "passwordRequirements",
-        params: {},
-      }),
-    },
-  );
+export const userPasswordSchema = z.string().min(8).max(255);

 const addConfirmPasswordRefinement = <
  TSchema extends z.ZodObject<{ password: z.core.$ZodString; confirmPassword: z.core.$ZodString }, z.core.$strip>,
@@ -16,7 +16,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
  const board = useRequiredBoard();
  const [data] = clientApi.app.byIds.useSuspenseQuery(options.items, {
    select(data) {
-      return data.sort((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
+      return data.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
    },
  });

@@ -56,6 +56,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
          hideIcon={options.hideIcon}
          hideHostname={options.hideHostname}
          openNewTab={options.openNewTab}
+          withBorder={options.withBorder}
          hasIconColor={board.iconColor !== null}
        />
      )}
@@ -67,6 +68,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
          hideIcon={options.hideIcon}
          hideHostname={options.hideHostname}
          openNewTab={options.openNewTab}
+          withBorder={options.withBorder}
          hasIconColor={board.iconColor !== null}
        />
      )}
@@ -81,6 +83,7 @@ interface FlexLayoutProps {
  hideIcon: boolean;
  hideHostname: boolean;
  openNewTab: boolean;
+  withBorder: boolean;
  hasIconColor: boolean;
 }

@@ -91,6 +94,7 @@ const FlexLayout = ({
  hideIcon,
  hideHostname,
  openNewTab,
+  withBorder,
  hasIconColor,
 }: FlexLayoutProps) => {
  const board = useRequiredBoard();
@@ -106,7 +110,15 @@ const FlexLayout = ({
            key={app.id}
            w="100%"
          >
-            <Card radius={board.itemRadius} className={classes.card} w="100%" display="flex" p={4} h="100%">
+            <Card
+              radius={board.itemRadius}
+              className={classes.card}
+              w="100%"
+              display="flex"
+              p={4}
+              h="100%"
+              withBorder={withBorder}
+            >
              {direction === "row" ? (
                <VerticalItem
                  app={app}
@@ -138,6 +150,7 @@ interface GridLayoutProps {
  hideIcon: boolean;
  hideHostname: boolean;
  openNewTab: boolean;
+  withBorder: boolean;
  itemDirection: "horizontal" | "vertical";
  hasIconColor: boolean;
 }
@@ -148,6 +161,7 @@ const GridLayout = ({
  hideIcon,
  hideHostname,
  openNewTab,
+  withBorder,
  itemDirection,
  hasIconColor,
 }: GridLayoutProps) => {
@@ -168,6 +182,7 @@ const GridLayout = ({
            h="100%"
            className={combineClasses(classes.card, classes["card-grid"])}
            radius={board.itemRadius}
+            withBorder={withBorder}
            p="xs"
          >
            {itemDirection === "horizontal" ? (
@@ -24,6 +24,7 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
      hideIcon: factory.switch({ defaultValue: false }),
      hideHostname: factory.switch({ defaultValue: false }),
      openNewTab: factory.switch({ defaultValue: true }),
+      withBorder: factory.switch({ defaultValue: false }),
      items: factory.sortableItemList<RouterOutputs["app"]["all"][number], string>({
        ItemComponent: ({ item, handle: Handle, removeItem, rootAttributes }) => {
          return (
@@ -1,20 +1,10 @@
 .statItem {
  padding: 12px;
  border-radius: var(--mantine-radius-md);
-  background-color: var(--mantine-color-gray-0);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
  transition: all 0.2s ease;

  &:hover {
-    background-color: var(--mantine-color-gray-1);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .statItem {
-    background-color: var(--mantine-color-dark-6);
-
-    &:hover {
-      background-color: var(--mantine-color-dark-5);
-    }
+    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
  }
 }
@@ -1,7 +1,7 @@
 import type { ComponentType } from "react";
 import type { Loader } from "next/dynamic";
 import dynamic from "next/dynamic";
-import { Center, Loader as UiLoader } from "@mantine/core";
+import { Skeleton } from "@mantine/core";

 import { objectEntries } from "@homarr/common";
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
@@ -107,11 +107,7 @@ export const loadWidgetDynamic = <TKind extends WidgetKind>(kind: TKind) => {
  const newlyLoadedComponent = dynamic<WidgetComponentProps<TKind>>(
    widgetImports[kind].componentLoader as Loader<WidgetComponentProps<TKind>>,
    {
-      loading: () => (
-        <Center w="100%" h="100%">
-          <UiLoader />
-        </Center>
-      ),
+      loading: () => <Skeleton w="100%" h="100%" radius="md" animate />,
    },
  );

@@ -11,6 +11,8 @@ import prefetchForApps from "./app/prefetch";
 import prefetchForBookmarks from "./bookmarks/prefetch";
 import type { Prefetch, WidgetOptionsRecordOf } from "./definition";
 import type { inferOptionsFromCreator } from "./options";
+import prefetchRssFeedsAsync from "./rssFeed/prefetch";
+import prefetchWeatherAsync from "./weather/prefetch";

 const cachedGetServerSettingsAsync = cache(getServerSettingsAsync);

@@ -19,6 +21,8 @@ const prefetchCallbacks: Partial<{
 }> = {
  bookmarks: prefetchForBookmarks,
  app: prefetchForApps,
+  weather: prefetchWeatherAsync,
+  rssFeed: prefetchRssFeedsAsync,
 };

 export const prefetchForKindAsync = async <TKind extends WidgetKind>(
@@ -0,0 +1,22 @@
+import { api, trpc } from "@homarr/api/server";
+import { createLogger } from "@homarr/core/infrastructure/logs";
+
+import type { Prefetch } from "../definition";
+
+const logger = createLogger({ module: "rssFeedWidgetPrefetch" });
+
+const prefetchRssFeedsAsync: Prefetch<"rssFeed"> = async (queryClient, items) => {
+  for (const item of items) {
+    const input = {
+      urls: item.options.feedUrls,
+      maximumAmountPosts: item.options.maximumAmountPosts,
+    };
+
+    const data = await api.widget.rssFeed.getFeeds(input);
+    queryClient.setQueryData(trpc.widget.rssFeed.getFeeds.queryKey(input), data);
+  }
+
+  logger.info("Successfully prefetched RSS feeds", { count: items.length });
+};
+
+export default prefetchRssFeedsAsync;
@@ -0,0 +1,29 @@
+import { api, trpc } from "@homarr/api/server";
+import { createLogger } from "@homarr/core/infrastructure/logs";
+
+import type { Prefetch } from "../definition";
+
+const logger = createLogger({ module: "weatherWidgetPrefetch" });
+
+const prefetchWeatherAsync: Prefetch<"weather"> = async (queryClient, items) => {
+  const locations = items.map((item) => ({
+    latitude: item.options.location.latitude,
+    longitude: item.options.location.longitude,
+  }));
+
+  const uniqueLocations = locations.filter(
+    (loc, idx, arr) =>
+      arr.findIndex((other) => other.latitude === loc.latitude && other.longitude === loc.longitude) === idx,
+  );
+
+  await Promise.all(
+    uniqueLocations.map(async (input) => {
+      const data = await api.widget.weather.atLocation(input);
+      queryClient.setQueryData(trpc.widget.weather.atLocation.queryKey(input), data);
+    }),
+  );
+
+  logger.info("Successfully prefetched weather data", { count: uniqueLocations.length });
+};
+
+export default prefetchWeatherAsync;
@@ -6,7 +6,7 @@ catalog:
  "@auth/core": ^0.41.2
  "@auth/drizzle-adapter": ^1.11.2
  "@ctrl/deluge": ^8.0.0
-  "@ctrl/qbittorrent": ^9.12.1
+  "@ctrl/qbittorrent": ^9.12.2
  "@ctrl/transmission": ^7.4.0
  "@dnd-kit/core": ^6.3.1
  "@dnd-kit/modifiers": ^9.0.0
@@ -20,17 +20,17 @@ catalog:
  "@immich/sdk": ^2.7.5
  "@jellyfin/sdk": ^0.13.0
  "@kubernetes/client-node": ^1.4.0
-  "@mantine/charts": ^9.2.1
-  "@mantine/colors-generator": ^9.2.1
-  "@mantine/core": ^9.2.1
-  "@mantine/dates": ^9.2.1
-  "@mantine/dropzone": ^9.2.1
-  "@mantine/form": ^9.2.1
-  "@mantine/hooks": ^9.2.1
-  "@mantine/modals": ^9.2.1
-  "@mantine/notifications": ^9.2.1
-  "@mantine/spotlight": ^9.2.1
-  "@mantine/tiptap": ^9.2.1
+  "@mantine/charts": ^9.2.2
+  "@mantine/colors-generator": ^9.2.2
+  "@mantine/core": ^9.2.2
+  "@mantine/dates": ^9.2.2
+  "@mantine/dropzone": ^9.2.2
+  "@mantine/form": ^9.2.2
+  "@mantine/hooks": ^9.2.2
+  "@mantine/modals": ^9.2.2
+  "@mantine/notifications": ^9.2.2
+  "@mantine/spotlight": ^9.2.2
+  "@mantine/tiptap": ^9.2.2
  "@next/eslint-plugin-next": 16.2.6
  "@octokit/auth-app": ^8.2.0
  "@paralleldrive/cuid2": ^3.3.0
@@ -43,34 +43,34 @@ catalog:
  "@semantic-release/release-notes-generator": ^14.1.1
  "@t3-oss/env-nextjs": ^0.13.11
  "@tabler/icons-react": ^3.44.0
-  "@tanstack/react-query": ^5.100.13
-  "@tanstack/react-query-devtools": ^5.100.13
-  "@tanstack/react-query-next-experimental": ^5.100.13
-  "@testcontainers/mysql": ^12.0.0
-  "@testcontainers/postgresql": ^12.0.0
-  "@testcontainers/redis": ^12.0.0
-  "@tiptap/extension-color": 3.23.6
-  "@tiptap/extension-highlight": 3.23.6
-  "@tiptap/extension-image": 3.23.6
-  "@tiptap/extension-link": ^3.23.6
-  "@tiptap/extension-placeholder": ^3.23.6
-  "@tiptap/extension-table": 3.23.6
-  "@tiptap/extension-table-cell": 3.23.6
-  "@tiptap/extension-table-header": 3.23.6
-  "@tiptap/extension-table-row": 3.23.6
-  "@tiptap/extension-task-item": 3.23.6
-  "@tiptap/extension-task-list": 3.23.6
-  "@tiptap/extension-text-align": 3.23.6
-  "@tiptap/extension-text-style": 3.23.6
-  "@tiptap/extension-underline": 3.23.6
-  "@tiptap/react": ^3.23.6
-  "@tiptap/starter-kit": ^3.23.6
+  "@tanstack/react-query": ^5.100.14
+  "@tanstack/react-query-devtools": ^5.100.14
+  "@tanstack/react-query-next-experimental": ^5.100.14
+  "@testcontainers/mysql": ^12.0.1
+  "@testcontainers/postgresql": ^12.0.1
+  "@testcontainers/redis": ^12.0.1
+  "@tiptap/extension-color": 3.24.0
+  "@tiptap/extension-highlight": 3.24.0
+  "@tiptap/extension-image": 3.24.0
+  "@tiptap/extension-link": ^3.24.0
+  "@tiptap/extension-placeholder": ^3.24.0
+  "@tiptap/extension-table": 3.24.0
+  "@tiptap/extension-table-cell": 3.24.0
+  "@tiptap/extension-table-header": 3.24.0
+  "@tiptap/extension-table-row": 3.24.0
+  "@tiptap/extension-task-item": 3.24.0
+  "@tiptap/extension-task-list": 3.24.0
+  "@tiptap/extension-text-align": 3.24.0
+  "@tiptap/extension-text-style": 3.24.0
+  "@tiptap/extension-underline": 3.24.0
+  "@tiptap/react": ^3.24.0
+  "@tiptap/starter-kit": ^3.24.0
  "@trpc/client": ^11.17.0
  "@trpc/next": ^11.17.0
  "@trpc/react-query": ^11.17.0
  "@trpc/server": ^11.17.0
  "@trpc/tanstack-react-query": ^11.17.0
-  "@turbo/gen": ^2.9.14
+  "@turbo/gen": ^2.9.16
  "@types/adm-zip": 0.5.8
  "@types/bcrypt": 6.0.0
  "@types/better-sqlite3": 7.6.13
@@ -109,7 +109,7 @@ catalog:
  croner: 10.0.1
  cross-env: ^10.1.0
  crypto-js: ^4.2.0
-  dayjs: ^1.11.20
+  dayjs: ^1.11.21
  deepmerge: 4.3.1
  dns-caching: ^0.2.9
  dockerode: ^5.0.0
@@ -124,30 +124,30 @@ catalog:
  flag-icons: ^7.5.0
  glob: ^13.0.6
  ical.js: ^2.2.1
-  ioredis: 5.10.1
-  isomorphic-dompurify: ^3.14.0
+  ioredis: 5.11.0
+  isomorphic-dompurify: ^3.15.0
  jotai: ^2.20.0
  jsdom: ^29.1.1
  json5: ^2.2.3
  ldapts: 8.1.8
  lodash.clonedeep: ^4.5.0
-  mantine-react-table: 2.0.0-beta.9
+  mantine-react-table: npm:mantine-react-table-open@9.0.3
  maria2: ^0.4.1
-  mysql2: 3.22.3
+  mysql2: 3.22.4
  next: 16.2.6
  next-auth: 5.0.0-beta.31
-  next-intl: 4.12.0
+  next-intl: 4.13.0
  node-loader: ^2.1.0
  octokit: ^5.0.5
-  oxfmt: ^0.51.0
-  oxlint: ^1.66.0
+  oxfmt: ^0.52.0
+  oxlint: ^1.67.0
  pg: ^8.21.0
  postcss-preset-mantine: ^1.18.0
  prismjs: ^1.30.0
  proxmox-api: 1.1.1
  react: 19.2.6
  react-dom: 19.2.6
-  react-error-boundary: ^6.1.1
+  react-error-boundary: ^6.1.2
  react-markdown: ^10.1.0
  react-quill-new: ^3.8.3
  react-simple-code-editor: ^0.14.1
@@ -158,12 +158,12 @@ catalog:
  superjson: 2.2.6
  svgson: ^5.3.1
  swagger-ui-react: ^5.32.6
-  testcontainers: ^12.0.0
+  testcontainers: ^12.0.1
  timezones-ical-library: ^2.2.0
  trpc-to-openapi: ^3.3.0
  tsdav: ^2.2.2
  tsx: 4.20.4
-  turbo: ^2.9.14
+  turbo: ^2.9.16
  typescript: ^5.9.3
  undici: 7.24.6
  use-deep-compare-effect: ^1.8.1
Author	SHA1	Message	Date
ajnart	68d4956077	style: auto-fix lint and format	2026-06-04 21:26:19 +00:00
Thomas Camlong	84588c956d	feat: consolidate feature	2026-06-04 23:25:31 +02:00
Thomas Camlong	73550ce998	Merge remote-tracking branch 'origin/dev' into feat/static-board-ssr	2026-06-04 23:09:38 +02:00
Thomas	41fe5928f1	fix: add bookmark widget option to toggle card borders (#5854 )	2026-06-04 11:07:31 +02:00
homarr-renovate[bot]	6eb59d6f53	chore(deps): update tiptap monorepo to v3.24.0 (#5858 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-04 08:58:12 +00:00
Afonso Jorge Ramos	2c6b7a818e	fix(immich): respect app color scheme in server-stats widget (#5859 )	2026-06-04 09:50:02 +02:00
Thomas	fd10788838	fix(auth): relax password complexity requirements to suggestions-only (#5764 )	2026-06-04 07:56:34 +02:00
Thomas	fe4598f722	fix(docker): restore container selection toolbar broken by Mantine v9 (#5855 )	2026-06-03 10:03:37 +02:00
Thomas	a755692d81	fix(ui): restore pre-v9 light variant colors (#5856 )	2026-06-03 06:49:38 +00:00
homarr-renovate[bot]	3ff0d72ba1	chore(deps): update dependency next-intl to v4.13.0 (#5853 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-03 04:21:57 +00:00
homarr-renovate[bot]	a63a191203	chore(deps): update turbo monorepo to ^2.9.16 (#5851 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-02 23:54:09 +00:00
homarr-renovate[bot]	1be906a0cd	chore(deps): update dependency isomorphic-dompurify to ^3.15.0 (#5852 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-02 21:55:53 +00:00
homarr-renovate[bot]	63d8fa8c26	chore(deps): update dependency @ctrl/qbittorrent to ^9.12.2 (#5834 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-02 18:47:29 +00:00
homarr-renovate[bot]	b5dd6ae8ef	chore(deps): update babel monorepo to >=7.29.7 (#5830 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-02 14:11:26 +00:00
homarr-renovate[bot]	d540ad374a	chore(deps): update pnpm to v10.34.0 (#5846 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-02 09:17:24 +00:00
homarr-renovate[bot]	6a971c1986	chore(deps): update mantine monorepo to ^9.2.2 (#5844 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-02 04:13:28 +00:00
homarr-crowdin[bot]	d86fe3ddf0	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2026-06-02 02:23:34 +00:00
homarr-renovate[bot]	06db8960a7	chore(deps): update turbo monorepo to ^2.9.15 (#5841 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-01 23:12:09 +00:00
homarr-renovate[bot]	a5719acf34	chore(deps): update dependency tmp@<=0.2.3 to >=0.2.7 (#5848 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-01 21:06:21 +00:00
homarr-renovate[bot]	d1d597c8e1	chore(deps): update testcontainers-node monorepo to ^12.0.1 (#5845 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-06-01 16:48:41 +00:00
homarr-renovate[bot]	657e42e4bb	chore(deps): update dependency mysql2 to v3.22.4 (#5839 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-31 18:12:08 +00:00
homarr-renovate[bot]	256ebcb864	chore(deps): update dependency oxlint to ^1.67.0 (#5837 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-31 16:18:04 +00:00
homarr-renovate[bot]	72e86dee01	chore(deps): update dependency ioredis to v5.11.0 (#5838 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-31 14:53:18 +00:00
homarr-renovate[bot]	b7910b16e0	chore(deps): update dependency oxfmt to ^0.52.0 (#5836 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-31 11:08:29 +00:00
homarr-renovate[bot]	5a83bb6e39	chore(deps): update dependency dayjs to ^1.11.21 (#5835 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-31 08:54:20 +00:00
homarr-renovate[bot]	433b66582d	chore(deps): update dependency hono@<4.6.5 to >=4.12.23 (#5828 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-30 09:25:22 +00:00
homarr-renovate[bot]	acbcb6818b	chore(deps): update dependency react-error-boundary to ^6.1.2 (#5829 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-30 06:54:05 +00:00
homarr-crowdin[bot]	07d991a0a1	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2026-05-30 05:27:45 +00:00
homarr-renovate[bot]	92364e9574	chore(deps): update tanstack-query monorepo to ^5.100.14 (#5813 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2026-05-29 21:15:51 +00:00
Thomas Camlong	71d7332505	fix: add async keyword to getInitialBoardAsync function	2026-05-25 09:36:15 +02:00
Thomas Camlong	eae51a8447	perf(board): deduplicate board fetch with React cache() Wrap getInitialBoardAsync in React cache() so the same board data is fetched once per request instead of 3 times (layout, page, metadata). This is the same pattern used for auth() in the codebase.	2026-05-22 12:52:15 +02:00
Thomas Camlong	e9308db5dc	fix(board): align edit mode with dev's removal of loading overlay Remove useIsBoardReady and LoadingOverlay from edit mode board, aligning with the dev branch's perf improvement that shows the board immediately without waiting for ready state.	2026-05-22 11:59:47 +02:00
Thomas Camlong	fb06b55845	Merge remote-tracking branch 'origin/dev' into feat/static-board-ssr # Conflicts: # apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx	2026-05-22 11:58:58 +02:00
Thomas Camlong	108b488250	feat(widgets): add server-side prefetch for weather and RSS feed Prefetch weather and RSS feed data during SSR so widgets render with content on first paint instead of showing loading states.	2026-05-22 11:38:02 +02:00
Thomas Camlong	10cedbd906	fix(widgets): eliminate layout shift with fallback dimensions Provide estimated width/height to widgets before useElementSize measures the DOM, preventing responsive breakpoint shifts during hydration. Replace the Loader spinner with a Skeleton for widget loading states.	2026-05-22 11:37:51 +02:00
Thomas Camlong	f53527e2e7	fix(board): make SectionContext optional for view mode Add useOptionalSectionContext to gracefully handle rendering outside GridStack (view mode). The item menu now uses optional chaining for gridstack access instead of throwing when context is absent.	2026-05-22 11:37:39 +02:00
Thomas Camlong	121cff20d7	feat(board): add SSR-compatible static grid for view mode Split board rendering into two modes: a static CSS Grid for view mode (SSR-friendly, no JS required for layout) and a lazy-loaded GridStack for edit mode. This eliminates widget "pop-in" on page load by rendering the full grid layout server-side.	2026-05-22 11:37:25 +02:00
Thomas Camlong	e14da6f747	feat: auto-open widget settings on add with all integrations pre-selected When adding a widget from the "Choose item to add" modal, the widget edit modal now opens immediately after placement, allowing the user to configure options and integrations before the widget renders. All available integrations for the widget are selected by default.	2026-05-22 09:58:29 +02:00