fix(tasks): remove trpc cron-job api on port 3002

Co-authored-by: Copilot <copilot@github.com>

.dockerignore

@@ -1,9 +1,11 @@
 Dockerfile
 .dockerignore
 node_modules
+**/node_modules
 npm-debug.log
 README.md
 .next
+.turbo
 .git
 dev
 .build

.env.example

@@ -30,11 +30,19 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
 # DB_PASSWORD='password'
 # DB_NAME='name-of-database'
 
-# The below path can be used to store trusted certificates during development, it is not required and can be left empty.
+# 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.
 # 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_KUBERNETES=true
+
+# Enable mock integration
+UNSAFE_ENABLE_MOCK_INTEGRATION=true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -31,6 +31,69 @@ 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.59.3
+        - 1.59.2
+        - 1.59.1
+        - 1.59.0
+        - 1.58.1
+        - 1.58.0
+        - 1.57.1
+        - 1.57.0
+        - 1.56.1
+        - 1.56.0
+        - 1.55.0
+        - 1.54.0
+        - 1.53.0
+        - 1.52.0
+        - 1.51.0
+        - 1.50.1
+        - 1.50.0
+        - 1.49.1
+        - 1.49.0
+        - 1.48.0
+        - 1.47.0
+        - 1.46.0
+        - 1.45.3
+        - 1.45.2
+        - 1.45.1
+        - 1.45.0
+        - 1.44.0
+        - 1.43.1
+        - 1.43.0
+        - 1.42.1
+        - 1.42.0
+        - 1.41.0
+        - 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

.github/actions/extract-build-artifact/action.yaml

@@ -0,0 +1,64 @@
+name: Extract Build Artifact
+description: Extracts artifacts from an existing Docker image to be used for from source installation
+inputs:
+  digest:
+    description: Digest of Docker image to use
+    required: true
+  architecture:
+    description: Name of architecture, will be used to build artifact content (amd64 or arm64)
+    required: true
+  release-tag:
+    description: Tag of the release to which the artifact will be attached
+    required: true
+  repository:
+    description: Repository to which the release belongs, e.g. owner/repo
+    required: true
+  token:
+    description: GitHub token with permissions to upload release assets
+    required: true
+runs:
+  using: "composite"
+  steps:
+    - name: Prebuilt debian dependencies
+      uses: homarr-labs/homarr/.github/actions/prebuilt-debian@dev
+      id: prebuilt-debian
+      with:
+        architecture: ${{ inputs.architecture }}
+    - name: Start docker container for ${{ inputs.architecture }}
+      run: |
+        docker run --name homarr \
+          -e "SECRET_ENCRYPTION_KEY=0000000000000000000000000000000000000000000000000000000000000000" \
+          --detach --rm ${{ inputs.digest }}
+      shell: bash
+    - name: Prepare extraction
+      run: |
+        docker exec homarr cp /etc/nginx/templates/nginx.conf /app && \
+        mkdir -p ${{ runner.temp }}/extraction/${{ inputs.architecture }}
+      shell: bash
+    - name: Extract source from ${{ inputs.architecture }} container (alpine)
+      run: |
+        docker exec homarr tar -czf extraction-alpine.tar.gz -C /app . && \
+        docker cp homarr:/app/extraction-alpine.tar.gz ${{ runner.temp }}/extraction/${{ inputs.architecture }}/build-alpine-${{ inputs.architecture }}.tar.gz && \
+        docker exec homarr rm /app/extraction-alpine.tar.gz
+      shell: bash
+    - name: Extract source from ${{ inputs.architecture }} container (debian)
+      run: |
+        docker cp ${{ steps.prebuilt-debian.outputs.path }}/. homarr:/app/build && \
+        docker cp ${{ steps.prebuilt-debian.outputs.path }}/. homarr:/app/node_modules/better-sqlite3/build/Release && \
+        docker exec homarr tar -czf extraction-debian.tar.gz -C /app . && \
+        docker cp homarr:/app/extraction-debian.tar.gz ${{ runner.temp }}/extraction/${{ inputs.architecture }}/build-debian-${{ inputs.architecture }}.tar.gz
+      shell: bash
+    - name: Stop ${{ inputs.architecture }} container
+      if: always()
+      run: docker container remove --force --volumes homarr
+      shell: bash
+    - name: Add build archive to release (alpine)
+      env:
+        GH_TOKEN: ${{ inputs.token }}
+      run: gh release upload --repo ${{ inputs.repository }} ${{ inputs.release-tag }} ${{ runner.temp }}/extraction/${{ inputs.architecture }}/build-alpine-${{ inputs.architecture }}.tar.gz --clobber
+      shell: bash
+    - name: Add build archive to release (debian)
+      env:
+        GH_TOKEN: ${{ inputs.token }}
+      run: gh release upload --repo ${{ inputs.repository }} ${{ inputs.release-tag }} ${{ runner.temp }}/extraction/${{ inputs.architecture }}/build-debian-${{ inputs.architecture }}.tar.gz --clobber
+      shell: bash

.github/actions/prebuilt-debian/action.yaml

@@ -0,0 +1,42 @@
+name: Prebuilt dependencies for debian
+description: Provides prebuilt dependencies for debian based docker images
+inputs:
+  architecture:
+    description: Name of architecture, will be used to build docker image (e.g. amd64, arm64)
+    required: true
+outputs:
+  path:
+    description: Path to extracted prebuilt dependencies
+    value: ${{ runner.temp }}/prebuilts
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/checkout@v6
+      with:
+        persist-credentials: false
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v4
+
+    - name: Build docker image for ${{ inputs.architecture }}
+      id: build
+      uses: docker/build-push-action@v7
+      with:
+        push: false
+        load: true
+        context: ./deployments/prebuilt-debian
+        platforms: linux/${{ inputs.architecture }}
+        tags: prebuilt-debian
+    - name: Start docker container for ${{ inputs.architecture }}
+      run: |
+        docker run --name prebuilt-debian \
+          --detach --rm prebuilt-debian
+      shell: bash
+    - name: Extract prebuilt dependencies from ${{ inputs.architecture }} container
+      run: |
+        mkdir -p ${{ runner.temp }}/prebuilts && \
+        docker cp prebuilt-debian:/app/node_modules/better-sqlite3/build/Release/better_sqlite3.node ${{ runner.temp }}/prebuilts/better_sqlite3.node
+      shell: bash
+    - name: Stop ${{ inputs.architecture }} container
+      if: always()
+      run: docker container remove --force --volumes prebuilt-debian
+      shell: bash

.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)
-
+- [ ] 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/).

.github/renovate.json5

@@ -3,17 +3,51 @@
   extends: ["config:recommended"],
   packageRules: [
     {
-      matchPackagePatterns: ["^@homarr/"],
+      matchPackageNames: ["^@homarr/"],
+      enabled: false,
+    },
+    // Reenable once https://github.com/privatenumber/tsx/issues/737 is fixed
+    {
+      matchPackageNames: ["tsx"],
+      enabled: false,
+    },
+    // Reenable once bug with undici v8 is fixed (https://github.com/homarr-labs/homarr/issues/5467)
+    {
+      matchPackageNames: ["undici"],
+      matchNewValue: "8.*",
       enabled: false,
     },
     {
       matchUpdateTypes: ["minor", "patch", "pin", "digest"],
       automerge: true,
     },
+    {
+      // disallow automerge for onlyBuiltDependencies
+      matchPackageNames: [
+        "@tree-sitter-grammars/tree-sitter-yaml",
+        "bcrypt",
+        "better-sqlite3",
+        "cpu-features",
+        "esbuild",
+        "sharp",
+        "ssh2",
+        "tree-sitter",
+        "tree-sitter-json",
+      ],
+      automerge: false,
+    },
   ],
+  // Updates lockfile for prebuilt-debian after if package.json is updated, otherwise only root lockfile is updated
+  postUpgradeTasks: {
+    commands: ["cd deployments/prebuilt-debian && pnpm install --ignore-workspace --lockfile-only"],
+    fileFilters: ["deployments/prebuilt-debian/pnpm-lock.yaml"],
+    executionMode: "update",
+  },
   updateInternalDeps: true,
   rangeStrategy: "bump",
   automerge: false,
   baseBranches: ["dev"],
   dependencyDashboard: false,
+  // prevent special characters in branch names (otherwise git errors occur on windows)
+  branchNameStrict: true,
 }

.github/workflows/automatic-approval.yml

@@ -3,19 +3,29 @@ on:
   pull_request:
     types: [opened, synchronize]
 
+permissions: {}
+
 jobs:
   approve-automatic-prs:
     runs-on: ubuntu-latest
-    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
+    timeout-minutes: 2
+    # 158783068: homarr-renovate[bot]
+    # 190541745: homarr-crowdin[bot]
+    # 210161987: homarr-update-contributors[bot]
+    # 175486441: homarr-releases[bot]
+    # Extracted from https://api.github.com/users/<username>
+    if: github.actor_id == 158783068 || github.actor_id == 190541745 || github.actor_id == 210161987 || github.actor_id == 175486441
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Obtain token
         id: obtainToken
-        uses: tibdex/github-app-token@v2
+        uses: actions/create-github-app-token@v3
         with:
-          private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+          app-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+          permission-pull-requests: write # required to approve pull request
+
       - name: Install GitHub CLI
         run: sudo apt-get install -y gh
       - name: Approve automatic PRs

.github/workflows/code-quality.yml

@@ -1,4 +1,6 @@
 name: "[Quality] Code Analysis"
+permissions:
+  contents: read
 
 on:
   pull_request:
@@ -11,18 +13,15 @@ concurrency:
   group: "${{ github.workflow }}-${{ github.ref }}"
   cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
-# You can leverage Vercel Remote Caching with Turbo to speed up your builds
-# @link https://turborepo.org/docs/core-concepts/remote-caching#remote-caching-on-vercel-builds
 env:
   FORCE_COLOR: 3
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 
 jobs:
   lint:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -36,8 +35,9 @@ jobs:
 
   format:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -47,19 +47,21 @@ jobs:
 
   typecheck:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup
         uses: ./tooling/github/setup
 
       - name: Typecheck
-        run: turbo typecheck
+        run: pnpm typecheck
 
   test:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -75,14 +77,15 @@ jobs:
 
   e2e:
     runs-on: ubuntu-latest
+    timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Setup
         uses: ./tooling/github/setup
       - name: Build docker image
         id: build-docker-image
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           platforms: linux/amd64
           context: .
@@ -99,8 +102,9 @@ jobs:
 
   build:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Setup
         uses: ./tooling/github/setup
       - name: Copy env

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

@@ -1,14 +0,0 @@
-# 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

@@ -13,7 +13,8 @@ permissions:
 jobs:
   validate-pull-request-title:
     runs-on: ubuntu-latest
+    timeout-minutes: 1
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@v6
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -5,20 +5,26 @@ on:
   schedule:
     - cron: "0 0 * * *" # every day at midnight
 
+permissions:
+  contents: write # required to push changes
+
 jobs:
   download-crowdin-translations:
+    timeout-minutes: 5
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Obtain token
         id: obtainToken
-        uses: tibdex/github-app-token@v2
+        uses: actions/create-github-app-token@v3
         with:
-          private_key: ${{ secrets.CROWDIN_APP_PRIVATE_KEY }}
-          app_id: ${{ secrets.CROWDIN_APP_ID }}
+          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
 
       - name: Download Crowdin translations
         id: crowdin-download

.github/workflows/crowdin-upload.yml

@@ -1,4 +1,6 @@
 name: "[Crowdin] Upload translations"
+permissions:
+  contents: read
 
 on:
   workflow_dispatch:
@@ -12,10 +14,11 @@ jobs:
     # Don't run this action if the downloaded translations are being pushed
     if: "!contains(github.event.head_commit.message, 'chore(lang)')"
     runs-on: ubuntu-latest
+    timeout-minutes: 5
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Upload Crowdin translations
         uses: crowdin/github-action@v2

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

@@ -32,12 +32,13 @@ jobs:
   release:
     name: Create tag and release
     runs-on: ubuntu-latest
+    timeout-minutes: 5
     env:
       SKIP_RELEASE: ${{ github.event_name == 'workflow_dispatch' || github.ref_name == 'dev' }}
     outputs:
       version: ${{ steps.read-semver.outputs.version || steps.version-fallback.outputs.version }}
       git_ref: ${{ steps.read-git-ref.outputs.ref || github.ref }}
