feat: add websocket banner

.dockerignore

@@ -1,7 +1,6 @@
 Dockerfile
 .dockerignore
 node_modules
-**/node_modules
 npm-debug.log
 README.md
 .next

.env.example

@@ -12,10 +12,6 @@ AUTH_SECRET="supersecret"
 # or starting the project without any (which will show a randomly generated one).
 SECRET_ENCRYPTION_KEY=0000000000000000000000000000000000000000000000000000000000000000
 
-# Cron job API key is generated every time the container starts as it is required for communication between nextjs-api and tasks-api
-# export CRON_JOB_API_KEY=$(openssl rand -base64 32)
-# CRON_JOB_API_KEY="your-generated-api-key"
-
 LOG_LEVEL='info'
 
 # This is how you can use the sqlite driver:
@@ -34,19 +30,11 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
 # DB_PASSWORD='password'
 # DB_NAME='name-of-database'
 
-# The following is an example on how to use the node-postgres driver:
-# DB_DRIVER='node-postgres'
-# DB_URL='postgres://user:password@host:port/database'
-
-# The below path can be used to store trusted certificates, it is not required and can be left empty.
-# If it is empty, it will default to `/appdata/trusted-certificates` in production.
+# The below path can be used to store trusted certificates during development, it is not required and can be left empty.
 # If it is used, please use the full path to the directory where the certificates are stored.
 # LOCAL_CERTIFICATE_PATH='FULL_PATH_TO_CERTIFICATES'
 
 TURBO_TELEMETRY_DISABLED=1
 
 # Enable kubernetes tool
-# ENABLE_KUBERNETES=true
-
-# Enable mock integration
-UNSAFE_ENABLE_MOCK_INTEGRATION=true
+# ENABLE_KUBERNETES=true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -31,42 +31,6 @@ body:
       label: Version
       description: What version of Homarr are you running?
       options:
-        # The below comment is used to insert a new version with on-release.yml
-        #NEXT_VERSION#
-        - 1.40.0
-        - 1.39.0
-        - 1.38.0
-        - 1.37.0
-        - 1.36.1
-        - 1.36.0
-        - 1.35.1
-        - 1.35.0
-        - 1.34.0
-        - 1.33.0
-        - 1.32.0
-        - 1.31.0
-        - 1.30.1
-        - 1.30.0
-        - 1.29.0
-        - 1.28.1
-        - 1.28.0
-        - 1.27.0
-        - 1.26.0
-        - 1.25.0
-        - 1.24.0
-        - 1.23.0
-        - 1.22.0
-        - 1.21.0
-        - 1.20.0
-        - 1.19.1
-        - 1.19.0
-        - 1.18.0
-        - 1.17.0
-        - 1.16.0
-        - 1.15.0
-        - 1.14.0
-        - 1.13.1
-        - 1.13.0
         - 1.12.0
         - 1.11.0
         - 1.10.0

.github/pull_request_template.md

@@ -6,8 +6,8 @@
 
 **Thank you for your contribution. Please ensure that your pull request meets the following pull request:**
 
-- [ ] Builds without warnings or errors (`pnpm build`, autofix with `pnpm format:fix`)
-- [ ] Pull request targets `dev` branch
+- [ ] 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)
-- [ ] Documentation is up to date. Create a pull request [here](https://github.com/homarr-labs/documentation/).
+- [ ] No shorthand variable names are used (eg. ``x``, ``y``, ``i`` or any abbrevation)
+

.github/renovate.json5

@@ -6,11 +6,6 @@
       matchPackagePatterns: ["^@homarr/"],
       enabled: false,
     },
-    // Reenable once https://github.com/privatenumber/tsx/issues/737 is fixed
-    {
-      matchPackagePatterns: ["tsx"],
-      enabled: false,
-    },
     {
       matchUpdateTypes: ["minor", "patch", "pin", "digest"],
       automerge: true,

.github/workflows/automatic-approval.yml

@@ -3,23 +3,19 @@ on:
   pull_request:
     types: [opened, synchronize]
 
-permissions: {}
-
 jobs:
   approve-automatic-prs:
     runs-on: ubuntu-latest
-    if: github.actor_id == 158783068 || github.actor_id == 190541745 || github.actor_id == 210161987 # Id of renovate bot and crowdin bot see https://api.github.com/users/homarr-renovate%5Bbot%5D and https://api.github.com/users/homarr-crowdin%5Bbot%5D and https://api.github.com/users/homarr-update-contributors%5Bbot%5D
+    if: github.actor_id == 158783068 || github.actor_id == 190541745 # Id of renovate bot and crowdin bot see https://api.github.com/users/homarr-renovate%5Bbot%5D and https://api.github.com/users/homarr-crowdin%5Bbot%5D
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
       - name: Obtain token
         id: obtainToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
-          permission-pull-requests: write # required to approve pull request
-
+          private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+          app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
       - name: Install GitHub CLI
         run: sudo apt-get install -y gh
       - name: Approve automatic PRs

.github/workflows/code-quality.yml

@@ -22,7 +22,7 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -37,7 +37,7 @@ jobs:
   format:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -48,7 +48,7 @@ jobs:
   typecheck:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -59,7 +59,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -77,7 +77,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
       - name: Setup
         uses: ./tooling/github/setup
       - name: Build docker image
@@ -100,7 +100,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
       - name: Setup
         uses: ./tooling/github/setup
       - name: Copy env

.github/workflows/conventions-semantic-commits.yml

@@ -0,0 +1,14 @@
+# https://github.com/webiny/action-conventional-commits?tab=readme-ov-file
+name: "[Conventions] Semantic Commits"
+
+on:
+  pull_request:
+    branches: [ dev ]
+
+jobs:
+  build:
+    name: Conventional Commits
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: webiny/action-conventional-commits@v1.3.0

.github/workflows/conventions-semantic-pull-requests.yml

@@ -14,6 +14,6 @@ jobs:
   validate-pull-request-title:
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v6
+      - uses: amannn/action-semantic-pull-request@v5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/crowdin-schedule-download.yml

@@ -5,25 +5,20 @@ on:
   schedule:
     - cron: "0 0 * * *" # every day at midnight
 
-permissions:
-  contents: write # required to push changes
-
 jobs:
   download-crowdin-translations:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Obtain token
         id: obtainToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.CROWDIN_APP_PRIVATE_KEY }}
-          app-id: ${{ secrets.CROWDIN_APP_ID }}
-          permission-contents: write # required to commit to crowdin branch
-          permission-pull-requests: write # required to create pull request
+          private_key: ${{ secrets.CROWDIN_APP_PRIVATE_KEY }}
+          app_id: ${{ secrets.CROWDIN_APP_ID }}
 
       - name: Download Crowdin translations
         id: crowdin-download

.github/workflows/crowdin-upload.yml

@@ -15,7 +15,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Upload Crowdin translations
         uses: crowdin/github-action@v2

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

@@ -49,23 +49,18 @@ jobs:
       - name: Obtain token
         if: env.SKIP_RELEASE == 'false'
         id: obtainToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
-          permission-contents: write # required to commit package.json & changelog changes, merge them to dev and publish the release
-
-      - uses: actions/checkout@v5
+          private_key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
+          app_id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
+      - uses: actions/checkout@v4
         if: env.SKIP_RELEASE == 'false'
         with:
           persist-credentials: false
-      - uses: pnpm/action-setup@v4
-        if: env.SKIP_RELEASE == 'false'
-      - uses: actions/setup-node@v5
+      - uses: actions/setup-node@v4
         if: env.SKIP_RELEASE == 'false'
         with:
-          node-version: 22.20.0
-          cache: "pnpm"
+          node-version: 22
       - run: npm i -g pnpm
         if: env.SKIP_RELEASE == 'false'
       - name: Install dependencies
