chore(release): 1.7.0 [skip ci]

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

.env.example

@@ -12,6 +12,8 @@ AUTH_SECRET="supersecret"
 # or starting the project without any (which will show a randomly generated one).
 SECRET_ENCRYPTION_KEY=0000000000000000000000000000000000000000000000000000000000000000
 
+LOG_LEVEL='info'
+
 # This is how you can use the sqlite driver:
 DB_DRIVER='better-sqlite3'
 DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
@@ -32,7 +34,4 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
 # If it is used, please use the full path to the directory where the certificates are stored.
 # LOCAL_CERTIFICATE_PATH='FULL_PATH_TO_CERTIFICATES'
 
-TURBO_TELEMETRY_DISABLED=1
-
-# Configure logging to use winston logger
-NODE_OPTIONS='-r @homarr/log/override'
+TURBO_TELEMETRY_DISABLED=1

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -31,6 +31,15 @@ body:
       label: Version
       description: What version of Homarr are you running?
       options:
+        - 1.6.0
+        - 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
@@ -75,4 +84,4 @@ body:
         - Other (describe in "additional information")
       default: 0
     validations:
-      required: false
+      required: false

.github/pull_request_template.md

@@ -6,7 +6,7 @@
 
 **Thank you for your contribution. Please ensure that your pull request meets the following pull request:**
 
