chore(release): 1.6.0 [skip ci]

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

.env.example

@@ -33,6 +33,3 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
 # LOCAL_CERTIFICATE_PATH='FULL_PATH_TO_CERTIFICATES'
 
 TURBO_TELEMETRY_DISABLED=1
-
-# Configure logging to use winston logger
-NODE_OPTIONS='-r @homarr/log/override'

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -31,6 +31,14 @@ body:
       label: Version
       description: What version of Homarr are you running?
       options:
+        - 1.5.0
+        - 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

.nvmrc

@@ -1 +1 @@
-22.13.0
+22.14.0

CHANGELOG.md

@@ -1,3 +1,167 @@
+## [1.6.0](https://github.com/homarr-labs/homarr/compare/v1.5.0...v1.6.0) (2025-02-14)
+
+### Features
+
+* **lang:** add catalan language ([#2283](https://github.com/homarr-labs/homarr/issues/2283)) ([749b0c6](https://github.com/homarr-labs/homarr/commit/749b0c6ee9dc7802ae10393b90e19bf3c43bf9e0))
+* **settings:** add simple-ping settings ([#2118](https://github.com/homarr-labs/homarr/issues/2118)) ([dff6cb9](https://github.com/homarr-labs/homarr/commit/dff6cb9d31c3884bf811774a7c90dad27ac19691))
+
+### Bug Fixes
+
+* add error handling for available updates ([#2289](https://github.com/homarr-labs/homarr/issues/2289)) ([0502e47](https://github.com/homarr-labs/homarr/commit/0502e477707932db96b25372ddab8263572b389c))
+* add mysql pool with keep-alive to not close the connection ([#2282](https://github.com/homarr-labs/homarr/issues/2282)) ([a38afb0](https://github.com/homarr-labs/homarr/commit/a38afb05d35cf2bdba378be3744f3a8b6c9d38f6))
+* **calendar:** info popover overlap ([#2268](https://github.com/homarr-labs/homarr/issues/2268)) ([584c660](https://github.com/homarr-labs/homarr/commit/584c660906f5ae7e8ab1c88ce9cfbbbbdcdb5145))
+* **deps:** update dependency @ctrl/qbittorrent to ^9.3.0 ([#2310](https://github.com/homarr-labs/homarr/issues/2310)) ([8649fac](https://github.com/homarr-labs/homarr/commit/8649faca7929daff426607f104057fce26edd049))
+* **deps:** update dependency @ctrl/qbittorrent to ^9.4.0 ([#2315](https://github.com/homarr-labs/homarr/issues/2315)) ([4d3cc1d](https://github.com/homarr-labs/homarr/commit/4d3cc1d80698e659a669de7d4bd0d185ad68605e))
+* **deps:** update dependency @extractus/feed-extractor to v7.1.4 ([#2281](https://github.com/homarr-labs/homarr/issues/2281)) ([7edaa48](https://github.com/homarr-labs/homarr/commit/7edaa48fb9bcf48e8b734beec5a8bad003124233))
+* **deps:** update dependency drizzle-orm to ^0.39.3 ([#2295](https://github.com/homarr-labs/homarr/issues/2295)) ([8ec0080](https://github.com/homarr-labs/homarr/commit/8ec0080fca17c530cdd0576ba101299a0f769463))
+* **deps:** update dependency jotai to ^2.12.0 ([#2306](https://github.com/homarr-labs/homarr/issues/2306)) ([fc43da5](https://github.com/homarr-labs/homarr/commit/fc43da59f845934da428bcafd4ec46551ace8a81))
+* **deps:** update dependency sass to ^1.85.0 ([#2326](https://github.com/homarr-labs/homarr/issues/2326)) ([8ee39eb](https://github.com/homarr-labs/homarr/commit/8ee39eb6db89fdeaec0fae7988ffa97280c2f5ab))
+* **deps:** update dependency typescript-eslint to ^8.24.0 ([#2297](https://github.com/homarr-labs/homarr/issues/2297)) ([8371f46](https://github.com/homarr-labs/homarr/commit/8371f46d34ad36fd25f23d91804d3f95439d7012))
+* **deps:** update dependency zod to ^3.24.2 ([#2311](https://github.com/homarr-labs/homarr/issues/2311)) ([379675a](https://github.com/homarr-labs/homarr/commit/379675a901637a1b878595a80d0776d05311218d))
+* **deps:** update mantine monorepo to ^7.16.3 ([#2275](https://github.com/homarr-labs/homarr/issues/2275)) ([42a6814](https://github.com/homarr-labs/homarr/commit/42a68140b1493cc171977d996eea16d876dce60c))
+* **deps:** update nextjs monorepo to ^15.1.7 ([#2302](https://github.com/homarr-labs/homarr/issues/2302)) ([2399967](https://github.com/homarr-labs/homarr/commit/2399967868652436ee6827bce8883c1b4a00af0e))
+* **deps:** update turbo monorepo to ^2.4.1 ([#2296](https://github.com/homarr-labs/homarr/issues/2296)) ([2b9f834](https://github.com/homarr-labs/homarr/commit/2b9f834d9645aaf5f5aa1b8a5f1e48300389ac8b))
+* **deps:** update turbo monorepo to ^2.4.2 ([#2313](https://github.com/homarr-labs/homarr/issues/2313)) ([1045465](https://github.com/homarr-labs/homarr/commit/10454656a286c320a8d3b5ff12a138025d871b20))
+* **users:** edit profile username not lowercase ([#2279](https://github.com/homarr-labs/homarr/issues/2279)) ([b7fd247](https://github.com/homarr-labs/homarr/commit/b7fd2470ee0d85821f79a34e839e62fbab6989c6))
+
+## [1.5.0](https://github.com/homarr-labs/homarr/compare/v1.4.0...v1.5.0) (2025-02-07)
+
+### Features
+
+* add api key delete ([#2210](https://github.com/homarr-labs/homarr/issues/2210)) ([8058b62](https://github.com/homarr-labs/homarr/commit/8058b6207ad4be1d646182b67b810c397097c054))
+* custom time/date format in clock widget ([#2180](https://github.com/homarr-labs/homarr/issues/2180)) ([be603ba](https://github.com/homarr-labs/homarr/commit/be603badfed63ad7583a5265bef3b9e85f6b6b61))
+* improve consistency and design ([#1867](https://github.com/homarr-labs/homarr/issues/1867)) ([5f36d8b](https://github.com/homarr-labs/homarr/commit/5f36d8b12528fd2c8c3da783b266d614203ec46a))
+* open all apps in category ([#2212](https://github.com/homarr-labs/homarr/issues/2212)) ([bb67bf5](https://github.com/homarr-labs/homarr/commit/bb67bf5fa2968d91ad3522ebae960a6880f85987))
+
+### Bug Fixes
+
+* **deps:** update dependency @tabler/icons-react to ^3.30.0 ([#2266](https://github.com/homarr-labs/homarr/issues/2266)) ([c849109](https://github.com/homarr-labs/homarr/commit/c849109df5b622aca8cf7b392b94685581bf6b32))
+* **deps:** update dependency drizzle-orm to ^0.39.2 ([#2255](https://github.com/homarr-labs/homarr/issues/2255)) ([3d0b319](https://github.com/homarr-labs/homarr/commit/3d0b319a88bdb8d955d7942553d92988bf5b2c28))
+* **deps:** update dependency ioredis to v5.5.0 ([#2264](https://github.com/homarr-labs/homarr/issues/2264)) ([0da5a1b](https://github.com/homarr-labs/homarr/commit/0da5a1b0fb86ff2074f12a5e028fcc09ff94a4a5))
+* **deps:** update dependency jotai to ^2.11.3 ([#2215](https://github.com/homarr-labs/homarr/issues/2215)) ([a385337](https://github.com/homarr-labs/homarr/commit/a3853372687aed543fad2dd89bfb13871af0f2c1))
+* **deps:** update dependency octokit to ^4.1.1 ([#2262](https://github.com/homarr-labs/homarr/issues/2262)) ([3cbb656](https://github.com/homarr-labs/homarr/commit/3cbb656ee9b540d2dd4c7db37946efacbbfdc522))
+* **deps:** update dependency sass to ^1.84.0 ([#2257](https://github.com/homarr-labs/homarr/issues/2257)) ([7bbbaf3](https://github.com/homarr-labs/homarr/commit/7bbbaf343befaaa3d03a91e932f683c5aec4b41e))
+* **deps:** update dependency semver-parser to ^4.1.8 ([#2216](https://github.com/homarr-labs/homarr/issues/2216)) ([46cfb23](https://github.com/homarr-labs/homarr/commit/46cfb2383b6628472d3972da2166884330bf6d24))
+* **deps:** update dependency trpc-to-openapi to ^2.1.3 ([#2244](https://github.com/homarr-labs/homarr/issues/2244)) ([c623a42](https://github.com/homarr-labs/homarr/commit/c623a420cadce677e39b99fceeb3f3a391f879ea))
+* **deps:** update dependency typescript-eslint to ^8.23.0 ([#2232](https://github.com/homarr-labs/homarr/issues/2232)) ([83044d2](https://github.com/homarr-labs/homarr/commit/83044d23dd7accb1b3a21cdde1e034969a494ccb))
+* **deps:** update testcontainers-node monorepo to ^10.18.0 ([#2259](https://github.com/homarr-labs/homarr/issues/2259)) ([7a8e671](https://github.com/homarr-labs/homarr/commit/7a8e67120576b333bfcf73171b54ccfeeda0d44a))
+* **deps:** update turbo monorepo to ^2.4.0 ([#2207](https://github.com/homarr-labs/homarr/issues/2207)) ([6ce7bc0](https://github.com/homarr-labs/homarr/commit/6ce7bc0ee2dcd5150d72fdbc2070c05ba836ebd5))
+* foreign key reference default search engine ([#2211](https://github.com/homarr-labs/homarr/issues/2211)) ([26468a4](https://github.com/homarr-labs/homarr/commit/26468a413795afa7cc3444058bfc73435fb7f2a0))
+* make system health temp optional ([#2247](https://github.com/homarr-labs/homarr/issues/2247)) ([da09826](https://github.com/homarr-labs/homarr/commit/da098263930c9c9611a1505d52d3816bd2a49e7e))
+
+## [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.14.0-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"]

apps/nextjs/next.config.ts

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

apps/nextjs/package.json

@@ -18,13 +18,16 @@
     "@homarr/analytics": "workspace:^0.1.0",
     "@homarr/api": "workspace:^0.1.0",
     "@homarr/auth": "workspace:^0.1.0",
+    "@homarr/boards": "workspace:^0.1.0",
     "@homarr/certificates": "workspace:^0.1.0",
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/cron-job-status": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
+    "@homarr/docker": "workspace:^0.1.0",
     "@homarr/form": "workspace:^0.1.0",
-    "@homarr/gridstack": "^1.11.3",
+    "@homarr/gridstack": "^1.12.0",
+    "@homarr/icons": "workspace:^0.1.0",
     "@homarr/integrations": "workspace:^0.1.0",
     "@homarr/log": "workspace:^",
     "@homarr/modals": "workspace:^0.1.0",
@@ -34,23 +37,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/colors-generator": "^7.16.3",
-    "@mantine/core": "^7.16.0",
+    "@mantine/core": "^7.16.3",
-    "@mantine/dropzone": "^7.16.0",
+    "@mantine/dropzone": "^7.16.3",
-    "@mantine/hooks": "^7.16.0",
+    "@mantine/hooks": "^7.16.3",
-    "@mantine/modals": "^7.16.0",
+    "@mantine/modals": "^7.16.3",
-    "@mantine/tiptap": "^7.16.0",
+    "@mantine/tiptap": "^7.16.3",
     "@million/lint": "1.0.14",
-    "@t3-oss/env-nextjs": "^0.11.1",
+    "@t3-oss/env-nextjs": "^0.12.0",
-    "@tabler/icons-react": "^3.28.1",
+    "@tabler/icons-react": "^3.30.0",
-    "@tanstack/react-query": "^5.64.1",
+    "@tanstack/react-query": "^5.66.0",
-    "@tanstack/react-query-devtools": "^5.64.1",
+    "@tanstack/react-query-devtools": "^5.66.0",
-    "@tanstack/react-query-next-experimental": "5.64.1",
+    "@tanstack/react-query-next-experimental": "^5.66.0",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
@@ -62,34 +66,35 @@
     "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.12.0",
     "mantine-react-table": "2.0.0-beta.8",
-    "next": "15.1.4",
+    "next": "15.1.7",
     "postcss-preset-mantine": "^1.17.0",
     "prismjs": "^1.29.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-error-boundary": "^5.0.0",
     "react-simple-code-editor": "^0.14.1",
-    "sass": "^1.83.4",
+    "sass": "^1.85.0",
     "superjson": "2.2.2",
-    "swagger-ui-react": "^5.18.2",
+    "swagger-ui-react": "^5.18.3",
-    "use-deep-compare-effect": "^1.8.1"
+    "use-deep-compare-effect": "^1.8.1",
+    "zod": "^3.24.2"
   },
   "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/chroma-js": "3.1.1",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.13.4",
     "@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.20.1",
     "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 { clientApi } from "@homarr/api/client";
-import { createHeadersCallbackForSource } from "@homarr/api/shared";
+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)/_client.tsx

@@ -5,12 +5,13 @@ import { Box, LoadingOverlay, Stack } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 
 import { BoardCategorySection } from "~/components/board/sections/category-section";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";
 import { BoardBackgroundVideo } from "~/components/layout/background";
 import { fullHeightWithoutHeaderAndFooter } from "~/constants";
-import { useIsBoardReady, useRequiredBoard } from "./_context";
+import { useIsBoardReady } from "./_ready-context";
 
 let boardName: string | null = null;
 

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

@@ -1,118 +0,0 @@
-"use client";
-
-import type { Dispatch, PropsWithChildren, SetStateAction } from "react";
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-
-import { updateBoardName } from "./_client";
-
-const BoardContext = createContext<{
-  board: RouterOutputs["board"]["getHomeBoard"];
-  isReady: boolean;
-  markAsReady: (id: string) => void;
-  isEditMode: boolean;
-  setEditMode: Dispatch<SetStateAction<boolean>>;
-} | null>(null);
-
-export const BoardProvider = ({
-  children,
-  initialBoard,
-}: PropsWithChildren<{
-  initialBoard: RouterOutputs["board"]["getBoardByName"];
-}>) => {
-  const pathname = usePathname();
-  const utils = clientApi.useUtils();
-  const [readySections, setReadySections] = useState<string[]>([]);
-  const [isEditMode, setEditMode] = useState(false);
-  const { data } = clientApi.board.getBoardByName.useQuery(
-    { name: initialBoard.name },
-    {
-      initialData: initialBoard,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    },
-  );
-  // Update the board name so it can be used within updateBoard method
-  updateBoardName(initialBoard.name);
-
-  // Invalidate the board when the pathname changes
-  // This allows to refetch the board when it might have changed - e.g. if someone else added an item
-  useEffect(() => {
-    return () => {
-      setReadySections([]);
-      void utils.board.getBoardByName.invalidate({ name: initialBoard.name });
-    };
-  }, [pathname, utils, initialBoard.name]);
-
-  useEffect(() => {
-    setReadySections((previous) => previous.filter((id) => data.sections.some((section) => section.id === id)));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data.sections.length, setReadySections]);
-
-  const markAsReady = useCallback((id: string) => {
-    setReadySections((previous) => (previous.includes(id) ? previous : [...previous, id]));
-  }, []);
-
-  return (
-    <BoardContext.Provider
-      value={{
-        board: data,
-        isReady: data.sections.length === readySections.length,
-        markAsReady,
-        isEditMode,
-        setEditMode,
-      }}
-    >
-      {children}
-    </BoardContext.Provider>
-  );
-};
-
-export const useMarkSectionAsReady = () => {
-  const context = useContext(BoardContext);
-
-  if (!context) {
-    throw new Error("Board is required");
-  }
-
-  return context.markAsReady;
-};
-
-export const useIsBoardReady = () => {
-  const context = useContext(BoardContext);
-
-  if (!context) {
-    throw new Error("Board is required");
-  }
-
-  return context.isReady;
-};
-
-export const useRequiredBoard = () => {
-  const optionalBoard = useOptionalBoard();
-
-  if (!optionalBoard) {
-    throw new Error("Board is required");
-  }
-
-  return optionalBoard;
-};
-
-export const useOptionalBoard = () => {
-  const context = useContext(BoardContext);
-
-  return context?.board;
-};
-
-export const useEditMode = () => {
-  const context = useContext(BoardContext);
-
-  if (!context) {
-    throw new Error("Board is required");
-  }
-
-  return [context.isEditMode, context.setEditMode] as const;
-};

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,
+            icon: !isNullOrWhitespace(board.faviconImageUrl) ? board.faviconImageUrl : undefined,
-            apple: 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)/_custom-css.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRequiredBoard } from "./_context";
+import { useRequiredBoard } from "@homarr/boards/context";
 
 export const CustomCss = () => {
   const board = useRequiredBoard();

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,14 +10,18 @@ import {
   IconBox,
   IconBoxAlignTop,
   IconChevronDown,
+  IconLayoutBoard,
   IconPencil,
   IconPencilOff,
   IconPlus,
+  IconReplace,
   IconResize,
   IconSettings,
 } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
@@ -29,7 +34,6 @@ import { CategoryEditModal } from "~/components/board/sections/category/category
 import { useDynamicSectionActions } from "~/components/board/sections/dynamic/dynamic-actions";
 import { HeaderButton } from "~/components/layout/header/button";
 import { env } from "~/env";
-import { useEditMode, useRequiredBoard } from "./_context";
 
 export const BoardContentHeaderActions = () => {
   const [isEditMode] = useEditMode();
@@ -49,6 +53,8 @@ export const BoardContentHeaderActions = () => {
       <HeaderButton href={`/boards/${board.name}/settings`}>
         <IconSettings stroke={1.5} />
       </HeaderButton>
+
+      <SelectBoardsMenu />
     </>
   );
 };
@@ -114,7 +120,7 @@ const AddMenu = () => {
 };
 
 const EditModeMenu = () => {
-  const [isEditMode, setEditMode] = useEditMode();
+  const [isEditMode, { open, close }] = useEditMode();
   const board = useRequiredBoard();
   const utils = clientApi.useUtils();
   const t = useScopedI18n("board.action.edit");
@@ -126,7 +132,7 @@ const EditModeMenu = () => {
       });
       void utils.board.getBoardByName.invalidate({ name: board.name });
       void revalidatePathActionAsync(`/boards/${board.name}`);
-      setEditMode(false);
+      close();
     },
     onError() {
       showErrorNotification({
@@ -138,8 +144,8 @@ const EditModeMenu = () => {
 
   const toggle = useCallback(() => {
     if (isEditMode) return saveBoard(board);
-    setEditMode(true);
+    open();
-  }, [board, isEditMode, saveBoard, setEditMode]);
+  }, [board, isEditMode, saveBoard, open]);
 
   useHotkeys([["mod+e", toggle]]);
   usePreventLeaveWithDirty(isEditMode);
@@ -151,6 +157,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]/boards/(content)/_ready-context.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+
+import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
+
+const BoardReadyContext = createContext<{
+  isReady: boolean;
+  markAsReady: (id: string) => void;
+} | null>(null);
+
+export const BoardReadyProvider = ({ children }: PropsWithChildren) => {
+  const pathname = usePathname();
+  const utils = clientApi.useUtils();
+  const board = useRequiredBoard();
+  const [readySections, setReadySections] = useState<string[]>([]);
+
+  // Reset sections required for ready state
+  useEffect(() => {
+    return () => {
+      setReadySections([]);
+    };
+  }, [pathname, utils]);
+
+  useEffect(() => {
+    setReadySections((previous) => previous.filter((id) => board.sections.some((section) => section.id === id)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [board.sections.length, setReadySections]);
+
+  const markAsReady = useCallback((id: string) => {
+    setReadySections((previous) => (previous.includes(id) ? previous : [...previous, id]));
+  }, []);
+
+  return (
+    <BoardReadyContext.Provider
+      value={{
+        isReady: board.sections.length === readySections.length,
+        markAsReady,
+      }}
+    >
+      {children}
+    </BoardReadyContext.Provider>
+  );
+};
+
+export const useMarkSectionAsReady = () => {
+  const context = useContext(BoardReadyContext);
+
+  if (!context) {
+    throw new Error("BoardReadyProvider is required");
+  }
+
+  return context.markAsReady;
+};
+
+export const useIsBoardReady = () => {
+  const context = useContext(BoardReadyContext);
+
+  if (!context) {
+    throw new Error("BoardReadyProvider is required");
+  }
+
+  return context.isReady;
+};

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

@@ -4,10 +4,10 @@ import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
 import { createTheme, darken, lighten, MantineProvider } from "@mantine/core";
 
+import { useRequiredBoard } from "@homarr/boards/context";
 import type { ColorScheme } from "@homarr/definitions";
 
 import { useColorSchemeManager } from "../../_client-providers/mantine";
-import { useRequiredBoard } from "./_context";
 
 export const BoardMantineProvider = ({
   children,

apps/nextjs/src/app/[locale]/boards/[name]/settings/_behavior.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Button, Group, Stack, Switch } from "@mantine/core";
+
+import { useForm } from "@homarr/form";
+import { useI18n } from "@homarr/translation/client";
+
+import type { Board } from "../../_types";
+import { useSavePartialSettingsMutation } from "./_shared";
+
+interface Props {
+  board: Board;
+}
+
+export const BehaviorSettingsContent = ({ board }: Props) => {
+  const t = useI18n();
+  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
+  const form = useForm({
+    initialValues: {
+      disableStatus: board.disableStatus,
+    },
+  });
+
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        savePartialSettings({
+          id: board.id,
+          ...values,
+        });
+      })}
+    >
+      <Stack>
+        <Switch
+          label={t("board.field.disableStatus.label")}
+          description={t("board.field.disableStatus.description")}
+          {...form.getInputProps("disableStatus", { type: "checkbox" })}
+        />
+
+        <Group justify="end">
+          <Button type="submit" loading={isPending} color="teal">
+            {t("common.action.saveChanges")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};

apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx

@@ -5,11 +5,11 @@ import { useRouter } from "next/navigation";
 import { Button, Divider, Group, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { BoardRenameModal } from "~/components/board/modals/board-rename-modal";
-import { useRequiredBoard } from "../../(content)/_context";
 import classes from "./danger.module.css";
 
 export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility: boolean }) => {

apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx

@@ -5,13 +5,13 @@ import { Button, Grid, Group, Loader, Stack, TextInput, Tooltip } from "@mantine
 import { useDebouncedValue, useDocumentTitle, useFavicon } from "@mantine/hooks";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
+import { useUpdateBoard } from "@homarr/boards/updater";
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";
 
 import { createMetaTitle } from "~/metadata";
 import type { Board } from "../../_types";
-import { useUpdateBoard } from "../../(content)/_client";
 import { useSavePartialSettingsMutation } from "./_shared";
 
 interface Props {

apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx

@@ -4,6 +4,7 @@ import { AccordionControl, AccordionItem, AccordionPanel, Container, Stack, Text
 import {
   IconAlertTriangle,
   IconBrush,
+  IconClick,
   IconFileTypeCss,
   IconLayout,
   IconPhoto,
@@ -23,6 +24,7 @@ import type { TablerIcon } from "@homarr/ui";
 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
 import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
 import { BackgroundSettingsContent } from "./_background";
+import { BehaviorSettingsContent } from "./_behavior";
 import { BoardAccessSettings } from "./_board-access";
 import { ColorSettingsContent } from "./_colors";
 import { CustomCssSettingsContent } from "./_customCss";
@@ -95,6 +97,9 @@ export default async function BoardSettingsPage(props: Props) {
           <AccordionItemFor value="customCss" icon={IconFileTypeCss}>
             <CustomCssSettingsContent board={board} />
           </AccordionItemFor>
+          <AccordionItemFor value="behavior" icon={IconClick}>
+            <BehaviorSettingsContent board={board} />
+          </AccordionItemFor>
           {hasFullAccess && (
             <>
               <AccordionItemFor value="access" icon={IconUser}>

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

@@ -2,8 +2,9 @@
 
 import { IconLayoutBoard } from "@tabler/icons-react";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import { HeaderButton } from "~/components/layout/header/button";
-import { useRequiredBoard } from "./(content)/_context";
 
 export const BoardOtherHeaderActions = () => {
   const board = useRequiredBoard();

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -3,6 +3,8 @@ import { notFound } from "next/navigation";
 import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";
 
+import { BoardProvider } from "@homarr/boards/context";
+import { EditModeProvider } from "@homarr/boards/edit-mode";
 import { logger } from "@homarr/log";
 
 import { MainHeader } from "~/components/layout/header";
@@ -10,9 +12,9 @@ import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
 import { ClientShell } from "~/components/layout/shell";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import type { Board } from "./_types";
-import { BoardProvider } from "./(content)/_context";
 import type { Params } from "./(content)/_creator";
 import { CustomCss } from "./(content)/_custom-css";
+import { BoardReadyProvider } from "./(content)/_ready-context";
 import { BoardMantineProvider } from "./(content)/_theme";
 
 interface CreateBoardLayoutProps<TParams extends Params> {
@@ -42,17 +44,21 @@ export const createBoardLayout = <TParams extends Params>({
 
     return (
       <BoardProvider initialBoard={initialBoard}>
-        <BoardMantineProvider defaultColorScheme={colorScheme}>
+        <BoardReadyProvider>
-          <CustomCss />
+          <EditModeProvider>
-          <ClientShell hasNavigation={false}>
+            <BoardMantineProvider defaultColorScheme={colorScheme}>
-            <MainHeader
+              <CustomCss />
-              logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
+              <ClientShell hasNavigation={false}>
-              actions={headerActions}
+                <MainHeader
-              hasNavigation={false}
+                  logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
-            />
+                  actions={headerActions}
-            <AppShellMain>{children}</AppShellMain>
+                  hasNavigation={false}
-          </ClientShell>
+                />
-        </BoardMantineProvider>
+                <AppShellMain>{children}</AppShellMain>
+              </ClientShell>
+            </BoardMantineProvider>
+          </EditModeProvider>
+        </BoardReadyProvider>
       </BoardProvider>
     );
   };

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,21 @@ 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,
+            enableStatusByDefault: serverSettings.board.enableStatusByDefault,
+            forceDisableStatus: serverSettings.board.forceDisableStatus,
+          },
+          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) => {
+export const AppForm = ({
-  const { submitButtonTranslation, handleSubmit, initialValues, isPending } = props;
+  buttonLabels,
+  handleSubmit: originalHandleSubmit,
+  initialValues,
+  isPending,
+}: AppFormProps) => {
   const t = useI18n();
 
   const form = useZodForm(validation.app.manage, {
-    initialValues: initialValues ?? {
+    initialValues: {
-      name: "",
+      name: initialValues?.name ?? "",
-      description: "",
+      description: initialValues?.description ?? "",
-      iconUrl: "",
+      iconUrl: initialValues?.iconUrl ?? "",
-      href: "",
+      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 { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import type { validation } from "@homarr/validation";
-import type { validation, z } 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"),
+        title: tScoped("success.title"),
-        message: t("success.message"),
+        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"),
+        title: tScoped("error.title"),
-        message: t("error.message"),
+        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 { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import type { validation } from "@homarr/validation";
-import type { validation, z } 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"),
+        title: tScoped("error.title"),
-        message: t("error.message"),
+        message: tScoped("error.message"),
       });
     },
   });
 
   const handleSubmit = useCallback(
-    (values: z.infer<typeof validation.app.manage>) => {
+    (values: z.infer<typeof validation.app.manage>, redirect: boolean, afterSuccess?: () => void) => {
-      mutate(values);
+      mutate(values, {
-    },
+        onSuccess() {
-    [mutate],
+          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">
+      <CardSection>
-        <Group wrap="nowrap">
+        <Group gap={0} wrap="nowrap">
-          <Button component={Link} href={`/boards/${board.name}`} variant="default" fullWidth>
+          <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
+              message:
-                ? testConnectionError.message
+                testConnectionError.message ??
-                : t(`integration.testConnection.notification.${testConnectionError.key}.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
+              message:
-                ? testConnectionError.message
+                testConnectionError.message ??
-                : t(`integration.testConnection.notification.${testConnectionError.key}.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">
+    <ActiveTabAccordion defaultValue={activeTab} radius="lg" classNames={classes}>
-      {objectEntries(grouppedIntegrations).map(([kind, integrations]) => (
+      {entries.map(([kind, integrations], index) => (
-        <AccordionItem key={kind} value={kind}>
+        <AccordionItem key={kind} value={kind} data-first={index === 0} data-last={index === entries.length - 1}>
-          <AccordionControl icon={<IntegrationAvatar size="sm" kind={kind} />}>
+          <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,
+  IconHelpSquareRoundedFilled,
-  IconInfoSmall,
+  IconHomeFilled,
-  IconLayoutDashboard,
+  IconLayoutDashboardFilled,
-  IconLogs,
   IconMailForward,
-  IconPhoto,
+  IconPhotoFilled,
-  IconPlug,
+  IconPointerFilled,
-  IconQuestionMark,
-  IconReport,
   IconSearch,
-  IconSettings,
+  IconSettingsFilled,
-  IconTool,
+  IconUserFilled,
-  IconUser,
   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/settings/_components/board-settings-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Group, Text } from "@mantine/core";
+import { Group, Switch, Text } from "@mantine/core";
 import { IconLayoutDashboard } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -56,6 +56,18 @@ export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSett
             )}
             {...form.getInputProps("mobileHomeBoardId")}
           />
+
+          <Text fw={500}>{tBoard("status.title")}</Text>
+          <Switch
+            {...form.getInputProps("enableStatusByDefault", { type: "checkbox" })}
+            label={tBoard("status.enableStatusByDefault.label")}
+            description={tBoard("status.enableStatusByDefault.description")}
+          />
+          <Switch
+            {...form.getInputProps("forceDisableStatus", { type: "checkbox" })}
+            label={tBoard("status.forceDisableStatus.label")}
+            description={tBoard("status.forceDisableStatus.description")}
+          />
         </>
       )}
     </CommonSettingsForm>

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

@@ -1,14 +1,15 @@
 "use client";
 
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
-import { Button, Group, Stack, Text, Title } from "@mantine/core";
+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} />
+                <IconCertificate
-                <Stack flex={1} gap="xs">
+                  color={getMantineColor(iconColor(cert.x509.validToDate), 6)}
-                  <Group justify="space-between">
+                  style={{ minWidth: 32 }}
-                    <Text fw={500}>{cert.x509.subject}</Text>
+                  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 ?? "",
+      homeBoardId: user.homeBoardId,
-      mobileHomeBoardId: user.mobileHomeBoardId ?? "",
+      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">
+      {session?.user.id === user.id && (
-        <Title order={2}>{tGeneral("item.language")}</Title>
+        <Stack mb="lg">
-        <CurrentLanguageCombobox />
+          <Title order={2}>{tGeneral("item.language")}</Title>
-      </Stack>
+          <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>
+        <Title order={2}>{tGeneral("item.search")}</Title>
-        <ChangeDefaultSearchEngineForm user={user} searchEnginesData={searchEngines} />
+        <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/[locale]/widgets/[kind]/_content.tsx

@@ -9,6 +9,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { showSuccessNotification } from "@homarr/notifications";
+import { useSettings } from "@homarr/settings";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { BoardItemAdvancedOptions } from "@homarr/validation";
 import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
@@ -29,6 +30,7 @@ interface WidgetPreviewPageContentProps {
 }
 
 export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPreviewPageContentProps) => {
+  const settings = useSettings();
   const t = useScopedI18n("widgetPreview");
   const { openModal: openWidgetEditModal } = useModalAction(WidgetEditModal);
   const { openModal: openPreviewDimensionsModal } = useModalAction(PreviewDimensionsModal);
@@ -43,7 +45,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
     integrationIds: string[];
     advancedOptions: BoardItemAdvancedOptions;
   }>({
-    options: reduceWidgetOptionsWithDefaultValues(kind, {}),
+    options: reduceWidgetOptionsWithDefaultValues(kind, settings, {}),
     integrationIds: [],
     advancedOptions: {
       customCssClasses: [],
@@ -63,8 +65,9 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
           (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
       ),
       integrationSupport: "supportedIntegrations" in currentDefinition,
+      settings,
     });
-  }, [currentDefinition, integrationData, kind, openWidgetEditModal, state]);
+  }, [currentDefinition, integrationData, kind, openWidgetEditModal, settings, state]);
 
   const Comp = loadWidgetDynamic(kind);
 

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 { useUpdateBoard } from "@homarr/boards/updater";
-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) => {
+    (input: CreateItemInput) => {
-      updateBoard((previous) => {
+      updateBoard(createItemCallback(input));
-        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),
-            };
-          }),
-        };
-      });
     },
     [updateBoard],
   );
 
   const duplicateItem = useCallback(
-    ({ itemId }: DuplicateItem) => {
+    ({ itemId }: DuplicateItemInput) => {
-      updateBoard((previous) => {
+      updateBoard(duplicateItemCallback({ itemId }));
-        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),
-            };
-          }),
-        };
-      });
     },
     [updateBoard],
   );

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

@@ -5,11 +5,13 @@ import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "node_modules/@homarr/widgets/src/errors";
 import { ErrorBoundary } from "react-error-boundary";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { useSettings } from "@homarr/settings";
 import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { useEditMode, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import { BoardItemMenu } from "./item-menu";
@@ -53,11 +55,12 @@ interface InnerContentProps {
 }
 
 const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
+  const settings = useSettings();
   const board = useRequiredBoard();
   const [isEditMode] = useEditMode();
   const Comp = loadWidgetDynamic(item.kind);
   const { definition } = widgetImports[item.kind];
-  const options = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
+  const options = reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options);
   const newItem = { ...item, options };
   const { updateItemOptions } = useItemActions();
   const updateOptions = ({ newOptions }: { newOptions: Record<string, unknown> }) =>
@@ -79,7 +82,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-menu.tsx

@@ -3,13 +3,14 @@ import { ActionIcon, Menu } from "@mantine/core";
 import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useEditMode } from "@homarr/boards/edit-mode";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { widgetImports } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
 import { ItemMoveModal } from "./item-move-modal";
@@ -35,6 +36,7 @@ export const BoardItemMenu = ({
   const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
   const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
   const { gridstack } = useSectionContext().refs;
+  const settings = useSettings();
 
   // Reset error boundary on next render if item has been edited
   useEffect(() => {
@@ -75,6 +77,7 @@ export const BoardItemMenu = ({
           (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
       ),
       integrationSupport: "supportedIntegrations" in currentDefinition,
+      settings,
     });
   };
 

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 { useRequiredBoard } from "@homarr/boards/context";
+
 import type { CategorySection } from "~/app/[locale]/boards/_types";
 import { CategoryMenu } from "./category/category-menu";
 import { GridStack } from "./gridstack/gridstack";
+import classes from "./item.module.css";
 
 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

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 
+import { useUpdateBoard } from "@homarr/boards/updater";
 import { createId } from "@homarr/db/client";
 
 import type { CategorySection, EmptySection } from "~/app/[locale]/boards/_types";
-import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
 import type { MoveCategoryInput } from "./actions/move-category";
 import { moveCategoryCallback } from "./actions/move-category";
 import type { RemoveCategoryInput } from "./actions/remove-category";
@@ -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,12 +1,15 @@
 import { useCallback } from "react";
 
+import { fetchApi } from "@homarr/api/client";
 import { createId } from "@homarr/db/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
 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 +100,29 @@ export const useCategoryMenuActions = (category: CategorySection) => {
     );
   }, [category, openModal, renameCategory, t]);
 
+  const settings = useSettings();
+  const openAllInNewTabs = useCallback(async () => {
+    const appIds = filterByItemKind(category.items, settings, "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, settings]);
+
   return {
     addCategoryAbove,
     addCategoryBelow,
@@ -104,5 +130,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,11 +13,12 @@ import {
   IconTrash,
 } from "@tabler/icons-react";
 
+import { useEditMode } from "@homarr/boards/edit-mode";
+import type { MaybePromise } from "@homarr/common/types";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { useCategoryMenuActions } from "./category-menu-actions";
 
 interface Props {
@@ -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) => (
+        {actions.map((action) => {
-          <React.Fragment key={action.label}>
+          return (
-            {"group" in action && <Menu.Label>{t(action.group)}</Menu.Label>}
+            <React.Fragment key={action.label}>
-            <Menu.Item
+              {"group" in action && <Menu.Label>{t(action.group)}</Menu.Label>}
-              leftSection={<action.icon size="1rem" />}
+              <Menu.Item
-              onClick={action.onClick}
+                leftSection={<action.icon size="1rem" />}
-              color={"color" in action ? action.color : undefined}
+                onClick={action.onClick}
-            >
+                color={"color" in action ? action.color : undefined}
-              {t(action.label)}
+              >
-            </Menu.Item>
+                {t(action.label)}
-          </React.Fragment>
+              </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) => {
-const useNonEditModeActions = (_category: CategorySection) => {
+  const { openAllInNewTabs } = useCategoryMenuActions(category);
-  return [] as const satisfies ActionDefinition[];
+  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,23 @@
+import type { WidgetKind } from "@homarr/definitions";
+import type { SettingsContextProps } from "@homarr/settings";
+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[],
+  settings: SettingsContextProps,
+  kind: TKind,
+) => {
+  return items
+    .filter((item) => item.kind === kind)
+    .map((item) => ({
+      ...item,
+      options: reduceWidgetOptionsWithDefaultValues(
+        kind,
+        settings,
+        item.options,
+      ) as WidgetComponentProps<TKind>["options"],
+    }));
+};

apps/nextjs/src/components/board/sections/content.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from "react";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import type { DynamicSection, Item, Section } from "~/app/[locale]/boards/_types";
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { BoardItemContent } from "../items/item-content";
 import { BoardDynamicSection } from "./dynamic-section";
 import { GridStackItem } from "./gridstack/gridstack-item";

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

@@ -1,7 +1,8 @@
 import { Box, Card } from "@mantine/core";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import type { DynamicSection } from "~/app/[locale]/boards/_types";
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { BoardDynamicSectionMenu } from "./dynamic/dynamic-menu";
 import { GridStack } from "./gridstack/gridstack";
 import classes from "./item.module.css";

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

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 
+import { useUpdateBoard } from "@homarr/boards/updater";
 import { createId } from "@homarr/db/client";
 
 import type { DynamicSection, EmptySection } from "~/app/[locale]/boards/_types";
-import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
 
 interface RemoveDynamicSection {
   id: string;

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

@@ -1,11 +1,11 @@
 import { ActionIcon, Menu } from "@mantine/core";
 import { IconDotsVertical, IconTrash } from "@tabler/icons-react";
 
+import { useEditMode } from "@homarr/boards/edit-mode";
 import { useConfirmModal } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import type { DynamicSection } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { useDynamicSectionActions } from "./dynamic-actions";
 
 export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSection }) => {

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

@@ -1,7 +1,8 @@
 import combineClasses from "clsx";
 
+import { useEditMode } from "@homarr/boards/edit-mode";
+
 import type { EmptySection } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { GridStack } from "./gridstack/gridstack";
 import { useSectionItems } from "./use-section-items";
 

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -2,10 +2,12 @@ import type { RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
 import { useElementSize } from "@mantine/hooks";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
 import type { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode } from "@homarr/gridstack";
 
 import type { Section } from "~/app/[locale]/boards/_types";
-import { useEditMode, useMarkSectionAsReady, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
+import { useMarkSectionAsReady } from "~/app/[locale]/boards/(content)/_ready-context";
 import { useItemActions } from "../../items/item-actions";
 import { useSectionActions } from "../section-actions";
 import { initializeGridstack } from "./init-gridstack";

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

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 
-import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
+import { useUpdateBoard } from "@homarr/boards/updater";
 
 interface MoveAndResizeInnerSection {
   innerSectionId: string;

apps/nextjs/src/components/board/sections/use-section-items.ts

@@ -1,5 +1,6 @@
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import type { Section } from "~/app/[locale]/boards/_types";
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 
 export const useSectionItems = (section: Section) => {
   const board = useRequiredBoard();

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) => {
+export const IconPicker = ({ value: propsValue, onChange, error, onFocus, onBlur }: IconPickerProps) => {
-  const [value, setValue] = useState<string>(initialValue ?? "");
+  const [value, setValue] = useUncontrolled({
-  const [search, setSearch] = useState(initialValue ?? "");
+    value: propsValue,
-  const [previewUrl, setPreviewUrl] = useState<string | null>(initialValue ?? null);
+    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/background.tsx

@@ -1,7 +1,7 @@
 import { usePathname } from "next/navigation";
 import type { AppShellProps } from "@mantine/core";
 
-import { useOptionalBoard } from "~/app/[locale]/boards/(content)/_context";
+import { useOptionalBoard } from "@homarr/boards/context";
 
 const supportedVideoFormats = ["mp4", "webm", "ogg"];
 const isVideo = (url: string) => supportedVideoFormats.some((format) => url.toLowerCase().endsWith(`.${format}`));

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/logo/board-logo.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import { homarrLogoPath, homarrPageTitle } from "./homarr-logo";
 import type { LogoWithTitleProps } from "./logo";
 import { Logo, LogoWithTitle } from "./logo";

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, iconProps, ...props } = link;
-          const Icon = <TablerIcon size={20} stroke={1.5} />;
+          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: {
+  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(),
-  },
   /**
    * 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.4",
     "dotenv-cli": "^8.0.0",
-    "eslint": "^9.18.0",
+    "eslint": "^9.20.1",
     "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",
+    "@types/ws": "^8.5.14",
-    "eslint": "^9.18.0",
+    "eslint": "^9.20.1",
     "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>