-
+      skipped: ${{ env.SKIP_RELEASE }}
     steps:
       - run: echo "Skipping release for workflow_dispatch event"
         if: env.SKIP_RELEASE == 'true'
@@ -49,18 +50,23 @@ jobs:
       - name: Obtain token
         if: env.SKIP_RELEASE == 'false'
         id: obtainToken
-        uses: tibdex/github-app-token@v2
+        uses: actions/create-github-app-token@v3
         with:
-          private_key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
-          app_id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
-      - uses: actions/checkout@v4
+          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@v6
         if: env.SKIP_RELEASE == 'false'
         with:
           persist-credentials: false
-      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v6
+        if: env.SKIP_RELEASE == 'false'
+      - uses: actions/setup-node@v6
         if: env.SKIP_RELEASE == 'false'
         with:
-          node-version: 22
+          node-version: 24.15.0
+          cache: "pnpm"
       - run: npm i -g pnpm
         if: env.SKIP_RELEASE == 'false'
       - name: Install dependencies
@@ -107,32 +113,33 @@ jobs:
     name: Build docker image for amd64
     needs: release
     runs-on: ubuntu-latest
+    timeout-minutes: 15
     outputs:
       digest: ${{ steps.build.outputs.digest }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           ref: ${{ needs.release.outputs.git_ref }}
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: "${{ env.GHCR_REPO }}"
 
       - name: Log in to the Container registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Build and push by digest
         id: build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           network: host
@@ -141,37 +148,37 @@ jobs:
           outputs: type=image,"name=${{ env.GHCR_REPO }}",push-by-digest=true,name-canonical=true,push=true
         env:
           SKIP_ENV_VALIDATION: true
-
   build-arm64:
     name: Build docker image for arm64
     needs: release
     runs-on: ubuntu-24.04-arm
+    timeout-minutes: 20
     outputs:
       digest: ${{ steps.build.outputs.digest }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           ref: ${{ needs.release.outputs.git_ref }}
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: "${{ env.GHCR_REPO }}"
 
       - name: Log in to the Container registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Build and push by digest
         id: build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           network: host
@@ -180,18 +187,58 @@ jobs:
           outputs: type=image,"name=${{ env.GHCR_REPO }}",push-by-digest=true,name-canonical=true,push=true
         env:
           SKIP_ENV_VALIDATION: true
+  extract-asset-amd64:
+    name: Extract amd64 asset from docker image
+    needs: [release, build-amd64]
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - name: Extract amd64
+        if: needs.release.outputs.skipped == 'false'
+        uses: homarr-labs/homarr/.github/actions/extract-build-artifact@dev
+        with:
+          digest: "${{ env.GHCR_REPO }}@${{ needs.build-amd64.outputs.digest }}"
+          architecture: amd64
+          release-tag: ${{ needs.release.outputs.version }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: ${{ github.repository }}
 
+  extract-asset-arm64:
+    name: Extract arm64 asset from docker image
+    needs: [release, build-arm64]
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 2
+    steps:
+      - name: Extract arm64
+        if: needs.release.outputs.skipped == 'false'
+        uses: homarr-labs/homarr/.github/actions/extract-build-artifact@dev
+        with:
+          digest: "${{ env.GHCR_REPO }}@${{ needs.build-arm64.outputs.digest }}"
+          architecture: arm64
+          release-tag: ${{ needs.release.outputs.version }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: ${{ github.repository }}
   publish:
     name: Complete deployment and notify
-    needs: [release, build-amd64, build-arm64]
+    needs: [release, build-amd64, build-arm64, extract-asset-amd64, extract-asset-arm64]
     runs-on: ubuntu-latest
+    timeout-minutes: 5
     env:
       NEXT_VERSION: ${{ needs.release.outputs.version }}
       DEPLOY_LATEST: ${{ github.ref_name == 'main' }}
       DEPLOY_BETA: ${{ github.ref_name == 'beta' }}
     steps:
+      - name: Obtain token
+        if: needs.release.outputs.skipped == 'false'
+        id: obtainToken
+        uses: actions/create-github-app-token@v3
+        with:
+          private-key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
+          app-id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
+          permission-contents: write # required to publish the release
+
       - name: Log in to the Container registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -217,6 +264,13 @@ jobs:
             ${{ env.GHCR_REPO }}@${{ needs.build-amd64.outputs.digest }} \
             ${{ env.GHCR_REPO }}@${{ needs.build-arm64.outputs.digest }}
 
+      - name: Publish release
+        if: needs.release.outputs.skipped == 'false'
+        env:
+          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
+        run: |
+          gh release edit --repo ${{ github.repository }} ${{ needs.release.outputs.version }} --draft=false
+
       - name: Discord notification
         env:
           DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}

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

@@ -18,6 +18,7 @@ permissions:
 jobs:
   create-and-merge-pr:
     runs-on: ubuntu-latest
+    timeout-minutes: 2
     steps:
       - name: Discord notification
         if: ${{ github.events.inputs.send-notifications }}
@@ -27,7 +28,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@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
       - name: Get Next Version
@@ -49,10 +50,11 @@ 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: tibdex/github-app-token@v2
+        uses: actions/create-github-app-token@v3
         with:
-          private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+          app-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+          permission-pull-requests: write
       - name: Approve PR
         env:
           GITHUB_TOKEN: ${{ steps.obtainApprovalToken.outputs.token }}
@@ -60,10 +62,12 @@ jobs:
           gh pr review --approve --body "Automatically approved by GitHub Action"
       - name: Obtain token
         id: obtainMergeToken
-        uses: tibdex/github-app-token@v2
+        uses: actions/create-github-app-token@v3
         with:
-          private_key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
-          app_id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
+          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
       - id: automerge
         if: ${{ steps.semver.outputs.bump != 'major' }}
         name: automerge

.github/workflows/on-pr-prebuilt-debian-validate.yml

@@ -0,0 +1,45 @@
+name: "[Deployments] Validate prebuilt debian dependencies"
+
+permissions:
+  contents: read
+
+on:
+  pull_request:
+    branches: ["*"]
+    paths: [".github/actions/prebuilt-debian/**", "deployments/prebuilt-debian/**"]
+
+jobs:
+  prebuilt-debian-validate-amd64:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v6
+      - name: Validate prebuilt dependencies for amd64
+        id: validate-amd64
+        uses: ./.github/actions/prebuilt-debian
+        with:
+          architecture: amd64
+
+      - name: Check extracted files for amd64
+        run: |
+          if [ ! -f "${{ steps.validate-amd64.outputs.path }}/better_sqlite3.node" ]; then
+            echo "better_sqlite3.node not found for amd64!"
+            exit 1
+          fi
+  prebuilt-debian-validate-arm64:
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v6
+      - name: Validate prebuilt dependencies for arm64
+        id: validate-arm64
+        uses: ./.github/actions/prebuilt-debian
+        with:
+          architecture: arm64
+
+      - name: Check extracted files for arm64
+        run: |
+          if [ ! -f "${{ steps.validate-arm64.outputs.path }}/better_sqlite3.node" ]; then
+            echo "better_sqlite3.node not found for arm64!"
+            exit 1
+          fi

.github/workflows/on-pr-renovate-validate.yml

@@ -0,0 +1,19 @@
+name: "[Renovate] Validate configuration"
+
+permissions:
+  contents: read
+
+on:
+  pull_request:
+    branches: ["*"]
+    paths: [".github/renovate.json5"]
+
+jobs:
+  renovate-validate:
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - uses: actions/checkout@v6
+      - run: |
+          npx --yes --package renovate -- \
+              renovate-config-validator --strict .github/renovate.json5

.github/workflows/on-release.yml

@@ -0,0 +1,87 @@
+permissions: {}
+
+on:
+  release:
+    types: [released]
+
+jobs:
+  trigger-docs-release:
+    name: Trigger Documentation Release
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - name: Obtain token
+        id: obtainToken
+        uses: actions/create-github-app-token@v3
+        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
+    timeout-minutes: 5
+    steps:
+      - name: Obtain token
+        id: obtainToken
+        uses: actions/create-github-app-token@v3
+        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@v6
+        with:
+          token: ${{ steps.obtainToken.outputs.token }}
+          ref: dev
+      - name: Setup
+        uses: ./tooling/github/setup
+      - run: pnpm run scripts:update-bug-report-template
+        env:
+          NEXT_VERSION: ${{ github.event.release.tag_name }}
+
+      - name: Create Pull Request
+        id: create-pull-request
+        uses: peter-evans/create-pull-request@v8
+        with:
+          add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
+          commit-message: "chore: update bug report template"
+          author: Releases Homarr <175486441+homarr-releases[bot]@users.noreply.github.com>
+          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

@@ -0,0 +1,27 @@
+permissions:
+  statuses: write
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  skip-stability-days:
+    if: ${{ !startsWith(github.head_ref, 'renovate/') && github.event.pull_request.head.repo.full_name == github.repository }}
+    name: Skip Stability Days
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    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

@@ -0,0 +1,74 @@
+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 }}"
+
+permissions:
+  contents: read
+jobs:
+  update-contributors:
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    strategy:
+      matrix:
+        node-version: [22]
+    steps:
+      - name: Obtain token
+        id: obtainToken
+        uses: actions/create-github-app-token@v3
+        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@v6
+        env:
+          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
+
+      - uses: pnpm/action-setup@v6
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v6
+        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@v8
+        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

@@ -0,0 +1,65 @@
+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
+    timeout-minutes: 5
+    steps:
+      - name: Obtain token
+        id: obtainToken
+        uses: actions/create-github-app-token@v3
+        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@v6
+        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@v8
+        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

.gitignore

@@ -67,4 +67,8 @@ e2e/shared/tmp
 apps/nextjs/public/images/background.png
 
 # next-intl
-en.d.json.ts
+en.d.json.ts
+
+# personal agent config
+AGENTS.md
+.opencode

.npmrc

@@ -3,3 +3,4 @@
 # @link https://docs.expo.dev/guides/monorepos/#common-issues
 node-linker=hoisted
 strict-peer-dependencies=false
+engine-strict=true

.nvmrc

@@ -1 +1 @@
-22.14.0
+24.15.0

.releaserc.json

@@ -44,6 +44,7 @@
       {
         "successComment": false,
         "failComment": false,
+        "draftRelease": true,
         "releaseBodyTemplate": "<%= _.truncate(nextRelease.notes, { 'length': 124000, 'omission': '' }) %>"
       }
     ]

.run/db_migration_postgresql_generate.run copy.xml

@@ -0,0 +1,13 @@
+<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,6 +26,7 @@
     "Sabnzbd",
     "SeDemal",
     "Sonarr",
+    "sslverify",
     "superjson",
     "tabler",
     "trpc",

CODEOWNERS

@@ -1 +1,9 @@
+# ── CODEOWNERS ───────────────────────────────────────
 * @homarr-labs/maintainers
+
+# Exempt Renovate‑managed files (no owners)
+package.json
+package-lock.json
+pnpm-lock.yaml
+Dockerfile
+docker-compose.yml

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22.14.0-alpine AS base
+FROM node:24.15.0-alpine AS base
 
 FROM base AS builder
 RUN apk add --no-cache libc6-compat
@@ -10,8 +10,6 @@ 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
@@ -19,8 +17,7 @@ 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
@@ -46,8 +43,6 @@ RUN mkdir -p /var/cache/nginx && \
 COPY --from=builder /app/apps/nextjs/next.config.ts .
 COPY --from=builder /app/apps/nextjs/package.json .
 
-COPY --from=builder /app/apps/tasks/tasks.cjs ./apps/tasks/tasks.cjs
-COPY --from=builder /app/apps/websocket/wssServer.cjs ./apps/websocket/wssServer.cjs
 COPY --from=builder /app/node_modules/better-sqlite3/build/Release/better_sqlite3.node /app/build/better_sqlite3.node
 
 COPY --from=builder /app/packages/db/migrations ./db/migrations
@@ -58,7 +53,7 @@ COPY --from=builder /app/apps/nextjs/.next/standalone ./
 COPY --from=builder /app/apps/nextjs/.next/static ./apps/nextjs/.next/static
 COPY --from=builder /app/apps/nextjs/public ./apps/nextjs/public
 COPY scripts/run.sh ./run.sh
-COPY --chmod=777 scripts/entrypoint.sh ./entrypoint.sh
+COPY --chmod=755 scripts/entrypoint.sh ./entrypoint.sh
 COPY packages/redis/redis.conf /app/redis.conf
 COPY nginx.conf /etc/nginx/templates/nginx.conf
 
@@ -67,6 +62,7 @@ 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
 