-- [ ] Builds without warnings or errors (``pnpm buid``, autofix with ``pnpm format:fix``)
+- [ ] Builds without warnings or errors (``pnpm build``, autofix with ``pnpm format:fix``)
 - [ ] Pull request targets ``dev`` branch
 - [ ] Commits follow the [conventional commits guideline](https://www.conventionalcommits.org/en/v1.0.0/)
 - [ ] No shorthand variable names are used (eg. ``x``, ``y``, ``i`` or any abbrevation)

.github/workflows/deployment-docker-image.yml

@@ -96,10 +96,11 @@ jobs:
         run: |
           git config user.name "Releases Homarr"
           git config user.email "175486441+homarr-releases[bot]@users.noreply.github.com"
+          git remote set-url origin https://x-access-token:${{ steps.obtainToken.outputs.token }}@github.com/${{ github.repository }}.git
           git fetch origin dev
           git checkout dev
           git pull origin dev
-          git merge ${{ github.ref_name }}
+          git rebase ${{ github.ref_name }}
           git push origin dev
   deploy:
     name: Deploy docker image

.nvmrc

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

CHANGELOG.md

@@ -1,3 +1,206 @@
+## [1.7.0](https://github.com/homarr-labs/homarr/compare/v1.6.0...v1.7.0) (2025-02-21)
+
+### Features
+
+* add tile border radius ([#2338](https://github.com/homarr-labs/homarr/issues/2338)) ([7705bc4](https://github.com/homarr-labs/homarr/commit/7705bc44ae7c93751e718b019c98c11369c221af))
+* **board:** allow to set icon color of widgets ([#2228](https://github.com/homarr-labs/homarr/issues/2228)) ([de5c34a](https://github.com/homarr-labs/homarr/commit/de5c34ab079c308c80cc3b1ba8f9c8a265e3a1c3))
+* **cli:** add fix-username command to make all usernames lowercase ([#2366](https://github.com/homarr-labs/homarr/issues/2366)) ([8b7caf1](https://github.com/homarr-labs/homarr/commit/8b7caf1d7dfebb8121cefd301fa72ef59601d410))
+* downgrade log level callback succeeded ([#2329](https://github.com/homarr-labs/homarr/issues/2329)) ([22a341e](https://github.com/homarr-labs/homarr/commit/22a341ea4d7365fb51781f96791394315afd8860))
+* **groups:** add home board settings ([#2321](https://github.com/homarr-labs/homarr/issues/2321)) ([ffe7259](https://github.com/homarr-labs/homarr/commit/ffe72598026e5e27588b18feeaaf7d30065d5536))
+* **logging:** add log level env variable ([#2299](https://github.com/homarr-labs/homarr/issues/2299)) ([67d48e1](https://github.com/homarr-labs/homarr/commit/67d48e11d7e1165540c66f86b299e55028d76788))
+* quick add app modal ([#2248](https://github.com/homarr-labs/homarr/issues/2248)) ([6420fee](https://github.com/homarr-labs/homarr/commit/6420feee729aa641c0545fa39308772e4a4b1af8))
+* redirect to login screen when no global home board ([#2379](https://github.com/homarr-labs/homarr/issues/2379)) ([311ae80](https://github.com/homarr-labs/homarr/commit/311ae80667715fccffbfa73699c0770d483c3434))
+
+### Bug Fixes
+
+* **deps:** update dependency jotai to ^2.12.1 ([#2354](https://github.com/homarr-labs/homarr/issues/2354)) ([c59fbfc](https://github.com/homarr-labs/homarr/commit/c59fbfc677b10ee20c2e698d9837af1aa098854b))
+* **deps:** update dependency mantine-react-table to v2.0.0-beta.9 ([#2348](https://github.com/homarr-labs/homarr/issues/2348)) ([4764f41](https://github.com/homarr-labs/homarr/commit/4764f41e1bf77f7934840a84e25b2989fc1e7c7c))
+* **deps:** update dependency next-intl to v3.26.4 ([#2361](https://github.com/homarr-labs/homarr/issues/2361)) ([241037f](https://github.com/homarr-labs/homarr/commit/241037fc2a699249f317e5e434ac603cee4e460d))
+* **deps:** update dependency next-intl to v3.26.5 ([#2386](https://github.com/homarr-labs/homarr/issues/2386)) ([afd7bce](https://github.com/homarr-labs/homarr/commit/afd7bcea841e906003ec90516b033214ad412473))
+* **deps:** update dependency octokit to ^4.1.2 ([#2333](https://github.com/homarr-labs/homarr/issues/2333)) ([33ef9f6](https://github.com/homarr-labs/homarr/commit/33ef9f66782a59047878a3e82330128fdcabfa93))
+* **deps:** update dependency prettier to ^3.5.1 ([#2284](https://github.com/homarr-labs/homarr/issues/2284)) ([f6c9230](https://github.com/homarr-labs/homarr/commit/f6c923017c6b4ac9670843bba5dee2f52afd1918))
+* **deps:** update dependency swagger-ui-react to ^5.19.0 ([#2358](https://github.com/homarr-labs/homarr/issues/2358)) ([91c61f8](https://github.com/homarr-labs/homarr/commit/91c61f8c06622893b90f668e30a615437d9bb549))
+* **deps:** update dependency tsx to v4.19.3 ([#2370](https://github.com/homarr-labs/homarr/issues/2370)) ([58babbf](https://github.com/homarr-labs/homarr/commit/58babbf88fecc401bf4e7baa52636a4a937bead2))
+* **deps:** update dependency typescript-eslint to ^8.24.1 ([#2360](https://github.com/homarr-labs/homarr/issues/2360)) ([146fe49](https://github.com/homarr-labs/homarr/commit/146fe499db0fe36c8822ad30a762738425fb6f50))
+* **deps:** update dependency ws to ^8.18.1 ([#2387](https://github.com/homarr-labs/homarr/issues/2387)) ([b58f64b](https://github.com/homarr-labs/homarr/commit/b58f64b05c09070d8c5cdc7f89b23768b9997405))
+* **deps:** update mantine monorepo to ^7.17.0 ([#2359](https://github.com/homarr-labs/homarr/issues/2359)) ([96a0717](https://github.com/homarr-labs/homarr/commit/96a071725e557e64d8951091063f047cb43a385b))
+* **deps:** update tanstack-query monorepo to ^5.66.2 ([#2341](https://github.com/homarr-labs/homarr/issues/2341)) ([f8fedef](https://github.com/homarr-labs/homarr/commit/f8fedefde9ae65923369b46876009f9f6cb27683))
+* **deps:** update tanstack-query monorepo to ^5.66.3 ([#2343](https://github.com/homarr-labs/homarr/issues/2343)) ([f32af66](https://github.com/homarr-labs/homarr/commit/f32af66a6ad4676530265bfd1052b56308d4d40f))
+* **deps:** update tanstack-query monorepo to ^5.66.4 ([#2355](https://github.com/homarr-labs/homarr/issues/2355)) ([602faf6](https://github.com/homarr-labs/homarr/commit/602faf622140af1cc4ac92f8a54a56924d809f67))
+* **deps:** update tanstack-query monorepo to ^5.66.6 ([#2357](https://github.com/homarr-labs/homarr/issues/2357)) ([bd0d910](https://github.com/homarr-labs/homarr/commit/bd0d910137194caef989f4dba360bcaf616e9ea4))
+* **deps:** update tanstack-query monorepo to ^5.66.7 ([#2364](https://github.com/homarr-labs/homarr/issues/2364)) ([e84cc5e](https://github.com/homarr-labs/homarr/commit/e84cc5e6ae32c78d4e2be4d57e2b97ad84094f5e))
+* **deps:** update tanstack-query monorepo to ^5.66.8 ([#2376](https://github.com/homarr-labs/homarr/issues/2376)) ([8b75966](https://github.com/homarr-labs/homarr/commit/8b7596642a8398af817eedbe2dd89e9bad3fd937))
+* **deps:** update tanstack-query monorepo to ^5.66.9 ([#2391](https://github.com/homarr-labs/homarr/issues/2391)) ([1cf36ed](https://github.com/homarr-labs/homarr/commit/1cf36ed4c776d6c99e1e1058dde9129475069aaf))
+* **medias:** svg files don't load in list ([#2381](https://github.com/homarr-labs/homarr/issues/2381)) ([52549a5](https://github.com/homarr-labs/homarr/commit/52549a598d039a9fa2165983698212564eb5233b))
+* missing cover types media organizers ([#2328](https://github.com/homarr-labs/homarr/issues/2328)) ([3257f61](https://github.com/homarr-labs/homarr/commit/3257f6101bdd8967089655507144dc4368390b8c))
+* omv integrations is unable to correctly retrieve the file system when using omv-zfs ([#2337](https://github.com/homarr-labs/homarr/issues/2337)) ([63e9623](https://github.com/homarr-labs/homarr/commit/63e96230e0e2831c787d3e520a6b8e9b4bddb2a7))
+* typo in pr template ([#2344](https://github.com/homarr-labs/homarr/issues/2344)) ([a62aa09](https://github.com/homarr-labs/homarr/commit/a62aa09db6c87573d579bcebc9f5d5c3ac133af2))
+* **widgets:** app icon not visible ([#2390](https://github.com/homarr-labs/homarr/issues/2390)) ([a54e078](https://github.com/homarr-labs/homarr/commit/a54e0783e2ad452c4db3d7ddb4e4bcd501a8687a))
+
+## [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"]
+CMD ["sh", "run.sh"]

apps/nextjs/next.config.ts

@@ -2,13 +2,13 @@
 import "@homarr/auth/env";
 import "@homarr/db/env";
 import "@homarr/common/env";
+import "@homarr/log/env";
+import "@homarr/docker/env";
 
 import type { NextConfig } from "next";
 import MillionLint from "@million/lint";
 import createNextIntlPlugin from "next-intl/plugin";
 
-import "./src/env.ts";
-
 // Package path does not work... so we need to use relative path
 const withNextIntl = createNextIntlPlugin("../../packages/translation/src/request.ts");
 

apps/nextjs/package.json

@@ -15,16 +15,24 @@
   },
   "prettier": "@homarr/prettier-config",
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@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/forms-collection": "workspace:^0.1.0",
+    "@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 +42,23 @@
     "@homarr/old-schema": "workspace:^0.1.0",
     "@homarr/redis": "workspace:^0.1.0",
     "@homarr/server-settings": "workspace:^0.1.0",
+    "@homarr/settings": "workspace:^0.1.0",
     "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^7.16.0",
-    "@mantine/core": "^7.16.0",
-    "@mantine/dropzone": "^7.16.0",
-    "@mantine/hooks": "^7.16.0",
-    "@mantine/modals": "^7.16.0",
-    "@mantine/tiptap": "^7.16.0",
+    "@mantine/colors-generator": "^7.17.0",
+    "@mantine/core": "^7.17.0",
+    "@mantine/dropzone": "^7.17.0",
+    "@mantine/hooks": "^7.17.0",
+    "@mantine/modals": "^7.17.0",
+    "@mantine/tiptap": "^7.17.0",
     "@million/lint": "1.0.14",
-    "@t3-oss/env-nextjs": "^0.11.1",
-    "@tabler/icons-react": "^3.28.1",
-    "@tanstack/react-query": "^5.64.1",
-    "@tanstack/react-query-devtools": "^5.64.1",
-    "@tanstack/react-query-next-experimental": "5.64.1",
+    "@tabler/icons-react": "^3.30.0",
+    "@tanstack/react-query": "^5.66.9",
+    "@tanstack/react-query-devtools": "^5.66.9",
+    "@tanstack/react-query-next-experimental": "^5.66.9",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
@@ -62,36 +70,37 @@
     "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",
-    "mantine-react-table": "2.0.0-beta.8",
-    "next": "15.1.4",
+    "jotai": "^2.12.1",
+    "mantine-react-table": "2.0.0-beta.9",
+    "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",
-    "use-deep-compare-effect": "^1.8.1"
+    "swagger-ui-react": "^5.19.0",
+    "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/node": "^22.10.7",
+    "@types/chroma-js": "3.1.1",
+    "@types/node": "^22.13.4",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "19.0.7",
-    "@types/react-dom": "19.0.3",
-    "@types/swagger-ui-react": "^4.18.3",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "@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",
+    "prettier": "^3.5.1",
     "typescript": "^5.7.3"
   }
 }

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

@@ -18,10 +18,9 @@ import superjson from "superjson";
 import type { SuperJSONResult } from "superjson";
 
 import type { AppRouter } from "@homarr/api";
-import { clientApi, getTrpcUrl } from "@homarr/api/client";
-import { createHeadersCallbackForSource } from "@homarr/api/shared";
-
-import { env } from "~/env";
+import { clientApi } from "@homarr/api/client";
+import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
+import { env } from "@homarr/common/env";
 
 const getWebSocketProtocol = () => {
   // window is not defined on server side
@@ -66,7 +65,7 @@ export function TRPCReactProvider(props: PropsWithChildren) {
       links: [
         loggerLink({
           enabled: (opts) =>
-            process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
+            env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
         }),
         splitLink({
           condition: ({ type }) => type === "subscription",
@@ -94,6 +93,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,
-            apple: board.faviconImageUrl ? board.faviconImageUrl : undefined,
+            icon: !isNullOrWhitespace(board.faviconImageUrl) ? board.faviconImageUrl : undefined,
+            apple: !isNullOrWhitespace(board.faviconImageUrl) ? board.faviconImageUrl : undefined,
           },
           appleWebApp: {
-            startupImage: { url: board.faviconImageUrl ? board.faviconImageUrl : "/logo/logo.png" },
+            startupImage: {
+              url: !isNullOrWhitespace(board.faviconImageUrl) ? board.faviconImageUrl : "/logo/logo.png",
+            },
           },
         };
       } catch (error) {

apps/nextjs/src/app/[locale]/boards/(content)/_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,15 +10,20 @@ 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 { env } from "@homarr/common/env";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
@@ -28,8 +34,6 @@ import { useCategoryActions } from "~/components/board/sections/category/categor
 import { CategoryEditModal } from "~/components/board/sections/category/category-edit-modal";
 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);
-  }, [board, isEditMode, saveBoard, setEditMode]);
+    open();
+  }, [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

@@ -2,12 +2,12 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
-import { createTheme, darken, lighten, MantineProvider } from "@mantine/core";
+import { colorsTuple, 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,
@@ -20,6 +20,7 @@ export const BoardMantineProvider = ({
     colors: {
       primaryColor: generateColors(board.primaryColor),
       secondaryColor: generateColors(board.secondaryColor),
+      iconColor: board.iconColor ? generateColors(board.iconColor) : colorsTuple("#000000"),
     },
     primaryColor: "primaryColor",
     autoContrast: true,

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

@@ -10,6 +10,7 @@ import {
   Group,
   InputWrapper,
   isLightColor,
+  Select,
   Slider,
   Stack,
   Text,
@@ -39,6 +40,8 @@ export const ColorSettingsContent = ({ board }: Props) => {
       primaryColor: board.primaryColor,
       secondaryColor: board.secondaryColor,
       opacity: board.opacity,
+      iconColor: board.iconColor ?? "",
+      itemRadius: board.itemRadius,
     },
   });
   const [showPreview, { toggle }] = useDisclosure(false);
@@ -98,6 +101,26 @@ export const ColorSettingsContent = ({ board }: Props) => {
               />
             </InputWrapper>
           </Grid.Col>
+          <Grid.Col span={{ sm: 12, md: 6 }}>
+            <ColorInput
+              label={t("board.field.iconColor.label")}
+              format="hex"
+              swatches={Object.values(theme.colors).map((color) => color[6])}
+              {...form.getInputProps("iconColor")}
+            />
+            <Select
+              label={t("board.field.itemRadius.label")}
+              description={t("board.field.itemRadius.description")}
+              data={[
+                { label: t("board.field.itemRadius.option.xs"), value: "xs" },
+                { label: t("board.field.itemRadius.option.sm"), value: "sm" },
+                { label: t("board.field.itemRadius.option.md"), value: "md" },
+                { label: t("board.field.itemRadius.option.lg"), value: "lg" },
+                { label: t("board.field.itemRadius.option.xl"), value: "xl" },
+              ]}
+              {...form.getInputProps("itemRadius")}
+            />
+          </Grid.Col>
         </Grid>
         <Group justify="end">
           <Button type="submit" loading={isPending} color="teal">

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,
@@ -22,9 +23,10 @@ import type { TablerIcon } from "@homarr/ui";
 
 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
 import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
+import { ColorSettingsContent } from "./_appereance";
 import { BackgroundSettingsContent } from "./_background";
+import { BehaviorSettingsContent } from "./_behavior";
 import { BoardAccessSettings } from "./_board-access";
-import { ColorSettingsContent } from "./_colors";
 import { CustomCssSettingsContent } from "./_customCss";
 import { DangerZoneSettingsContent } from "./_danger";
 import { GeneralSettingsContent } from "./_general";
@@ -89,12 +91,15 @@ export default async function BoardSettingsPage(props: Props) {
           <AccordionItemFor value="background" icon={IconPhoto}>
             <BackgroundSettingsContent board={board} />
           </AccordionItemFor>
-          <AccordionItemFor value="color" icon={IconBrush}>
+          <AccordionItemFor value="appearance" icon={IconBrush}>
             <ColorSettingsContent board={board} />
           </AccordionItemFor>
           <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

@@ -1,8 +1,11 @@
 import type { JSX, PropsWithChildren } from "react";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";
 
+import { auth } from "@homarr/auth/next";
+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 +13,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> {
@@ -30,8 +33,14 @@ export const createBoardLayout = <TParams extends Params>({
   }: PropsWithChildren<{
     params: Promise<TParams>;
   }>) => {
+    const session = await auth();
     const initialBoard = await getInitialBoard(await params).catch((error) => {
       if (error instanceof TRPCError && error.code === "NOT_FOUND") {
+        if (!session) {
+          logger.debug("No home board found for anonymous user, redirecting to login");
+          redirect("/auth/login");
+        }
+
         logger.warn(error);
         notFound();
       }
@@ -42,17 +51,21 @@ export const createBoardLayout = <TParams extends Params>({
 
     return (
       <BoardProvider initialBoard={initialBoard}>
-        <BoardMantineProvider defaultColorScheme={colorScheme}>
-          <CustomCss />
-          <ClientShell hasNavigation={false}>
-            <MainHeader
-              logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
-              actions={headerActions}
-              hasNavigation={false}
-            />
-            <AppShellMain>{children}</AppShellMain>
-          </ClientShell>
-        </BoardMantineProvider>
+        <BoardReadyProvider>
+          <EditModeProvider>
+            <BoardMantineProvider defaultColorScheme={colorScheme}>
+              <CustomCss />
+              <ClientShell hasNavigation={false}>
+                <MainHeader
+                  logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
+                  actions={headerActions}
+                  hasNavigation={false}
+                />
+                <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,55 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { Button, Group, Stack, Textarea, TextInput } from "@mantine/core";
-
-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";
-
-type FormType = z.infer<typeof validation.app.manage>;
-
-interface AppFormProps {
-  submitButtonTranslation: (t: TranslationFunction) => string;
-  initialValues?: FormType;
-  handleSubmit: (values: FormType) => void;
-  isPending: boolean;
-}
-
-export const AppForm = (props: AppFormProps) => {
-  const { submitButtonTranslation, handleSubmit, initialValues, isPending } = props;
-  const t = useI18n();
-
-  const form = useZodForm(validation.app.manage, {
-    initialValues: initialValues ?? {
-      name: "",
-      description: "",
-      iconUrl: "",
-      href: "",
-    },
-  });
-
-  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")} />
-        <Textarea {...form.getInputProps("description")} label={t("app.field.description.label")} />
-        <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
-
-        <Group justify="end">
-          <Button variant="default" component={Link} href="/manage/apps">
-            {t("common.action.backToOverview")}
-          </Button>
-          <Button type="submit" loading={isPending}>
-            {submitButtonTranslation(t)}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-};

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

@@ -2,30 +2,30 @@
 
 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 { AppForm } from "@homarr/forms-collection";
 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 { AppForm } from "../../_form";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { validation } from "@homarr/validation";
 
 interface AppEditFormProps {
   app: RouterOutputs["app"]["byId"];
 }
 
 export const AppEditForm = ({ app }: AppEditFormProps) => {
-  const t = useScopedI18n("app.page.edit.notification");
+  const tScoped = useScopedI18n("app.page.edit.notification");
+  const t = useI18n();
   const router = useRouter();
 
   const { mutate, isPending } = clientApi.app.update.useMutation({
     onSuccess: () => {
       showSuccessNotification({
-        title: t("success.title"),
-        message: t("success.message"),
+        title: tScoped("success.title"),
+        message: tScoped("success.message"),
       });
       void revalidatePathActionAsync("/manage/apps").then(() => {
         router.push("/manage/apps");
@@ -33,8 +33,8 @@ export const AppEditForm = ({ app }: AppEditFormProps) => {
     },
     onError: () => {
       showErrorNotification({
-        title: t("error.title"),
-        message: t("error.message"),
+        title: tScoped("error.title"),
+        message: tScoped("error.message"),
       });
     },
   });
@@ -49,14 +49,15 @@ 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}
+      showBackToOverview
     />
   );
 };

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

@@ -1,49 +0,0 @@
-"use client";
-
-import { useCallback } from "react";
-import { useRouter } from "next/navigation";
-
-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 { AppForm } from "../_form";
-
-export const AppNewForm = () => {
-  const t = useScopedI18n("app.page.create.notification");
-  const router = useRouter();
-
-  const { mutate, isPending } = clientApi.app.create.useMutation({
-    onSuccess: () => {
-      showSuccessNotification({
-        title: t("success.title"),
-        message: t("success.message"),
-      });
-      void revalidatePathActionAsync("/manage/apps").then(() => {
-        router.push("/manage/apps");
-      });
-    },
-    onError: () => {
-      showErrorNotification({
-        title: t("error.title"),
-        message: t("error.message"),
-      });
-    },
-  });
-
-  const handleSubmit = useCallback(
-    (values: z.infer<typeof validation.app.manage>) => {
-      mutate(values);
-    },
-    [mutate],
-  );
-
-  const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.create"), []);
-
-  return (
-    <AppForm submitButtonTranslation={submitButtonTranslation} handleSubmit={handleSubmit} isPending={isPending} />
-  );
-};

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

@@ -2,10 +2,10 @@ import { notFound } from "next/navigation";
 import { Container, Stack, Title } from "@mantine/core";
 
 import { auth } from "@homarr/auth/next";
+import { AppNewForm } from "@homarr/forms-collection";
 import { getI18n } from "@homarr/translation/server";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { AppNewForm } from "./_app-new-form";
 
 export default async function AppNewPage() {
   const session = await auth();
@@ -22,7 +22,7 @@ export default async function AppNewPage() {
       <Container>
         <Stack>
           <Title>{t("app.page.create.title")}</Title>
-          <AppNewForm />
+          <AppNewForm showBackToOverview showCreateAnother />
         </Stack>
       </Container>
     </>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,11 @@
 "use client";
 
-import type { JSX } from "react";
-import { Button, FileButton } from "@mantine/core";
+import { Button } from "@mantine/core";
 import { IconUpload } from "@tabler/icons-react";
 
-import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { MaybePromise } from "@homarr/common/types";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { UploadMedia } from "@homarr/forms-collection";
 import { useI18n } from "@homarr/translation/client";
-import { supportedMediaUploadFormats } from "@homarr/validation";
 
 export const UploadMediaButton = () => {
   const t = useI18n();
@@ -27,45 +23,3 @@ export const UploadMediaButton = () => {
     </UploadMedia>
   );
 };
-
-interface UploadMediaProps {
-  children: (props: { onClick: () => void; loading: boolean }) => JSX.Element;
-  onSettled?: () => MaybePromise<void>;
-  onSuccess?: (media: { id: string; url: string }) => MaybePromise<void>;
-}
-
-export const UploadMedia = ({ children, onSettled, onSuccess }: UploadMediaProps) => {
-  const t = useI18n();
-  const { mutateAsync, isPending } = clientApi.media.uploadMedia.useMutation();
-
-  const handleFileUploadAsync = async (file: File | null) => {
-    if (!file) return;
-    const formData = new FormData();
-    formData.append("file", file);
-    await mutateAsync(formData, {
-      async onSuccess(mediaId) {
-        showSuccessNotification({
-          message: t("media.action.upload.notification.success.message"),
-        });
-        await onSuccess?.({
-          id: mediaId,
-          url: `/api/user-medias/${mediaId}`,
-        });
-      },
-      onError() {
-        showErrorNotification({
-          message: t("media.action.upload.notification.error.message"),
-        });
-      },
-      async onSettled() {
-        await onSettled?.();
-      },
-    });
-  };
-
-  return (
-    <FileButton onChange={handleFileUploadAsync} accept={supportedMediaUploadFormats.join(",")}>
-      {({ onClick }) => children({ onClick, loading: isPending })}
-    </FileButton>
-  );
-};

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,
+  Image,
+  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,17 +106,19 @@ 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}`}
+          // Switched to mantine image because next/image doesn't support svgs
+          src={createLocalImageUrl(media.id)}
           alt={media.name}
-          width={64}
-          height={64}
-          style={{ objectFit: "contain" }}
+          w={64}
+          h={64}
+          fit="contain"
         />
       </TableTd>
       <TableTd>{media.name}</TableTd>
@@ -121,6 +138,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,17 +4,16 @@ 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 { IconPicker } from "@homarr/forms-collection";
 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";
-
 type FormType = z.infer<typeof validation.searchEngine.manage>;
 
 interface SearchEngineFormProps {
@@ -58,7 +57,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,13 +1,12 @@
 "use client";
 
-import { Group, Text } from "@mantine/core";
-import { IconLayoutDashboard } from "@tabler/icons-react";
+import { Switch, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { ServerSettings } from "@homarr/server-settings";
 import { useScopedI18n } from "@homarr/translation/client";
-import { SelectWithCustomItems } from "@homarr/ui";
 
+import { BoardSelect } from "~/components/board/board-select";
 import { CommonSettingsForm } from "./common-form";
 
 export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["board"] }) => {
@@ -18,44 +17,33 @@ export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSett
     <CommonSettingsForm settingKey="board" defaultValues={defaultValues}>
       {(form) => (
         <>
-          <SelectWithCustomItems
+          <BoardSelect
             label={tBoard("homeBoard.label")}
             description={tBoard("homeBoard.description")}
-            data={selectableBoards.map((board) => ({
-              value: board.id,
-              label: board.name,
-              image: board.logoImageUrl,
-            }))}
-            SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => (
-              <Group>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                {image ? <img width={16} height={16} src={image} alt={label} /> : <IconLayoutDashboard size={16} />}
-                <Text fz="sm" fw={500}>
-                  {label}
-                </Text>
-              </Group>
-            )}
+            clearable
+            boards={selectableBoards}
             {...form.getInputProps("homeBoardId")}
           />
-          <SelectWithCustomItems
+
+          <BoardSelect
             label={tBoard("homeBoard.mobileLabel")}
             description={tBoard("homeBoard.description")}
-            data={selectableBoards.map((board) => ({
-              value: board.id,
-              label: board.name,
-              image: board.logoImageUrl,
-            }))}
-            SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => (
-              <Group>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                {image ? <img width={16} height={16} src={image} alt={label} /> : <IconLayoutDashboard size={16} />}
-                <Text fz="sm" fw={500}>
-                  {label}
-                </Text>
-              </Group>
-            )}
+            clearable
+            boards={selectableBoards}
             {...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 { Button, Group, Stack, Text, Title } from "@mantine/core";
+import { useCallback, useMemo } from "react";
+import { ActionIcon, Button, Group, Stack, Text, Title } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useModalAction } from "@homarr/modals";
+import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 import { UserAvatar } from "@homarr/ui";
 
@@ -20,7 +21,8 @@ interface ApiKeysManagementProps {
 
 export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
   const { openModal } = useModalAction(CopyApiKeyModal);
-  const { mutate, isPending } = clientApi.apiKeys.create.useMutation({
+  const { openConfirmModal } = useConfirmModal();
+  const { mutate: mutateCreate, isPending: isPendingCreate } = clientApi.apiKeys.create.useMutation({
     async onSuccess(data) {
       openModal({
         apiKey: data.apiKey,
@@ -28,7 +30,26 @@ export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
       await revalidatePathActionAsync("/manage/tools/api");
     },
   });
+  const { mutateAsync: mutateDeleteAsync, isPending: isPendingDelete } = clientApi.apiKeys.delete.useMutation({
+    async onSuccess() {
+      await revalidatePathActionAsync("/manage/tools/api");
+    },
+  });
+
   const t = useScopedI18n("management.page.tool.api.tab.apiKey");
+  const handleDelete = useCallback(
+    (id: string) => {
+      openConfirmModal({
+        title: t("modal.delete.title"),
+        children: t("modal.delete.text"),
+        // eslint-disable-next-line no-restricted-syntax
+        async onConfirm() {
+          await mutateDeleteAsync({ apiKeyId: id });
+        },
+      });
+    },
+    [t, openConfirmModal, mutateDeleteAsync],
+  );
 
   const columns = useMemo<MRT_ColumnDef<RouterOutputs["apiKeys"]["getAll"][number]>[]>(
     () => [
@@ -46,8 +67,18 @@ export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
           </Group>
         ),
       },
+      {
+        header: t("table.header.actions"),
+        Cell: ({ row }) => (
+          <Group gap="xs">
+            <ActionIcon onClick={() => handleDelete(row.original.id)} loading={isPendingDelete} c="red">
+              <IconTrash size="1rem" />
+            </ActionIcon>
+          </Group>
+        ),
+      },
     ],
-    [t],
+    [t, handleDelete, isPendingDelete],
   );
 
   const table = useMantineReactTable({
@@ -56,9 +87,9 @@ export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
     renderTopToolbarCustomActions: () => (
       <Button
         onClick={() => {
-          mutate();
+          mutateCreate();
         }}
-        loading={isPending}
+        loading={isPendingCreate}
       >
         {t("button.createApiToken")}
       </Button>

apps/nextjs/src/app/[locale]/manage/tools/api/swagger-ui-dark.css

@@ -1434,26 +1434,30 @@
     }
 
     ::-webkit-scrollbar-button:vertical:start:decrement {
-      background: linear-gradient(130deg, #696969 40%, rgba(255, 0, 0, 0) 41%),
+      background:
+        linear-gradient(130deg, #696969 40%, rgba(255, 0, 0, 0) 41%),
         linear-gradient(230deg, #696969 40%, transparent 41%), linear-gradient(0deg, #696969 40%, transparent 31%);
       background-color: #b6b6b6;
     }
 
     ::-webkit-scrollbar-button:vertical:end:increment {
-      background: linear-gradient(310deg, #696969 40%, transparent 41%),
-        linear-gradient(50deg, #696969 40%, transparent 41%), linear-gradient(180deg, #696969 40%, transparent 31%);
+      background:
+        linear-gradient(310deg, #696969 40%, transparent 41%), linear-gradient(50deg, #696969 40%, transparent 41%),
+        linear-gradient(180deg, #696969 40%, transparent 31%);
       background-color: #b6b6b6;
     }
 
     ::-webkit-scrollbar-button:horizontal:end:increment {
-      background: linear-gradient(210deg, #696969 40%, transparent 41%),
-        linear-gradient(330deg, #696969 40%, transparent 41%), linear-gradient(90deg, #696969 30%, transparent 31%);
+      background:
+        linear-gradient(210deg, #696969 40%, transparent 41%), linear-gradient(330deg, #696969 40%, transparent 41%),
+        linear-gradient(90deg, #696969 30%, transparent 31%);
       background-color: #b6b6b6;
     }
 
     ::-webkit-scrollbar-button:horizontal:start:decrement {
-      background: linear-gradient(30deg, #696969 40%, transparent 41%),
-        linear-gradient(150deg, #696969 40%, transparent 41%), linear-gradient(270deg, #696969 30%, transparent 31%);
+      background:
+        linear-gradient(30deg, #696969 40%, transparent 41%), linear-gradient(150deg, #696969 40%, transparent 41%),
+        linear-gradient(270deg, #696969 30%, transparent 31%);
       background-color: #b6b6b6;
     }
 
@@ -1681,28 +1685,32 @@
     }
 
     ::-webkit-scrollbar-button:vertical:start:decrement {
-      background: linear-gradient(130deg, #696969 40%, rgba(255, 0, 0, 0) 41%),
+      background:
+        linear-gradient(130deg, #696969 40%, rgba(255, 0, 0, 0) 41%),
         linear-gradient(230deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
         linear-gradient(0deg, #696969 40%, rgba(0, 0, 0, 0) 31%);
       background-color: #b6b6b6;
     }
 
     ::-webkit-scrollbar-button:vertical:end:increment {
-      background: linear-gradient(310deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
+      background:
+        linear-gradient(310deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
         linear-gradient(50deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
         linear-gradient(180deg, #696969 40%, rgba(0, 0, 0, 0) 31%);
       background-color: #b6b6b6;
     }
 
     ::-webkit-scrollbar-button:horizontal:end:increment {
-      background: linear-gradient(210deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
+      background:
+        linear-gradient(210deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
         linear-gradient(330deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
         linear-gradient(90deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
       background-color: #b6b6b6;
     }
 
     ::-webkit-scrollbar-button:horizontal:start:decrement {
-      background: linear-gradient(30deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
+      background:
+        linear-gradient(30deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
         linear-gradient(150deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
         linear-gradient(270deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
       background-color: #b6b6b6;

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

@@ -2,6 +2,7 @@
 
 import { Button, FileInput, Group, Stack } from "@mantine/core";
 import { IconCertificate } from "@tabler/icons-react";
+import { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -9,7 +10,7 @@ import { useZodForm } from "@homarr/form";
 import { createModal, useModalAction } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { superRefineCertificateFile, z } from "@homarr/validation";
+import { superRefineCertificateFile } from "@homarr/validation";
 
 export const AddCertificateButton = () => {
   const { openModal } = useModalAction(AddCertificateModal);

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

@@ -59,10 +59,17 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
           {x509Certificates.map((cert) => (
             <Card key={cert.x509.fingerprint} withBorder>
               <Group wrap="nowrap">
-                <IconCertificate color={getMantineColor(iconColor(cert.x509.validToDate), 6)} size={32} stroke={1.5} />
-                <Stack flex={1} gap="xs">
-                  <Group justify="space-between">
-                    <Text fw={500}>{cert.x509.subject}</Text>
+                <IconCertificate
+                  color={getMantineColor(iconColor(cert.x509.validToDate), 6)}
+                  style={{ minWidth: 32 }}
+                  size={32}
+                  stroke={1.5}
+                />
+                <Stack flex={1} gap="xs" maw="calc(100% - 48px)">
+                  <Group justify="space-between" wrap="nowrap">
+                    <Text fw={500} lineClamp={1} style={{ wordBreak: "break-all" }}>
+                      {cert.x509.subject}
+                    </Text>
                     <Text c="gray.6" ta="end" size="sm">
                       {cert.fileName}
                     </Text>

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

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

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, Group, Select, Stack } from "@mantine/core";
+import { Button, Group, Stack } from "@mantine/core";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -8,12 +9,14 @@ 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";
 
+import type { Board } from "~/app/[locale]/boards/_types";
+import { BoardSelect } from "~/components/board/board-select";
+
 interface ChangeHomeBoardFormProps {
   user: RouterOutputs["user"]["getById"];
-  boardsData: { value: string; label: string }[];
+  boardsData: Pick<Board, "id" | "name" | "logoImageUrl">[];
 }
 
 export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormProps) => {
@@ -39,8 +42,8 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
   });
   const form = useZodForm(validation.user.changeHomeBoards, {
     initialValues: {
-      homeBoardId: user.homeBoardId ?? "",
-      mobileHomeBoardId: user.mobileHomeBoardId ?? "",
+      homeBoardId: user.homeBoardId,
+      mobileHomeBoardId: user.mobileHomeBoardId,
     },
   });
 
@@ -54,16 +57,18 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack gap="md">
-        <Select
+        <BoardSelect
           label={t("management.page.user.setting.general.item.board.type.general")}
+          clearable
+          boards={boardsData}
           w="100%"
-          data={boardsData}
           {...form.getInputProps("homeBoardId")}
         />
-        <Select
+        <BoardSelect
           label={t("management.page.user.setting.general.item.board.type.mobile")}
+          clearable
+          boards={boardsData}
           w="100%"
-          data={boardsData}
           {...form.getInputProps("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,25 +83,28 @@ export default async function EditUserPage(props: Props) {
         </Box>
       </Group>
 
-      <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.language")}</Title>
-        <CurrentLanguageCombobox />
-      </Stack>
+      {session?.user.id === user.id && (
+        <Stack mb="lg">
+          <Title order={2}>{tGeneral("item.language")}</Title>
+          <CurrentLanguageCombobox />
+        </Stack>
+      )}
 
       <Stack mb="lg">
         <Title order={2}>{tGeneral("item.board.title")}</Title>
         <ChangeHomeBoardForm
           user={user}
           boardsData={boards.map((board) => ({
-            value: board.id,
-            label: board.name,
+            id: board.id,
+            name: board.name,
+            logoImageUrl: board.logoImageUrl,
           }))}
         />
       </Stack>
 
       <Stack mb="lg">
-        <Title order={2}>{tGeneral("item.defaultSearchEngine")}</Title>
-        <ChangeDefaultSearchEngineForm user={user} searchEnginesData={searchEngines} />
+        <Title order={2}>{tGeneral("item.search")}</Title>
+        <ChangeSearchPreferencesForm user={user} searchEnginesData={searchEngines} />
       </Stack>
 
       <Stack mb="lg">

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

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

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

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from "react";
 import Link from "next/link";
 import { Button, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
-import { IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
+import { IconId, IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
@@ -42,6 +42,11 @@ export default async function Layout(props: PropsWithChildren<LayoutProps>) {
               <NavigationLink
                 href={`/manage/users/groups/${params.id}`}
                 label={tGroup("setting.general.title")}
+                icon={<IconId size="1rem" stroke={1.5} />}
+              />
+              <NavigationLink
+                href={`/manage/users/groups/${params.id}/settings`}
+                label={tGroup("setting.setting.title")}
                 icon={<IconSettings size="1rem" stroke={1.5} />}
               />
               <NavigationLink

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/settings/_group-home-boards.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Button, Group, Stack } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
+
+import { BoardSelect } from "~/components/board/board-select";
+
+interface GroupHomeBoardsProps {
+  homeBoardId: string | null;
+  mobileHomeBoardId: string | null;
+  groupId: string;
+}
+
+export const GroupHomeBoards = ({ homeBoardId, mobileHomeBoardId, groupId }: GroupHomeBoardsProps) => {
+  const t = useI18n();
+  const [availableBoards] = clientApi.board.getBoardsForGroup.useSuspenseQuery({ groupId });
+  const form = useZodForm(validation.group.settings.pick({ homeBoardId: true, mobileHomeBoardId: true }), {
+    initialValues: {
+      homeBoardId,
+      mobileHomeBoardId,
+    },
+  });
+  const { mutateAsync, isPending } = clientApi.group.savePartialSettings.useMutation();
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    await mutateAsync(
+      {
+        id: groupId,
+        settings: values,
+      },
+      {
+        onSuccess() {
+          form.setInitialValues(values);
+          showSuccessNotification({
+            title: t("group.action.settings.board.notification.success.title"),
+            message: t("group.action.settings.board.notification.success.message"),
+          });
+        },
+        onError() {
+          showErrorNotification({
+            title: t("group.action.settings.board.notification.error.title"),
+            message: t("group.action.settings.board.notification.error.message"),
+          });
+        },
+      },
+    );
+  });
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack gap="md">
+        <BoardSelect
+          label={t("group.field.homeBoard.label")}
+          description={t("group.field.homeBoard.description")}
+          clearable
+          boards={availableBoards}
+          {...form.getInputProps("homeBoardId")}
+        />
+
+        <BoardSelect
+          label={t("group.field.mobileBoard.label")}
+          description={t("group.field.mobileBoard.description")}
+          clearable
+          boards={availableBoards}
+          {...form.getInputProps("mobileHomeBoardId")}
+        />
+
+        <Group justify="end">
+          <Button type="submit" color="teal" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { notFound } from "next/navigation";
+import { Alert, Stack, Title } from "@mantine/core";
+import { IconExclamationCircle } from "@tabler/icons-react";
+
+import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
+import { getI18n } from "@homarr/translation/server";
+
+import { GroupHomeBoards } from "./_group-home-boards";
+
+interface GroupSettingsPageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export default async function GroupPermissionsPage(props: GroupSettingsPageProps) {
+  const params = await props.params;
+  const session = await auth();
+
+  if (!session?.user.permissions.includes("admin")) {
+    notFound();
+  }
+
+  const group = await api.group.getById({ id: params.id });
+  const t = await getI18n();
+
+  return (
+    <Stack>
+      <Title>{t("management.page.group.setting.setting.title")}</Title>
+
+      <Alert color="cyan" icon={<IconExclamationCircle size="1rem" stroke={1.5} />}>
+        {t("management.page.group.setting.setting.alert")}
+      </Alert>
+
+      <Title order={3}>{t("management.page.group.setting.setting.board.title")}</Title>
+
+      <GroupHomeBoards homeBoardId={group.homeBoardId} mobileHomeBoardId={group.mobileHomeBoardId} groupId={group.id} />
+    </Stack>
+  );
+}

apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { useCallback } from "react";
-
-import { useModalAction } from "@homarr/modals";
-import { AddGroupModal } from "@homarr/modals-collection";
-import { useI18n } from "@homarr/translation/client";
-
-import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
-
-export const AddGroup = () => {
-  const t = useI18n();
-  const { openModal } = useModalAction(AddGroupModal);
-
-  const handleAddGroup = useCallback(() => {
-    openModal();
-  }, [openModal]);
-
-  return (
-    <MobileAffixButton onClick={handleAddGroup} color="teal">
-      {t("group.action.create.label")}
-    </MobileAffixButton>
-  );
-};

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { Group, TextInput } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { useModalAction } from "@homarr/modals";
+import { AddGroupModal } from "@homarr/modals-collection";
+import { useI18n } from "@homarr/translation/client";
+
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
+import { GroupsTable } from "./_groups-table";
+
+interface GroupsListProps {
+  groups: RouterOutputs["group"]["getAll"];
+}
+
+export const GroupsList = ({ groups }: GroupsListProps) => {
+  const [search, setSearch] = useState("");
+  const initialGroupIds = useMemo(
+    () => groups.sort((groupA, groupB) => groupA.position - groupB.position).map((group) => group.id),
+    [groups],
+  );
+  const filteredGroups = useMemo(
+    () =>
+      groups
+        .filter((group) => group.name.toLowerCase().includes(search.toLowerCase()))
+        .sort((groupA, groupB) => groupA.position - groupB.position),
+    [groups, search],
+  );
+  const t = useI18n();
+
+  return (
+    <>
+      <Group justify="space-between">
+        <TextInput
+          leftSection={<IconSearch size={20} stroke={1.5} />}
+          value={search}
+          onChange={(event) => setSearch(event.currentTarget.value)}
+          placeholder={`${t("group.search")}...`}
+          style={{ flex: 1 }}
+        />
+        <AddGroup />
+      </Group>
+
+      <GroupsTable groups={filteredGroups} initialGroupIds={initialGroupIds} hasFilter={search.length !== 0} />
+    </>
+  );
+};
+
+const AddGroup = () => {
+  const t = useI18n();
+  const { openModal } = useModalAction(AddGroupModal);
+
+  const handleAddGroup = useCallback(() => {
+    openModal();
+  }, [openModal]);
+
+  return (
+    <MobileAffixButton onClick={handleAddGroup} color="teal">
+      {t("group.action.create.label")}
+    </MobileAffixButton>
+  );
+};

apps/nextjs/src/app/[locale]/manage/users/groups/_groups-table.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import type { DragEndEvent, DraggableAttributes, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  Anchor,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Group,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Transition,
+} from "@mantine/core";
+import { IconGripVertical } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { UserAvatarGroup } from "@homarr/ui";
+
+interface GroupsTableProps {
+  initialGroupIds: string[];
+  groups: RouterOutputs["group"]["getAll"];
+  hasFilter: boolean;
+}
+
+export const GroupsTable = ({ groups, initialGroupIds, hasFilter }: GroupsTableProps) => {
+  const t = useI18n();
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [groupIds, setGroupIds] = useState(groups.map((group) => group.id));
+  const isDirty = useMemo(
+    () => initialGroupIds.some((groupId, index) => groupIds.indexOf(groupId) !== index),
+    [groupIds, initialGroupIds],
+  );
+  const { mutateAsync, isPending } = clientApi.group.savePositions.useMutation();
+  const handleSavePositionsAsync = async () => {
+    await mutateAsync(
+      { positions: groupIds },
+      {
+        async onSuccess() {
+          showSuccessNotification({
+            message: t("group.action.changePosition.notification.success.message"),
+          });
+          await revalidatePathActionAsync("/manage/users/groups");
+        },
+        onError() {
+          showSuccessNotification({
+            message: t("group.action.changePosition.notification.error.message"),
+          });
+        },
+      },
+    );
+  };
+
+  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  };
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      setActiveId(null);
+      return;
+    }
+
+    setGroupIds((groupIds) => {
+      const oldIndex = groupIds.indexOf(active.id as string);
+      const newIndex = groupIds.indexOf(over.id as string);
+      return arrayMove(groupIds, oldIndex, newIndex);
+    });
+  }
+
+  function handleDragCancel() {
+    setActiveId(null);
+  }
+
+  const selectedRow = useMemo(() => {
+    if (!activeId) return null;
+
+    const current = groups.find((group) => group.id === activeId);
+    if (!current) return null;
+
+    return <Row group={current} handle={<DragHandle attributes={undefined} listeners={undefined} active />} />;
+  }, [activeId, groups]);
+
+  return (
+    <>
+      <DndContext
+        sensors={sensors}
+        onDragEnd={handleDragEnd}
+        onDragStart={handleDragStart}
+        onDragCancel={handleDragCancel}
+        collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
+        id="groups-table"
+      >
+        <Table striped highlightOnHover>
+          <TableThead>
+            <TableTr>
+              <TableTh>{t("group.field.name")}</TableTh>
+              <TableTh>{t("group.field.members")}</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <SortableContext items={groupIds} strategy={verticalListSortingStrategy}>
+              {groupIds.map((groupId) => {
+                const group = groups.find(({ id }) => id === groupId);
+                if (!group) return null;
+
+                return <DraggableRow key={group.id} group={group} disabled={hasFilter} />;
+              })}
+            </SortableContext>
+          </TableTbody>
+        </Table>
+
+        <DragOverlay>
+          {activeId && (
+            <Table w="100%">
+              <TableTbody>{selectedRow}</TableTbody>
+            </Table>
+          )}
+        </DragOverlay>
+      </DndContext>
+      <SaveAffix
+        visible={isDirty}
+        onDiscard={() => setGroupIds(initialGroupIds)}
+        isPending={isPending}
+        onSave={handleSavePositionsAsync}
+      />
+    </>
+  );
+};
+
+interface DraggableRowProps {
+  group: RouterOutputs["group"]["getAll"][number];
+  disabled?: boolean;
+}
+
+const DraggableRow = ({ group, disabled }: DraggableRowProps) => {
+  const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
+    id: group.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  if (isDragging) {
+    return (
+      <TableTr ref={setNodeRef} style={style}>
+        <TableTd colSpan={2}>&nbsp;</TableTd>
+      </TableTr>
+    );
+  }
+
+  return (
+    <Row
+      group={group}
+      setNodeRef={setNodeRef}
+      style={style}
+      handle={<DragHandle attributes={attributes} listeners={listeners} active={false} disabled={disabled} />}
+    />
+  );
+};
+
+interface RowProps {
+  group: RouterOutputs["group"]["getAll"][number];
+  handle?: ReactNode;
+  setNodeRef?: (node: HTMLElement | null) => void;
+  style?: React.CSSProperties;
+}
+
+const Row = ({ group, handle, setNodeRef, style }: RowProps) => {
+  return (
+    <TableTr ref={setNodeRef} style={style}>
+      <TableTd>
+        <Group>
+          {handle}
+          <Anchor component={Link} href={`/manage/users/groups/${group.id}`}>
+            {group.name}
+          </Anchor>
+        </Group>
+      </TableTd>
+      <TableTd>
+        <UserAvatarGroup users={group.members} size="sm" limit={5} />
+      </TableTd>
+    </TableTr>
+  );
+};
+
+interface DragHandleProps {
+  attributes: DraggableAttributes | undefined;
+  listeners: SyntheticListenerMap | undefined;
+  active: boolean;
+  disabled?: boolean;
+}
+
+const DragHandle = ({ attributes, listeners, active, disabled }: DragHandleProps) => {
+  if (disabled) {
+    return <Box w={40} h="100%" />;
+  }
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      h="100%"
+      w={40}
+      style={{ cursor: active ? "grabbing" : "grab" }}
+      {...attributes}
+      {...listeners}
+    >
+      <IconGripVertical size={18} stroke={1.5} />
+    </Flex>
+  );
+};
+
+interface SaveAffixProps {
+  visible: boolean;
+  isPending: boolean;
+  onDiscard: () => void;
+  onSave: () => void;
+}
+
+const SaveAffix = ({ visible, isPending, onDiscard, onSave }: SaveAffixProps) => {
+  const t = useI18n();
+
+  return (
+    <div style={{ position: "sticky", bottom: 20 }}>
+      <Transition transition="slide-up" mounted={visible}>
+        {(transitionStyles) => (
+          <Card style={transitionStyles} withBorder>
+            <Group justify="space-between">
+              <Text fw={500}>{t("common.unsavedChanges")}</Text>
+              <Group>
+                <Button disabled={isPending} onClick={onDiscard}>
+                  {t("common.action.discard")}
+                </Button>
+                <Button color="teal" loading={isPending} onClick={onSave}>
+                  {t("common.action.saveChanges")}
+                </Button>
+              </Group>
+            </Group>
+          </Card>
+        )}
+      </Transition>
+    </div>
+  );
+};

apps/nextjs/src/app/[locale]/manage/users/groups/groups.module.css

@@ -0,0 +1,7 @@
+.everyoneGroup {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+}
+
+.everyoneGroup:hover {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}

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

@@ -1,30 +1,19 @@
 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 { Card, Group, Stack, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
+import { IconChevronRight, IconUsersGroup } from "@tabler/icons-react";
 
-import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
-import type { inferSearchParamsFromSchema } from "@homarr/common/types";
+import { everyoneGroup } from "@homarr/definitions";
 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";
-import { AddGroup } from "./_add-group";
+import { GroupsList } from "./_client";
+import classes from "./groups.module.css";
 
-const searchParamsSchema = z.object({
-  search: z.string().optional(),
-  pageSize: z.string().regex(/\d+/).transform(Number).catch(10),
-  page: z.string().regex(/\d+/).transform(Number).catch(1),
-});
-
-interface GroupsListPageProps {
-  searchParams: Promise<inferSearchParamsFromSchema<typeof searchParamsSchema>>;
-}
-
-export default async function GroupsListPage(props: GroupsListPageProps) {
+export default async function GroupsListPage() {
   const session = await auth();
 
   if (!session?.user.permissions.includes("admin")) {
@@ -32,55 +21,38 @@ export default async function GroupsListPage(props: GroupsListPageProps) {
   }
 
   const t = await getI18n();
-  const searchParams = searchParamsSchema.parse(await props.searchParams);
-  const { items: groups, totalCount } = await api.group.getPaginated(searchParams);
+  const groups = await api.group.getAll();
+  const dbEveryoneGroup = groups.find((group) => group.name === everyoneGroup);
+  const groupsWithoutEveryone = groups.filter((group) => group.name !== everyoneGroup);
 
   return (
     <ManageContainer size="xl">
       <DynamicBreadcrumb />
       <Stack>
         <Title>{t("group.title")}</Title>
-        <Group justify="space-between">
-          <SearchInput placeholder={`${t("group.search")}...`} defaultValue={searchParams.search} />
-          <AddGroup />
-        </Group>
-        <Table striped highlightOnHover>
-          <TableThead>
-            <TableTr>
-              <TableTh>{t("group.field.name")}</TableTh>
-              <TableTh>{t("group.field.members")}</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {groups.map((group) => (
-              <Row key={group.id} group={group} />
-            ))}
-          </TableTbody>
-        </Table>
 
-        <Group justify="end">
-          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
-        </Group>
+        {dbEveryoneGroup && (
+          <UnstyledButton component={Link} href={`/manage/users/groups/${dbEveryoneGroup.id}`}>
+            <Card className={classes.everyoneGroup}>
+              <Group align="center">
+                <ThemeIcon radius="xl" variant="light">
+                  <IconUsersGroup size={16} />
+                </ThemeIcon>
+
+                <Stack gap={0} flex={1}>
+                  <Text fw={500}>{t("group.defaultGroup.name")}</Text>
+                  <Text size="sm" c="gray.6">
+                    {t("group.defaultGroup.description", { name: everyoneGroup })}
+                  </Text>
+                </Stack>
+                <IconChevronRight size={20} />
+              </Group>
+            </Card>
+          </UnstyledButton>
+        )}
+
+        <GroupsList groups={groupsWithoutEveryone} />
       </Stack>
     </ManageContainer>
   );
 }
-
-interface RowProps {
-  group: RouterOutputs["group"]["getPaginated"]["items"][number];
-}
-
-const Row = ({ group }: RowProps) => {
-  return (
-    <TableTr>
-      <TableTd>
-        <Anchor component={Link} href={`/manage/users/groups/${group.id}`}>
-          {group.name}
-        </Anchor>
-      </TableTd>
-      <TableTd>
-        <UserAvatarGroup users={group.members} size="sm" limit={5} />
-      </TableTd>
-    </TableTr>
-  );
-};

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/[locale]/widgets/[kind]/page.tsx

@@ -1,11 +1,11 @@
 import { notFound } from "next/navigation";
 import { Center } from "@mantine/core";
 
+import { env } from "@homarr/common/env";
 import { db } from "@homarr/db";
 import type { WidgetKind } from "@homarr/definitions";
 import { widgetImports } from "@homarr/widgets";
 
-import { env } from "~/env";
 import { WidgetPreviewPageContent } from "./_content";
 
 interface Props {

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

@@ -0,0 +1,33 @@
+import { Group, Text } from "@mantine/core";
+import { IconLayoutDashboard } from "@tabler/icons-react";
+
+import type { SelectWithCustomItemsProps } from "@homarr/ui";
+import { SelectWithCustomItems } from "@homarr/ui";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+
+interface BoardSelectProps extends Omit<SelectWithCustomItemsProps<{ value: string; label: string }>, "data"> {
+  boards: Pick<Board, "id" | "name" | "logoImageUrl">[];
+}
+
+export const BoardSelect = ({ boards, ...props }: BoardSelectProps) => {
+  return (
+    <SelectWithCustomItems
+      {...props}
+      data={boards.map((board) => ({
+        value: board.id,
+        label: board.name,
+        image: board.logoImageUrl,
+      }))}
+      SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => (
+        <Group>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          {image ? <img width={16} height={16} src={image} alt={label} /> : <IconLayoutDashboard size={16} />}
+          <Text fz="sm" fw={500}>
+            {label}
+          </Text>
+        </Group>
+      )}
+    />
+  );
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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";
@@ -31,6 +33,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
         "grid-stack-item-content",
         item.advancedOptions.customCssClasses.join(" "),
       )}
+      radius={board.itemRadius}
       withBorder
       styles={{
         root: {
@@ -53,11 +56,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 +83,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,38 @@ 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 }}
+      radius={board.itemRadius}
+      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) => (
-          <React.Fragment key={action.label}>
-            {"group" in action && <Menu.Label>{t(action.group)}</Menu.Label>}
-            <Menu.Item
-              leftSection={<action.icon size="1rem" />}
-              onClick={action.onClick}
-              color={"color" in action ? action.color : undefined}
-            >
-              {t(action.label)}
-            </Menu.Item>
-          </React.Fragment>
-        ))}
+        {actions.map((action) => {
+          return (
+            <React.Fragment key={action.label}>
+              {"group" in action && <Menu.Label>{t(action.group)}</Menu.Label>}
+              <Menu.Item
+                leftSection={<action.icon size="1rem" />}
+                onClick={action.onClick}
+                color={"color" in action ? action.color : undefined}
+              >
+                {t(action.label)}
+              </Menu.Item>
+            </React.Fragment>
+          );
+        })}
       </Menu.Dropdown>
     </Menu>
   );
@@ -106,15 +108,21 @@ const useEditModeActions = (category: CategorySection) => {
   ] as const satisfies ActionDefinition[];
 };
 
-// TODO: once apps are added we can use this for the open many apps action
-const useNonEditModeActions = (_category: CategorySection) => {
-  return [] as const satisfies ActionDefinition[];
+const useNonEditModeActions = (category: CategorySection) => {
+  const { openAllInNewTabs } = useCategoryMenuActions(category);
+  return [
+    {
+      icon: IconExternalLink,
+      label: "action.openAllInNewTabs",
+      onClick: openAllInNewTabs,
+    },
+  ] as const satisfies ActionDefinition[];
 };
 
 interface ActionDefinition {
   icon: TablerIcon;
   label: string;
-  onClick: () => void;
+  onClick: () => MaybePromise<void>;
   color?: string;
   group?: string;
 }

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

@@ -0,0 +1,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";
@@ -25,6 +26,7 @@ export const BoardDynamicSection = ({ section }: Props) => {
             overflow: "hidden",
           },
         }}
+        radius={board.itemRadius}
         p={0}
       >
         <GridStack section={section} className="min-row" />

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 }) => {