perf: try to improve nextjs dev performance

.env.example

@@ -12,10 +12,6 @@ AUTH_SECRET="supersecret"
 # or starting the project without any (which will show a randomly generated one).
 SECRET_ENCRYPTION_KEY=0000000000000000000000000000000000000000000000000000000000000000
 
-# Cron job API key is generated every time the container starts as it is required for communication between nextjs-api and tasks-api
-# export CRON_JOB_API_KEY=$(openssl rand -base64 32)
-# CRON_JOB_API_KEY="your-generated-api-key"
-
 LOG_LEVEL='info'
 
 # This is how you can use the sqlite driver:
@@ -34,12 +30,7 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
 # DB_PASSWORD='password'
 # DB_NAME='name-of-database'
 
-# The following is an example on how to use the node-postgres driver:
+# The below path can be used to store trusted certificates during development, it is not required and can be left empty.
-# 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'
 
@@ -47,6 +38,3 @@ TURBO_TELEMETRY_DISABLED=1
 
 # Enable kubernetes tool
 # ENABLE_KUBERNETES=true
-
-# Enable mock integration
-UNSAFE_ENABLE_MOCK_INTEGRATION=true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -31,45 +31,6 @@ body:
       label: Version
       description: What version of Homarr are you running?
       options:
-        # The below comment is used to insert a new version with on-release.yml
-        #NEXT_VERSION#
-        - 1.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

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

