feat: Unify scaling and apply to clock widget

* fix: foreign key reference default search engine

* fix: add sqlite migration to fix on delete action

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

.env.example

@@ -32,7 +32,4 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
 # If it is used, please use the full path to the directory where the certificates are stored.
 # LOCAL_CERTIFICATE_PATH='FULL_PATH_TO_CERTIFICATES'
 
-TURBO_TELEMETRY_DISABLED=1
-
-# 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,13 @@ body:
       label: Version
       description: What version of Homarr are you running?
       options:
+        - 1.4.0
+        - 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 +82,4 @@ body:
         - Other (describe in "additional information")
       default: 0
     validations:
-      required: false
+      required: false

.nvmrc

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

CHANGELOG.md

@@ -1,3 +1,116 @@
+## [1.4.0](https://github.com/homarr-labs/homarr/compare/v1.3.1...v1.4.0) (2025-01-31)
+
+### Features
+
+* weather widget - add wind speed, option to disable decimals for temperature & redesign dropdown forecast ([#2099](https://github.com/homarr-labs/homarr/issues/2099)) ([c19a400](https://github.com/homarr-labs/homarr/commit/c19a4009f37ec2aba8d4edd2d19819605ecb9575))
+
+### Bug Fixes
+
+* board crashes with empty string favicon ([#2192](https://github.com/homarr-labs/homarr/issues/2192)) ([bd0b7c9](https://github.com/homarr-labs/homarr/commit/bd0b7c9518af88e0a329ea6286cb5ef97098782a))
+* **deps:** update dependency drizzle-kit to ^0.30.4 ([#2183](https://github.com/homarr-labs/homarr/issues/2183)) ([37ccfab](https://github.com/homarr-labs/homarr/commit/37ccfab89a7843c65d6f354bef2b0537b20ea757))
+* **deps:** update dependency drizzle-orm to ^0.39.1 ([#2186](https://github.com/homarr-labs/homarr/issues/2186)) ([4c72a34](https://github.com/homarr-labs/homarr/commit/4c72a34daf06c5e00fc4ece6d990148c1cd6d87f))
+* **deps:** update dependency jotai to ^2.11.2 ([#2201](https://github.com/homarr-labs/homarr/issues/2201)) ([c287e99](https://github.com/homarr-labs/homarr/commit/c287e9965f008b6ac6f3bac56057b94c412a3779))
+* **deps:** update tanstack-query monorepo to ^5.66.0 ([#2202](https://github.com/homarr-labs/homarr/issues/2202)) ([e44c3a7](https://github.com/homarr-labs/homarr/commit/e44c3a7bc8be5b67d78096d5daa53ad23ccdea5d))
+* **deps:** update tiptap monorepo to v2.11.4 ([#2195](https://github.com/homarr-labs/homarr/issues/2195)) ([c05c518](https://github.com/homarr-labs/homarr/commit/c05c51856baff5222b0abda56e1c11d9bc9bd6f9))
+* **deps:** update tiptap monorepo to v2.11.5 ([#2203](https://github.com/homarr-labs/homarr/issues/2203)) ([9662e1a](https://github.com/homarr-labs/homarr/commit/9662e1abba3e105fd549d25ee0a0efc48cf293a1))
+* **docker:** missing production env variable ([#2188](https://github.com/homarr-labs/homarr/issues/2188)) ([7774627](https://github.com/homarr-labs/homarr/commit/77746278a36f2b9d39c780eada25195121cc0803))
+* negative curve radius system health ([#2197](https://github.com/homarr-labs/homarr/issues/2197)) ([c75d4f0](https://github.com/homarr-labs/homarr/commit/c75d4f0f58136a0499a51494eb54c78c745f0b3f))
+* respect certificates for app ping ([#2198](https://github.com/homarr-labs/homarr/issues/2198)) ([d4154d2](https://github.com/homarr-labs/homarr/commit/d4154d259fa50bfd754e7ea98b872df78864e014))
+* use hostname for suspense query url ([#2187](https://github.com/homarr-labs/homarr/issues/2187)) ([96fd5cc](https://github.com/homarr-labs/homarr/commit/96fd5cc35e9ca85aba48670860e6bf2a4a2caaa9))
+
+## [1.3.1](https://github.com/homarr-labs/homarr/compare/v1.3.0...v1.3.1) (2025-01-28)
+
+### Bug Fixes
+
+* app url line clamp ([#2170](https://github.com/homarr-labs/homarr/issues/2170)) ([780efab](https://github.com/homarr-labs/homarr/commit/780efab80cdc5446a6468d60afe2c1d9ecca0f1e))
+* automatic search engine creation ([#2172](https://github.com/homarr-labs/homarr/issues/2172)) ([8dd7fe2](https://github.com/homarr-labs/homarr/commit/8dd7fe297c431bbe448bc47b381370ade7c4d3d9))
+* **deps:** update dependency swagger-ui-react to ^5.18.3 ([#2164](https://github.com/homarr-labs/homarr/issues/2164)) ([a4e9abc](https://github.com/homarr-labs/homarr/commit/a4e9abcda192a96754078eece4343c2c1c9fa032))
+* **deps:** update dependency typescript-eslint to ^8.22.0 ([#2149](https://github.com/homarr-labs/homarr/issues/2149)) ([9d4aea2](https://github.com/homarr-labs/homarr/commit/9d4aea2c4187ddda6a0484d0f6a0403c04961dde))
+* **deps:** update tanstack-query monorepo to ^5.65.1 ([#2161](https://github.com/homarr-labs/homarr/issues/2161)) ([55b1afb](https://github.com/homarr-labs/homarr/commit/55b1afbb2167ccb6f5115cbb1291dfe561a5aa05))
+
+## [1.3.0](https://github.com/homarr-labs/homarr/compare/v1.2.0...v1.3.0) (2025-01-27)
+
+### Features
+
+* add opacity for categories ([#2132](https://github.com/homarr-labs/homarr/issues/2132)) ([1146c59](https://github.com/homarr-labs/homarr/commit/1146c59a41ddd4b4cda14f6601437cd9bceb305a))
+* **category:** save collapse state for signed in users ([#2134](https://github.com/homarr-labs/homarr/issues/2134)) ([7cb0aa7](https://github.com/homarr-labs/homarr/commit/7cb0aa70f11253aa4016d928f326eb71183626f6))
+* log body integration test failure ([#2151](https://github.com/homarr-labs/homarr/issues/2151)) ([5c8d7fc](https://github.com/homarr-labs/homarr/commit/5c8d7fcc153ba4b94cd88c6ca8b22962d812b2b4))
+* **user:** add search in new tab preference ([#2125](https://github.com/homarr-labs/homarr/issues/2125)) ([92f70f5](https://github.com/homarr-labs/homarr/commit/92f70f5a03048c7b269604f1ce33313ecf23a64b))
+
+### Bug Fixes
+
+* app url not required ([#2130](https://github.com/homarr-labs/homarr/issues/2130)) ([b38de29](https://github.com/homarr-labs/homarr/commit/b38de29a882ce26a9326f7f65403ea3916a58cac))
+* bookmarks show unauthorized when not logged in ([#2123](https://github.com/homarr-labs/homarr/issues/2123)) ([2bb44e1](https://github.com/homarr-labs/homarr/commit/2bb44e16669f94d3d7500e828b1ab66b98c54bc7))
+* **deps:** update dependency @t3-oss/env-nextjs to ^0.12.0 ([#2117](https://github.com/homarr-labs/homarr/issues/2117)) ([963d774](https://github.com/homarr-labs/homarr/commit/963d77463a5206ac1cb5d035b52271c6bbbd5e73))
+* **deps:** update dependency drizzle-kit to ^0.30.3 ([#2142](https://github.com/homarr-labs/homarr/issues/2142)) ([0d54873](https://github.com/homarr-labs/homarr/commit/0d5487366c2616738b2542838f5cbd9c6d628973))
+* **deps:** update dependency drizzle-orm to ^0.39.0 ([#2144](https://github.com/homarr-labs/homarr/issues/2144)) ([f0daef2](https://github.com/homarr-labs/homarr/commit/f0daef237c08c866f1f2aaefc113e70838b76be4))
+* **deps:** update dependency drizzle-zod to ^0.7.0 ([#2143](https://github.com/homarr-labs/homarr/issues/2143)) ([af67bf2](https://github.com/homarr-labs/homarr/commit/af67bf26d674539abd7a0fdc54d7764d90f7007c))
+* **deps:** update mantine monorepo to ^7.16.2 ([#2129](https://github.com/homarr-labs/homarr/issues/2129)) ([bbac412](https://github.com/homarr-labs/homarr/commit/bbac4128eb36d934310a83087c733338ae2b9b9c))
+* **deps:** update tanstack-query monorepo to ^5.65.0 ([#2146](https://github.com/homarr-labs/homarr/issues/2146)) ([50970e4](https://github.com/homarr-labs/homarr/commit/50970e431d7654d2db43a4b1d55cc4f7d15a4ac2))
+* **deps:** update testcontainers-node monorepo to ^10.17.2 ([#2148](https://github.com/homarr-labs/homarr/issues/2148)) ([5c219a8](https://github.com/homarr-labs/homarr/commit/5c219a8b595f90c53189569bd63fb85db8eab882))
+* multi-text-input not saving on blur ([#2128](https://github.com/homarr-labs/homarr/issues/2128)) ([dd2ca13](https://github.com/homarr-labs/homarr/commit/dd2ca1300422a6ad477089efe905901515eebaf6))
+* split up proxmox secrets are incorrectly migrated ([#2124](https://github.com/homarr-labs/homarr/issues/2124)) ([57b523f](https://github.com/homarr-labs/homarr/commit/57b523fa805de56d8795169a535e5e45d7c22ad7))
+* unable to update integration when encryption key changed ([#2133](https://github.com/homarr-labs/homarr/issues/2133)) ([93dc3ae](https://github.com/homarr-labs/homarr/commit/93dc3ae97ed97691c304c9b6de9245930d5461ae))
+* websocket is not keep alive ([#2131](https://github.com/homarr-labs/homarr/issues/2131)) ([af1f8ea](https://github.com/homarr-labs/homarr/commit/af1f8eaf76062a9fde5570097fc6a75742174d97))
+
+## [1.2.0](https://github.com/homarr-labs/homarr/compare/v1.1.0...v1.2.0) (2025-01-24)
+
+### Features
+
+* add bookmarks options (apps) ([#2048](https://github.com/homarr-labs/homarr/issues/2048)) ([132db15](https://github.com/homarr-labs/homarr/commit/132db154242959dc2f16add4e58b0bdb7b96fb8c))
+
+### Bug Fixes
+
+* date & time widget padding cut off ([#2089](https://github.com/homarr-labs/homarr/issues/2089)) ([e4dd19b](https://github.com/homarr-labs/homarr/commit/e4dd19b574bfe0dcbcd92a3c5993aef550683fc3))
+* **deps:** update turbo monorepo to ^2.3.4 ([#2085](https://github.com/homarr-labs/homarr/issues/2085)) ([8b040ed](https://github.com/homarr-labs/homarr/commit/8b040eddef8dbc1269489038bc503dcf23ba9580))
+* issue with foreign key constraint do to empty string for home board ([#2088](https://github.com/homarr-labs/homarr/issues/2088)) ([ac78865](https://github.com/homarr-labs/homarr/commit/ac788650fb60d7aca889ec270dc29edb7ee53123))
+* system health monitoring gets proxmox id passed ([#2094](https://github.com/homarr-labs/homarr/issues/2094)) ([a1ba437](https://github.com/homarr-labs/homarr/commit/a1ba4372da3430777a85dc83bbfc59f4b03d65fb))
+* url-encode nzbget credentials ([#2093](https://github.com/homarr-labs/homarr/issues/2093)) ([4e153b8](https://github.com/homarr-labs/homarr/commit/4e153b804664e4fbc63ee5eb945c8096c809c6d5))
+
+## [1.1.0](https://github.com/homarr-labs/homarr/compare/v1.0.1...v1.1.0) (2025-01-22)
+
+### Features
+
+* add dropdown list for switching boards ([#2042](https://github.com/homarr-labs/homarr/issues/2042)) ([02dabfc](https://github.com/homarr-labs/homarr/commit/02dabfcd01e372ada7d80a0501b708b171c8fbc6))
+* add initial focus on new integration search ([#2015](https://github.com/homarr-labs/homarr/issues/2015)) ([b30c192](https://github.com/homarr-labs/homarr/commit/b30c192b8fbbbfcff8eb09b8f1654eb8dd90b56d))
+* add support for calendar without integrations, add today mark ([#2016](https://github.com/homarr-labs/homarr/issues/2016)) ([9d85677](https://github.com/homarr-labs/homarr/commit/9d8567704670a9ab471ac3e246c5ba85f908cfd9))
+
+### Bug Fixes
+
+* add item does not respect dynamic sections ([#2010](https://github.com/homarr-labs/homarr/issues/2010)) ([d4f04da](https://github.com/homarr-labs/homarr/commit/d4f04da70910b6adbf3764de1499dbd46fe9b6d5))
+* add missing request handler for rss feeds ([#2006](https://github.com/homarr-labs/homarr/issues/2006)) ([99c8e5b](https://github.com/homarr-labs/homarr/commit/99c8e5b609b17dfe443b35bfff2b883845dc62fe))
+* certificate card delete button not reachable caused by overflow ([#2037](https://github.com/homarr-labs/homarr/issues/2037)) ([c922c5b](https://github.com/homarr-labs/homarr/commit/c922c5b08387b01136332876782fed1444203096))
+* change error when section for item not found to logged warning and remove item ([#2044](https://github.com/homarr-labs/homarr/issues/2044)) ([b413e2e](https://github.com/homarr-labs/homarr/commit/b413e2ec7dd37c43665373be914ffa414599a206))
+* copy only working for https and localhost, adding open in new tab ([#2035](https://github.com/homarr-labs/homarr/issues/2035)) ([7a2d97b](https://github.com/homarr-labs/homarr/commit/7a2d97ba9119e046c06365146fc4efd080f6f6df))
+* **deps:** update dependency @tabler/icons-react to ^3.29.0 ([#2057](https://github.com/homarr-labs/homarr/issues/2057)) ([2a88095](https://github.com/homarr-labs/homarr/commit/2a8809551cfc4f4c09aa5c01cac05914fa913769))
+* **deps:** update dependency better-sqlite3 to ^11.8.1 ([#2005](https://github.com/homarr-labs/homarr/issues/2005)) ([49bd02e](https://github.com/homarr-labs/homarr/commit/49bd02e869081ec325bd8b4ba2909603a82cd7df))
+* **deps:** update dependency jotai to ^2.11.1 ([#2026](https://github.com/homarr-labs/homarr/issues/2026)) ([45af644](https://github.com/homarr-labs/homarr/commit/45af6442a1b84be399ddd281a17227a4184490be))
+* **deps:** update dependency typescript-eslint to ^8.21.0 ([#2032](https://github.com/homarr-labs/homarr/issues/2032)) ([55feb9d](https://github.com/homarr-labs/homarr/commit/55feb9dff87088d7f6d006bcecc61b0435edbb6f))
+* **deps:** update dependency undici to v7.3.0 ([#2061](https://github.com/homarr-labs/homarr/issues/2061)) ([3e9e1e5](https://github.com/homarr-labs/homarr/commit/3e9e1e5e4f737f8bdb1046585463c987fe43c3d5))
+* **deps:** update mantine monorepo to ^7.16.1 ([#2014](https://github.com/homarr-labs/homarr/issues/2014)) ([1897752](https://github.com/homarr-labs/homarr/commit/1897752e3893804a5082f34b20929ef007825506))
+* **deps:** update nextjs monorepo to ^15.1.6 ([#2063](https://github.com/homarr-labs/homarr/issues/2063)) ([4d8c22a](https://github.com/homarr-labs/homarr/commit/4d8c22a4e684b4f921967992d04d2461eb2e52db))
+* **deps:** update tanstack-query monorepo to ^5.64.2 ([#2013](https://github.com/homarr-labs/homarr/issues/2013)) ([554853f](https://github.com/homarr-labs/homarr/commit/554853ffbda202eff559b5dafa330a15e2649f17))
+* **deps:** update testcontainers-node monorepo to ^10.17.1 ([#2047](https://github.com/homarr-labs/homarr/issues/2047)) ([701538f](https://github.com/homarr-labs/homarr/commit/701538fcb5c546478f5d31b2869b933e7544cc3e))
+* **deps:** update tiptap monorepo to v2.11.3 ([#2067](https://github.com/homarr-labs/homarr/issues/2067)) ([1f54bf5](https://github.com/homarr-labs/homarr/commit/1f54bf5b9e24b6d063f5ce9165c87d2d036fb8c6))
+* docker hosts and ports env variable wrongly used ([#2050](https://github.com/homarr-labs/homarr/issues/2050)) ([73f7d88](https://github.com/homarr-labs/homarr/commit/73f7d885cddbbaa2ac879953fe5ee24a6abe582c))
+* empty env variables should be ignored ([#2040](https://github.com/homarr-labs/homarr/issues/2040)) ([1759279](https://github.com/homarr-labs/homarr/commit/175927970b25648104fac5a31649471b3ebeaa9e))
+* entity state and execute automation cards aren't movable ([#2043](https://github.com/homarr-labs/homarr/issues/2043)) ([29d4f9e](https://github.com/homarr-labs/homarr/commit/29d4f9e00313fe3e7ae207547cbd7a143b314535))
+* health monitoring cpu temp ring when no data, disks health when no data ([#2029](https://github.com/homarr-labs/homarr/issues/2029)) ([bdefff6](https://github.com/homarr-labs/homarr/commit/bdefff636b06cb33020765e606bfe8e41c931722))
+* hide current language switch in other users preferences ([#2069](https://github.com/homarr-labs/homarr/issues/2069)) ([470d27e](https://github.com/homarr-labs/homarr/commit/470d27e091a006af8a8c3ceccfc439902ebc5f18))
+* unable to change home board in user preferences ([#2011](https://github.com/homarr-labs/homarr/issues/2011)) ([7960a4c](https://github.com/homarr-labs/homarr/commit/7960a4cea11d839f5a0d1889e98bb949c11b68fa))
+* unable to move items with touch devices ([#2038](https://github.com/homarr-labs/homarr/issues/2038)) ([931f312](https://github.com/homarr-labs/homarr/commit/931f312291c0a6f1f22a26adf89dfbf912e4fe5e))
+* url of batch link can get to long with 414 http code ([#2036](https://github.com/homarr-labs/homarr/issues/2036)) ([73bbcfe](https://github.com/homarr-labs/homarr/commit/73bbcfeee86bf0950145070a6a2ce528b708fe7c))
+* User options switch on load value always false ([#1995](https://github.com/homarr-labs/homarr/issues/1995)) ([fa6262c](https://github.com/homarr-labs/homarr/commit/fa6262cf5e780fc3c5b445f988de9d9eb5b86ab5))
+
+## [1.0.1](https://github.com/homarr-labs/homarr/compare/v1.0.0...v1.0.1) (2025-01-17)
+
+### Bug Fixes
+
+* add error from ldap bind operation to log statement ([#1980](https://github.com/homarr-labs/homarr/issues/1980)) ([927913c](https://github.com/homarr-labs/homarr/commit/927913cf4e0a6e4f3a6b7dbf9ae9034d0780b5fb))
+* add missing old-import proxmox integration kind mapping ([#1979](https://github.com/homarr-labs/homarr/issues/1979)) ([e023edf](https://github.com/homarr-labs/homarr/commit/e023edf9d62417b054eb565a7f794267539eb992))
+* **deps:** update dependency flag-icons to ^7.3.2 ([#1981](https://github.com/homarr-labs/homarr/issues/1981)) ([c55207b](https://github.com/homarr-labs/homarr/commit/c55207bd59f0c51869e8fdb36e083a8327ca46b1))
+* **deps:** update nextjs monorepo to ^15.1.5 ([#1978](https://github.com/homarr-labs/homarr/issues/1978)) ([e35811c](https://github.com/homarr-labs/homarr/commit/e35811c921aea8c96dca398841ece396d71d4979))
+
 ## 1.0.0 (2025-01-17)
 
 ### ⚠ BREAKING CHANGES

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
@@ -10,6 +10,8 @@ RUN apk add --no-cache libc6-compat curl bash
 RUN apk update
 COPY . .
 
+# Install working version of corepack (See https://github.com/nodejs/corepack/issues/612)
+RUN npm install -g corepack@0.31.0 && corepack --version
 RUN corepack enable pnpm && pnpm install --recursive --frozen-lockfile
 
 # Copy static data as it is not part of the build
@@ -17,6 +19,8 @@ COPY static-data ./static-data
 ARG SKIP_ENV_VALIDATION='true'
 ARG CI='true'
 ARG DISABLE_REDIS_LOGS='true'
+# Install working version of corepack (See https://github.com/nodejs/corepack/issues/612)
+RUN npm install -g corepack@0.31.0 && corepack --version
 RUN corepack enable pnpm && pnpm build
 
 FROM base AS runner
@@ -63,6 +67,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"]
+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

@@ -23,8 +23,10 @@
     "@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",
@@ -34,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",
@@ -62,11 +65,11 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.7",
-    "flag-icons": "^7.3.1",
+    "flag-icons": "^7.3.2",
     "glob": "^11.0.1",
-    "jotai": "^2.11.0",
+    "jotai": "^2.11.3",
     "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",
@@ -75,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.7",
+    "@types/chroma-js": "3.1.1",
+    "@types/node": "^22.13.1",
     "@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/_components/hero-banner.module.css

@@ -1,5 +1,5 @@
 .bannerContainer {
-  border-radius: 8px;
+  border-radius: 16px;
   overflow: hidden;
   @mixin dark {
     background: linear-gradient(

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

@@ -1,12 +1,12 @@
 "use client";
 
+import { useRef } from "react";
 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";
@@ -14,30 +14,49 @@ import { IconPicker } from "~/components/icons/picker/icon-picker";
 type FormType = z.infer<typeof validation.app.manage>;
 
 interface AppFormProps {
-  submitButtonTranslation: (t: TranslationFunction) => string;
+  buttonLabels: {
+    submit: string;
+    submitAndCreateAnother?: string;
+  };
   initialValues?: FormType;
-  handleSubmit: (values: FormType) => void;
+  handleSubmit: (values: FormType, redirect: boolean, afterSuccess?: () => void) => void;
   isPending: boolean;
 }
 
-export const AppForm = (props: AppFormProps) => {
-  const { submitButtonTranslation, handleSubmit, initialValues, isPending } = props;
+export const AppForm = ({
+  buttonLabels,
+  handleSubmit: originalHandleSubmit,
+  initialValues,
+  isPending,
+}: 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 ?? "",
     },
   });
 
+  const shouldCreateAnother = useRef(false);
+  const handleSubmit = (values: FormType) => {
+    const redirect = !shouldCreateAnother.current;
+    const afterSuccess = shouldCreateAnother.current
+      ? () => {
+          form.reset();
+          shouldCreateAnother.current = false;
+        }
+      : undefined;
+    originalHandleSubmit(values, redirect, afterSuccess);
+  };
+
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
         <TextInput {...form.getInputProps("name")} withAsterisk label={t("app.field.name.label")} />
-        <IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
+        <IconPicker {...form.getInputProps("iconUrl")} />
         <Textarea {...form.getInputProps("description")} label={t("app.field.description.label")} />
         <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
 
@@ -45,8 +64,19 @@ export const AppForm = (props: AppFormProps) => {
           <Button variant="default" component={Link} href="/manage/apps">
             {t("common.action.backToOverview")}
           </Button>
+          {buttonLabels.submitAndCreateAnother && (
+            <Button
+              type="submit"
+              onClick={() => {
+                shouldCreateAnother.current = true;
+              }}
+              loading={isPending}
+            >
+              {buttonLabels.submitAndCreateAnother}
+            </Button>
+          )}
           <Button type="submit" loading={isPending}>
-            {submitButtonTranslation(t)}
+            {buttonLabels.submit}
           </Button>
         </Group>
       </Stack>

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

@@ -2,14 +2,14 @@
 
 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";
 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 { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { validation } from "@homarr/validation";
 
 import { AppForm } from "../../_form";
 
@@ -18,14 +18,15 @@ interface AppEditFormProps {
 }
 
 export const AppEditForm = ({ app }: AppEditFormProps) => {
-  const t = useScopedI18n("app.page.edit.notification");
+  const tScoped = useScopedI18n("app.page.edit.notification");
+  const t = useI18n();
   const router = useRouter();
 
   const { mutate, isPending } = clientApi.app.update.useMutation({
     onSuccess: () => {
       showSuccessNotification({
-        title: t("success.title"),
-        message: t("success.message"),
+        title: tScoped("success.title"),
+        message: tScoped("success.message"),
       });
       void revalidatePathActionAsync("/manage/apps").then(() => {
         router.push("/manage/apps");
@@ -33,8 +34,8 @@ export const AppEditForm = ({ app }: AppEditFormProps) => {
     },
     onError: () => {
       showErrorNotification({
-        title: t("error.title"),
-        message: t("error.message"),
+        title: tScoped("error.title"),
+        message: tScoped("error.message"),
       });
     },
   });
@@ -49,11 +50,11 @@ export const AppEditForm = ({ app }: AppEditFormProps) => {
     [mutate, app.id],
   );
 
-  const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.save"), []);
-
   return (
     <AppForm
-      submitButtonTranslation={submitButtonTranslation}
+      buttonLabels={{
+        submit: t("common.action.save"),
+      }}
       initialValues={app}
       handleSubmit={handleSubmit}
       isPending={isPending}

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

@@ -2,48 +2,60 @@
 
 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 { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { validation } from "@homarr/validation";
 
 import { AppForm } from "../_form";
 
 export const AppNewForm = () => {
-  const t = useScopedI18n("app.page.create.notification");
+  const tScoped = useScopedI18n("app.page.create.notification");
+  const t = useI18n();
   const router = useRouter();
 
   const { mutate, isPending } = clientApi.app.create.useMutation({
-    onSuccess: () => {
-      showSuccessNotification({
-        title: t("success.title"),
-        message: t("success.message"),
-      });
-      void revalidatePathActionAsync("/manage/apps").then(() => {
-        router.push("/manage/apps");
-      });
-    },
     onError: () => {
       showErrorNotification({
-        title: t("error.title"),
-        message: t("error.message"),
+        title: tScoped("error.title"),
+        message: tScoped("error.message"),
       });
     },
   });
 
   const handleSubmit = useCallback(
-    (values: z.infer<typeof validation.app.manage>) => {
-      mutate(values);
-    },
-    [mutate],
-  );
+    (values: z.infer<typeof validation.app.manage>, redirect: boolean, afterSuccess?: () => void) => {
+      mutate(values, {
+        onSuccess() {
+          showSuccessNotification({
+            title: tScoped("success.title"),
+            message: tScoped("success.message"),
+          });
+          afterSuccess?.();
 
-  const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.create"), []);
+          if (!redirect) {
+            return;
+          }
+          void revalidatePathActionAsync("/manage/apps").then(() => {
+            router.push("/manage/apps");
+          });
+        },
+      });
+    },
+    [mutate, router, tScoped],
+  );
 
   return (
-    <AppForm submitButtonTranslation={submitButtonTranslation} handleSubmit={handleSubmit} isPending={isPending} />
+    <AppForm
+      buttonLabels={{
+        submit: t("common.action.create"),
+        submitAndCreateAnother: t("common.action.createAnother"),
+      }}
+      handleSubmit={handleSubmit}
+      isPending={isPending}
+    />
   );
 };

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";
@@ -45,7 +45,7 @@ export default async function AppsPage(props: AppsPageProps) {
       <Stack>
         <Title>{t("page.list.title")}</Title>
         <Group justify="space-between" align="center">
-          <SearchInput placeholder={`${t("search")}...`} defaultValue={searchParams.search} />
+          <SearchInput placeholder={`${t("search")}...`} defaultValue={searchParams.search} flexExpand />
           {session.user.permissions.includes("app-create") && (
             <MobileAffixButton component={Link} href="/manage/apps/new">
               {t("page.create.title")}
@@ -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/boards/page.tsx

@@ -67,7 +67,7 @@ const BoardCard = async ({ board }: BoardCardProps) => {
   const VisibilityIcon = board.isPublic ? IconWorld : IconLock;
 
   return (
-    <Card withBorder>
+    <Card radius="lg" withBorder>
       <CardSection p="sm" withBorder>
         <Group justify="space-between" align="center">
           <Group gap="sm">
@@ -106,15 +106,25 @@ const BoardCard = async ({ board }: BoardCardProps) => {
         </Group>
       </CardSection>
 
-      <CardSection p="sm">
-        <Group wrap="nowrap">
-          <Button component={Link} href={`/boards/${board.name}`} variant="default" fullWidth>
+      <CardSection>
+        <Group gap={0} wrap="nowrap">
+          <Button
+            style={{ border: "none", borderRadius: 0 }}
+            component={Link}
+            href={`/boards/${board.name}`}
+            variant="default"
+            fullWidth
+          >
             {t("action.open.label")}
           </Button>
           {isMenuVisible && (
             <Menu position="bottom-end">
               <MenuTarget>
-                <ActionIcon variant="default" size="lg">
+                <ActionIcon
+                  style={{ borderTop: "none", borderBottom: "none", borderRight: "none", borderRadius: 0 }}
+                  variant="default"
+                  size="lg"
+                >
                   <IconDotsVertical size={16} stroke={1.5} />
                 </ActionIcon>
               </MenuTarget>

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,7 +31,9 @@ export const IntegrationCreateDropdownContent = () => {
         leftSection={<IconSearch stroke={1.5} size={20} />}
         placeholder={t("integration.page.list.search")}
         value={search}
+        data-autofocus
         onChange={handleSearch}
+        variant="filled"
       />
 
       {filteredKinds.length > 0 ? (

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.module.css

@@ -0,0 +1,36 @@
+.root {
+  border-radius: var(--mantine-radius-lg);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+}
+
+.item {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  border: 1px solid transparent;
+  position: relative;
+  z-index: 0;
+  transition: transform 150ms ease;
+  overflow: hidden;
+
+  &[data-first="true"] {
+    border-radius: var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0;
+  }
+
+  &[data-last="true"] {
+    border-radius: 0 0 var(--mantine-radius-lg) var(--mantine-radius-lg);
+  }
+
+  &[data-active] {
+    transform: scale(1.01);
+    z-index: 1;
+    background-color: var(--mantine-color-body);
+    border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+    box-shadow: var(--mantine-shadow-md);
+    border-radius: var(--mantine-radius-lg);
+  }
+}
+
+.chevron {
+  &[data-rotate] {
+    transform: rotate(180deg);
+  }
+}

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

@@ -44,6 +44,7 @@ import { NoResults } from "~/components/no-results";
 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
 import { DeleteIntegrationActionButton } from "./_integration-buttons";
 import { IntegrationCreateDropdownContent } from "./new/_integration-new-dropdown";
+import classes from "./page.module.css";
 
 interface IntegrationsPageProps {
   searchParams: Promise<{
@@ -102,7 +103,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 />
@@ -125,7 +134,7 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
     return <NoResults icon={IconPlugX} title={t("page.list.noResults.title")} />;
   }
 
-  const grouppedIntegrations = integrations.reduce(
+  const groupedIntegrations = integrations.reduce(
     (acc, integration) => {
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (!acc[integration.kind]) {
@@ -139,11 +148,13 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
     {} as Record<IntegrationKind, RouterOutputs["integration"]["all"]>,
   );
 
+  const entries = objectEntries(groupedIntegrations);
+
   return (
-    <ActiveTabAccordion defaultValue={activeTab} variant="separated">
-      {objectEntries(grouppedIntegrations).map(([kind, integrations]) => (
-        <AccordionItem key={kind} value={kind}>
-          <AccordionControl icon={<IntegrationAvatar size="sm" kind={kind} />}>
+    <ActiveTabAccordion defaultValue={activeTab} radius="lg" classNames={classes}>
+      {entries.map(([kind, integrations], index) => (
+        <AccordionItem key={kind} value={kind} data-first={index === 0} data-last={index === entries.length - 1}>
+          <AccordionControl icon={<IntegrationAvatar size="sm" kind={kind} radius="sm" />}>
             <Group>
               <Text>{getIntegrationName(kind)}</Text>
               <CountBadge count={integrations.length} />

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

@@ -1,26 +1,26 @@
 import type { PropsWithChildren } from "react";
 import { AppShellMain } from "@mantine/core";
 import {
+  IconAffiliateFilled,
   IconBook2,
   IconBox,
   IconBrandDiscord,
   IconBrandDocker,
   IconBrandGithub,
+  IconBrandTablerFilled,
   IconCertificate,
+  IconClipboardListFilled,
+  IconDirectionsFilled,
   IconGitFork,
-  IconHome,
-  IconInfoSmall,
-  IconLayoutDashboard,
-  IconLogs,
+  IconHelpSquareRoundedFilled,
+  IconHomeFilled,
+  IconLayoutDashboardFilled,
   IconMailForward,
-  IconPhoto,
-  IconPlug,
-  IconQuestionMark,
-  IconReport,
+  IconPhotoFilled,
+  IconPointerFilled,
   IconSearch,
-  IconSettings,
-  IconTool,
-  IconUser,
+  IconSettingsFilled,
+  IconUserFilled,
   IconUsers,
   IconUsersGroup,
 } from "@tabler/icons-react";
@@ -31,6 +31,7 @@ import { createDocumentationLink } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 
 import { MainHeader } from "~/components/layout/header";
+import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
 import type { NavigationLink } from "~/components/layout/navigation";
 import { MainNavigation } from "~/components/layout/navigation";
 import { ClientShell } from "~/components/layout/shell";
@@ -41,11 +42,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
   const navigationLinks: NavigationLink[] = [
     {
       label: t("items.home"),
-      icon: IconHome,
+      icon: IconHomeFilled,
       href: "/manage",
     },
     {
-      icon: IconLayoutDashboard,
+      icon: IconLayoutDashboardFilled,
       href: "/manage/boards",
       label: t("items.boards"),
     },
@@ -54,9 +55,12 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       href: "/manage/apps",
       label: t("items.apps"),
       hidden: !session,
+      iconProps: {
+        strokeWidth: 2.5,
+      },
     },
     {
-      icon: IconPlug,
+      icon: IconAffiliateFilled,
       href: "/manage/integrations",
       label: t("items.integrations"),
       hidden: !session,
@@ -66,15 +70,18 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       href: "/manage/search-engines",
       label: t("items.searchEngies"),
       hidden: !session,
+      iconProps: {
+        strokeWidth: 2.5,
+      },
     },
     {
-      icon: IconPhoto,
+      icon: IconPhotoFilled,
       href: "/manage/medias",
       label: t("items.medias"),
       hidden: !session,
     },
     {
-      icon: IconUser,
+      icon: IconUserFilled,
       label: t("items.users.label"),
       hidden: !session?.user.permissions.includes("admin"),
       items: [
@@ -98,7 +105,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
     },
     {
       label: t("items.tools.label"),
-      icon: IconTool,
+      icon: IconPointerFilled,
       // As permissions always include there children permissions, we can check other-view-logs as admin includes it
       hidden: !session?.user.permissions.includes("other-view-logs"),
       items: [
@@ -110,13 +117,13 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
         },
         {
           label: t("items.tools.items.api"),
-          icon: IconPlug,
+          icon: IconDirectionsFilled,
           href: "/manage/tools/api",
           hidden: !session?.user.permissions.includes("admin"),
         },
         {
           label: t("items.tools.items.logs"),
-          icon: IconLogs,
+          icon: IconBrandTablerFilled,
           href: "/manage/tools/logs",
           hidden: !session?.user.permissions.includes("other-view-logs"),
         },
@@ -128,7 +135,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
         },
         {
           label: t("items.tools.items.tasks"),
-          icon: IconReport,
+          icon: IconClipboardListFilled,
           href: "/manage/tools/tasks",
           hidden: !session?.user.permissions.includes("admin"),
         },
@@ -137,12 +144,12 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
     {
       label: t("items.settings"),
       href: "/manage/settings",
-      icon: IconSettings,
+      icon: IconSettingsFilled,
       hidden: !session?.user.permissions.includes("admin"),
     },
     {
       label: t("items.help.label"),
-      icon: IconQuestionMark,
+      icon: IconHelpSquareRoundedFilled,
       items: [
         {
           label: t("items.help.items.documentation"),
@@ -153,7 +160,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,
         },
         {
@@ -165,14 +172,14 @@ 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,
         },
       ],
     },
     {
       label: t("items.about"),
-      icon: IconInfoSmall,
+      icon: homarrLogoPath,
       href: "/manage/about",
     },
   ];

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";
@@ -46,7 +61,7 @@ export default async function GroupsListPage(props: MediaListPageProps) {
   const { items: medias, totalCount } = await api.media.getPaginated(searchParams);
 
   return (
-    <ManageContainer size="xl">
+    <ManageContainer>
       <DynamicBreadcrumb />
       <Stack>
         <Title>{t("media.plural")}</Title>
@@ -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/page.tsx

@@ -83,7 +83,7 @@ export default async function ManagementPage() {
         {links.map(
           (link) =>
             !link.hidden && (
-              <Card component={Link} href={link.href} key={link.href} withBorder>
+              <Card component={Link} href={link.href} key={link.href} radius="lg">
                 <Group justify="space-between" wrap="nowrap">
                   <Group wrap="nowrap">
                     <Text size="2.4rem" fw="bolder">

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";
@@ -58,7 +58,7 @@ export const SearchEngineForm = (props: SearchEngineFormProps) => {
             />
           </Grid.Col>
         </Grid>
-        <IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
+        <IconPicker {...form.getInputProps("iconUrl")} />
 
         <Fieldset legend={t("search.engine.page.edit.configControl")}>
           <SegmentedControl

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";
@@ -45,7 +45,7 @@ export default async function SearchEnginesPage(props: SearchEnginesPageProps) {
       <Stack>
         <Title>{tEngine("page.list.title")}</Title>
         <Group justify="space-between" align="center">
-          <SearchInput placeholder={`${tEngine("search")}...`} defaultValue={searchParams.search} />
+          <SearchInput placeholder={`${tEngine("search")}...`} defaultValue={searchParams.search} flexExpand />
           {session.user.permissions.includes("search-engine-create") && (
             <MobileAffixButton component={Link} href="/manage/search-engines/new">
               {tEngine("page.create.title")}

apps/nextjs/src/app/[locale]/manage/tools/api/components/api-keys.tsx

@@ -1,14 +1,15 @@
 "use client";
 
-import { useMemo } from "react";
-import { Button, Group, Stack, Text, Title } from "@mantine/core";
+import { useCallback, useMemo } from "react";
+import { ActionIcon, Button, Group, Stack, Text, Title } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useModalAction } from "@homarr/modals";
+import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 import { UserAvatar } from "@homarr/ui";
 
@@ -20,7 +21,8 @@ interface ApiKeysManagementProps {
 
 export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
   const { openModal } = useModalAction(CopyApiKeyModal);
-  const { mutate, isPending } = clientApi.apiKeys.create.useMutation({
+  const { openConfirmModal } = useConfirmModal();
+  const { mutate: mutateCreate, isPending: isPendingCreate } = clientApi.apiKeys.create.useMutation({
     async onSuccess(data) {
       openModal({
         apiKey: data.apiKey,
@@ -28,7 +30,26 @@ export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
       await revalidatePathActionAsync("/manage/tools/api");
     },
   });
+  const { mutateAsync: mutateDeleteAsync, isPending: isPendingDelete } = clientApi.apiKeys.delete.useMutation({
+    async onSuccess() {
+      await revalidatePathActionAsync("/manage/tools/api");
+    },
+  });
+
   const t = useScopedI18n("management.page.tool.api.tab.apiKey");
+  const handleDelete = useCallback(
+    (id: string) => {
+      openConfirmModal({
+        title: t("modal.delete.title"),
+        children: t("modal.delete.text"),
+        // eslint-disable-next-line no-restricted-syntax
+        async onConfirm() {
+          await mutateDeleteAsync({ apiKeyId: id });
+        },
+      });
+    },
+    [t, openConfirmModal, mutateDeleteAsync],
+  );
 
   const columns = useMemo<MRT_ColumnDef<RouterOutputs["apiKeys"]["getAll"][number]>[]>(
     () => [
@@ -46,8 +67,18 @@ export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
           </Group>
         ),
       },
+      {
+        header: t("table.header.actions"),
+        Cell: ({ row }) => (
+          <Group gap="xs">
+            <ActionIcon onClick={() => handleDelete(row.original.id)} loading={isPendingDelete} c="red">
+              <IconTrash size="1rem" />
+            </ActionIcon>
+          </Group>
+        ),
+      },
     ],
-    [t],
+    [t, handleDelete, isPendingDelete],
   );
 
   const table = useMantineReactTable({
@@ -56,9 +87,9 @@ export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
     renderTopToolbarCustomActions: () => (
       <Button
         onClick={() => {
-          mutate();
+          mutateCreate();
         }}
-        loading={isPending}
+        loading={isPendingCreate}
       >
         {t("button.createApiToken")}
       </Button>

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

@@ -2,6 +2,7 @@
 
 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";
@@ -9,7 +10,7 @@ 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, z } from "@homarr/validation";
+import { superRefineCertificateFile } from "@homarr/validation";
 
 export const AddCertificateButton = () => {
   const { openModal } = useModalAction(AddCertificateModal);

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

@@ -59,10 +59,17 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
           {x509Certificates.map((cert) => (
             <Card key={cert.x509.fingerprint} withBorder>
               <Group wrap="nowrap">
-                <IconCertificate color={getMantineColor(iconColor(cert.x509.validToDate), 6)} size={32} stroke={1.5} />
-                <Stack flex={1} gap="xs">
-                  <Group justify="space-between">
-                    <Text fw={500}>{cert.x509.subject}</Text>
+                <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>

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

@@ -35,8 +35,9 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
       styles={{
         root: {
           "--opacity": board.opacity / 100,
-          containerType: "size",
           overflow: item.kind === "iframe" ? "hidden" : undefined,
+          "--custom-text-size-scale": item.advancedOptions.customTextSize,
+          "--custom-spacing-scale": item.advancedOptions.customSpacing,
         },
       }}
       p={0}
@@ -79,7 +80,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/components/board/sections/category/category-menu-actions.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 
+import { fetchApi } from "@homarr/api/client";
 import { createId } from "@homarr/db/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
@@ -7,6 +8,7 @@ import { useI18n } from "@homarr/translation/client";
 import type { CategorySection } from "~/app/[locale]/boards/_types";
 import { useCategoryActions } from "./category-actions";
 import { CategoryEditModal } from "./category-edit-modal";
+import { filterByItemKind } from "./filter";
 
 export const useCategoryMenuActions = (category: CategorySection) => {
   const { openModal } = useModalAction(CategoryEditModal);
@@ -97,6 +99,28 @@ export const useCategoryMenuActions = (category: CategorySection) => {
     );
   }, [category, openModal, renameCategory, t]);
 
+  const openAllInNewTabs = useCallback(async () => {
+    const appIds = filterByItemKind(category.items, "app").map((item) => {
+      return item.options.appId;
+    });
+
+    const apps = await fetchApi.app.byIds.query(appIds);
+    const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
+
+    for (const app of appsWithUrls) {
+      const openedWindow = window.open(app.href ?? undefined);
+      if (openedWindow) {
+        continue;
+      }
+
+      openConfirmModal({
+        title: t("section.category.openAllInNewTabs.title"),
+        children: t("section.category.openAllInNewTabs.text"),
+      });
+      break;
+    }
+  }, [category, t, openConfirmModal]);
+
   return {
     addCategoryAbove,
     addCategoryBelow,
@@ -104,5 +128,6 @@ export const useCategoryMenuActions = (category: CategorySection) => {
     moveCategoryDown,
     remove,
     edit,
+    openAllInNewTabs,
   };
 };

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

@@ -5,6 +5,7 @@ import { ActionIcon, Menu } from "@mantine/core";
 import {
   IconDotsVertical,
   IconEdit,
+  IconExternalLink,
   IconRowInsertBottom,
   IconRowInsertTop,
   IconTransitionBottom,
@@ -12,6 +13,7 @@ import {
   IconTrash,
 } from "@tabler/icons-react";
 
+import type { MaybePromise } from "@homarr/common/types";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
@@ -27,8 +29,6 @@ export const CategoryMenu = ({ category }: Props) => {
   const actions = useActions(category);
   const t = useScopedI18n("section.category");
 
-  if (actions.length === 0) return null;
-
   return (
     <Menu withArrow>
       <Menu.Target>
@@ -37,18 +37,20 @@ export const CategoryMenu = ({ category }: Props) => {
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>
-        {actions.map((action) => (
-          <React.Fragment key={action.label}>
-            {"group" in action && <Menu.Label>{t(action.group)}</Menu.Label>}
-            <Menu.Item
-              leftSection={<action.icon size="1rem" />}
-              onClick={action.onClick}
-              color={"color" in action ? action.color : undefined}
-            >
-              {t(action.label)}
-            </Menu.Item>
-          </React.Fragment>
-        ))}
+        {actions.map((action) => {
+          return (
+            <React.Fragment key={action.label}>
+              {"group" in action && <Menu.Label>{t(action.group)}</Menu.Label>}
+              <Menu.Item
+                leftSection={<action.icon size="1rem" />}
+                onClick={action.onClick}
+                color={"color" in action ? action.color : undefined}
+              >
+                {t(action.label)}
+              </Menu.Item>
+            </React.Fragment>
+          );
+        })}
       </Menu.Dropdown>
     </Menu>
   );
@@ -106,15 +108,21 @@ const useEditModeActions = (category: CategorySection) => {
   ] as const satisfies ActionDefinition[];
 };
 
-// TODO: once apps are added we can use this for the open many apps action
-const useNonEditModeActions = (_category: CategorySection) => {
-  return [] as const satisfies ActionDefinition[];
+const useNonEditModeActions = (category: CategorySection) => {
+  const { openAllInNewTabs } = useCategoryMenuActions(category);
+  return [
+    {
+      icon: IconExternalLink,
+      label: "action.openAllInNewTabs",
+      onClick: openAllInNewTabs,
+    },
+  ] as const satisfies ActionDefinition[];
 };
 
 interface ActionDefinition {
   icon: TablerIcon;
   label: string;
-  onClick: () => void;
+  onClick: () => MaybePromise<void>;
   color?: string;
   group?: string;
 }

apps/nextjs/src/components/board/sections/category/filter.ts

@@ -0,0 +1,14 @@
+import type { WidgetKind } from "@homarr/definitions";
+import type { WidgetComponentProps } from "@homarr/widgets";
+import { reduceWidgetOptionsWithDefaultValues } from "@homarr/widgets";
+
+import type { Item } from "~/app/[locale]/boards/_types";
+
+export const filterByItemKind = <TKind extends WidgetKind>(items: Item[], kind: TKind) => {
+  return items
+    .filter((item) => item.kind === kind)
+    .map((item) => ({
+      ...item,
+      options: reduceWidgetOptionsWithDefaultValues(kind, item.options) as WidgetComponentProps<TKind>["options"],
+    }));
+};

apps/nextjs/src/components/board/sections/item.module.css

@@ -9,4 +9,22 @@
   }
   background-color: var(--background-color) !important;
   border-color: var(--border-color) !important;
+
+  container-type: size;
+
+  --spacing-base: 0.5cqmin;
+  --mantine-spacing-xs: calc(1 * var(--spacing-base) * var(--custom-spacing-scale));
+  --mantine-spacing-sm: calc(2 * var(--spacing-base) * var(--custom-spacing-scale));
+  --mantine-spacing-md: calc(4 * var(--spacing-base) * var(--custom-spacing-scale));
+  --mantine-spacing-lg: calc(8 * var(--spacing-base) * var(--custom-spacing-scale));
+  --mantine-spacing-xl: calc(16 * var(--spacing-base) * var(--custom-spacing-scale));
+
+  --text-size-base: 5cqmin;
+  --mantine-font-size-xs: calc(1 * var(--text-size-base) * var(--custom-text-size-scale));
+  --mantine-font-size-sm: calc(1.5 * var(--text-size-base) * var(--custom-text-size-scale));
+  --mantine-font-size-md: calc(2.5 * var(--text-size-base) * var(--custom-text-size-scale));
+  --mantine-font-size-lg: calc(4 * var(--text-size-base) * var(--custom-text-size-scale));
+  --mantine-font-size-xl: calc(6 * var(--text-size-base) * var(--custom-text-size-scale));
+
+  --text-lh: 1.35;
 }

apps/nextjs/src/components/icons/picker/icon-picker.tsx

@@ -1,5 +1,5 @@
 import type { FocusEventHandler } from "react";
-import { startTransition, useState } from "react";
+import { startTransition } from "react";
 import {
   ActionIcon,
   Box,
@@ -17,7 +17,7 @@ import {
   UnstyledButton,
   useCombobox,
 } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
+import { useDebouncedValue, useUncontrolled } from "@mantine/hooks";
 import { IconUpload } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -28,17 +28,27 @@ import { UploadMedia } from "~/app/[locale]/manage/medias/_actions/upload-media"
 import classes from "./icon-picker.module.css";
 
 interface IconPickerProps {
-  initialValue?: string;
+  value?: string;
   onChange: (iconUrl: string) => void;
   error?: string | null;
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
 }
 
-export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: IconPickerProps) => {
-  const [value, setValue] = useState<string>(initialValue ?? "");
-  const [search, setSearch] = useState(initialValue ?? "");
-  const [previewUrl, setPreviewUrl] = useState<string | null>(initialValue ?? null);
+export const IconPicker = ({ value: propsValue, onChange, error, onFocus, onBlur }: IconPickerProps) => {
+  const [value, setValue] = useUncontrolled({
+    value: propsValue,
+    onChange,
+  });
+  const [search, setSearch] = useUncontrolled({
+    value,
+    onChange: (value) => {
+      setValue(value);
+    },
+  });
+  const [previewUrl, setPreviewUrl] = useUncontrolled({
+    value: propsValue ?? null,
+  });
   const { data: session } = useSession();
 
   const tCommon = useScopedI18n("common");
@@ -68,10 +78,9 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
           onClick={() => {
             const value = item.url;
             startTransition(() => {
-              setValue(value);
               setPreviewUrl(value);
               setSearch(value);
-              onChange(value);
+              setValue(value);
               combobox.closeDropdown();
             });
           }}
@@ -128,7 +137,6 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
               setSearch(event.currentTarget.value);
               setValue(event.currentTarget.value);
               setPreviewUrl(null);
-              onChange(event.currentTarget.value);
             }}
             onClick={() => combobox.openDropdown()}
             onFocus={(event) => {
@@ -154,7 +162,6 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
                   setValue(url);
                   setPreviewUrl(url);
                   setSearch(url);
-                  onChange(url);
                 });
               }}
             >

apps/nextjs/src/components/layout/header/search.tsx

@@ -20,6 +20,7 @@ export const DesktopSearchInput = () => {
       size="sm"
       leftSection={<IconSearch size={20} stroke={1.5} />}
       onClick={openSpotlight}
+      radius="xl"
     >
       {`${t("search.placeholder")}...`}
     </TextInput>

apps/nextjs/src/components/layout/navigation.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from "react";
-import { AppShellNavbar, AppShellSection, ScrollArea } from "@mantine/core";
+import { AppShellNavbar, AppShellSection, Image, ScrollArea } from "@mantine/core";
 
-import type { TablerIcon } from "@homarr/ui";
+import type { TablerIcon, TablerIconProps } from "@homarr/ui";
 
 import type { ClientNavigationLink } from "./navigation-link";
 import { CommonNavLink } from "./navigation-link";
@@ -27,8 +27,13 @@ export const MainNavigation = ({ headerSection, footerSection, links }: MainNavi
             return null;
           }
 
-          const { icon: TablerIcon, ...props } = link;
-          const Icon = <TablerIcon size={20} stroke={1.5} />;
+          const { icon: TablerIcon, iconProps, ...props } = link;
+          const Icon =
+            typeof TablerIcon === "string" ? (
+              <Image src={TablerIcon} w={20} h={20} />
+            ) : (
+              <TablerIcon size={20} stroke={1.5} {...iconProps} />
+            );
           let clientLink: ClientNavigationLink;
           if ("items" in props) {
             clientLink = {
@@ -38,7 +43,7 @@ export const MainNavigation = ({ headerSection, footerSection, links }: MainNavi
                 .map((item) => {
                   return {
                     ...item,
-                    icon: <item.icon size={20} stroke={1.5} />,
+                    icon: <item.icon size={20} stroke={1.5} {...iconProps} />,
                   };
                 }),
             } as ClientNavigationLink;
@@ -55,7 +60,8 @@ export const MainNavigation = ({ headerSection, footerSection, links }: MainNavi
 
 interface CommonNavigationLinkProps {
   label: string;
-  icon: TablerIcon;
+  icon: TablerIcon | string;
+  iconProps?: TablerIconProps;
   hidden?: boolean;
 }
 

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.3"
+    "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.7",
+    "@types/node": "^22.13.1",
     "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/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",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "build": "cross-env CI=true turbo build",
@@ -38,29 +38,29 @@
     "@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.4.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.8",
-    "@vitest/ui": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/ui": "^3.0.5",
     "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.4.0",
     "typescript": "^5.7.3",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.5"
   },
-  "packageManager": "pnpm@9.15.4",
+  "packageManager": "pnpm@9.15.5",
   "engines": {
-    "node": ">=22.13.0"
+    "node": ">=22.13.1"
   },
   "pnpm": {
     "allowNonAppliedPatches": true,
     "overrides": {
-      "proxmox-api>undici": "7.2.3"
+      "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

@@ -29,6 +29,7 @@
     "@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:^",
@@ -42,20 +43,20 @@
     "@trpc/client": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
-    "dockerode": "4.0.2",
     "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.3",
+    "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

@@ -15,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";
@@ -27,6 +28,7 @@ export const appRouter = createTRPCRouter({
   invite: inviteRouter,
   integration: integrationRouter,
   board: boardRouter,
+  section: sectionRouter,
   app: innerAppRouter,
   searchEngine: searchEngineRouter,
   widget: widgetRouter,

packages/api/src/router/apiKeys.ts

@@ -1,6 +1,8 @@
+import { z } from "zod";
+
 import { createSaltAsync, hashPasswordAsync } from "@homarr/auth";
 import { generateSecureRandomToken } from "@homarr/common/server";
-import { createId, db } from "@homarr/db";
+import { createId, db, eq } from "@homarr/db";
 import { apiKeys } from "@homarr/db/schema";
 
 import { createTRPCRouter, permissionRequiredProcedure } from "../trpc";
@@ -39,4 +41,10 @@ export const apiKeysRouter = createTRPCRouter({
       apiKey: `${id}.${randomToken}`,
     };
   }),
+  delete: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ apiKeyId: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      await ctx.db.delete(apiKeys).where(eq(apiKeys.id, input.apiKeyId)).limit(1);
+    }),
 });

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,5 +1,6 @@
 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";
@@ -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";
@@ -1024,6 +1026,9 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
       },
       sections: {
         with: {
+          collapseStates: {
+            where: eq(sectionCollapseStates.userId, userId ?? ""),
+          },
           items: {
             with: {
               integrations: {
@@ -1058,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/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,4 +1,5 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 
 import { objectEntries } from "@homarr/common";
 import { decryptSecret, encryptSecret } from "@homarr/common/server";
@@ -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";
@@ -205,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(),

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";
@@ -194,6 +195,12 @@ export const searchEngineRouter = createTRPCRouter({
     .requiresPermission("search-engine-full-all")
     .input(validation.common.byId)
     .mutation(async ({ ctx, input }) => {
+      await ctx.db
+        .update(users)
+        .set({
+          defaultSearchEngineId: null,
+        })
+        .where(eq(users.defaultSearchEngineId, input.id));
       await ctx.db.delete(searchEngines).where(eq(searchEngines.id, input.id));
     }),
 });

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