chore(release): 1.4.0 [skip ci]

Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>

.env.example

@@ -28,7 +28,8 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
 # DB_PASSWORD='password'
 # DB_NAME='name-of-database'
 
-TURBO_TELEMETRY_DISABLED=1
+# The below path can be used to store trusted certificates during development, it is not required and can be left empty.
+# If it is used, please use the full path to the directory where the certificates are stored.
+# LOCAL_CERTIFICATE_PATH='FULL_PATH_TO_CERTIFICATES'
 
-# Configure logging to use winston logger
-NODE_OPTIONS='-r @homarr/log/override'
+TURBO_TELEMETRY_DISABLED=1

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -31,6 +31,12 @@ body:
       label: Version
       description: What version of Homarr are you running?
       options:
+        - 1.3.1
+        - 1.3.0
+        - 1.2.0
+        - 1.1.0
+        - 1.0.1
+        - 1.0.0
         - 1.0.0-beta
         - Other (describe in "additional information")
       default: 0
@@ -75,4 +81,4 @@ body:
         - Other (describe in "additional information")
       default: 0
     validations:
-      required: false
+      required: false

.github/renovate.json5

@@ -6,6 +6,11 @@
       matchPackagePatterns: ["^@homarr/"],
       enabled: false,
     },
+    // Disable Dockerode updates see https://github.com/apocas/dockerode/issues/787
+    {
+      matchPackagePatterns: ["^dockerode$"],
+      enabled: false,
+    },
     {
       matchUpdateTypes: ["minor", "patch", "pin", "digest"],
       automerge: true,

.github/workflows/deployment-weekly-release.yml

@@ -37,7 +37,7 @@ jobs:
           token: ${{ github.token }}
           branch: dev
       - name: Create pull request
-        run: 'gh pr create --title "chore(release): automatic release ${{ steps.semver.outputs.next }}" --body "**This is an automatic release**.<br/>Manual action may be required for major bumps.<br/>Detected change to be ``${{ steps.semver.outputs.bump }}``<br/>Bump version from ``${{ steps.semver.outputs.current }}`` to ``${{ steps.semver.outputs.next }}``" --base beta --head dev --label automerge'
+        run: 'gh pr create --title "chore(release): automatic release ${{ steps.semver.outputs.next }}" --body "**This is an automatic release**.<br/>Manual action may be required for major bumps.<br/>Detected change to be ``${{ steps.semver.outputs.bump }}``<br/>Bump version from ``${{ steps.semver.outputs.current }}`` to ``${{ steps.semver.outputs.next }}``" --base main --head dev --label automerge'
         env:
           GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
       - name: Discord notification

.gitignore

@@ -64,4 +64,4 @@ packages/cli/cli.cjs
 e2e/shared/tmp
 
 #personal backgrounds
-apps/nextjs/public/images/background.png
+apps/nextjs/public/images/background.png

.nvmrc

@@ -1 +1 @@
-22.13.0
+22.13.1

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22.13.0-alpine AS base
+FROM node:22.13.1-alpine AS base
 
 FROM base AS builder
 RUN apk add --no-cache libc6-compat
@@ -63,6 +63,7 @@ ENV DB_URL='/appdata/db/db.sqlite'
 ENV DB_DIALECT='sqlite'
 ENV DB_DRIVER='better-sqlite3'
 ENV AUTH_PROVIDERS='credentials'
+ENV NODE_ENV='production'
 
 ENTRYPOINT [ "/app/entrypoint.sh" ]
 CMD ["sh", "run.sh"]

apps/nextjs/next.config.ts

@@ -2,6 +2,7 @@
 import "@homarr/auth/env";
 import "@homarr/db/env";
 import "@homarr/common/env";
+import "@homarr/docker/env";
 
 import type { NextConfig } from "next";
 import MillionLint from "@million/lint";

apps/nextjs/package.json

@@ -18,12 +18,15 @@
     "@homarr/analytics": "workspace:^0.1.0",
     "@homarr/api": "workspace:^0.1.0",
     "@homarr/auth": "workspace:^0.1.0",
+    "@homarr/certificates": "workspace:^0.1.0",
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/cron-job-status": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
+    "@homarr/docker": "workspace:^0.1.0",
     "@homarr/form": "workspace:^0.1.0",
-    "@homarr/gridstack": "^1.11.3",
+    "@homarr/gridstack": "^1.12.0",
+    "@homarr/icons": "workspace:^0.1.0",
     "@homarr/integrations": "workspace:^0.1.0",
     "@homarr/log": "workspace:^",
     "@homarr/modals": "workspace:^0.1.0",
@@ -33,23 +36,24 @@
     "@homarr/old-schema": "workspace:^0.1.0",
     "@homarr/redis": "workspace:^0.1.0",
     "@homarr/server-settings": "workspace:^0.1.0",
+    "@homarr/settings": "workspace:^0.1.0",
     "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^7.16.0",
-    "@mantine/core": "^7.16.0",
-    "@mantine/dropzone": "^7.16.0",
-    "@mantine/hooks": "^7.16.0",
-    "@mantine/modals": "^7.16.0",
-    "@mantine/tiptap": "^7.16.0",
+    "@mantine/colors-generator": "^7.16.2",
+    "@mantine/core": "^7.16.2",
+    "@mantine/dropzone": "^7.16.2",
+    "@mantine/hooks": "^7.16.2",
+    "@mantine/modals": "^7.16.2",
+    "@mantine/tiptap": "^7.16.2",
     "@million/lint": "1.0.14",
-    "@t3-oss/env-nextjs": "^0.11.1",
-    "@tabler/icons-react": "^3.28.1",
-    "@tanstack/react-query": "^5.64.1",
-    "@tanstack/react-query-devtools": "^5.64.1",
-    "@tanstack/react-query-next-experimental": "5.64.1",
+    "@t3-oss/env-nextjs": "^0.12.0",
+    "@tabler/icons-react": "^3.29.0",
+    "@tanstack/react-query": "^5.66.0",
+    "@tanstack/react-query-devtools": "^5.66.0",
+    "@tanstack/react-query-next-experimental": "^5.66.0",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
@@ -61,11 +65,11 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.7",
-    "flag-icons": "^7.2.3",
+    "flag-icons": "^7.3.2",
     "glob": "^11.0.1",
-    "jotai": "^2.11.0",
+    "jotai": "^2.11.2",
     "mantine-react-table": "2.0.0-beta.8",
-    "next": "15.1.4",
+    "next": "15.1.6",
     "postcss-preset-mantine": "^1.17.0",
     "prismjs": "^1.29.0",
     "react": "19.0.0",
@@ -74,21 +78,22 @@
     "react-simple-code-editor": "^0.14.1",
     "sass": "^1.83.4",
     "superjson": "2.2.2",
-    "swagger-ui-react": "^5.18.2",
-    "use-deep-compare-effect": "^1.8.1"
+    "swagger-ui-react": "^5.18.3",
+    "use-deep-compare-effect": "^1.8.1",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
-    "@types/chroma-js": "3.1.0",
-    "@types/node": "^22.10.6",
+    "@types/chroma-js": "3.1.1",
+    "@types/node": "^22.12.0",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "19.0.7",
+    "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
-    "@types/swagger-ui-react": "^4.18.3",
+    "@types/swagger-ui-react": "^5.18.0",
     "concurrently": "^9.1.2",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "node-loader": "^2.1.0",
     "prettier": "^3.4.2",
     "typescript": "^5.7.3"

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

@@ -18,8 +18,8 @@ import superjson from "superjson";
 import type { SuperJSONResult } from "superjson";
 
 import type { AppRouter } from "@homarr/api";
-import { clientApi, getTrpcUrl } from "@homarr/api/client";
-import { createHeadersCallbackForSource } from "@homarr/api/shared";
+import { clientApi } from "@homarr/api/client";
+import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 
 import { env } from "~/env";
 
@@ -94,6 +94,7 @@ export function TRPCReactProvider(props: PropsWithChildren) {
             false: unstable_httpBatchStreamLink({
               transformer: superjson,
               url: getTrpcUrl(),
+              maxURLLength: 2083, // Suggested by tRPC: https://trpc.io/docs/client/links/httpBatchLink#setting-a-maximum-url-length
               headers: createHeadersCallbackForSource("nextjs-react (json)"),
             }),
           }),

apps/nextjs/src/app/[locale]/auth/invite/[id]/_registration-form.tsx

@@ -2,13 +2,13 @@
 
 import { useRouter } from "next/navigation";
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import { CustomPasswordInput } from "@homarr/ui";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 interface RegistrationFormProps {

apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Anchor, Button, Card, Code, Collapse, Divider, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
+import { z } from "zod";
 
 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -12,7 +13,7 @@ import type { useForm } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 interface LoginFormProps {
   providers: string[];

apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx

@@ -7,6 +7,7 @@ import "~/styles/gridstack.scss";
 import { IntegrationProvider } from "@homarr/auth/client";
 import { auth } from "@homarr/auth/next";
 import { getIntegrationsWithPermissionsAsync } from "@homarr/auth/server";
+import { isNullOrWhitespace } from "@homarr/common";
 import { getI18n } from "@homarr/translation/server";
 
 import { createMetaTitle } from "~/metadata";
@@ -48,11 +49,13 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
         return {
           title: board.metaTitle ?? createMetaTitle(t("board.content.metaTitle", { boardName: board.name })),
           icons: {
-            icon: board.faviconImageUrl ? board.faviconImageUrl : undefined,
-            apple: board.faviconImageUrl ? board.faviconImageUrl : undefined,
+            icon: !isNullOrWhitespace(board.faviconImageUrl) ? board.faviconImageUrl : undefined,
+            apple: !isNullOrWhitespace(board.faviconImageUrl) ? board.faviconImageUrl : undefined,
           },
           appleWebApp: {
-            startupImage: { url: board.faviconImageUrl ? board.faviconImageUrl : "/logo/logo.png" },
+            startupImage: {
+              url: !isNullOrWhitespace(board.faviconImageUrl) ? board.faviconImageUrl : "/logo/logo.png",
+            },
           },
         };
       } catch (error) {

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -2,6 +2,7 @@
 
 import type { MouseEvent } from "react";
 import { useCallback, useEffect } from "react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Group, Menu } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
@@ -9,9 +10,11 @@ import {
   IconBox,
   IconBoxAlignTop,
   IconChevronDown,
+  IconLayoutBoard,
   IconPencil,
   IconPencilOff,
   IconPlus,
+  IconReplace,
   IconResize,
   IconSettings,
 } from "@tabler/icons-react";
@@ -49,6 +52,8 @@ export const BoardContentHeaderActions = () => {
       <HeaderButton href={`/boards/${board.name}/settings`}>
         <IconSettings stroke={1.5} />
       </HeaderButton>
+
+      <SelectBoardsMenu />
     </>
   );
 };
@@ -151,6 +156,32 @@ const EditModeMenu = () => {
   );
 };
 