@@ -1,56 +0,0 @@
-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: 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: Copy source for debian build artifact
-      run: |
-        cp ${{ runner.temp }}/extraction/${{ inputs.architecture }}/build-alpine-${{ inputs.architecture }}.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/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`)
+- [ ] Builds without warnings or errors (``pnpm build``, autofix with ``pnpm format:fix``)
-- [ ] Pull request targets `dev` branch
+- [ ] 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,38 +3,17 @@
   extends: ["config:recommended"],
   packageRules: [
     {
-      matchPackageNames: ["^@homarr/"],
+      matchPackagePatterns: ["^@homarr/"],
-      enabled: false,
-    },
-    // Reenable once https://github.com/privatenumber/tsx/issues/737 is fixed
-    {
-      matchPackageNames: ["tsx"],
       enabled: false,
     },
     {
       matchUpdateTypes: ["minor", "patch", "pin", "digest"],
       automerge: true,
     },
-    {
-      // disallow automerge for onlyBuiltDependencies
-      matchPackageNames: [
-        "@tree-sitter-grammars/tree-sitter-yaml",
-        "bcrypt",
-        "cpu-features",
-        "esbuild",
-        "sharp",
-        "ssh2",
-        "tree-sitter",
-        "tree-sitter-json",
-      ],
-      automerge: false,
-    },
   ],
   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,24 +3,19 @@ on:
   pull_request:
     types: [opened, synchronize]
 
-permissions: {}
-
 jobs:
   approve-automatic-prs:
     runs-on: ubuntu-latest
-    timeout-minutes: 2
     if: github.actor_id == 158783068 || github.actor_id == 190541745 || github.actor_id == 210161987 # Id of renovate bot and crowdin bot see https://api.github.com/users/homarr-renovate%5Bbot%5D and https://api.github.com/users/homarr-crowdin%5Bbot%5D and https://api.github.com/users/homarr-update-contributors%5Bbot%5D
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
       - name: Obtain token
         id: obtainToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+          private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+          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,6 +1,4 @@
 name: "[Quality] Code Analysis"
-permissions:
-  contents: read
 
 on:
   pull_request:
@@ -23,9 +21,8 @@ env:
 jobs:
   lint:
     runs-on: ubuntu-latest
-    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -39,9 +36,8 @@ jobs:
 
   format:
     runs-on: ubuntu-latest
-    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -51,9 +47,8 @@ jobs:
 
   typecheck:
     runs-on: ubuntu-latest
-    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -63,9 +58,8 @@ jobs:
 
   test:
     runs-on: ubuntu-latest
-    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
 
       - name: Setup
         uses: ./tooling/github/setup
@@ -81,10 +75,9 @@ jobs:
 
   e2e:
     runs-on: ubuntu-latest
-    timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
       - name: Setup
         uses: ./tooling/github/setup
       - name: Build docker image
@@ -106,9 +99,8 @@ jobs:
 
   build:
     runs-on: ubuntu-latest
-    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
       - name: Setup
         uses: ./tooling/github/setup
       - name: Copy env

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

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

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

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

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

@@ -5,26 +5,20 @@ 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@v6
+        uses: actions/checkout@v4
 
       - name: Obtain token
         id: obtainToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.CROWDIN_APP_PRIVATE_KEY }}
+          private_key: ${{ secrets.CROWDIN_APP_PRIVATE_KEY }}
-          app-id: ${{ secrets.CROWDIN_APP_ID }}
+          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,6 +1,4 @@
 name: "[Crowdin] Upload translations"
-permissions:
-  contents: read
 
 on:
   workflow_dispatch:
@@ -14,11 +12,10 @@ 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@v6
+        uses: actions/checkout@v4
 
       - name: Upload Crowdin translations
         uses: crowdin/github-action@v2

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

@@ -32,13 +32,12 @@ 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'
@@ -50,23 +49,18 @@ jobs:
       - name: Obtain token
         if: env.SKIP_RELEASE == 'false'
         id: obtainToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
+          private_key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
+          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@v4
-
-      - uses: actions/checkout@v6
         if: env.SKIP_RELEASE == 'false'
         with:
           persist-credentials: false
-      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
-        if: env.SKIP_RELEASE == 'false'
-      - uses: actions/setup-node@v6
         if: env.SKIP_RELEASE == 'false'
         with:
-          node-version: 24.12.0
+          node-version: 22
-          cache: "pnpm"
       - run: npm i -g pnpm
         if: env.SKIP_RELEASE == 'false'
       - name: Install dependencies
@@ -113,11 +107,10 @@ 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@v6
+      - uses: actions/checkout@v4
         with:
           ref: ${{ needs.release.outputs.git_ref }}
 
@@ -148,15 +141,15 @@ 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@v6
+      - uses: actions/checkout@v4
         with:
           ref: ${{ needs.release.outputs.git_ref }}
 
@@ -187,42 +180,11 @@ 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, extract-asset-amd64, extract-asset-arm64]
+    needs: [release, build-amd64, build-arm64]
     runs-on: ubuntu-latest
-    timeout-minutes: 5
     env:
       NEXT_VERSION: ${{ needs.release.outputs.version }}
       DEPLOY_LATEST: ${{ github.ref_name == 'main' }}
@@ -255,13 +217,6 @@ 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: ${{ secrets.GITHUB_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,7 +18,6 @@ permissions:
 jobs:
   create-and-merge-pr:
     runs-on: ubuntu-latest
-    timeout-minutes: 2
     steps:
       - name: Discord notification
         if: ${{ github.events.inputs.send-notifications }}
@@ -28,7 +27,7 @@ jobs:
         with:
           args: "Automatic release has been triggered: [run ${{ github.run_number }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})"
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Get Next Version
@@ -50,11 +49,10 @@ jobs:
           args: "Created a release PR ${{ steps.create-pull-request.outputs.url }} for version ${{ steps.semver.outputs.next }} (new behaviour: ${{ steps.semver.outputs.bump }})"
       - name: Obtain token
         id: obtainApprovalToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+          private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+          app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
-          permission-pull-requests: write
       - name: Approve PR
         env:
           GITHUB_TOKEN: ${{ steps.obtainApprovalToken.outputs.token }}
@@ -62,12 +60,10 @@ jobs:
           gh pr review --approve --body "Automatically approved by GitHub Action"
       - name: Obtain token
         id: obtainMergeToken
-        uses: actions/create-github-app-token@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
+          private_key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
-          app-id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
+          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-renovate-validate.yml

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

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

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

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

@@ -10,35 +10,31 @@ env:
   CROWDIN_TOKEN: "${{ secrets.CROWDIN_UPDATE_CONTRIBUTORS_TOKEN }}"
 
 permissions:
-  contents: read
+  contents: write
+
 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@v2
+        uses: tibdex/github-app-token@v2
         with:
-          private-key: ${{ secrets.HOMARR_UPDATE_CONTRIBUTORS_PRIVATE_KEY }}
+          private_key: ${{ secrets.HOMARR_UPDATE_CONTRIBUTORS_PRIVATE_KEY }}
-          app-id: ${{ vars.HOMARR_UPDATE_CONTRIBUTORS_APP_ID }}
+          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
+        uses: actions/checkout@v4
         env:
           GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
 
-      - uses: pnpm/action-setup@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
 
       - name: Run update script
         run: node ./scripts/update-contributors.mjs
@@ -54,7 +50,7 @@ jobs:
 
       - name: Create Pull Request
         id: create-pull-request
-        uses: peter-evans/create-pull-request@v8
+        uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ steps.obtainToken.outputs.token }}
           branch: update-contributors

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

@@ -1,65 +0,0 @@
-name: Update integration list
-
-on:
-  workflow_dispatch: {}
-  push:
-    paths:
-      - packages/definitions/src/integration.ts
-    branches:
-      - dev
-
-permissions:
-  pull-requests: write
-
-jobs:
-  update-readme:
-    concurrency:
-      group: update-integration
-      cancel-in-progress: false
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    steps:
-      - name: Obtain token
-        id: obtainToken
-        uses: actions/create-github-app-token@v2
-        with:
-          private-key: ${{ secrets.HOMARR_UPDATE_CONTRIBUTORS_PRIVATE_KEY }}
-          app-id: ${{ vars.HOMARR_UPDATE_CONTRIBUTORS_APP_ID }}
-          permission-contents: write # required to commit to branch
-          permission-pull-requests: write # required to create pr & enable automerge
-      - name: Checkout code
-        uses: actions/checkout@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

.npmrc

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

.nvmrc

@@ -1 +1 @@
-24.12.0
+22.16.0

.releaserc.json

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

.run/db_migration_postgresql_generate.run copy.xml

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

CODEOWNERS

@@ -1,9 +1 @@
-# ── 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:24.12.0-alpine AS base
+FROM node:22.16.0-alpine AS base
 
 FROM base AS builder
 RUN apk add --no-cache libc6-compat
@@ -10,6 +10,8 @@ RUN apk add --no-cache libc6-compat curl bash
 RUN apk update
 COPY . .
 
+# Install working version of corepack (See https://github.com/nodejs/corepack/issues/612)
+RUN npm install -g corepack@0.31.0 && corepack --version
 RUN corepack enable pnpm && pnpm install --recursive --frozen-lockfile
 
 # Copy static data as it is not part of the build
@@ -17,7 +19,8 @@ COPY static-data ./static-data
 ARG SKIP_ENV_VALIDATION='true'
 ARG CI='true'
 ARG DISABLE_REDIS_LOGS='true'
-
+# Install working version of corepack (See https://github.com/nodejs/corepack/issues/612)
+RUN npm install -g corepack@0.31.0 && corepack --version
 RUN corepack enable pnpm && pnpm build
 
 FROM base AS runner
@@ -45,6 +48,7 @@ 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
 
@@ -54,7 +58,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=755 scripts/entrypoint.sh ./entrypoint.sh
+COPY --chmod=777 scripts/entrypoint.sh ./entrypoint.sh
 COPY packages/redis/redis.conf /app/redis.conf
 COPY nginx.conf /etc/nginx/templates/nginx.conf
 
@@ -63,7 +67,6 @@ ENV DB_URL='/appdata/db/db.sqlite'
 ENV DB_DIALECT='sqlite'
 ENV DB_DRIVER='better-sqlite3'
 ENV AUTH_PROVIDERS='credentials'
-ENV REDIS_IS_EXTERNAL='false'
 ENV NODE_ENV='production'
 
 ENTRYPOINT [ "/app/entrypoint.sh" ]

SECURITY.md

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

apps/nextjs/next.config.ts

@@ -1,8 +1,8 @@
 // Importing env files here to validate on build
 import "@homarr/auth/env";
-import "@homarr/core/infrastructure/db/env";
+import "@homarr/db/env";
 import "@homarr/common/env";
-import "@homarr/core/infrastructure/logs/env";
+import "@homarr/log/env";
 import "@homarr/docker/env";
 
 import type { NextConfig } from "next";
@@ -17,30 +17,47 @@ const withNextIntl = createNextIntlPlugin({
   requestConfig: "../../packages/translation/src/request.ts",
 });
 
+interface _WebpackConfig {
+  module: {
+    rules: {
+      test: RegExp;
+      loader: string;
+    }[];
+  };
+}
+
 const nextConfig: NextConfig = {
   output: "standalone",
   reactStrictMode: true,
-  // react compiler breaks mantine-react-table, so disabled for now
+  /** We already do linting and typechecking as separate tasks in CI */
-  //reactCompiler: true,
+  eslint: { ignoreDuringBuilds: true },
-  /** We already do typechecking as separate tasks in CI */
   typescript: { ignoreBuildErrors: true },
-  /**
+  /*webpack: (config: WebpackConfig, { isServer }) => {
-   * dockerode is required in the external server packages because of https://github.com/homarr-labs/homarr/issues/612
+    if (isServer) {
-   * isomorphic-dompurify and jsdom are required, see https://github.com/kkomelin/isomorphic-dompurify/issues/356
+      config.module.rules.push({
-   */
+        test: /\.node$/,
-  serverExternalPackages: ["dockerode", "isomorphic-dompurify", "jsdom"],
+        loader: "node-loader",
+      });
+    }
+
+    return config;
+  },*/
   experimental: {
     optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
-    turbopackFileSystemCacheForDev: true,
   },
-  transpilePackages: ["@homarr/ui", "@homarr/notifications", "@homarr/modals", "@homarr/spotlight", "@homarr/widgets"],
+  serverExternalPackages: [
+    "dockerode",
+    "@kubernetes/client-node",
+    "@ctrl/deluge",
+    "@ctrl/qbittorrent",
+    "@ctrl/transmission",
+    "node-ical",
+    "tsdav",
+    "proxmox-api",
+    "@jellyfin/sdk",
+  ],
   images: {
-    localPatterns: [
+    domains: ["cdn.jsdelivr.net"],
-      {
-        pathname: "/**",
-        search: "",
-      },
-    ],
   },
   // eslint-disable-next-line @typescript-eslint/require-await,no-restricted-syntax
   async headers() {
@@ -50,20 +67,17 @@ const nextConfig: NextConfig = {
         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'; 
+              style-src 'self' '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

@@ -23,8 +23,8 @@
     "@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",
@@ -33,8 +33,8 @@
     "@homarr/forms-collection": "workspace:^0.1.0",
     "@homarr/gridstack": "^1.12.0",
     "@homarr/icons": "workspace:^0.1.0",
-    "@homarr/image-proxy": "workspace:^0.1.0",
     "@homarr/integrations": "workspace:^0.1.0",
+    "@homarr/log": "workspace:^",
     "@homarr/modals": "workspace:^0.1.0",
     "@homarr/modals-collection": "workspace:^0.1.0",
     "@homarr/notifications": "workspace:^0.1.0",
@@ -48,61 +48,59 @@
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^8.3.12",
+    "@mantine/colors-generator": "^8.0.2",
-    "@mantine/core": "^8.3.12",
+    "@mantine/core": "^8.0.2",
-    "@mantine/dropzone": "^8.3.12",
+    "@mantine/dropzone": "^8.0.2",
-    "@mantine/hooks": "^8.3.12",
+    "@mantine/hooks": "^8.0.2",
-    "@mantine/modals": "^8.3.12",
+    "@mantine/modals": "^8.0.2",
-    "@mantine/tiptap": "^8.3.12",
+    "@mantine/tiptap": "^8.0.2",
     "@million/lint": "1.0.14",
-    "@tabler/icons-react": "^3.36.1",
+    "@tabler/icons-react": "^3.33.0",
-    "@tanstack/react-query": "^5.90.16",
+    "@tanstack/react-query": "^5.77.2",
-    "@tanstack/react-query-devtools": "^5.91.2",
+    "@tanstack/react-query-devtools": "^5.77.2",
-    "@tanstack/react-query-next-experimental": "^5.91.0",
+    "@tanstack/react-query-next-experimental": "^5.77.2",
-    "@trpc/client": "^11.8.1",
+    "@trpc/client": "^11.1.3",
-    "@trpc/next": "^11.8.1",
+    "@trpc/next": "^11.1.3",
-    "@trpc/react-query": "^11.8.1",
+    "@trpc/react-query": "^11.1.3",
-    "@trpc/server": "^11.8.1",
+    "@trpc/server": "^11.1.3",
     "@xterm/addon-canvas": "^0.7.0",
-    "@xterm/addon-fit": "0.11.0",
+    "@xterm/addon-fit": "0.10.0",
-    "@xterm/xterm": "^6.0.0",
+    "@xterm/xterm": "^5.5.0",
-    "babel-plugin-react-compiler": "^1.0.0",
+    "chroma-js": "^3.1.2",
-    "chroma-js": "^3.2.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.13",
-    "dotenv": "^17.2.3",
+    "dotenv": "^16.5.0",
-    "flag-icons": "^7.5.0",
+    "flag-icons": "^7.3.2",
-    "glob": "^13.0.0",
+    "glob": "^11.0.2",
-    "isomorphic-dompurify": "^2.35.0",
+    "jotai": "^2.12.5",
-    "jotai": "^2.16.1",
     "mantine-react-table": "2.0.0-beta.9",
-    "next": "16.1.1",
+    "next": "15.3.2",
-    "postcss-preset-mantine": "^1.18.0",
+    "postcss-preset-mantine": "^1.17.0",
     "prismjs": "^1.30.0",
-    "react": "19.2.3",
+    "react": "19.1.0",
-    "react-dom": "19.2.3",
+    "react-dom": "19.1.0",
-    "react-error-boundary": "^6.0.3",
+    "react-error-boundary": "^6.0.0",
     "react-simple-code-editor": "^0.14.1",
-    "sass": "^1.97.2",
+    "sass": "^1.89.0",
-    "superjson": "2.2.6",
+    "superjson": "2.2.2",
-    "swagger-ui-react": "^5.31.0",
+    "swagger-ui-react": "^5.22.0",
     "use-deep-compare-effect": "^1.8.1",
-    "zod": "^4.2.1"
+    "zod": "^3.25.30"
   },
   "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.2",
+    "@types/chroma-js": "3.1.1",
-    "@types/node": "^24.10.7",
+    "@types/node": "^22.15.21",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "19.2.8",
+    "@types/react": "19.1.6",
-    "@types/react-dom": "19.2.3",
+    "@types/react-dom": "19.1.5",
     "@types/swagger-ui-react": "^5.18.0",
-    "concurrently": "^9.2.1",
+    "concurrently": "^9.1.2",
-    "eslint": "^9.39.2",
+    "eslint": "^9.27.0",
     "node-loader": "^2.1.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.5.3",
-    "typescript": "^5.9.3"
+    "typescript": "^5.8.3"
   }
 }

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/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { useZodForm } from "@homarr/form";
@@ -64,23 +64,16 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
     <Stack gap="xl">
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack gap="lg">
-          <TextInput
+          <TextInput label={t("field.username.label")} autoComplete="off" {...form.getInputProps("username")} />
-            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

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 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/v4";
+import { z } from "zod";
 
 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -116,18 +116,8 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
           <>
             <form onSubmit={form.onSubmit((credentials) => void signInAsync(credentials.provider, credentials))}>
               <Stack gap="lg">
-                <TextInput
+                <TextInput label={t("field.username.label")} {...form.getInputProps("name")} />
-                  label={t("field.username.label")}
+                <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
-                  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]/boards/(content)/_creator.tsx

@@ -11,9 +11,8 @@ 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 { logger } from "@homarr/log";
 import { getI18n } from "@homarr/translation/server";
 import { prefetchForKindAsync } from "@homarr/widgets/prefetch";
 
@@ -23,8 +22,6 @@ 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> {
@@ -60,13 +57,7 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
 
       for (const [kind, items] of itemsMap) {
         await prefetchForKindAsync(kind, queryClient, items).catch((error) => {
-          logger.error(
+          logger.error(new Error("Failed to prefetch widget", { cause: error }));
-            new ErrorWithMetadata(
-              "Failed to prefetch widget",
-              { widgetKind: kind, itemCount: items.length },
-              { cause: error },
-            ),
-          );
         });
       }
 

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

@@ -1,6 +1,7 @@
 "use client";
 
 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";
@@ -18,17 +19,14 @@ 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";
@@ -44,7 +42,7 @@ export const BoardContentHeaderActions = () => {
   const { hasChangeAccess } = useBoardPermissions(board);
 
   if (!hasChangeAccess) {
-    return <SelectBoardsMenu />;
+    return null; // Hide actions for user without access
   }
 
   return (
@@ -63,7 +61,6 @@ export const BoardContentHeaderActions = () => {
 };
 
 const AddMenu = () => {
-  const { data: session } = useSession();
   const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
   const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
   const { openModal: openAppSelectModal } = useModalAction(AppSelectModal);
@@ -98,13 +95,12 @@ const AddMenu = () => {
 
   const handleSelectApp = useCallback(() => {
     openAppSelectModal({
-      onSelect: (app) => {
+      onSelect: (appId) => {
         createItem({
           kind: "app",
-          options: { appId: app.id },
+          options: { appId },
         });
       },
-      withCreate: session?.user.permissions.includes("app-create") ?? false,
     });
   }, [openAppSelectModal, createItem]);
 
@@ -169,7 +165,7 @@ const EditModeMenu = () => {
     open();
   }, [board, isEditMode, saveBoard, open]);
 
-  useHotkeys([[hotkeys.toggleBoardEdit, toggle]]);
+  useHotkeys([["mod+e", toggle]]);
   usePreventLeaveWithDirty(isEditMode);
 
   return (

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

@@ -17,7 +17,6 @@ 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";
@@ -103,25 +102,12 @@ export const ColorSettingsContent = ({ board }: Props) => {
             </InputWrapper>
           </Grid.Col>
           <Grid.Col span={{ sm: 12, md: 6 }}>
-            <Group align="end">
+            <ColorInput
-              <ColorInput
+              label={t("board.field.iconColor.label")}
-                label={t("board.field.iconColor.label")}
+              format="hex"
-                format="hex"
+              swatches={Object.values(theme.colors).map((color) => color[6])}
-                swatches={Object.values(theme.colors).map((color) => color[6])}
+              {...form.getInputProps("iconColor")}
-                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,14 +120,11 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
               />
               {session?.user.permissions.includes("media-upload") && (
                 <UploadMedia
-                  onSuccess={(medias) => {
+                  onSuccess={({ url }) =>
-                    const first = medias.at(0);
-                    if (!first) return;
-
                     startTransition(() => {
-                      form.setFieldValue("backgroundImageUrl", first.url);
+                      form.setFieldValue("backgroundImageUrl", url);
-                    });
+                    })
-                  }}
+                  }
                 >
                   {({ onClick, loading }) => (
                     <ActionIcon onClick={onClick} loading={loading} mt={24} size={36} variant="default">

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/common";
+import { createId } from "@homarr/db/client";
 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,10 +61,6 @@ const getBoardAndPermissionsAsync = async (params: Awaited<Props["params"]>) =>
       notFound();
     }
 
-    if (error instanceof TRPCError && error.code === "BAD_REQUEST") {
-      notFound();
-    }
-
     throw error;
   }
 };

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

@@ -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 { createLogger } from "@homarr/core/infrastructure/logs";
+import { logger } from "@homarr/log";
 
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
@@ -18,8 +18,6 @@ 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>;
@@ -47,10 +45,6 @@ export const createBoardLayout = <TParams extends Params>({
         notFound();
       }
 
-      if (error instanceof TRPCError && error.code === "BAD_REQUEST") {
-        notFound();
-      }
-
       throw error;
     });
     const colorScheme = await getCurrentColorSchemeAsync();

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

@@ -1,3 +1,4 @@
+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";
@@ -7,7 +8,6 @@ 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/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -12,11 +12,7 @@ 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: "",
@@ -25,6 +21,9 @@ 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

@@ -3,7 +3,7 @@
 import { startTransition } from "react";
 import { Button, Card, Group, Stack, Switch, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -17,11 +17,7 @@ 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 }) => {
@@ -35,7 +31,11 @@ export const InitSettings = () => {
   });
 
   const handleSubmitAsync = async (values: z.infer<typeof settingsInitSchema>) => {
-    await mutateAsync(values);
+    await mutateAsync(values, {
+      async onSuccess() {
+        await revalidatePathActionAsync("/init");
+      },
+    });
   };
 
   return (

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { signIn } from "@homarr/auth/client";
@@ -26,19 +26,19 @@ export const InitUserForm = () => {
 
   const handleSubmitAsync = async (values: FormType) => {
     await mutateAsync(values, {
-      onSuccess() {
+      async onSuccess() {
         showSuccessNotification({
           title: tUser("notification.success.title"),
           message: tUser("notification.success.message"),
         });
 
-        void signIn("credentials", {
+        await 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

@@ -23,7 +23,6 @@ import type { SupportedLanguage } from "@homarr/translation";
 import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
 
 import { Analytics } from "~/components/layout/analytics";
-import { CrowdinLiveTranslation } from "~/components/layout/crowdin-live-translation";
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import { DayJsLoader } from "./_client-providers/dayjs-loader";
@@ -106,7 +105,6 @@ export default async function Layout(props: {
             forceDisableStatus: serverSettings.board.forceDisableStatus,
           },
           search: { defaultSearchEngineId: serverSettings.search.defaultSearchEngineId },
-          user: { enableGravatar: serverSettings.user.enableGravatar },
         }}
         {...innerProps}
       />
@@ -120,12 +118,10 @@ export default async function Layout(props: {
     (innerProps) => <SpotlightProvider {...innerProps} />,
   ]);
 
-  const { locale } = await props.params;
-
   return (
     // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
     <html
-      lang={locale}
+      lang={(await props.params).locale}
       dir={direction}
       data-mantine-color-scheme={colorScheme}
       style={{
@@ -136,7 +132,6 @@ export default async function Layout(props: {
       <head>
         <Analytics />
         <SearchEngineOptimization />
-        <CrowdinLiveTranslation locale={locale} />
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <StackedProvider>

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

@@ -1,32 +1,51 @@
 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 = Object.values(integrationDefs)
+const icons = [
-  .filter((int) => int.name !== "Mock")
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg",
-  .map((int) => int.iconUrl);
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/sabnzbd.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/deluge.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/radarr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/sonarr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/lidarr.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/pihole.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/dashdot.png",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/overseerr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/plex.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/jellyfin.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/homeassistant.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/freshrss.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/readarr.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/transmission.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/qbittorrent.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/nzbget.png",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/openmediavault.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/docker.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/jellyseerr.svg",
+  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/adguardhome.svg",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/tdarr.png",
+  "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/prowlarr.svg",
+];
 
 const countIconGroups = 3;
-const animationDurationInSeconds = icons.length;
+const animationDurationInSeconds = 12;
 const arrayInChunks = splitToNChunks(icons, countIconGroups);
-const gridSpan = 12 / countIconGroups;
 
-export const HeroBanner = async () => {
+export const HeroBanner = () => {
-  const t = await getScopedI18n("management.page.home");
+  const gridSpan = 12 / countIconGroups;
 
   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">
-          {t("heroBanner.title")}
+          Welcome back to your
         </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" }}>{t("heroBanner.subtitle", { app: "Homarr" })}</Title>
+          <Title fz={{ base: "h3", md: "h1" }}>Homarr Board</Title>
         </Group>
       </Stack>
       <Box visibleFrom="md" className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
@@ -42,26 +61,12 @@ export const HeroBanner = async () => {
                   }}
                 >
                   {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
+                    <Image key={`grid-column-${columnIndex}-scroll-1-${index}`} src={icon} radius="md" w={50} h={50} />
-                      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
+                    <Image key={`grid-column-${columnIndex}-scroll-2-${index}`} src={icon} radius="md" w={50} h={50} />
-                      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/page.tsx

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 "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";
 
@@ -11,7 +12,6 @@ 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,6 +84,9 @@ 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,3 +1,4 @@
+import Link from "next/link";
 import {
   ActionIcon,
   Badge,
@@ -20,7 +21,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 { Link, UserAvatar } from "@homarr/ui";
+import { 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,15 +1,4 @@
-import {
+import { IconGrid3x3, IconKey, IconPassword, IconServer, IconUser } from "@tabler/icons-react";
-  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";
@@ -20,12 +9,4 @@ export const integrationSecretIcons = {
   password: IconPassword,
   realm: IconServer,
   tokenId: IconGrid3x3,
-  personalAccessToken: IconPasswordUser,
-  topic: IconMessage,
-  url: IconLink,
-  opnsenseApiKey: IconKey,
-  opnsenseApiSecret: IconPassword,
-  githubAppId: IconCode,
-  githubInstallationId: IconPlug,
-  privateKey: IconKey,
 } satisfies Record<IntegrationSecretKind, TablerIcon>;

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

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

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

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

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

@@ -4,7 +4,8 @@ import { IconAlertTriangle, IconCheck, IconCopy, IconExclamationCircle, IconRepe
 
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
-import { createId, getMantineColor } from "@homarr/common";
+import { getMantineColor } from "@homarr/common";
+import { createId } from "@homarr/db/client";
 import { createDocumentationLink } from "@homarr/definitions";
 import { createModal, useConfirmModal, useModalAction } from "@homarr/modals";
 import { AddCertificateModal } from "@homarr/modals-collection";
@@ -29,8 +30,6 @@ export const CertificateErrorDetails = ({ error, url }: CertificateErrorDetailsP
   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({
@@ -73,7 +72,7 @@ export const CertificateErrorDetails = ({ error, url }: CertificateErrorDetailsP
         const formData = new FormData();
         formData.append(
           "file",
-          new File([rootCertificate.pem], `${hostname}-${createId()}.crt`, {
+          new File([error.data.certificate.pem], `${hostname}-${createId()}.crt`, {
             type: "application/x-x509-ca-cert",
           }),
         );
@@ -111,11 +110,11 @@ export const CertificateErrorDetails = ({ error, url }: CertificateErrorDetailsP
     <>
       {description}
 
-      <CertificateDetailsCard certificate={rootCertificate} />
+      <CertificateDetailsCard certificate={error.data.certificate} />
 
       {error.data.reason === "hostnameMismatch" && <HostnameMismatchAlert />}
 
-      {!rootCertificate.isSelfSigned && error.data.reason === "untrusted" && <CertificateExtractAlert />}
+      {!error.data.certificate.isSelfSigned && error.data.reason === "untrusted" && <CertificateExtractAlert />}
 
       {showRetryButton && (
         <Button
@@ -128,7 +127,7 @@ export const CertificateErrorDetails = ({ error, url }: CertificateErrorDetailsP
         </Button>
       )}
 
-      {(error.data.reason === "untrusted" && rootCertificate.isSelfSigned) ||
+      {(error.data.reason === "untrusted" && error.data.certificate.isSelfSigned) ||
       error.data.reason === "hostnameMismatch" ? (
         <Button
           variant="default"
@@ -138,7 +137,7 @@ export const CertificateErrorDetails = ({ error, url }: CertificateErrorDetailsP
           {tError("certificate.action.trust.label")}
         </Button>
       ) : null}
-      {error.data.reason === "untrusted" && !rootCertificate.isSelfSigned ? (
+      {error.data.reason === "untrusted" && !error.data.certificate.isSelfSigned ? (
         <Button
           variant="default"
           fullWidth
@@ -326,8 +325,3 @@ const PemContentModal = createModal<{ content: string }>(({ actions, innerProps
   },
   size: "lg",
 });
-
-const getHeighestCertificate = (certificate: MappedCertificate): MappedCertificate => {
-  if (certificate.issuerCertificate) return getHeighestCertificate(certificate.issuerCertificate);
-  return certificate;
-};

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

@@ -1,27 +1,23 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Alert, Anchor, Button, ButtonGroup, Fieldset, Group, Stack, Text, TextInput } from "@mantine/core";
+import { Button, Fieldset, Group, Stack, TextInput } from "@mantine/core";
-import { IconInfoCircle, IconPencil, IconPlus, IconUnlink } from "@tabler/icons-react";
+import type { z } from "zod";
-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 { useConfirmModal, useModalAction } from "@homarr/modals";
+import { useConfirmModal } 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";
 
@@ -29,41 +25,23 @@ 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 allSecretKinds = getAllSecretKindOptions(integration.kind);
+  const secretsKinds =
-
-  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(formSchema, {
+  const form = useZodForm(integrationUpdateSchema.omit({ id: true }), {
     initialValues: {
       name: integration.name,
       url: integration.url,
-      secrets: initialSecretsKinds.map((kind) => ({
+      secrets: secretsKinds.map((kind) => ({
         kind,
         value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
       })),
-      app: integration.app ?? null,
     },
   });
   const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
@@ -71,20 +49,15 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
 
   const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
 
-  const handleSubmitAsync = async ({ app, ...values }: FormType) => {
+  const handleSubmitAsync = async (values: FormType) => {
-    const url = hasUrlSecret
-      ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
-      : values.url;
     await mutateAsync(
       {
         id: integration.id,
         ...values,
-        url,
         secrets: values.secrets.map((secret) => ({
           kind: secret.kind,
           value: secret.value === "" ? null : secret.value,
         })),
-        appId: app?.id ?? null,
       },
       {
         onSuccess: (data) => {
@@ -114,80 +87,48 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
     );
   };
 
-  const isInitialSecretKinds =
-    initialSecretsKinds.every((kind) => form.values.secrets.some((secret) => secret.kind === kind)) &&
-    form.values.secrets.length === initialSecretsKinds.length;
-
   return (
-    <form onSubmit={form.onSubmit(async (values) => await handleSubmitAsync(values))}>
+    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
       <Stack>
         <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
 
-        {hasUrlSecret ? null : (
+        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
-          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
-        )}
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
-            {allSecretKinds.length > 1 && (
+            {secretsKinds.map((kind, index) => (
-              <SecretKindsSegmentedControl
+              <SecretCard
-                defaultKinds={initialSecretsKinds}
+                key={kind}
-                secretKinds={allSecretKinds}
+                secret={secretsMap.get(kind) ?? { kind, value: null, updatedAt: null }}
-                form={form}
+                onCancel={() =>
-              />
+                  new Promise((resolve) => {
-            )}
+                    // When nothing changed, just close the secret card
-            {!isInitialSecretKinds
+                    if ((form.values.secrets[index]?.value ?? "") === (secretsMap.get(kind)?.value ?? "")) {
-              ? null
+                      return resolve(true);
-              : 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({
-                    <IntegrationSecretInput
+                      title: t("integration.secrets.reset.title"),
-                      label={t(`integration.secrets.kind.${secret.kind}.newLabel`)}
+                      children: t("integration.secrets.reset.message"),
-                      key={secret.kind}
+                      onCancel: () => resolve(false),
-                      kind={secret.kind}
+                      onConfirm: () => {
-                      {...form.getInputProps(`secrets.${index}.value`)}
+                        form.setFieldValue(`secrets.${index}.value`, secretsMap.get(kind)?.value ?? "");
-                    />
+                        resolve(true);
-                  </SecretCard>
+                      },
-                ))}
+                    });
-            {isInitialSecretKinds
+                  })
-              ? null
+                }
-              : form.values.secrets.map(({ kind }, index) => (
+              >
-                  <IntegrationSecretInput
+                <IntegrationSecretInput
-                    withAsterisk
+                  label={t(`integration.secrets.kind.${kind}.newLabel`)}
-                    key={kind}
+                  key={kind}
-                    kind={kind}
+                  kind={kind}
-                    {...form.getInputProps(`secrets.${index}.value`)}
+                  {...form.getInputProps(`secrets.${index}.value`)}
-                  />
+                />
-                ))}
+              </SecretCard>
-            {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">
@@ -203,80 +144,4 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   );
 };
 
-type FormType = z.infer<typeof formSchema>;
+type FormType = Omit<z.infer<typeof integrationUpdateSchema>, "id">;
-
-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,27 +2,23 @@
 
 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, Link } from "@homarr/ui";
+import { IntegrationAvatar } from "@homarr/ui";
 
-interface IntegrationCreateDropdownContentProps {
+export const IntegrationCreateDropdownContent = () => {
-  enableMockIntegration: boolean;
-}
-
-export const IntegrationCreateDropdownContent = ({ enableMockIntegration }: IntegrationCreateDropdownContentProps) => {
   const t = useI18n();
   const [search, setSearch] = useState("");
 
   const filteredKinds = useMemo(() => {
-    return integrationKinds
+    return integrationKinds.filter((kind) =>
-      .filter((kind) => enableMockIntegration || kind !== "mock")
+      getIntegrationName(kind).toLowerCase().includes(search.toLowerCase().trim()),
-      .filter((kind) => getIntegrationName(kind).toLowerCase().includes(search.toLowerCase().trim()))
+    );
-      .sort((kindA, kindB) => getIntegrationName(kindA).localeCompare(getIntegrationName(kindB)));
+  }, [search]);
-  }, [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,6 +1,7 @@
 "use client";
 
-import { startTransition, useState } from "react";
+import { useCallback, useState } from "react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
   Alert,
@@ -9,38 +10,26 @@ import {
   Collapse,
   Fieldset,
   Group,
-  Loader,
   SegmentedControl,
-  Select,
   Stack,
   Text,
   TextInput,
 } from "@mantine/core";
-import { IconCheck, IconInfoCircle } from "@tabler/icons-react";
+import { IconInfoCircle } from "@tabler/icons-react";
-import { z } from "zod/v4";
+import { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { Modify } from "@homarr/common/types";
+import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
-import type { IntegrationKind } from "@homarr/definitions";
+import { getAllSecretKindOptions, getIconUrl, getIntegrationName, integrationDefs } from "@homarr/definitions";
-import {
+import type { UseFormReturnType } from "@homarr/form";
-  getAllSecretKindOptions,
-  getIconUrl,
-  getIntegrationDefaultUrl,
-  getIntegrationName,
-  integrationDefs,
-} from "@homarr/definitions";
-import type { GetInputPropsReturnType, UseFormReturnType } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
+import { useI18n, useScopedI18n } 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";
 
@@ -50,77 +39,51 @@ interface NewIntegrationFormProps {
   };
 }
 
-const formSchema = integrationCreateSchema.omit({ kind: true, app: true }).and(
+const formSchema = integrationCreateSchema.omit({ kind: true }).and(
   z.object({
-    hasApp: z.boolean(),
+    createApp: 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 { data: session } = useSession();
+  const [opened, setOpened] = useState(false);
-  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,
+      url: searchParams.url ?? "",
       secrets: secretKinds[0].map((kind) => ({
         kind,
         value: "",
       })),
       attemptSearchEngineCreation: true,
-      hasApp: false,
+      createApp: false,
-      appHref: url,
+      appHref: "",
-      appId: null,
+    },
+    onValuesChange(values, previous) {
+      if (values.createApp !== previous.createApp) {
+        setOpened(values.createApp);
+      }
     },
   });
 
-  const { mutateAsync: createIntegrationAsync, isPending } = clientApi.integration.create.useMutation({
+  const { mutateAsync: createIntegrationAsync, isPending: isPendingIntegration } =
-    async onSuccess() {
+    clientApi.integration.create.useMutation();
-      await revalidatePathActionAsync("/manage/integrations");
+  const { mutateAsync: createAppAsync, isPending: isPendingApp } = clientApi.app.create.useMutation();
-    },
+  const isPending = isPendingIntegration || isPendingApp;
-  });
   const [error, setError] = useState<null | AnyMappedTestConnectionError>(null);
 
-  const handleSubmitAsync = async ({ appId, appHref, hasApp, ...values }: FormType) => {
+  const handleSubmitAsync = async (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;
-
     await createIntegrationAsync(
       {
         kind: searchParams.kind,
         ...values,
-        url,
-        app,
       },
       {
-        onSuccess(data) {
+        async onSuccess(data) {
           // We do it this way as we are unable to send a typesafe error through onError
           if (data?.error) {
             setError(data.error);
@@ -136,7 +99,32 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
             message: t("integration.page.create.notification.success.message"),
           });
 
-          router.push("/manage/integrations");
+          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"),
+                });
+              },
+            },
+          );
         },
         onError: () => {
           showErrorNotification({
@@ -155,9 +143,7 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
       <Stack>
         <TextInput withAsterisk label={t("integration.field.name.label")} autoFocus {...form.getInputProps("name")} />
 
-        {hasUrlSecret ? null : (
+        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
-          <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
-        )}
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
@@ -190,7 +176,15 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
           />
         )}
 
-        <AppForm form={form} canCreateApps={canCreateApps} />
+        <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>
 
         <Group justify="end" align="center">
           <Button variant="default" component={Link} href="/manage/integrations">
@@ -205,115 +199,40 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
   );
 };
 
-type FormType = z.infer<typeof formSchema>;
+interface SecretKindsSegmentedControlProps {
+  secretKinds: IntegrationSecretKind[][];
+  form: UseFormReturnType<FormType, (values: FormType) => FormType>;
+}
 
-const AppForm = ({ form, canCreateApps }: { form: UseFormReturnType<FormType>; canCreateApps: boolean }) => {
+const SecretKindsSegmentedControl = ({ secretKinds, form }: SecretKindsSegmentedControlProps) => {
-  const t = useI18n();
+  const t = useScopedI18n("integration.secrets");
-  const checkboxInputProps = form.getInputProps("hasApp", { type: "checkbox" });
 
-  return (
+  const secretKindGroups = secretKinds.map((kinds) => ({
-    <>
+    label:
-      <Checkbox
+      kinds.length === 0
-        {...checkboxInputProps}
+        ? t("noSecretsRequired.segmentTitle")
-        onChange={(event) => {
+        : kinds.map((kind) => t(`kind.${kind}.label`)).join(" & "),
-          startTransition(() => {
+    value: kinds.length === 0 ? "empty" : kinds.join("-"),
-            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")}
-      />
 
-      <Collapse in={form.values.hasApp}>
+  const onChange = useCallback(
-        <Fieldset legend={t("integration.field.app.sectionTitle")}>
+    (value: string) => {
-          <Stack gap="sm">
+      if (value === "empty") {
-            {canCreateApps && (
+        form.setFieldValue("secrets", []);
-              <SegmentedControl
+        return;
-                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);
-                  }
-                }}
-              />
-            )}
-
-            {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>
-    </>
-  );
-};
-
-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">
+      const kinds = value.split("-") as IntegrationSecretKind[];
-          {/* eslint-disable-next-line @next/next/no-img-element */}
+      const secrets = kinds.map((kind) => ({
-          <img width={20} height={20} src={appMap.get(option.value)?.iconUrl} alt={option.label} />
+        kind,
-          <Stack gap={0}>
+        value: "",
-            <Text>{option.label}</Text>
+      }));
-            <Text size="xs" c="dimmed">
+      form.setFieldValue("secrets", secrets);
-              {appMap.get(option.value)?.href}
+    },
-            </Text>
+    [form],
-          </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}
-    />
   );
+
+  return <SegmentedControl fullWidth data={secretKindGroups} onChange={onChange}></SegmentedControl>;
 };
+
+type FormType = z.infer<typeof formSchema>;

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/v4";
+import { z } from "zod";
 
 import { auth } from "@homarr/auth/next";
 import type { IntegrationKind } from "@homarr/definitions";

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

@@ -1,5 +1,6 @@
 import { Fragment } from "react";
 import type { PropsWithChildren } from "react";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
   AccordionControl,
@@ -35,12 +36,11 @@ 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, Link } from "@homarr/ui";
+import { CountBadge, IntegrationAvatar } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";
-import { env } from "~/env";
 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
 import { DeleteIntegrationActionButton } from "./_integration-buttons";
 import { IntegrationCreateDropdownContent } from "./new/_integration-new-dropdown";
@@ -114,7 +114,7 @@ const IntegrationSelectMenu = ({ children }: PropsWithChildren) => {
     >
       {children}
       <MenuDropdown>
-        <IntegrationCreateDropdownContent enableMockIntegration={env.UNSAFE_ENABLE_MOCK_INTEGRATION} />
+        <IntegrationCreateDropdownContent />
       </MenuDropdown>
     </Menu>
   );

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

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

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

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import {
   ActionIcon,
@@ -15,7 +16,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { IconExternalLink } from "@tabler/icons-react";
-import { z } from "zod/v4";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -24,7 +25,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 { Link, SearchInput, TablePagination, UserAvatar } from "@homarr/ui";
+import { 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,16 +1,25 @@
-import type { Metadata } from "next";
+import Link from "next/link";
 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";
 
-export async function generateMetadata(): Promise<Metadata> {
+interface LinkProps {
+  title: string;
+  subtitle: string;
+  count: number;
+  href: string;
+  hidden?: boolean;
+}
+
+export async function generateMetadata() {
   const t = await getScopedI18n("management");
 
   return {
@@ -20,32 +29,78 @@ export async function generateMetadata(): Promise<Metadata> {
 
 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 }}>
-        {statistics.map((statistic) => (
+        {links.map(
-          <Card component={Link} href={statistic.path} key={statistic.path} radius="lg">
+          (link) =>
-            <Group justify="space-between" wrap="nowrap">
+            !link.hidden && (
-              <Group wrap="nowrap">
+              <Card component={Link} href={link.href} key={link.href} radius="lg">
-                <Text size="2.4rem" fw="bolder">
+                <Group justify="space-between" wrap="nowrap">
-                  {statistic.count}
+                  <Group wrap="nowrap">
-                </Text>
+                    <Text size="2.4rem" fw="bolder">
-                <Stack gap={0}>
+                      {link.count}
-                  <Text c="red" size="xs">
+                    </Text>
-                    {t(`statisticLabel.${statistic.subtitleKey}`)}
+                    <Stack gap={0}>
-                  </Text>
+                      <Text c="red" size="xs">
-                  <Text fw="bold">{t(`statistic.${statistic.titleKey}`)}</Text>
+                        {link.subtitle}
-                </Stack>
+                      </Text>
-              </Group>
+                      <Text fw="bold">{link.title}</Text>
-              <IconArrowRight />
+                    </Stack>
-            </Group>
+                  </Group>
-          </Card>
+                  <IconArrowRight />
-        ))}
+                </Group>
+              </Card>
+            ),
+        )}
       </SimpleGrid>
     </>
   );

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

@@ -1,9 +1,10 @@
 "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/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { searchEngineTypes } from "@homarr/definitions";
@@ -11,7 +12,6 @@ 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/v4";
+import type { z } from "zod";
 
 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/v4";
+import type { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";

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

@@ -1,14 +1,15 @@
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconPencil, IconSearch } from "@tabler/icons-react";
-import { z } from "zod/v4";
+import { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
-import { Link, SearchInput, TablePagination } from "@homarr/ui";
+import { 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/user-settings-form.tsx

@@ -1,26 +0,0 @@
-"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,7 +12,6 @@ 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");
@@ -43,10 +42,6 @@ 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/certificates/_components/remove-certificate.tsx

@@ -15,11 +15,7 @@ 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 = () => {
@@ -31,11 +27,12 @@ export const RemoveCertificate = ({ fileName }: RemoveCertificateProps) => {
         await mutateAsync(
           { fileName },
           {
-            onSuccess() {
+            async 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

@@ -15,11 +15,7 @@ interface RemoveHostnameActionIconProps {
 }
 
 export const RemoveHostnameActionIcon = (input: RemoveHostnameActionIconProps) => {
-  const { mutateAsync } = clientApi.certificates.removeTrustedHostname.useMutation({
+  const { mutateAsync } = clientApi.certificates.removeTrustedHostname.useMutation();
-    async onSuccess() {
-      await revalidatePathActionAsync("/manage/tools/certificates/hostnames");
-    },
-  });
   const { openConfirmModal } = useConfirmModal();
   const t = useI18n();
 
@@ -30,7 +26,8 @@ export const RemoveHostnameActionIcon = (input: RemoveHostnameActionIconProps) =
       // eslint-disable-next-line no-restricted-syntax
       async onConfirm() {
         await mutateAsync(input, {
-          onSuccess() {
+          async onSuccess() {
+            await revalidatePathActionAsync("/manage/tools/certificates/hostnames");
             showSuccessNotification({
               title: t("certificate.action.removeHostname.notification.success.title"),
               message: t("certificate.action.removeHostname.notification.success.message"),

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

@@ -1,4 +1,5 @@
 import { X509Certificate } from "node:crypto";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import {
   Button,
@@ -16,9 +17,8 @@ import {
 import { IconCertificateOff } from "@tabler/icons-react";
 
 import { auth } from "@homarr/auth/next";
-import { getTrustedCertificateHostnamesAsync } from "@homarr/core/infrastructure/certificates";
+import { getTrustedCertificateHostnamesAsync } from "@homarr/certificates/server";
 import { getI18n } from "@homarr/translation/server";
-import { Link } from "@homarr/ui";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";

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

@@ -1,15 +1,15 @@
 import { X509Certificate } from "node:crypto";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Button, Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import { IconAlertTriangle, IconCertificate, IconCertificateOff } from "@tabler/icons-react";
 import 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";

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

@@ -76,7 +76,6 @@ const createColumns = (
     accessorKey: "ports",
     header: t("docker.field.ports.label"),
     Cell({ cell }) {
-      if (!cell.row.original.ports.length) return null;
       return (
         <OverflowBadge overflowCount={1} data={cell.row.original.ports.map((port) => port.PrivatePort.toString())} />
       );
@@ -207,16 +206,15 @@ 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`),

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

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/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/common";
+import { createId } from "@homarr/db/client";
 import type { KubernetesIngress } from "@homarr/definitions";
 import type { ScopedTranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";

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

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

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

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

@@ -1,32 +0,0 @@
-"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, Group } from "@mantine/core";
+import { Box } from "@mantine/core";
 
 import { getScopedI18n } from "@homarr/translation/server";
 
@@ -7,14 +7,11 @@ import "@xterm/xterm/css/xterm.css";
 import { notFound } from "next/navigation";
 
 import { auth } from "@homarr/auth/next";
-import { 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();
@@ -35,14 +32,11 @@ export default async function LogsManagementPage() {
   }
 
   return (
-    <LogContextProvider defaultLevel={logsEnv.LEVEL}>
+    <>
-      <Group justify="space-between" align="center" wrap="nowrap">
+      <DynamicBreadcrumb />
-        <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,29 +8,22 @@ import { Terminal } from "@xterm/xterm";
 
 import { clientApi } from "@homarr/api/client";
 
-import { useLogContext } from "./log-context";
 import classes from "./terminal.module.css";
 
 export const TerminalComponent = () => {
   const ref = useRef<HTMLDivElement>(null);
-  const { activeLevels } = useLogContext();
 
   const terminalRef = useRef<Terminal>(null);
-  clientApi.log.subscribe.useSubscription(
+  clientApi.log.subscribe.useSubscription(undefined, {
-    {
+    onData(data) {
-      levels: activeLevels,
+      terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);
+      terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
     },
-    {
+    onError(err) {
-      onData(data) {
+      // This makes sense as logging might cause an infinite loop
-        terminalRef.current?.writeln(data.message);
+      alert(err);
-        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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, Group, Select, Stack, Switch } from "@mantine/core";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";

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

@@ -4,7 +4,7 @@ import { Button, Group, Radio, Stack } from "@mantine/core";
 import type { DayOfWeek } from "@mantine/dates";
 import dayjs from "dayjs";
 import localeData from "dayjs/plugin/localeData";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, Group, Stack, Switch } from "@mantine/core";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";

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

@@ -18,12 +18,7 @@ interface UserProfileAvatarForm {
 }
 
 export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
-  const { mutate } = clientApi.user.setProfileImage.useMutation({
+  const { mutate } = clientApi.user.setProfileImage.useMutation();
-    async onSuccess() {
-      // Revalidate all as the avatar is used in multiple places
-      await revalidatePathActionAsync("/");
-    },
-  });
   const [opened, { toggle }] = useDisclosure(false);
   const { openConfirmModal } = useConfirmModal();
   const t = useI18n();
@@ -43,7 +38,9 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
           image: base64Url,
         },
         {
-          onSuccess() {
+          async onSuccess() {
+            // Revalidate all as the avatar is used in multiple places
+            await revalidatePathActionAsync("/");
             showSuccessNotification({
               message: tManageAvatar("changeImage.notification.success.message"),
             });
@@ -77,7 +74,9 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
             image: null,
           },
           {
-            onSuccess() {
+            async onSuccess() {
+              // Revalidate all as the avatar is used in multiple places
+              await revalidatePathActionAsync("/");
               showSuccessNotification({
                 message: tManageAvatar("removeImage.notification.success.message"),
               });
@@ -93,24 +92,38 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
     });
   }, [mutate, user.id, openConfirmModal, tManageAvatar]);
 
+  const isCredentialsUser = user.provider === "credentials";
+
   return (
     <Box pos="relative">
-      <Menu opened={opened} keepMounted onChange={toggle} position="bottom-start" withArrow>
+      <Menu
+        opened={opened}
+        keepMounted
+        onChange={isCredentialsUser ? toggle : undefined}
+        position="bottom-start"
+        withArrow
+      >
         <Menu.Target>
-          <UnstyledButton onClick={toggle}>
+          <UnstyledButton
+            component={isCredentialsUser ? undefined : "div"}
+            style={{ cursor: !isCredentialsUser ? "default" : undefined }}
+            onClick={isCredentialsUser ? toggle : undefined}
+          >
             <UserAvatar user={user} size={200} />
-            <Button
+            {isCredentialsUser && (
-              component="div"
+              <Button
-              pos="absolute"
+                component="div"
-              bottom={0}
+                pos="absolute"
-              left={0}
+                bottom={0}
-              size="compact-md"
+                left={0}
-              fw="normal"
+                size="compact-md"
-              variant="default"
+                fw="normal"
-              leftSection={<IconPencil size={18} stroke={1.5} />}
+                variant="default"
-            >
+                leftSection={<IconPencil size={18} stroke={1.5} />}
-              {t("common.action.edit")}
+              >
-            </Button>
+                {t("common.action.edit")}
+              </Button>
+            )}
           </UnstyledButton>
         </Menu.Target>
         <Menu.Dropdown>

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
+import Link from "next/link";
 import { Anchor, Button, Group, Text, Title, Tooltip } from "@mantine/core";
 import { IconCheck } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
@@ -9,7 +10,7 @@ import { MantineReactTable } from "mantine-react-table";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { Link, UserAvatar } from "@homarr/ui";
+import { UserAvatar } from "@homarr/ui";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 interface UserListComponentProps {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { startTransition, useCallback, useState } from "react";
+import { startTransition, useCallback, useMemo, useState } from "react";
 import {
   Badge,
   Button,
@@ -17,12 +17,11 @@ import {
 } from "@mantine/core";
 import { useListState } from "@mantine/hooks";
 import { IconPlus, IconUserCheck } from "@tabler/icons-react";
-import { z } from "zod/v4";
+import { z } from "zod";
 
 import { clientApi } from "@homarr/api/client";
-import type { GroupPermissionKey } from "@homarr/definitions";
 import { everyoneGroup, groupPermissions } from "@homarr/definitions";
-import type { IsValid } from "@homarr/form";
+import type { GroupPermissionKey } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
 import { useModalAction } from "@homarr/modals";
 import { showErrorNotification } from "@homarr/notifications";
@@ -114,9 +113,11 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
     },
   );
 
-  const allForms = [generalForm, securityForm, groupsForm];
+  const allForms = useMemo(() => [generalForm, securityForm, groupsForm], [generalForm, securityForm, groupsForm]);
-  const isValidCallback: IsValid<unknown> | undefined = allForms[active]?.isValid;
+
-  const currentFormValid = isValidCallback?.() ?? true;
+  const activeForm = allForms[active];
+  const isCurrentFormValid = activeForm ? activeForm.isValid : () => true;
+  const canNavigateToNextStep = isCurrentFormValid();
 
   const controlledGoToNextStep = useCallback(async () => {
     if (active + 1 === stepperMax) {
@@ -200,10 +201,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
         <Stepper.Step label={t("step.review.label")} allowStepSelect={false} allowStepClick={false}>
           <Card p="xl" shadow="md" withBorder>
             <Stack maw={300} align="center" mx="auto">
-              <UserAvatar
+              <UserAvatar size="xl" user={{ name: generalForm.values.username, image: null }} />
-                size="xl"
-                user={{ name: generalForm.values.username, email: generalForm.values.email ?? null, image: null }}
-              />
               <Text tt="uppercase" fw="bolder" size="xl">
                 {generalForm.values.username}
               </Text>
@@ -220,7 +218,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
         </Stepper.Completed>
       </Stepper>
       <StepperNavigationComponent
-        hasNext={hasNext && currentFormValid}
+        hasNext={hasNext && canNavigateToNextStep}
         hasPrevious={hasPrevious}
         isComplete={active === stepperMax}
         isLoadingNextStep={isPending}

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

@@ -1,8 +1,8 @@
+import Link from "next/link";
 import { Button, Card, Group } from "@mantine/core";
 import { IconArrowBackUp, IconArrowLeft, IconArrowRight, IconRotate } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
-import { Link } from "@homarr/ui";
 
 interface StepperNavigationComponentProps {
   hasPrevious: boolean;

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

@@ -1,11 +1,10 @@
 "use client";
 
 import type { ReactNode } from "react";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { NavLink } from "@mantine/core";
 
-import { Link } from "@homarr/ui";
-
 interface NavigationLinkProps {
   href: string;
   label: string;

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

@@ -1,11 +1,11 @@
 "use client";
 
+import Link from "next/link";
 import { Alert, Anchor } from "@mantine/core";
 import { IconExclamationCircle } from "@tabler/icons-react";
 
 import { createDocumentationLink } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
-import { Link } from "@homarr/ui";
 
 export const ReservedGroupAlert = () => {
   const t = useI18n();

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

@@ -25,11 +25,7 @@ export const TransferGroupOwnership = ({ group }: TransferGroupOwnershipProps) =
   const [innerOwnerId, setInnerOwnerId] = useState(group.ownerId);
   const { openModal } = useModalAction(UserSelectModal);
   const { openConfirmModal } = useConfirmModal();
-  const { mutateAsync } = clientApi.group.transferOwnership.useMutation({
+  const { mutateAsync } = clientApi.group.transferOwnership.useMutation();
-    async onSuccess() {
-      await revalidatePathActionAsync(`/manage/users/groups/${group.id}`);
-    },
-  });
 
   const handleTransfer = useCallback(() => {
     openModal(
@@ -51,7 +47,7 @@ export const TransferGroupOwnership = ({ group }: TransferGroupOwnershipProps) =
                   userId: id,
                 },
                 {
-                  onSuccess() {
+                  async onSuccess() {
                     setInnerOwnerId(id);
                     showSuccessNotification({
                       title: tRoot("common.notification.transfer.success"),
@@ -60,6 +56,7 @@ export const TransferGroupOwnership = ({ group }: TransferGroupOwnershipProps) =
                         user: name,
                       }),
                     });
+                    await revalidatePathActionAsync(`/manage/users/groups/${group.id}`);
                   },
                   onError() {
                     showErrorNotification({

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

@@ -1,10 +1,10 @@
 import type { PropsWithChildren } from "react";
+import Link from "next/link";
 import { Button, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
 import { IconId, IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
-import { Link } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { NavigationLink } from "./_navigation";

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

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Alert, Anchor, Center, Group, Stack, Table, TableTbody, TableTd, TableTr, Text, Title } from "@mantine/core";
 import { IconExclamationCircle } from "@tabler/icons-react";
@@ -9,7 +10,7 @@ import { auth } from "@homarr/auth/next";
 import { isProviderEnabled } from "@homarr/auth/server";
 import { everyoneGroup } from "@homarr/definitions";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
-import { Link, SearchInput, UserAvatar } from "@homarr/ui";
+import { SearchInput, UserAvatar } from "@homarr/ui";
 
 import { ReservedGroupAlert } from "../_reserved-group-alert";
 import { AddGroupMember } from "./_add-group-member";

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

@@ -44,7 +44,7 @@ export default async function GroupsDetailPage(props: GroupsDetailPageProps) {
       <Card>
         {group.owner ? (
           <Group>
-            <UserAvatar user={group.owner} size={"lg"} />
+            <UserAvatar user={{ name: group.owner.name, image: group.owner.image }} size={"lg"} />
             <Stack align={"start"} gap={3}>
               <Text fw={"bold"}>{group.owner.name}</Text>
               <Text>{group.owner.email}</Text>

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

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
+import Link from "next/link";
 import type { DragEndEvent, DraggableAttributes, DragStartEvent } from "@dnd-kit/core";
 import {
   closestCenter,
@@ -40,7 +41,7 @@ import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { Link, UserAvatarGroup } from "@homarr/ui";
+import { UserAvatarGroup } from "@homarr/ui";
 
 interface GroupsTableProps {
   initialGroupIds: string[];
@@ -56,19 +57,16 @@ export const GroupsTable = ({ groups, initialGroupIds, hasFilter }: GroupsTableP
     () => initialGroupIds.some((groupId, index) => groupIds.indexOf(groupId) !== index),
     [groupIds, initialGroupIds],
   );
-  const { mutateAsync, isPending } = clientApi.group.savePositions.useMutation({
+  const { mutateAsync, isPending } = clientApi.group.savePositions.useMutation();
-    async onSuccess() {
-      await revalidatePathActionAsync("/manage/users/groups");
-    },
-  });
   const handleSavePositionsAsync = async () => {
     await mutateAsync(
       { positions: groupIds },
       {
-        onSuccess() {
+        async onSuccess() {
           showSuccessNotification({
             message: t("group.action.changePosition.notification.success.message"),
           });
+          await revalidatePathActionAsync("/manage/users/groups");
         },
         onError() {
           showSuccessNotification({