-| Version | Supported          |
-| ------- | ------------------ |
-| >1.0.0  | :white_check_mark: |
-| <1.0.0  | :x:                |
+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.
 
 ## 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

@@ -1,8 +1,8 @@
 // Importing env files here to validate on build
 import "@homarr/auth/env";
-import "@homarr/db/env";
+import "@homarr/core/infrastructure/db/env";
 import "@homarr/common/env";
-import "@homarr/log/env";
+import "@homarr/core/infrastructure/logs/env";
 import "@homarr/docker/env";
 
 import type { NextConfig } from "next";
@@ -17,37 +17,60 @@ 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 },
+  // react compiler breaks mantine-react-table, so disabled for now
+  //reactCompiler: true,
+  /** We already do typechecking as separate tasks in CI */
   typescript: { ignoreBuildErrors: true },
-  webpack: (config: WebpackConfig, { isServer }) => {
-    if (isServer) {
-      config.module.rules.push({
-        test: /\.node$/,
-        loader: "node-loader",
-      });
-    }
-
-    return config;
-  },
+  /**
+   * dockerode is required in the external server packages because of https://github.com/homarr-labs/homarr/issues/612
+   * isomorphic-dompurify and jsdom are required, see https://github.com/kkomelin/isomorphic-dompurify/issues/356
+   */
+  serverExternalPackages: ["dockerode", "isomorphic-dompurify", "jsdom"],
   experimental: {
     optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
+    turbopackFileSystemCacheForDev: true,
   },
   transpilePackages: ["@homarr/ui", "@homarr/notifications", "@homarr/modals", "@homarr/spotlight", "@homarr/widgets"],
   images: {
-    domains: ["cdn.jsdelivr.net"],
+    localPatterns: [
+      {
+        pathname: "/**",
+        search: "",
+      },
+    ],
+  },
+  // 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(),
+          },
+        ],
+      },
+    ];
   },
 };
 

apps/nextjs/package.json

@@ -15,26 +15,26 @@
   },
   "prettier": "@homarr/prettier-config",
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
+    "@dnd-kit/core": "catalog:",
+    "@dnd-kit/modifiers": "catalog:",
+    "@dnd-kit/sortable": "catalog:",
+    "@dnd-kit/utilities": "catalog:",
     "@homarr/analytics": "workspace:^0.1.0",
     "@homarr/api": "workspace:^0.1.0",
     "@homarr/auth": "workspace:^0.1.0",
     "@homarr/boards": "workspace:^0.1.0",
-    "@homarr/certificates": "workspace:^0.1.0",
     "@homarr/common": "workspace:^0.1.0",
+    "@homarr/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",
     "@homarr/docker": "workspace:^0.1.0",
     "@homarr/form": "workspace:^0.1.0",
     "@homarr/forms-collection": "workspace:^0.1.0",
-    "@homarr/gridstack": "^1.12.0",
+    "@homarr/gridstack": "catalog:",
     "@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",
     "@homarr/modals-collection": "workspace:^0.1.0",
     "@homarr/notifications": "workspace:^0.1.0",
@@ -44,63 +44,68 @@
     "@homarr/server-settings": "workspace:^0.1.0",
     "@homarr/settings": "workspace:^0.1.0",
     "@homarr/spotlight": "workspace:^0.1.0",
+    "@homarr/tasks": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
+    "@homarr/websocket": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^7.17.4",
-    "@mantine/core": "^7.17.4",
-    "@mantine/dropzone": "^7.17.4",
-    "@mantine/hooks": "^7.17.4",
-    "@mantine/modals": "^7.17.4",
-    "@mantine/tiptap": "^7.17.4",
-    "@million/lint": "1.0.14",
-    "@tabler/icons-react": "^3.31.0",
-    "@tanstack/react-query": "^5.74.4",
-    "@tanstack/react-query-devtools": "^5.74.4",
-    "@tanstack/react-query-next-experimental": "^5.74.4",
-    "@trpc/client": "^11.1.0",
-    "@trpc/next": "^11.1.0",
-    "@trpc/react-query": "^11.1.0",
-    "@trpc/server": "^11.1.0",
-    "@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.13",
-    "dotenv": "^16.5.0",
-    "flag-icons": "^7.3.2",
-    "glob": "^11.0.1",
-    "jotai": "^2.12.3",
-    "mantine-react-table": "2.0.0-beta.9",
-    "next": "15.3.1",
-    "postcss-preset-mantine": "^1.17.0",
-    "prismjs": "^1.30.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-error-boundary": "^5.0.0",
-    "react-simple-code-editor": "^0.14.1",
-    "sass": "^1.86.3",
-    "superjson": "2.2.2",
-    "swagger-ui-react": "^5.21.0",
-    "use-deep-compare-effect": "^1.8.1",
-    "zod": "^3.24.3"
+    "@mantine/colors-generator": "catalog:",
+    "@mantine/core": "catalog:",
+    "@mantine/dropzone": "catalog:",
+    "@mantine/hooks": "catalog:",
+    "@mantine/modals": "catalog:",
+    "@mantine/tiptap": "catalog:",
+    "@million/lint": "catalog:",
+    "@tabler/icons-react": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@tanstack/react-query-devtools": "catalog:",
+    "@tanstack/react-query-next-experimental": "catalog:",
+    "@trpc/client": "catalog:",
+    "@trpc/next": "catalog:",
+    "@trpc/react-query": "catalog:",
+    "@trpc/server": "catalog:",
+    "@xterm/addon-canvas": "catalog:",
+    "@xterm/addon-fit": "catalog:",
+    "@xterm/xterm": "catalog:",
+    "babel-plugin-react-compiler": "catalog:",
+    "chroma-js": "catalog:",
+    "clsx": "catalog:",
+    "dayjs": "catalog:",
+    "dotenv": "catalog:",
+    "flag-icons": "catalog:",
+    "glob": "catalog:",
+    "isomorphic-dompurify": "catalog:",
+    "jotai": "catalog:",
+    "mantine-react-table": "catalog:",
+    "next": "catalog:",
+    "postcss-preset-mantine": "catalog:",
+    "prismjs": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-error-boundary": "catalog:",
+    "react-simple-code-editor": "catalog:",
+    "sass": "catalog:",
+    "superjson": "catalog:",
+    "swagger-ui-react": "catalog:",
+    "use-deep-compare-effect": "catalog:",
+    "yaml": "catalog:",
+    "zod": "catalog:"
   },
   "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.14.1",
-    "@types/prismjs": "^1.26.5",
-    "@types/react": "19.1.2",
-    "@types/react-dom": "19.1.2",
-    "@types/swagger-ui-react": "^5.18.0",
-    "concurrently": "^9.1.2",
-    "eslint": "^9.25.0",
-    "node-loader": "^2.1.0",
-    "prettier": "^3.5.3",
-    "typescript": "^5.8.3"
+    "@types/chroma-js": "catalog:",
+    "@types/node": "catalog:",
+    "@types/prismjs": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@types/swagger-ui-react": "catalog:",
+    "concurrently": "catalog:",
+    "eslint": "catalog:",
+    "node-loader": "catalog:",
+    "prettier": "catalog:",
+    "typescript": "catalog:"
   }
 }

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

@@ -2,7 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
-import type { z } from "zod";
+import type { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
 import { useZodForm } from "@homarr/form";
@@ -64,16 +64,23 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
     <Stack gap="xl">
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack gap="lg">
-          <TextInput label={t("field.username.label")} autoComplete="off" {...form.getInputProps("username")} />
+          <TextInput
+            label={t("field.username.label")}
+            id="username"
+            autoComplete="username"
+            {...form.getInputProps("username")}
+          />
           <CustomPasswordInput
             withPasswordRequirements
             label={t("field.password.label")}
+            id="password"
             autoComplete="new-password"
             {...form.getInputProps("password")}
           />
 
           <PasswordInput
             label={t("field.passwordConfirm.label")}
+            id="password-confirm"
             autoComplete="new-password"
             {...form.getInputProps("confirmPassword")}
           />

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 } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Anchor, Button, Card, Code, Collapse, Divider, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { z } from "zod";
+import { z } from "zod/v4";
 
 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -13,8 +13,11 @@ import type { useForm } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
+import { sanitizeRedirectionUrl } from "@homarr/validation/redirection-url";
 import { userSignInSchema } from "@homarr/validation/user";
 