+const SelectBoardsMenu = () => {
+  const { data: boards = [] } = clientApi.board.getAllBoards.useQuery();
+
+  return (
+    <Menu position="bottom-end" withArrow>
+      <Menu.Target>
+        <HeaderButton w="auto" px={4}>
+          <IconReplace stroke={1.5} />
+        </HeaderButton>
+      </Menu.Target>
+      <Menu.Dropdown style={{ transform: "translate(-7px, 0)" }}>
+        {boards.map((board) => (
+          <Menu.Item
+            key={board.id}
+            component={Link}
+            href={`/boards/${board.name}`}
+            leftSection={<IconLayoutBoard size={20} />}
+          >
+            {board.name}
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
+
 const usePreventLeaveWithDirty = (isDirty: boolean) => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();

apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx

@@ -2,12 +2,12 @@
 
 import { Button, Card, Stack, TextInput } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 export const InitGroup = () => {

apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx

@@ -3,6 +3,7 @@
 import { startTransition } from "react";
 import { Button, Card, Group, Stack, Switch, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -11,7 +12,6 @@ import type { CheckboxProps } from "@homarr/form/types";
 import { defaultServerSettings } from "@homarr/server-settings";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 export const InitSettings = () => {

apps/nextjs/src/app/[locale]/init/_steps/user/init-user-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -8,7 +9,6 @@ import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import { CustomPasswordInput } from "@homarr/ui";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 export const InitUserForm = () => {

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

@@ -9,10 +9,14 @@ import "~/styles/scroll-area.scss";
 import { notFound } from "next/navigation";
 import { NextIntlClientProvider } from "next-intl";
 
+import { api } from "@homarr/api/server";
 import { env } from "@homarr/auth/env";
 import { auth } from "@homarr/auth/next";
+import { db } from "@homarr/db";
+import { getServerSettingsAsync } from "@homarr/db/queries";
 import { ModalProvider } from "@homarr/modals";
 import { Notifications } from "@homarr/notifications";
+import { SettingsProvider } from "@homarr/settings";
 import { SpotlightProvider } from "@homarr/spotlight";
 import type { SupportedLanguage } from "@homarr/translation";
 import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
@@ -73,6 +77,8 @@ export default async function Layout(props: {
   }
 
   const session = await auth();
+  const user = session ? await api.user.getById({ userId: session.user.id }).catch(() => null) : null;
+  const serverSettings = await getServerSettingsAsync(db);
   const colorScheme = await getCurrentColorSchemeAsync();
   const direction = isLocaleRTL((await props.params).locale) ? "rtl" : "ltr";
   const i18nMessages = await getI18nMessages();
@@ -81,6 +87,19 @@ export default async function Layout(props: {
     (innerProps) => {
       return <AuthProvider session={session} logoutUrl={env.AUTH_LOGOUT_REDIRECT_URL} {...innerProps} />;
     },
+    (innerProps) => (
+      <SettingsProvider
+        user={user}
+        serverSettings={{
+          board: {
+            homeBoardId: serverSettings.board.homeBoardId,
+            mobileHomeBoardId: serverSettings.board.mobileHomeBoardId,
+          },
+          search: { defaultSearchEngineId: serverSettings.search.defaultSearchEngineId },
+        }}
+        {...innerProps}
+      />
+    ),
     (innerProps) => <JotaiProvider {...innerProps} />,
     (innerProps) => <TRPCReactProvider {...innerProps} />,
     (innerProps) => <DayJsLoader {...innerProps} />,

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

@@ -2,11 +2,11 @@
 
 import Link from "next/link";
 import { Button, Group, Stack, Textarea, TextInput } from "@mantine/core";
+import type { z } from "zod";
 
 import { useZodForm } from "@homarr/form";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 import { IconPicker } from "~/components/icons/picker/icon-picker";
@@ -25,11 +25,11 @@ export const AppForm = (props: AppFormProps) => {
   const t = useI18n();
 
   const form = useZodForm(validation.app.manage, {
-    initialValues: initialValues ?? {
-      name: "",
-      description: "",
-      iconUrl: "",
-      href: "",
+    initialValues: {
+      name: initialValues?.name ?? "",
+      description: initialValues?.description ?? "",
+      iconUrl: initialValues?.iconUrl ?? "",
+      href: initialValues?.href ?? "",
     },
   });
 

apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/_app-edit-form.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -9,7 +10,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import type { TranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
-import type { validation, z } from "@homarr/validation";
+import type { validation } from "@homarr/validation";
 
 import { AppForm } from "../../_form";
 

apps/nextjs/src/app/[locale]/manage/apps/new/_app-new-form.tsx

@@ -2,13 +2,14 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import type { TranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
-import type { validation, z } from "@homarr/validation";
+import type { validation } from "@homarr/validation";
 
 import { AppForm } from "../_form";
 

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

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -9,7 +10,6 @@ import { auth } from "@homarr/auth/next";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { SearchInput, TablePagination } from "@homarr/ui";
-import { z } from "@homarr/validation";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
@@ -80,7 +80,7 @@ const AppCard = async ({ app }: AppCardProps) => {
   return (
     <Card withBorder>
       <Group justify="space-between" wrap="nowrap">
-        <Group align="top" justify="start" wrap="nowrap">
+        <Group align="top" justify="start" wrap="nowrap" style={{ flex: "1" }}>
           <Avatar
             size="sm"
             src={app.iconUrl}
@@ -91,7 +91,7 @@ const AppCard = async ({ app }: AppCardProps) => {
               },
             }}
           />
-          <Stack gap={0}>
+          <Stack gap={0} style={{ flex: "1" }}>
             <Text fw={500} lineClamp={1}>
               {app.name}
             </Text>
@@ -101,7 +101,7 @@ const AppCard = async ({ app }: AppCardProps) => {
               </Text>
             )}
             {app.href && (
-              <Anchor href={app.href} lineClamp={1} size="sm" w="min-content">
+              <Anchor href={app.href} lineClamp={1} size="sm" style={{ wordBreak: "break-all" }}>
                 {app.href}
               </Anchor>
             )}

apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-icons.ts

@@ -1,4 +1,4 @@
-import { IconKey, IconPassword, IconUser } from "@tabler/icons-react";
+import { IconGrid3x3, IconKey, IconPassword, IconServer, IconUser } from "@tabler/icons-react";
 
 import type { IntegrationSecretKind } from "@homarr/definitions";
 import type { TablerIcon } from "@homarr/ui";
@@ -7,4 +7,6 @@ export const integrationSecretIcons = {
   username: IconUser,
   apiKey: IconKey,
   password: IconPassword,
+  realm: IconServer,
+  tokenId: IconGrid3x3,
 } satisfies Record<IntegrationSecretKind, TablerIcon>;

apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Button, Fieldset, Group, Stack, TextInput } from "@mantine/core";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -13,7 +14,6 @@ import { convertIntegrationTestConnectionError } from "@homarr/integrations/clie
 import { useConfirmModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 import { SecretCard } from "../../_components/secrets/integration-secret-card";
@@ -70,9 +70,9 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
           if (testConnectionError) {
             showErrorNotification({
               title: t(`integration.testConnection.notification.${testConnectionError.key}.title`),
-              message: testConnectionError.message
-                ? testConnectionError.message
-                : t(`integration.testConnection.notification.${testConnectionError.key}.message`),
+              message:
+                testConnectionError.message ??
+                t(`integration.testConnection.notification.${testConnectionError.key}.message`),
             });
             return;
           }

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx

@@ -15,7 +15,9 @@ export const IntegrationCreateDropdownContent = () => {
   const [search, setSearch] = useState("");
 
   const filteredKinds = useMemo(() => {
-    return integrationKinds.filter((kind) => kind.includes(search.toLowerCase()));
+    return integrationKinds.filter((kind) =>
+      getIntegrationName(kind).toLowerCase().includes(search.toLowerCase().trim()),
+    );
   }, [search]);
 
   const handleSearch = React.useCallback(
@@ -29,6 +31,7 @@ export const IntegrationCreateDropdownContent = () => {
         leftSection={<IconSearch stroke={1.5} size={20} />}
         placeholder={t("integration.page.list.search")}
         value={search}
+        data-autofocus
         onChange={handleSearch}
       />
 

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Alert, Button, Checkbox, Fieldset, Group, SegmentedControl, Stack, Text, TextInput } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -15,7 +16,6 @@ import { useZodForm } from "@homarr/form";
 import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 import { IntegrationSecretInput } from "../_components/secrets/integration-secret-inputs";
@@ -63,9 +63,9 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
           if (testConnectionError) {
             showErrorNotification({
               title: t(`integration.testConnection.notification.${testConnectionError.key}.title`),
-              message: testConnectionError.message
-                ? testConnectionError.message
-                : t(`integration.testConnection.notification.${testConnectionError.key}.message`),
+              message:
+                testConnectionError.message ??
+                t(`integration.testConnection.notification.${testConnectionError.key}.message`),
             });
             return;
           }

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

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation";
 import { Container, Group, Stack, Title } from "@mantine/core";
+import { z } from "zod";
 
 import { auth } from "@homarr/auth/next";
 import type { IntegrationKind } from "@homarr/definitions";
@@ -7,7 +8,6 @@ import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 import { IntegrationAvatar } from "@homarr/ui";
 import type { validation } from "@homarr/validation";
-import { z } from "@homarr/validation";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NewIntegrationForm } from "./_integration-new-form";

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

@@ -102,7 +102,15 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) {
 
 const IntegrationSelectMenu = ({ children }: PropsWithChildren) => {
   return (
-    <Menu width={256} trapFocus position="bottom-end" withinPortal shadow="md" keepMounted={false}>
+    <Menu
+      width={256}
+      trapFocus
+      position="bottom-end"
+      withinPortal
+      shadow="md"
+      keepMounted={false}
+      withInitialFocusPlaceholder={false}
+    >
       {children}
       <MenuDropdown>
         <IntegrationCreateDropdownContent />

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

@@ -6,6 +6,7 @@ import {
   IconBrandDiscord,
   IconBrandDocker,
   IconBrandGithub,
+  IconCertificate,
   IconGitFork,
   IconHome,
   IconInfoSmall,
@@ -119,6 +120,12 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
           href: "/manage/tools/logs",
           hidden: !session?.user.permissions.includes("other-view-logs"),
         },
+        {
+          label: t("items.tools.items.certificates"),
+          icon: IconCertificate,
+          href: "/manage/tools/certificates",
+          hidden: !session?.user.permissions.includes("admin"),
+        },
         {
           label: t("items.tools.items.tasks"),
           icon: IconReport,
@@ -146,7 +153,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
         {
           label: t("items.help.items.submitIssue"),
           icon: IconBrandGithub,
-          href: "https://github.com/ajnart/homarr/issues/new/choose",
+          href: "https://github.com/homarr-labs/homarr/issues/new/choose",
           external: true,
         },
         {
@@ -158,7 +165,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
         {
           label: t("items.help.items.sourceCode"),
           icon: IconGitFork,
-          href: "https://github.com/ajnart/homarr",
+          href: "https://github.com/homarr-labs/homarr",
           external: true,
         },
       ],

apps/nextjs/src/app/[locale]/manage/medias/_actions/copy-media.tsx

@@ -15,6 +15,11 @@ export const CopyMedia = ({ media }: CopyMediaProps) => {
 
   const url = typeof window !== "undefined" ? `${window.location.origin}/api/user-medias/${media.id}` : "";
 
+  // Clipboard only works on localhost or secure connections (https)
+  if (url.startsWith("http://") && !url.startsWith("http://localhost")) {
+    return null;
+  }
+
   return (
     <CopyButton value={url}>
       {({ copy, copied }) => (

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

@@ -1,16 +1,31 @@
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Anchor, Group, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from "@mantine/core";
+import {
+  ActionIcon,
+  Anchor,
+  Group,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { IconExternalLink } from "@tabler/icons-react";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { humanFileSize } from "@homarr/common";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
+import { createLocalImageUrl } from "@homarr/icons/local";
 import { getI18n } from "@homarr/translation/server";
 import { SearchInput, TablePagination, UserAvatar } from "@homarr/ui";
-import { z } from "@homarr/validation";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
@@ -91,13 +106,14 @@ interface RowProps {
 
 const Row = async ({ media }: RowProps) => {
   const session = await auth();
+  const t = await getI18n();
   const canDelete = media.creatorId === session?.user.id || session?.user.permissions.includes("media-full-all");
 
   return (
     <TableTr>
       <TableTd w={64}>
         <Image
-          src={`/api/user-medias/${media.id}`}
+          src={createLocalImageUrl(media.id)}
           alt={media.name}
           width={64}
           height={64}
@@ -121,6 +137,17 @@ const Row = async ({ media }: RowProps) => {
       <TableTd w={64}>
         <Group wrap="nowrap" gap="xs">
           <CopyMedia media={media} />
+          <Tooltip label={t("media.action.open.label")} openDelay={500}>
+            <ActionIcon
+              component="a"
+              href={createLocalImageUrl(media.id)}
+              target="_blank"
+              color="gray"
+              variant="subtle"
+            >
+              <IconExternalLink size={16} stroke={1.5} />
+            </ActionIcon>
+          </Tooltip>
           {canDelete && <DeleteMedia media={media} />}
         </Group>
       </TableTd>

apps/nextjs/src/app/[locale]/manage/search-engines/_form.tsx

@@ -4,13 +4,13 @@ import Link from "next/link";
 import type { SegmentedControlItem } from "@mantine/core";
 import { Button, Fieldset, Grid, Group, SegmentedControl, Stack, Textarea, TextInput } from "@mantine/core";
 import { WidgetIntegrationSelect } from "node_modules/@homarr/widgets/src/widget-integration-select";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { searchEngineTypes } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 import { IconPicker } from "~/components/icons/picker/icon-picker";

apps/nextjs/src/app/[locale]/manage/search-engines/edit/[id]/_search-engine-edit-form.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -9,7 +10,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import type { TranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
-import type { validation, z } from "@homarr/validation";
+import type { validation } from "@homarr/validation";
 
 import { SearchEngineForm } from "../../_form";
 

apps/nextjs/src/app/[locale]/manage/search-engines/new/_search-engine-new-form.tsx

@@ -2,13 +2,14 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import type { TranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
-import type { validation, z } from "@homarr/validation";
+import type { validation } from "@homarr/validation";
 
 import { SearchEngineForm } from "../_form";
 

apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconPencil, IconSearch } from "@tabler/icons-react";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -9,7 +10,6 @@ import { auth } from "@homarr/auth/next";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { SearchInput, TablePagination } from "@homarr/ui";
-import { z } from "@homarr/validation";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";

apps/nextjs/src/app/[locale]/manage/tools/certificates/_components/add-certificate.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Button, FileInput, Group, Stack } from "@mantine/core";
+import { IconCertificate } from "@tabler/icons-react";
+import { z } from "zod";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { createModal, useModalAction } from "@homarr/modals";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { superRefineCertificateFile } from "@homarr/validation";
+
+export const AddCertificateButton = () => {
+  const { openModal } = useModalAction(AddCertificateModal);
+  const t = useI18n();
+
+  const handleClick = () => {
+    openModal({});
+  };
+
+  return <Button onClick={handleClick}>{t("certificate.action.create.label")}</Button>;
+};
+
+const AddCertificateModal = createModal(({ actions }) => {
+  const t = useI18n();
+  const form = useZodForm(
+    z.object({
+      file: z.instanceof(File).nullable().superRefine(superRefineCertificateFile),
+    }),
+    {
+      initialValues: {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        file: null!,
+      },
+    },
+  );
+  const { mutateAsync } = clientApi.certificates.addCertificate.useMutation();
+
+  return (
+    <form
+      onSubmit={form.onSubmit(async (values) => {
+        const formData = new FormData();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        formData.set("file", values.file!);
+        await mutateAsync(formData, {
+          async onSuccess() {
+            showSuccessNotification({
+              title: t("certificate.action.create.notification.success.title"),
+              message: t("certificate.action.create.notification.success.message"),
+            });
+            await revalidatePathActionAsync("/manage/tools/certificates");
+            actions.closeModal();
+          },
+          onError() {
+            showErrorNotification({
+              title: t("certificate.action.create.notification.error.title"),
+              message: t("certificate.action.create.notification.error.message"),
+            });
+          },
+        });
+      })}
+    >
+      <Stack>
+        <FileInput leftSection={<IconCertificate size={16} />} {...form.getInputProps("file")} />
+        <Group justify="end">
+          <Button onClick={actions.closeModal} variant="subtle" color="gray">
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" loading={form.submitting}>
+            {t("common.action.add")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle(t) {
+    return t("certificate.action.create.label");
+  },
+});

apps/nextjs/src/app/[locale]/manage/tools/certificates/_components/remove-certificate.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ActionIcon } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useConfirmModal } from "@homarr/modals";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+
+interface RemoveCertificateProps {
+  fileName: string;
+}
+
+export const RemoveCertificate = ({ fileName }: RemoveCertificateProps) => {
+  const { openConfirmModal } = useConfirmModal();
+  const { mutateAsync } = clientApi.certificates.removeCertificate.useMutation();
+  const t = useI18n();
+
+  const handleClick = () => {
+    openConfirmModal({
+      title: t("certificate.action.remove.label"),
+      children: t("certificate.action.remove.confirm"),
+      // eslint-disable-next-line no-restricted-syntax
+      async onConfirm() {
+        await mutateAsync(
+          { fileName },
+          {
+            async onSuccess() {
+              showSuccessNotification({
+                title: t("certificate.action.remove.notification.success.title"),
+                message: t("certificate.action.remove.notification.success.message"),
+              });
+              await revalidatePathActionAsync("/manage/tools/certificates");
+            },
+            onError() {
+              showErrorNotification({
+                title: t("certificate.action.remove.notification.error.title"),
+                message: t("certificate.action.remove.notification.error.message"),
+              });
+            },
+          },
+        );
+      },
+    });
+  };
+
+  return (
+    <ActionIcon onClick={handleClick} color="red" variant="subtle">
+      <IconTrash color="red" size={16} />
+    </ActionIcon>
+  );
+};

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

@@ -0,0 +1,104 @@
+import { X509Certificate } from "node:crypto";
+import { notFound } from "next/navigation";
+import { Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { IconCertificate, IconCertificateOff } from "@tabler/icons-react";
+import dayjs from "dayjs";
+
+import { auth } from "@homarr/auth/next";
+import { loadCustomRootCertificatesAsync } from "@homarr/certificates/server";
+import { getMantineColor } from "@homarr/common";
+import type { SupportedLanguage } from "@homarr/translation";
+import { getI18n } from "@homarr/translation/server";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { NoResults } from "~/components/no-results";
+import { AddCertificateButton } from "./_components/add-certificate";
+import { RemoveCertificate } from "./_components/remove-certificate";
+
+interface CertificatesPageProps {
+  params: Promise<{
+    locale: SupportedLanguage;
+  }>;
+}
+
+export default async function CertificatesPage({ params }: CertificatesPageProps) {
+  const session = await auth();
+  if (!session?.user.permissions.includes("admin")) {
+    notFound();
+  }
+
+  const { locale } = await params;
+  const t = await getI18n();
+  const certificates = await loadCustomRootCertificatesAsync();
+  const x509Certificates = certificates
+    .map((cert) => ({
+      ...cert,
+      x509: new X509Certificate(cert.content),
+    }))
+    .sort((certA, certB) => certA.x509.validToDate.getTime() - certB.x509.validToDate.getTime());
+
+  return (
+    <>
+      <DynamicBreadcrumb />
+
+      <Stack>
+        <Group justify="space-between">
+          <Stack gap={4}>
+            <Title>{t("certificate.page.list.title")}</Title>
+            <Text>{t("certificate.page.list.description")}</Text>
+          </Stack>
+
+          <AddCertificateButton />
+        </Group>
+
+        {x509Certificates.length === 0 && (
+          <NoResults icon={IconCertificateOff} title={t("certificate.page.list.noResults.title")} />
+        )}
+
+        <SimpleGrid cols={{ sm: 1, lg: 2, xl: 3 }} spacing="lg">
+          {x509Certificates.map((cert) => (
+            <Card key={cert.x509.fingerprint} withBorder>
+              <Group wrap="nowrap">
+                <IconCertificate
+                  color={getMantineColor(iconColor(cert.x509.validToDate), 6)}
+                  style={{ minWidth: 32 }}
+                  size={32}
+                  stroke={1.5}
+                />
+                <Stack flex={1} gap="xs" maw="calc(100% - 48px)">
+                  <Group justify="space-between" wrap="nowrap">
+                    <Text fw={500} lineClamp={1} style={{ wordBreak: "break-all" }}>
+                      {cert.x509.subject}
+                    </Text>
+                    <Text c="gray.6" ta="end" size="sm">
+                      {cert.fileName}
+                    </Text>
+                  </Group>
+                  <Group justify="space-between">
+                    <Text size="sm" c="gray.6" title={cert.x509.validToDate.toISOString()}>
+                      {t("certificate.page.list.expires", {
+                        when: new Intl.RelativeTimeFormat(locale).format(
+                          dayjs(cert.x509.validToDate).diff(dayjs(), "days"),
+                          "days",
+                        ),
+                      })}
+                    </Text>
+                    <RemoveCertificate fileName={cert.fileName} />
+                  </Group>
+                </Stack>
+              </Group>
+            </Card>
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}
+
+const iconColor = (validTo: Date) => {
+  const daysUntilInvalid = dayjs(validTo).diff(new Date(), "days");
+  if (daysUntilInvalid < 1) return "red";
+  if (daysUntilInvalid < 7) return "orange";
+  if (daysUntilInvalid < 30) return "yellow";
+  return "green";
+};

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx

@@ -16,7 +16,7 @@ import { MantineReactTable } from "mantine-react-table";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useTimeAgo } from "@homarr/common";
-import type { DockerContainerState } from "@homarr/definitions";
+import type { ContainerState } from "@homarr/docker";
 import { useModalAction } from "@homarr/modals";
 import { AddDockerAppToHomarr } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
@@ -246,9 +246,9 @@ const containerStates = {
   exited: "red",
   removing: "pink",
   dead: "dark",
-} satisfies Record<DockerContainerState, MantineColor>;
+} satisfies Record<ContainerState, MantineColor>;
 
-const ContainerStateBadge = ({ state }: { state: DockerContainerState }) => {
+const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
   const t = useScopedI18n("docker.field.state.option");
 
   return (

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button, Group, Select, Stack } from "@mantine/core";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -8,7 +9,6 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 interface ChangeHomeBoardFormProps {
@@ -39,8 +39,8 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
   });
   const form = useZodForm(validation.user.changeHomeBoards, {
     initialValues: {
-      homeBoardId: user.homeBoardId ?? "",
-      mobileHomeBoardId: user.mobileHomeBoardId ?? "",
+      homeBoardId: user.homeBoardId,
+      mobileHomeBoardId: user.mobileHomeBoardId,
     },
   });
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-search-preferences.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, Group, Select, Stack } from "@mantine/core";
+import { Button, Group, Select, Stack, Switch } from "@mantine/core";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -8,37 +9,38 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
-interface ChangeDefaultSearchEngineFormProps {
+interface ChangeSearchPreferencesFormProps {
   user: RouterOutputs["user"]["getById"];
   searchEnginesData: { value: string; label: string }[];
 }
 
-export const ChangeDefaultSearchEngineForm = ({ user, searchEnginesData }: ChangeDefaultSearchEngineFormProps) => {
+export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeSearchPreferencesFormProps) => {
   const t = useI18n();
-  const { mutate, isPending } = clientApi.user.changeDefaultSearchEngine.useMutation({
+  const { mutate, isPending } = clientApi.user.changeSearchPreferences.useMutation({
     async onSettled() {
       await revalidatePathActionAsync(`/manage/users/${user.id}`);
     },
     onSuccess(_, variables) {
       form.setInitialValues({
         defaultSearchEngineId: variables.defaultSearchEngineId,
+        openInNewTab: variables.openInNewTab,
       });
       showSuccessNotification({
-        message: t("user.action.changeDefaultSearchEngine.notification.success.message"),
+        message: t("user.action.changeSearchPreferences.notification.success.message"),
       });
     },
     onError() {
       showErrorNotification({
-        message: t("user.action.changeDefaultSearchEngine.notification.error.message"),
+        message: t("user.action.changeSearchPreferences.notification.error.message"),
       });
     },
   });
-  const form = useZodForm(validation.user.changeDefaultSearchEngine, {
+  const form = useZodForm(validation.user.changeSearchPreferences, {
     initialValues: {
-      defaultSearchEngineId: user.defaultSearchEngineId ?? "",
+      defaultSearchEngineId: user.defaultSearchEngineId,
+      openInNewTab: user.openSearchInNewTab,
     },
   });
 
@@ -52,7 +54,16 @@ export const ChangeDefaultSearchEngineForm = ({ user, searchEnginesData }: Chang
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack gap="md">
-        <Select w="100%" data={searchEnginesData} {...form.getInputProps("defaultSearchEngineId")} />
+        <Select
+          label={t("user.field.defaultSearchEngine.label")}
+          w="100%"
+          data={searchEnginesData}
+          {...form.getInputProps("defaultSearchEngineId")}
+        />
+        <Switch
+          label={t("user.field.openSearchInNewTab.label")}
+          {...form.getInputProps("openInNewTab", { type: "checkbox" })}
+        />
 
         <Group justify="end">
           <Button type="submit" color="teal" loading={isPending}>
@@ -64,4 +75,4 @@ export const ChangeDefaultSearchEngineForm = ({ user, searchEnginesData }: Chang
   );
 };
 
-type FormType = z.infer<typeof validation.user.changeDefaultSearchEngine>;
+type FormType = z.infer<typeof validation.user.changeSearchPreferences>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_first-day-of-week.tsx

@@ -4,6 +4,7 @@ import { Button, Group, Radio, Stack } from "@mantine/core";
 import type { DayOfWeek } from "@mantine/dates";
 import dayjs from "dayjs";
 import localeData from "dayjs/plugin/localeData";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -11,7 +12,6 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 dayjs.extend(localeData);

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_ping-icons-enabled.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button, Group, Stack, Switch } from "@mantine/core";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -8,7 +9,6 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 interface PingIconsEnabledProps {
@@ -51,7 +51,10 @@ export const PingIconsEnabled = ({ user }: PingIconsEnabledProps) => {
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack gap="md">
-        <Switch {...form.getInputProps("pingIconsEnabled")} label={t("user.field.pingIconsEnabled.label")} />
+        <Switch
+          {...form.getInputProps("pingIconsEnabled", { type: "checkbox" })}
+          label={t("user.field.pingIconsEnabled.label")}
+        />
 
         <Group justify="end">
           <Button type="submit" color="teal" loading={isPending}>

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx

@@ -11,8 +11,8 @@ import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone"
 import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { createMetaTitle } from "~/metadata";
 import { canAccessUserEditPage } from "../access";
-import { ChangeDefaultSearchEngineForm } from "./_components/_change-default-search-engine";
 import { ChangeHomeBoardForm } from "./_components/_change-home-board";
+import { ChangeSearchPreferencesForm } from "./_components/_change-search-preferences";
 import { DeleteUserButton } from "./_components/_delete-user-button";
 import { FirstDayOfWeek } from "./_components/_first-day-of-week";
 import { PingIconsEnabled } from "./_components/_ping-icons-enabled";
@@ -83,10 +83,12 @@ export default async function EditUserPage(props: Props) {
         </Box>
       </Group>
 
-      <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.language")}</Title>
-        <CurrentLanguageCombobox />
-      </Stack>
+      {session?.user.id === user.id && (
+        <Stack mb="lg">
+          <Title order={2}>{tGeneral("item.language")}</Title>
+          <CurrentLanguageCombobox />
+        </Stack>
+      )}
 
       <Stack mb="lg">
         <Title order={2}>{tGeneral("item.board.title")}</Title>
@@ -100,8 +102,8 @@ export default async function EditUserPage(props: Props) {
       </Stack>
 
       <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.defaultSearchEngine")}</Title>
-        <ChangeDefaultSearchEngineForm user={user} searchEnginesData={searchEngines} />
+        <Title order={2}>{tGeneral("item.search")}</Title>
+        <ChangeSearchPreferencesForm user={user} searchEnginesData={searchEngines} />
       </Stack>
 
       <Stack mb="lg">

apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx

@@ -17,6 +17,7 @@ import {
 } from "@mantine/core";
 import { useListState } from "@mantine/hooks";
 import { IconPlus, IconUserCheck } from "@tabler/icons-react";
+import { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { everyoneGroup, groupPermissions } from "@homarr/definitions";
@@ -26,7 +27,7 @@ import { useModalAction } from "@homarr/modals";
 import { showErrorNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { CustomPasswordInput, UserAvatar } from "@homarr/ui";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 import { createCustomErrorParams } from "@homarr/validation/form";
 
 import { GroupSelectModal } from "~/components/access/group-select-modal";

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

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Anchor, Group, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from "@mantine/core";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -8,7 +9,6 @@ import { auth } from "@homarr/auth/next";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n } from "@homarr/translation/server";
 import { SearchInput, TablePagination, UserAvatarGroup } from "@homarr/ui";
-import { z } from "@homarr/validation";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";

apps/nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -1,6 +1,7 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
 import { appRouter, createTRPCContext } from "@homarr/api";
+import { trpcPath } from "@homarr/api/shared";
 import { auth } from "@homarr/auth/next";
 import { logger } from "@homarr/log";
 
@@ -25,12 +26,14 @@ export function OPTIONS() {
 
 const handler = auth(async (req) => {
   const response = await fetchRequestHandler({
-    endpoint: "/api/trpc",
+    endpoint: trpcPath,
     router: appRouter,
     req,
     createContext: () => createTRPCContext({ session: req.auth, headers: req.headers }),
     onError({ error, path, type }) {
-      logger.error(`tRPC Error with ${type} on '${path}': (${error.code}) - ${error.message}`);
+      logger.error(
+        `tRPC Error with ${type} on '${path}': (${error.code}) - ${error.message}\n${error.stack}\n${error.cause}`,
+      );
     },
   });
 

apps/nextjs/src/components/board/items/actions/create-item.ts

@@ -0,0 +1,62 @@
+import type { Modify } from "@homarr/common/types";
+import { createId } from "@homarr/db/client";
+import type { WidgetKind } from "@homarr/definitions";
+
+import type { Board, DynamicSection, EmptySection, Item } from "~/app/[locale]/boards/_types";
+import { getFirstEmptyPosition } from "./empty-position";
+
+export interface CreateItemInput {
+  kind: WidgetKind;
+}
+
+export const createItemCallback =
+  ({ kind }: CreateItemInput) =>
+  (previous: Board): Board => {
+    const firstSection = previous.sections
+      .filter((section): section is EmptySection => section.kind === "empty")
+      .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
+      .at(0);
+
+    if (!firstSection) return previous;
+
+    const dynamicSectionsOfFirstSection = previous.sections.filter(
+      (section): section is DynamicSection => section.kind === "dynamic" && section.parentSectionId === firstSection.id,
+    );
+    const elements = [...firstSection.items, ...dynamicSectionsOfFirstSection];
+    const emptyPosition = getFirstEmptyPosition(elements, previous.columnCount);
+
+    if (!emptyPosition) {
+      console.error("Your board is full");
+      return previous;
+    }
+
+    const widget = {
+      id: createId(),
+      kind,
+      options: {},
+      width: 1,
+      height: 1,
+      ...emptyPosition,
+      integrationIds: [],
+      advancedOptions: {
+        customCssClasses: [],
+      },
+    } satisfies Modify<
+      Item,
+      {
+        kind: WidgetKind;
+      }
+    >;
+
+    return {
+      ...previous,
+      sections: previous.sections.map((section) => {
+        // Return same section if item is not in it
+        if (section.id !== firstSection.id) return section;
+        return {
+          ...section,
+          items: section.items.concat(widget),
+        };
+      }),
+    };
+  };

apps/nextjs/src/components/board/items/actions/duplicate-item.ts

@@ -0,0 +1,81 @@
+import { createId } from "@homarr/db/client";
+
+import type { Board, DynamicSection, EmptySection } from "~/app/[locale]/boards/_types";
+import { getFirstEmptyPosition } from "./empty-position";
+
+export interface DuplicateItemInput {
+  itemId: string;
+}
+
+export const duplicateItemCallback =
+  ({ itemId }: DuplicateItemInput) =>
+  (previous: Board): Board => {
+    const itemToDuplicate = previous.sections
+      .flatMap((section) => section.items.map((item) => ({ ...item, sectionId: section.id })))
+      .find((item) => item.id === itemId);
+    if (!itemToDuplicate) return previous;
+
+    const currentSection = previous.sections.find((section) => section.id === itemToDuplicate.sectionId);
+    if (!currentSection) return previous;
+
+    const dynamicSectionsOfCurrentSection = previous.sections.filter(
+      (section): section is DynamicSection =>
+        section.kind === "dynamic" && section.parentSectionId === currentSection.id,
+    );
+    const elements = [...currentSection.items, ...dynamicSectionsOfCurrentSection];
+    let sectionId = currentSection.id;
+    let emptyPosition = getFirstEmptyPosition(
+      elements,
+      currentSection.kind === "dynamic" ? currentSection.width : previous.columnCount,
+      currentSection.kind === "dynamic" ? currentSection.height : undefined,
+      {
+        width: itemToDuplicate.width,
+        height: itemToDuplicate.height,
+      },
+    );
+
+    if (!emptyPosition) {
+      const firstSection = previous.sections
+        .filter((section): section is EmptySection => section.kind === "empty")
+        .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
+        .at(0);
+
+      if (!firstSection) return previous;
+
+      const dynamicSectionsOfFirstSection = previous.sections.filter(
+        (section): section is DynamicSection =>
+          section.kind === "dynamic" && section.parentSectionId === firstSection.id,
+      );
+      const elements = [...firstSection.items, ...dynamicSectionsOfFirstSection];
+      emptyPosition = getFirstEmptyPosition(elements, previous.columnCount, undefined, {
+        width: itemToDuplicate.width,
+        height: itemToDuplicate.height,
+      });
+      if (!emptyPosition) {
+        console.error("Your board is full");
+        return previous;
+      }
+
+      sectionId = firstSection.id;
+    }
+
+    const widget = structuredClone(itemToDuplicate);
+    widget.id = createId();
+    widget.xOffset = emptyPosition.xOffset;
+    widget.yOffset = emptyPosition.yOffset;
+    widget.sectionId = sectionId;
+
+    const result = {
+      ...previous,
+      sections: previous.sections.map((section) => {
+        // Return same section if item is not in it
+        if (section.id !== sectionId) return section;
+        return {
+          ...section,
+          items: section.items.concat(widget),
+        };
+      }),
+    };
+
+    return result;
+  };

apps/nextjs/src/components/board/items/actions/empty-position.ts

@@ -0,0 +1,25 @@
+import type { Item } from "~/app/[locale]/boards/_types";
+
+export const getFirstEmptyPosition = (
+  elements: Pick<Item, "yOffset" | "xOffset" | "width" | "height">[],
+  columnCount: number,
+  rowCount = 9999,
+  size: { width: number; height: number } = { width: 1, height: 1 },
+) => {
+  for (let yOffset = 0; yOffset < rowCount + 1 - size.height; yOffset++) {
+    for (let xOffset = 0; xOffset < columnCount; xOffset++) {
+      const isOccupied = elements.some(
+        (element) =>
+          element.yOffset < yOffset + size.height &&
+          element.yOffset + element.height > yOffset &&
+          element.xOffset < xOffset + size.width &&
+          element.xOffset + element.width > xOffset,
+      );
+
+      if (!isOccupied) {
+        return { xOffset, yOffset };
+      }
+    }
+  }
+  return undefined;
+};

apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test, vi } from "vitest";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+import { createItemCallback } from "../create-item";
+import * as emptyPosition from "../empty-position";
+import { createDynamicSection, createEmptySection, createItem } from "./shared";
+
+describe("item actions create-item", () => {
+  test("should add it to first section", () => {
+    const spy = vi.spyOn(emptyPosition, "getFirstEmptyPosition");
+    spy.mockReturnValue({ xOffset: 5, yOffset: 5 });
+    const input = {
+      sections: [createEmptySection("1", 2), createEmptySection("2", 0), createEmptySection("3", 1)],
+      columnCount: 4,
+    } satisfies Pick<Board, "sections" | "columnCount">;
+
+    const result = createItemCallback({
+      kind: "clock",
+    })(input as unknown as Board);
+
+    const firstSection = result.sections.find((section) => section.id === "2");
+    const item = firstSection?.items.at(0);
+    expect(item).toEqual(expect.objectContaining({ kind: "clock", xOffset: 5, yOffset: 5 }));
+    expect(spy).toHaveBeenCalledWith([], input.columnCount);
+  });
+  test("should correctly pass dynamic section and items to getFirstEmptyPosition", () => {
+    const spy = vi.spyOn(emptyPosition, "getFirstEmptyPosition");
+    spy.mockReturnValue({ xOffset: 5, yOffset: 5 });
+    const firstSection = createEmptySection("2", 0);
+    const expectedItem = createItem({ id: "12", xOffset: 1, yOffset: 2, width: 3, height: 2 });
+    firstSection.items.push(expectedItem);
+    const dynamicSectionInFirst = createDynamicSection({
+      id: "4",
+      parentSectionId: "2",
+      yOffset: 0,
+      xOffset: 0,
+      width: 2,
+      height: 2,
+    });
+
+    const input = {
+      sections: [
+        createEmptySection("1", 2),
+        firstSection,
+        createEmptySection("3", 1),
+        dynamicSectionInFirst,
+        createDynamicSection({ id: "5", parentSectionId: "3", yOffset: 1 }),
+      ],
+      columnCount: 4,
+    } satisfies Pick<Board, "sections" | "columnCount">;
+
+    const result = createItemCallback({
+      kind: "clock",
+    })(input as unknown as Board);
+
+    const firstSectionResult = result.sections.find((section) => section.id === "2");
+    const item = firstSectionResult?.items.find((item) => item.id !== "12");
+    expect(item).toEqual(expect.objectContaining({ kind: "clock", xOffset: 5, yOffset: 5 }));
+    expect(spy).toHaveBeenCalledWith([expectedItem, dynamicSectionInFirst], input.columnCount);
+  });
+});

apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test, vi } from "vitest";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+import { duplicateItemCallback } from "../duplicate-item";
+import * as emptyPosition from "../empty-position";
+import { createEmptySection, createItem } from "./shared";
+
+describe("item actions duplicate-item", () => {
+  test("should copy it in the same section", () => {
+    const spy = vi.spyOn(emptyPosition, "getFirstEmptyPosition");
+    spy.mockReturnValue({ xOffset: 5, yOffset: 5 });
+    const currentSection = createEmptySection("2", 1);
+    const currentItem = createItem({
+      id: "1",
+      xOffset: 1,
+      yOffset: 3,
+      width: 3,
+      height: 2,
+      kind: "minecraftServerStatus",
+      integrationIds: ["1"],
+      options: { address: "localhost" },
+      advancedOptions: { customCssClasses: ["test"] },
+    });
+    const otherItem = createItem({
+      id: "2",
+    });
+    currentSection.items.push(currentItem, otherItem);
+    const input = {
+      columnCount: 10,
+      sections: [createEmptySection("1", 0), currentSection, createEmptySection("3", 2)],
+    } satisfies Pick<Board, "sections" | "columnCount">;
+
+    const result = duplicateItemCallback({ itemId: currentItem.id })(input as unknown as Board);
+
+    const section = result.sections.find((section) => section.id === "2");
+    expect(section?.items.length).toBe(3);
+    const duplicatedItem = section?.items.find((item) => item.id !== currentItem.id && item.id !== otherItem.id);
+
+    expect(duplicatedItem).toEqual(
+      expect.objectContaining({
+        kind: "minecraftServerStatus",
+        xOffset: 5,
+        yOffset: 5,
+        width: 3,
+        height: 2,
+        integrationIds: ["1"],
+        options: { address: "localhost" },
+        advancedOptions: { customCssClasses: ["test"] },
+      }),
+    );
+  });
+});

apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts

@@ -0,0 +1,138 @@
+import { describe, expect, test } from "vitest";
+
+import type { Item } from "~/app/[locale]/boards/_types";
+import { getFirstEmptyPosition } from "../empty-position";
+
+describe("get first empty position", () => {
+  test.each([
+    [[[" ", " ", " ", " "]], [1, 1], 0, 0],
+    [[["a", " ", " ", " "]], [1, 1], 1, 0],
+    [[[" ", "a", " ", " "]], [1, 1], 0, 0],
+    [
+      [
+        ["a", "a", " ", " "],
+        ["a", "a", " ", " "],
+      ],
+      [1, 1],
+      2,
+      0,
+    ],
+    [[["a", "a", "a", "a"]], [1, 1], 0, 1],
+    [
+      [
+        ["a", "a", "a", "a"],
+        ["a", "a", "a", "a"],
+      ],
+      [1, 1],
+      0,
+      2,
+    ],
+    [
+      [
+        ["a", "a", " ", "b", "b"],
+        ["a", "a", " ", "b", "b"],
+      ],
+      [1, 2],
+      2,
+      0,
+    ],
+    [
+      [
+        ["a", "a", " ", " ", "b", "b"],
+        ["a", "a", " ", " ", "b", "b"],
+      ],
+      [2, 2],
+      2,
+      0,
+    ],
+    [
+      [
+        ["a", "a", " ", "d", "b", "b"],
+        ["a", "a", "c", "e", "b", "b"],
+      ],
+      [1, 1],
+      2,
+      0,
+    ],
+    [
+      [
+        ["a", "a", " ", " ", "b", "b"],
+        ["a", "a", " ", "e", "b", "b"],
+      ],
+      [2, 2],
+      0,
+      2,
+    ],
+  ])("should return the first empty position", (layout, size, expectedX, expectedY) => {
+    const elements = createElementsFromLayout(layout);
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const result = getFirstEmptyPosition(elements, layout[0]!.length, undefined, { width: size[0]!, height: size[1]! });
+
+    expect(result).toEqual({ xOffset: expectedX, yOffset: expectedY });
+  });
+
+  test.each([
+    [[[" ", " "]], [1, 1], 0, 0, 1],
+    [[["a", " "]], [1, 1], 1, 0, 1],
+    [[["a", "a"]], [1, 1], undefined, undefined, 1],
+    [[["a", "a"]], [1, 1], 0, 1, 2],
+    [
+      [
+        ["a", "b", " ", " "],
+        ["a", "c", " ", "d"],
+      ],
+      [2, 2],
+      undefined,
+      undefined,
+      3,
+    ],
+    [
+      [
+        ["a", "b", " ", " "],
+        ["a", "c", " ", "d"],
+      ],
+      [2, 2],
+      0,
+      2,
+      4,
+    ],
+    [[["a", "b"]], [2, 1], 0, 1, 2],
+  ])("should return the first empty position with limited rows", (layout, size, expectedX, expectedY, rowCount) => {
+    const elements = createElementsFromLayout(layout);
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const result = getFirstEmptyPosition(elements, layout[0]!.length, rowCount, { width: size[0]!, height: size[1]! });
+
+    expect(result).toEqual(expectedX !== undefined ? { xOffset: expectedX, yOffset: expectedY } : undefined);
+  });
+});
+
+const createElementsFromLayout = (layout: string[][]) => {
+  const elements: (Pick<Item, "xOffset" | "yOffset" | "width" | "height"> & { char: string })[] = [];
+  for (let yOffset = 0; yOffset < layout.length; yOffset++) {
+    const row = layout[yOffset];
+    if (!row) continue;
+    for (let xOffset = 0; xOffset < row.length; xOffset++) {
+      const item = row[xOffset];
+      if (item === " " || !item) continue;
+
+      const existing = elements.find((element) => element.char === item);
+      if (existing) {
+        existing.height = yOffset - existing.yOffset + 1;
+        existing.width = xOffset - existing.xOffset + 1;
+        continue;
+      }
+
+      elements.push({
+        yOffset,
+        xOffset,
+        width: 1,
+        height: 1,
+        char: item,
+      });
+    }
+  }
+
+  return elements;
+};

apps/nextjs/src/components/board/items/actions/test/shared.ts

@@ -0,0 +1,32 @@
+import type { DynamicSection, EmptySection, Item } from "~/app/[locale]/boards/_types";
+
+export const createEmptySection = (id: string, yOffset: number): EmptySection => ({
+  id,
+  kind: "empty",
+  yOffset,
+  xOffset: 0,
+  items: [],
+});
+
+export const createDynamicSection = (section: Omit<Partial<DynamicSection>, "kind">): DynamicSection => ({
+  id: section.id ?? "0",
+  kind: "dynamic",
+  parentSectionId: section.parentSectionId ?? "0",
+  height: section.height ?? 1,
+  width: section.width ?? 1,
+  yOffset: section.yOffset ?? 0,
+  xOffset: section.xOffset ?? 0,
+  items: section.items ?? [],
+});
+
+export const createItem = (item: Partial<Item>): Item => ({
+  id: item.id ?? "0",
+  width: item.width ?? 1,
+  height: item.height ?? 1,
+  yOffset: item.yOffset ?? 0,
+  xOffset: item.xOffset ?? 0,
+  kind: item.kind ?? "clock",
+  integrationIds: item.integrationIds ?? [],
+  options: item.options ?? {},
+  advancedOptions: item.advancedOptions ?? { customCssClasses: [] },
+});

apps/nextjs/src/components/board/items/item-actions.tsx

@@ -1,12 +1,13 @@
 import { useCallback } from "react";
 
-import type { Modify } from "@homarr/common/types";
-import { createId } from "@homarr/db/client";
-import type { WidgetKind } from "@homarr/definitions";
 import type { BoardItemAdvancedOptions } from "@homarr/validation";
 
-import type { EmptySection, Item } from "~/app/[locale]/boards/_types";
+import type { Item } from "~/app/[locale]/boards/_types";
 import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
+import type { CreateItemInput } from "./actions/create-item";
+import { createItemCallback } from "./actions/create-item";
+import type { DuplicateItemInput } from "./actions/duplicate-item";
+import { duplicateItemCallback } from "./actions/duplicate-item";
 
 interface MoveAndResizeItem {
   itemId: string;
@@ -42,87 +43,19 @@ interface UpdateItemIntegrations {
   newIntegrations: string[];
 }
 
-interface CreateItem {
-  kind: WidgetKind;
-}
-
-interface DuplicateItem {
-  itemId: string;
-}
-
 export const useItemActions = () => {
   const { updateBoard } = useUpdateBoard();
 
   const createItem = useCallback(
-    ({ kind }: CreateItem) => {
-      updateBoard((previous) => {
-        const lastSection = previous.sections
-          .filter((section): section is EmptySection => section.kind === "empty")
-          .sort((sectionA, sectionB) => sectionB.yOffset - sectionA.yOffset)[0];
-
-        if (!lastSection) return previous;
-
-        const widget = {
-          id: createId(),
-          kind,
-          options: {},
-          width: 1,
-          height: 1,
-          integrationIds: [],
-          advancedOptions: {
-            customCssClasses: [],
-          },
-        } satisfies Modify<
-          Omit<Item, "yOffset" | "xOffset">,
-          {
-            kind: WidgetKind;
-          }
-        >;
-
-        return {
-          ...previous,
-          sections: previous.sections.map((section) => {
-            // Return same section if item is not in it
-            if (section.id !== lastSection.id) return section;
-            return {
-              ...section,
-              items: section.items.concat(widget as unknown as Item),
-            };
-          }),
-        };
-      });
+    (input: CreateItemInput) => {
+      updateBoard(createItemCallback(input));
     },
     [updateBoard],
   );
 
   const duplicateItem = useCallback(
-    ({ itemId }: DuplicateItem) => {
-      updateBoard((previous) => {
-        const itemToDuplicate = previous.sections
-          .flatMap((section) => section.items)
-          .find((item) => item.id === itemId);
-
-        if (!itemToDuplicate) return previous;
-
-        const newItem = {
-          ...itemToDuplicate,
-          id: createId(),
-          yOffset: undefined,
-          xOffset: undefined,
-        } satisfies Modify<Item, { yOffset?: number; xOffset?: number }>;
-
-        return {
-          ...previous,
-          sections: previous.sections.map((section) => {
-            // Return same section if item is not in it
-            if (!section.items.some((item) => item.id === itemId)) return section;
-            return {
-              ...section,
-              items: section.items.concat(newItem as unknown as Item),
-            };
-          }),
-        };
-      });
+    ({ itemId }: DuplicateItemInput) => {
+      updateBoard(duplicateItemCallback({ itemId }));
     },
     [updateBoard],
   );

apps/nextjs/src/components/board/items/item-content.tsx

@@ -79,7 +79,12 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
         >
           <Throw
             error={new NoIntegrationSelectedError()}
-            when={widgetSupportsIntegrations && item.integrationIds.length === 0}
+            when={
+              widgetSupportsIntegrations &&
+              item.integrationIds.length === 0 &&
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+              (!("integrationsRequired" in definition) || definition.integrationsRequired !== false)
+            }
           />
           <BoardItemMenu offset={4} item={newItem} />
           <Comp

apps/nextjs/src/components/board/items/item-move-modal.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useRef } from "react";
 import { Button, Grid, Group, NumberInput, Stack } from "@mantine/core";
+import { z } from "zod";
 
 import { useZodForm } from "@homarr/form";
 import type { GridStack } from "@homarr/gridstack";
 import { createModal } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { z } from "@homarr/validation";
 
 import type { Item } from "~/app/[locale]/boards/_types";
 

apps/nextjs/src/components/board/modals/board-rename-modal.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { Button, Group, Stack, TextInput } from "@mantine/core";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 interface InnerProps {

apps/nextjs/src/components/board/sections/category-section.tsx

@@ -2,19 +2,32 @@ import { Card, Collapse, Group, Stack, Title, UnstyledButton } from "@mantine/co
 import { useDisclosure } from "@mantine/hooks";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 
+import { clientApi } from "@homarr/api/client";
+
 import type { CategorySection } from "~/app/[locale]/boards/_types";
+import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { CategoryMenu } from "./category/category-menu";
 import { GridStack } from "./gridstack/gridstack";
+import classes from "./item.module.css";
 
 interface Props {
   section: CategorySection;
 }
 
 export const BoardCategorySection = ({ section }: Props) => {
-  const [opened, { toggle }] = useDisclosure(false);
+  const { mutate } = clientApi.section.changeCollapsed.useMutation();
+  const board = useRequiredBoard();
+  const [opened, { toggle }] = useDisclosure(section.collapsed, {
+    onOpen() {
+      mutate({ sectionId: section.id, collapsed: true });
+    },
+    onClose() {
+      mutate({ sectionId: section.id, collapsed: false });
+    },
+  });
 
   return (
-    <Card withBorder p={0}>
+    <Card style={{ "--opacity": board.opacity / 100 }} withBorder p={0} className={classes.itemCard}>
       <Stack>
         <Group wrap="nowrap" gap="sm">
           <UnstyledButton w="100%" p="sm" onClick={toggle}>

apps/nextjs/src/components/board/sections/category/actions/test/move-category.spec.ts

@@ -67,6 +67,7 @@ const createSections = (categoryCount: number) => {
     name: `Category ${index}`,
     yOffset: index,
     xOffset: 0,
+    collapsed: false,
     items: [],
   })) satisfies Section[];
 };

apps/nextjs/src/components/board/sections/category/actions/test/remove-category.spec.ts

@@ -118,6 +118,7 @@ const createSections = (initialYOffsets: number[]) => {
     id: yOffset.toString(),
     kind: index % 2 === 0 ? "empty" : "category",
     name: "Category",
+    collapsed: false,
     yOffset,
     xOffset: 0,
     items: [createItem({ id: yOffset.toString() })],

apps/nextjs/src/components/board/sections/category/category-actions.ts

@@ -40,6 +40,7 @@ export const useCategoryActions = () => {
             kind: "category",
             yOffset,
             xOffset: 0,
+            collapsed: false,
             items: [],
           },
           {
@@ -89,6 +90,7 @@ export const useCategoryActions = () => {
               kind: "category",
               yOffset: lastYOffset + 1,
               xOffset: 0,
+              collapsed: false,
               items: [],
             },
             {

apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx

@@ -1,9 +1,9 @@
 import { Button, Group, Stack, TextInput } from "@mantine/core";
+import { z } from "zod";
 
 import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { z } from "@homarr/validation";
 
 interface Category {
   id: string;

apps/nextjs/src/env.ts

@@ -12,11 +12,7 @@ export const env = createEnv({
    * Specify your server-side environment variables schema here. This way you can ensure the app isn't
    * built with invalid env vars.
    */
-  server: {
-    // Comma separated list of docker hostnames that can be used to connect to query the docker endpoints (localhost:2375,host.docker.internal:2375, ...)
-    DOCKER_HOSTNAMES: z.string().optional(),
-    DOCKER_PORTS: z.string().optional(),
-  },
+  server: {},
   /**
    * Specify your client-side environment variables schema here.
    * For them to be exposed to the client, prefix them with `NEXT_PUBLIC_`.
@@ -30,9 +26,8 @@ export const env = createEnv({
   runtimeEnv: {
     PORT: process.env.PORT,
     NODE_ENV: process.env.NODE_ENV,
-    DOCKER_HOSTNAMES: process.env.DOCKER_HOSTNAMES,
-    DOCKER_PORTS: process.env.DOCKER_PORTS,
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },
   skipValidation: shouldSkipEnvValidation(),
+  emptyStringAsUndefined: true,
 });

apps/nextjs/src/middleware.ts

@@ -4,7 +4,7 @@ import { createTRPCClient, httpLink } from "@trpc/client";
 import SuperJSON from "superjson";
 
 import type { AppRouter } from "@homarr/api";
-import { createHeadersCallbackForSource } from "@homarr/api/shared";
+import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 import { createI18nMiddleware } from "@homarr/translation/middleware";
 
 export async function middleware(request: NextRequest) {
@@ -34,7 +34,7 @@ export const config = {
 export const serverFetchApi = createTRPCClient<AppRouter>({
   links: [
     httpLink({
-      url: `http://${process.env.HOSTNAME ?? "localhost"}:3000/api/trpc`,
+      url: getTrpcUrl(),
       transformer: SuperJSON,
       headers: createHeadersCallbackForSource("server-fetch"),
     }),

apps/tasks/package.json

@@ -38,15 +38,15 @@
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.7",
     "superjson": "2.2.2",
-    "undici": "7.2.1"
+    "undici": "7.3.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
-    "@types/node": "^22.10.6",
+    "@types/node": "^22.12.0",
     "dotenv-cli": "^8.0.0",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "prettier": "^3.4.2",
     "tsx": "4.19.2",
     "typescript": "^5.7.3"

apps/tasks/src/undici-log-agent-override.ts

@@ -1,35 +1,6 @@
-import type { Dispatcher } from "undici";
-import { Agent, setGlobalDispatcher } from "undici";
+import { setGlobalDispatcher } from "undici";
 
-import { logger } from "@homarr/log";
-
-export class LoggingAgent extends Agent {
-  constructor(...props: ConstructorParameters<typeof Agent>) {
-    super(...props);
-  }
-
-  dispatch(options: Dispatcher.DispatchOptions, handler: Dispatcher.DispatchHandler): boolean {
-    const url = new URL(`${options.origin as string}${options.path}`);
-
-    // The below code should prevent sensitive data from being logged as
-    // some integrations use query parameters for auth
-    url.searchParams.forEach((value, key) => {
-      if (value === "") return; // Skip empty values
-      if (/^-?\d{1,12}$/.test(value)) return; // Skip small numbers
-      if (value === "true" || value === "false") return; // Skip boolean values
-      if (/^[a-zA-Z]{1,12}$/.test(value)) return; // Skip short strings
-      if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return; // Skip dates
-      if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(value)) return; // Skip date times
-
-      url.searchParams.set(key, "REDACTED");
-    });
-
-    logger.info(
-      `Dispatching request ${url.toString().replaceAll("=&", "&")} (${Object.keys(options.headers ?? {}).length} headers)`,
-    );
-    return super.dispatch(options, handler);
-  }
-}
+import { LoggingAgent } from "@homarr/common/server";
 
 const agent = new LoggingAgent();
 setGlobalDispatcher(agent);

apps/websocket/package.json

@@ -33,8 +33,8 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
-    "@types/ws": "^8.5.13",
-    "eslint": "^9.18.0",
+    "@types/ws": "^8.5.14",
+    "eslint": "^9.19.0",
     "prettier": "^3.4.2",
     "typescript": "^5.7.3"
   }

apps/websocket/src/main.ts

@@ -39,6 +39,14 @@ const handler = applyWSSHandler({
       });
     }
   },
+  // Enable heartbeat messages to keep connection open (disabled by default)
+  keepAlive: {
+    enabled: true,
+    // server ping message interval in milliseconds
+    pingMs: 30000,
+    // connection is terminated if pong message is not received in this many milliseconds
+    pongWaitMs: 5000,
+  },
 });
 
 wss.on("connection", (websocket, incomingMessage) => {

docs/README.md

@@ -24,10 +24,10 @@
     <strong>Demo ✨</strong>
   </a>
   •
-  <a href="https://homarr.dev/docs/getting-started/installation/">
+  <a href="https://homarr.dev/docs/category/installation-1/">
     <strong>Install 💻</strong>
   </a> •
-  <a href="https://translate.homarr.dev/">
+  <a href="https://crowdin.com/project/homarr_labs">
     <strong>Translations 🈺</strong>
   </a> •
   <a href="https://discord.com/invite/aCsmEV5RgA">
@@ -35,13 +35,6 @@
   </a>
 </p>
 
-> [!WARNING]
-> This is a beta version of Homarr. You can download the old but stable version at https://github.com/ajnart/homarr/. Running this version is at your own risk.
-
-Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips. With Homarr, you can access and control everything in one location. Homarr seamlessly integrates with the apps you've added, providing you with valuable information and giving you complete control. Installation is a breeze, and Homarr supports a wide range of deployment methods.
-
-<br/>
-<br/>
 
 ![Features Section](./section-features.png)
 
@@ -100,7 +93,7 @@ Homarr has a [built-in collection of widgets and integrations](https://homarr.de
 Since we are updating Homarr very frequently, we recommend reading our official installation guides:
 
 <h2>
-<a href="https://homarr.dev/docs/getting-started/installation/">
+<a href="https://homarr.dev/docs/category/installation-1/">
   Please click here for official installation instructions
 </a>
 </h2>

e2e/onboarding.spec.ts

@@ -49,9 +49,9 @@ describe("Onboarding", () => {
       environment: {
         AUTH_PROVIDERS: "ldap",
         AUTH_LDAP_URI: "ldap://host.docker.internal:3890",
-        AUTH_LDAP_BASE: "",
-        AUTH_LDAP_BIND_DN: "",
-        AUTH_LDAP_BIND_PASSWORD: "",
+        AUTH_LDAP_BASE: "not-used",
+        AUTH_LDAP_BIND_DN: "not-used",
+        AUTH_LDAP_BIND_PASSWORD: "not-used",
       },
       mounts: {
         "/appdata": localMountPath,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "1.0.0-beta.12",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "build": "cross-env CI=true turbo build",
@@ -38,27 +38,30 @@
     "@semantic-release/github": "^11.0.1",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.3",
-    "@turbo/gen": "^2.3.3",
+    "@turbo/gen": "^2.3.4",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.8",
-    "@vitest/ui": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.4",
+    "@vitest/ui": "^3.0.4",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "cross-env": "^7.0.3",
     "jsdom": "^26.0.0",
     "prettier": "^3.4.2",
     "semantic-release": "^24.2.1",
-    "testcontainers": "^10.16.0",
-    "turbo": "^2.3.3",
+    "testcontainers": "^10.17.2",
+    "turbo": "^2.3.4",
     "typescript": "^5.7.3",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.4"
   },
   "packageManager": "pnpm@9.15.4",
   "engines": {
-    "node": ">=22.13.0"
+    "node": ">=22.13.1"
   },
   "pnpm": {
     "allowNonAppliedPatches": true,
+    "overrides": {
+      "proxmox-api>undici": "7.3.0"
+    },
     "patchedDependencies": {
       "pretty-print-error": "patches/pretty-print-error.patch"
     }

packages/analytics/package.json

@@ -32,7 +32,7 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "typescript": "^5.7.3"
   }
 }

packages/api/package.json

@@ -22,12 +22,14 @@
   "prettier": "@homarr/prettier-config",
   "dependencies": {
     "@homarr/auth": "workspace:^0.1.0",
+    "@homarr/certificates": "workspace:^0.1.0",
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/cron-job-runner": "workspace:^0.1.0",
     "@homarr/cron-job-status": "workspace:^0.1.0",
     "@homarr/cron-jobs": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
+    "@homarr/docker": "workspace:^0.1.0",
     "@homarr/icons": "workspace:^0.1.0",
     "@homarr/integrations": "workspace:^0.1.0",
     "@homarr/log": "workspace:^",
@@ -41,20 +43,20 @@
     "@trpc/client": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
-    "dockerode": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
-    "next": "15.1.4",
+    "next": "15.1.6",
+    "pretty-print-error": "^1.1.2",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "superjson": "2.2.2",
-    "trpc-to-openapi": "^2.1.2"
+    "trpc-to-openapi": "^2.1.2",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
-    "@types/dockerode": "^3.3.34",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "prettier": "^3.4.2",
     "typescript": "^5.7.3"
   }

packages/api/src/client.ts

@@ -5,7 +5,7 @@ import { createTRPCReact } from "@trpc/react-query";
 import SuperJSON from "superjson";
 
 import type { AppRouter } from ".";
-import { createHeadersCallbackForSource } from "./shared";
+import { createHeadersCallbackForSource, getTrpcUrl } from "./shared";
 
 export const clientApi = createTRPCReact<AppRouter>();
 export const fetchApi = createTRPCClient<AppRouter>({
@@ -17,16 +17,3 @@ export const fetchApi = createTRPCClient<AppRouter>({
     }),
   ],
 });
-
-function getBaseUrl() {
-  if (typeof window !== "undefined") return window.location.origin;
-  return `http://localhost:${process.env.PORT ?? 3000}`;
-}
-
-/**
- * Creates the full url for the trpc api endpoint
- * @returns
- */
-export function getTrpcUrl() {
-  return `${getBaseUrl()}/api/trpc`;
-}

packages/api/src/middlewares/integration.ts

@@ -1,4 +1,5 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import type { Session } from "@homarr/auth";
 import { hasQueryAccessToIntegrationsAsync } from "@homarr/auth/server";
@@ -9,7 +10,6 @@ import type { Database } from "@homarr/db";
 import { and, eq, inArray } from "@homarr/db";
 import { integrations } from "@homarr/db/schema";
 import type { IntegrationKind } from "@homarr/definitions";
-import { z } from "@homarr/validation";
 
 import { publicProcedure } from "../trpc";
 
@@ -98,56 +98,59 @@ export const createManyIntegrationMiddleware = <TKind extends IntegrationKind>(
   action: IntegrationAction,
   ...kinds: AtLeastOneOf<TKind> // Ensure at least one kind is provided
 ) => {
-  return publicProcedure
-    .input(z.object({ integrationIds: z.array(z.string()).min(1) }))
-    .use(async ({ ctx, input, next }) => {
-      const dbIntegrations = await ctx.db.query.integrations.findMany({
-        where: and(inArray(integrations.id, input.integrationIds), inArray(integrations.kind, kinds)),
-        with: {
-          secrets: true,
-          items: {
+  return publicProcedure.input(z.object({ integrationIds: z.array(z.string()) })).use(async ({ ctx, input, next }) => {
+    const dbIntegrations =
+      input.integrationIds.length >= 1
+        ? await ctx.db.query.integrations.findMany({
+            where: and(inArray(integrations.id, input.integrationIds), inArray(integrations.kind, kinds)),
             with: {
-              item: {
+              secrets: true,
+              items: {
                 with: {
-                  section: {
-                    columns: {
-                      boardId: true,
+                  item: {
+                    with: {
+                      section: {
+                        columns: {
+                          boardId: true,
+                        },
+                      },
                     },
                   },
                 },
               },
+              userPermissions: true,
+              groupPermissions: true,
             },
-          },
-          userPermissions: true,
-          groupPermissions: true,
-        },
+          })
+        : [];
+
+    const offset = input.integrationIds.length - dbIntegrations.length;
+    if (offset !== 0) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: `${offset} of the specified integrations not found or not of kinds ${kinds.join(",")}: ([${input.integrationIds.join(",")}] compared to [${dbIntegrations.map(({ id, kind }) => `${kind}:${id}`).join(",")}])`,
       });
+    }
 
-      const offset = input.integrationIds.length - dbIntegrations.length;
-      if (offset !== 0) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: `${offset} of the specified integrations not found or not of kinds ${kinds.join(",")}: ([${input.integrationIds.join(",")}] compared to [${dbIntegrations.map(({ id, kind }) => `${kind}:${id}`).join(",")}])`,
-        });
-      }
-
+    if (dbIntegrations.length >= 1) {
       await throwIfActionIsNotAllowedAsync(action, ctx.db, dbIntegrations, ctx.session);
+    }
 
-      return next({
-        ctx: {
-          integrations: dbIntegrations.map(
-            ({ secrets, kind, items: _ignore1, groupPermissions: _ignore2, userPermissions: _ignore3, ...rest }) => ({
-              ...rest,
-              kind: kind as TKind,
-              decryptedSecrets: secrets.map((secret) => ({
-                ...secret,
-                value: decryptSecret(secret.value),
-              })),
-            }),
-          ),
-        },
-      });
+    return next({
+      ctx: {
+        integrations: dbIntegrations.map(
+          ({ secrets, kind, items: _ignore1, groupPermissions: _ignore2, userPermissions: _ignore3, ...rest }) => ({
+            ...rest,
+            kind: kind as TKind,
+            decryptedSecrets: secrets.map((secret) => ({
+              ...secret,
+              value: decryptSecret(secret.value),
+            })),
+          }),
+        ),
+      },
     });
+  });
 };
 
 /**

packages/api/src/middlewares/item.ts

@@ -1,9 +1,9 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import { and, eq } from "@homarr/db";
 import { items } from "@homarr/db/schema";
 import type { WidgetKind } from "@homarr/definitions";
-import { z } from "@homarr/validation";
 
 import { publicProcedure } from "../trpc";
 

packages/api/src/root.ts

@@ -1,6 +1,7 @@
 import { apiKeysRouter } from "./router/apiKeys";
 import { appRouter as innerAppRouter } from "./router/app";
 import { boardRouter } from "./router/board";
+import { certificateRouter } from "./router/certificates/certificate-router";
 import { cronJobsRouter } from "./router/cron-jobs";
 import { dockerRouter } from "./router/docker/docker-router";
 import { groupRouter } from "./router/group";
@@ -14,6 +15,7 @@ import { logRouter } from "./router/log";
 import { mediaRouter } from "./router/medias/media-router";
 import { onboardRouter } from "./router/onboard/onboard-router";
 import { searchEngineRouter } from "./router/search-engine/search-engine-router";
+import { sectionRouter } from "./router/section/section-router";
 import { serverSettingsRouter } from "./router/serverSettings";
 import { updateCheckerRouter } from "./router/update-checker";
 import { userRouter } from "./router/user";
@@ -26,6 +28,7 @@ export const appRouter = createTRPCRouter({
   invite: inviteRouter,
   integration: integrationRouter,
   board: boardRouter,
+  section: sectionRouter,
   app: innerAppRouter,
   searchEngine: searchEngineRouter,
   widget: widgetRouter,
@@ -41,6 +44,7 @@ export const appRouter = createTRPCRouter({
   apiKeys: apiKeysRouter,
   media: mediaRouter,
   updateChecker: updateCheckerRouter,
+  certificates: certificateRouter,
 });
 
 // export type definition of API

packages/api/src/router/app.ts

@@ -1,10 +1,11 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import { asc, createId, eq, inArray, like } from "@homarr/db";
 import { apps } from "@homarr/db/schema";
 import { selectAppSchema } from "@homarr/db/validationSchemas";
 import { getIconForName } from "@homarr/icons";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 import { convertIntersectionToZodObject } from "../schema-merger";
 import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../trpc";
@@ -102,7 +103,7 @@ export const appRouter = createTRPCRouter({
 
       return app;
     }),
-  byIds: protectedProcedure.input(z.array(z.string())).query(async ({ ctx, input }) => {
+  byIds: publicProcedure.input(z.array(z.string())).query(async ({ ctx, input }) => {
     return await ctx.db.query.apps.findMany({
       where: inArray(apps.id, input),
     });

packages/api/src/router/board.ts

@@ -1,10 +1,11 @@
 import { TRPCError } from "@trpc/server";
 import superjson from "superjson";
+import { z } from "zod";
 
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import type { DeviceType } from "@homarr/common/server";
 import type { Database, InferInsertModel, InferSelectModel, SQL } from "@homarr/db";
-import { and, createId, eq, inArray, like, or } from "@homarr/db";
+import { and, createId, eq, handleTransactionsAsync, inArray, like, or } from "@homarr/db";
 import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import {
   boardGroupPermissions,
@@ -16,6 +17,7 @@ import {
   integrationItems,
   integrationUserPermissions,
   items,
+  sectionCollapseStates,
   sections,
   users,
 } from "@homarr/db/schema";
@@ -25,7 +27,7 @@ import { importOldmarrAsync } from "@homarr/old-import";
 import { importJsonFileSchema } from "@homarr/old-import/shared";
 import { oldmarrConfigSchema } from "@homarr/old-schema";
 import type { BoardItemAdvancedOptions } from "@homarr/validation";
-import { createSectionSchema, sharedItemSchema, validation, z, zodUnionFromArray } from "@homarr/validation";
+import { createSectionSchema, sharedItemSchema, validation, zodUnionFromArray } from "@homarr/validation";
 
 import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../trpc";
 import { throwIfActionForbiddenAsync } from "./board/board-access";
@@ -204,21 +206,49 @@ export const boardRouter = createTRPCRouter({
     .input(validation.board.create)
     .mutation(async ({ ctx, input }) => {
       const boardId = createId();
-      await ctx.db.transaction(async (transaction) => {
-        await transaction.insert(boards).values({
-          id: boardId,
-          name: input.name,
-          isPublic: input.isPublic,
-          columnCount: input.columnCount,
-          creatorId: ctx.session.user.id,
-        });
-        await transaction.insert(sections).values({
-          id: createId(),
-          kind: "empty",
-          xOffset: 0,
-          yOffset: 0,
-          boardId,
-        });
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            await transaction.insert(schema.boards).values({
+              id: boardId,
+              name: input.name,
+              isPublic: input.isPublic,
+              columnCount: input.columnCount,
+              creatorId: ctx.session.user.id,
+            });
+            await transaction.insert(schema.sections).values({
+              id: createId(),
+              kind: "empty",
+              xOffset: 0,
+              yOffset: 0,
+              boardId,
+            });
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction
+              .insert(boards)
+              .values({
+                id: boardId,
+                name: input.name,
+                isPublic: input.isPublic,
+                columnCount: input.columnCount,
+                creatorId: ctx.session.user.id,
+              })
+              .run();
+            transaction
+              .insert(sections)
+              .values({
+                id: createId(),
+                kind: "empty",
+                xOffset: 0,
+                yOffset: 0,
+                boardId,
+              })
+              .run();
+          });
+        },
       });
     }),
   duplicateBoard: permissionRequiredProcedure
@@ -302,28 +332,54 @@ export const boardRouter = createTRPCRouter({
           })),
       );
 
-      ctx.db.transaction((transaction) => {
-        transaction
-          .insert(boards)
-          .values({
-            ...boardProps,
-            id: newBoardId,
-            name: input.name,
-            creatorId: ctx.session.user.id,
-          })
-          .run();
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            transaction.insert(schema.boards).values({
+              ...boardProps,
+              id: newBoardId,
+              name: input.name,
+              creatorId: ctx.session.user.id,
+            });
 
-        if (sectionsToInsert.length > 0) {
-          transaction.insert(sections).values(sectionsToInsert).run();
-        }
+            if (sectionsToInsert.length > 0) {
+              await transaction.insert(schema.sections).values(sectionsToInsert);
+            }
 
-        if (itemsToInsert.length > 0) {
-          transaction.insert(items).values(itemsToInsert).run();
-        }
+            if (itemsToInsert.length > 0) {
+              await transaction.insert(schema.items).values(itemsToInsert);
+            }
 
-        if (itemIntegrationsToInsert.length > 0) {
-          transaction.insert(integrationItems).values(itemIntegrationsToInsert).run();
-        }
+            if (itemIntegrationsToInsert.length > 0) {
+              await transaction.insert(schema.integrationItems).values(itemIntegrationsToInsert);
+            }
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction
+              .insert(boards)
+              .values({
+                ...boardProps,
+                id: newBoardId,
+                name: input.name,
+                creatorId: ctx.session.user.id,
+              })
+              .run();
+
+            if (sectionsToInsert.length > 0) {
+              transaction.insert(sections).values(sectionsToInsert).run();
+            }
+
+            if (itemsToInsert.length > 0) {
+              transaction.insert(items).values(itemsToInsert).run();
+            }
+
+            if (itemIntegrationsToInsert.length > 0) {
+              transaction.insert(integrationItems).values(itemIntegrationsToInsert).run();
+            }
+          });
+        },
       });
     }),
   renameBoard: protectedProcedure.input(validation.board.rename).mutation(async ({ ctx, input }) => {
@@ -434,148 +490,313 @@ export const boardRouter = createTRPCRouter({
   saveBoard: protectedProcedure.input(validation.board.save).mutation(async ({ input, ctx }) => {
     await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "modify");
 
-    await ctx.db.transaction(async (transaction) => {
-      const dbBoard = await getFullBoardWithWhereAsync(transaction, eq(boards.id, input.id), ctx.session.user.id);
+    const dbBoard = await getFullBoardWithWhereAsync(ctx.db, eq(boards.id, input.id), ctx.session.user.id);
 
-      const addedSections = filterAddedItems(input.sections, dbBoard.sections);
+    await handleTransactionsAsync(ctx.db, {
+      async handleAsync(db, schema) {
+        await db.transaction(async (transaction) => {
+          const addedSections = filterAddedItems(input.sections, dbBoard.sections);
 
-      if (addedSections.length > 0) {
-        await transaction.insert(sections).values(
-          addedSections.map((section) => ({
-            id: section.id,
-            kind: section.kind,
-            yOffset: section.yOffset,
-            xOffset: section.kind === "dynamic" ? section.xOffset : 0,
-            height: "height" in section ? section.height : null,
-            width: "width" in section ? section.width : null,
-            parentSectionId: "parentSectionId" in section ? section.parentSectionId : null,
-            name: "name" in section ? section.name : null,
-            boardId: dbBoard.id,
-          })),
-        );
-      }
+          if (addedSections.length > 0) {
+            await transaction.insert(schema.sections).values(
+              addedSections.map((section) => ({
+                id: section.id,
+                kind: section.kind,
+                yOffset: section.yOffset,
+                xOffset: section.kind === "dynamic" ? section.xOffset : 0,
+                height: "height" in section ? section.height : null,
+                width: "width" in section ? section.width : null,
+                parentSectionId: "parentSectionId" in section ? section.parentSectionId : null,
+                name: "name" in section ? section.name : null,
+                boardId: dbBoard.id,
+              })),
+            );
+          }
 
-      const inputItems = input.sections.flatMap((section) =>
-        section.items.map((item) => ({ ...item, sectionId: section.id })),
-      );
-      const dbItems = dbBoard.sections.flatMap((section) =>
-        section.items.map((item) => ({ ...item, sectionId: section.id })),
-      );
-
-      const addedItems = filterAddedItems(inputItems, dbItems);
-
-      if (addedItems.length > 0) {
-        await transaction.insert(items).values(
-          addedItems.map((item) => ({
-            id: item.id,
-            kind: item.kind,
-            height: item.height,
-            width: item.width,
-            xOffset: item.xOffset,
-            yOffset: item.yOffset,
-            options: superjson.stringify(item.options),
-            advancedOptions: superjson.stringify(item.advancedOptions),
-            sectionId: item.sectionId,
-          })),
-        );
-      }
-
-      const inputIntegrationRelations = inputItems.flatMap(({ integrationIds, id: itemId }) =>
-        integrationIds.map((integrationId) => ({
-          integrationId,
-          itemId,
-        })),
-      );
-      const dbIntegrationRelations = dbItems.flatMap(({ integrationIds, id: itemId }) =>
-        integrationIds.map((integrationId) => ({
-          integrationId,
-          itemId,
-        })),
-      );
-      const addedIntegrationRelations = inputIntegrationRelations.filter(
-        (inputRelation) =>
-          !dbIntegrationRelations.some(
-            (dbRelation) =>
-              dbRelation.itemId === inputRelation.itemId && dbRelation.integrationId === inputRelation.integrationId,
-          ),
-      );
-
-      if (addedIntegrationRelations.length > 0) {
-        await transaction.insert(integrationItems).values(
-          addedIntegrationRelations.map((relation) => ({
-            itemId: relation.itemId,
-            integrationId: relation.integrationId,
-          })),
-        );
-      }
-
-      const updatedItems = filterUpdatedItems(inputItems, dbItems);
-
-      for (const item of updatedItems) {
-        await transaction
-          .update(items)
-          .set({
-            kind: item.kind,
-            height: item.height,
-            width: item.width,
-            xOffset: item.xOffset,
-            yOffset: item.yOffset,
-            options: superjson.stringify(item.options),
-            advancedOptions: superjson.stringify(item.advancedOptions),
-            sectionId: item.sectionId,
-          })
-          .where(eq(items.id, item.id));
-      }
-
-      const updatedSections = filterUpdatedItems(input.sections, dbBoard.sections);
-
-      for (const section of updatedSections) {
-        const prev = dbBoard.sections.find((dbSection) => dbSection.id === section.id);
-        await transaction
-          .update(sections)
-          .set({
-            yOffset: section.yOffset,
-            xOffset: section.xOffset,
-            height: prev?.kind === "dynamic" && "height" in section ? section.height : null,
-            width: prev?.kind === "dynamic" && "width" in section ? section.width : null,
-            parentSectionId: prev?.kind === "dynamic" && "parentSectionId" in section ? section.parentSectionId : null,
-            name: prev?.kind === "category" && "name" in section ? section.name : null,
-          })
-          .where(eq(sections.id, section.id));
-      }
-
-      const removedIntegrationRelations = dbIntegrationRelations.filter(
-        (dbRelation) =>
-          !inputIntegrationRelations.some(
-            (inputRelation) =>
-              dbRelation.itemId === inputRelation.itemId && dbRelation.integrationId === inputRelation.integrationId,
-          ),
-      );
-
-      for (const relation of removedIntegrationRelations) {
-        await transaction
-          .delete(integrationItems)
-          .where(
-            and(
-              eq(integrationItems.itemId, relation.itemId),
-              eq(integrationItems.integrationId, relation.integrationId),
-            ),
+          const inputItems = input.sections.flatMap((section) =>
+            section.items.map((item) => ({ ...item, sectionId: section.id })),
+          );
+          const dbItems = dbBoard.sections.flatMap((section) =>
+            section.items.map((item) => ({ ...item, sectionId: section.id })),
           );
-      }
 
-      const removedItems = filterRemovedItems(inputItems, dbItems);
+          const addedItems = filterAddedItems(inputItems, dbItems);
 
-      const itemIds = removedItems.map((item) => item.id);
-      if (itemIds.length > 0) {
-        await transaction.delete(items).where(inArray(items.id, itemIds));
-      }
+          if (addedItems.length > 0) {
+            await transaction.insert(schema.items).values(
+              addedItems.map((item) => ({
+                id: item.id,
+                kind: item.kind,
+                height: item.height,
+                width: item.width,
+                xOffset: item.xOffset,
+                yOffset: item.yOffset,
+                options: superjson.stringify(item.options),
+                advancedOptions: superjson.stringify(item.advancedOptions),
+                sectionId: item.sectionId,
+              })),
+            );
+          }
 
-      const removedSections = filterRemovedItems(input.sections, dbBoard.sections);
-      const sectionIds = removedSections.map((section) => section.id);
+          const inputIntegrationRelations = inputItems.flatMap(({ integrationIds, id: itemId }) =>
+            integrationIds.map((integrationId) => ({
+              integrationId,
+              itemId,
+            })),
+          );
+          const dbIntegrationRelations = dbItems.flatMap(({ integrationIds, id: itemId }) =>
+            integrationIds.map((integrationId) => ({
+              integrationId,
+              itemId,
+            })),
+          );
+          const addedIntegrationRelations = inputIntegrationRelations.filter(
+            (inputRelation) =>
+              !dbIntegrationRelations.some(
+                (dbRelation) =>
+                  dbRelation.itemId === inputRelation.itemId &&
+                  dbRelation.integrationId === inputRelation.integrationId,
+              ),
+          );
 
-      if (sectionIds.length > 0) {
-        await transaction.delete(sections).where(inArray(sections.id, sectionIds));
-      }
+          if (addedIntegrationRelations.length > 0) {
+            await transaction.insert(schema.integrationItems).values(
+              addedIntegrationRelations.map((relation) => ({
+                itemId: relation.itemId,
+                integrationId: relation.integrationId,
+              })),
+            );
+          }
+
+          const updatedItems = filterUpdatedItems(inputItems, dbItems);
+
+          for (const item of updatedItems) {
+            await transaction
+              .update(schema.items)
+              .set({
+                kind: item.kind,
+                height: item.height,
+                width: item.width,
+                xOffset: item.xOffset,
+                yOffset: item.yOffset,
+                options: superjson.stringify(item.options),
+                advancedOptions: superjson.stringify(item.advancedOptions),
+                sectionId: item.sectionId,
+              })
+              .where(eq(items.id, item.id));
+          }
+
+          const updatedSections = filterUpdatedItems(input.sections, dbBoard.sections);
+
+          for (const section of updatedSections) {
+            const prev = dbBoard.sections.find((dbSection) => dbSection.id === section.id);
+            await transaction
+              .update(schema.sections)
+              .set({
+                yOffset: section.yOffset,
+                xOffset: section.xOffset,
+                height: prev?.kind === "dynamic" && "height" in section ? section.height : null,
+                width: prev?.kind === "dynamic" && "width" in section ? section.width : null,
+                parentSectionId:
+                  prev?.kind === "dynamic" && "parentSectionId" in section ? section.parentSectionId : null,
+                name: prev?.kind === "category" && "name" in section ? section.name : null,
+              })
+              .where(eq(sections.id, section.id));
+          }
+
+          const removedIntegrationRelations = dbIntegrationRelations.filter(
+            (dbRelation) =>
+              !inputIntegrationRelations.some(
+                (inputRelation) =>
+                  dbRelation.itemId === inputRelation.itemId &&
+                  dbRelation.integrationId === inputRelation.integrationId,
+              ),
+          );
+
+          for (const relation of removedIntegrationRelations) {
+            await transaction
+              .delete(schema.integrationItems)
+              .where(
+                and(
+                  eq(integrationItems.itemId, relation.itemId),
+                  eq(integrationItems.integrationId, relation.integrationId),
+                ),
+              );
+          }
+
+          const removedItems = filterRemovedItems(inputItems, dbItems);
+
+          const itemIds = removedItems.map((item) => item.id);
+          if (itemIds.length > 0) {
+            await transaction.delete(schema.items).where(inArray(items.id, itemIds));
+          }
+
+          const removedSections = filterRemovedItems(input.sections, dbBoard.sections);
+          const sectionIds = removedSections.map((section) => section.id);
+
+          if (sectionIds.length > 0) {
+            await transaction.delete(schema.sections).where(inArray(sections.id, sectionIds));
+          }
+        });
+      },
+      handleSync(db) {
+        db.transaction((transaction) => {
+          const addedSections = filterAddedItems(input.sections, dbBoard.sections);
+
+          if (addedSections.length > 0) {
+            transaction
+              .insert(sections)
+              .values(
+                addedSections.map((section) => ({
+                  id: section.id,
+                  kind: section.kind,
+                  yOffset: section.yOffset,
+                  xOffset: section.kind === "dynamic" ? section.xOffset : 0,
+                  height: "height" in section ? section.height : null,
+                  width: "width" in section ? section.width : null,
+                  parentSectionId: "parentSectionId" in section ? section.parentSectionId : null,
+                  name: "name" in section ? section.name : null,
+                  boardId: dbBoard.id,
+                })),
+              )
+              .run();
+          }
+
+          const inputItems = input.sections.flatMap((section) =>
+            section.items.map((item) => ({ ...item, sectionId: section.id })),
+          );
+          const dbItems = dbBoard.sections.flatMap((section) =>
+            section.items.map((item) => ({ ...item, sectionId: section.id })),
+          );
+
+          const addedItems = filterAddedItems(inputItems, dbItems);
+
+          if (addedItems.length > 0) {
+            transaction
+              .insert(items)
+              .values(
+                addedItems.map((item) => ({
+                  id: item.id,
+                  kind: item.kind,
+                  height: item.height,
+                  width: item.width,
+                  xOffset: item.xOffset,
+                  yOffset: item.yOffset,
+                  options: superjson.stringify(item.options),
+                  advancedOptions: superjson.stringify(item.advancedOptions),
+                  sectionId: item.sectionId,
+                })),
+              )
+              .run();
+          }
+
+          const inputIntegrationRelations = inputItems.flatMap(({ integrationIds, id: itemId }) =>
+            integrationIds.map((integrationId) => ({
+              integrationId,
+              itemId,
+            })),
+          );
+          const dbIntegrationRelations = dbItems.flatMap(({ integrationIds, id: itemId }) =>
+            integrationIds.map((integrationId) => ({
+              integrationId,
+              itemId,
+            })),
+          );
+          const addedIntegrationRelations = inputIntegrationRelations.filter(
+            (inputRelation) =>
+              !dbIntegrationRelations.some(
+                (dbRelation) =>
+                  dbRelation.itemId === inputRelation.itemId &&
+                  dbRelation.integrationId === inputRelation.integrationId,
+              ),
+          );
+
+          if (addedIntegrationRelations.length > 0) {
+            transaction
+              .insert(integrationItems)
+              .values(
+                addedIntegrationRelations.map((relation) => ({
+                  itemId: relation.itemId,
+                  integrationId: relation.integrationId,
+                })),
+              )
+              .run();
+          }
+
+          const updatedItems = filterUpdatedItems(inputItems, dbItems);
+
+          for (const item of updatedItems) {
+            transaction
+              .update(items)
+              .set({
+                kind: item.kind,
+                height: item.height,
+                width: item.width,
+                xOffset: item.xOffset,
+                yOffset: item.yOffset,
+                options: superjson.stringify(item.options),
+                advancedOptions: superjson.stringify(item.advancedOptions),
+                sectionId: item.sectionId,
+              })
+              .where(eq(items.id, item.id))
+              .run();
+          }
+
+          const updatedSections = filterUpdatedItems(input.sections, dbBoard.sections);
+
+          for (const section of updatedSections) {
+            const prev = dbBoard.sections.find((dbSection) => dbSection.id === section.id);
+            transaction
+              .update(sections)
+              .set({
+                yOffset: section.yOffset,
+                xOffset: section.xOffset,
+                height: prev?.kind === "dynamic" && "height" in section ? section.height : null,
+                width: prev?.kind === "dynamic" && "width" in section ? section.width : null,
+                parentSectionId:
+                  prev?.kind === "dynamic" && "parentSectionId" in section ? section.parentSectionId : null,
+                name: prev?.kind === "category" && "name" in section ? section.name : null,
+              })
+              .where(eq(sections.id, section.id))
+              .run();
+          }
+
+          const removedIntegrationRelations = dbIntegrationRelations.filter(
+            (dbRelation) =>
+              !inputIntegrationRelations.some(
+                (inputRelation) =>
+                  dbRelation.itemId === inputRelation.itemId &&
+                  dbRelation.integrationId === inputRelation.integrationId,
+              ),
+          );
+
+          for (const relation of removedIntegrationRelations) {
+            transaction
+              .delete(integrationItems)
+              .where(
+                and(
+                  eq(integrationItems.itemId, relation.itemId),
+                  eq(integrationItems.integrationId, relation.integrationId),
+                ),
+              )
+              .run();
+          }
+
+          const removedItems = filterRemovedItems(inputItems, dbItems);
+
+          const itemIds = removedItems.map((item) => item.id);
+          if (itemIds.length > 0) {
+            transaction.delete(items).where(inArray(items.id, itemIds)).run();
+          }
+
+          const removedSections = filterRemovedItems(input.sections, dbBoard.sections);
+          const sectionIds = removedSections.map((section) => section.id);
+
+          if (sectionIds.length > 0) {
+            transaction.delete(sections).where(inArray(sections.id, sectionIds)).run();
+          }
+        });
+      },
     });
   }),
 
@@ -655,18 +876,42 @@ export const boardRouter = createTRPCRouter({
     .mutation(async ({ input, ctx }) => {
       await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.entityId), "full");
 
-      await ctx.db.transaction(async (transaction) => {
-        await transaction.delete(boardUserPermissions).where(eq(boardUserPermissions.boardId, input.entityId));
-        if (input.permissions.length === 0) {
-          return;
-        }
-        await transaction.insert(boardUserPermissions).values(
-          input.permissions.map((permission) => ({
-            userId: permission.principalId,
-            permission: permission.permission,
-            boardId: input.entityId,
-          })),
-        );
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            await transaction
+              .delete(schema.boardUserPermissions)
+              .where(eq(boardUserPermissions.boardId, input.entityId));
+            if (input.permissions.length === 0) {
+              return;
+            }
+            await transaction.insert(schema.boardUserPermissions).values(
+              input.permissions.map((permission) => ({
+                userId: permission.principalId,
+                permission: permission.permission,
+                boardId: input.entityId,
+              })),
+            );
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction.delete(boardUserPermissions).where(eq(boardUserPermissions.boardId, input.entityId)).run();
+            if (input.permissions.length === 0) {
+              return;
+            }
+            transaction
+              .insert(boardUserPermissions)
+              .values(
+                input.permissions.map((permission) => ({
+                  userId: permission.principalId,
+                  permission: permission.permission,
+                  boardId: input.entityId,
+                })),
+              )
+              .run();
+          });
+        },
       });
     }),
   saveGroupBoardPermissions: protectedProcedure
@@ -674,18 +919,42 @@ export const boardRouter = createTRPCRouter({
     .mutation(async ({ input, ctx }) => {
       await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.entityId), "full");
 
-      await ctx.db.transaction(async (transaction) => {
-        await transaction.delete(boardGroupPermissions).where(eq(boardGroupPermissions.boardId, input.entityId));
-        if (input.permissions.length === 0) {
-          return;
-        }
-        await transaction.insert(boardGroupPermissions).values(
-          input.permissions.map((permission) => ({
-            groupId: permission.principalId,
-            permission: permission.permission,
-            boardId: input.entityId,
-          })),
-        );
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            await transaction
+              .delete(schema.boardGroupPermissions)
+              .where(eq(boardGroupPermissions.boardId, input.entityId));
+            if (input.permissions.length === 0) {
+              return;
+            }
+            await transaction.insert(schema.boardGroupPermissions).values(
+              input.permissions.map((permission) => ({
+                groupId: permission.principalId,
+                permission: permission.permission,
+                boardId: input.entityId,
+              })),
+            );
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction.delete(boardGroupPermissions).where(eq(boardGroupPermissions.boardId, input.entityId)).run();
+            if (input.permissions.length === 0) {
+              return;
+            }
+            transaction
+              .insert(boardGroupPermissions)
+              .values(
+                input.permissions.map((permission) => ({
+                  groupId: permission.principalId,
+                  permission: permission.permission,
+                  boardId: input.entityId,
+                })),
+              )
+              .run();
+          });
+        },
       });
     }),
   importOldmarrConfig: permissionRequiredProcedure
@@ -757,6 +1026,9 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
       },
       sections: {
         with: {
+          collapseStates: {
+            where: eq(sectionCollapseStates.userId, userId ?? ""),
+          },
           items: {
             with: {
               integrations: {
@@ -791,9 +1063,10 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
 
   return {
     ...otherBoardProperties,
-    sections: sections.map((section) =>
+    sections: sections.map(({ collapseStates, ...section }) =>
       parseSection({
         ...section,
+        collapsed: collapseStates.at(0)?.collapsed ?? false,
         items: section.items.map(({ integrations: itemIntegrations, ...item }) => ({
           ...item,
           integrationIds: itemIntegrations.map((item) => item.integration.id),

packages/api/src/router/certificates/certificate-router.ts

@@ -0,0 +1,27 @@
+import { z } from "zod";
+import { zfd } from "zod-form-data";
+
+import { addCustomRootCertificateAsync, removeCustomRootCertificateAsync } from "@homarr/certificates/server";
+import { superRefineCertificateFile, validation } from "@homarr/validation";
+
+import { createTRPCRouter, permissionRequiredProcedure } from "../../trpc";
+
+export const certificateRouter = createTRPCRouter({
+  addCertificate: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(
+      zfd.formData({
+        file: zfd.file().superRefine(superRefineCertificateFile),
+      }),
+    )
+    .mutation(async ({ input }) => {
+      const content = await input.file.text();
+      await addCustomRootCertificateAsync(input.file.name, content);
+    }),
+  removeCertificate: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ fileName: validation.certificates.validFileNameSchema }))
+    .mutation(async ({ input }) => {
+      await removeCustomRootCertificateAsync(input.fileName);
+    }),
+});

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

@@ -1,26 +1,24 @@
 import { TRPCError } from "@trpc/server";
-import type Docker from "dockerode";
-import type { Container } from "dockerode";
+import { z } from "zod";
 
 import { db, like, or } from "@homarr/db";
 import { icons } from "@homarr/db/schema";
-import type { DockerContainerState } from "@homarr/definitions";
+import { DockerSingleton } from "@homarr/docker";
+import type { Container, ContainerInfo, ContainerState, Docker, Port } from "@homarr/docker";
 import { logger } from "@homarr/log";
 import { createCacheChannel } from "@homarr/redis";
-import { z } from "@homarr/validation";
 
 import { createTRPCRouter, permissionRequiredProcedure } from "../../trpc";
-import { DockerSingleton } from "./docker-singleton";
 
 const dockerCache = createCacheChannel<{
-  containers: (Docker.ContainerInfo & { instance: string; iconUrl: string | null })[];
+  containers: (ContainerInfo & { instance: string; iconUrl: string | null })[];
 }>("docker-containers", 5 * 60 * 1000);
 
 export const dockerRouter = createTRPCRouter({
   getContainers: permissionRequiredProcedure.requiresPermission("admin").query(async () => {
     const result = await dockerCache
       .consumeAsync(async () => {
-        const dockerInstances = DockerSingleton.getInstance();
+        const dockerInstances = DockerSingleton.getInstances();
         const containers = await Promise.all(
           // Return all the containers of all the instances into only one item
           dockerInstances.map(({ instance, host: key }) =>
@@ -33,8 +31,7 @@ export const dockerRouter = createTRPCRouter({
           ),
         ).then((containers) => containers.flat());
 
-        const extractImage = (container: Docker.ContainerInfo) =>
-          container.Image.split("/").at(-1)?.split(":").at(0) ?? "";
+        const extractImage = (container: ContainerInfo) => container.Image.split("/").at(-1)?.split(":").at(0) ?? "";
         const likeQueries = containers.map((container) => like(icons.name, `%${extractImage(container)}%`));
         const dbIcons =
           likeQueries.length >= 1
@@ -151,7 +148,7 @@ const getContainerOrDefaultAsync = async (instance: Docker, id: string) => {
 };
 
 const getContainerOrThrowAsync = async (id: string) => {
-  const dockerInstances = DockerSingleton.getInstance();
+  const dockerInstances = DockerSingleton.getInstances();
   const containers = await Promise.all(dockerInstances.map(({ instance }) => getContainerOrDefaultAsync(instance, id)));
   const foundContainer = containers.find((container) => container) ?? null;
 
@@ -168,21 +165,21 @@ const getContainerOrThrowAsync = async (id: string) => {
 interface DockerContainer {
   name: string;
   id: string;
-  state: DockerContainerState;
+  state: ContainerState;
   image: string;
-  ports: Docker.Port[];
+  ports: Port[];
   iconUrl: string | null;
 }
 
 function sanitizeContainers(
-  containers: (Docker.ContainerInfo & { instance: string; iconUrl: string | null })[],
+  containers: (ContainerInfo & { instance: string; iconUrl: string | null })[],
 ): DockerContainer[] {
   return containers.map((container) => {
     return {
       name: container.Names[0]?.split("/")[1] ?? "Unknown",
       id: container.Id,
       instance: container.instance,
-      state: container.State as DockerContainerState,
+      state: container.State as ContainerState,
       image: container.Image,
       ports: container.Ports,
       iconUrl: container.iconUrl,

packages/api/src/router/docker/docker-singleton.ts

@@ -1,51 +0,0 @@
-import Docker from "dockerode";
-
-interface DockerInstance {
-  host: string;
-  instance: Docker;
-}
-
-export class DockerSingleton {
-  private static instances: DockerInstance[];
-
-  private createInstances() {
-    const instances: DockerInstance[] = [];
-    const hostVariable = process.env.DOCKER_HOST;
-    const portVariable = process.env.DOCKER_PORT;
-    if (hostVariable === undefined || portVariable === undefined) {
-      instances.push({ host: "socket", instance: new Docker() });
-      return instances;
-    }
-    const hosts = hostVariable.split(",");
-    const ports = portVariable.split(",");
-
-    if (hosts.length !== ports.length) {
-      throw new Error("The number of hosts and ports must match");
-    }
-
-    hosts.forEach((host, i) => {
-      instances.push({
-        host: `${host}:${ports[i]}`,
-        instance: new Docker({
-          host,
-          port: parseInt(ports[i] ?? "", 10),
-        }),
-      });
-      return instances;
-    });
-    return instances;
-  }
-
-  public static findInstance(key: string): DockerInstance | undefined {
-    return this.instances.find((instance) => instance.host === key);
-  }
-
-  public static getInstance(): DockerInstance[] {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (!DockerSingleton.instances) {
-      DockerSingleton.instances = new DockerSingleton().createInstances();
-    }
-
-    return this.instances;
-  }
-}

packages/api/src/router/group.ts

@@ -1,10 +1,11 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import type { Database } from "@homarr/db";
 import { and, createId, eq, like, not, sql } from "@homarr/db";
 import { groupMembers, groupPermissions, groups } from "@homarr/db/schema";
 import { everyoneGroup } from "@homarr/definitions";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 import { createTRPCRouter, onboardingProcedure, permissionRequiredProcedure, protectedProcedure } from "../trpc";
 import { throwIfCredentialsDisabled } from "./invite/checks";

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

@@ -1,10 +1,11 @@
+import { z } from "zod";
+
 import { analyseOldmarrImportForRouterAsync, analyseOldmarrImportInputSchema } from "@homarr/old-import/analyse";
 import {
   ensureValidTokenOrThrow,
   importInitialOldmarrAsync,
   importInitialOldmarrInputSchema,
 } from "@homarr/old-import/import";
-import { z } from "@homarr/validation";
 
 import { createTRPCRouter, onboardingProcedure } from "../../trpc";
 import { nextOnboardingStepAsync } from "../onboard/onboard-queries";

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

@@ -1,9 +1,10 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import { objectEntries } from "@homarr/common";
 import { decryptSecret, encryptSecret } from "@homarr/common/server";
 import type { Database } from "@homarr/db";
-import { and, asc, createId, eq, inArray, like } from "@homarr/db";
+import { and, asc, createId, eq, handleTransactionsAsync, inArray, like } from "@homarr/db";
 import {
   groupMembers,
   groupPermissions,
@@ -23,7 +24,7 @@ import {
   integrationSecretKindObject,
 } from "@homarr/definitions";
 import { integrationCreator } from "@homarr/integrations";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../../trpc";
@@ -130,6 +131,16 @@ export const integrationRouter = createTRPCRouter({
         limit: input.limit,
       });
     }),
+  // This is used to get the integrations by their ids it's public because it's needed to get integrations data in the boards
+  byIds: publicProcedure.input(z.array(z.string())).query(async ({ ctx, input }) => {
+    return await ctx.db.query.integrations.findMany({
+      where: inArray(integrations.id, input),
+      columns: {
+        id: true,
+        kind: true,
+      },
+    });
+  }),
   byId: protectedProcedure.input(validation.integration.byId).query(async ({ ctx, input }) => {
     await throwIfActionForbiddenAsync(ctx, eq(integrations.id, input.id), "full");
     const integration = await ctx.db.query.integrations.findFirst({
@@ -195,7 +206,10 @@ export const integrationRouter = createTRPCRouter({
         );
       }
 
-      if (input.attemptSearchEngineCreation) {
+      if (
+        input.attemptSearchEngineCreation &&
+        integrationDefs[input.kind].category.flatMap((category) => category).includes("search")
+      ) {
         const icon = getIconUrl(input.kind);
         await ctx.db.insert(searchEngines).values({
           id: createId(),
@@ -360,20 +374,45 @@ export const integrationRouter = createTRPCRouter({
     .mutation(async ({ input, ctx }) => {
       await throwIfActionForbiddenAsync(ctx, eq(integrations.id, input.entityId), "full");
 
-      await ctx.db.transaction(async (transaction) => {
-        await transaction
-          .delete(integrationUserPermissions)
-          .where(eq(integrationUserPermissions.integrationId, input.entityId));
-        if (input.permissions.length === 0) {
-          return;
-        }
-        await transaction.insert(integrationUserPermissions).values(
-          input.permissions.map((permission) => ({
-            userId: permission.principalId,
-            permission: permission.permission,
-            integrationId: input.entityId,
-          })),
-        );
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await ctx.db.transaction(async (transaction) => {
+            await transaction
+              .delete(schema.integrationUserPermissions)
+              .where(eq(schema.integrationUserPermissions.integrationId, input.entityId));
+            if (input.permissions.length === 0) {
+              return;
+            }
+            await transaction.insert(schema.integrationUserPermissions).values(
+              input.permissions.map((permission) => ({
+                userId: permission.principalId,
+                permission: permission.permission,
+                integrationId: input.entityId,
+              })),
+            );
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction
+              .delete(integrationUserPermissions)
+              .where(eq(integrationUserPermissions.integrationId, input.entityId))
+              .run();
+            if (input.permissions.length === 0) {
+              return;
+            }
+            transaction
+              .insert(integrationUserPermissions)
+              .values(
+                input.permissions.map((permission) => ({
+                  userId: permission.principalId,
+                  permission: permission.permission,
+                  integrationId: input.entityId,
+                })),
+              )
+              .run();
+          });
+        },
       });
     }),
   saveGroupIntegrationPermissions: protectedProcedure
@@ -381,20 +420,45 @@ export const integrationRouter = createTRPCRouter({
     .mutation(async ({ input, ctx }) => {
       await throwIfActionForbiddenAsync(ctx, eq(integrations.id, input.entityId), "full");
 
-      await ctx.db.transaction(async (transaction) => {
-        await transaction
-          .delete(integrationGroupPermissions)
-          .where(eq(integrationGroupPermissions.integrationId, input.entityId));
-        if (input.permissions.length === 0) {
-          return;
-        }
-        await transaction.insert(integrationGroupPermissions).values(
-          input.permissions.map((permission) => ({
-            groupId: permission.principalId,
-            permission: permission.permission,
-            integrationId: input.entityId,
-          })),
-        );
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            await transaction
+              .delete(schema.integrationGroupPermissions)
+              .where(eq(schema.integrationGroupPermissions.integrationId, input.entityId));
+            if (input.permissions.length === 0) {
+              return;
+            }
+            await transaction.insert(schema.integrationGroupPermissions).values(
+              input.permissions.map((permission) => ({
+                groupId: permission.principalId,
+                permission: permission.permission,
+                integrationId: input.entityId,
+              })),
+            );
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction
+              .delete(integrationGroupPermissions)
+              .where(eq(integrationGroupPermissions.integrationId, input.entityId))
+              .run();
+            if (input.permissions.length === 0) {
+              return;
+            }
+            transaction
+              .insert(integrationGroupPermissions)
+              .values(
+                input.permissions.map((permission) => ({
+                  groupId: permission.principalId,
+                  permission: permission.permission,
+                  integrationId: input.entityId,
+                })),
+              )
+              .run();
+          });
+        },
       });
     }),
   searchInIntegration: protectedProcedure

packages/api/src/router/integration/integration-test-connection.ts

@@ -1,8 +1,11 @@
+import { formatError } from "pretty-print-error";
+
 import { decryptSecret } from "@homarr/common/server";
 import type { Integration } from "@homarr/db/schema";
 import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
 import { getAllSecretKindOptions } from "@homarr/definitions";
 import { integrationCreator, IntegrationTestConnectionError } from "@homarr/integrations";
+import { logger } from "@homarr/log";
 
 type FormIntegration = Integration & {
   secrets: {
@@ -28,11 +31,22 @@ export const testConnectionAsync = async (
       source: "form" as const,
     }));
 
-  const decryptedDbSecrets = dbSecrets.map((secret) => ({
-    ...secret,
-    value: decryptSecret(secret.value),
-    source: "db" as const,
-  }));
+  const decryptedDbSecrets = dbSecrets
+    .map((secret) => {
+      try {
+        return {
+          ...secret,
+          value: decryptSecret(secret.value),
+          source: "db" as const,
+        };
+      } catch (error) {
+        logger.warn(
+          `Failed to decrypt secret from database integration="${integration.name}" secretKind="${secret.kind}"\n${formatError(error)}`,
+        );
+        return null;
+      }
+    })
+    .filter((secret) => secret !== null);
 
   const sourcedSecrets = [...formSecrets, ...decryptedDbSecrets];
   const secretKinds = getSecretKindOption(integration.kind, sourcedSecrets);

packages/api/src/router/invite.ts

@@ -1,10 +1,10 @@
 import { randomBytes } from "crypto";
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import { asc, createId, eq } from "@homarr/db";
 import { invites } from "@homarr/db/schema";
 import { selectInviteSchema } from "@homarr/db/validationSchemas";
-import { z } from "@homarr/validation";
 
 import { createTRPCRouter, permissionRequiredProcedure } from "../trpc";
 import { throwIfCredentialsDisabled } from "./invite/checks";

packages/api/src/router/location.ts

@@ -1,5 +1,6 @@
+import type { z } from "zod";
+
 import { fetchWithTimeout } from "@homarr/common";
-import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 import { createTRPCRouter, publicProcedure } from "../trpc";

packages/api/src/router/medias/media-router.ts

@@ -1,10 +1,11 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import type { InferInsertModel } from "@homarr/db";
 import { and, createId, desc, eq, like } from "@homarr/db";
 import { iconRepositories, icons, medias } from "@homarr/db/schema";
 import { createLocalImageUrl, LOCAL_ICON_REPOSITORY_SLUG, mapMediaToIcon } from "@homarr/icons/local";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure } from "../../trpc";
 

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

@@ -1,6 +1,8 @@
+import { z } from "zod";
+
 import { onboarding } from "@homarr/db/schema";
 import { onboardingSteps } from "@homarr/definitions";
-import { z, zodEnumFromArray } from "@homarr/validation";
+import { zodEnumFromArray } from "@homarr/validation";
 
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 import { getOnboardingOrFallbackAsync, nextOnboardingStepAsync } from "./onboard-queries";

packages/api/src/router/search-engine/search-engine-router.ts

@@ -1,10 +1,11 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import { asc, createId, eq, like, sql } from "@homarr/db";
 import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import { searchEngines, users } from "@homarr/db/schema";
 import { integrationCreator } from "@homarr/integrations";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../../trpc";

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

@@ -0,0 +1,52 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+
+import { and, eq } from "@homarr/db";
+import { sectionCollapseStates, sections } from "@homarr/db/schema";
+
+import { createTRPCRouter, protectedProcedure } from "../../trpc";
+
+export const sectionRouter = createTRPCRouter({
+  changeCollapsed: protectedProcedure
+    .input(
+      z.object({
+        sectionId: z.string(),
+        collapsed: z.boolean(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const section = await ctx.db.query.sections.findFirst({
+        where: and(eq(sections.id, input.sectionId), eq(sections.kind, "category")),
+        with: {
+          collapseStates: {
+            where: eq(sectionCollapseStates.userId, ctx.session.user.id),
+          },
+        },
+      });
+
+      if (!section) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: `Section not found id=${input.sectionId}`,
+        });
+      }
+
+      if (section.collapseStates.length === 0) {
+        await ctx.db.insert(sectionCollapseStates).values({
+          sectionId: section.id,
+          userId: ctx.session.user.id,
+          collapsed: input.collapsed,
+        });
+        return;
+      }
+
+      await ctx.db
+        .update(sectionCollapseStates)
+        .set({
+          collapsed: input.collapsed,
+        })
+        .where(
+          and(eq(sectionCollapseStates.sectionId, section.id), eq(sectionCollapseStates.userId, ctx.session.user.id)),
+        );
+    }),
+});

packages/api/src/router/serverSettings.ts

@@ -1,7 +1,9 @@
+import { z } from "zod";
+
 import { getServerSettingByKeyAsync, getServerSettingsAsync, updateServerSettingByKeyAsync } from "@homarr/db/queries";
 import type { ServerSettings } from "@homarr/server-settings";
 import { defaultServerSettingsKeys } from "@homarr/server-settings";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 import { createTRPCRouter, onboardingProcedure, permissionRequiredProcedure, publicProcedure } from "../trpc";
 import { nextOnboardingStepAsync } from "./onboard/onboard-queries";

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

@@ -812,7 +812,7 @@ describe("saveBoard should save full board", () => {
     expect(integration).toBeUndefined();
     expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "modify");
   });
-  it.each([[{ kind: "empty" as const }], [{ kind: "category" as const, name: "My first category" }]])(
+  it.each([[{ kind: "empty" as const }], [{ kind: "category" as const, collapsed: false, name: "My first category" }]])(
     "should add section when present in input",
     async (partialSection) => {
       const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
@@ -1023,6 +1023,7 @@ describe("saveBoard should save full board", () => {
           yOffset: 1,
           xOffset: 0,
           name: "Test",
+          collapsed: true,
           items: [],
         },
         {
@@ -1031,6 +1032,7 @@ describe("saveBoard should save full board", () => {
           name: "After",
           yOffset: 0,
           xOffset: 0,
+          collapsed: false,
           items: [],
         },
       ],

packages/api/src/router/user.ts

@@ -1,4 +1,5 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import { createSaltAsync, hashPasswordAsync } from "@homarr/auth";
 import type { Database } from "@homarr/db";
@@ -8,7 +9,7 @@ import { selectUserSchema } from "@homarr/db/validationSchemas";
 import { credentialsAdminGroup } from "@homarr/definitions";
 import type { SupportedAuthProvider } from "@homarr/definitions";
 import { logger } from "@homarr/log";
-import { validation, z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 import { convertIntersectionToZodObject } from "../schema-merger";
 import {
@@ -21,6 +22,7 @@ import {
 import { throwIfActionForbiddenAsync } from "./board/board-access";
 import { throwIfCredentialsDisabled } from "./invite/checks";
 import { nextOnboardingStepAsync } from "./onboard/onboard-queries";
+import { changeSearchPreferencesAsync, changeSearchPreferencesInputSchema } from "./user/change-search-preferences";
 
 export const userRouter = createTRPCRouter({
   initUser: onboardingProcedure
@@ -214,6 +216,7 @@ export const userRouter = createTRPCRouter({
         firstDayOfWeek: true,
         pingIconsEnabled: true,
         defaultSearchEngineId: true,
+        openSearchInNewTab: true,
       }),
     )
     .meta({ openapi: { method: "GET", path: "/api/users/{userId}", tags: ["users"], protect: true } })
@@ -238,6 +241,7 @@ export const userRouter = createTRPCRouter({
           firstDayOfWeek: true,
           pingIconsEnabled: true,
           defaultSearchEngineId: true,
+          openSearchInNewTab: true,
         },
         where: eq(users.id, input.userId),
       });
@@ -404,7 +408,13 @@ export const userRouter = createTRPCRouter({
         });
       }
 
-      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.userId), "view");
+      // Only allow user to select boards they have access to
+      if (input.homeBoardId) {
+        await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.homeBoardId), "view");
+      }
+      if (input.mobileHomeBoardId) {
+        await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.mobileHomeBoardId), "view");
+      }
 
       await ctx.db
         .update(users)
@@ -416,40 +426,32 @@ export const userRouter = createTRPCRouter({
     }),
   changeDefaultSearchEngine: protectedProcedure
     .input(
-      convertIntersectionToZodObject(validation.user.changeDefaultSearchEngine.and(z.object({ userId: z.string() }))),
+      convertIntersectionToZodObject(
+        validation.user.changeSearchPreferences.omit({ openInNewTab: true }).and(z.object({ userId: z.string() })),
+      ),
     )
     .output(z.void())
-    .meta({ openapi: { method: "PATCH", path: "/api/users/changeSearchEngine", tags: ["users"], protect: true } })
+    .meta({
+      openapi: {
+        method: "PATCH",
+        path: "/api/users/changeSearchEngine",
+        tags: ["users"],
+        protect: true,
+        deprecated: true,
+      },
+    })
     .mutation(async ({ input, ctx }) => {
-      const user = ctx.session.user;
-      // Only admins can change other users passwords
-      if (!user.permissions.includes("admin") && user.id !== input.userId) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "User not found",
-        });
-      }
-
-      const dbUser = await ctx.db.query.users.findFirst({
-        columns: {
-          id: true,
-        },
-        where: eq(users.id, input.userId),
+      await changeSearchPreferencesAsync(ctx.db, ctx.session, {
+        ...input,
+        openInNewTab: undefined,
       });
-
-      if (!dbUser) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "User not found",
-        });
-      }
-
-      await ctx.db
-        .update(users)
-        .set({
-          defaultSearchEngineId: input.defaultSearchEngineId,
-        })
-        .where(eq(users.id, input.userId));
+    }),
+  changeSearchPreferences: protectedProcedure
+    .input(convertIntersectionToZodObject(changeSearchPreferencesInputSchema))
+    .output(z.void())
+    .meta({ openapi: { method: "PATCH", path: "/api/users/search-preferences", tags: ["users"], protect: true } })
+    .mutation(async ({ input, ctx }) => {
+      await changeSearchPreferencesAsync(ctx.db, ctx.session, input);
     }),
   changeColorScheme: protectedProcedure
     .input(validation.user.changeColorScheme)
@@ -463,21 +465,6 @@ export const userRouter = createTRPCRouter({
         })
         .where(eq(users.id, ctx.session.user.id));
     }),
-  getPingIconsEnabledOrDefault: publicProcedure.query(async ({ ctx }) => {
-    if (!ctx.session?.user) {
-      return false;
-    }
-
-    const user = await ctx.db.query.users.findFirst({
-      columns: {
-        id: true,
-        pingIconsEnabled: true,
-      },
-      where: eq(users.id, ctx.session.user.id),
-    });
-
-    return user?.pingIconsEnabled ?? false;
-  }),
   changePingIconsEnabled: protectedProcedure
     .input(validation.user.pingIconsEnabled.and(validation.common.byId))
     .mutation(async ({ input, ctx }) => {
@@ -496,21 +483,6 @@ export const userRouter = createTRPCRouter({
         })
         .where(eq(users.id, ctx.session.user.id));
     }),
-  getFirstDayOfWeekForUserOrDefault: publicProcedure.input(z.undefined()).query(async ({ ctx }) => {
-    if (!ctx.session?.user) {
-      return 1 as const;
-    }
-
-    const user = await ctx.db.query.users.findFirst({
-      columns: {
-        id: true,
-        firstDayOfWeek: true,
-      },
-      where: eq(users.id, ctx.session.user.id),
-    });
-
-    return user?.firstDayOfWeek ?? (1 as const);
-  }),
   changeFirstDayOfWeek: protectedProcedure
     .input(convertIntersectionToZodObject(validation.user.firstDayOfWeek.and(validation.common.byId)))
     .output(z.void())

packages/api/src/router/user/change-search-preferences.ts

@@ -0,0 +1,50 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+
+import type { Session } from "@homarr/auth";
+import type { Modify } from "@homarr/common/types";
+import { eq } from "@homarr/db";
+import type { Database } from "@homarr/db";
+import { users } from "@homarr/db/schema";
+import { validation } from "@homarr/validation";
+
+export const changeSearchPreferencesInputSchema = validation.user.changeSearchPreferences.and(
+  z.object({ userId: z.string() }),
+);
+
+export const changeSearchPreferencesAsync = async (
+  db: Database,
+  session: Session,
+  input: Modify<z.infer<typeof changeSearchPreferencesInputSchema>, { openInNewTab: boolean | undefined }>,
+) => {
+  const user = session.user;
+  // Only admins can change other users passwords
+  if (!user.permissions.includes("admin") && user.id !== input.userId) {
+    throw new TRPCError({
+      code: "NOT_FOUND",
+      message: "User not found",
+    });
+  }
+
+  const dbUser = await db.query.users.findFirst({
+    columns: {
+      id: true,
+    },
+    where: eq(users.id, input.userId),
+  });
+
+  if (!dbUser) {
+    throw new TRPCError({
+      code: "NOT_FOUND",
+      message: "User not found",
+    });
+  }
+
+  await db
+    .update(users)
+    .set({
+      defaultSearchEngineId: input.defaultSearchEngineId,
+      openSearchInNewTab: input.openInNewTab,
+    })
+    .where(eq(users.id, input.userId));
+};

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

@@ -1,8 +1,8 @@
 import { observable } from "@trpc/server/observable";
+import { z } from "zod";
 
 import { sendPingRequestAsync } from "@homarr/ping";
 import { pingChannel, pingUrlChannel } from "@homarr/redis";
-import { z } from "@homarr/validation";
 
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 

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

@@ -1,7 +1,8 @@
+import { z } from "zod";
+
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { radarrReleaseTypes } from "@homarr/integrations/types";
 import { calendarMonthRequestHandler } from "@homarr/request-handler/calendar";
-import { z } from "@homarr/validation";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";