@@ -115,7 +110,7 @@ jobs:
     outputs:
       digest: ${{ steps.build.outputs.digest }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
         with:
           ref: ${{ needs.release.outputs.git_ref }}
 
@@ -154,7 +149,7 @@ jobs:
     outputs:
       digest: ${{ steps.build.outputs.digest }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
         with:
           ref: ${{ needs.release.outputs.git_ref }}
 

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

@@ -27,7 +27,7 @@ jobs:
         with:
           args: "Automatic release has been triggered: [run ${{ github.run_number }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})"
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Get Next Version
@@ -49,11 +49,10 @@ jobs:
           args: "Created a release PR ${{ steps.create-pull-request.outputs.url }} for version ${{ steps.semver.outputs.next }} (new behaviour: ${{ steps.semver.outputs.bump }})"
       - name: Obtain token
         id: obtainApprovalToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
-          permission-pull-requests: write
+          private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+          app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
       - name: Approve PR
         env:
           GITHUB_TOKEN: ${{ steps.obtainApprovalToken.outputs.token }}
@@ -61,12 +60,10 @@ jobs:
           gh pr review --approve --body "Automatically approved by GitHub Action"
       - name: Obtain token
         id: obtainMergeToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
-          permission-contents: write # write to main branch (due to merge)
-          permission-pull-requests: write # merge pull request
+          private_key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
+          app_id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
       - id: automerge
         if: ${{ steps.semver.outputs.bump != 'major' }}
         name: automerge

.github/workflows/on-release.yml

@@ -1,87 +0,0 @@
-permissions: {}
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  trigger-docs-release:
-    name: Trigger Documentation Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Obtain token
-        id: obtainToken
-        uses: actions/create-github-app-token@v2
-        with:
-          private-key: ${{ secrets.HOMARR_DOCS_RELEASE_APP_PRIVATE_KEY }}
-          app-id: ${{ vars.HOMARR_DOCS_RELEASE_APP_ID }}
-          owner: homarr-labs
-          repositories: |
-            documentation
-          permission-contents: write # required to dispatch repository workflow
-      - name: Trigger documentation release
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-          SOURCE_TAG: ${{ github.event.release.tag_name }}
-        run: |
-          curl -X POST \
-            -H "Authorization: token $GITHUB_TOKEN" \
-            -H "Accept: application/vnd.github+json" \
-            https://api.github.com/repos/homarr-labs/documentation/dispatches \
-            -d @- <<EOF
-          {
-            "event_type": "trigger-release",
-            "client_payload": {
-              "tag": "${SOURCE_TAG}"
-            }
-          }
-          EOF
-  update-bug-report-template:
-    name: Update Bug Report Template
-    runs-on: ubuntu-latest
-    steps:
-      - name: Obtain token
-        id: obtainToken
-        uses: actions/create-github-app-token@v2
-        with:
-          private-key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
-          permission-contents: write # required to commit to branch
-          permission-pull-requests: write # required to create pr & enable automerge
-      - name: Checkout code
-        uses: actions/checkout@v5
-        with:
-          token: ${{ steps.obtainToken.outputs.token }}
-      - name: Setup
-        uses: ./tooling/github/setup
-      - run: pnpm run scripts:update-bug-report-template
-        env:
-          NEXT_VERSION: ${{ github.event.release.tag_name }}
-      - name: Commit changes
-        run: |
-          git config --global user.email "175486441+homarr-releases[bot]@users.noreply.github.com"
-          git config --global user.name "Releases Homarr"
-          git checkout -b update-bug-report-template
-          git add .
-          git commit -m "chore: update bug report template"
-
-      - name: Create Pull Request
-        id: create-pull-request
-        uses: peter-evans/create-pull-request@v7
-        with:
-          token: ${{ steps.obtainToken.outputs.token }}
-          branch: update-bug-report-template
-          base: dev
-          title: "chore: update bug report template"
-          delete-branch: true
-          body: |
-            This PR automatically updates the bug report template of Homarr in the .github/ISSUE_TEMPLATE/bug_report.yml
-
-      - name: Install GitHub CLI
-        run: sudo apt-get install -y gh
-
-      - name: Enable auto-merge
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: |
-          gh pr merge ${{steps.create-pull-request.outputs.pull-request-number}} --auto --squash

.github/workflows/skip-renovate-stability-days.yml

@@ -1,26 +0,0 @@
-permissions:
-  statuses: write
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-
-jobs:
-  skip-stability-days:
-    if: ${{ !startsWith(github.head_ref, 'renovate/') }}
-    name: Skip Stability Days
-    runs-on: ubuntu-latest
-    steps:
-      - name: Add status check
-        env:
-          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}
-        run: |
-          gh api \
-          --method POST \
-          -H "Accept: application/vnd.github+json" \
-          -H "X-GitHub-Api-Version: 2022-11-28" \
-          /repos/${{github.repository}}/statuses/${{github.event.pull_request.head.sha}} \
-          -f 'state=success' \
-          -f 'target_url=https://docs.renovatebot.com/configuration-options#minimumreleaseage' \
-          -f 'description=Skipped for non renovate branches' \
-          -f 'context=renovate/stability-days'

.github/workflows/update-contributors.yml

@@ -1,71 +0,0 @@
-name: Update Contributors
-
-on:
-  schedule:
-    - cron: "0 12 * * FRI" # At 12:00 on Friday.
-  workflow_dispatch:
-
-env:
-  GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
-  CROWDIN_TOKEN: "${{ secrets.CROWDIN_UPDATE_CONTRIBUTORS_TOKEN }}"
-
-jobs:
-  update-contributors:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [22]
-    steps:
-      - name: Obtain token
-        id: obtainToken
-        uses: actions/create-github-app-token@v2
-        with:
-          private-key: ${{ secrets.HOMARR_UPDATE_CONTRIBUTORS_PRIVATE_KEY }}
-          app-id: ${{ vars.HOMARR_UPDATE_CONTRIBUTORS_APP_ID }}
-          permission-contents: write # required to commit to branch
-          permission-pull-requests: write # required to create pr & enable automerge
-
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-
-      - uses: pnpm/action-setup@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v5
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
-
-      - name: Run update script
-        run: node ./scripts/update-contributors.mjs
-
-      - name: Commit changes
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: |
-          git config --global user.email "210161987+homarr-update-contributors[bot]@users.noreply.github.com"
-          git config --global user.name "Homarr Update Contributors"
-          git add .
-          git commit -m "chore: update contributors"
-
-      - name: Create Pull Request
-        id: create-pull-request
-        uses: peter-evans/create-pull-request@v7
-        with:
-          token: ${{ steps.obtainToken.outputs.token }}
-          branch: update-contributors
-          base: dev
-          title: "chore: update contributors"
-          delete-branch: true
-          body: |
-            This PR updates the contributors list in the static-data directory.
-
-      - name: Install GitHub CLI
-        run: sudo apt-get install -y gh
-
-      - name: Enable auto-merge
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: |
-          gh pr merge ${{steps.create-pull-request.outputs.pull-request-number}} --auto --squash

.github/workflows/update-integration-list.yml

@@ -1,64 +0,0 @@
-name: Update integration list
-
-on:
-  workflow_dispatch: {}
-  push:
-    paths:
-      - packages/definitions/src/integration.ts
-    branches:
-      - dev
-
-permissions:
-  pull-requests: write
-
-jobs:
-  update-readme:
-    concurrency:
-      group: update-integration
-      cancel-in-progress: false
-    runs-on: ubuntu-latest
-    steps:
-      - name: Obtain token
-        id: obtainToken
-        uses: actions/create-github-app-token@v2
-        with:
-          private-key: ${{ secrets.HOMARR_UPDATE_CONTRIBUTORS_PRIVATE_KEY }}
-          app-id: ${{ vars.HOMARR_UPDATE_CONTRIBUTORS_APP_ID }}
-          permission-contents: write # required to commit to branch
-          permission-pull-requests: write # required to create pr & enable automerge
-      - name: Checkout code
-        uses: actions/checkout@v5
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-      - name: Setup
-        uses: ./tooling/github/setup
-      - run: pnpm run scripts:update-readme-integrations
-      - name: Commit changes
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: |
-          git config --global user.email "210161987+homarr-update-contributors[bot]@users.noreply.github.com"
-          git config --global user.name "Homarr Update Contributors"
-          git add .
-          git commit -m "chore: update integrations list readme"
-
-      - name: Create Pull Request
-        id: create-pull-request
-        uses: peter-evans/create-pull-request@v7
-        with:
-          token: ${{ steps.obtainToken.outputs.token }}
-          branch: update-integrations-readme
-          base: dev
-          title: "chore: update integrations list readme"
-          delete-branch: true
-          body: |
-            This PR automatically updates the list of integrations of Homarr in the README.md
-
-      - name: Install GitHub CLI
-        run: sudo apt-get install -y gh
-
-      - name: Enable auto-merge
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: |
-          gh pr merge ${{steps.create-pull-request.outputs.pull-request-number}} --auto --squash

.nvmrc

@@ -1 +1 @@
-22.20.0
+22.14.0

.run/db_migration_postgresql_generate.run copy.xml

@@ -1,13 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="db:migration:postgresql:generate" type="js.build_tools.npm">
-    <package-json value="$PROJECT_DIR$/package.json" />
-    <command value="run" />
-    <scripts>
-      <script value="db:migration:postgresql:generate" />
-    </scripts>
-    <node-interpreter value="project" />
-    <package-manager value="pnpm" />
-    <envs />
-    <method v="2" />
-  </configuration>
-</component>

.vscode/settings.json

@@ -26,7 +26,6 @@
     "Sabnzbd",
     "SeDemal",
     "Sonarr",
-    "sslverify",
     "superjson",
     "tabler",
     "trpc",

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22.20.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,7 +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
@@ -64,7 +67,6 @@ ENV DB_URL='/appdata/db/db.sqlite'
 ENV DB_DIALECT='sqlite'
 ENV DB_DRIVER='better-sqlite3'
 ENV AUTH_PROVIDERS='credentials'
-ENV REDIS_IS_EXTERNAL='false'
 ENV NODE_ENV='production'
 
 ENTRYPOINT [ "/app/entrypoint.sh" ]

SECURITY.md

@@ -1,18 +1,18 @@
 # Security Policy
-
 This policy is relevant if you found potential vulnerabilities in an audit.
 We consider something as a vulnerability if it...
-
 1. puts users or user data at risk
 2. enables third parties to gain control or access (e.g. [RATs](https://en.wikipedia.org/wiki/Remote_desktop_software#RAT), [privilege escalation](https://en.wikipedia.org/wiki/Privilege_escalation), ...)
 3. abuses the system in an unintended way (e.g. crypto mining, proxy, ...)
 
 ## Supported Versions
 
-We only fix security issues in the [latest stable version](https://github.com/homarr-labs/homarr/releases/latest). Meaning security issues in prior versions will not be fixed and users have to upgrade to the latest version to receive them.
+| Version | Supported          |
+| ------- | ------------------ |
+| >1.0.0  | :white_check_mark: |
+| <1.0.0  | :x:                |
 
 ## Reporting a Vulnerability
-
 We use [GitHub's system for reporting vulnerabilities](https://docs.github.com/en/enterprise-cloud@latest/code-security/security-advisories/working-with-repository-security-advisories/creating-a-repository-security-advisory).
 Click [**here to report an advisory**](https://github.com/homarr-labs/homarr/security/advisories/new). Our team will get notified and will get back to you within 1-6 business days.
 

apps/nextjs/next.config.ts

@@ -17,16 +17,31 @@ const withNextIntl = createNextIntlPlugin({
   requestConfig: "../../packages/translation/src/request.ts",
 });
 
+interface WebpackConfig {
+  module: {
+    rules: {
+      test: RegExp;
+      loader: string;
+    }[];
+  };
+}
+
 const nextConfig: NextConfig = {
   output: "standalone",
   reactStrictMode: true,
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
-  /**
-   * dockerode is required in the external server packages because of https://github.com/homarr-labs/homarr/issues/612
-   */
-  serverExternalPackages: ["dockerode"],
+  webpack: (config: WebpackConfig, { isServer }) => {
+    if (isServer) {
+      config.module.rules.push({
+        test: /\.node$/,
+        loader: "node-loader",
+      });
+    }
+
+    return config;
+  },
   experimental: {
     optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
   },
@@ -34,36 +49,6 @@ const nextConfig: NextConfig = {
   images: {
     domains: ["cdn.jsdelivr.net"],
   },
-  // eslint-disable-next-line @typescript-eslint/require-await,no-restricted-syntax
-  async headers() {
-    return [
-      {
-        source: "/(.*)", // Apply CSP to all routes
-        headers: [
-          {
-            key: "Content-Security-Policy",
-            // worker-src / media-src with blob: is necessary for video.js, see https://github.com/homarr-labs/homarr/issues/3912 and https://stackoverflow.com/questions/65792855/problem-with-video-js-and-content-security-policy-csp
-            value: `
-              default-src 'self';
-              script-src * 'unsafe-inline' 'unsafe-eval';
-              worker-src * blob:;
-              base-uri 'self';
-              connect-src *;
-              style-src * 'unsafe-inline'; 
-              frame-ancestors *;
-              frame-src *;
-              form-action 'self';
-              img-src * data:;
-              font-src * data:;
-              media-src * data: blob:;
-            `
-              .replace(/\s{2,}/g, " ")
-              .trim(),
-          },
-        ],
-      },
-    ];
-  },
 };
 
 // Skip transform is used because of webpack loader, without it for example 'Tooltip.Floating' will not work and show an error

apps/nextjs/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .next .turbo node_modules",
-    "dev": "pnpm with-env next dev",
+    "dev": "pnpm with-env next dev --turbopack",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint",
     "start": "pnpm with-env next start",
@@ -25,7 +25,6 @@
     "@homarr/boards": "workspace:^0.1.0",
     "@homarr/certificates": "workspace:^0.1.0",
     "@homarr/common": "workspace:^0.1.0",
-    "@homarr/core": "workspace:^0.1.0",
     "@homarr/cron-job-status": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
@@ -34,7 +33,6 @@
     "@homarr/forms-collection": "workspace:^0.1.0",
     "@homarr/gridstack": "^1.12.0",
     "@homarr/icons": "workspace:^0.1.0",
-    "@homarr/image-proxy": "workspace:^0.1.0",
     "@homarr/integrations": "workspace:^0.1.0",
     "@homarr/log": "workspace:^",
     "@homarr/modals": "workspace:^0.1.0",
@@ -50,59 +48,59 @@
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^8.3.3",
-    "@mantine/core": "^8.3.3",
-    "@mantine/dropzone": "^8.3.3",
-    "@mantine/hooks": "^8.3.3",
-    "@mantine/modals": "^8.3.3",
-    "@mantine/tiptap": "^8.3.3",
+    "@mantine/colors-generator": "^7.17.3",
+    "@mantine/core": "^7.17.3",
+    "@mantine/dropzone": "^7.17.3",
+    "@mantine/hooks": "^7.17.3",
+    "@mantine/modals": "^7.17.3",
+    "@mantine/tiptap": "^7.17.3",
     "@million/lint": "1.0.14",
-    "@tabler/icons-react": "^3.35.0",
-    "@tanstack/react-query": "^5.90.2",
-    "@tanstack/react-query-devtools": "^5.90.2",
-    "@tanstack/react-query-next-experimental": "^5.90.2",
-    "@trpc/client": "^11.6.0",
-    "@trpc/next": "^11.6.0",
-    "@trpc/react-query": "^11.6.0",
-    "@trpc/server": "^11.6.0",
+    "@tabler/icons-react": "^3.31.0",
+    "@tanstack/react-query": "^5.70.0",
+    "@tanstack/react-query-devtools": "^5.70.0",
+    "@tanstack/react-query-next-experimental": "^5.70.0",
+    "@trpc/client": "^11.0.1",
+    "@trpc/next": "^11.0.1",
+    "@trpc/react-query": "^11.0.1",
+    "@trpc/server": "^11.0.1",
     "@xterm/addon-canvas": "^0.7.0",
     "@xterm/addon-fit": "0.10.0",
     "@xterm/xterm": "^5.5.0",
     "chroma-js": "^3.1.2",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.18",
-    "dotenv": "^17.2.3",
-    "flag-icons": "^7.5.0",
-    "glob": "^11.0.3",
-    "jotai": "^2.15.0",
+    "dayjs": "^1.11.13",
+    "dotenv": "^16.4.7",
+    "flag-icons": "^7.3.2",
+    "glob": "^11.0.1",
+    "jotai": "^2.12.2",
     "mantine-react-table": "2.0.0-beta.9",
-    "next": "15.5.4",
-    "postcss-preset-mantine": "^1.18.0",
+    "next": "15.2.4",
+    "postcss-preset-mantine": "^1.17.0",
     "prismjs": "^1.30.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "react-error-boundary": "^6.0.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.93.2",
+    "sass": "^1.86.0",
     "superjson": "2.2.2",
-    "swagger-ui-react": "^5.29.3",
+    "swagger-ui-react": "^5.20.2",
     "use-deep-compare-effect": "^1.8.1",
-    "zod": "^4.1.11"
+    "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.1",
-    "@types/node": "^22.18.8",
+    "@types/node": "^22.13.14",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "19.2.0",
-    "@types/react-dom": "19.2.0",
+    "@types/react": "19.0.12",
+    "@types/react-dom": "19.0.4",
     "@types/swagger-ui-react": "^5.18.0",
-    "concurrently": "^9.2.1",
-    "eslint": "^9.37.0",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.23.0",
     "node-loader": "^2.1.0",
-    "prettier": "^3.6.2",
-    "typescript": "^5.9.3"
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
   }
 }

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

@@ -21,6 +21,13 @@ import type { AppRouter } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 import { env } from "@homarr/common/env";
+import { atom, useSetAtom } from "jotai";
+
+interface WebSocketConnection {
+  state: 'connecting' | 'connected' | 'error' | 'closed'
+}
+
+export const webSocketConnectionAtom = atom<WebSocketConnection>({ state: 'connecting' });
 
 const getWebSocketProtocol = () => {
   // window is not defined on server side
@@ -44,9 +51,27 @@ const constructWebsocketUrl = () => {
   return `${getWebSocketProtocol()}://${window.location.hostname}:${window.location.port}/websockets`;
 };
 
-const wsClient = createWSClient({
-  url: constructWebsocketUrl(),
-});
+let wsClient: WsClient | null;
+
+const createWsClientOrDefault = (setState: (connection: WebSocketConnection) => void) => {
+  if (wsClient) {
+    return wsClient;
+  }
+
+  wsClient = createWSClient({
+    url: constructWebsocketUrl(),
+    onOpen() {
+      setState({ state: "connected" });
+    },
+    onClose() {
+      setState({ state: "closed" });
+    },
+    onError() {
+      setState({ state: "error" });
+    }
+  });
+  return wsClient;
+}
 
 export function TRPCReactProvider(props: PropsWithChildren) {
   const [queryClient] = useState(
@@ -60,6 +85,8 @@ export function TRPCReactProvider(props: PropsWithChildren) {
       }),
   );
 
+  const setWebSocketConnection = useSetAtom(webSocketConnectionAtom);
+
   const [trpcClient] = useState(() => {
     return clientApi.createClient({
       links: [
@@ -70,7 +97,7 @@ export function TRPCReactProvider(props: PropsWithChildren) {
         splitLink({
           condition: ({ type }) => type === "subscription",
           true: wsLink<AppRouter>({
-            client: wsClient,
+            client: createWsClientOrDefault((state) => setWebSocketConnection(state)),
             transformer: superjson,
           }),
           false: splitLink({
@@ -106,7 +133,7 @@ export function TRPCReactProvider(props: PropsWithChildren) {
     <clientApi.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
         <ReactQueryStreamedHydration transformer={superjson}>{props.children}</ReactQueryStreamedHydration>
-        <ReactQueryDevtools initialIsOpen={false} />
+        <ReactQueryDevtools initialIsOpen={false}/>
       </QueryClientProvider>
     </clientApi.Provider>
   );

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

@@ -2,14 +2,14 @@
 
 import { useRouter } from "next/navigation";
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
-import type { z } from "zod/v4";
+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 { userRegistrationSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
 
 interface RegistrationFormProps {
   invite: {
@@ -22,7 +22,7 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
   const t = useScopedI18n("user");
   const router = useRouter();
   const { mutate, isPending } = clientApi.user.register.useMutation();
-  const form = useZodForm(userRegistrationSchema, {
+  const form = useZodForm(validation.user.registration, {
     initialValues: {
       username: "",
       password: "",
@@ -30,7 +30,7 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
     },
   });
 
-  const handleSubmit = (values: z.infer<typeof userRegistrationSchema>) => {
+  const handleSubmit = (values: z.infer<typeof validation.user.registration>) => {
     mutate(
       {
         ...values,

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

@@ -2,10 +2,10 @@
 
 import type { PropsWithChildren } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+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/v4";
+import { z } from "zod";
 
 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -13,9 +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 { userSignInSchema } from "@homarr/validation/user";
-
-type Provider = "credentials" | "ldap" | "oidc";
+import { validation } from "@homarr/validation";
 
 interface LoginFormProps {
   providers: string[];
@@ -24,12 +22,10 @@ interface LoginFormProps {
   callbackUrl: string;
 }
 
-const extendedValidation = userSignInSchema.extend({ provider: z.enum(["credentials", "ldap"]) });
+const extendedValidation = validation.user.signIn.extend({ provider: z.enum(["credentials", "ldap"]) });
 
 export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, callbackUrl }: LoginFormProps) => {
   const t = useScopedI18n("user");
-  const searchParams = useSearchParams();
-  const isError = searchParams.has("error");
   const router = useRouter();
   const [isPending, setIsPending] = useState(false);
   const form = useZodForm(extendedValidation, {
@@ -43,34 +39,22 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
   const credentialInputsVisible = providers.includes("credentials") || providers.includes("ldap");
 
   const onSuccess = useCallback(
-    async (provider: Provider, response: Awaited<ReturnType<typeof signIn>>) => {
-      if (!response.ok || response.error) {
+    async (response: Awaited<ReturnType<typeof signIn>>) => {
+      if (response && (!response.ok || response.error)) {
         // eslint-disable-next-line @typescript-eslint/only-throw-error
         throw response.error;
       }
 
-      if (provider === "oidc") {
-        if (!response.url) {
-          showErrorNotification({
-            title: t("action.login.notification.error.title"),
-            message: t("action.login.notification.error.message"),
-            autoClose: 10000,
-          });
-          return;
-        }
-
-        router.push(response.url);
-        return;
-      }
-
       showSuccessNotification({
         title: t("action.login.notification.success.title"),
         message: t("action.login.notification.success.message"),
       });
 
       // Redirect to the callback URL if the response is defined and comes from a credentials provider (ldap or credentials). oidc is redirected automatically.
-      await revalidatePathActionAsync("/");
-      router.push(callbackUrl);
+      if (response) {
+        await revalidatePathActionAsync("/");
+        router.push(callbackUrl);
+      }
     },
     [t, router, callbackUrl],
   );
@@ -86,14 +70,14 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
   }, [t]);
 
   const signInAsync = useCallback(
-    async (provider: Provider, options?: Parameters<typeof signIn>[1]) => {
+    async (provider: string, options?: Parameters<typeof signIn>[1]) => {
       setIsPending(true);
       await signIn(provider, {
         ...options,
         redirect: false,
         callbackUrl: new URL(callbackUrl, window.location.href).href,
       })
-        .then((response) => onSuccess(provider, response))
+        .then(onSuccess)
         .catch(onError);
     },
     [setIsPending, onSuccess, onError, callbackUrl],
@@ -102,12 +86,11 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
   const isLoginInProgress = useRef(false);
 
   useEffect(() => {
-    if (isError) return;
     if (isOidcAutoLoginEnabled && !isPending && !isLoginInProgress.current) {
       isLoginInProgress.current = true;
       void signInAsync("oidc");
     }
-  }, [signInAsync, isOidcAutoLoginEnabled, isPending, isError]);
+  }, [signInAsync, isOidcAutoLoginEnabled, isPending]);
 
   return (
     <Stack gap="xl">

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

@@ -4,21 +4,15 @@ import { TRPCError } from "@trpc/server";
 // Placed here because gridstack styles are used for board content
 import "~/styles/gridstack.scss";
 
-import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
-
-import { getQueryClient } from "@homarr/api/server";
 import { IntegrationProvider } from "@homarr/auth/client";
 import { auth } from "@homarr/auth/next";
 import { getIntegrationsWithPermissionsAsync } from "@homarr/auth/server";
 import { isNullOrWhitespace } from "@homarr/common";
-import type { WidgetKind } from "@homarr/definitions";
-import { logger } from "@homarr/log";
 import { getI18n } from "@homarr/translation/server";
-import { prefetchForKindAsync } from "@homarr/widgets/prefetch";
 
 import { createMetaTitle } from "~/metadata";
 import { createBoardLayout } from "../_layout-creator";
-import type { Board, Item } from "../_types";
+import type { Board } from "../_types";
 import { DynamicClientBoard } from "./_dynamic-client";
 import { BoardContentHeaderActions } from "./_header-actions";
 
@@ -37,36 +31,14 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
       getInitialBoardAsync: getInitialBoard,
     }),
     // eslint-disable-next-line no-restricted-syntax
-    page: async ({ params }: { params: Promise<TParams> }) => {
+    page: async () => {
       const session = await auth();
       const integrations = await getIntegrationsWithPermissionsAsync(session);
 
-      const board = await getInitialBoard(await params);
-      const queryClient = getQueryClient();
-
-      // Prefetch item data
-      const itemsMap = board.items.reduce((acc, item) => {
-        const existing = acc.get(item.kind);
-        if (existing) {
-          existing.push(item);
-        } else {
-          acc.set(item.kind, [item]);
-        }
-        return acc;
-      }, new Map<WidgetKind, Item[]>());
-
-      for (const [kind, items] of itemsMap) {
-        await prefetchForKindAsync(kind, queryClient, items).catch((error) => {
-          logger.error(new Error("Failed to prefetch widget", { cause: error }));
-        });
-      }
-
       return (
-        <HydrationBoundary state={dehydrate(queryClient)}>
-          <IntegrationProvider integrations={integrations}>
-            <DynamicClientBoard />
-          </IntegrationProvider>
-        </HydrationBoundary>
+        <IntegrationProvider integrations={integrations}>
+          <DynamicClientBoard />
+        </IntegrationProvider>
       );
     },
     generateMetadataAsync: async ({ params }: { params: Promise<TParams> }): Promise<Metadata> => {

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

@@ -1,5 +1,6 @@
 "use client";
 
+import type { MouseEvent } from "react";
 import { useCallback, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -23,13 +24,10 @@ 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 { hotkeys } from "@homarr/definitions";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
-import { AppSelectModal } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
-import { useItemActions } from "~/components/board/items/item-actions";
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";
 import { useBoardPermissions } from "~/components/board/permissions/client";
 import { useCategoryActions } from "~/components/board/sections/category/category-actions";
@@ -64,10 +62,8 @@ export const BoardContentHeaderActions = () => {
 const AddMenu = () => {
   const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
   const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
-  const { openModal: openAppSelectModal } = useModalAction(AppSelectModal);
   const { addCategoryToEnd } = useCategoryActions();
   const { addDynamicSection } = useDynamicSectionActions();
-  const { createItem } = useItemActions();
   const t = useI18n();
 
   const handleAddCategory = useCallback(
@@ -94,17 +90,6 @@ const AddMenu = () => {
     openItemSelectModal();
   }, [openItemSelectModal]);
 
-  const handleSelectApp = useCallback(() => {
-    openAppSelectModal({
-      onSelect: (appId) => {
-        createItem({
-          kind: "app",
-          options: { appId },
-        });
-      },
-    });
-  }, [openAppSelectModal, createItem]);
-
   return (
     <Menu position="bottom-end" withArrow>
       <Menu.Target>
@@ -116,14 +101,10 @@ const AddMenu = () => {
         </HeaderButton>
       </Menu.Target>
       <Menu.Dropdown style={{ transform: "translate(-3px, 0)" }}>
-        <Menu.Item leftSection={<IconResize size={20} />} onClick={handleSelectItem}>
+        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectItem}>
           {t("item.action.create")}
         </Menu.Item>
 
-        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectApp}>
-          {t("app.action.add")}
-        </Menu.Item>
-
         <Menu.Divider />
 
         <Menu.Item leftSection={<IconBoxAlignTop size={20} />} onClick={handleAddCategory}>
@@ -166,7 +147,7 @@ const EditModeMenu = () => {
     open();
   }, [board, isEditMode, saveBoard, open]);
 
-  useHotkeys([[hotkeys.toggleBoardEdit, toggle]]);
+  useHotkeys([["mod+e", toggle]]);
   usePreventLeaveWithDirty(isEditMode);
 
   return (
@@ -204,22 +185,17 @@ const SelectBoardsMenu = () => {
   );
 };
 
-const anchorSelector = "a[href]:not([target='_blank'])";
 const usePreventLeaveWithDirty = (isDirty: boolean) => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
   const router = useRouter();
 
   useEffect(() => {
-    if (!isDirty) return;
-
-    const handleClick = (event: Event) => {
+    const handleClick = (event: MouseEvent<HTMLElement>) => {
       const target = (event.target as HTMLElement).closest("a");
 
-      if (!target) {
-        console.warn("No anchor element found for click event", event);
-        return;
-      }
+      if (!target) return;
+      if (!isDirty) return;
 
       event.preventDefault();
 
@@ -236,29 +212,33 @@ const usePreventLeaveWithDirty = (isDirty: boolean) => {
     };
 
     const handlePopState = (event: Event) => {
-      window.history.pushState(null, document.title, window.location.href);
-      event.preventDefault();
+      if (isDirty) {
+        window.history.pushState(null, document.title, window.location.href);
+        event.preventDefault();
+      } else {
+        window.history.back();
+      }
     };
 
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (!isDirty) return;
       if (env.NODE_ENV === "development") return; // Allow to reload in development
 
       event.preventDefault();
       event.returnValue = true;
     };
 
-    const anchors = document.querySelectorAll(anchorSelector);
-    anchors.forEach((link) => {
-      link.addEventListener("click", handleClick);
+    document.querySelectorAll("a").forEach((link) => {
+      link.addEventListener("click", handleClick as never);
     });
     window.addEventListener("popstate", handlePopState);
     window.addEventListener("beforeunload", handleBeforeUnload);
 
     return () => {
-      anchors.forEach((link) => {
-        link.removeEventListener("click", handleClick);
+      document.querySelectorAll("a").forEach((link) => {
+        link.removeEventListener("click", handleClick as never);
+        window.removeEventListener("popstate", handlePopState);
       });
-      window.removeEventListener("popstate", handlePopState);
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
-import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem } from "@mantine/core";
+import { colorsTuple, createTheme, darken, lighten, MantineProvider } from "@mantine/core";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { ColorScheme } from "@homarr/definitions";
@@ -24,11 +24,6 @@ export const BoardMantineProvider = ({
     },
     primaryColor: "primaryColor",
     autoContrast: true,
-    fontSizes: {
-      "2xl": rem(24),
-      "3xl": rem(28),
-      "4xl": rem(36),
-    },
   });
 
   return (

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

@@ -17,11 +17,10 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconX } from "@tabler/icons-react";
 
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
+import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 import { generateColors } from "../../(content)/_theme";
@@ -36,7 +35,7 @@ const hexRegex = /^#[0-9a-fA-F]{6}$/;
 const progressPercentageLabel = (value: number) => `${value}%`;
 
 export const ColorSettingsContent = ({ board }: Props) => {
-  const form = useZodForm(boardSavePartialSettingsSchema, {
+  const form = useZodForm(validation.board.savePartialSettings, {
     initialValues: {
       primaryColor: board.primaryColor,
       secondaryColor: board.secondaryColor,
@@ -103,25 +102,12 @@ export const ColorSettingsContent = ({ board }: Props) => {
             </InputWrapper>
           </Grid.Col>
           <Grid.Col span={{ sm: 12, md: 6 }}>
-            <Group align="end">
-              <ColorInput
-                label={t("board.field.iconColor.label")}
-                format="hex"
-                swatches={Object.values(theme.colors).map((color) => color[6])}
-                flex={1}
-                {...form.getInputProps("iconColor")}
-              />
-              <Button
-                variant="subtle"
-                leftSection={<IconX />}
-                onClick={() => form.setFieldValue("iconColor", "")}
-                disabled={!form.values.iconColor}
-              >
-                {t("board.field.clearColor.label")}
-              </Button>
-            </Group>
-          </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")}
@@ -137,7 +123,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
           </Grid.Col>
         </Grid>
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" loading={isPending} color="teal">
             {t("common.action.saveChanges")}
           </Button>
         </Group>

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

@@ -1,20 +1,14 @@
 "use client";
 
-import { startTransition } from "react";
-import { ActionIcon, Autocomplete, Button, Center, Grid, Group, Popover, Stack, Text } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-import { IconPhotoOff, IconUpload } from "@tabler/icons-react";
+import { Button, Grid, Group, Stack, TextInput } from "@mantine/core";
 
-import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
 import { backgroundImageAttachments, backgroundImageRepeats, backgroundImageSizes } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
-import { UploadMedia } from "@homarr/forms-collection";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 import type { SelectItemWithDescriptionBadge } from "@homarr/ui";
 import { SelectWithDescriptionBadge } from "@homarr/ui";
-import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
+import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -24,9 +18,8 @@ interface Props {
 }
 export const BackgroundSettingsContent = ({ board }: Props) => {
   const t = useI18n();
-  const { data: session } = useSession();
   const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useZodForm(boardSavePartialSettingsSchema, {
+  const form = useZodForm(validation.board.savePartialSettings, {
     initialValues: {
       backgroundImageUrl: board.backgroundImageUrl ?? "",
       backgroundImageAttachment: board.backgroundImageAttachment,
@@ -35,16 +28,6 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
     },
   });
 
-  const [debouncedSearch] = useDebouncedValue(form.values.backgroundImageUrl, 200);
-  const medias = clientApi.media.getPaginated.useQuery({
-    page: 1,
-    pageSize: 10,
-    includeFromAllUsers: true,
-    search: debouncedSearch ?? "",
-  });
-  const images = medias.data?.items.filter((media) => media.contentType.startsWith("image/")) ?? [];
-  const imageMap = new Map(images.map((image) => [`/api/user-medias/${image.id}`, image]));
-
   const backgroundImageAttachmentData = useBackgroundOptionData(
     "backgroundImageAttachment",
     backgroundImageAttachments,
@@ -64,79 +47,10 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
       <Stack>
         <Grid>
           <Grid.Col span={12}>
-            <Group wrap="nowrap" gap="xs" w="100%" align="start">
-              <Autocomplete
-                flex={1}
-                leftSection={
-                  form.values.backgroundImageUrl &&
-                  form.values.backgroundImageUrl.trim().length >= 2 && (
-                    <Popover width={300} withArrow>
-                      <Popover.Target>
-                        <Center h="100%">
-                          <ImagePreview src={form.values.backgroundImageUrl} w={20} h={20} />
-                        </Center>
-                      </Popover.Target>
-                      <Popover.Dropdown>
-                        <ImagePreview src={form.values.backgroundImageUrl} w="100%" />
-                      </Popover.Dropdown>
-                    </Popover>
-                  )
-                }
-                // We filter it on the server
-                filter={({ options }) => options}
-                label={t("board.field.backgroundImageUrl.label")}
-                placeholder={`${t("board.field.backgroundImageUrl.placeholder")}...`}
-                renderOption={({ option }) => {
-                  const current = imageMap.get(option.value);
-                  if (!current) return null;
-
-                  return (
-                    <Group gap="sm">
-                      <ImagePreview src={option.value} w={20} h={20} />
-                      <Stack gap={0}>
-                        <Text size="sm">{current.name}</Text>
-                        <Text size="xs" c="dimmed">
-                          {option.value}
-                        </Text>
-                      </Stack>
-                    </Group>
-                  );
-                }}
-                data={[
-                  {
-                    group: t("board.field.backgroundImageUrl.group.your"),
-                    items: images
-                      .filter((media) => media.creatorId === session?.user.id)
-                      .map((media) => `/api/user-medias/${media.id}`),
-                  },
-                  {
-                    group: t("board.field.backgroundImageUrl.group.other"),
-                    items: images
-                      .filter((media) => media.creatorId !== session?.user.id)
-                      .map((media) => `/api/user-medias/${media.id}`),
-                  },
-                ]}
-                {...form.getInputProps("backgroundImageUrl")}
-              />
-              {session?.user.permissions.includes("media-upload") && (
-                <UploadMedia
-                  onSuccess={(medias) => {
-                    const first = medias.at(0);
-                    if (!first) return;
-
-                    startTransition(() => {
-                      form.setFieldValue("backgroundImageUrl", first.url);
-                    });
-                  }}
-                >
-                  {({ onClick, loading }) => (
-                    <ActionIcon onClick={onClick} loading={loading} mt={24} size={36} variant="default">
-                      <IconUpload size={16} stroke={1.5} />
-                    </ActionIcon>
-                  )}
-                </UploadMedia>
-              )}
-            </Group>
+            <TextInput
+              label={t("board.field.backgroundImageUrl.label")}
+              {...form.getInputProps("backgroundImageUrl")}
+            />
           </Grid.Col>
           <Grid.Col span={12}>
             <SelectWithDescriptionBadge
@@ -162,7 +76,7 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
         </Grid>
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" loading={isPending} color="teal">
             {t("common.action.saveChanges")}
           </Button>
         </Group>
@@ -171,21 +85,6 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
   );
 };
 
-interface ImagePreviewProps {
-  src: string;
-  w: string | number;
-  h?: string | number;
-}
-
-const ImagePreview = ({ src, w, h }: ImagePreviewProps) => {
-  if (!["/", "http://", "https://"].some((prefix) => src.startsWith(prefix))) {
-    return <IconPhotoOff size={w} />;
-  }
-
-  // eslint-disable-next-line @next/next/no-img-element
-  return <img src={src} alt="preview image" style={{ width: w, height: h, objectFit: "contain" }} />;
-};
-
 type BackgroundImageKey = "backgroundImageAttachment" | "backgroundImageSize" | "backgroundImageRepeat";
 
 type inferOptions<TKey extends BackgroundImageKey> = TranslationObject["board"]["field"][TKey]["option"];

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

@@ -38,7 +38,7 @@ export const BehaviorSettingsContent = ({ board }: Props) => {
         />
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" loading={isPending} color="teal">
             {t("common.action.saveChanges")}
           </Button>
         </Group>

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

@@ -46,7 +46,7 @@ export const CustomCssSettingsContent = ({ board }: Props) => {
         </Alert>
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" loading={isPending} color="teal">
             {t("common.action.saveChanges")}
           </Button>
         </Group>

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

@@ -1,14 +1,14 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { Button, Grid, Group, Loader, Stack, TextInput } from "@mantine/core";
+import { Button, Grid, Group, Loader, Stack, TextInput, Tooltip } from "@mantine/core";
 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 { IconPicker } from "@homarr/forms-collection";
 import { useI18n } from "@homarr/translation/client";
-import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
+import { validation } from "@homarr/validation";
 
 import { createMetaTitle } from "~/metadata";
 import type { Board } from "../../_types";
@@ -28,7 +28,7 @@ export const GeneralSettingsContent = ({ board }: Props) => {
 
   const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
   const form = useZodForm(
-    boardSavePartialSettingsSchema
+    validation.board.savePartialSettings
       .pick({
         pageTitle: true,
         logoImageUrl: true,
@@ -52,9 +52,9 @@ export const GeneralSettingsContent = ({ board }: Props) => {
     },
   );
 
-  useLogoPreview(form.values.logoImageUrl);
-  useFaviconPreview(form.values.faviconImageUrl);
   const metaTitleStatus = useMetaTitlePreview(form.values.metaTitle);
+  const faviconStatus = useFaviconPreview(form.values.faviconImageUrl);
+  const logoStatus = useLogoPreview(form.values.logoImageUrl);
 
   // Cleanup for not applied changes of the page title and logo image URL
   useEffect(() => {
@@ -94,29 +94,29 @@ export const GeneralSettingsContent = ({ board }: Props) => {
             <TextInput
               label={t("board.field.metaTitle.label")}
               placeholder={createMetaTitle(t("board.content.metaTitle", { boardName: board.name }))}
-              rightSection={metaTitleStatus.isPending && <Loader size="xs" />}
+              rightSection={<PendingOrInvalidIndicator {...metaTitleStatus} />}
               {...form.getInputProps("metaTitle")}
             />
           </Grid.Col>
           <Grid.Col span={{ xs: 12, md: 6 }}>
-            <IconPicker
-              {...form.getInputProps("logoImageUrl")}
+            <TextInput
               label={t("board.field.logoImageUrl.label")}
               placeholder="/logo/logo.png"
-              withAsterisk={false}
+              rightSection={<PendingOrInvalidIndicator {...logoStatus} />}
+              {...form.getInputProps("logoImageUrl")}
             />
           </Grid.Col>
           <Grid.Col span={{ xs: 12, md: 6 }}>
-            <IconPicker
-              {...form.getInputProps("faviconImageUrl")}
+            <TextInput
               label={t("board.field.faviconImageUrl.label")}
               placeholder="/logo/logo.png"
-              withAsterisk={false}
+              rightSection={<PendingOrInvalidIndicator {...faviconStatus} />}
+              {...form.getInputProps("faviconImageUrl")}
             />
           </Grid.Col>
         </Grid>
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" loading={isPending} color="teal">
             {t("common.action.saveChanges")}
           </Button>
         </Group>
@@ -125,16 +125,40 @@ export const GeneralSettingsContent = ({ board }: Props) => {
   );
 };
 
+const PendingOrInvalidIndicator = ({ isPending, isInvalid }: { isPending: boolean; isInvalid?: boolean }) => {
+  const t = useI18n();
+
+  if (isInvalid) {
+    return (
+      <Tooltip multiline w={220} label={t("board.setting.section.general.unrecognizedLink")}>
+        <IconAlertTriangle size="1rem" color="red" />
+      </Tooltip>
+    );
+  }
+
+  if (isPending) {
+    return <Loader size="xs" />;
+  }
+
+  return null;
+};
+
 const useLogoPreview = (url: string | null) => {
   const { updateBoard } = useUpdateBoard();
   const [logoDebounced] = useDebouncedValue(url ?? "", 500);
 
   useEffect(() => {
+    if (!logoDebounced.includes(".") && logoDebounced.length >= 1) return;
     updateBoard((previous) => ({
       ...previous,
       logoImageUrl: logoDebounced.length >= 1 ? logoDebounced : null,
     }));
   }, [logoDebounced, updateBoard]);
+
+  return {
+    isPending: (url ?? "") !== logoDebounced,
+    isInvalid: logoDebounced.length >= 1 && !logoDebounced.includes("."),
+  };
 };
 
 const useMetaTitlePreview = (title: string | null) => {
@@ -146,7 +170,16 @@ const useMetaTitlePreview = (title: string | null) => {
   };
 };
 
+const validFaviconExtensions = ["ico", "png", "svg", "gif"];
+const isValidUrl = (url: string) =>
+  url.includes("/") && validFaviconExtensions.some((extension) => url.endsWith(`.${extension}`));
+
 const useFaviconPreview = (url: string | null) => {
   const [faviconDebounced] = useDebouncedValue(url ?? "", 500);
-  useFavicon(faviconDebounced);
+  useFavicon(isValidUrl(faviconDebounced) ? faviconDebounced : "");
+
+  return {
+    isPending: (url ?? "") !== faviconDebounced,
+    isInvalid: faviconDebounced.length >= 1 && !isValidUrl(faviconDebounced),
+  };
 };

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

@@ -3,10 +3,10 @@
 import { Button, Fieldset, Grid, Group, Input, NumberInput, Slider, Stack, Text, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { createId } from "@homarr/common";
+import { createId } from "@homarr/db/client";
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { boardSaveLayoutsSchema } from "@homarr/validation/board";
+import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 
@@ -22,7 +22,7 @@ export const LayoutSettingsContent = ({ board }: Props) => {
       void utils.board.getHomeBoard.invalidate();
     },
   });
-  const form = useZodForm(boardSaveLayoutsSchema.omit({ id: true }).required(), {
+  const form = useZodForm(validation.board.saveLayouts.omit({ id: true }).required(), {
     initialValues: {
       layouts: board.layouts,
     },
@@ -105,7 +105,7 @@ export const LayoutSettingsContent = ({ board }: Props) => {
         </Stack>
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" loading={isPending} color="teal">
             {t("common.action.saveChanges")}
           </Button>
         </Group>

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

@@ -61,10 +61,6 @@ const getBoardAndPermissionsAsync = async (params: Awaited<Props["params"]>) =>
       notFound();
     }
 
-    if (error instanceof TRPCError && error.code === "BAD_REQUEST") {
-      notFound();
-    }
-
     throw error;
   }
 };

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

@@ -45,10 +45,6 @@ export const createBoardLayout = <TParams extends Params>({
         notFound();
       }
 
-      if (error instanceof TRPCError && error.code === "BAD_REQUEST") {
-        notFound();
-      }
-
       throw error;
     });
     const colorScheme = await getCurrentColorSchemeAsync();

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

@@ -2,24 +2,24 @@
 
 import { Button, Card, Stack, TextInput } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
-import type { z } from "zod/v4";
+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 { groupCreateSchema } from "@homarr/validation/group";
+import { validation } from "@homarr/validation";
 
 export const InitGroup = () => {
   const t = useI18n();
   const { mutateAsync } = clientApi.group.createInitialExternalGroup.useMutation();
-  const form = useZodForm(groupCreateSchema, {
+  const form = useZodForm(validation.group.create, {
     initialValues: {
       name: "",
     },
   });
 
-  const handleSubmitAsync = async (values: z.infer<typeof groupCreateSchema>) => {
+  const handleSubmitAsync = async (values: z.infer<typeof validation.group.create>) => {
     await mutateAsync(values, {
       async onSuccess() {
         await revalidatePathActionAsync("/init");

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

@@ -3,7 +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/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -12,13 +12,13 @@ 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 { settingsInitSchema } from "@homarr/validation/settings";
+import { validation } from "@homarr/validation";
 
 export const InitSettings = () => {
   const tSection = useScopedI18n("management.page.settings.section");
   const t = useI18n();
   const { mutateAsync } = clientApi.serverSettings.initSettings.useMutation();
-  const form = useZodForm(settingsInitSchema, { initialValues: defaultServerSettings });
+  const form = useZodForm(validation.settings.init, { initialValues: defaultServerSettings });
 
   form.watch("analytics.enableGeneral", ({ value }) => {
     if (!value) {
@@ -30,7 +30,7 @@ export const InitSettings = () => {
     }
   });
 
-  const handleSubmitAsync = async (values: z.infer<typeof settingsInitSchema>) => {
+  const handleSubmitAsync = async (values: z.infer<typeof validation.settings.init>) => {
     await mutateAsync(values, {
       async onSuccess() {
         await revalidatePathActionAsync("/init");

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { signIn } from "@homarr/auth/client";
@@ -10,13 +10,13 @@ import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import { CustomPasswordInput } from "@homarr/ui";
-import { userInitSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
 
 export const InitUserForm = () => {
   const t = useScopedI18n("user");
   const tUser = useScopedI18n("init.step.user");
   const { mutateAsync, isPending } = clientApi.user.initUser.useMutation();
-  const form = useZodForm(userInitSchema, {
+  const form = useZodForm(validation.user.init, {
     initialValues: {
       username: "",
       password: "",
@@ -74,4 +74,4 @@ export const InitUserForm = () => {
   );
 };
 
-type FormType = z.infer<typeof userInitSchema>;
+type FormType = z.infer<typeof validation.user.init>;

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

@@ -7,7 +7,6 @@ import "@homarr/ui/styles.css";
 import "~/styles/scroll-area.scss";
 
 import { notFound } from "next/navigation";
-import type { DayOfWeek } from "@mantine/dates";
 import { NextIntlClientProvider } from "next-intl";
 
 import { api } from "@homarr/api/server";
@@ -23,7 +22,6 @@ import type { SupportedLanguage } from "@homarr/translation";
 import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
 
 import { Analytics } from "~/components/layout/analytics";
-import { CrowdinLiveTranslation } from "~/components/layout/crowdin-live-translation";
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import { DayJsLoader } from "./_client-providers/dayjs-loader";
@@ -89,15 +87,7 @@ export default async function Layout(props: {
     },
     (innerProps) => (
       <SettingsProvider
-        user={
-          user
-            ? {
-                ...user,
-                // Convert type, because output schema is not smart enough to infer $type from drizzle
-                firstDayOfWeek: user.firstDayOfWeek as DayOfWeek,
-              }
-            : null
-        }
+        user={user}
         serverSettings={{
           board: {
             homeBoardId: serverSettings.board.homeBoardId,
@@ -119,12 +109,10 @@ export default async function Layout(props: {
     (innerProps) => <SpotlightProvider {...innerProps} />,
   ]);
 
-  const { locale } = await props.params;
-
   return (
     // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
     <html
-      lang={locale}
+      lang={(await props.params).locale}
       dir={direction}
       data-mantine-color-scheme={colorScheme}
       style={{
@@ -135,7 +123,6 @@ export default async function Layout(props: {
       <head>
         <Analytics />
         <SearchEngineOptimization />
-        <CrowdinLiveTranslation locale={locale} />
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <StackedProvider>

apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx

@@ -1,16 +1,37 @@
 import { Box, Grid, GridCol, Group, Image, Stack, Title } from "@mantine/core";
 
 import { splitToNChunks } from "@homarr/common";
-import { integrationDefs } from "@homarr/definitions";
 
 import classes from "./hero-banner.module.css";
 
-const icons = Object.values(integrationDefs)
-  .filter((int) => int.name !== "Mock")
-  .map((int) => int.iconUrl);
+const icons = [
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/sabnzbd.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/deluge.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/radarr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/sonarr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/lidarr.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/pihole.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/dashdot.png",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/overseerr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/plex.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/jellyfin.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/homeassistant.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/freshrss.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/readarr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/transmission.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/qbittorrent.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/nzbget.png",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/openmediavault.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/docker.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/jellyseerr.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/adguardhome.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/tdarr.png",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/prowlarr.svg",
+];
 
 const countIconGroups = 3;
-const animationDurationInSeconds = icons.length;
+const animationDurationInSeconds = 12;
 const arrayInChunks = splitToNChunks(icons, countIconGroups);
 
 export const HeroBanner = () => {
@@ -40,26 +61,12 @@ export const HeroBanner = () => {
                   }}
                 >
                   {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
-                      key={`grid-column-${columnIndex}-scroll-1-${index}`}
-                      src={icon}
-                      radius="md"
-                      fit={"contain"}
-                      w={50}
-                      h={50}
-                    />
+                    <Image key={`grid-column-${columnIndex}-scroll-1-${index}`} src={icon} radius="md" w={50} h={50} />
                   ))}
 
                   {/* This is used for making the animation seem seamless */}
                   {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
-                      key={`grid-column-${columnIndex}-scroll-2-${index}`}
-                      src={icon}
-                      radius="md"
-                      fit={"contain"}
-                      w={50}
-                      h={50}
-                    />
+                    <Image key={`grid-column-${columnIndex}-scroll-2-${index}`} src={icon} radius="md" w={50} h={50} />
                   ))}
                 </Stack>
               </GridCol>

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

@@ -11,23 +11,14 @@ import {
   Center,
   Flex,
   Group,
-  Kbd,
   List,
   ListItem,
   Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
   Text,
   Title,
 } from "@mantine/core";
-import { IconKeyboard, IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
+import { IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
 
-import { capitalize, objectEntries } from "@homarr/common";
-import { hotkeys } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 
 import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
@@ -158,45 +149,6 @@ export default async function AboutPage() {
             </List>
           </AccordionPanel>
         </AccordionItem>
-        <AccordionItem value="hotkeys">
-          <AccordionControl icon={<IconKeyboard size="1rem" />}>
-            <Stack gap={0}>
-              <Text>{t("accordion.hotkeys.title")}</Text>
-              <Text size="sm" c="dimmed">
-                {t("accordion.hotkeys.subtitle")}
-              </Text>
-            </Stack>
-          </AccordionControl>
-          <AccordionPanel>
-            <Table>
-              <TableThead>
-                <TableTr>
-                  <TableTh>{t("accordion.hotkeys.field.shortcut")}</TableTh>
-                  <TableTh>{t("accordion.hotkeys.field.action")}</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {objectEntries(hotkeys).map(([key, shortcut]) => (
-                  <TableTr key={key}>
-                    <TableTd>
-                      <Kbd size="md">
-                        {shortcut
-                          .split("+")
-                          .map((key) => capitalize(key.trim()))
-                          .join(" + ")}
-                      </Kbd>
-                    </TableTd>
-                    <TableTd>{t(`accordion.hotkeys.action.${key}`)}</TableTd>
-                  </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-
-            <Text size="sm" c="dimmed">
-              {t("accordion.hotkeys.note")}
-            </Text>
-          </AccordionPanel>
-        </AccordionItem>
       </Accordion>
     </div>
   );

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

@@ -2,7 +2,7 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -10,7 +10,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { AppForm } from "@homarr/forms-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import type { appManageSchema } from "@homarr/validation/app";
+import type { validation } from "@homarr/validation";
 
 interface AppEditFormProps {
   app: RouterOutputs["app"]["byId"];
@@ -40,7 +40,7 @@ export const AppEditForm = ({ app }: AppEditFormProps) => {
   });
 
   const handleSubmit = useCallback(
-    (values: z.infer<typeof appManageSchema>) => {
+    (values: z.infer<typeof validation.app.manage>) => {
       mutate({
         id: app.id,
         ...values,

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

@@ -1,9 +1,8 @@
-import { Fragment } from "react";
 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/v4";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -99,12 +98,7 @@ const AppCard = async ({ app }: AppCardProps) => {
             </Text>
             {app.description && (
               <Text size="sm" c="gray.6" lineClamp={4}>
-                {app.description.split("\n").map((line, index) => (
-                  <Fragment key={index}>
-                    {line}
-                    <br />
-                  </Fragment>
-                ))}
+                {app.description}
               </Text>
             )}
             {app.href && (

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

@@ -1,15 +1,4 @@
-import {
-  IconCode,
-  IconGrid3x3,
-  IconKey,
-  IconLink,
-  IconMessage,
-  IconPassword,
-  IconPasswordUser,
-  IconPlug,
-  IconServer,
-  IconUser,
-} from "@tabler/icons-react";
+import { IconGrid3x3, IconKey, IconPassword, IconServer, IconUser } from "@tabler/icons-react";
 
 import type { IntegrationSecretKind } from "@homarr/definitions";
 import type { TablerIcon } from "@homarr/ui";
@@ -20,12 +9,4 @@ export const integrationSecretIcons = {
   password: IconPassword,
   realm: IconServer,
   tokenId: IconGrid3x3,
-  personalAccessToken: IconPasswordUser,
-  topic: IconMessage,
-  url: IconLink,
-  opnsenseApiKey: IconKey,
-  opnsenseApiSecret: IconPassword,
-  githubAppId: IconCode,
-  githubInstallationId: IconPlug,
-  privateKey: IconKey,
 } satisfies Record<IntegrationSecretKind, TablerIcon>;

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

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ChangeEventHandler, FocusEventHandler } from "react";
-import { PasswordInput, Textarea, TextInput } from "@mantine/core";
+import { PasswordInput, TextInput } from "@mantine/core";
 
 import { integrationSecretKindObject } from "@homarr/definitions";
 import type { IntegrationSecretKind } from "@homarr/definitions";
@@ -14,9 +14,9 @@ interface IntegrationSecretInputProps {
   label?: string;
   kind: IntegrationSecretKind;
   value?: string;
-  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
   error?: string;
 }
 
@@ -31,19 +31,6 @@ export const IntegrationSecretInput = (props: IntegrationSecretInputProps) => {
 const PublicSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) => {
   const t = useI18n();
   const Icon = integrationSecretIcons[kind];
-  const { multiline } = integrationSecretKindObject[kind];
-  if (multiline) {
-    return (
-      <Textarea
-        {...props}
-        label={props.label ?? t(`integration.secrets.kind.${kind}.label`)}
-        w="100%"
-        leftSection={<Icon size={20} stroke={1.5} />}
-        autosize
-        minRows={2}
-      />
-    );
-  }
 
   return (
     <TextInput
@@ -58,21 +45,6 @@ const PublicSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) => {
 const PrivateSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) => {
   const t = useI18n();
   const Icon = integrationSecretIcons[kind];
-  const { multiline } = integrationSecretKindObject[kind];
-
-  if (multiline) {
-    return (
-      <Textarea
-        {...props}
-        label={props.label ?? t(`integration.secrets.kind.${kind}.label`)}
-        description={t("integration.secrets.secureNotice")}
-        w="100%"
-        leftSection={<Icon size={20} stroke={1.5} />}
-        autosize
-        minRows={2}
-      />
-    );
-  }
 
   return (
     <PasswordInput

apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-segmented-control.tsx

@@ -1,62 +0,0 @@
-import { useCallback } from "react";
-import { SegmentedControl } from "@mantine/core";
-
-import type { IntegrationSecretKind } from "@homarr/definitions";
-import type { UseFormReturnType } from "@homarr/form";
-import { useScopedI18n } from "@homarr/translation/client";
-
-interface FormType {
-  secrets: { kind: IntegrationSecretKind; value: string | null }[];
-}
-
-interface SecretKindsSegmentedControlProps<TFormType extends FormType> {
-  defaultKinds?: IntegrationSecretKind[];
-  secretKinds: IntegrationSecretKind[][];
-  form: UseFormReturnType<TFormType, (values: TFormType) => TFormType>;
-}
-
-export const SecretKindsSegmentedControl = <TFormType extends FormType>({
-  defaultKinds,
-  secretKinds,
-  form,
-}: SecretKindsSegmentedControlProps<TFormType>) => {
-  const t = useScopedI18n("integration.secrets");
-
-  const defaultValue = defaultKinds?.length === 0 ? "empty" : defaultKinds?.join("-");
-  const secretKindGroups = secretKinds.map((kinds) => ({
-    label:
-      kinds.length === 0
-        ? t("noSecretsRequired.segmentTitle")
-        : kinds.map((kind) => t(`kind.${kind}.label`)).join(" & "),
-    value: kinds.length === 0 ? "empty" : kinds.join("-"),
-  }));
-
-  const onChange = useCallback(
-    (value: string) => {
-      if (value === "empty") {
-        const emptyValues = [] satisfies FormType["secrets"];
-        // @ts-expect-error somehow it is not able to understand that secrets is an array?
-        form.setFieldValue("secrets", emptyValues);
-        return;
-      }
-
-      const kinds = value.split("-") as IntegrationSecretKind[];
-      const secrets = kinds.map((kind) => ({
-        kind,
-        value: "",
-      })) satisfies FormType["secrets"];
-      // @ts-expect-error somehow it is not able to understand that secrets is an array?
-      form.setFieldValue("secrets", secrets);
-    },
-    [form],
-  );
-
-  return (
-    <SegmentedControl
-      fullWidth
-      data={secretKindGroups}
-      defaultValue={defaultValue}
-      onChange={onChange}
-    ></SegmentedControl>
-  );
-};

apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/integration-test-connection-error.tsx

@@ -1,96 +0,0 @@
-import { useMemo } from "react";
-import { Accordion, Anchor, Card, Stack, Text } from "@mantine/core";
-import { IconSubtask } from "@tabler/icons-react";
-
-import { getMantineColor } from "@homarr/common";
-import { useI18n } from "@homarr/translation/client";
-
-import { CertificateErrorDetails } from "./test-connection-certificate";
-import type { AnyMappedTestConnectionError, MappedError } from "./types";
-
-interface IntegrationTestConnectionErrorProps {
-  error: AnyMappedTestConnectionError;
-  url: string;
-}
-
-export const IntegrationTestConnectionError = ({ error, url }: IntegrationTestConnectionErrorProps) => {
-  const t = useI18n();
-  const causeArray = useMemo(() => toCauseArray(error.cause), [error.cause]);
-
-  return (
-    <Card withBorder style={{ borderColor: getMantineColor("red", 8) }}>
-      <Stack>
-        <Stack gap="sm">
-          <Text size="lg" fw={500} c="red.8">
-            {t(`integration.testConnection.error.${error.type}.title`)}
-          </Text>
-
-          {error.type !== "request" && error.type !== "certificate" && error.type !== "statusCode" ? (
-            <Text size="md">{t(`integration.testConnection.error.${error.type}.description`)}</Text>
-          ) : null}
-
-          {error.type === "request" ? (
-            <Text size="md">
-              {t(
-                `integration.testConnection.error.request.description.${error.data.type}.${error.data.reason}` as never,
-              )}
-            </Text>
-          ) : null}
-
-          {error.type === "statusCode" ? (
-            error.data.reason === "other" ? (
-              <Text size="md">
-                {t.rich("integration.testConnection.error.statusCode.otherDescription", {
-                  statusCode: error.data.statusCode.toString(),
-                  url: () => <Anchor href={error.data.url}>{error.data.url}</Anchor>,
-                })}
-              </Text>
-            ) : (
-              <Text size="md">
-                {t.rich("integration.testConnection.error.statusCode.description", {
-                  reason: t(`integration.testConnection.error.statusCode.reason.${error.data.reason}`),
-                  statusCode: error.data.statusCode.toString(),
-                  url: () => <Anchor href={error.data.url}>{error.data.url}</Anchor>,
-                })}
-              </Text>
-            )
-          ) : null}
-
-          {error.type === "certificate" ? <CertificateErrorDetails error={error} url={url} /> : null}
-        </Stack>
-
-        {error.cause ? (
-          <Accordion variant="contained">
-            <Accordion.Item value="cause">
-              <Accordion.Control icon={<IconSubtask size={16} stroke={1.5} />}>
-                {t("integration.testConnection.error.common.cause.title")}
-              </Accordion.Control>
-              <Accordion.Panel>
-                <pre style={{ whiteSpace: "pre-wrap" }}>
-                  {error.name}: {error.message}
-                  {"\n"}
-                  {causeArray
-                    .map(
-                      (cause) =>
-                        `caused by ${cause.name}${cause.message ? `: ${cause.message}` : ""} ${cause.metadata.map((item) => `${item.key}=${item.value}`).join(" ")}`,
-                    )
-                    .join("\n")}
-                </pre>
-              </Accordion.Panel>
-            </Accordion.Item>
-          </Accordion>
-        ) : null}
-      </Stack>
-    </Card>
-  );
-};
-
-const toCauseArray = (cause: MappedError | undefined) => {
-  const causeArray: MappedError[] = [];
-  let currentCause: MappedError | undefined = cause;
-  while (currentCause) {
-    causeArray.push(currentCause);
-    currentCause = currentCause.cause;
-  }
-  return causeArray.map(({ cause: _innerCause, ...cause }) => cause);
-};

apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/test-connection-certificate.tsx

@@ -1,333 +0,0 @@
-import { useState } from "react";
-import { ActionIcon, Alert, Anchor, Button, Card, CopyButton, Group, SimpleGrid, Stack, Text } from "@mantine/core";
-import { IconAlertTriangle, IconCheck, IconCopy, IconExclamationCircle, IconRepeat } from "@tabler/icons-react";
-
-import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
-import { createId, getMantineColor } from "@homarr/common";
-import { createDocumentationLink } from "@homarr/definitions";
-import { createModal, useConfirmModal, useModalAction } from "@homarr/modals";
-import { AddCertificateModal } from "@homarr/modals-collection";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useCurrentLocale, useI18n, useScopedI18n } from "@homarr/translation/client";
-
-import type { MappedCertificate, MappedTestConnectionCertificateError } from "./types";
-
-interface CertificateErrorDetailsProps {
-  error: MappedTestConnectionCertificateError;
-  url: string;
-}
-
-export const CertificateErrorDetails = ({ error, url }: CertificateErrorDetailsProps) => {
-  const tError = useScopedI18n("integration.testConnection.error");
-  const { data: session } = useSession();
-  const isAdmin = session?.user.permissions.includes("admin") ?? false;
-  const [showRetryButton, setShowRetryButton] = useState(false);
-
-  const { openModal: openUploadModal } = useModalAction(AddCertificateModal);
-  const { openConfirmModal } = useConfirmModal();
-  const { mutateAsync: trustHostnameAsync } = clientApi.certificates.trustHostnameMismatch.useMutation();
-  const { mutateAsync: addCertificateAsync } = clientApi.certificates.addCertificate.useMutation();
-
-  const rootCertificate = getHeighestCertificate(error.data.certificate);
-
-  const handleTrustHostname = () => {
-    const { hostname } = new URL(url);
-    openConfirmModal({
-      title: tError("certificate.hostnameMismatch.confirm.title"),
-      children: tError("certificate.hostnameMismatch.confirm.message"),
-      // eslint-disable-next-line no-restricted-syntax
-      async onConfirm() {
-        await trustHostnameAsync(
-          {
-            hostname,
-            certificate: error.data.certificate.pem,
-          },
-          {
-            onSuccess() {
-              showSuccessNotification({
-                title: tError("certificate.hostnameMismatch.notification.success.title"),
-                message: tError("certificate.hostnameMismatch.notification.success.message"),
-              });
-              setShowRetryButton(true);
-            },
-            onError() {
-              showErrorNotification({
-                title: tError("certificate.hostnameMismatch.notification.error.title"),
-                message: tError("certificate.hostnameMismatch.notification.error.message"),
-              });
-            },
-          },
-        );
-      },
-    });
-  };
-
-  const handleTrustSelfSigned = () => {
-    const { hostname } = new URL(url);
-    openConfirmModal({
-      title: tError("certificate.selfSigned.confirm.title"),
-      children: tError("certificate.selfSigned.confirm.message"),
-      // eslint-disable-next-line no-restricted-syntax
-      async onConfirm() {
-        const formData = new FormData();
-        formData.append(
-          "file",
-          new File([rootCertificate.pem], `${hostname}-${createId()}.crt`, {
-            type: "application/x-x509-ca-cert",
-          }),
-        );
-        await addCertificateAsync(formData, {
-          onSuccess() {
-            showSuccessNotification({
-              title: tError("certificate.selfSigned.notification.success.title"),
-              message: tError("certificate.selfSigned.notification.success.message"),
-            });
-            setShowRetryButton(true);
-          },
-          onError() {
-            showErrorNotification({
-              title: tError("certificate.selfSigned.notification.error.title"),
-              message: tError("certificate.selfSigned.notification.error.message"),
-            });
-          },
-        });
-      },
-    });
-  };
-
-  const description = <Text size="md">{tError(`certificate.description.${error.data.reason}`)}</Text>;
-
-  if (!isAdmin) {
-    return (
-      <>
-        {description}
-        <NotEnoughPermissionsAlert />
-      </>
-    );
-  }
-
-  return (
-    <>
-      {description}
-
-      <CertificateDetailsCard certificate={rootCertificate} />
-
-      {error.data.reason === "hostnameMismatch" && <HostnameMismatchAlert />}
-
-      {!rootCertificate.isSelfSigned && error.data.reason === "untrusted" && <CertificateExtractAlert />}
-
-      {showRetryButton && (
-        <Button
-          variant="default"
-          fullWidth
-          leftSection={<IconRepeat size={16} color={getMantineColor("blue", 6)} stroke={1.5} />}
-          type="submit"
-        >
-          {tError("certificate.action.retry.label")}
-        </Button>
-      )}
-
-      {(error.data.reason === "untrusted" && rootCertificate.isSelfSigned) ||
-      error.data.reason === "hostnameMismatch" ? (
-        <Button
-          variant="default"
-          fullWidth
-          onClick={error.data.reason === "hostnameMismatch" ? handleTrustHostname : handleTrustSelfSigned}
-        >
-          {tError("certificate.action.trust.label")}
-        </Button>
-      ) : null}
-      {error.data.reason === "untrusted" && !rootCertificate.isSelfSigned ? (
-        <Button
-          variant="default"
-          fullWidth
-          onClick={() =>
-            openUploadModal({
-              onSuccess() {
-                setShowRetryButton(true);
-              },
-            })
-          }
-        >
-          {tError("certificate.action.upload.label")}
-        </Button>
-      ) : null}
-    </>
-  );
-};
-
-const NotEnoughPermissionsAlert = () => {
-  const t = useI18n();
-  return (
-    <Alert
-      icon={<IconAlertTriangle size={16} />}
-      title={t("integration.testConnection.error.certificate.alert.permission.title")}
-      color="yellow"
-    >
-      {t("integration.testConnection.error.certificate.alert.permission.message")}
-    </Alert>
-  );
-};
-
-const HostnameMismatchAlert = () => {
-  const t = useI18n();
-  return (
-    <Alert
-      icon={<IconAlertTriangle size={16} />}
-      title={t("integration.testConnection.error.certificate.alert.hostnameMismatch.title")}
-      color="yellow"
-    >
-      {t("integration.testConnection.error.certificate.alert.hostnameMismatch.message")}
-    </Alert>
-  );
-};
-
-const CertificateExtractAlert = () => {
-  const t = useI18n();
-  return (
-    <Alert
-      icon={<IconExclamationCircle size={16} />}
-      title={t("integration.testConnection.error.certificate.alert.extract.title")}
-      color="red"
-    >
-      {t.rich("integration.testConnection.error.certificate.alert.extract.message", {
-        docsLink: () => (
-          <Anchor
-            href={createDocumentationLink("/docs/management/certificates", "#obtaining-certificates")}
-            target="_blank"
-          >
-            {t("common.here")}
-          </Anchor>
-        ),
-      })}
-    </Alert>
-  );
-};
-
-interface CertificateDetailsProps {
-  certificate: MappedCertificate;
-}
-
-export const CertificateDetailsCard = ({ certificate }: CertificateDetailsProps) => {
-  const { openModal } = useModalAction(PemContentModal);
-  const locale = useCurrentLocale();
-  const tDetails = useScopedI18n("integration.testConnection.error.certificate.details");
-  const tCertificateField = useScopedI18n("certificate.field");
-
-  return (
-    <Card withBorder>
-      <Text fw={500}>{tDetails("title")}</Text>
-      <Group justify="space-between">
-        <Text size="sm" c="dimmed">
-          {tDetails("description")}
-        </Text>
-        <Anchor
-          size="sm"
-          ta="start"
-          component="button"
-          type="button"
-          onClick={() => openModal({ content: certificate.pem })}
-        >
-          {tDetails("content.action")}
-        </Anchor>
-      </Group>
-
-      <SimpleGrid cols={{ base: 1, md: 2 }} mt="md">
-        <Stack gap={0}>
-          <Text size="xs" c="dimmed">
-            {tCertificateField("subject.label")}
-          </Text>
-          <Text size="sm">{certificate.subject}</Text>
-        </Stack>
-        <Stack gap={0}>
-          <Text size="xs" c="dimmed">
-            {tCertificateField("issuer.label")}
-          </Text>
-          <Text size="sm">{certificate.issuer}</Text>
-        </Stack>
-        <Stack gap={0}>
-          <Text size="xs" c="dimmed">
-            {tCertificateField("validFrom.label")}
-          </Text>
-          <Text size="sm">
-            {new Intl.DateTimeFormat(locale, {
-              dateStyle: "full",
-              timeStyle: "long",
-            }).format(certificate.validFrom)}
-          </Text>
-        </Stack>
-        <Stack gap={0}>
-          <Text size="xs" c="dimmed">
-            {tCertificateField("validTo.label")}
-          </Text>
-          <Text size="sm">
-            {new Intl.DateTimeFormat(locale, {
-              dateStyle: "full",
-              timeStyle: "long",
-            }).format(certificate.validTo)}
-          </Text>
-        </Stack>
-        <Stack gap={0}>
-          <Text size="xs" c="dimmed">
-            {tCertificateField("serialNumber.label")}
-          </Text>
-          <Text size="sm">{certificate.serialNumber}</Text>
-        </Stack>
-      </SimpleGrid>
-
-      <SimpleGrid cols={1} mt="md">
-        <Stack gap={0}>
-          <Text size="xs" c="dimmed">
-            {tCertificateField("fingerprint.label")}
-          </Text>
-          <Text size="sm">{certificate.fingerprint}</Text>
-        </Stack>
-      </SimpleGrid>
-    </Card>
-  );
-};
-
-const PemContentModal = createModal<{ content: string }>(({ actions, innerProps }) => {
-  const t = useI18n();
-
-  return (
-    <Stack>
-      <Card w="100%" pos="relative" bg="dark.6" fz="xs" p="sm">
-        <pre
-          style={{
-            whiteSpace: "pre-wrap",
-            wordWrap: "break-word",
-          }}
-        >
-          {innerProps.content}
-        </pre>
-        <CopyButton value={innerProps.content}>
-          {({ copy, copied }) => (
-            <ActionIcon onClick={copy} pos="absolute" top={8} right={8} variant="default">
-              {copied ? (
-                <IconCheck size={16} stroke={1.5} color={getMantineColor("green", 6)} />
-              ) : (
-                <IconCopy size={16} stroke={1.5} />
-              )}
-            </ActionIcon>
-          )}
-        </CopyButton>
-      </Card>
-
-      <Button variant="light" color="gray" onClick={actions.closeModal}>
-        {t("common.action.close")}
-      </Button>
-    </Stack>
-  );
-}).withOptions({
-  defaultTitle(t) {
-    return t("integration.testConnection.error.certificate.details.content.title");
-  },
-  size: "lg",
-});
-
-const getHeighestCertificate = (certificate: MappedCertificate): MappedCertificate => {
-  if (certificate.issuerCertificate) return getHeighestCertificate(certificate.issuerCertificate);
-  return certificate;
-};

apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/types.ts

@@ -1,6 +0,0 @@
-import type { RouterOutputs } from "@homarr/api";
-
-export type AnyMappedTestConnectionError = Exclude<RouterOutputs["integration"]["create"], undefined>["error"];
-export type MappedTestConnectionCertificateError = Extract<AnyMappedTestConnectionError, { type: "certificate" }>;
-export type MappedCertificate = MappedTestConnectionCertificateError["data"]["certificate"];
-export type MappedError = Exclude<AnyMappedTestConnectionError["cause"], undefined>;

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

@@ -1,27 +1,23 @@
 "use client";
 
-import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Alert, Button, Fieldset, Group, Stack, Text, TextInput } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
-import type { z } from "zod/v4";
+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";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { getAllSecretKindOptions, getDefaultSecretKinds } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
+import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
 import { useConfirmModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { integrationUpdateSchema } from "@homarr/validation/integration";
+import { validation } from "@homarr/validation";
 
 import { SecretCard } from "../../_components/secrets/integration-secret-card";
 import { IntegrationSecretInput } from "../../_components/secrets/integration-secret-inputs";
-import { SecretKindsSegmentedControl } from "../../_components/secrets/integration-secret-segmented-control";
-import { IntegrationTestConnectionError } from "../../_components/test-connection/integration-test-connection-error";
-import type { AnyMappedTestConnectionError } from "../../_components/test-connection/types";
 
 interface EditIntegrationForm {
   integration: RouterOutputs["integration"]["byId"];
@@ -30,64 +26,57 @@ interface EditIntegrationForm {
 export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
-  const allSecretKinds = getAllSecretKindOptions(integration.kind);
-
-  const initialSecretsKinds =
+  const secretsKinds =
     getAllSecretKindOptions(integration.kind).find((secretKinds) =>
       integration.secrets.every((secret) => secretKinds.includes(secret.kind)),
     ) ?? getDefaultSecretKinds(integration.kind);
 
-  const hasUrlSecret = initialSecretsKinds.includes("url");
-
   const router = useRouter();
-  const form = useZodForm(integrationUpdateSchema.omit({ id: true }), {
+  const form = useZodForm(validation.integration.update.omit({ id: true }), {
     initialValues: {
       name: integration.name,
       url: integration.url,
-      secrets: initialSecretsKinds.map((kind) => ({
+      secrets: secretsKinds.map((kind) => ({
         kind,
         value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
       })),
     },
   });
   const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
-  const [error, setError] = useState<null | AnyMappedTestConnectionError>(null);
 
   const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
 
   const handleSubmitAsync = async (values: FormType) => {
-    const url = hasUrlSecret
-      ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
-      : values.url;
     await mutateAsync(
       {
         id: integration.id,
         ...values,
-        url,
         secrets: values.secrets.map((secret) => ({
           kind: secret.kind,
           value: secret.value === "" ? null : secret.value,
         })),
       },
       {
-        onSuccess: (data) => {
-          // We do it this way as we are unable to send a typesafe error through onError
-          if (data?.error) {
-            setError(data.error);
-            showErrorNotification({
-              title: t("integration.page.edit.notification.error.title"),
-              message: t("integration.page.edit.notification.error.message"),
-            });
-            return;
-          }
-
+        onSuccess: () => {
           showSuccessNotification({
             title: t("integration.page.edit.notification.success.title"),
             message: t("integration.page.edit.notification.success.message"),
           });
           void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
         },
-        onError: () => {
+        onError: (error) => {
+          const testConnectionError = convertIntegrationTestConnectionError(error.data?.error);
+
+          if (testConnectionError) {
+            showErrorNotification({
+              title: t(`integration.testConnection.notification.${testConnectionError.key}.title`),
+              message:
+                testConnectionError.message ??
+                t(`integration.testConnection.notification.${testConnectionError.key}.message`),
+            });
+            return;
+          }
+
           showErrorNotification({
             title: t("integration.page.edit.notification.error.title"),
             message: t("integration.page.edit.notification.error.message"),
@@ -97,80 +86,48 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
     );
   };
 
-  const isInitialSecretKinds =
-    initialSecretsKinds.every((kind) => form.values.secrets.some((secret) => secret.kind === kind)) &&
-    form.values.secrets.length === initialSecretsKinds.length;
-
   return (
     <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
       <Stack>
         <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
 
-        {hasUrlSecret ? null : (
-          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
-        )}
+        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
-            {allSecretKinds.length > 1 && (
-              <SecretKindsSegmentedControl
-                defaultKinds={initialSecretsKinds}
-                secretKinds={allSecretKinds}
-                form={form}
-              />
-            )}
-            {!isInitialSecretKinds
-              ? null
-              : form.values.secrets.map((secret, index) => (
-                  <SecretCard
-                    key={secret.kind}
-                    secret={secretsMap.get(secret.kind) ?? { kind: secret.kind, value: null, updatedAt: null }}
-                    onCancel={() =>
-                      new Promise((resolve) => {
-                        // When nothing changed, just close the secret card
-                        if ((secret.value ?? "") === (secretsMap.get(secret.kind)?.value ?? "")) {
-                          return resolve(true);
-                        }
-                        openConfirmModal({
-                          title: t("integration.secrets.reset.title"),
-                          children: t("integration.secrets.reset.message"),
-                          onCancel: () => resolve(false),
-                          onConfirm: () => {
-                            form.setFieldValue(`secrets.${index}.value`, secretsMap.get(secret.kind)?.value ?? "");
-                            resolve(true);
-                          },
-                        });
-                      })
+            {secretsKinds.map((kind, index) => (
+              <SecretCard
+                key={kind}
+                secret={secretsMap.get(kind) ?? { kind, value: null, updatedAt: null }}
+                onCancel={() =>
+                  new Promise((resolve) => {
+                    // When nothing changed, just close the secret card
+                    if ((form.values.secrets[index]?.value ?? "") === (secretsMap.get(kind)?.value ?? "")) {
+                      return resolve(true);
                     }
-                  >
-                    <IntegrationSecretInput
-                      label={t(`integration.secrets.kind.${secret.kind}.newLabel`)}
-                      key={secret.kind}
-                      kind={secret.kind}
-                      {...form.getInputProps(`secrets.${index}.value`)}
-                    />
-                  </SecretCard>
-                ))}
-            {isInitialSecretKinds
-              ? null
-              : form.values.secrets.map(({ kind }, index) => (
-                  <IntegrationSecretInput
-                    withAsterisk
-                    key={kind}
-                    kind={kind}
-                    {...form.getInputProps(`secrets.${index}.value`)}
-                  />
-                ))}
-            {form.values.secrets.length === 0 && (
-              <Alert icon={<IconInfoCircle size={"1rem"} />} color={"blue"}>
-                <Text c={"blue"}>{t("integration.secrets.noSecretsRequired.text")}</Text>
-              </Alert>
-            )}
+                    openConfirmModal({
+                      title: t("integration.secrets.reset.title"),
+                      children: t("integration.secrets.reset.message"),
+                      onCancel: () => resolve(false),
+                      onConfirm: () => {
+                        form.setFieldValue(`secrets.${index}.value`, secretsMap.get(kind)?.value ?? "");
+                        resolve(true);
+                      },
+                    });
+                  })
+                }
+              >
+                <IntegrationSecretInput
+                  label={t(`integration.secrets.kind.${kind}.newLabel`)}
+                  key={kind}
+                  kind={kind}
+                  {...form.getInputProps(`secrets.${index}.value`)}
+                />
+              </SecretCard>
+            ))}
           </Stack>
         </Fieldset>
 
-        {error !== null && <IntegrationTestConnectionError error={error} url={form.values.url} />}
-
         <Group justify="end" align="center">
           <Button variant="default" component={Link} href="/manage/integrations">
             {t("common.action.backToOverview")}
@@ -184,4 +141,4 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   );
 };
 
-type FormType = Omit<z.infer<typeof integrationUpdateSchema>, "id">;
+type FormType = Omit<z.infer<typeof validation.integration.update>, "id">;

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

@@ -1,51 +1,57 @@
 import { notFound } from "next/navigation";
 import { Container, Group, Stack, Title } from "@mantine/core";
-import { z } from "zod/v4";
+import { z } from "zod";
 
 import { auth } from "@homarr/auth/next";
-import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 import { IntegrationAvatar } from "@homarr/ui";
-import type { integrationCreateSchema } from "@homarr/validation/integration";
+import type { validation } from "@homarr/validation";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { NewIntegrationForm } from "./_integration-new-form";
+import { NewIntegrationForm } from "../_integration-new-form";
 
-interface NewIntegrationPageProps {
-  searchParams: Promise<
-    Partial<z.infer<typeof integrationCreateSchema>> & {
-      kind: IntegrationKind;
-    }
-  >;
+interface NewIntegrationByIdPageProps {
+  params: {
+    id: string;
+  };
+  searchParams: Partial<z.infer<typeof validation.integration.create>>;
 }
 
-export default async function IntegrationsNewPage(props: NewIntegrationPageProps) {
-  const searchParams = await props.searchParams;
+export function generateStaticParams() {
+  return integrationKinds.map((kind) => ({
+    id: kind,
+  }));
+}
+
+export default async function IntegrationNewByIdPage(props: NewIntegrationByIdPageProps) {
+  const { id } = props.params;
   const session = await auth();
+
   if (!session?.user.permissions.includes("integration-create")) {
     notFound();
   }
 
-  const result = z.enum(integrationKinds).safeParse(searchParams.kind);
+  const result = z.enum(integrationKinds).safeParse(id);
   if (!result.success) {
     notFound();
   }
 
   const tCreate = await getScopedI18n("integration.page.create");
-
   const currentKind = result.data;
 
+  const dynamicMappings = new Map<string, string>([[id, getIntegrationName(currentKind)]]);
+
   return (
     <>
-      <DynamicBreadcrumb />
+      <DynamicBreadcrumb dynamicMappings={dynamicMappings} nonInteractable={["new"]} />
       <Container>
         <Stack>
           <Group align="center">
             <IntegrationAvatar kind={currentKind} size="md" />
             <Title>{tCreate("title", { name: getIntegrationName(currentKind) })}</Title>
           </Group>
-          <NewIntegrationForm searchParams={searchParams} />
+          <NewIntegrationForm searchParams={{ kind: currentKind }} />
         </Stack>
       </Container>
     </>

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

@@ -10,20 +10,15 @@ import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 import { IntegrationAvatar } from "@homarr/ui";
 
-interface IntegrationCreateDropdownContentProps {
-  enableMockIntegration: boolean;
-}
-
-export const IntegrationCreateDropdownContent = ({ enableMockIntegration }: IntegrationCreateDropdownContentProps) => {
+export const IntegrationCreateDropdownContent = () => {
   const t = useI18n();
   const [search, setSearch] = useState("");
 
   const filteredKinds = useMemo(() => {
-    return integrationKinds
-      .filter((kind) => enableMockIntegration || kind !== "mock")
-      .filter((kind) => getIntegrationName(kind).toLowerCase().includes(search.toLowerCase().trim()))
-      .sort((kindA, kindB) => getIntegrationName(kindA).localeCompare(getIntegrationName(kindB)));
-  }, [search, enableMockIntegration]);
+    return integrationKinds.filter((kind) =>
+      getIntegrationName(kind).toLowerCase().includes(search.toLowerCase().trim()),
+    );
+  }, [search]);
 
   const handleSearch = React.useCallback(
     (event: ChangeEvent<HTMLInputElement>) => setSearch(event.target.value),
@@ -44,7 +39,7 @@ export const IntegrationCreateDropdownContent = ({ enableMockIntegration }: Inte
       {filteredKinds.length > 0 ? (
         <ScrollArea.Autosize mah={384}>
           {filteredKinds.map((kind) => (
-            <Menu.Item component={Link} href={`/manage/integrations/new?kind=${kind}`} key={kind}>
+            <Menu.Item component={Link} href={`/manage/integrations/new/${kind}`} key={kind}>
               <Group>
                 <IntegrationAvatar kind={kind} size="sm" />
                 <Text size="sm">{getIntegrationName(kind)}</Text>

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

@@ -1,62 +1,58 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Alert, Button, Checkbox, Collapse, Fieldset, Group, Stack, Text, TextInput } from "@mantine/core";
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Collapse,
+  Fieldset,
+  Group,
+  SegmentedControl,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
-import { z } from "zod/v4";
+import { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { IntegrationKind } from "@homarr/definitions";
-import {
-  getAllSecretKindOptions,
-  getIconUrl,
-  getIntegrationDefaultUrl,
-  getIntegrationName,
-  integrationDefs,
-} from "@homarr/definitions";
+import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
+import { getAllSecretKindOptions, getIconUrl, getIntegrationName, integrationDefs } from "@homarr/definitions";
+import type { UseFormReturnType } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
+import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import { appHrefSchema } from "@homarr/validation/app";
-import { integrationCreateSchema } from "@homarr/validation/integration";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
 
 import { IntegrationSecretInput } from "../_components/secrets/integration-secret-inputs";
-import { SecretKindsSegmentedControl } from "../_components/secrets/integration-secret-segmented-control";
-import { IntegrationTestConnectionError } from "../_components/test-connection/integration-test-connection-error";
-import type { AnyMappedTestConnectionError } from "../_components/test-connection/types";
 
 interface NewIntegrationFormProps {
-  searchParams: Partial<z.infer<typeof integrationCreateSchema>> & {
+  searchParams: Partial<z.infer<typeof validation.integration.create>> & {
     kind: IntegrationKind;
   };
 }
 
-const formSchema = integrationCreateSchema.omit({ kind: true }).and(
+const formSchema = validation.integration.create.omit({ kind: true }).and(
   z.object({
     createApp: z.boolean(),
-    appHref: appHrefSchema,
+    appHref: validation.app.manage.shape.href,
   }),
 );
 
 export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) => {
   const t = useI18n();
   const secretKinds = getAllSecretKindOptions(searchParams.kind);
-  const hasUrlSecret = secretKinds.some((kinds) => kinds.includes("url"));
   const router = useRouter();
   const [opened, setOpened] = useState(false);
-
-  let url = searchParams.url ?? getIntegrationDefaultUrl(searchParams.kind) ?? "";
-  if (hasUrlSecret) {
-    // Placeholder Url, replaced with origin of the secret Url on submit
-    url = "http://localhost";
-  }
   const form = useZodForm(formSchema, {
     initialValues: {
       name: searchParams.name ?? getIntegrationName(searchParams.kind),
-      url,
+      url: searchParams.url ?? "",
       secrets: secretKinds[0].map((kind) => ({
         kind,
         value: "",
@@ -76,30 +72,15 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
     clientApi.integration.create.useMutation();
   const { mutateAsync: createAppAsync, isPending: isPendingApp } = clientApi.app.create.useMutation();
   const isPending = isPendingIntegration || isPendingApp;
-  const [error, setError] = useState<null | AnyMappedTestConnectionError>(null);
 
   const handleSubmitAsync = async (values: FormType) => {
-    const url = hasUrlSecret
-      ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
-      : values.url;
     await createIntegrationAsync(
       {
         kind: searchParams.kind,
         ...values,
-        url,
       },
       {
-        async onSuccess(data) {
-          // We do it this way as we are unable to send a typesafe error through onError
-          if (data?.error) {
-            setError(data.error);
-            showErrorNotification({
-              title: t("integration.page.create.notification.error.title"),
-              message: t("integration.page.create.notification.error.message"),
-            });
-            return;
-          }
-
+        async onSuccess() {
           showSuccessNotification({
             title: t("integration.page.create.notification.success.title"),
             message: t("integration.page.create.notification.success.message"),
@@ -114,10 +95,10 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
           await createAppAsync(
             {
               name: values.name,
-              href: hasCustomHref ? values.appHref : url,
+              href: hasCustomHref ? values.appHref : values.url,
               iconUrl: getIconUrl(searchParams.kind),
               description: null,
-              pingUrl: url,
+              pingUrl: values.url,
             },
             {
               async onSettled() {
@@ -132,7 +113,19 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
             },
           );
         },
-        onError: () => {
+        onError: (error) => {
+          const testConnectionError = convertIntegrationTestConnectionError(error.data?.error);
+
+          if (testConnectionError) {
+            showErrorNotification({
+              title: t(`integration.testConnection.notification.${testConnectionError.key}.title`),
+              message:
+                testConnectionError.message ??
+                t(`integration.testConnection.notification.${testConnectionError.key}.message`),
+            });
+            return;
+          }
+
           showErrorNotification({
             title: t("integration.page.create.notification.error.title"),
             message: t("integration.page.create.notification.error.message"),
@@ -149,9 +142,7 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
       <Stack>
         <TextInput withAsterisk label={t("integration.field.name.label")} autoFocus {...form.getInputProps("name")} />
 
-        {hasUrlSecret ? null : (
-          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
-        )}
+        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
@@ -172,8 +163,6 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
           </Stack>
         </Fieldset>
 
-        {error !== null && <IntegrationTestConnectionError error={error} url={form.values.url} />}
-
         {supportsSearchEngine && (
           <Checkbox
             label={t("integration.field.attemptSearchEngineCreation.label")}
@@ -207,4 +196,40 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
   );
 };
 
+interface SecretKindsSegmentedControlProps {
+  secretKinds: IntegrationSecretKind[][];
+  form: UseFormReturnType<FormType, (values: FormType) => FormType>;
+}
+
+const SecretKindsSegmentedControl = ({ secretKinds, form }: SecretKindsSegmentedControlProps) => {
+  const t = useScopedI18n("integration.secrets");
+
+  const secretKindGroups = secretKinds.map((kinds) => ({
+    label:
+      kinds.length === 0
+        ? t("noSecretsRequired.segmentTitle")
+        : kinds.map((kind) => t(`kind.${kind}.label`)).join(" & "),
+    value: kinds.length === 0 ? "empty" : kinds.join("-"),
+  }));
+
+  const onChange = useCallback(
+    (value: string) => {
+      if (value === "empty") {
+        form.setFieldValue("secrets", []);
+        return;
+      }
+
+      const kinds = value.split("-") as IntegrationSecretKind[];
+      const secrets = kinds.map((kind) => ({
+        kind,
+        value: "",
+      }));
+      form.setFieldValue("secrets", secrets);
+    },
+    [form],
+  );
+
+  return <SegmentedControl fullWidth data={secretKindGroups} onChange={onChange}></SegmentedControl>;
+};
+
 type FormType = z.infer<typeof formSchema>;

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

@@ -41,7 +41,6 @@ import { CountBadge, IntegrationAvatar } from "@homarr/ui";
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";
-import { env } from "~/env";
 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
 import { DeleteIntegrationActionButton } from "./_integration-buttons";
 import { IntegrationCreateDropdownContent } from "./new/_integration-new-dropdown";
@@ -115,7 +114,7 @@ const IntegrationSelectMenu = ({ children }: PropsWithChildren) => {
     >
       {children}
       <MenuDropdown>
-        <IntegrationCreateDropdownContent enableMockIntegration={env.UNSAFE_ENABLE_MOCK_INTEGRATION} />
+        <IntegrationCreateDropdownContent />
       </MenuDropdown>
     </Menu>
   );

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

@@ -14,7 +14,7 @@ export const UploadMediaButton = () => {
   };
 
   return (
-    <UploadMedia onSettled={onSettledAsync} multiple>
+    <UploadMedia onSettled={onSettledAsync}>
       {({ onClick, loading }) => (
         <Button onClick={onClick} loading={loading} rightSection={<IconUpload size={16} stroke={1.5} />}>
           {t("media.action.upload.label")}

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

@@ -16,7 +16,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { IconExternalLink } from "@tabler/icons-react";
-import { z } from "zod/v4";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";

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

@@ -4,7 +4,7 @@ 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/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { searchEngineTypes } from "@homarr/definitions";
@@ -12,9 +12,9 @@ import { useZodForm } from "@homarr/form";
 import { IconPicker } from "@homarr/forms-collection";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import { searchEngineManageSchema } from "@homarr/validation/search-engine";
+import { validation } from "@homarr/validation";
 
-type FormType = z.infer<typeof searchEngineManageSchema>;
+type FormType = z.infer<typeof validation.searchEngine.manage>;
 
 interface SearchEngineFormProps {
   submitButtonTranslation: (t: TranslationFunction) => string;
@@ -30,7 +30,7 @@ export const SearchEngineForm = (props: SearchEngineFormProps) => {
 
   const [integrationData] = clientApi.integration.allThatSupportSearch.useSuspenseQuery();
 
-  const form = useZodForm(searchEngineManageSchema, {
+  const form = useZodForm(validation.searchEngine.manage, {
     initialValues: initialValues ?? {
       name: "",
       short: "",

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

@@ -2,7 +2,7 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -10,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 { searchEngineManageSchema } from "@homarr/validation/search-engine";
+import type { validation } from "@homarr/validation";
 
 import { SearchEngineForm } from "../../_form";
 
@@ -41,7 +41,7 @@ export const SearchEngineEditForm = ({ searchEngine }: SearchEngineEditFormProps
   });
 
   const handleSubmit = useCallback(
-    (values: z.infer<typeof searchEngineManageSchema>) => {
+    (values: z.infer<typeof validation.searchEngine.manage>) => {
       mutate({
         id: searchEngine.id,
         ...values,

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

@@ -2,14 +2,14 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
-import type { z } from "zod/v4";
+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 { searchEngineManageSchema } from "@homarr/validation/search-engine";
+import type { validation } from "@homarr/validation";
 
 import { SearchEngineForm } from "../_form";
 
@@ -35,7 +35,7 @@ export const SearchEngineNewForm = () => {
   });
 
   const handleSubmit = useCallback(
-    (values: z.infer<typeof searchEngineManageSchema>) => {
+    (values: z.infer<typeof validation.searchEngine.manage>) => {
       mutate(values);
     },
     [mutate],

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

@@ -2,7 +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/v4";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";

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

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

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

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

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

@@ -1,99 +0,0 @@
-import { X509Certificate } from "node:crypto";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import {
-  Button,
-  Group,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-} from "@mantine/core";
-import { IconCertificateOff } from "@tabler/icons-react";
-
-import { auth } from "@homarr/auth/next";
-import { getTrustedCertificateHostnamesAsync } from "@homarr/certificates/server";
-import { getI18n } from "@homarr/translation/server";
-
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { NoResults } from "~/components/no-results";
-import { RemoveHostnameActionIcon } from "./_components/remove-hostname";
-
-export default async function TrustedHostnamesPage() {
-  const session = await auth();
-  if (!session?.user.permissions.includes("admin")) {
-    notFound();
-  }
-
-  const t = await getI18n();
-
-  const trustedHostnames = await getTrustedCertificateHostnamesAsync().then((hostnames) => {
-    return hostnames.map((hostname) => {
-      let subject: string | null;
-      try {
-        subject = new X509Certificate(hostname.certificate).subject;
-      } catch {
-        subject = null;
-      }
-      return {
-        ...hostname,
-        subject,
-      };
-    });
-  });
-
-  return (
-    <>
-      <DynamicBreadcrumb />
-
-      <Stack>
-        <Group justify="space-between">
-          <Stack gap={4}>
-            <Title>{t("certificate.page.hostnames.title")}</Title>
-            <Text>{t("certificate.page.hostnames.description")}</Text>
-          </Stack>
-
-          <Button variant="default" component={Link} href="/manage/tools/certificates">
-            {t("certificate.page.hostnames.toCertificates")}
-          </Button>
-        </Group>
-
-        {trustedHostnames.length === 0 && (
-          <NoResults icon={IconCertificateOff} title={t("certificate.page.hostnames.noResults.title")} />
-        )}
-
-        {trustedHostnames.length >= 1 && (
-          <Table>
-            <TableThead>
-              <TableTr>
-                <TableTh>{t("certificate.field.hostname.label")}</TableTh>
-                <TableTh>{t("certificate.field.subject.label")}</TableTh>
-                <TableTh>{t("certificate.field.fingerprint.label")}</TableTh>
-                <TableTh></TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {trustedHostnames.map(({ hostname, subject, thumbprint }) => (
-                <TableTr key={`${hostname}-${thumbprint}`}>
-                  <TableTd>{hostname}</TableTd>
-                  <TableTd>{subject}</TableTd>
-                  <TableTd>{thumbprint}</TableTd>
-                  <TableTd>
-                    <Group justify="end">
-                      <RemoveHostnameActionIcon hostname={hostname} thumbprint={thumbprint} />
-                    </Group>
-                  </TableTd>
-                </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
-        )}
-      </Stack>
-    </>
-  );
-}

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

@@ -1,8 +1,7 @@
 import { X509Certificate } from "node:crypto";
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Button, Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
-import { IconAlertTriangle, IconCertificate, IconCertificateOff } from "@tabler/icons-react";
+import { Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { IconCertificate, IconCertificateOff } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
 import { auth } from "@homarr/auth/next";
@@ -32,27 +31,11 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
   const t = await getI18n();
   const certificates = await loadCustomRootCertificatesAsync();
   const x509Certificates = certificates
-    .map((cert) => {
-      try {
-        const x509 = new X509Certificate(cert.content);
-        return {
-          ...cert,
-          isError: false,
-          x509,
-        } as const;
-      } catch {
-        return {
-          ...cert,
-          isError: true,
-          x509: null,
-        } as const;
-      }
-    })
-    .sort((certA, certB) => {
-      if (certA.isError) return -1;
-      if (certB.isError) return 1;
-      return certA.x509.validToDate.getTime() - certB.x509.validToDate.getTime();
-    });
+    .map((cert) => ({
+      ...cert,
+      x509: new X509Certificate(cert.content),
+    }))
+    .sort((certA, certB) => certA.x509.validToDate.getTime() - certB.x509.validToDate.getTime());
 
   return (
     <>
@@ -65,12 +48,7 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
             <Text>{t("certificate.page.list.description")}</Text>
           </Stack>
 
-          <Group>
-            <Button variant="default" component={Link} href="/manage/tools/certificates/hostnames">
-              {t("certificate.page.list.toHostnames")}
-            </Button>
-            <AddCertificateButton />
-          </Group>
+          <AddCertificateButton />
         </Group>
 
         {x509Certificates.length === 0 && (
@@ -79,47 +57,32 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
 
         <SimpleGrid cols={{ sm: 1, lg: 2, xl: 3 }} spacing="lg">
           {x509Certificates.map((cert) => (
-            <Card key={cert.fileName} withBorder>
+            <Card key={cert.x509.fingerprint} withBorder>
               <Group wrap="nowrap">
-                {cert.isError ? (
-                  <IconAlertTriangle
-                    color={getMantineColor("red", 6)}
-                    style={{ minWidth: 32 }}
-                    size={32}
-                    stroke={1.5}
-                  />
-                ) : (
-                  <IconCertificate
-                    color={getMantineColor(iconColor(cert.x509.validToDate), 6)}
-                    style={{ minWidth: 32 }}
-                    size={32}
-                    stroke={1.5}
-                  />
-                )}
+                <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.isError ? t("certificate.page.list.invalid.title") : cert.x509.subject}
+                      {cert.x509.subject}
                     </Text>
                     <Text c="gray.6" ta="end" size="sm">
                       {cert.fileName}
                     </Text>
                   </Group>
                   <Group justify="space-between">
-                    {cert.isError ? (
-                      <Text size="sm" c="gray.6">
-                        {t("certificate.page.list.invalid.description")}
-                      </Text>
-                    ) : (
-                      <Text size="sm" c="gray.6" title={cert.x509.validToDate.toISOString()}>
-                        {t("certificate.page.list.expires", {
-                          when: new Intl.RelativeTimeFormat(locale).format(
-                            dayjs(cert.x509.validToDate).diff(dayjs(), "days"),
-                            "days",
-                          ),
-                        })}
-                      </Text>
-                    )}
+                    <Text size="sm" c="gray.6" title={cert.x509.validToDate.toISOString()}>
+                      {t("certificate.page.list.expires", {
+                        when: new Intl.RelativeTimeFormat(locale).format(
+                          dayjs(cert.x509.validToDate).diff(dayjs(), "days"),
+                          "days",
+                        ),
+                      })}
+                    </Text>
                     <RemoveCertificate fileName={cert.fileName} />
                   </Group>
                 </Stack>

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

@@ -17,7 +17,6 @@ import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useTimeAgo } from "@homarr/common";
 import type { ContainerState } from "@homarr/docker";
-import { containerStateColorMap } from "@homarr/docker/shared";
 import { useModalAction } from "@homarr/modals";
 import { AddDockerAppToHomarr } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
@@ -245,11 +244,21 @@ const ContainerActionBarButton = (props: ContainerActionBarButtonProps) => {
   );
 };
 
+const containerStates = {
+  created: "cyan",
+  running: "green",
+  paused: "yellow",
+  restarting: "orange",
+  exited: "red",
+  removing: "pink",
+  dead: "dark",
+} satisfies Record<ContainerState, MantineColor>;
+
 const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
   const t = useScopedI18n("docker.field.state.option");
 
   return (
-    <Badge size="lg" radius="sm" variant="light" w={120} color={containerStateColorMap[state]}>
+    <Badge size="lg" radius="sm" variant="light" w={120} color={containerStates[state]}>
       {t(state)}
     </Badge>
   );

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/cluster-dashboard.tsx

@@ -3,7 +3,7 @@
 import { SimpleGrid, Skeleton, Stack, Title } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { createId } from "@homarr/common";
+import { createId } from "@homarr/db/client";
 import type { KubernetesLabelResourceType } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 

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

@@ -10,7 +10,7 @@ import { MantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { createId } from "@homarr/common";
+import { createId } from "@homarr/db/client";
 import type { KubernetesIngress } from "@homarr/definitions";
 import type { ScopedTranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";

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

@@ -8,7 +8,7 @@ import { MantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { createId } from "@homarr/common";
+import { createId } from "@homarr/db/client";
 import type { KubernetesService } from "@homarr/definitions";
 import type { ScopedTranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";

apps/nextjs/src/app/[locale]/manage/tools/logs/level-selection.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { Select } from "@mantine/core";
-
-import type { LogLevel } from "@homarr/log/constants";
-import { logLevelConfiguration, logLevels } from "@homarr/log/constants";
-import { useI18n } from "@homarr/translation/client";
-
-import { useLogContext } from "./log-context";
-
-export const LogLevelSelection = () => {
-  const { level, setLevel } = useLogContext();
-  const t = useI18n();
-
-  return (
-    <Select
-      data={logLevels.map((level) => ({
-        value: level,
-        label: `${logLevelConfiguration[level].prefix} ${t(`log.level.option.${level}`)}`,
-      }))}
-      value={level}
-      onChange={(value) => setLevel(value as LogLevel)}
-      checkIconPosition="right"
-    />
-  );
-};

apps/nextjs/src/app/[locale]/manage/tools/logs/log-context.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import type { PropsWithChildren } from "react";
-import { createContext, useContext, useMemo, useState } from "react";
-
-import type { LogLevel } from "@homarr/log/constants";
-import { logLevels } from "@homarr/log/constants";
-
-const LogContext = createContext<{
-  level: LogLevel;
-  setLevel: (level: LogLevel) => void;
-  activeLevels: LogLevel[];
-} | null>(null);
-
-interface LogContextProviderProps extends PropsWithChildren {
-  defaultLevel: LogLevel;
-}
-
-export const LogContextProvider = ({ defaultLevel, children }: LogContextProviderProps) => {
-  const [level, setLevel] = useState(defaultLevel);
-  const activeLevels = useMemo(() => logLevels.slice(0, logLevels.indexOf(level) + 1), [level]);
-
-  return <LogContext.Provider value={{ level, setLevel, activeLevels }}>{children}</LogContext.Provider>;
-};
-
-export const useLogContext = () => {
-  const context = useContext(LogContext);
-  if (!context) {
-    throw new Error("useLogContext must be used within a LogContextProvider");
-  }
-  return context;
-};

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

@@ -1,4 +1,4 @@
-import { Box, Group } from "@mantine/core";
+import { Box } from "@mantine/core";
 
 import { getScopedI18n } from "@homarr/translation/server";
 
@@ -7,14 +7,11 @@ import "@xterm/xterm/css/xterm.css";
 import { notFound } from "next/navigation";
 
 import { auth } from "@homarr/auth/next";
-import { env } from "@homarr/log/env";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { fullHeightWithoutHeaderAndFooter } from "~/constants";
 import { createMetaTitle } from "~/metadata";
 import { ClientSideTerminalComponent } from "./client";
-import { LogLevelSelection } from "./level-selection";
-import { LogContextProvider } from "./log-context";
 
 export async function generateMetadata() {
   const session = await auth();
@@ -35,14 +32,11 @@ export default async function LogsManagementPage() {
   }
 
   return (
-    <LogContextProvider defaultLevel={env.LOG_LEVEL}>
-      <Group justify="space-between" align="center" wrap="nowrap">
-        <DynamicBreadcrumb />
-        <LogLevelSelection />
-      </Group>
+    <>
+      <DynamicBreadcrumb />
       <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
         <ClientSideTerminalComponent />
       </Box>
-    </LogContextProvider>
+    </>
   );
 }

apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx

@@ -8,29 +8,22 @@ import { Terminal } from "@xterm/xterm";
 
 import { clientApi } from "@homarr/api/client";
 
-import { useLogContext } from "./log-context";
 import classes from "./terminal.module.css";
 
 export const TerminalComponent = () => {
   const ref = useRef<HTMLDivElement>(null);
-  const { activeLevels } = useLogContext();
 
   const terminalRef = useRef<Terminal>(null);
-  clientApi.log.subscribe.useSubscription(
-    {
-      levels: activeLevels,
+  clientApi.log.subscribe.useSubscription(undefined, {
+    onData(data) {
+      terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);
+      terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
     },
-    {
-      onData(data) {
-        terminalRef.current?.writeln(data.message);
-        terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
-      },
-      onError(err) {
-        // This makes sense as logging might cause an infinite loop
-        alert(err);
-      },
+    onError(err) {
+      // This makes sense as logging might cause an infinite loop
+      alert(err);
     },
-  );
+  });
 
   useEffect(() => {
     if (!ref.current) {

apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import React from "react";
+import { ActionIcon, Badge, Card, Group, Stack, Text } from "@mantine/core";
+import { useListState } from "@mantine/hooks";
+import { IconPlayerPlay } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useTimeAgo } from "@homarr/common";
+import type { TaskStatus } from "@homarr/cron-job-status";
+import type { TranslationKeys } from "@homarr/translation";
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface JobsListProps {
+  initialJobs: RouterOutputs["cronJobs"]["getJobs"];
+}
+
+interface JobState {
+  job: JobsListProps["initialJobs"][number];
+  status: TaskStatus | null;
+}
+
+export const JobsList = ({ initialJobs }: JobsListProps) => {
+  const t = useScopedI18n("management.page.tool.tasks");
+  const [jobs, handlers] = useListState<JobState>(
+    initialJobs.map((job) => ({
+      job,
+      status: null,
+    })),
+  );
+  clientApi.cronJobs.subscribeToStatusUpdates.useSubscription(undefined, {
+    onData: (data) => {
+      const jobByName = jobs.find((job) => job.job.name === data.name);
+      if (!jobByName) {
+        return;
+      }
+      handlers.applyWhere(
+        (job) => job.job.name === data.name,
+        (job) => ({ ...job, status: data }),
+      );
+    },
+  });
+  const { mutateAsync } = clientApi.cronJobs.triggerJob.useMutation();
+  const handleJobTrigger = React.useCallback(
+    async (job: JobState) => {
+      if (job.status?.status === "running") {
+        return;
+      }
+      await mutateAsync(job.job.name);
+    },
+    [mutateAsync],
+  );
+  return (
+    <Stack>
+      {jobs.map((job) => (
+        <Card key={job.job.name} withBorder>
+          <Group justify={"space-between"} gap={"md"}>
+            <Stack gap={0}>
+              <Group>
+                <Text>{t(`job.${job.job.name}.label` as TranslationKeys)}</Text>
+                {job.status?.status === "idle" && <Badge variant="default">{t("status.idle")}</Badge>}
+                {job.status?.status === "running" && <Badge color="green">{t("status.running")}</Badge>}
+                {job.status?.lastExecutionStatus === "error" && <Badge color="red">{t("status.error")}</Badge>}
+              </Group>
+              {job.status && <TimeAgo timestamp={job.status.lastExecutionTimestamp} />}
+            </Stack>
+
+            {!job.job.preventManualExecution && (
+              <ActionIcon
+                onClick={() => handleJobTrigger(job)}
+                disabled={job.status?.status === "running"}
+                variant={"default"}
+                size={"xl"}
+                radius={"xl"}
+              >
+                <IconPlayerPlay stroke={1.5} />
+              </ActionIcon>
+            )}
+          </Group>
+        </Card>
+      ))}
+    </Stack>
+  );
+};
+
+const TimeAgo = ({ timestamp }: { timestamp: string }) => {
+  const timeAgo = useTimeAgo(new Date(timestamp));
+
+  return (
+    <Text size={"sm"} c={"dimmed"}>
+      {timeAgo}
+    </Text>
+  );
+};

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

@@ -1,455 +0,0 @@
-"use client";
-
-import { ActionIcon, Badge, Button, Group, Select, Text } from "@mantine/core";
-import { useMap } from "@mantine/hooks";
-import { IconPlayerPlay, IconPower, IconRefresh } from "@tabler/icons-react";
-import type { MRT_ColumnDef } from "mantine-react-table";
-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 { TaskStatus } from "@homarr/cron-job-status";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import type { ScopedTranslationFunction, TranslationFunction } from "@homarr/translation";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
-import { IconPowerOff } from "@homarr/ui/icons";
-
-const cronExpressions = [
-  {
-    value: "*/1 * * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 1 }),
-  },
-  {
-    value: "*/5 * * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 5 }),
-  },
-  {
-    value: "*/10 * * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 10 }),
-  },
-  {
-    value: "*/20 * * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 20 }),
-  },
-  {
-    value: "*/30 * * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 30 }),
-  },
-  {
-    value: "* * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.minutes", { interval: 1 }),
-  },
-  {
-    value: "*/5 * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.minutes", { interval: 5 }),
-  },
-  {
-    value: "*/10 * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.minutes", { interval: 10 }),
-  },
-  {
-    value: "*/15 * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.minutes", { interval: 15 }),
-  },
-  // Every hour
-  {
-    value: "0 * * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.hours", { interval: 1 }),
-  },
-  // Every two hours
-  {
-    value: "0 */2 * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.hours", { interval: 2 }),
-  },
-  // Every four hours
-  {
-    value: "0 */4 * * *",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.hours", { interval: 4 }),
-  },
-  // Every midnight
-  {
-    value: "0 0 * * */1",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.midnight"),
-  },
-  {
-    value: "0 0 * * 1",
-    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.weeklyMonday"),
-  },
-] satisfies { value: string; label: (t: TranslationFunction) => string }[];
-
-type JobData = RouterOutputs["cronJobs"]["getJobs"][number] & {
-  status?: TaskStatus | null;
-  lastExecutionTime?: string;
-};
-
-const createColumns = (
-  t: TranslationFunction,
-  tTasks: ScopedTranslationFunction<"management.page.tool.tasks">,
-  jobStatusMap: Map<string, TaskStatus | null>,
-  triggerMutation: ReturnType<typeof clientApi.cronJobs.triggerJob.useMutation>,
-  updateIntervalMutation: ReturnType<typeof clientApi.cronJobs.updateJobInterval.useMutation>,
-  enableMutation: ReturnType<typeof clientApi.cronJobs.enableJob.useMutation>,
-  disableMutation: ReturnType<typeof clientApi.cronJobs.disableJob.useMutation>,
-  loadingStates: Map<string, { toggle: boolean; trigger: boolean; interval: boolean }>,
-): MRT_ColumnDef<JobData>[] => [
-  {
-    accessorKey: "name",
-    header: tTasks("field.name.label"),
-    Cell({ row }) {
-      const status = jobStatusMap.get(row.original.name);
-      return (
-        <Group gap="xs">
-          <Text fw={500}>{tTasks(`job.${row.original.name}.label`)}</Text>
-          <StatusBadge isEnabled={row.original.isEnabled} status={status ?? null} />
-          {status?.lastExecutionStatus === "error" && (
-            <Badge color="red" size="sm">
-              {tTasks("status.error")}
-            </Badge>
-          )}
-        </Group>
-      );
-    },
-  },
-  {
-    accessorKey: "cron",
-    header: tTasks("field.interval.label"),
-    size: 200,
-    Cell({ row }) {
-      const handleIntervalChange = (newCron: string | null) => {
-        if (!newCron || newCron === row.original.cron) return;
-
-        const currentStates = loadingStates.get(row.original.name) ?? {
-          toggle: false,
-          trigger: false,
-          interval: false,
-        };
-        loadingStates.set(row.original.name, {
-          ...currentStates,
-          interval: true,
-        });
-
-        try {
-          updateIntervalMutation.mutate({
-            name: row.original.name,
-            cron: newCron,
-          });
-        } finally {
-          const updatedStates = loadingStates.get(row.original.name) ?? {
-            toggle: false,
-            trigger: false,
-            interval: false,
-          };
-          loadingStates.set(row.original.name, {
-            ...updatedStates,
-            interval: false,
-          });
-        }
-      };
-
-      return (
-        <Select
-          value={row.original.cron}
-          onChange={handleIntervalChange}
-          data={cronExpressions.map(({ value, label }) => ({
-            value,
-            label: label(t),
-          }))}
-          size="sm"
-          disabled={loadingStates.get(row.original.name)?.interval ?? false}
-          style={{ minWidth: 180 }}
-        />
-      );
-    },
-  },
-  {
-    accessorKey: "lastExecutionTime",
-    header: tTasks("field.lastExecution.label"),
-    size: 150,
-    Cell({ row }) {
-      const status = jobStatusMap.get(row.original.name);
-      if (!status?.lastExecutionTimestamp) {
-        return (
-          <Text size="sm" c="dimmed">
-            —
-          </Text>
-        );
-      }
-      return <TimeAgo timestamp={status.lastExecutionTimestamp} />;
-    },
-  },
-  {
-    id: "actions",
-    header: tTasks("field.actions.label"),
-    size: 120,
-    enableSorting: false,
-    Cell({ row }) {
-      const status = jobStatusMap.get(row.original.name);
-
-      const handleToggleEnabled = () => {
-        const currentStates = loadingStates.get(row.original.name) ?? {
-          toggle: false,
-          trigger: false,
-          interval: false,
-        };
-        loadingStates.set(row.original.name, {
-          ...currentStates,
-          toggle: true,
-        });
-        try {
-          if (row.original.isEnabled) {
-            disableMutation.mutate(row.original.name);
-          } else {
-            enableMutation.mutate(row.original.name);
-          }
-        } finally {
-          const updatedStates = loadingStates.get(row.original.name) ?? {
-            toggle: false,
-            trigger: false,
-            interval: false,
-          };
-          loadingStates.set(row.original.name, {
-            ...updatedStates,
-            toggle: false,
-          });
-        }
-      };
-
-      const handleTrigger = () => {
-        if (status?.status === "running") return;
-
-        const currentStates = loadingStates.get(row.original.name) ?? {
-          toggle: false,
-          trigger: false,
-          interval: false,
-        };
-        loadingStates.set(row.original.name, {
-          ...currentStates,
-          trigger: true,
-        });
-        try {
-          triggerMutation.mutate(row.original.name);
-        } finally {
-          const updatedStates = loadingStates.get(row.original.name) ?? {
-            toggle: false,
-            trigger: false,
-            interval: false,
-          };
-          loadingStates.set(row.original.name, {
-            ...updatedStates,
-            trigger: false,
-          });
-        }
-      };
-
-      return (
-        <Group gap="xs">
-          {!row.original.preventManualExecution && (
-            <ActionIcon
-              onClick={handleTrigger}
-              disabled={status?.status === "running"}
-              loading={loadingStates.get(row.original.name)?.trigger ?? false}
-              variant="light"
-              color="green"
-              size="md"
-            >
-              <IconPlayerPlay size={16} />
-            </ActionIcon>
-          )}
-          <ActionIcon
-            onClick={handleToggleEnabled}
-            loading={loadingStates.get(row.original.name)?.toggle ?? false}
-            variant="light"
-            color={row.original.isEnabled ? "green" : "gray"}
-            size="md"
-          >
-            {row.original.isEnabled ? <IconPower size={16} /> : <IconPowerOff size={16} />}
-          </ActionIcon>
-        </Group>
-      );
-    },
-  },
-];
-
-interface TasksTableProps {
-  initialJobs: RouterOutputs["cronJobs"]["getJobs"];
-}
-
-export const TasksTable = ({ initialJobs }: TasksTableProps) => {
-  const t = useI18n();
-  const tTasks = useScopedI18n("management.page.tool.tasks");
-
-  const { data: jobs } = clientApi.cronJobs.getJobs.useQuery(undefined, {
-    initialData: initialJobs,
-    refetchOnMount: false,
-  });
-
-  const jobStatusMap = useMap<string, TaskStatus | null>(initialJobs.map(({ name }) => [name, null] as const));
-
-  const loadingStates = useMap<string, { toggle: boolean; trigger: boolean; interval: boolean }>();
-
-  clientApi.cronJobs.subscribeToStatusUpdates.useSubscription(undefined, {
-    onData: (data) => {
-      jobStatusMap.set(data.name, data);
-    },
-  });
-
-  const triggerMutation = clientApi.cronJobs.triggerJob.useMutation({
-    onError() {
-      showErrorNotification({
-        title: t("common.error"),
-        message: tTasks("trigger.error.message"),
-      });
-    },
-    onSuccess() {
-      showSuccessNotification({
-        title: t("common.success"),
-        message: tTasks("trigger.success.message"),
-      });
-    },
-  });
-  const updateIntervalMutation = clientApi.cronJobs.updateJobInterval.useMutation({
-    onError() {
-      showErrorNotification({
-        title: t("common.error"),
-        message: tTasks("interval.update.error.message"),
-      });
-    },
-    onSuccess: async () => {
-      await utils.cronJobs.getJobs.invalidate();
-      showSuccessNotification({
-        title: t("common.success"),
-        message: tTasks("interval.update.success.message"),
-      });
-    },
-  });
-  const enableMutation = clientApi.cronJobs.enableJob.useMutation({
-    onError() {
-      showErrorNotification({
-        title: t("common.error"),
-        message: tTasks("toggle.error.message"),
-      });
-    },
-    onSuccess: async () => {
-      await utils.cronJobs.getJobs.invalidate();
-      showSuccessNotification({
-        title: t("common.success"),
-        message: tTasks("enable.success.message"),
-      });
-    },
-  });
-  const disableMutation = clientApi.cronJobs.disableJob.useMutation({
-    onError() {
-      showErrorNotification({
-        title: t("common.error"),
-        message: tTasks("toggle.error.message"),
-      });
-    },
-    onSuccess: async () => {
-      await utils.cronJobs.getJobs.invalidate();
-      showSuccessNotification({
-        title: t("common.success"),
-        message: tTasks("disable.success.message"),
-      });
-    },
-  });
-
-  // Utils for refresh functionality
-  const utils = clientApi.useUtils();
-  const handleRefreshAsync = async () => {
-    try {
-      await utils.cronJobs.getJobs.invalidate();
-      showSuccessNotification({
-        title: t("common.success"),
-        message: tTasks("refresh.success.message"),
-      });
-    } catch {
-      showErrorNotification({
-        title: t("common.error"),
-        message: tTasks("refresh.error.message"),
-      });
-    }
-  };
-
-  const table = useTranslatedMantineReactTable({
-    data: jobs,
-    enableDensityToggle: false,
-    enableColumnActions: false,
-    enableColumnFilters: false,
-    enablePagination: false,
-    enableRowSelection: false,
-    enableTableFooter: false,
-    enableBottomToolbar: false,
-    enableRowActions: false,
-    enableColumnOrdering: false,
-    enableSorting: false,
-    enableSortingRemoval: false,
-    positionGlobalFilter: "right",
-    mantineSearchTextInputProps: {
-      placeholder: tTasks("table.search", { count: String(jobs.length) }),
-      style: { minWidth: 300 },
-    },
-    initialState: { density: "xs", showGlobalFilter: true },
-    renderTopToolbarCustomActions: () => (
-      <Button variant="default" rightSection={<IconRefresh size="1rem" />} onClick={handleRefreshAsync}>
-        {tTasks("action.refresh.label")}
-      </Button>
-    ),
-    columns: createColumns(
-      t,
-      tTasks,
-      jobStatusMap,
-      triggerMutation,
-      updateIntervalMutation,
-      enableMutation,
-      disableMutation,
-      loadingStates,
-    ),
-  });
-
-  return <MantineReactTable table={table} />;
-};
-
-interface StatusBadgeProps {
-  isEnabled: boolean;
-  status: TaskStatus | null;
-}
-
-const StatusBadge = ({ isEnabled, status }: StatusBadgeProps) => {
-  const tTasks = useScopedI18n("management.page.tool.tasks");
-
-  if (!isEnabled) {
-    return (
-      <Badge color="yellow" size="sm">
-        {tTasks("status.disabled")}
-      </Badge>
-    );
-  }
-
-  if (!status) return null;
-
-  if (status.status === "running") {
-    return (
-      <Badge color="green" size="sm">
-        {tTasks("status.running")}
-      </Badge>
-    );
-  }
-
-  return (
-    <Badge variant="default" size="sm">
-      {tTasks("status.idle")}
-    </Badge>
-  );
-};
-
-const TimeAgo = ({ timestamp }: { timestamp: string }) => {
-  const timeAgo = useTimeAgo(new Date(timestamp));
-
-  return (
-    <Text size="sm" c="dimmed">
-      {timeAgo}
-    </Text>
-  );
-};

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

@@ -1,13 +1,12 @@
 import { notFound } from "next/navigation";
-import { Stack, Title } from "@mantine/core";
+import { Box, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
 
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";
-import { TasksTable } from "./_components/tasks-table";
+import { JobsList } from "./_components/jobs-list";
 
 export async function generateMetadata() {
   const session = await auth();
@@ -28,15 +27,10 @@ export default async function TasksPage() {
   }
 
   const jobs = await api.cronJobs.getJobs();
-  const tTasks = await getScopedI18n("management.page.tool.tasks");
-
   return (
-    <>
-      <DynamicBreadcrumb />
-      <Stack>
-        <Title order={1}>{tTasks("title")}</Title>
-        <TasksTable initialJobs={jobs} />
-      </Stack>
-    </>
+    <Box>
+      <Title mb={"md"}>Tasks</Title>
+      <JobsList initialJobs={jobs} />
+    </Box>
   );
 }

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, Group, Stack } from "@mantine/core";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -9,7 +9,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { userChangeHomeBoardsSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
 
 import type { Board } from "~/app/[locale]/boards/_types";
 import { BoardSelect } from "~/components/board/board-select";
@@ -40,7 +40,7 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
       });
     },
   });
-  const form = useZodForm(userChangeHomeBoardsSchema, {
+  const form = useZodForm(validation.user.changeHomeBoards, {
     initialValues: {
       homeBoardId: user.homeBoardId,
       mobileHomeBoardId: user.mobileHomeBoardId,
@@ -73,7 +73,7 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
         />
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" color="teal" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>
@@ -82,4 +82,4 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
   );
 };
 
-type FormType = z.infer<typeof userChangeHomeBoardsSchema>;
+type FormType = z.infer<typeof validation.user.changeHomeBoards>;

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, Group, Select, Stack, Switch } from "@mantine/core";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -9,7 +9,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { userChangeSearchPreferencesSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
 
 interface ChangeSearchPreferencesFormProps {
   user: RouterOutputs["user"]["getById"];
@@ -37,7 +37,7 @@ export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeS
       });
     },
   });
-  const form = useZodForm(userChangeSearchPreferencesSchema, {
+  const form = useZodForm(validation.user.changeSearchPreferences, {
     initialValues: {
       defaultSearchEngineId: user.defaultSearchEngineId,
       openInNewTab: user.openSearchInNewTab,
@@ -66,7 +66,7 @@ export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeS
         />
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" color="teal" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>
@@ -75,4 +75,4 @@ export const ChangeSearchPreferencesForm = ({ user, searchEnginesData }: ChangeS
   );
 };
 
-type FormType = z.infer<typeof userChangeSearchPreferencesSchema>;
+type FormType = z.infer<typeof validation.user.changeSearchPreferences>;

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

@@ -4,7 +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/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -12,7 +12,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { userFirstDayOfWeekSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
 
 dayjs.extend(localeData);
 
@@ -42,7 +42,7 @@ export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
       });
     },
   });
-  const form = useZodForm(userFirstDayOfWeekSchema, {
+  const form = useZodForm(validation.user.firstDayOfWeek, {
     initialValues: {
       firstDayOfWeek: user.firstDayOfWeek as DayOfWeek,
     },
@@ -71,7 +71,7 @@ export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
         </Radio.Group>
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" color="teal" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>
@@ -80,4 +80,4 @@ export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
   );
 };
 
-type FormType = z.infer<typeof userFirstDayOfWeekSchema>;
+type FormType = z.infer<typeof validation.user.firstDayOfWeek>;

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, Group, Stack, Switch } from "@mantine/core";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -9,7 +9,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { userPingIconsEnabledSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
 
 interface PingIconsEnabledProps {
   user: RouterOutputs["user"]["getById"];
@@ -35,7 +35,7 @@ export const PingIconsEnabled = ({ user }: PingIconsEnabledProps) => {
       });
     },
   });
-  const form = useZodForm(userPingIconsEnabledSchema, {
+  const form = useZodForm(validation.user.pingIconsEnabled, {
     initialValues: {
       pingIconsEnabled: user.pingIconsEnabled,
     },
@@ -57,7 +57,7 @@ export const PingIconsEnabled = ({ user }: PingIconsEnabledProps) => {
         />
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" color="teal" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>
@@ -66,4 +66,4 @@ export const PingIconsEnabled = ({ user }: PingIconsEnabledProps) => {
   );
 };
 
-type FormType = z.infer<typeof userPingIconsEnabledSchema>;
+type FormType = z.infer<typeof validation.user.pingIconsEnabled>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx

@@ -9,7 +9,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { userEditProfileSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
 
 interface UserProfileFormProps {
   user: RouterOutputs["user"]["getById"];
@@ -43,7 +43,7 @@ export const UserProfileForm = ({ user }: UserProfileFormProps) => {
       });
     },
   });
-  const form = useZodForm(userEditProfileSchema.omit({ id: true }), {
+  const form = useZodForm(validation.user.editProfile.omit({ id: true }), {
     initialValues: {
       name: user.name ?? "",
       email: user.email ?? "",
@@ -81,7 +81,7 @@ export const UserProfileForm = ({ user }: UserProfileFormProps) => {
 
         {isProviderCredentials && (
           <Group justify="end">
-            <Button type="submit" disabled={!form.isDirty()} loading={isPending}>
+            <Button type="submit" color="teal" disabled={!form.isDirty()} loading={isPending}>
               {t("common.action.saveChanges")}
             </Button>
           </Group>

apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_components/_change-password-form.tsx

@@ -10,7 +10,7 @@ import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 import { CustomPasswordInput } from "@homarr/ui";
-import { userChangePasswordSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
 
 interface ChangePasswordFormProps {
   user: RouterOutputs["user"]["getById"];
@@ -34,7 +34,7 @@ export const ChangePasswordForm = ({ user }: ChangePasswordFormProps) => {
       });
     },
   });
-  const form = useZodForm(userChangePasswordSchema, {
+  const form = useZodForm(validation.user.changePassword, {
     initialValues: {
       /* Require previous password if the current user want's to change his password */
       previousPassword: session?.user.id === user.id ? "" : "_",
@@ -85,7 +85,7 @@ export const ChangePasswordForm = ({ user }: ChangePasswordFormProps) => {
             />
 
             <Group justify="end">
-              <Button type="submit" loading={isPending}>
+              <Button type="submit" color="teal" loading={isPending}>
                 {t("common.action.confirm")}
               </Button>
             </Group>

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

@@ -17,7 +17,7 @@ import {
 } from "@mantine/core";
 import { useListState } from "@mantine/hooks";
 import { IconPlus, IconUserCheck } from "@tabler/icons-react";
-import { z } from "zod/v4";
+import { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { everyoneGroup, groupPermissions } from "@homarr/definitions";
@@ -27,8 +27,8 @@ import { useModalAction } from "@homarr/modals";
 import { showErrorNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { CustomPasswordInput, UserAvatar } from "@homarr/ui";
-import { createCustomErrorParams } from "@homarr/validation/form/i18n";
-import { userPasswordSchema } from "@homarr/validation/user";
+import { validation } from "@homarr/validation";
+import { createCustomErrorParams } from "@homarr/validation/form";
 
 import { GroupSelectModal } from "~/components/access/group-select-modal";
 import { StepperNavigationComponent } from "./stepper-navigation";
@@ -84,7 +84,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
   const securityForm = useZodForm(
     z
       .object({
-        password: userPasswordSchema,
+        password: validation.user.password,
         confirmPassword: z.string(),
       })
       .refine((data) => data.password === data.confirmPassword, {

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_rename-group-form.tsx

@@ -8,7 +8,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { groupUpdateSchema } from "@homarr/validation/group";
+import { validation } from "@homarr/validation";
 
 interface RenameGroupFormProps {
   group: {
@@ -21,7 +21,7 @@ interface RenameGroupFormProps {
 export const RenameGroupForm = ({ group, disabled }: RenameGroupFormProps) => {
   const t = useI18n();
   const { mutate, isPending } = clientApi.group.updateGroup.useMutation();
-  const form = useZodForm(groupUpdateSchema.pick({ name: true }), {
+  const form = useZodForm(validation.group.update.pick({ name: true }), {
     initialValues: {
       name: group.name,
     },
@@ -68,7 +68,7 @@ export const RenameGroupForm = ({ group, disabled }: RenameGroupFormProps) => {
 
         {!disabled && (
           <Group justify="end">
-            <Button type="submit" loading={isPending}>
+            <Button type="submit" color="teal" loading={isPending}>
               {t("common.action.saveChanges")}
             </Button>
           </Group>

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

@@ -40,5 +40,9 @@ export const AddGroupMember = ({ groupId, presentUserIds }: AddGroupMemberProps)
     );
   }, [openModal, presentUserIds, groupId, mutateAsync, tMembersAdd]);
 
-  return <MobileAffixButton onClick={handleAddMember}>{tMembersAdd("label")}</MobileAffixButton>;
+  return (
+    <MobileAffixButton color="teal" onClick={handleAddMember}>
+      {tMembersAdd("label")}
+    </MobileAffixButton>
+  );
 };

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
 import { useCallback } from "react";
+import type { PropsWithChildren } from "react";
 import { Button, Card, Group, Switch, Text, Transition } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
@@ -108,7 +108,7 @@ export const SaveAffix = ({ groupId }: SaveAffixProps) => {
                 <Button disabled={isPending} onClick={form.reset}>
                   {t("common.action.discard")}
                 </Button>
-                <Button loading={isPending} onClick={handleSubmit}>
+                <Button color="teal" loading={isPending} onClick={handleSubmit}>
                   {t("common.action.saveChanges")}
                 </Button>
               </Group>

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

@@ -6,7 +6,7 @@ import { clientApi } from "@homarr/api/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { groupSettingsSchema } from "@homarr/validation/group";
+import { validation } from "@homarr/validation";
 
 import { BoardSelect } from "~/components/board/board-select";
 
@@ -19,7 +19,7 @@ interface GroupHomeBoardsProps {
 export const GroupHomeBoards = ({ homeBoardId, mobileHomeBoardId, groupId }: GroupHomeBoardsProps) => {
   const t = useI18n();
   const [availableBoards] = clientApi.board.getBoardsForGroup.useSuspenseQuery({ groupId });
-  const form = useZodForm(groupSettingsSchema.pick({ homeBoardId: true, mobileHomeBoardId: true }), {
+  const form = useZodForm(validation.group.settings.pick({ homeBoardId: true, mobileHomeBoardId: true }), {
     initialValues: {
       homeBoardId,
       mobileHomeBoardId,
@@ -71,7 +71,7 @@ export const GroupHomeBoards = ({ homeBoardId, mobileHomeBoardId, groupId }: Gro
         />
 
         <Group justify="end">
-          <Button type="submit" loading={isPending}>
+          <Button type="submit" color="teal" loading={isPending}>
             {t("common.action.save")}
           </Button>
         </Group>

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

@@ -57,5 +57,9 @@ const AddGroup = () => {
     openModal();
   }, [openModal]);
 
-  return <MobileAffixButton onClick={handleAddGroup}>{t("group.action.create.label")}</MobileAffixButton>;
+  return (
+    <MobileAffixButton onClick={handleAddGroup} color="teal">
+      {t("group.action.create.label")}
+    </MobileAffixButton>
+  );
 };

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

@@ -264,7 +264,7 @@ const SaveAffix = ({ visible, isPending, onDiscard, onSave }: SaveAffixProps) =>
                 <Button disabled={isPending} onClick={onDiscard}>
                   {t("common.action.discard")}
                 </Button>
-                <Button loading={isPending} onClick={onSave}>
+                <Button color="teal" loading={isPending} onClick={onSave}>
                   {t("common.action.saveChanges")}
                 </Button>
               </Group>

apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx

@@ -89,7 +89,11 @@ const RenderTopToolbarCustomActions = () => {
     openModal();
   }, [openModal]);
 
-  return <Button onClick={handleNewInvite}>{t("action.new.title")}</Button>;
+  return (
+    <Button color="teal" onClick={handleNewInvite}>
+      {t("action.new.title")}
+    </Button>
+  );
 };
 
 const RenderRowActions = ({ row }: { row: MRT_Row<RouterOutputs["invite"]["getAll"][number]> }) => {

apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx

@@ -10,8 +10,8 @@ import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
-import { useI18n } from "@homarr/translation/client";
-import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
+import { useScopedI18n } from "@homarr/translation/client";
+import type { BoardItemAdvancedOptions } from "@homarr/validation";
 import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";
 import { WidgetEditModal } from "@homarr/widgets/modals";
@@ -31,7 +31,7 @@ interface WidgetPreviewPageContentProps {
 
 export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPreviewPageContentProps) => {
   const settings = useSettings();
-  const t = useI18n();
+  const t = useScopedI18n("widgetPreview");
   const { openModal: openWidgetEditModal } = useModalAction(WidgetEditModal);
   const { openModal: openPreviewDimensionsModal } = useModalAction(PreviewDimensionsModal);
   const currentDefinition = useMemo(() => widgetImports[kind].definition, [kind]);
@@ -48,34 +48,26 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
     options: reduceWidgetOptionsWithDefaultValues(kind, settings, {}),
     integrationIds: [],
     advancedOptions: {
-      title: null,
       customCssClasses: [],
       borderColor: "",
     },
   });
 
   const handleOpenEditWidgetModal = useCallback(() => {
-    openWidgetEditModal(
-      {
-        kind,
-        value: state,
-        onSuccessfulEdit: (value) => {
-          setState(value);
-        },
-        integrationData: integrationData.filter(
-          (integration) =>
-            "supportedIntegrations" in currentDefinition &&
-            (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
-        ),
-        integrationSupport: "supportedIntegrations" in currentDefinition,
-        settings,
+    openWidgetEditModal({
+      kind,
+      value: state,
+      onSuccessfulEdit: (value) => {
+        setState(value);
       },
-      {
-        title(t) {
-          return `${t("item.edit.title")} - ${t(`widget.${kind}.name`)}`;
-        },
-      },
-    );
+      integrationData: integrationData.filter(
+        (integration) =>
+          "supportedIntegrations" in currentDefinition &&
+          (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
+      ),
+      integrationSupport: "supportedIntegrations" in currentDefinition,
+      settings,
+    });
   }, [currentDefinition, integrationData, kind, openWidgetEditModal, settings, state]);
 
   const Comp = loadWidgetDynamic(kind);
@@ -83,7 +75,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
   const toggleEditMode = useCallback(() => {
     setEditMode((editMode) => !editMode);
     showSuccessNotification({
-      message: editMode ? t("widgetPreview.toggle.disabled") : t("widgetPreview.toggle.enabled"),
+      message: editMode ? t("toggle.disabled") : t("toggle.enabled"),
     });
   }, [editMode, t]);
 

apps/nextjs/src/app/api/image-proxy/[id]/route.ts

@@ -1,19 +0,0 @@
-import { notFound } from "next/navigation";
-
-import { ImageProxy } from "@homarr/image-proxy";
-
-export const GET = async (_request: Request, props: { params: Promise<{ id: string }> }) => {
-  const { id } = await props.params;
-
-  const imageProxy = new ImageProxy();
-  const image = await imageProxy.forwardImageAsync(id);
-  if (!image) {
-    notFound();
-  }
-
-  return new Response(image, {
-    headers: {
-      "Cache-Control": "public, max-age=3600, immutable", // Cache for 1 hour
-    },
-  });
-};

apps/nextjs/src/app/api/user-medias/[id]/route.ts

@@ -23,7 +23,7 @@ export async function GET(_req: NextRequest, props: { params: Promise<{ id: stri
   headers.set("Content-Type", image.contentType);
   headers.set("Content-Length", image.content.length.toString());
 
-  return new NextResponse(new Uint8Array(image.content), {
+  return new NextResponse(image.content, {
     status: 200,
     headers,
   });

apps/nextjs/src/components/access/group-access-form.tsx

@@ -82,7 +82,7 @@ export const GroupAccessForm = <TPermission extends string>({
             <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
               {t("common.action.add")}
             </Button>
-            <Button type="submit" loading={isPending}>
+            <Button type="submit" loading={isPending} color="teal">
               {t("permission.action.saveGroup")}
             </Button>
           </Group>

apps/nextjs/src/components/access/user-access-form.tsx

@@ -104,7 +104,7 @@ export const UsersAccessForm = <TPermission extends string>({
             <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
               {t("common.action.add")}
             </Button>
-            <Button type="submit" loading={isPending}>
+            <Button type="submit" loading={isPending} color="teal">
               {t("permission.action.saveUser")}
             </Button>
           </Group>

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

@@ -1,6 +1,6 @@
 import { getBoardLayouts } from "@homarr/boards/context";
-import { createId } from "@homarr/common";
 import type { Modify } from "@homarr/common/types";
+import { createId } from "@homarr/db/client";
 import type { WidgetKind } from "@homarr/definitions";
 
 import type { Board, EmptySection, Item, ItemLayout } from "~/app/[locale]/boards/_types";
@@ -9,11 +9,10 @@ import { getSectionElements } from "./section-elements";
 
 export interface CreateItemInput {
   kind: WidgetKind;
-  options?: Record<string, unknown>;
 }
 
 export const createItemCallback =
-  ({ kind, options = {} }: CreateItemInput) =>
+  ({ kind }: CreateItemInput) =>
   (previous: Board): Board => {
     const firstSection = previous.sections
       .filter((section): section is EmptySection => section.kind === "empty")
@@ -25,11 +24,10 @@ export const createItemCallback =
     const widget = {
       id: createId(),
       kind,
-      options,
+      options: {},
       layouts: createItemLayouts(previous, firstSection),
       integrationIds: [],
       advancedOptions: {
-        title: null,
         customCssClasses: [],
         borderColor: "",
       },