+type Provider = "credentials" | "ldap" | "oidc";
+
 interface LoginFormProps {
   providers: string[];
   oidcClientName: string;
@@ -26,6 +29,8 @@ const extendedValidation = userSignInSchema.extend({ provider: z.enum(["credenti
 
 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, {
@@ -39,22 +44,34 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
   const credentialInputsVisible = providers.includes("credentials") || providers.includes("ldap");
 
   const onSuccess = useCallback(
-    async (response: Awaited<ReturnType<typeof signIn>>) => {
-      if (response && (!response.ok || response.error)) {
+    async (provider: Provider, response: Awaited<ReturnType<typeof signIn>>) => {
+      if (!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.
-      if (response) {
-        await revalidatePathActionAsync("/");
-        router.push(callbackUrl);
-      }
+      await revalidatePathActionAsync("/");
+      router.push(sanitizeRedirectionUrl(callbackUrl));
     },
     [t, router, callbackUrl],
   );
@@ -70,14 +87,14 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
   }, [t]);
 
   const signInAsync = useCallback(
-    async (provider: string, options?: Parameters<typeof signIn>[1]) => {
+    async (provider: Provider, options?: Parameters<typeof signIn>[1]) => {
       setIsPending(true);
       await signIn(provider, {
         ...options,
         redirect: false,
         callbackUrl: new URL(callbackUrl, window.location.href).href,
       })
-        .then(onSuccess)
+        .then((response) => onSuccess(provider, response))
         .catch(onError);
     },
     [setIsPending, onSuccess, onError, callbackUrl],
@@ -86,11 +103,12 @@ 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]);
+  }, [signInAsync, isOidcAutoLoginEnabled, isPending, isError]);
 
   return (
     <Stack gap="xl">
@@ -99,8 +117,18 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
           <>
             <form onSubmit={form.onSubmit((credentials) => void signInAsync(credentials.provider, credentials))}>
               <Stack gap="lg">
-                <TextInput label={t("field.username.label")} {...form.getInputProps("name")} />
-                <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
+                <TextInput
+                  label={t("field.username.label")}
+                  id="username"
+                  autoComplete="username"
+                  {...form.getInputProps("name")}
+                />
+                <PasswordInput
+                  label={t("field.password.label")}
+                  id="password"
+                  autoComplete="current-password"
+                  {...form.getInputProps("password")}
+                />
 
                 {providers.includes("credentials") && (
                   <Stack gap="sm">

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -4,6 +4,7 @@ import { Card, Center, Stack, Text, Title } from "@mantine/core";
 import { env } from "@homarr/auth/env";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
+import { sanitizeRedirectionUrl } from "@homarr/validation/redirection-url";
 
 import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
 import { LoginForm } from "./_login-form";
@@ -19,7 +20,7 @@ export default async function Login(props: LoginProps) {
   const session = await auth();
 
   if (session) {
-    redirect(searchParams.callbackUrl ?? "/");
+    redirect(sanitizeRedirectionUrl(searchParams.callbackUrl));
   }
 
   const t = await getScopedI18n("user.page.login");

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

@@ -4,18 +4,27 @@ 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 { createLogger } from "@homarr/core/infrastructure/logs";
+import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
+import type { WidgetKind } from "@homarr/definitions";
 import { getI18n } from "@homarr/translation/server";
+import { prefetchForKindAsync } from "@homarr/widgets/prefetch";
 
 import { createMetaTitle } from "~/metadata";
 import { createBoardLayout } from "../_layout-creator";
-import type { Board } from "../_types";
+import type { Board, Item } from "../_types";
 import { DynamicClientBoard } from "./_dynamic-client";
 import { BoardContentHeaderActions } from "./_header-actions";
 
+const logger = createLogger({ module: "createBoardContentPage" });
+
 export type Params = Record<string, unknown>;
 
 interface Props<TParams extends Params> {
@@ -31,14 +40,42 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
       getInitialBoardAsync: getInitialBoard,
     }),
     // eslint-disable-next-line no-restricted-syntax
-    page: async () => {
+    page: async ({ params }: { params: Promise<TParams> }) => {
       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 ErrorWithMetadata(
+              "Failed to prefetch widget",
+              { widgetKind: kind, itemCount: items.length },
+              { cause: error },
+            ),
+          );
+        });
+      }
+
       return (
-        <IntegrationProvider integrations={integrations}>
-          <DynamicClientBoard />
-        </IntegrationProvider>
+        <HydrationBoundary state={dehydrate(queryClient)}>
+          <IntegrationProvider integrations={integrations}>
+            <DynamicClientBoard />
+          </IntegrationProvider>
+        </HydrationBoundary>
       );
     },
     generateMetadataAsync: async ({ params }: { params: Promise<TParams> }): Promise<Metadata> => {

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

@@ -1,8 +1,6 @@
 "use client";
 
-import type { MouseEvent } from "react";
 import { useCallback, useEffect } from "react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Group, Menu, ScrollArea } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
@@ -20,14 +18,17 @@ import {
 } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { env } from "@homarr/common/env";
+import { 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 { Link } from "@homarr/ui";
 
 import { useItemActions } from "~/components/board/items/item-actions";
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";
@@ -43,7 +44,7 @@ export const BoardContentHeaderActions = () => {
   const { hasChangeAccess } = useBoardPermissions(board);
 
   if (!hasChangeAccess) {
-    return null; // Hide actions for user without access
+    return <SelectBoardsMenu />;
   }
 
   return (
@@ -62,6 +63,7 @@ export const BoardContentHeaderActions = () => {
 };
 
 const AddMenu = () => {
+  const { data: session } = useSession();
   const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
   const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
   const { openModal: openAppSelectModal } = useModalAction(AppSelectModal);
@@ -96,12 +98,13 @@ const AddMenu = () => {
 
   const handleSelectApp = useCallback(() => {
     openAppSelectModal({
-      onSelect: (appId) => {
+      onSelect: (app) => {
         createItem({
           kind: "app",
-          options: { appId },
+          options: { appId: app.id },
         });
       },
+      withCreate: session?.user.permissions.includes("app-create") ?? false,
     });
   }, [openAppSelectModal, createItem]);
 
@@ -166,7 +169,7 @@ const EditModeMenu = () => {
     open();
   }, [board, isEditMode, saveBoard, open]);
 
-  useHotkeys([["mod+e", toggle]]);
+  useHotkeys([[hotkeys.toggleBoardEdit, toggle]]);
   usePreventLeaveWithDirty(isEditMode);
 
   return (
@@ -204,17 +207,22 @@ const SelectBoardsMenu = () => {
   );
 };
 
+const anchorSelector = "a[href]:not([target='_blank'])";
 const usePreventLeaveWithDirty = (isDirty: boolean) => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
   const router = useRouter();
 
   useEffect(() => {
-    const handleClick = (event: MouseEvent<HTMLElement>) => {
+    if (!isDirty) return;
+
+    const handleClick = (event: Event) => {
       const target = (event.target as HTMLElement).closest("a");
 
-      if (!target) return;
-      if (!isDirty) return;
+      if (!target) {
+        console.warn("No anchor element found for click event", event);
+        return;
+      }
 
       event.preventDefault();
 
@@ -231,35 +239,30 @@ const usePreventLeaveWithDirty = (isDirty: boolean) => {
     };
 
     const handlePopState = (event: Event) => {
-      if (isDirty) {
-        window.history.pushState(null, document.title, window.location.href);
-        event.preventDefault();
-      } else {
-        window.history.back();
-      }
+      window.history.pushState(null, document.title, window.location.href);
+      event.preventDefault();
     };
 
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-      if (!isDirty) return;
       if (env.NODE_ENV === "development") return; // Allow to reload in development
 
       event.preventDefault();
       event.returnValue = true;
     };
 
-    document.querySelectorAll("a").forEach((link) => {
-      link.addEventListener("click", handleClick as never);
+    const anchors = document.querySelectorAll(anchorSelector);
+    anchors.forEach((link) => {
+      link.addEventListener("click", handleClick);
     });
     window.addEventListener("popstate", handlePopState);
     window.addEventListener("beforeunload", handleBeforeUnload);
 
     return () => {
-      document.querySelectorAll("a").forEach((link) => {
-        link.removeEventListener("click", handleClick as never);
-        window.removeEventListener("popstate", handlePopState);
+      anchors.forEach((link) => {
+        link.removeEventListener("click", handleClick);
       });
+      window.removeEventListener("popstate", handlePopState);
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDirty]);
 };

apps/nextjs/src/app/[locale]/boards/(content)/_ready-context.tsx

@@ -27,7 +27,6 @@ export const BoardReadyProvider = ({ children }: PropsWithChildren) => {
 
   useEffect(() => {
     setReadySections((previous) => previous.filter((id) => board.sections.some((section) => section.id === id)));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [board.sections.length, setReadySections]);
 
   const markAsReady = useCallback((id: string) => {

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

@@ -17,6 +17,7 @@ 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";
@@ -102,12 +103,25 @@ export const ColorSettingsContent = ({ board }: Props) => {
             </InputWrapper>
           </Grid.Col>
           <Grid.Col span={{ sm: 12, md: 6 }}>
-            <ColorInput
-              label={t("board.field.iconColor.label")}
-              format="hex"
-              swatches={Object.values(theme.colors).map((color) => color[6])}
-              {...form.getInputProps("iconColor")}
-            />
+            <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 }}>
             <Select
               label={t("board.field.itemRadius.label")}
               description={t("board.field.itemRadius.description")}

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

@@ -120,11 +120,14 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
               />
               {session?.user.permissions.includes("media-upload") && (
                 <UploadMedia
-                  onSuccess={({ url }) =>
+                  onSuccess={(medias) => {
+                    const first = medias.at(0);
+                    if (!first) return;
+
                     startTransition(() => {
-                      form.setFieldValue("backgroundImageUrl", url);
-                    })
-                  }
+                      form.setFieldValue("backgroundImageUrl", first.url);
+                    });
+                  }}
                 >
                   {({ onClick, loading }) => (
                     <ActionIcon onClick={onClick} loading={loading} mt={24} size={36} variant="default">

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import { Button, Grid, Group, Loader, Stack, TextInput } from "@mantine/core";
-import { useDebouncedValue, useDocumentTitle, useFavicon } from "@mantine/hooks";
+import { useDebouncedValue, useDocumentTitle } from "@mantine/hooks";
 
 import { useUpdateBoard } from "@homarr/boards/updater";
 import { useZodForm } from "@homarr/form";
@@ -10,6 +10,7 @@ import { IconPicker } from "@homarr/forms-collection";
 import { useI18n } from "@homarr/translation/client";
 import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
 
+import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
 import { createMetaTitle } from "~/metadata";
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -53,7 +54,6 @@ export const GeneralSettingsContent = ({ board }: Props) => {
   );
 
   useLogoPreview(form.values.logoImageUrl);
-  useFaviconPreview(form.values.faviconImageUrl);
   const metaTitleStatus = useMetaTitlePreview(form.values.metaTitle);
 
   // Cleanup for not applied changes of the page title and logo image URL
@@ -75,6 +75,7 @@ export const GeneralSettingsContent = ({ board }: Props) => {
           pageTitle: values.pageTitle,
           logoImageUrl: values.logoImageUrl,
         };
+        updateFavicon(values.faviconImageUrl ?? homarrLogoPath);
         savePartialSettings({
           id: board.id,
           ...values,
@@ -146,7 +147,13 @@ const useMetaTitlePreview = (title: string | null) => {
   };
 };
 
-const useFaviconPreview = (url: string | null) => {
-  const [faviconDebounced] = useDebouncedValue(url ?? "", 500);
-  useFavicon(faviconDebounced);
+// Previously we used the useFavicon hook from Mantine
+// However if the user tried to click on a link to a different page
+// it caused an error "Cannot read properties of null (reading 'removeChild')"
+// Probably because the head element was null (https://github.com/mantinedev/mantine/blob/b90d9b81031f45f5d15e75f25138ed6477f65bce/packages/%40mantine/hooks/src/use-favicon/use-favicon.ts#L21)
+// See https://github.com/homarr-labs/homarr/issues/4905
+const updateFavicon = (url: string) => {
+  const link: HTMLLinkElement | null = document.querySelector('link[rel="icon"]');
+  if (!link) return;
+  link.href = url;
 };

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

@@ -3,7 +3,7 @@
 import { Button, Fieldset, Grid, Group, Input, NumberInput, Slider, Stack, Text, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { createId } from "@homarr/db/client";
+import { createId } from "@homarr/common";
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
 import { boardSaveLayoutsSchema } from "@homarr/validation/board";

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

@@ -61,6 +61,10 @@ 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

@@ -6,7 +6,7 @@ import { TRPCError } from "@trpc/server";
 import { auth } from "@homarr/auth/next";
 import { BoardProvider } from "@homarr/boards/context";
 import { EditModeProvider } from "@homarr/boards/edit-mode";
-import { logger } from "@homarr/log";
+import { createLogger } from "@homarr/core/infrastructure/logs";
 
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
@@ -18,6 +18,8 @@ import { CustomCss } from "./(content)/_custom-css";
 import { BoardReadyProvider } from "./(content)/_ready-context";
 import { BoardMantineProvider } from "./(content)/_theme";
 
+const logger = createLogger({ module: "createBoardLayout" });
+
 interface CreateBoardLayoutProps<TParams extends Params> {
   headerActions: JSX.Element;
   getInitialBoardAsync: (params: TParams) => Promise<Board>;
@@ -45,6 +47,10 @@ 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/finish/init-finish.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import type { MantineColor } from "@mantine/core";
 import { Button, Card, Stack, Text } from "@mantine/core";
 import { IconBook2, IconCategoryPlus, IconLayoutDashboard, IconMailForward } from "@tabler/icons-react";
@@ -8,6 +7,7 @@ import { getMantineColor } from "@homarr/common";
 import { db } from "@homarr/db";
 import { createDocumentationLink } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 import type { TablerIcon } from "@homarr/ui";
 
 export const InitFinish = async () => {

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

@@ -2,7 +2,7 @@
 
 import { Button, Card, Stack, TextInput } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
-import type { z } from "zod";
+import type { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -12,7 +12,11 @@ import { groupCreateSchema } from "@homarr/validation/group";
 
 export const InitGroup = () => {
   const t = useI18n();
-  const { mutateAsync } = clientApi.group.createInitialExternalGroup.useMutation();
+  const { mutateAsync } = clientApi.group.createInitialExternalGroup.useMutation({
+    async onSuccess() {
+      await revalidatePathActionAsync("/init");
+    },
+  });
   const form = useZodForm(groupCreateSchema, {
     initialValues: {
       name: "",
@@ -21,9 +25,6 @@ export const InitGroup = () => {
 
   const handleSubmitAsync = async (values: z.infer<typeof groupCreateSchema>) => {
     await mutateAsync(values, {
-      async onSuccess() {
-        await revalidatePathActionAsync("/init");
-      },
       onError(error) {
         if (error.data?.code === "CONFLICT") {
           form.setErrors({ name: t("common.zod.errors.custom.groupNameTaken") });

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

@@ -1,9 +1,8 @@
 "use client";
 
-import { startTransition } from "react";
 import { Button, Card, Group, Stack, Switch, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
-import type { z } from "zod";
+import type { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -17,25 +16,15 @@ import { settingsInitSchema } from "@homarr/validation/settings";
 export const InitSettings = () => {
   const tSection = useScopedI18n("management.page.settings.section");
   const t = useI18n();
-  const { mutateAsync } = clientApi.serverSettings.initSettings.useMutation();
+  const { mutateAsync } = clientApi.serverSettings.initSettings.useMutation({
+    async onSuccess() {
+      await revalidatePathActionAsync("/init");
+    },
+  });
   const form = useZodForm(settingsInitSchema, { initialValues: defaultServerSettings });
 
-  form.watch("analytics.enableGeneral", ({ value }) => {
-    if (!value) {
-      startTransition(() => {
-        form.setFieldValue("analytics.enableWidgetData", false);
-        form.setFieldValue("analytics.enableIntegrationData", false);
-        form.setFieldValue("analytics.enableUserData", false);
-      });
-    }
-  });
-
   const handleSubmitAsync = async (values: z.infer<typeof settingsInitSchema>) => {
-    await mutateAsync(values, {
-      async onSuccess() {
-        await revalidatePathActionAsync("/init");
-      },
-    });
+    await mutateAsync(values);
   };
 
   return (
@@ -47,24 +36,6 @@ export const InitSettings = () => {
 
             <Stack gap="xs">
               <AnalyticsRow kind="general" {...form.getInputProps("analytics.enableGeneral", { type: "checkbox" })} />
-
-              <Stack gap="xs" ps="md" w="100%">
-                <AnalyticsRow
-                  kind="integrationData"
-                  disabled={!form.values.analytics.enableGeneral}
-                  {...form.getInputProps("analytics.enableWidgetData", { type: "checkbox" })}
-                />
-                <AnalyticsRow
-                  kind="widgetData"
-                  disabled={!form.values.analytics.enableGeneral}
-                  {...form.getInputProps("analytics.enableIntegrationData", { type: "checkbox" })}
-                />
-                <AnalyticsRow
-                  kind="usersData"
-                  disabled={!form.values.analytics.enableGeneral}
-                  {...form.getInputProps("analytics.enableUserData", { type: "checkbox" })}
-                />
-              </Stack>
             </Stack>
           </Stack>
         </Card>

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";
+import type { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
 import { signIn } from "@homarr/auth/client";
@@ -26,19 +26,19 @@ export const InitUserForm = () => {
 
   const handleSubmitAsync = async (values: FormType) => {
     await mutateAsync(values, {
-      async onSuccess() {
+      onSuccess() {
         showSuccessNotification({
           title: tUser("notification.success.title"),
           message: tUser("notification.success.message"),
         });
 
-        await signIn("credentials", {
+        void signIn("credentials", {
           name: values.username,
           password: values.password,
           redirect: false,
+        }).then(async () => {
+          await revalidatePathActionAsync("/init");
         });
-
-        await revalidatePathActionAsync("/init");
       },
       onError: (error) => {
         showErrorNotification({

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

@@ -7,6 +7,7 @@ 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";
@@ -22,6 +23,7 @@ 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";
@@ -87,7 +89,15 @@ export default async function Layout(props: {
     },
     (innerProps) => (
       <SettingsProvider
-        user={user}
+        user={
+          user
+            ? {
+                ...user,
+                // Convert type, because output schema is not smart enough to infer $type from drizzle
+                firstDayOfWeek: user.firstDayOfWeek as DayOfWeek,
+              }
+            : null
+        }
         serverSettings={{
           board: {
             homeBoardId: serverSettings.board.homeBoardId,
@@ -96,6 +106,7 @@ export default async function Layout(props: {
             forceDisableStatus: serverSettings.board.forceDisableStatus,
           },
           search: { defaultSearchEngineId: serverSettings.search.defaultSearchEngineId },
+          user: { enableGravatar: serverSettings.user.enableGravatar },
         }}
         {...innerProps}
       />
@@ -109,10 +120,12 @@ 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={(await props.params).locale}
+      lang={locale}
       dir={direction}
       data-mantine-color-scheme={colorScheme}
       style={{
@@ -123,6 +136,7 @@ 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,51 +1,32 @@
 import { Box, Grid, GridCol, Group, Image, Stack, Title } from "@mantine/core";
 
 import { splitToNChunks } from "@homarr/common";
+import { integrationDefs } from "@homarr/definitions";
+import { getScopedI18n } from "@homarr/translation/server";
 
 import classes from "./hero-banner.module.css";
 
-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 icons = Object.values(integrationDefs)
+  .filter((int) => int.name !== "Mock")
+  .map((int) => int.iconUrl);
 
 const countIconGroups = 3;
-const animationDurationInSeconds = 12;
+const animationDurationInSeconds = icons.length;
 const arrayInChunks = splitToNChunks(icons, countIconGroups);
+const gridSpan = 12 / countIconGroups;
 
-export const HeroBanner = () => {
-  const gridSpan = 12 / countIconGroups;
+export const HeroBanner = async () => {
+  const t = await getScopedI18n("management.page.home");
 
   return (
     <Box className={classes.bannerContainer} p={{ base: "lg", md: "3rem" }} bg="dark.6" pos="relative">
       <Stack gap={0}>
         <Title fz={{ base: "h4", md: "h2" }} c="dimmed">
-          Welcome back to your
+          {t("heroBanner.title")}
         </Title>
         <Group gap="xs" wrap="nowrap">
           <Image src="/logo/logo.png" w={{ base: 32, md: 40 }} h={{ base: 32, md: 40 }} />
-          <Title fz={{ base: "h3", md: "h1" }}>Homarr Board</Title>
+          <Title fz={{ base: "h3", md: "h1" }}>{t("heroBanner.subtitle", { app: "Homarr" })}</Title>
         </Group>
       </Stack>
       <Box visibleFrom="md" className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
@@ -61,12 +42,26 @@ export const HeroBanner = () => {
                   }}
                 >
                   {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image key={`grid-column-${columnIndex}-scroll-1-${index}`} src={icon} radius="md" w={50} h={50} />
+                    <Image
+                      key={`grid-column-${columnIndex}-scroll-1-${index}`}
+                      src={icon}
+                      radius="md"
+                      fit={"contain"}
+                      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" w={50} h={50} />
+                    <Image
+                      key={`grid-column-${columnIndex}-scroll-2-${index}`}
+                      src={icon}
+                      radius="md"
+                      fit={"contain"}
+                      w={50}
+                      h={50}
+                    />
                   ))}
                 </Stack>
               </GridCol>

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

@@ -1,3 +1,7 @@
 .contributorCard {
   background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
 }
+
+.dependencyCard:hover {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}

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

@@ -11,21 +11,40 @@ import {
   Center,
   Flex,
   Group,
-  List,
-  ListItem,
+  Kbd,
+  SimpleGrid,
   Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
   Text,
+  ThemeIcon,
   Title,
+  UnstyledButton,
 } from "@mantine/core";
-import { IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
+import {
+  IconKeyboard,
+  IconLanguage,
+  IconLibrary,
+  IconMoneybagHeart,
+  IconPackage,
+  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";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";
-import { getPackageAttributesAsync } from "~/versions/package-reader";
+import type { PackageJsonDependencies } from "~/versions/package-reader";
+import { getPackageVersion } from "~/versions/package-reader";
 import type githubContributorsJson from "../../../../../../../static-data/contributors.json";
+import type openCollectiveContributorsJson from "../../../../../../../static-data/opencollective-contributors.json";
 import type crowdinContributorsJson from "../../../../../../../static-data/translators.json";
 import classes from "./about.module.css";
 
@@ -48,7 +67,10 @@ const getHostAsync = async () => {
 export default async function AboutPage() {
   const baseServerUrl = `http://${await getHostAsync()}`;
   const t = await getScopedI18n("management.page.about");
-  const attributes = await getPackageAttributesAsync();
+  const version = getPackageVersion();
+  const dependencies = (await fetch(`${baseServerUrl}/api/about/dependencies`).then((res) =>
+    res.json(),
+  )) as PackageJsonDependencies;
   const githubContributors = (await fetch(`${baseServerUrl}/api/about/contributors/github`).then((res) =>
     res.json(),
   )) as typeof githubContributorsJson;
@@ -57,6 +79,10 @@ export default async function AboutPage() {
     res.json(),
   )) as typeof crowdinContributorsJson;
 
+  const openCollectiveContributors = (await fetch(`${baseServerUrl}/api/about/contributors/opencollective`).then(
+    (res) => res.json(),
+  )) as typeof openCollectiveContributorsJson;
+
   return (
     <div>
       <DynamicBreadcrumb />
@@ -67,7 +93,7 @@ export default async function AboutPage() {
             <Title order={1} tt="uppercase">
               Homarr
             </Title>
-            <Title order={2}>{t("version", { version: attributes.version })}</Title>
+            <Title order={2}>{t("version", { version })}</Title>
           </Stack>
         </Group>
       </Center>
@@ -122,31 +148,111 @@ export default async function AboutPage() {
             </Flex>
           </AccordionPanel>
         </AccordionItem>
+        <AccordionItem value="sponsors">
+          <AccordionControl icon={<IconMoneybagHeart size="1rem" />}>
+            <Stack gap={0}>
+              <Text>{t("accordion.sponsors.title")}</Text>
+              <Text size="sm" c="dimmed">
+                {t("accordion.sponsors.subtitle", {
+                  count: String(openCollectiveContributors.length),
+                })}
+              </Text>
+            </Stack>
+          </AccordionControl>
+          <AccordionPanel>
+            <Flex wrap="wrap" gap="xs">
+              {openCollectiveContributors.map((sponsor) => (
+                <GenericContributorLinkCard
+                  key={sponsor.slug}
+                  link={`https://opencollective.com/${sponsor.slug}`}
+                  image={sponsor.imageUrl}
+                  name={sponsor.name}
+                />
+              ))}
+            </Flex>
+          </AccordionPanel>
+        </AccordionItem>
         <AccordionItem value="libraries">
           <AccordionControl icon={<IconLibrary size="1rem" />}>
             <Stack gap={0}>
               <Text>{t("accordion.libraries.title")}</Text>
               <Text size="sm" c="dimmed">
                 {t("accordion.libraries.subtitle", {
-                  count: String(Object.keys(attributes.dependencies).length),
+                  count: String(Object.keys(dependencies).length),
                 })}
               </Text>
             </Stack>
           </AccordionControl>
           <AccordionPanel>
-            <List>
-              {Object.entries(attributes.dependencies)
+            <SimpleGrid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }} spacing="md">
+              {Object.entries(dependencies)
+                .filter(([, value]) => !value.includes("workspace:"))
                 .sort(([key1], [key2]) => key1.localeCompare(key2))
-                .map(([key, value]) => (
-                  <ListItem key={key}>
-                    {value.includes("workspace:") ? (
-                      <Text>{key}</Text>
-                    ) : (
-                      <a href={`https://www.npmjs.com/package/${key}`}>{key}</a>
-                    )}
-                  </ListItem>
+                .map(([name, version]) => (
+                  <UnstyledButton
+                    key={name}
+                    component="a"
+                    href={`https://www.npmjs.com/package/${name}`}
+                    target="_blank"
+                  >
+                    <Card withBorder radius="md" p="xs" className={classes.dependencyCard}>
+                      <Group gap="sm" wrap="nowrap">
+                        <ThemeIcon variant="light" size="lg" radius="md">
+                          <IconPackage size="1.5rem" stroke={1.5} />
+                        </ThemeIcon>
+
+                        <Stack gap={0}>
+                          <Text size="sm" fw="bold" lineClamp={1} title={name}>
+                            {name}
+                          </Text>
+                          <Text size="sm" c="dimmed">
+                            v{version.replace("^", "").replace("~", "")}
+                          </Text>
+                        </Stack>
+                      </Group>
+                    </Card>
+                  </UnstyledButton>
                 ))}
-            </List>
+            </SimpleGrid>
+          </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>

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

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

@@ -1,15 +1,15 @@
-import Link from "next/link";
+import { Fragment } from "react";
 import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
-import { z } from "zod";
+import { z } from "zod/v4";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
-import { SearchInput, TablePagination } from "@homarr/ui";
+import { Link, SearchInput, TablePagination } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
@@ -98,7 +98,12 @@ const AppCard = async ({ app }: AppCardProps) => {
             </Text>
             {app.description && (
               <Text size="sm" c="gray.6" lineClamp={4}>
-                {app.description}
+                {app.description.split("\n").map((line, index) => (
+                  <Fragment key={index}>
+                    {line}
+                    <br />
+                  </Fragment>
+                ))}
               </Text>
             )}
             {app.href && (

apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback } from "react";
-import Link from "next/link";
 import { Menu } from "@mantine/core";
 import { IconCopy, IconDeviceMobile, IconHome, IconSettings, IconTrash } from "@tabler/icons-react";
 
@@ -12,6 +11,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { DuplicateBoardModal } from "@homarr/modals-collection";
 import { useScopedI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import { useBoardPermissions } from "~/components/board/permissions/client";
 
@@ -84,9 +84,6 @@ export const BoardCardMenuDropdown = ({ board }: BoardCardMenuDropdownProps) =>
         id: board.id,
         name: board.name,
       },
-      onSuccess: async () => {
-        await revalidatePathActionAsync("/manage/boards");
-      },
     });
   }, [board.id, board.name, openDuplicateModal]);
 

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

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import {
   ActionIcon,
   Badge,
@@ -21,7 +20,7 @@ import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
-import { UserAvatar } from "@homarr/ui";
+import { Link, UserAvatar } from "@homarr/ui";
 
 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
 import { ManageContainer } from "~/components/manage/manage-container";

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

@@ -1,4 +1,15 @@
-import { IconGrid3x3, IconKey, IconPassword, IconServer, IconUser } from "@tabler/icons-react";
+import {
+  IconCode,
+  IconGrid3x3,
+  IconKey,
+  IconLink,
+  IconMessage,
+  IconPassword,
+  IconPasswordUser,
+  IconPlug,
+  IconServer,
+  IconUser,
+} from "@tabler/icons-react";
 
 import type { IntegrationSecretKind } from "@homarr/definitions";
 import type { TablerIcon } from "@homarr/ui";
@@ -9,4 +20,12 @@ 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, TextInput } from "@mantine/core";
+import { PasswordInput, Textarea, 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>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   error?: string;
 }
 
@@ -31,6 +31,19 @@ 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
@@ -45,6 +58,21 @@ 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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,333 @@
+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

@@ -0,0 +1,6 @@
+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,82 +1,110 @@
 "use client";
 
-import Link from "next/link";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Button, Fieldset, Group, Stack, TextInput } from "@mantine/core";
-import type { z } from "zod";
+import { Alert, Anchor, Button, ButtonGroup, Fieldset, Group, Stack, Text, TextInput } from "@mantine/core";
+import { IconInfoCircle, IconPencil, IconPlus, IconUnlink } from "@tabler/icons-react";
+import { z } from "zod/v4";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/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 { useConfirmModal, useModalAction } from "@homarr/modals";
+import { AppSelectModal } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 import { integrationUpdateSchema } from "@homarr/validation/integration";
 
 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"];
 }
 
+const formSchema = integrationUpdateSchema.omit({ id: true, appId: true }).and(
+  z.object({
+    app: z
+      .object({
+        id: z.string(),
+        name: z.string(),
+        iconUrl: z.string(),
+        href: z.string().nullable(),
+      })
+      .nullable(),
+  }),
+);
+
 export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
-  const secretsKinds =
+  const allSecretKinds = getAllSecretKindOptions(integration.kind);
+
+  const initialSecretsKinds =
     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(formSchema, {
     initialValues: {
       name: integration.name,
       url: integration.url,
-      secrets: secretsKinds.map((kind) => ({
+      secrets: initialSecretsKinds.map((kind) => ({
         kind,
         value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
       })),
+      app: integration.app ?? null,
     },
   });
   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 handleSubmitAsync = async ({ app, ...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,
         })),
+        appId: app?.id ?? null,
       },
       {
-        onSuccess: () => {
+        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;
+          }
+
           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: (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;
-          }
-
+        onError: () => {
           showErrorNotification({
             title: t("integration.page.edit.notification.error.title"),
             message: t("integration.page.edit.notification.error.message"),
@@ -86,48 +114,82 @@ 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))}>
+    <form onSubmit={form.onSubmit(async (values) => await handleSubmitAsync(values))}>
       <Stack>
         <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
 
-        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        {hasUrlSecret ? null : (
+          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        )}
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
-            {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);
+            {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);
+                          },
+                        });
+                      })
                     }
-                    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>
-            ))}
+                  >
+                    <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>
+            )}
           </Stack>
         </Fieldset>
 
+        <IntegrationLinkApp value={form.values.app} onChange={(app) => form.setFieldValue("app", app)} />
+
+        {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")}
@@ -141,4 +203,80 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   );
 };
 
-type FormType = Omit<z.infer<typeof integrationUpdateSchema>, "id">;
+type FormType = z.infer<typeof formSchema>;
+
+interface IntegrationAppSelectProps {
+  value: FormType["app"];
+  onChange: (app: FormType["app"]) => void;
+}
+
+const IntegrationLinkApp = ({ value, onChange }: IntegrationAppSelectProps) => {
+  const { openModal } = useModalAction(AppSelectModal);
+  const t = useI18n();
+  const { data: session } = useSession();
+  const canCreateApps = session?.user.permissions.includes("app-create") ?? false;
+
+  const handleChange = () =>
+    openModal(
+      {
+        onSelect: onChange,
+        withCreate: canCreateApps,
+      },
+      {
+        title: t("integration.page.edit.app.action.select"),
+      },
+    );
+
+  if (!value) {
+    return (
+      <Button
+        variant="subtle"
+        color="gray"
+        leftSection={<IconPlus size={16} stroke={1.5} />}
+        fullWidth
+        onClick={handleChange}
+      >
+        {t("integration.page.edit.app.action.add")}
+      </Button>
+    );
+  }
+
+  return (
+    <Fieldset legend={t("integration.field.app.sectionTitle")}>
+      <Group justify="space-between">
+        <Group gap="sm">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={value.iconUrl} alt={value.name} width={32} height={32} />
+          <Stack gap={0}>
+            <Text size="sm" fw="bold">
+              {value.name}
+            </Text>
+            {value.href !== null && (
+              <Anchor href={value.href} target="_blank" rel="noopener noreferrer" size="sm">
+                {value.href}
+              </Anchor>
+            )}
+          </Stack>
+        </Group>
+        <ButtonGroup>
+          <Button
+            variant="subtle"
+            color="gray"
+            leftSection={<IconUnlink size={16} stroke={1.5} />}
+            onClick={() => onChange(null)}
+          >
+            {t("integration.page.edit.app.action.remove")}
+          </Button>
+          <Button
+            variant="subtle"
+            color="gray"
+            leftSection={<IconPencil size={16} stroke={1.5} />}
+            onClick={handleChange}
+          >
+            {t("common.action.change")}
+          </Button>
+        </ButtonGroup>
+      </Group>
+    </Fieldset>
+  );
+};

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

@@ -2,23 +2,27 @@
 
 import type { ChangeEvent } from "react";
 import React, { useMemo, useState } from "react";
-import Link from "next/link";
 import { Flex, Group, Menu, ScrollArea, Text, TextInput } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 
 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
-import { IntegrationAvatar } from "@homarr/ui";
+import { IntegrationAvatar, Link } from "@homarr/ui";
 
-export const IntegrationCreateDropdownContent = () => {
+interface IntegrationCreateDropdownContentProps {
+  enableMockIntegration: boolean;
+}
+
+export const IntegrationCreateDropdownContent = ({ enableMockIntegration }: IntegrationCreateDropdownContentProps) => {
   const t = useI18n();
   const [search, setSearch] = useState("");
 
   const filteredKinds = useMemo(() => {
-    return integrationKinds.filter((kind) =>
-      getIntegrationName(kind).toLowerCase().includes(search.toLowerCase().trim()),
-    );
-  }, [search]);
+    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]);
 
   const handleSearch = React.useCallback(
     (event: ChangeEvent<HTMLInputElement>) => setSearch(event.target.value),

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

@@ -1,7 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
-import Link from "next/link";
+import { startTransition, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
   Alert,
@@ -10,27 +9,40 @@ import {
   Collapse,
   Fieldset,
   Group,
+  Loader,
   SegmentedControl,
+  Select,
   Stack,
   Text,
   TextInput,
 } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
-import { z } from "zod";
+import { IconCheck, IconInfoCircle } from "@tabler/icons-react";
+import { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
-import { getAllSecretKindOptions, getIconUrl, getIntegrationName, integrationDefs } from "@homarr/definitions";
-import type { UseFormReturnType } from "@homarr/form";
+import type { Modify } from "@homarr/common/types";
+import type { IntegrationKind } from "@homarr/definitions";
+import {
+  getAllSecretKindOptions,
+  getIconUrl,
+  getIntegrationDefaultUrl,
+  getIntegrationName,
+  integrationDefs,
+} from "@homarr/definitions";
+import type { GetInputPropsReturnType, UseFormReturnType } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
-import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 import { appHrefSchema } from "@homarr/validation/app";
 import { integrationCreateSchema } from "@homarr/validation/integration";
 
 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>> & {
@@ -38,95 +50,95 @@ interface NewIntegrationFormProps {
   };
 }
 
-const formSchema = integrationCreateSchema.omit({ kind: true }).and(
+const formSchema = integrationCreateSchema.omit({ kind: true, app: true }).and(
   z.object({
-    createApp: z.boolean(),
+    hasApp: z.boolean(),
     appHref: appHrefSchema,
+    appId: z.string().nullable(),
   }),
 );
 
 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);
+  const { data: session } = useSession();
+  const canCreateApps = session?.user.permissions.includes("app-create") ?? 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: searchParams.url ?? "",
+      url,
       secrets: secretKinds[0].map((kind) => ({
         kind,
         value: "",
       })),
       attemptSearchEngineCreation: true,
-      createApp: false,
-      appHref: "",
-    },
-    onValuesChange(values, previous) {
-      if (values.createApp !== previous.createApp) {
-        setOpened(values.createApp);
-      }
+      hasApp: false,
+      appHref: url,
+      appId: null,
     },
   });
 
-  const { mutateAsync: createIntegrationAsync, isPending: isPendingIntegration } =
-    clientApi.integration.create.useMutation();
-  const { mutateAsync: createAppAsync, isPending: isPendingApp } = clientApi.app.create.useMutation();
-  const isPending = isPendingIntegration || isPendingApp;
+  const { mutateAsync: createIntegrationAsync, isPending } = clientApi.integration.create.useMutation({
+    async onSuccess() {
+      await revalidatePathActionAsync("/manage/integrations");
+    },
+  });
+  const [error, setError] = useState<null | AnyMappedTestConnectionError>(null);
+
+  const handleSubmitAsync = async ({ appId, appHref, hasApp, ...values }: FormType) => {
+    const url = hasUrlSecret
+      ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
+      : values.url;
+
+    const hasCustomHref = appHref !== null && appHref.trim().length >= 1;
+
+    const app = hasApp
+      ? appId !== null
+        ? { id: appId }
+        : {
+            name: values.name,
+            href: hasCustomHref ? appHref : url,
+            iconUrl: getIconUrl(searchParams.kind),
+            description: null,
+            pingUrl: url,
+          }
+      : undefined;
 
-  const handleSubmitAsync = async (values: FormType) => {
     await createIntegrationAsync(
       {
         kind: searchParams.kind,
         ...values,
+        url,
+        app,
       },
       {
-        async onSuccess() {
+        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;
+          }
+
           showSuccessNotification({
             title: t("integration.page.create.notification.success.title"),
             message: t("integration.page.create.notification.success.message"),
           });
 
-          if (!values.createApp) {
-            await revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
-            return;
-          }
-
-          const hasCustomHref = values.appHref !== null && values.appHref.trim().length >= 1;
-          await createAppAsync(
-            {
-              name: values.name,
-              href: hasCustomHref ? values.appHref : values.url,
-              iconUrl: getIconUrl(searchParams.kind),
-              description: null,
-              pingUrl: values.url,
-            },
-            {
-              async onSettled() {
-                await revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
-              },
-              onError() {
-                showErrorNotification({
-                  title: t("app.page.create.notification.error.title"),
-                  message: t("app.page.create.notification.error.message"),
-                });
-              },
-            },
-          );
+          router.push("/manage/integrations");
         },
-        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;
-          }
-
+        onError: () => {
           showErrorNotification({
             title: t("integration.page.create.notification.error.title"),
             message: t("integration.page.create.notification.error.message"),
@@ -143,7 +155,9 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
       <Stack>
         <TextInput withAsterisk label={t("integration.field.name.label")} autoFocus {...form.getInputProps("name")} />
 
-        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        {hasUrlSecret ? null : (
+          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
+        )}
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
@@ -164,6 +178,8 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
           </Stack>
         </Fieldset>
 
+        {error !== null && <IntegrationTestConnectionError error={error} url={form.values.url} />}
+
         {supportsSearchEngine && (
           <Checkbox
             label={t("integration.field.attemptSearchEngineCreation.label")}
@@ -174,15 +190,7 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
           />
         )}
 
-        <Checkbox
-          {...form.getInputProps("createApp", { type: "checkbox" })}
-          label={t("integration.field.createApp.label")}
-          description={t("integration.field.createApp.description")}
-        />
-
-        <Collapse in={opened}>
-          <TextInput placeholder={t("integration.field.appHref.placeholder")} {...form.getInputProps("appHref")} />
-        </Collapse>
+        <AppForm form={form} canCreateApps={canCreateApps} />
 
         <Group justify="end" align="center">
           <Button variant="default" component={Link} href="/manage/integrations">
@@ -197,40 +205,115 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
   );
 };
 
-interface SecretKindsSegmentedControlProps {
-  secretKinds: IntegrationSecretKind[][];
-  form: UseFormReturnType<FormType, (values: FormType) => FormType>;
-}
+type FormType = z.infer<typeof formSchema>;
 
-const SecretKindsSegmentedControl = ({ secretKinds, form }: SecretKindsSegmentedControlProps) => {
-  const t = useScopedI18n("integration.secrets");
+const AppForm = ({ form, canCreateApps }: { form: UseFormReturnType<FormType>; canCreateApps: boolean }) => {
+  const t = useI18n();
+  const checkboxInputProps = form.getInputProps("hasApp", { type: "checkbox" });
 
-  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("-"),
-  }));
+  return (
+    <>
+      <Checkbox
+        {...checkboxInputProps}
+        onChange={(event) => {
+          startTransition(() => {
+            form.setFieldValue("appHref", event.currentTarget.checked ? form.values.url : null);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            checkboxInputProps.onChange(event);
+          });
+        }}
+        label={t("integration.field.createApp.label")}
+        description={t("integration.field.createApp.description")}
+      />
 
-  const onChange = useCallback(
-    (value: string) => {
-      if (value === "empty") {
-        form.setFieldValue("secrets", []);
-        return;
-      }
+      <Collapse in={form.values.hasApp}>
+        <Fieldset legend={t("integration.field.app.sectionTitle")}>
+          <Stack gap="sm">
+            {canCreateApps && (
+              <SegmentedControl
+                data={(["new", "existing"] as const).map((value) => ({
+                  value,
+                  label: t(`integration.page.create.app.option.${value}.title`),
+                }))}
+                value={form.values.appHref === null ? "existing" : "new"}
+                onChange={(value) => {
+                  if (value === "existing") {
+                    form.setFieldValue("appId", null);
+                    form.setFieldValue("appHref", null);
+                  } else {
+                    form.setFieldValue("appId", null);
+                    form.setFieldValue("appHref", form.values.url);
+                  }
+                }}
+              />
+            )}
 
-      const kinds = value.split("-") as IntegrationSecretKind[];
-      const secrets = kinds.map((kind) => ({
-        kind,
-        value: "",
-      }));
-      form.setFieldValue("secrets", secrets);
-    },
-    [form],
+            {typeof form.values.appHref === "string" && canCreateApps ? (
+              <TextInput
+                placeholder={t("integration.field.appHref.placeholder")}
+                withAsterisk
+                label={t("integration.page.create.app.option.new.url.label")}
+                description={t("integration.page.create.app.option.new.url.description")}
+                {...form.getInputProps("appHref")}
+              />
+            ) : (
+              <IntegrationAppSelect {...form.getInputProps("appId")} />
+            )}
+          </Stack>
+        </Fieldset>
+      </Collapse>
+    </>
   );
-
-  return <SegmentedControl fullWidth data={secretKindGroups} onChange={onChange}></SegmentedControl>;
 };
 
-type FormType = z.infer<typeof formSchema>;
+type IntegrationAppSelectProps = Modify<
+  GetInputPropsReturnType,
+  {
+    value?: string | null;
+    onChange: (value: string | null) => void;
+  }
+>;
+
+const IntegrationAppSelect = ({ value, ...props }: IntegrationAppSelectProps) => {
+  const { data, isPending } = clientApi.app.selectable.useQuery();
+  const t = useI18n();
+
+  const appMap = new Map(data?.map((app) => [app.id, app] as const));
+
+  return (
+    <Select
+      withAsterisk
+      label={t("integration.page.create.app.option.existing.label")}
+      searchable
+      clearable
+      leftSection={
+        // eslint-disable-next-line @next/next/no-img-element
+        value ? <img width={20} height={20} src={appMap.get(value)?.iconUrl} alt={appMap.get(value)?.name} /> : null
+      }
+      renderOption={({ option, checked }) => (
+        <Group flex="1" gap="xs">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img width={20} height={20} src={appMap.get(option.value)?.iconUrl} alt={option.label} />
+          <Stack gap={0}>
+            <Text>{option.label}</Text>
+            <Text size="xs" c="dimmed">
+              {appMap.get(option.value)?.href}
+            </Text>
+          </Stack>
+          {checked && (
+            <IconCheck
+              style={{ marginInlineStart: "auto" }}
+              stroke={1.5}
+              color="currentColor"
+              opacity={0.6}
+              size={18}
+            />
+          )}
+        </Group>
+      )}
+      {...props}
+      data={data?.map((app) => ({ value: app.id, label: app.name }))}
+      rightSection={isPending ? <Loader size="sm" /> : null}
+    />
+  );
+};

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

@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
 import { Container, Group, Stack, Title } from "@mantine/core";
-import { z } from "zod";
+import { z } from "zod/v4";
 
 import { auth } from "@homarr/auth/next";
 import type { IntegrationKind } from "@homarr/definitions";

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

@@ -1,6 +1,5 @@
 import { Fragment } from "react";
 import type { PropsWithChildren } from "react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
   AccordionControl,
@@ -36,11 +35,12 @@ import { objectEntries } from "@homarr/common";
 import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
-import { CountBadge, IntegrationAvatar } from "@homarr/ui";
+import { CountBadge, IntegrationAvatar, Link } 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";
@@ -114,7 +114,7 @@ const IntegrationSelectMenu = ({ children }: PropsWithChildren) => {
     >
       {children}
       <MenuDropdown>
-        <IntegrationCreateDropdownContent />
+        <IntegrationCreateDropdownContent enableMockIntegration={env.UNSAFE_ENABLE_MOCK_INTEGRATION} />
       </MenuDropdown>
     </Menu>
   );

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

@@ -14,7 +14,7 @@ export const UploadMediaButton = () => {
   };
 
   return (
-    <UploadMedia onSettled={onSettledAsync}>
+    <UploadMedia onSettled={onSettledAsync} multiple>
       {({ 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

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import {
   ActionIcon,
@@ -16,7 +15,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { IconExternalLink } from "@tabler/icons-react";
-import { z } from "zod";
+import { z } from "zod/v4";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -25,7 +24,7 @@ import { humanFileSize } from "@homarr/common";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { createLocalImageUrl } from "@homarr/icons/local";
 import { getI18n } from "@homarr/translation/server";
-import { SearchInput, TablePagination, UserAvatar } from "@homarr/ui";
+import { Link, SearchInput, TablePagination, UserAvatar } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";

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

@@ -1,25 +1,16 @@
-import Link from "next/link";
+import type { Metadata } from "next";
 import { Card, Group, SimpleGrid, Space, Stack, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
-import { auth } from "@homarr/auth/next";
-import { isProviderEnabled } from "@homarr/auth/server";
 import { getScopedI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";
 import { HeroBanner } from "./_components/hero-banner";
 
-interface LinkProps {
-  title: string;
-  subtitle: string;
-  count: number;
-  href: string;
-  hidden?: boolean;
-}
-
-export async function generateMetadata() {
+export async function generateMetadata(): Promise<Metadata> {
   const t = await getScopedI18n("management");
 
   return {
@@ -29,78 +20,32 @@ export async function generateMetadata() {
 
 export default async function ManagementPage() {
   const statistics = await api.home.getStats();
-  const session = await auth();
   const t = await getScopedI18n("management.page.home");
 
-  const links: LinkProps[] = [
-    {
-      count: statistics.countBoards,
-      href: "/manage/boards",
-      subtitle: t("statisticLabel.boards"),
-      title: t("statistic.board"),
-    },
-    {
-      count: statistics.countUsers,
-      href: "/manage/users",
-      subtitle: t("statisticLabel.authentication"),
-      title: t("statistic.user"),
-      hidden: !session?.user.permissions.includes("admin"),
-    },
-    {
-      count: statistics.countInvites,
-      href: "/manage/users/invites",
-      subtitle: t("statisticLabel.authentication"),
-      title: t("statistic.invite"),
-      hidden: !isProviderEnabled("credentials") || !session?.user.permissions.includes("admin"),
-    },
-    {
-      count: statistics.countIntegrations,
-      href: "/manage/integrations",
-      subtitle: t("statisticLabel.resources"),
-      title: t("statistic.integration"),
-    },
-    {
-      count: statistics.countApps,
-      href: "/manage/apps",
-      subtitle: t("statisticLabel.resources"),
-      title: t("statistic.app"),
-      hidden: !session?.user,
-    },
-    {
-      count: statistics.countGroups,
-      href: "/manage/users/groups",
-      subtitle: t("statisticLabel.authorization"),
-      title: t("statistic.group"),
-      hidden: !session?.user.permissions.includes("admin"),
-    },
-  ];
   return (
     <>
       <DynamicBreadcrumb />
       <HeroBanner />
       <Space h="md" />
       <SimpleGrid cols={{ xs: 1, sm: 2, md: 3 }}>
-        {links.map(
-          (link) =>
-            !link.hidden && (
-              <Card component={Link} href={link.href} key={link.href} radius="lg">
-                <Group justify="space-between" wrap="nowrap">
-                  <Group wrap="nowrap">
-                    <Text size="2.4rem" fw="bolder">
-                      {link.count}
-                    </Text>
-                    <Stack gap={0}>
-                      <Text c="red" size="xs">
-                        {link.subtitle}
-                      </Text>
-                      <Text fw="bold">{link.title}</Text>
-                    </Stack>
-                  </Group>
-                  <IconArrowRight />
-                </Group>
-              </Card>
-            ),
-        )}
+        {statistics.map((statistic) => (
+          <Card component={Link} href={statistic.path} key={statistic.path} radius="lg">
+            <Group justify="space-between" wrap="nowrap">
+              <Group wrap="nowrap">
+                <Text size="2.4rem" fw="bolder">
+                  {statistic.count}
+                </Text>
+                <Stack gap={0}>
+                  <Text c="red" size="xs">
+                    {t(`statisticLabel.${statistic.subtitleKey}`)}
+                  </Text>
+                  <Text fw="bold">{t(`statistic.${statistic.titleKey}`)}</Text>
+                </Stack>
+              </Group>
+              <IconArrowRight />
+            </Group>
+          </Card>
+        ))}
       </SimpleGrid>
     </>
   );

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

@@ -1,10 +1,9 @@
 "use client";
 
-import Link from "next/link";
 import type { SegmentedControlItem } from "@mantine/core";
 import { Button, Fieldset, Grid, Group, SegmentedControl, Stack, Textarea, TextInput } from "@mantine/core";
 import { WidgetIntegrationSelect } from "node_modules/@homarr/widgets/src/widget-integration-select";
-import type { z } from "zod";
+import type { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
 import { searchEngineTypes } from "@homarr/definitions";
@@ -12,6 +11,7 @@ import { useZodForm } from "@homarr/form";
 import { IconPicker } from "@homarr/forms-collection";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 import { searchEngineManageSchema } from "@homarr/validation/search-engine";
 
 type FormType = z.infer<typeof searchEngineManageSchema>;

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

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

@@ -2,7 +2,7 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
-import type { z } from "zod";
+import type { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";

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

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

apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx

@@ -24,15 +24,6 @@ export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
         return;
       }
 
-      if (
-        !updatedValues.enableGeneral &&
-        (updatedValues.enableWidgetData || updatedValues.enableIntegrationData || updatedValues.enableUserData)
-      ) {
-        updatedValues.enableIntegrationData = false;
-        updatedValues.enableUserData = false;
-        updatedValues.enableWidgetData = false;
-      }
-
       void mutateAsync({
         settingsKey: "analytics",
         value: updatedValues,
@@ -54,30 +45,6 @@ export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
         <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
         <Stack>
           <SwitchSetting form={form} formKey="enableGeneral" title={t("general.title")} text={t("general.text")} />
-          <SwitchSetting
-            form={form}
-            formKey="enableIntegrationData"
-            ms="xl"
-            title={t("integrationData.title")}
-            text={t("integrationData.text")}
-            disabled={!form.values.enableGeneral}
-          />
-          <SwitchSetting
-            form={form}
-            formKey="enableWidgetData"
-            ms="xl"
-            title={t("widgetData.title")}
-            text={t("widgetData.text")}
-            disabled={!form.values.enableGeneral}
-          />
-          <SwitchSetting
-            form={form}
-            formKey="enableUserData"
-            ms="xl"
-            title={t("usersData.title")}
-            text={t("usersData.text")}
-            disabled={!form.values.enableGeneral}
-          />
         </Stack>
       </Card>
     </>

apps/nextjs/src/app/[locale]/manage/settings/_components/user-settings-form.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Switch } from "@mantine/core";
+
+import type { ServerSettings } from "@homarr/server-settings";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CommonSettingsForm } from "./common-form";
+
+export const UserSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["user"] }) => {
+  const tUser = useScopedI18n("management.page.settings.section.user");
+
+  return (
+    <CommonSettingsForm settingKey="user" defaultValues={defaultValues}>
+      {(form) => (
+        <>
+          <Switch
+            {...form.getInputProps("enableGravatar", { type: "checkbox" })}
+            label={tUser("enableGravatar.label")}
+            description={tUser("enableGravatar.description")}
+          />
+        </>
+      )}
+    </CommonSettingsForm>
+  );
+};

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

@@ -12,6 +12,7 @@ import { AppearanceSettingsForm } from "./_components/appearance-settings-form";
 import { BoardSettingsForm } from "./_components/board-settings-form";
 import { CultureSettingsForm } from "./_components/culture-settings-form";
 import { SearchSettingsForm } from "./_components/search-settings-form";
+import { UserSettingsForm } from "./_components/user-settings-form";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
@@ -42,6 +43,10 @@ export default async function SettingsPage() {
           <Title order={2}>{tSettings("section.board.title")}</Title>
           <BoardSettingsForm defaultValues={serverSettings.board} />
         </Stack>
+        <Stack>
+          <Title order={2}>{tSettings("section.user.title")}</Title>
+          <UserSettingsForm defaultValues={serverSettings.user} />
+        </Stack>
         <Stack>
           <Title order={2}>{tSettings("section.search.title")}</Title>
           <SearchSettingsForm defaultValues={serverSettings.search} />

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

@@ -2,7 +2,7 @@ import { headers } from "next/headers";
 import { notFound } from "next/navigation";
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from "@mantine/core";
 
-import { openApiDocument } from "@homarr/api";
+import { openApiDocument } from "@homarr/api/open-api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { extractBaseUrlFromHeaders } from "@homarr/common";
@@ -14,7 +14,7 @@ import { ApiKeysManagement } from "./components/api-keys";
 
 export async function generateMetadata() {
   const session = await auth();
-  if (!session?.user || !session.user.permissions.includes("admin")) {
+  if (!session?.user.permissions.includes("admin")) {
     return {};
   }
 
@@ -27,7 +27,7 @@ export async function generateMetadata() {
 
 export default async function ApiPage() {
   const session = await auth();
-  if (!session?.user || !session.user.permissions.includes("admin")) {
+  if (!session?.user.permissions.includes("admin")) {
     notFound();
   }
   const document = openApiDocument(extractBaseUrlFromHeaders(await headers()));

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

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

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

@@ -15,7 +15,11 @@ interface RemoveCertificateProps {
 
 export const RemoveCertificate = ({ fileName }: RemoveCertificateProps) => {
   const { openConfirmModal } = useConfirmModal();
-  const { mutateAsync } = clientApi.certificates.removeCertificate.useMutation();
+  const { mutateAsync } = clientApi.certificates.removeCertificate.useMutation({
+    async onSuccess() {
+      await revalidatePathActionAsync("/manage/tools/certificates");
+    },
+  });
   const t = useI18n();
 
   const handleClick = () => {
@@ -27,12 +31,11 @@ export const RemoveCertificate = ({ fileName }: RemoveCertificateProps) => {
         await mutateAsync(
           { fileName },
           {
-            async onSuccess() {
+            onSuccess() {
               showSuccessNotification({
                 title: t("certificate.action.remove.notification.success.title"),
                 message: t("certificate.action.remove.notification.success.message"),
               });
-              await revalidatePathActionAsync("/manage/tools/certificates");
             },
             onError() {
               showErrorNotification({

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

@@ -0,0 +1,55 @@
+"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({
+    async onSuccess() {
+      await revalidatePathActionAsync("/manage/tools/certificates/hostnames");
+    },
+  });
+  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, {
+          onSuccess() {
+            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

@@ -0,0 +1,99 @@
+import { X509Certificate } from "node:crypto";
+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/core/infrastructure/certificates";
+import { getI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
+
+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,14 +1,15 @@
 import { X509Certificate } from "node:crypto";
 import { notFound } from "next/navigation";
-import { Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
-import { IconCertificate, IconCertificateOff } from "@tabler/icons-react";
+import { Button, Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { IconAlertTriangle, IconCertificate, IconCertificateOff } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
 import { auth } from "@homarr/auth/next";
-import { loadCustomRootCertificatesAsync } from "@homarr/certificates/server";
 import { getMantineColor } from "@homarr/common";
+import { loadCustomRootCertificatesAsync } from "@homarr/core/infrastructure/certificates";
 import type { SupportedLanguage } from "@homarr/translation";
 import { getI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";
@@ -31,11 +32,27 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
   const t = await getI18n();
   const certificates = await loadCustomRootCertificatesAsync();
   const x509Certificates = certificates
-    .map((cert) => ({
-      ...cert,
-      x509: new X509Certificate(cert.content),
-    }))
-    .sort((certA, certB) => certA.x509.validToDate.getTime() - certB.x509.validToDate.getTime());
+    .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();
+    });
 
   return (
     <>
@@ -48,7 +65,12 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
             <Text>{t("certificate.page.list.description")}</Text>
           </Stack>
 
-          <AddCertificateButton />
+          <Group>
+            <Button variant="default" component={Link} href="/manage/tools/certificates/hostnames">
+              {t("certificate.page.list.toHostnames")}
+            </Button>
+            <AddCertificateButton />
+          </Group>
         </Group>
 
         {x509Certificates.length === 0 && (
@@ -57,32 +79,47 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
 
         <SimpleGrid cols={{ sm: 1, lg: 2, xl: 3 }} spacing="lg">
           {x509Certificates.map((cert) => (
-            <Card key={cert.x509.fingerprint} withBorder>
+            <Card key={cert.fileName} withBorder>
               <Group wrap="nowrap">
-                <IconCertificate
-                  color={getMantineColor(iconColor(cert.x509.validToDate), 6)}
-                  style={{ minWidth: 32 }}
-                  size={32}
-                  stroke={1.5}
-                />
+                {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}
+                  />
+                )}
                 <Stack flex={1} gap="xs" maw="calc(100% - 48px)">
                   <Group justify="space-between" wrap="nowrap">
                     <Text fw={500} lineClamp={1} style={{ wordBreak: "break-all" }}>
-                      {cert.x509.subject}
+                      {cert.isError ? t("certificate.page.list.invalid.title") : cert.x509.subject}
                     </Text>
                     <Text c="gray.6" ta="end" size="sm">
                       {cert.fileName}
                     </Text>
                   </Group>
                   <Group justify="space-between">
-                    <Text size="sm" c="gray.6" title={cert.x509.validToDate.toISOString()}>
-                      {t("certificate.page.list.expires", {
-                        when: new Intl.RelativeTimeFormat(locale).format(
-                          dayjs(cert.x509.validToDate).diff(dayjs(), "days"),
-                          "days",
-                        ),
-                      })}
-                    </Text>
+                    {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>
+                    )}
                     <RemoveCertificate fileName={cert.fileName} />
                   </Group>
                 </Stack>

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

@@ -17,6 +17,7 @@ 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";
@@ -75,6 +76,8 @@ const createColumns = (
     accessorKey: "ports",
     header: t("docker.field.ports.label"),
     Cell({ cell }) {
+      if (!cell.row.original.ports) return null;
+      if (!cell.row.original.ports.length) return null;
       return (
         <OverflowBadge overflowCount={1} data={cell.row.original.ports.map((port) => port.PrivatePort.toString())} />
       );
@@ -205,15 +208,16 @@ const ContainerActionBarButton = (props: ContainerActionBarButtonProps) => {
   const t = useScopedI18n("docker.action");
   const utils = clientApi.useUtils();
 
-  const { mutateAsync, isPending } = clientApi.docker[`${props.action}All`].useMutation();
+  const { mutateAsync, isPending } = clientApi.docker[`${props.action}All`].useMutation({
+    async onSettled() {
+      await utils.docker.getContainers.invalidate();
+    },
+  });
 
   const handleClickAsync = async () => {
     await mutateAsync(
       { ids: props.selectedIds },
       {
-        async onSettled() {
-          await utils.docker.getContainers.invalidate();
-        },
         onSuccess() {
           showSuccessNotification({
             title: t(`${props.action}.notification.success.title`),
@@ -244,21 +248,11 @@ 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={containerStates[state]}>
+    <Badge size="lg" radius="sm" variant="light" w={120} color={containerStateColorMap[state]}>
       {t(state)}
     </Badge>
   );

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

@@ -1,10 +1,10 @@
 "use client";
 
-import Link from "next/link";
 import { Anchor, Center, Stack, Text } from "@mantine/core";
 import { IconShipOff } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 export default function DockerErrorPage() {
   const t = useI18n();

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/db/client";
+import { createId } from "@homarr/common";
 import type { KubernetesLabelResourceType } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 

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

@@ -1,10 +1,10 @@
 "use client";
 
-import Link from "next/link";
 import { Anchor, Center, Stack, Text } from "@mantine/core";
 import { IconCubeOff } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 export default function KubernetesErrorPage() {
   const t = useI18n();

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

@@ -1,11 +1,11 @@
 import React from "react";
 import Image from "next/image";
-import Link from "next/link";
 import { Card, Group, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
 
 import type { KubernetesLabelResourceType } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import classes from "./resource-tile.module.css";
 

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/db/client";
+import { createId } from "@homarr/common";
 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/db/client";
+import { createId } from "@homarr/common";
 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

@@ -0,0 +1,26 @@
+"use client";
+
+import { Select } from "@mantine/core";
+
+import type { LogLevel } from "@homarr/core/infrastructure/logs/constants";
+import { logLevelConfiguration, logLevels } from "@homarr/core/infrastructure/logs/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

@@ -0,0 +1,32 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
+
+import type { LogLevel } from "@homarr/core/infrastructure/logs/constants";
+import { logLevels } from "@homarr/core/infrastructure/logs/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 } from "@mantine/core";
+import { Box, Group } from "@mantine/core";
 
 import { getScopedI18n } from "@homarr/translation/server";
 
@@ -7,15 +7,18 @@ import "@xterm/xterm/css/xterm.css";
 import { notFound } from "next/navigation";
 
 import { auth } from "@homarr/auth/next";
+import { logsEnv } from "@homarr/core/infrastructure/logs/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();
-  if (!session?.user || !session.user.permissions.includes("admin")) {
+  if (!session?.user.permissions.includes("admin")) {
     return {};
   }
   const t = await getScopedI18n("management");
@@ -27,16 +30,19 @@ export async function generateMetadata() {
 
 export default async function LogsManagementPage() {
   const session = await auth();
-  if (!session?.user || !session.user.permissions.includes("other-view-logs")) {
+  if (!session?.user.permissions.includes("other-view-logs")) {
     notFound();
   }
 
   return (
-    <>
-      <DynamicBreadcrumb />
+    <LogContextProvider defaultLevel={logsEnv.LEVEL}>
+      <Group justify="space-between" align="center" wrap="nowrap">
+        <DynamicBreadcrumb />
+        <LogLevelSelection />
+      </Group>
       <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
         <ClientSideTerminalComponent />
       </Box>
-    </>
+    </LogContextProvider>
   );
 }

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

@@ -8,22 +8,29 @@ 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(undefined, {
-    onData(data) {
-      terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);
-      terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
+  clientApi.log.subscribe.useSubscription(
+    {
+      levels: activeLevels,
     },
-    onError(err) {
-      // This makes sense as logging might cause an infinite loop
-      alert(err);
+    {
+      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);
+      },
     },
-  });
+  );
 
   useEffect(() => {
     if (!ref.current) {

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

@@ -1,95 +0,0 @@
-"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

@@ -0,0 +1,457 @@
+"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 }) {
+      if (row.original.preventCustomInterval) return null;
+
+      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,12 +1,13 @@
 import { notFound } from "next/navigation";
-import { Box, Title } from "@mantine/core";
+import { Stack, 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 { JobsList } from "./_components/jobs-list";
+import { TasksTable } from "./_components/tasks-table";
 
 export async function generateMetadata() {
   const session = await auth();
@@ -27,10 +28,15 @@ export default async function TasksPage() {
   }
 
   const jobs = await api.cronJobs.getJobs();
+  const tTasks = await getScopedI18n("management.page.tool.tasks");
+
   return (
-    <Box>
-      <Title mb={"md"}>Tasks</Title>
-      <JobsList initialJobs={jobs} />
-    </Box>
+    <>
+      <DynamicBreadcrumb />
+      <Stack>
+        <Title order={1}>{tTasks("title")}</Title>
+        <TasksTable initialJobs={jobs} />
+      </Stack>
+    </>
   );
 }

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