feat: add board preview

.dockerignore

@@ -5,5 +5,4 @@ npm-debug.log
 README.md
 .next
 .git
-dev
-.build
+dev

.env.example

@@ -20,6 +20,8 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE'
 # DB_PASSWORD='password'
 # DB_NAME='name-of-database'
 
+# @see https://next-auth.js.org/configuration/options#nextauth_url
+AUTH_URL='http://localhost:3000'
 
 # You can generate the secret via 'openssl rand -base64 32' on Unix
 # @see https://next-auth.js.org/configuration/options#secret

.gitattributes

@@ -1 +0,0 @@
-* text=auto eol=lf

.github/renovate.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:recommended"],
+  "packageRules": [
+    {
+      "matchPackagePatterns": ["^@homarr/"],
+      "enabled": false
+    }
+  ],
+  "updateInternalDeps": true,
+  "rangeStrategy": "bump",
+  "automerge": false,
+  "baseBranches": ["dev"],
+  "dependencyDashboard": false
+}

.github/renovate.json5

@@ -1,19 +0,0 @@
-{
-  $schema: "https://docs.renovatebot.com/renovate-schema.json",
-  extends: ["config:recommended"],
-  packageRules: [
-    {
-      matchPackagePatterns: ["^@homarr/"],
-      enabled: false,
-    },
-    {
-      matchUpdateTypes: ["minor", "patch", "pin", "digest"],
-      automerge: true,
-    },
-  ],
-  updateInternalDeps: true,
-  rangeStrategy: "bump",
-  automerge: false,
-  baseBranches: ["dev"],
-  dependencyDashboard: false,
-}

.github/workflows/build.yml

@@ -0,0 +1,31 @@
+name: Build apps and migration script
+
+on:
+  pull_request:
+    branches: ["*"]
+  push:
+    branches: ["main"]
+  merge_group:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
+
+env:
+  FORCE_COLOR: 3
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup
+        uses: ./tooling/github/setup
+
+      - name: Copy env
+        shell: bash
+        run: cp .env.example .env
+
+      - name: Build
+        run: pnpm build

.github/workflows/code-quality.yml

@@ -1,4 +1,4 @@
-name: "[Quality] Code Analysis"
+name: Code quality analysis
 
 on:
   pull_request:
@@ -8,7 +8,7 @@ on:
   merge_group:
 
 concurrency:
-  group: "${{ github.workflow }}-${{ github.ref }}"
+  group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 # You can leverage Vercel Remote Caching with Turbo to speed up your builds
@@ -66,43 +66,3 @@ jobs:
 
       - name: Test
         run: pnpm test
-
-      - name: "Report Coverage"
-        # Set if: always() to also generate the report if tests are failing
-        # Only works if you set `reportOnFailure: true` in your vite config as specified above
-        if: always()
-        uses: davelosert/vitest-coverage-report-action@v2
-
-  e2e:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup
-        uses: ./tooling/github/setup
-      - name: Build docker image
-        id: build-docker-image
-        uses: docker/build-push-action@v6
-        with:
-          platforms: linux/amd64
-          context: .
-          push: false
-          tags: homarr-e2e
-          network: host
-        env:
-          SKIP_ENV_VALIDATION: true
-      - name: Run E2E Tests
-        shell: bash
-        run: pnpm test:e2e
-
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup
-        uses: ./tooling/github/setup
-      - name: Copy env
-        shell: bash
-        run: cp .env.example .env
-      - name: Build
-        run: pnpm build

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

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

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

@@ -1,19 +0,0 @@
-name: "[Conventions] Semantic PRs"
-
-on:
-  pull_request_target:
-    types:
-      - opened
-      - edited
-      - synchronize
-
-permissions:
-  pull-requests: read
-
-jobs:
-  validate-pull-request-title:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: amannn/action-semantic-pull-request@v5
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -1,40 +0,0 @@
-name: "[Crowdin] Download translations"
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "0 0 * * *" # every day at midnight
-
-jobs:
-  download-crowdin-translations:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Obtain token
-        id: obtainToken
-        uses: tibdex/github-app-token@v2
-        with:
-          private_key: ${{ secrets.CROWDIN_APP_PRIVATE_KEY }}
-          app_id: ${{ secrets.CROWDIN_APP_ID }}
-
-      - name: Download Crowdin translations
-        uses: crowdin/github-action@v2
-        with:
-          upload_sources: false
-          upload_translations: false
-          download_translations: true
-          localization_branch_name: crowdin
-          create_pull_request: true
-          pull_request_title: "chore(lang): updated translations from crowdin"
-          pull_request_body: "New Crowdin translations by [Crowdin GH Action](https://github.com/crowdin/github-action)"
-          pull_request_base_branch_name: "dev"
-          github_user_name: "Crowdin Homarr"
-          github_user_email: "190541745+homarr-crowdin[bot]@users.noreply.github.com"
-          skip_untranslated_strings: true
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/crowdin-upload.yml

@@ -1,28 +0,0 @@
-name: "[Crowdin] Upload translations"
-
-on:
-  workflow_dispatch:
-  push:
-    paths:
-      - "packages/translation/src/lang/**"
-    branches: [dev]
-
-jobs:
-  upload-crowdin-translations:
-    # 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
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Upload Crowdin translations
-        uses: crowdin/github-action@v2
-        with:
-          upload_sources: true
-          upload_translations: true
-          download_translations: false
-        env:
-          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

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

@@ -1,118 +0,0 @@
-name: "[Deployment] Release"
-
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-    inputs:
-      send-notifications:
-        type: boolean
-        required: false
-        default: true
-        description: Send notifications
-      push-image:
-        type: boolean
-        required: false
-        default: true
-        description: Push Docker Image
-
-permissions:
-  contents: write
-  packages: write
-
-env:
-  SKIP_ENV_VALIDATION: true
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-  TURBO_TELEMETRY_DISABLED: 1
-
-concurrency: production
-
-jobs:
-  deploy:
-    name: Deploy docker image
-    runs-on: ubuntu-latest
-    steps:
-      - name: Discord notification
-        if: ${{ github.events.inputs.send-notifications != false }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "Deployment of an image has been triggered: [run ${{ github.run_number }}](<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>)"
-      - uses: actions/checkout@v4
-      - name: Get Next Version
-        id: semver
-        uses: ietf-tools/semver-action@v1
-        with:
-          token: ${{ github.token }}
-          branch: dev
-      - name: Discord notification
-        if: ${{ github.events.inputs.send-notifications != false }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "Semver computed next tag to be ${{ steps.semver.outputs.next }}. Current is ${{ steps.semver.outputs.current }}. Building images..."
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
-          tags: |
-            type=raw,value=alpha
-            type=raw,value=early-adopters
-      #          tags: |
-      #            type=raw,value=latest
-      #            type=raw,value=${{ steps.semver.outputs.next }}
-      - name: Build and push
-        id: buildPushAction
-        uses: docker/build-push-action@v6
-        if: ${{ github.events.inputs.push-image == 'true' || github.events.inputs.push-image == null }}
-        with:
-          platforms: linux/amd64,linux/arm64
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          network: host
-        env:
-          SKIP_ENV_VALIDATION: true
-      - name: Build
-        id: buildPushDryAction
-        uses: docker/build-push-action@v6
-        if: ${{ github.events.inputs.push-image == 'false' }}
-        with:
-          platforms: linux/amd64,linux/arm64
-          context: .
-          push: false
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          network: host
-        env:
-          SKIP_ENV_VALIDATION: true
-      - name: Discord notification
-        if: ${{ github.events.inputs.send-notifications != false && (github.events.inputs.push-image == 'true' || github.events.inputs.push-image == null) }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "Deployment of image has completed. Image ID is '${{ steps.buildPushAction.outputs.imageid }}'."
-      - name: Discord notification
-        if: ${{ github.events.inputs.send-notifications != false && !(github.events.inputs.push-image == 'true' || github.events.inputs.push-image == null) }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "Deployment of image has completed. Image ID is '${{ steps.buildPushDryAction.outputs.imageid }}'. This was a dry run."

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

@@ -1,101 +0,0 @@
-name: "[Deployment] Automatic Weekly Release"
-
-on:
-  schedule:
-    - cron: "0 19 * * 5" # https://crontab.guru/#0_19_*_*_5
-  workflow_dispatch:
-    inputs:
-      send-notifications:
-        type: boolean
-        required: false
-        default: true
-        description: Send notifications
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  create-and-merge-pr:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Discord notification
-        if: ${{ github.events.inputs.send-notifications }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "Automatic release has been triggered: [run ${{ github.run_number }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})"
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Get Next Version
-        id: semver
-        uses: ietf-tools/semver-action@v1
-        with:
-          token: ${{ github.token }}
-          branch: dev
-      - name: Create pull request
-        run: "gh pr create --title \"chore(release): automatic release ${{ steps.semver.outputs.next }}\" --body \"**This is an automatic release**.<br/>Manual action may be required for major bumps.<br/>Detected change to be ``${{ steps.semver.outputs.bump }}``<br/>Bump version from ``${{ steps.semver.outputs.current }}`` to ``${{ steps.semver.outputs.next }}``\" --base main --head dev --label automerge"
-        env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
-      - name: Discord notification
-        if: ${{ github.events.inputs.send-notifications }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "Created a release PR ${{ steps.create-pull-request.outputs.url }} for version ${{ steps.semver.outputs.next }} (new behaviour: ${{ steps.semver.outputs.bump }})"
-      - name: Obtain token
-        id: obtainApprovalToken
-        uses: tibdex/github-app-token@v2
-        with:
-          private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
-      - name: Approve PR
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainApprovalToken.outputs.token }}
-        run: |
-          gh pr review --approve --body "Automatically approved by GitHub Action"
-      - name: Obtain token
-        id: obtainMergeToken
-        uses: tibdex/github-app-token@v2
-        with:
-          private_key: ${{ secrets.RENOVATE_MERGE_PRIVATE_KEY }}
-          app_id: ${{ secrets.RENOVATE_MERGE_APP_ID }}
-      - id: automerge
-        if: ${{ steps.semver.outputs.bump != 'major' }}
-        name: automerge
-        uses: "pascalgn/automerge-action@v0.16.4"
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainMergeToken.outputs.token }}
-          MERGE_METHOD: merge # we prefer merge commits for merging to master
-          MERGE_COMMIT_MESSAGE: "chore(release): automatic release ${{ steps.semver.outputs.next }}"
-          MERGE_DELETE_BRANCH: false # never set to true!
-          PULL_REQUEST: "${{ steps.create-pull-request.outputs.pr_number }}"
-          MERGE_RETRIES: 20 # 20 retries * MERGE_RETRY_SLEEP until step fails
-          MERGE_RETRY_SLEEP: 10000 # 10 seconds * MERGE_RETRIES until step fails
-          MERGE_REQUIRED_APPROVALS: 0 # do not require approvals
-
-      - name: Merged Discord notification
-        if: ${{ steps.automerge.outputs.mergeResult == 'merged' && github.events.inputs.send-notifications }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "Merged PR ${{ steps.create-pull-request.outputs.url }} for release ${{ steps.semver.outputs.next }}"
-      - name: Major Bump Discord notification
-        if: ${{ steps.semver.outputs.bump == 'major' && github.events.inputs.send-notifications }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "The release PR must be manually merged because the next version is a major version: ${{ steps.create-pull-request.outputs.url }} for release ${{ steps.semver.outputs.next }}"
-      - name: Discord Fail Notification
-        if: failure() && github.events.inputs.send-notifications
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: "The automatic release workflow [run ${{ github.run_number }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}) has failed"

.github/workflows/docker-image.yml

@@ -0,0 +1,89 @@
+name: Docker image
+
+on:
+  pull_request:
+    types:
+      - closed
+    branches:
+      - main
+  workflow_dispatch: {}
+
+permissions:
+  contents: write
+  packages: write
+
+env:
+  TURBO_TELEMETRY_DISABLED: 1
+
+concurrency: production
+
+jobs:
+  deploy:
+    name: Deploy docker image
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
+    steps:
+      - name: Discord notification
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: "Deployment of an image has been triggered"
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build artifacts
+        run: pnpm build
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Bump version and push tag
+        id: githubTagAction
+        uses: anothrNick/github-tag-action@1.67.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          WITH_V: false
+          DRY_RUN: true
+      - name: Discord notification
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: "Image has been tagged as ${{ steps.githubTagAction.outputs.new_tag }}"
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest
+            type=raw,value=${{ steps.githubTagAction.outputs.new_tag }}
+      - name: Build and push
+        id: buildPushAction
+        uses: docker/build-push-action@v5
+        with:
+          platforms: linux/amd64,linux/arm64,linux/riscv64,linux/arm/v7,linux/arm/v6
+          context: .
+          push: false
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          network: host
+      - name: Discord notification
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: "Image built with ID ${{ steps.buildPushAction.outputs.imageid }}"

.github/workflows/renovate-automatic-approval.yml

@@ -1,25 +0,0 @@
-name: "[Dependency Updates] Auto Approve"
-on:
-  pull_request:
-    types: [opened, synchronize]
-
-jobs:
-  approve-renovate-prs:
-    runs-on: ubuntu-latest
-    if: github.actor_id == 158783068 # Id of renovate bot see https://api.github.com/users/homarr-renovate%5Bbot%5D
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-      - name: Obtain token
-        id: obtainToken
-        uses: tibdex/github-app-token@v2
-        with:
-          private_key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          app_id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
-      - name: Install GitHub CLI
-        run: sudo apt-get install -y gh
-      - name: Approve Renovate PRs
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: |
-          gh pr review ${{github.event.pull_request.number}} --approve --body "Automatically approved by GitHub Action"

.gitignore

@@ -14,8 +14,8 @@ coverage
 out/
 next-env.d.ts
 
-# artifacts
-packages/db/migrations/*/migrate.cjs
+# nest.js
+apps/nestjs/dist
 
 # nitro
 .nitro/
@@ -48,16 +48,7 @@ yarn-error.log*
 .turbo
 
 # database
-*.sqlite
+db.sqlite
 
 # logs
-*.log
-
-apps/tasks/tasks.cjs
-apps/websocket/wssServer.cjs
-apps/nextjs/.million/
-packages/cli/cli.cjs
-
-
-#personal backgrounds
-apps/nextjs/public/images/background.png
+*.log

.nvmrc

@@ -1 +1 @@
-22.12.0
+20.12.2

.run/db_migration_mysql_generate.run.xml

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

.run/db_migration_sqlite_generate.run.xml

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

.run/db_push.run.xml

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

.run/db_studio.run.xml

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

.run/dev.run.xml

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

.run/docker_dev.run.xml

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

.run/format.run.xml

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

.run/format_fix.run.xml

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

.run/test.run.xml

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

.run/test_ui.run.xml

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

.vscode/extensions.json

@@ -2,8 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "yoavbls.pretty-ts-errors",
-    "million.million-lint",
-    "lokalise.i18n-ally"
+    "yoavbls.pretty-ts-errors"
   ]
 }

.vscode/i18n-ally-custom-framework.yml

@@ -1,36 +0,0 @@
-# .vscode/i18n-ally-custom-framework.yml
-
-# An array of strings which contain Language Ids defined by VS Code
-# You can check available language ids here: https://code.visualstudio.com/docs/languages/identifiers
-languageIds:
-  - javascript
-  - typescript
-  - javascriptreact
-  - typescriptreact
-
-# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
-# You should unescape RegEx strings in order to fit in the YAML file
-# To help with this, you can use https://www.freeformatter.com/json-escape.html
-usageMatchRegex:
-  # The following example shows how to detect `t("your.i18n.keys")`
-  # the `{key}` will be placed by a proper keypath matching regex,
-  # you can ignore it and use your own matching rules as well
-  - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
-
-# A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
-# and works like how the i18next framework identifies the namespace scope from the
-# useTranslation() hook.
-# You should unescape RegEx strings in order to fit in the YAML file
-# To help with this, you can use https://www.freeformatter.com/json-escape.html
-scopeRangeRegex: "(getScopedI18n|useScopedI18n)\\(\\s*['\"](.*?)['\"]\\)"
-
-# An array of strings containing refactor templates.
-# The "$1" will be replaced by the keypath specified.
-# Optional: uncomment the following two lines to use
-
-# refactorTemplates:
-#  - i18n.get("$1")
-
-
-# If set to true, only enables this custom framework (will disable all built-in frameworks)
-monopoly: true

.vscode/settings.json

@@ -4,35 +4,11 @@
       "mode": "auto"
     }
   ],
-  "eslint.experimental.useFlatConfig": true,
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "js/ts.implicitProjectConfig.experimentalDecorators": true,
-  "prettier.configPath": "./tooling/prettier/index.mjs",
   "cSpell.words": [
-    "ajnart",
-    "cqmin",
-    "gridstack",
-    "homarr",
-    "jellyfin",
-    "mantine",
-    "manuel-rw",
-    "Meierschlumpf",
-    "overseerr",
-    "Sabnzbd",
-    "SeDemal",
-    "Sonarr",
     "superjson",
-    "tabler",
-    "trpc",
-    "Umami"
-  ],
-  "i18n-ally.dirStructure": "auto",
-  "i18n-ally.displayLanguage": "en",
-  "i18n-ally.enabledFrameworks": [
-    "custom"
-  ],
-  "i18n-ally.localesPaths": [
-    "packages/translation/src/lang",
-  ],
-  "i18n-ally.keystyle": "auto",
+    "homarr",
+    "trpc"
+  ]
 }

Dockerfile

@@ -1,80 +1,77 @@
-FROM node:22.12.0-alpine AS base
+FROM node:20.12.2-alpine AS base
 
 FROM base AS builder
 RUN apk add --no-cache libc6-compat
 RUN apk update
-
 # Set working directory
 WORKDIR /app
+COPY . .
+RUN npm i -g turbo
+RUN turbo prune @homarr/nextjs --docker --out-dir ./next-out
+RUN turbo prune @homarr/tasks --docker --out-dir ./tasks-out
+RUN turbo prune @homarr/websocket --docker --out-dir ./websocket-out
+RUN turbo prune @homarr/db --docker --out-dir ./migration-out
+
+# Add lockfile and package.json's of isolated subworkspace
+FROM base AS installer
 RUN apk add --no-cache libc6-compat curl bash
 RUN apk update
-COPY . .
+WORKDIR /app
 
-RUN corepack enable pnpm && pnpm install --recursive --frozen-lockfile
+# First install the dependencies (as they change less often)
+COPY .gitignore .gitignore
 
-# Install sharp for image optimization
+COPY --from=builder /app/tasks-out/json/ .
+COPY --from=builder /app/tasks-out/pnpm-lock.yaml ./pnpm-lock.yaml
+RUN corepack enable pnpm && pnpm install
+
+COPY --from=builder /app/websocket-out/json/ .
+COPY --from=builder /app/websocket-out/pnpm-lock.yaml ./pnpm-lock.yaml
+RUN corepack enable pnpm && pnpm install
+
+COPY --from=builder /app/migration-out/json/ .
+COPY --from=builder /app/migration-out/pnpm-lock.yaml ./pnpm-lock.yaml
+RUN corepack enable pnpm && pnpm install
+
+COPY --from=builder /app/next-out/json/ .
+COPY --from=builder /app/next-out/pnpm-lock.yaml ./pnpm-lock.yaml
 RUN corepack enable pnpm && pnpm install sharp -w
 
-# Copy static data as it is not part of the build
-COPY static-data ./static-data
-ARG SKIP_ENV_VALIDATION='true'
-ARG CI='true'
-ARG DISABLE_REDIS_LOGS='true'
-RUN corepack enable pnpm && pnpm build
+# Build the project
+COPY --from=builder /app/tasks-out/full/ .
+COPY --from=builder /app/websocket-out/full/ .
+COPY --from=builder /app/next-out/full/ .
+COPY --from=builder /app/migration-out/full/ .
+ARG SKIP_ENV_VALIDATION=true
+RUN corepack enable pnpm && pnpm turbo run build
 
 FROM base AS runner
 WORKDIR /app
 
-# gettext is required for envsubst
-RUN apk add --no-cache redis nginx bash gettext
-RUN mkdir /appdata
-VOLUME /appdata
-RUN mkdir /secrets
-VOLUME /secrets
-
-
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-# Enable homarr cli
-COPY --from=builder --chown=nextjs:nodejs /app/packages/cli/cli.cjs /app/apps/cli/cli.cjs
-RUN echo $'#!/bin/bash\ncd /app/apps/cli && node ./cli.cjs "$@"' > /usr/bin/homarr
-RUN chmod +x /usr/bin/homarr
+RUN apk add --no-cache redis
 
 # Don't run production as root
-RUN chown -R nextjs:nodejs /appdata
-RUN chown -R nextjs:nodejs /secrets
-RUN mkdir -p /var/cache/nginx && chown -R nextjs:nodejs /var/cache/nginx && \
-    mkdir -p /var/log/nginx && chown -R nextjs:nodejs /var/log/nginx && \
-    mkdir -p /var/lib/nginx && chown -R nextjs:nodejs /var/lib/nginx && \
-    touch /run/nginx/nginx.pid && chown -R nextjs:nodejs /run/nginx/nginx.pid && \
-    mkdir -p /etc/nginx/templates /etc/nginx/ssl/certs && chown -R nextjs:nodejs /etc/nginx
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
 USER nextjs
 
-COPY --from=builder /app/apps/nextjs/next.config.mjs .
-COPY --from=builder /app/apps/nextjs/package.json .
+COPY --from=installer /app/apps/nextjs/next.config.mjs .
+COPY --from=installer /app/apps/nextjs/package.json .
 
-COPY --from=builder --chown=nextjs:nodejs /app/apps/tasks/tasks.cjs ./apps/tasks/tasks.cjs
-COPY --from=builder --chown=nextjs:nodejs /app/apps/websocket/wssServer.cjs ./apps/websocket/wssServer.cjs
-COPY --from=builder --chown=nextjs:nodejs /app/node_modules/better-sqlite3/build/Release/better_sqlite3.node /app/build/better_sqlite3.node
+COPY --from=installer --chown=nextjs:nodejs /app/apps/tasks/tasks.cjs ./apps/tasks/tasks.cjs
+COPY --from=installer --chown=nextjs:nodejs /app/apps/websocket/wssServer.cjs ./apps/websocket/wssServer.cjs
+COPY --from=installer --chown=nextjs:nodejs /app/node_modules/better-sqlite3/build/Release/better_sqlite3.node /app/build/better_sqlite3.node
 
-COPY --from=builder --chown=nextjs:nodejs /app/packages/db/migrations ./db/migrations
+COPY --from=installer --chown=nextjs:nodejs /app/packages/db/migrations ./db/migrations
+COPY --from=installer --chown=nextjs:nodejs /app/packages/db/migrate.cjs ./db/migrate.cjs
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/apps/nextjs/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/apps/nextjs/.next/static ./apps/nextjs/.next/static
-COPY --from=builder --chown=nextjs:nodejs /app/apps/nextjs/public ./apps/nextjs/public
+COPY --from=installer --chown=nextjs:nodejs /app/apps/nextjs/.next/standalone ./
+COPY --from=installer --chown=nextjs:nodejs /app/apps/nextjs/.next/static ./apps/nextjs/.next/static
+COPY --from=installer --chown=nextjs:nodejs /app/apps/nextjs/public ./apps/nextjs/public
 COPY --chown=nextjs:nodejs scripts/run.sh ./run.sh
-COPY --chown=nextjs:nodejs scripts/generateEncryptionKey.js ./generateEncryptionKey.js
-COPY --chown=nextjs:nodejs packages/redis/redis.conf /app/redis.conf
-COPY --chown=nextjs:nodejs nginx.conf /etc/nginx/templates/nginx.conf
 
-
-ENV DB_URL='/appdata/db/db.sqlite'
-ENV DB_DIALECT='sqlite'
-ENV DB_DRIVER='better-sqlite3'
-ENV AUTH_PROVIDERS='credentials'
+ENV DB_URL='/app/db/db.sqlite'
 
 CMD ["sh", "run.sh"]

README.md

@@ -1,7 +1,5 @@
 # THIS PROJECT IS STILL UNSTABLE AND WE DO NOT PROVIDE ANY SUPPORT FOR ISSUES THAT OCCURE.
-
 ## PLEASE DO NOT OPEN ANY ISSUES OR DISCUSSIONS
-
 ### EVERYTHING IS SUBJECT TO CHANGE
 
 Please use [this](https://github.com/ajnart/homarr) version of Homarr when you want to use it

apps/nextjs/eslint.config.js

@@ -1,13 +0,0 @@
-import baseConfig from "@homarr/eslint-config/base";
-import nextjsConfig from "@homarr/eslint-config/nextjs";
-import reactConfig from "@homarr/eslint-config/react";
-
-/** @type {import('typescript-eslint').Config} */
-export default [
-  {
-    ignores: [".next/**"],
-  },
-  ...baseConfig,
-  ...reactConfig,
-  ...nextjsConfig,
-];

apps/nextjs/next.config.mjs

@@ -1,41 +1,31 @@
 // Importing env files here to validate on build
+import "./src/env.mjs";
 import "@homarr/auth/env.mjs";
 
-import MillionLint from "@million/lint";
-import createNextIntlPlugin from "next-intl/plugin";
-
-import "./src/env.mjs";
-
-// Package path does not work... so we need to use relative path
-const withNextIntl = createNextIntlPlugin("../../packages/translation/src/request.ts");
-
 /** @type {import("next").NextConfig} */
-const nextConfig = {
+const config = {
   output: "standalone",
   reactStrictMode: true,
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
-  webpack: (config, { isServer }) => {
-    if (isServer) {
-      config.module.rules.push({
-        test: /\.node$/,
-        loader: "node-loader",
-      });
-    }
-
-    return config;
-  },
   experimental: {
-    optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
+    optimizePackageImports: [
+      "@mantine/core",
+      "@mantine/hooks",
+      "@tabler/icons-react",
+    ],
   },
-  transpilePackages: ["@homarr/ui", "@homarr/notifications", "@homarr/modals", "@homarr/spotlight", "@homarr/widgets"],
+  transpilePackages: [
+    "@homarr/ui",
+    "@homarr/notifications",
+    "@homarr/modals",
+    "@homarr/spotlight",
+    "@homarr/widgets",
+  ],
   images: {
     domains: ["cdn.jsdelivr.net"],
   },
 };
 
-// Skip transform is used because of webpack loader, without it for example 'Tooltip.Floating' will not work and show an error
-const withMillionLint = MillionLint.next({ rsc: true, skipTransform: true, telemetry: false });
-
-export default withNextIntl(nextConfig);
+export default config;

apps/nextjs/package.json

@@ -7,72 +7,54 @@
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev",
+    "lint": "dotenv -v SKIP_ENV_VALIDATION=1 next lint",
     "format": "prettier --check . --ignore-path ../../.gitignore",
-    "lint": "eslint",
     "start": "pnpm with-env next start",
     "typecheck": "tsc --noEmit",
     "with-env": "dotenv -e ../../.env --"
   },
-  "prettier": "@homarr/prettier-config",
   "dependencies": {
-    "@homarr/analytics": "workspace:^0.1.0",
     "@homarr/api": "workspace:^0.1.0",
     "@homarr/auth": "workspace:^0.1.0",
     "@homarr/common": "workspace:^0.1.0",
-    "@homarr/cron-job-status": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/form": "workspace:^0.1.0",
-    "@homarr/gridstack": "^1.11.2",
-    "@homarr/integrations": "workspace:^0.1.0",
+    "@homarr/gridstack": "^1.0.0",
     "@homarr/log": "workspace:^",
     "@homarr/modals": "workspace:^0.1.0",
-    "@homarr/modals-collection": "workspace:^0.1.0",
     "@homarr/notifications": "workspace:^0.1.0",
-    "@homarr/old-schema": "workspace:^0.1.0",
-    "@homarr/redis": "workspace:^0.1.0",
-    "@homarr/server-settings": "workspace:^0.1.0",
     "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^7.14.3",
-    "@mantine/core": "^7.14.3",
-    "@mantine/hooks": "^7.14.3",
-    "@mantine/modals": "^7.14.3",
-    "@mantine/tiptap": "^7.14.3",
-    "@million/lint": "1.0.13",
-    "@t3-oss/env-nextjs": "^0.11.1",
-    "@tabler/icons-react": "^3.24.0",
-    "@tanstack/react-query": "^5.62.2",
-    "@tanstack/react-query-devtools": "^5.62.2",
-    "@tanstack/react-query-next-experimental": "5.62.2",
-    "@trpc/client": "next",
+    "@mantine/colors-generator": "^7.9.0",
+    "@mantine/hooks": "^7.9.0",
+    "@mantine/modals": "^7.9.0",
+    "@mantine/tiptap": "^7.9.0",
+    "@t3-oss/env-nextjs": "^0.10.1",
+    "@tanstack/react-query": "^5.34.1",
+    "@tanstack/react-query-devtools": "^5.34.1",
+    "@tanstack/react-query-next-experimental": "5.34.1",
+    "@trpc/client": "11.0.0-rc.364",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
     "@xterm/addon-canvas": "^0.7.0",
     "@xterm/addon-fit": "0.10.0",
     "@xterm/xterm": "^5.5.0",
-    "chroma-js": "^3.1.2",
-    "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
-    "dotenv": "^16.4.7",
-    "flag-icons": "^7.2.3",
-    "glob": "^11.0.0",
-    "jotai": "^2.10.3",
-    "mantine-react-table": "2.0.0-beta.7",
-    "next": "^14.2.20",
-    "postcss-preset-mantine": "^1.17.0",
-    "prismjs": "^1.29.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.1.2",
-    "react-simple-code-editor": "^0.14.1",
-    "sass": "^1.82.0",
+    "chroma-js": "^2.4.2",
+    "dayjs": "^1.11.11",
+    "dotenv": "^16.4.5",
+    "glob": "^10.3.12",
+    "jotai": "^2.8.0",
+    "next": "^14.2.3",
+    "postcss-preset-mantine": "^1.15.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "sass": "^1.76.0",
     "superjson": "2.2.1",
-    "swagger-ui-react": "^5.18.2",
     "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {
@@ -80,15 +62,22 @@
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
     "@types/chroma-js": "2.4.4",
-    "@types/node": "^22.10.1",
-    "@types/prismjs": "^1.26.5",
-    "@types/react": "^18.3.13",
-    "@types/react-dom": "^18.3.1",
-    "@types/swagger-ui-react": "^4.18.3",
-    "concurrently": "^9.1.0",
-    "eslint": "^9.16.0",
-    "node-loader": "^2.1.0",
-    "prettier": "^3.4.2",
-    "typescript": "^5.7.2"
-  }
+    "@types/node": "^20.12.8",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.57.0",
+    "prettier": "^3.2.5",
+    "tsx": "4.9.0",
+    "typescript": "^5.4.5"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@homarr/eslint-config/base",
+      "@homarr/eslint-config/nextjs",
+      "@homarr/eslint-config/react"
+    ]
+  },
+  "prettier": "@homarr/prettier-config"
 }

apps/nextjs/public/images/apps/imdb.svg

@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 575 289.83" width="575" height="289.83"><defs><path d="M575 24.91C573.44 12.15 563.97 1.98 551.91 0C499.05 0 76.18 0 23.32 0C10.11 2.17 0 14.16 0 28.61C0 51.84 0 237.64 0 260.86C0 276.86 12.37 289.83 27.64 289.83C79.63 289.83 495.6 289.83 547.59 289.83C561.65 289.83 573.26 278.82 575 264.57C575 216.64 575 48.87 575 24.91Z" id="d1pwhf9wy2"></path><path d="M69.35 58.24L114.98 58.24L114.98 233.89L69.35 233.89L69.35 58.24Z" id="g5jjnq26yS"></path><path d="M201.2 139.15C197.28 112.38 195.1 97.5 194.67 94.53C192.76 80.2 190.94 67.73 189.2 57.09C185.25 57.09 165.54 57.09 130.04 57.09L130.04 232.74L170.01 232.74L170.15 116.76L186.97 232.74L215.44 232.74L231.39 114.18L231.54 232.74L271.38 232.74L271.38 57.09L211.77 57.09L201.2 139.15Z" id="i3Prh1JpXt"></path><path d="M346.71 93.63C347.21 95.87 347.47 100.95 347.47 108.89C347.47 115.7 347.47 170.18 347.47 176.99C347.47 188.68 346.71 195.84 345.2 198.48C343.68 201.12 339.64 202.43 333.09 202.43C333.09 190.9 333.09 98.66 333.09 87.13C338.06 87.13 341.45 87.66 343.25 88.7C345.05 89.75 346.21 91.39 346.71 93.63ZM367.32 230.95C372.75 229.76 377.31 227.66 381.01 224.67C384.7 221.67 387.29 217.52 388.77 212.21C390.26 206.91 391.14 196.38 391.14 180.63C391.14 174.47 391.14 125.12 391.14 118.95C391.14 102.33 390.49 91.19 389.48 85.53C388.46 79.86 385.93 74.71 381.88 70.09C377.82 65.47 371.9 62.15 364.12 60.13C356.33 58.11 343.63 57.09 321.54 57.09C319.27 57.09 307.93 57.09 287.5 57.09L287.5 232.74L342.78 232.74C355.52 232.34 363.7 231.75 367.32 230.95Z" id="a4ov9rRGQm"></path><path d="M464.76 204.7C463.92 206.93 460.24 208.06 457.46 208.06C454.74 208.06 452.93 206.98 452.01 204.81C451.09 202.65 450.64 197.72 450.64 190C450.64 185.36 450.64 148.22 450.64 143.58C450.64 135.58 451.04 130.59 451.85 128.6C452.65 126.63 454.41 125.63 457.13 125.63C459.91 125.63 463.64 126.76 464.6 129.03C465.55 131.3 466.03 136.15 466.03 143.58C466.03 146.58 466.03 161.58 466.03 188.59C465.74 197.84 465.32 203.21 464.76 204.7ZM406.68 231.21L447.76 231.21C449.47 224.5 450.41 220.77 450.6 220.02C454.32 224.52 458.41 227.9 462.9 230.14C467.37 232.39 474.06 233.51 479.24 233.51C486.45 233.51 492.67 231.62 497.92 227.83C503.16 224.05 506.5 219.57 507.92 214.42C509.34 209.26 510.05 201.42 510.05 190.88C510.05 185.95 510.05 146.53 510.05 141.6C510.05 131 509.81 124.08 509.34 120.83C508.87 117.58 507.47 114.27 505.14 110.88C502.81 107.49 499.42 104.86 494.98 102.98C490.54 101.1 485.3 100.16 479.26 100.16C474.01 100.16 467.29 101.21 462.81 103.28C458.34 105.35 454.28 108.49 450.64 112.7C450.64 108.89 450.64 89.85 450.64 55.56L406.68 55.56L406.68 231.21Z" id="fk968BpsX"></path></defs><g><g><g><use xlink:href="#d1pwhf9wy2" opacity="1" fill="#f6c700" fill-opacity="1"></use><g><use xlink:href="#d1pwhf9wy2" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#g5jjnq26yS" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#g5jjnq26yS" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#i3Prh1JpXt" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#i3Prh1JpXt" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#a4ov9rRGQm" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a4ov9rRGQm" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#fk968BpsX" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#fk968BpsX" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>

apps/nextjs/public/images/apps/lastfm.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="708.767" height="179.332">
-  <path fill="#d51007" d="m158.431 165.498-8.354-22.708s-13.575 15.14-33.932 15.14c-18.013 0-30.802-15.662-30.802-40.721 0-32.106 16.182-43.591 32.107-43.591 22.969 0 30.277 14.878 36.543 33.934l8.354 26.103c8.351 25.318 24.013 45.678 69.17 45.678 32.37 0 54.295-9.918 54.295-36.02 0-21.143-12.009-32.107-34.458-37.328l-16.705-3.654c-11.484-2.61-14.877-7.309-14.877-15.14 0-8.875 7.046-14.096 18.533-14.096 12.529 0 19.315 4.699 20.36 15.923l26.102-3.133c-2.088-23.492-18.271-33.15-44.896-33.15-23.491 0-46.462 8.875-46.462 37.327 0 17.75 8.614 28.975 30.277 34.195l17.752 4.175c13.312 3.133 17.748 8.614 17.748 16.185 0 9.656-9.396 13.572-27.146 13.572-26.364 0-37.325-13.834-43.591-32.89l-8.614-26.101c-10.961-33.934-28.452-46.463-63.169-46.463-38.37 0-58.731 24.275-58.731 65.517 0 39.677 20.361 61.08 56.906 61.08 29.492 0 43.59-13.834 43.59-13.834zM46.726 153.229c-2.61.784-5.221 1.306-8.614 1.306-6.265 0-10.703-2.87-10.703-10.442V1.827H0v148.792c0 19.577 13.575 27.672 29.497 27.672 5.221 0 10.181-.785 16.446-2.349l.783-22.713zm330.185-4.176c-6.787 4.701-12.529 7.051-20.36 7.051-9.92 0-15.401-5.221-15.401-18.012V77.006h36.023V55.603H341.41V26.625l-27.669 3.394v25.583h-17.49v21.403h17.49v66.826c0 24.02 13.834 35.5 36.284 35.5 12.269 0 23.232-2.346 31.847-7.305l-4.961-22.973zm23.807 9.396c0 10.705 8.354 19.318 19.056 19.318 11.226 0 19.578-8.613 19.578-19.318 0-10.963-8.353-19.313-19.578-19.313-10.702 0-19.056 8.35-19.056 19.313zm67.009-81.443v99.195h27.409V77.006h30.803V55.603h-30.803V44.638c0-16.444 7.049-21.665 18.534-21.665 8.092 0 13.574 1.825 19.839 5.221l4.437-22.974C530.638 1.827 522.023 0 511.582 0c-22.973 0-43.855 10.963-43.855 43.593v12.01h-17.489v21.403h17.489zm167.427 2.352c-3.133-19.578-15.923-26.629-32.63-26.629-16.706 0-31.062 7.571-37.329 26.104l-3.393-23.23h-22.188v120.598h27.409v-68.129c0-23.235 12.008-32.11 24.799-32.11 13.312 0 18.795 8.875 18.795 23.232V176.2h27.147v-68.39c0-22.974 12.269-31.849 25.061-31.849 13.052 0 18.532 8.875 18.532 23.232v77.006h27.409v-86.66c0-25.843-15.14-36.81-35.24-36.81-16.965 0-32.107 7.571-38.372 26.629z"/>
-</svg>

apps/nextjs/public/images/apps/lidarr.svg

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="1024" height="1024" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <clipPath id="a">
-      <circle cx="512" cy="512" r="410" fill="#989898" stroke-width="3.5906"/>
-    </clipPath>
-    <clipPath id="b">
-      <path d="m512 636l0-565 -330 565 330 0z" fill="#000"/>
-      <path d="m512 388l0 565 330-565 -330 0z" fill="#000"/>
-    </clipPath>
-  </defs>
-  <g id="lidarr-group-logo" transform="translate(5e-6 .26738)">
-    <circle id="lidarr-black-circle" cx="512" cy="512" r="410" stroke-width="1.8"/>
-    <path id="lidarr-honeycomb-a" d="m852.12 33.49l23.46 14.44 23.22-14.44 0-28.87 -23.22-14.44 -23.46 14.44 0 28.87zm-46.44-28.87l-23.22-14.44 -23.2 14.44 0 28.87 23.2 14.44 23.22-14.44 0-28.87 23.22-14.44 23.22 14.44m-46.44 28.87l23.22 14.44 23.22-14.44m-46.44 57.49l0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.18 -23.22 14.18 -23.22-14.18 -23.2 14.18m92.86 28.87l23.46 14.44 23.22-14.44 0-28.87 -23.22-14.18 -23.46 14.18m23.46-43.05l0 28.87m-46.68-28.87l0 28.87m69.9-72.18l23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.2-14.44 23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.18 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 0 28.87 -23.22 14.45 0 28.87 23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.18 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.46 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.46 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.46 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.2-14.44 -23.22 14.44 -23.22-14.44 -23.46 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.18 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.16 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.16 0-28.87 -23.22-14.44 0-28.87 23.22-14.45 0-28.87 -23.22-14.44 0-28.87 23.22-14.16 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.16 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.18 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.46-14.44 23.22 14.44 23.22-14.44 23.2 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.46-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.2-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.2-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.46-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44m-46.44 0l0 28.87 23.22 14.44 23.22-14.44m-46.44 57.49l0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.18 -23.22 14.18 -23.22-14.18 -23.22 14.18m116.08-43.05l0 28.87m-46.42-28.87l0 28.87m23.22 100.79l0 28.87 23.2 14.44 23.22-14.44 0-28.87 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 0 28.87 23.22 14.44 23.22-14.44m46.42-86.61l-23.22 14.44 0 28.87m-23.2-43.31l23.2 14.44m-46.42 0l0 28.87m0 57.74l0 28.87 23.22 14.16 23.2-14.16 0-28.87m46.44-86.61l0 28.87 23.22 14.44 23.46-14.44 0-28.87m-46.68 28.87l-23.22 14.44m-23.22 72.18l23.22 14.16 23.22-14.16 0-28.87 -23.22-14.44m46.44-28.87l0 28.87 23.46 14.44 23.22-14.44 0-28.87 -23.22-14.44m0 57.74l0 28.87 23.22 14.16 23.22-14.16 0-28.87 -23.22-14.44m-69.9 14.44l23.22-14.44m-185.74-201.84l0 28.87 23.22 14.44 23.22-14.44m-139.56-28.87l0 28.87 23.22 14.44 23.22-14.44 0-28.87m0 28.87l23.46 14.44 23.22-14.44m-46.68 57.49l0 28.87 23.46 14.44 23.22-14.44 0-28.87 -23.22-14.18 -23.46 14.18 -23.22-14.18 -23.22 14.18 0 28.87 23.22 14.44 23.22-14.44m-23.22-71.92l0 28.87m93.12-28.87l0 28.87m-46.44-28.87l0 28.87m-116.32-72.18l0 28.87 23.2 14.44 23.22-14.44m-92.86-28.87l0 28.87 23.22 14.44 23.22-14.44m-23.22 43.31l-23.22 14.18 0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.18zm69.64 14.18l-23.22-14.18 -23.2 14.18m-23.22-43.05l0 28.87m46.42-28.87l0 28.87m23.22 43.05l-23.22 14.44 0 28.87 23.22 14.44 23.22-14.44 0-28.87m-92.86 0l0 28.87 23.22 14.44 23.2-14.44m-46.42 86.61l23.22 14.16 23.2-14.16 0-28.87 -23.2-14.44 -23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 23.22-14.44 0-28.87m23.2-43.03l23.22-14.44 0-28.87m-46.42-57.74l23.2 14.44m-23.2 72.18l0-28.87m116.32-43.31l0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.44m-93.12 86.61l23.22 14.44 23.22-14.44 0-28.87 -23.22-14.44m46.68 0l-23.46 14.44m23.46 72.18l23.22 14.16 23.22-14.16 0-28.87 -23.22-14.44 -23.22 14.44 0 28.87 -23.46 14.16 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 23.46-14.44 0-28.87 -23.46-14.44m-69.66-43.03l23.22 14.16 23.22-14.16 0-28.87m23.22-14.44l23.46 14.44m23.22-14.44l0-28.87m0 86.34l0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.16m-69.9 100.77l0 28.87 23.46 14.44 23.22-14.44 0-28.87 -23.22-14.44m23.22 43.31l23.22 14.44 23.22-14.44 0-28.87 -23.22-14.44 -23.22 14.44m-23.22-43.31l23.22-14.44m23.22 14.44l0 28.87m-93.12-28.87l-23.22-14.44 -23.22 14.44 0 28.87 23.22 14.44 23.22-14.44m-23.22-43.31l0-28.87m-69.64 72.18l-23.22 14.44 0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.44zm23.22 4Line truncated
-    <ellipse cx="512" cy="512" rx="460" ry="460" style="fill:none;stroke-width:99;stroke:#e5e5e5"/>
-    <ellipse cx="512" cy="512" rx="270" ry="270" style="fill:#e5e5e5;stroke-width:76;stroke:#e5e5e5"/>
-    <ellipse ry="410" rx="410" cy="512" cx="512" style="fill-opacity:null;fill:none;stroke-width:12;stroke:#009252"/>
-    <path d="m512 636l0-565 -330 565 330 0z" fill="#000"/>
-    <path d="m512 388l0 565 330-565 -330 0z" fill="#000"/>
-    <path id="lidarr-honeycomb-b" d="m852.12 33.49l23.46 14.44 23.22-14.44 0-28.87 -23.22-14.44 -23.46 14.44 0 28.87zm-46.44-28.87l-23.22-14.44 -23.2 14.44 0 28.87 23.2 14.44 23.22-14.44 0-28.87 23.22-14.44 23.22 14.44m-46.44 28.87l23.22 14.44 23.22-14.44m-46.44 57.49l0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.18 -23.22 14.18 -23.22-14.18 -23.2 14.18m92.86 28.87l23.46 14.44 23.22-14.44 0-28.87 -23.22-14.18 -23.46 14.18m23.46-43.05l0 28.87m-46.68-28.87l0 28.87m69.9-72.18l23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.2-14.44 23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.18 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 0 28.87 -23.22 14.45 0 28.87 23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 0 28.87 -23.22 14.18 0 28.87 23.22 14.44 0 28.87 -23.22 14.44 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.46 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.46 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.46 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.2-14.44 -23.22 14.44 -23.22-14.44 -23.46 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 -23.22 14.44 -23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.18 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.16 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.16 0-28.87 -23.22-14.44 0-28.87 23.22-14.45 0-28.87 -23.22-14.44 0-28.87 23.22-14.16 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.16 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 0-28.87 -23.22-14.44 0-28.87 23.22-14.18 0-28.87 -23.22-14.44 0-28.87 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.46-14.44 23.22 14.44 23.22-14.44 23.2 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.46-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.2-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.2-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.46-14.44 23.22 14.44 23.22-14.44 23.22 14.44 23.22-14.44 23.22 14.44m-46.44 0l0 28.87 23.22 14.44 23.22-14.44m-46.44 57.49l0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.18 -23.22 14.18 -23.22-14.18 -23.22 14.18m116.08-43.05l0 28.87m-46.42-28.87l0 28.87m23.22 100.79l0 28.87 23.2 14.44 23.22-14.44 0-28.87 -23.22-14.44 -23.2 14.44 -23.22-14.44 -23.22 14.44 0 28.87 23.22 14.44 23.22-14.44m46.42-86.61l-23.22 14.44 0 28.87m-23.2-43.31l23.2 14.44m-46.42 0l0 28.87m0 57.74l0 28.87 23.22 14.16 23.2-14.16 0-28.87m46.44-86.61l0 28.87 23.22 14.44 23.46-14.44 0-28.87m-46.68 28.87l-23.22 14.44m-23.22 72.18l23.22 14.16 23.22-14.16 0-28.87 -23.22-14.44m46.44-28.87l0 28.87 23.46 14.44 23.22-14.44 0-28.87 -23.22-14.44m0 57.74l0 28.87 23.22 14.16 23.22-14.16 0-28.87 -23.22-14.44m-69.9 14.44l23.22-14.44m-185.74-201.84l0 28.87 23.22 14.44 23.22-14.44m-139.56-28.87l0 28.87 23.22 14.44 23.22-14.44 0-28.87m0 28.87l23.46 14.44 23.22-14.44m-46.68 57.49l0 28.87 23.46 14.44 23.22-14.44 0-28.87 -23.22-14.18 -23.46 14.18 -23.22-14.18 -23.22 14.18 0 28.87 23.22 14.44 23.22-14.44m-23.22-71.92l0 28.87m93.12-28.87l0 28.87m-46.44-28.87l0 28.87m-116.32-72.18l0 28.87 23.2 14.44 23.22-14.44m-92.86-28.87l0 28.87 23.22 14.44 23.22-14.44m-23.22 43.31l-23.22 14.18 0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.18zm69.64 14.18l-23.22-14.18 -23.2 14.18m-23.22-43.05l0 28.87m46.42-28.87l0 28.87m23.22 43.05l-23.22 14.44 0 28.87 23.22 14.44 23.22-14.44 0-28.87m-92.86 0l0 28.87 23.22 14.44 23.2-14.44m-46.42 86.61l23.22 14.16 23.2-14.16 0-28.87 -23.2-14.44 -23.22 14.44 0 28.87 -23.22 14.16 0 28.87 23.22 14.44 23.22-14.44 0-28.87m23.2-43.03l23.22-14.44 0-28.87m-46.42-57.74l23.2 14.44m-23.2 72.18l0-28.87m116.32-43.31l0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.44m-93.12 86.61l23.22 14.44 23.22-14.44 0-28.87 -23.22-14.44m46.68 0l-23.46 14.44m23.46 72.18l23.22 14.16 23.22-14.16 0-28.87 -23.22-14.44 -23.22 14.44 0 28.87 -23.46 14.16 0 28.87 -23.22 14.44 0 28.87 23.22 14.44 23.46-14.44 0-28.87 -23.46-14.44m-69.66-43.03l23.22 14.16 23.22-14.16 0-28.87m23.22-14.44l23.46 14.44m23.22-14.44l0-28.87m0 86.34l0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.16m-69.9 100.77l0 28.87 23.46 14.44 23.22-14.44 0-28.87 -23.22-14.44m23.22 43.31l23.22 14.44 23.22-14.44 0-28.87 -23.22-14.44 -23.22 14.44m-23.22-43.31l23.22-14.44m23.22 14.44l0 28.87m-93.12-28.87l-23.22-14.44 -23.22 14.44 0 28.87 23.22 14.44 23.22-14.44m-23.22-43.31l0-28.87m-69.64 72.18l-23.22 14.44 0 28.87 23.22 14.44 23.22-14.44 0-28.87 -23.22-14.44zm23.22 4Line truncated
-    <path d="m512 636l0-565 -330 565 330 0z" style="fill:none;stroke-width:16;stroke:#009252;"/>
-    <path d="m512 388l0 565 330-565 -330 0z" style="fill:none;stroke-width:16;stroke:#009252;"/>
-    <ellipse cx="512" cy="512" rx="150" ry="150" style="fill-opacity:null;fill:#009252;stroke-opacity:null;stroke-width:null;stroke:null"/>
-  </g>
-</svg>

apps/nextjs/public/images/apps/radarr.svg

@@ -1 +0,0 @@
-<svg height="1024" viewBox="0 0 1024 1024" width="1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m0 0h1024v1024h-1024z"/><clipPath id="b"><use clip-rule="evenodd" xlink:href="#a"/></clipPath></defs><g clip-path="url(#b)"><use fill="none" xlink:href="#a"/><g transform="translate(70 21.00012)"><path d="m105.302 154.943 7.522 714.549c-60.173 7.522-105.30242-22.565-105.30242-82.737l-7.52158-594.205c0-188.03894 172.996-233.1684 278.298-157.9526l534.032 308.3846c75.216 52.651 90.259 150.431 52.651 218.125-7.521-52.651-30.086-82.737-75.216-112.823l-601.726-338.471c-45.129-30.0862-82.737-22.5646-82.737 45.13z" fill="#24292e"/><path d="m0 376.079c45.1295 15.043 90.259 7.521 127.867-15.043l616.769-361.036c37.608 52.651 30.087 105.302-15.043 135.388l-518.989 300.863c-75.216 37.608-172.9961 0-210.604-60.172z" fill="#24292e" transform="translate(60.17249 531.0214)"/><path d="m0 413.687 368.557-210.604-361.03543-203.083z" fill="#ffc230" transform="translate(240.6902 282.8092)"/></g></g></svg>

apps/nextjs/public/images/apps/readarr.svg

@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.97895 0 0 .97895 -2.2026 -2.2026)"><g stroke="#443c3c" stroke-width="1.5"><circle cx="513" cy="513" r="510" fill="#eee"/><circle cx="513" cy="513" r="440" fill="#443c3c"/><circle cx="513" cy="513" r="387" fill="#8e2222"/></g><g stroke-width="1.5"><circle cx="513" cy="513" r="378" fill="#eee" stroke="#8e2222"/><circle cx="511.67" cy="514.33" r="265" fill="#443c3c" stroke="#443c3c"/></g><g stroke="#8e2222"><path d="m176.71 682.24-5.71-356.67c0.634-53.106 17.5-47.829 30.454-49.405 198.58 10.83 270.91 71.252 275.35 73.499 13.323 5.018 20.937 31.782 20.302 31.123 0.634 0.658 4.441 420.6 3.807 419.94 3.172 22.455-13.323 21.002-13.958 20.343-124.99-98.152-297.56-122.85-298.19-123.51-12.055-0.795-12.055-15.326-12.055-15.326zm670.08 0.82 5.711-357.54c-0.635-53.236-17.501-47.946-30.456-49.526-198.6 10.857-270.93 71.426-275.38 73.679-13.325 5.03-20.939 31.859-20.304 31.199-0.635 0.66-4.442 421.63-3.807 420.97-3.173 22.51 13.325 21.053 13.959 20.393 125-98.392 297.58-123.15 298.22-123.81 12.056-0.797 12.056-15.363 12.056-15.363z" fill="#eee" stroke-width="10"/><path d="m174.14 739.57-5.802-356.67c0.645-53.106 17.782-47.829 30.945-49.405 201.79 10.83 275.28 71.252 279.8 73.499 13.539 5.018 21.275 31.782 20.63 31.123 0.645 0.658 4.513 420.6 3.868 419.94 3.224 22.455-13.539 21.002-14.183 20.343-127-98.152-302.36-122.85-303.01-123.51-12.249-0.795-12.249-15.326-12.249-15.326zm675.22 0.49 5.803-357.54c-0.645-53.236-17.784-47.946-30.948-49.526-201.81 10.857-275.31 71.426-279.82 73.679-13.54 5.03-21.277 31.859-20.632 31.199-0.645 0.66-4.513 421.63-3.869 420.97-3.224 22.51 13.54 21.053 14.184 20.393 127.02-98.392 302.39-123.15 303.03-123.81 12.25-0.797 12.25-15.363 12.25-15.363z" fill="#8e2222" stroke-width="5"/></g></g></svg>

apps/nextjs/public/images/apps/sonarr.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g clip-rule="evenodd"><path fill="#eee" fill-rule="evenodd" d="M47.978 24c0 6.602-2.331 12.26-6.993 16.974a3.773 3.773 0 0 1-.52.509 20.53 20.53 0 0 1-2.435 2.047C33.988 46.51 29.318 48 24.022 48c-5.304 0-9.966-1.49-13.986-4.47a21.726 21.726 0 0 1-2.988-2.556c-3.622-3.6-5.846-7.783-6.672-12.548-.162-.93-.27-1.874-.32-2.833a38.27 38.27 0 0 1 0-3.197c0-.052.014-.104.044-.155.346-5.887 2.662-10.973 6.948-15.259C11.762 2.327 17.42 0 24.022 0c6.624 0 12.279 2.327 16.963 6.982 4.662 4.743 6.993 10.416 6.993 17.018z"/><path fill="#3a3f51" fill-rule="evenodd" d="m43.098 9.405-4.957 4.957c-2.899 2.899-3.153 5.422-3.153 9.87 0 3.97.63 7.602 3.585 10.556 2.156 2.157 4.204 4.194 4.204 4.194a27.962 27.962 0 0 1-1.792 1.992 3.773 3.773 0 0 1-.52.509 20.05 20.05 0 0 1-1.749 1.538l-3.883-3.884c-3.452-3.452-6.196-3.784-10.756-3.784-4.375 0-7.352.403-10.556 3.607a2715.831 2715.831 0 0 0-4.105 4.116 21.196 21.196 0 0 1-2.368-2.102 27.739 27.739 0 0 1-1.737-1.903s2.168-2.18 4.238-4.25c3.066-3.065 3.563-6.62 3.563-10.589 0-3.872-.636-7.485-3.452-10.301C7.705 11.975 5 9.284 5 9.284a25.954 25.954 0 0 1 2.047-2.302A29.761 29.761 0 0 1 9.04 5.201l4.504 4.503c2.877 2.877 6.565 3.618 10.533 3.618 4.087 0 7.763-.791 10.756-3.784 1.84-1.841 4.27-4.26 4.27-4.26a25.168 25.168 0 0 1 1.882 1.704c.767.782 1.471 1.59 2.113 2.423z"/><path fill="#0cf" fill-rule="evenodd" d="M17.438 25.228a6.986 6.986 0 0 1-.1-1.228c0-.155.005-.303.012-.443 0-.014.004-.029.011-.044.096-1.63.738-3.039 1.925-4.227 1.306-1.29 2.874-1.936 4.703-1.936 1.837 0 3.404.645 4.703 1.936 1.29 1.313 1.936 2.884 1.936 4.714s-.645 3.397-1.936 4.703c-.045.051-.093.1-.144.143a6.056 6.056 0 0 1-.675.565c-1.121.826-2.416 1.239-3.884 1.239s-2.759-.413-3.873-1.24a5.818 5.818 0 0 1-.83-.707c-1.003-.996-1.619-2.155-1.848-3.475z"/><path fill="none" stroke="#0cf" stroke-miterlimit="1" stroke-width=".4426" d="m34.943 13.223-3.32 3.242M6.834 7.198l9.044 9.012M34.6 34.855l6.154 6.369m.41-34.056-6.22 6.056M7.18 41.107l6.053-6.063"/><path fill="none" stroke="#0cf" stroke-miterlimit="1" stroke-width="1.5491" d="m34.943 13.223-3.75 3.806m-18.12-3.617 3.806 3.795m-3.662 17.854 3.706-3.851m13.705-.309 3.99 3.971"/></g></svg>

apps/nextjs/public/images/apps/the-tvdb.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="54px" viewBox="0 0 100 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Logo tvdb</title>
-    <g id="Logo-tvdb" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M0,5.09590006 C0,1.81024006 2.9636,-0.441498938 6.46228,0.0733078623 L6.46228,0.0733078623 L52.10124,6.03470006 C54.15254,6.33652006 55.78724,8.54666006 55.78724,10.9536001 L55.78724,10.9536001 L55.78654,17.1835001 C51.94104,19.7605001 49.42044,24.0737001 49.42044,28.9596001 C49.42044,33.8924001 51.87974,38.1680001 55.78724,40.7361001 L55.78724,40.7361001 L55.78724,43.4756001 C55.78724,45.8825001 54.15254,48.0927001 52.10124,48.3945001 L52.10124,48.3945001 L11.60314,53.9266001 C8.10444,54.4417001 5.14084,52.1897001 5.14084,48.9040001 L5.14084,48.9040001 Z M19.68044,10.8218001 L13.66114,10.8218001 L13.66114,18.7064001 L9.84244,18.7064001 L9.84244,23.2621001 L13.66114,23.2621001 L13.66114,32.0227001 C13.4846091,37.5274601 15.6467584,39.9923503 20.6149401,40.0386142 L25.25134,40.0387001 L25.25134,35.4830001 L22.87064,35.4830001 C20.17484,35.3516001 19.59134,34.5631001 19.68074,31.0149001 L19.68074,23.2617001 L27.08014,23.2617001 L33.93424,40.0384001 L40.40294,40.0384001 L49.83694,18.7061001 L43.45734,18.7061001 L37.34794,33.3806001 L31.77694,18.7064001 L19.68044,18.7064001 L19.68044,10.8218001 Z" id="Combined-Shape" fill="#6CD591" fill-rule="nonzero"></path>
-        <path d="M88.60974,18.2771001 C92.51784,18.2771001 95.12314,19.2407001 97.09994,21.4310001 C98.71734,23.1831001 99.57074,25.7677001 99.57074,28.6584001 C99.57074,32.8634001 97.86394,36.1487001 94.76414,38.0323001 C92.74234,39.2590001 90.99054,39.6094001 87.03734,39.6094001 L77.24404,39.6094001 L77.24404,10.3925001 L83.26404,10.3925001 L83.26404,18.2771001 L88.60974,18.2771001 Z M83.26404,35.0537001 L87.71094,35.0537001 C91.26004,35.0537001 93.41634,32.6884001 93.41634,28.8334001 C93.41634,24.8035001 91.52964,22.8324001 87.71094,22.8324001 L83.26404,22.8324001 L83.26404,35.0537001 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
-        <path d="M68.01354,10.3925001 L74.03354,10.3925001 L74.03354,39.6094001 L63.65594,39.6094001 C59.43354,39.6094001 57.41174,38.9962001 55.25524,37.1126001 C53.05394,35.1416001 51.93124,32.3384001 51.93124,28.7898001 C51.93124,25.1102001 53.14404,22.3070001 55.70494,20.2481001 C57.32204,18.9342001 59.52364,18.2771001 62.35354,18.2771001 L68.01384,18.2771001 L68.01384,10.3925001 L68.01354,10.3925001 Z M68.01354,22.8327001 L63.65594,22.8327001 C60.15224,22.8327001 58.04064,25.0667001 58.04064,28.7898001 C58.04064,32.6884001 60.19654,35.0537001 63.65594,35.0537001 L68.01354,35.0537001 L68.01354,22.8327001 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
-    </g>
-</svg>

apps/nextjs/public/images/apps/tmdb.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 190.24 81.52"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" y1="40.76" x2="190.24" y2="40.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#90cea1"/><stop offset="0.56" stop-color="#3cbec9"/><stop offset="1" stop-color="#00b3e5"/></linearGradient></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M105.67,36.06h66.9A17.67,17.67,0,0,0,190.24,18.4h0A17.67,17.67,0,0,0,172.57.73h-66.9A17.67,17.67,0,0,0,88,18.4h0A17.67,17.67,0,0,0,105.67,36.06Zm-88,45h76.9A17.67,17.67,0,0,0,112.24,63.4h0A17.67,17.67,0,0,0,94.57,45.73H17.67A17.67,17.67,0,0,0,0,63.4H0A17.67,17.67,0,0,0,17.67,81.06ZM10.41,35.42h7.8V6.92h10.1V0H.31v6.9h10.1Zm28.1,0h7.8V8.25h.1l9,27.15h6l9.3-27.15h.1V35.4h7.8V0H66.76l-8.2,23.1h-.1L50.31,0H38.51ZM152.43,55.67a15.07,15.07,0,0,0-4.52-5.52,18.57,18.57,0,0,0-6.68-3.08,33.54,33.54,0,0,0-8.07-1h-11.7v35.4h12.75a24.58,24.58,0,0,0,7.55-1.15A19.34,19.34,0,0,0,148.11,77a16.27,16.27,0,0,0,4.37-5.5,16.91,16.91,0,0,0,1.63-7.58A18.5,18.5,0,0,0,152.43,55.67ZM145,68.6A8.8,8.8,0,0,1,142.36,72a10.7,10.7,0,0,1-4,1.82,21.57,21.57,0,0,1-5,.55h-4.05v-21h4.6a17,17,0,0,1,4.67.63,11.66,11.66,0,0,1,3.88,1.87A9.14,9.14,0,0,1,145,59a9.87,9.87,0,0,1,1,4.52A11.89,11.89,0,0,1,145,68.6Zm44.63-.13a8,8,0,0,0-1.58-2.62A8.38,8.38,0,0,0,185.63,64a10.31,10.31,0,0,0-3.17-1v-.1a9.22,9.22,0,0,0,4.42-2.82,7.43,7.43,0,0,0,1.68-5,8.42,8.42,0,0,0-1.15-4.65,8.09,8.09,0,0,0-3-2.72,12.56,12.56,0,0,0-4.18-1.3,32.84,32.84,0,0,0-4.62-.33h-13.2v35.4h14.5a22.41,22.41,0,0,0,4.72-.5,13.53,13.53,0,0,0,4.28-1.65,9.42,9.42,0,0,0,3.1-3,8.52,8.52,0,0,0,1.2-4.68A9.39,9.39,0,0,0,189.66,68.47ZM170.21,52.72h5.3a10,10,0,0,1,1.85.18,6.18,6.18,0,0,1,1.7.57,3.39,3.39,0,0,1,1.22,1.13,3.22,3.22,0,0,1,.48,1.82,3.63,3.63,0,0,1-.43,1.8,3.4,3.4,0,0,1-1.12,1.2,4.92,4.92,0,0,1-1.58.65,7.51,7.51,0,0,1-1.77.2h-5.65Zm11.72,20a3.9,3.9,0,0,1-1.22,1.3,4.64,4.64,0,0,1-1.68.7,8.18,8.18,0,0,1-1.82.2h-7v-8h5.9a15.35,15.35,0,0,1,2,.15,8.47,8.47,0,0,1,2.05.55,4,4,0,0,1,1.57,1.18,3.11,3.11,0,0,1,.63,2A3.71,3.71,0,0,1,181.93,72.72Z"/></g></g></svg>

apps/nextjs/public/images/apps/truenas.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path fill="#31BEEC" d="M90 38.197v19.137L48.942 80.999V61.864z"/><path d="M41.086 61.863V81L0 57.333V38.197l18.566 10.687c.02.016.043.03.067.04l22.453 12.94Z" fill="#0095D5"/><path fill="#AEADAE" d="m61.621 45.506-16.607 9.576-16.622-9.576 16.622-9.575z"/><path fill="#0095D5" d="M86.086 31.416 69.464 40.99 48.942 29.15V10z"/><path fill="#31BEEC" d="M41.086 10v19.15l-20.55 11.827-16.621-9.561z"/></g></svg>

apps/nextjs/public/images/apps/unraid-alt.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><linearGradient id="a" x1="100%" x2="0" y1="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff8d30"/><stop offset="1" stop-color="#e32929"/></linearGradient></defs><circle cx="50%" cy="50%" r="50%" fill="url(#a)"/><path fill="#fff" d="M246.6 200.8h18.7v110.6h-18.7zm-182.3 0H83v110.7H64.3zm91.1 123.9h18.7V367h-18.7zm-45.7-47.5h18.7v68.5h-18.7zm91.2 0h18.6v68.4h-18.6zm228.2-76.5h18.7v110.7h-18.7zM338 145.5h18.7v42.3H338zm45.7 21.2h18.7v68.2h-18.7zm-91.5 0h18.7v68.1h-18.7z"/></svg>

apps/nextjs/public/images/apps/vgmdb.svg

@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="64mm"
-   height="64mm"
-   viewBox="0 0 64 64"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2-alpha1 (b6a15bbbed, 2022-02-23)"
-   sodipodi:docname="vgmdb.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="2.1089995"
-     inkscape:cx="96.017091"
-     inkscape:cy="132.29021"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="1912"
-     inkscape:window-y="456"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       style="fill:#000000;stroke-width:0.21854"
-       d="m 24.915135,62.650271 c 0.887879,-1.778597 2.041345,-3.66055 2.243584,-3.66055 0.373389,0 3.112623,2.34553 4.058216,3.474939 l 0.933036,1.114407 h -3.849247 -3.849246 z m 12.769897,0.133716 c 0.188983,-1.699691 0.540579,-9.438559 0.541952,-11.928786 l 0.0013,-2.561742 1.233546,-0.358603 c 1.858993,-0.540424 4.864719,-0.351614 6.306093,0.396126 2.102595,1.090761 3.373658,3.018391 3.382575,5.129841 0.0167,3.956206 -2.25508,7.722455 -5.608397,9.297806 -1.304436,0.612809 -1.766356,0.710219 -3.720191,0.784508 l -2.230831,0.08482 0.09384,-0.843972 z M 15.28167,58.692354 C 13.855849,58.372721 13.307133,58.098082 12.027965,57.063833 10.767623,56.044804 9.571224,54.160633 8.9251418,52.177293 8.4791686,50.808245 8.4074221,50.178438 8.4306037,47.836119 8.5286648,37.927793 11.975024,28.061437 18.601259,18.719217 c 1.935825,-2.729288 2.971061,-3.715223 4.909347,-4.675547 2.754154,-1.364545 6.425257,-1.245307 7.097695,0.230534 0.528157,1.159175 -0.351225,2.928281 -5.658254,11.38306 -3.70676,5.905347 -6.114927,9.18009 -8.52131,11.587702 l -1.747431,1.748322 0.748093,2.185403 c 1.052426,3.074452 2.737855,6.406887 3.730724,7.376398 l 0.831803,0.812233 1.792285,-1.012255 c 0.985756,-0.556742 3.87521,-2.58299 6.421008,-4.502779 l 4.628722,-3.490523 -0.152738,4.29269 c -0.08401,2.36098 -0.222472,4.480622 -0.3077,4.710314 -0.332428,0.895893 -8.050465,7.1666 -10.09734,8.203831 -2.185833,1.107645 -5.028822,1.564407 -6.994493,1.123754 z m 12.832756,-0.03877 c -0.369353,-0.206871 -0.546974,-0.44325 -0.453135,-0.603036 0.708434,-1.206309 4.008342,-5.172791 4.307161,-5.177197 0.225634,-0.0033 -0.01427,3.110825 -0.312679,4.058824 -0.487124,1.547514 -2.288476,2.42313 -3.541347,1.721409 z M 54.400377,47.270961 c -2.064993,-1.073365 -4.152108,-1.442529 -8.74161,-1.546198 -3.114822,-0.07036 -4.685696,-0.01346 -5.837847,0.211437 l -1.576311,0.307699 -0.101497,-0.893553 C 38.087288,44.858893 37.933571,42.73579 37.801516,40.63234 l -0.240099,-3.824455 0.497396,-0.409308 c 3.74237,-3.079615 11.651909,-7.818064 15.417757,-9.236475 2.486857,-0.936679 2.235049,-2.072647 2.235049,10.082864 0,5.829561 -0.07376,10.585246 -0.163906,10.568187 -0.09015,-0.01705 -0.606449,-0.261044 -1.147336,-0.542192 z M 23.409747,36.75325 c 0.981959,-3.570355 4.756318,-11.031164 6.826933,-13.49486 0.464503,-0.552684 0.586271,-0.604153 0.775553,-0.327811 0.553602,0.808232 1.251919,4.110924 1.621318,7.668016 l 0.126807,1.221076 -3.079512,1.795215 c -1.693731,0.987367 -3.814306,2.281815 -4.71239,2.876551 -0.898084,0.594738 -1.666906,1.081339 -1.708492,1.081339 -0.04159,0 0.02582,-0.368786 0.149783,-0.819526 z m 13.184647,-7.110817 c -0.04629,-0.145705 -0.341909,-1.543377 -0.656926,-3.10594 -0.315019,-1.562562 -0.864147,-3.967401 -1.220285,-5.344086 l -0.647526,-2.503063 1.150575,-1.176622 c 0.632814,-0.647143 2.643448,-2.301196 4.468071,-3.675673 3.438183,-2.589963 4.301443,-3.419286 4.80161,-4.6128516 0.714642,-1.7053778 -0.03157,-3.7643498 -1.67217,-4.613896 -0.898369,-0.4651992 -1.181912,-0.4997701 -3.278104,-0.3996832 -2.190425,0.1045861 -4.050576,0.523224 -8.85088,1.9919437 l -1.092702,0.334327 0.546351,-0.4412242 c 6.292255,-5.0815261 14.525967,-6.98424479 19.646997,-4.540202 2.438424,1.163752 4.050578,3.1575295 5.198539,6.4291158 l 0.605044,1.7243152 0.0047,7.3023343 0.0047,7.302333 -2.622483,0.481857 c -4.702423,0.864027 -9.663403,2.365904 -14.706862,4.452327 -1.118146,0.462565 -1.619586,0.580467 -1.67861,0.394688 z"
-       id="path6625" />
-  </g>
-</svg>

apps/nextjs/src/app/[locale]/(home-board)/layout.tsx

@@ -1,5 +0,0 @@
-import definition from "../boards/(content)/(home)/_definition";
-
-const { layout } = definition;
-
-export default layout;

apps/nextjs/src/app/[locale]/(home-board)/page.tsx

@@ -1,7 +0,0 @@
-import definition from "../boards/(content)/(home)/_definition";
-
-const { generateMetadataAsync: generateMetadata, page } = definition;
-
-export default page;
-
-export { generateMetadata };

apps/nextjs/src/app/[locale]/(main)/layout.tsx

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from "react";
+import { AppShellMain } from "@mantine/core";
+
+import { MainHeader } from "~/components/layout/header";
+import { ClientShell } from "~/components/layout/shell";
+
+export default function MainLayout({ children }: PropsWithChildren) {
+  return (
+    <ClientShell hasNavigation={false}>
+      <MainHeader />
+      <AppShellMain>{children}</AppShellMain>
+    </ClientShell>
+  );
+}

apps/nextjs/src/app/[locale]/(main)/page.tsx

@@ -0,0 +1,9 @@
+import { Stack, Title } from "@mantine/core";
+
+export default function HomePage() {
+  return (
+    <Stack>
+      <Title>Home</Title>
+    </Stack>
+  );
+}

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

@@ -1,12 +0,0 @@
-"use client";
-
-import type { PropsWithChildren } from "react";
-
-import { useSuspenseDayJsLocalization } from "@homarr/translation/dayjs";
-
-export const DayJsLoader = ({ children }: PropsWithChildren) => {
-  // Load the dayjs localization for the current locale with suspense
-  useSuspenseDayJsLocalization();
-
-  return children;
-};

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

@@ -1,77 +0,0 @@
-"use client";
-
-import type { PropsWithChildren } from "react";
-import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { createTheme, DirectionProvider, MantineProvider } from "@mantine/core";
-import dayjs from "dayjs";
-
-import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
-import { parseCookies, setClientCookie } from "@homarr/common";
-import type { ColorScheme } from "@homarr/definitions";
-import { colorSchemeCookieKey } from "@homarr/definitions";
-
-export const CustomMantineProvider = ({
-  children,
-  defaultColorScheme,
-}: PropsWithChildren<{ defaultColorScheme: ColorScheme }>) => {
-  const manager = useColorSchemeManager();
-  return (
-    <DirectionProvider>
-      <MantineProvider
-        defaultColorScheme={defaultColorScheme}
-        colorSchemeManager={manager}
-        theme={createTheme({
-          primaryColor: "red",
-          autoContrast: true,
-        })}
-      >
-        {children}
-      </MantineProvider>
-    </DirectionProvider>
-  );
-};
-
-export function useColorSchemeManager(): MantineColorSchemeManager {
-  const { data: session } = useSession();
-
-  const updateCookieValue = (value: Exclude<MantineColorScheme, "auto">) => {
-    setClientCookie(colorSchemeCookieKey, value, { expires: dayjs().add(1, "year").toDate(), path: "/" });
-  };
-
-  const { mutate: mutateColorScheme } = clientApi.user.changeColorScheme.useMutation({
-    onSuccess: (_, variables) => {
-      updateCookieValue(variables.colorScheme);
-    },
-  });
-
-  return {
-    get: (defaultValue) => {
-      if (typeof window === "undefined") {
-        return defaultValue;
-      }
-
-      try {
-        const cookies = parseCookies(document.cookie);
-        return (cookies[colorSchemeCookieKey] as MantineColorScheme | undefined) ?? defaultValue;
-      } catch {
-        return defaultValue;
-      }
-    },
-
-    set: (value) => {
-      if (value === "auto") return;
-      try {
-        if (session) {
-          mutateColorScheme({ colorScheme: value });
-        }
-        updateCookieValue(value);
-      } catch (error) {
-        console.warn("[@mantine/core] Color scheme manager was unable to save color scheme.", error);
-      }
-    },
-    subscribe: () => undefined,
-    unsubscribe: () => undefined,
-    clear: () => undefined,
-  };
-}

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

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react";
+
+import { defaultLocale } from "@homarr/translation";
+import { I18nProviderClient } from "@homarr/translation/client";
+
+export const NextInternationalProvider = ({
+  children,
+  locale,
+}: PropsWithChildren<{ locale: string }>) => {
+  return (
+    <I18nProviderClient locale={locale} fallback={defaultLocale}>
+      {children}
+    </I18nProviderClient>
+  );
+};

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

@@ -1,46 +1,17 @@
 "use client";
 
-import { createContext, useContext, useEffect } from "react";
 import type { PropsWithChildren } from "react";
-import dayjs from "dayjs";
 
 import type { Session } from "@homarr/auth";
-import { SessionProvider, signIn } from "@homarr/auth/client";
+import { SessionProvider } from "@homarr/auth/client";
 
-interface AuthProviderProps extends AuthContextProps {
+interface AuthProviderProps {
   session: Session | null;
 }
 
-export const AuthProvider = ({ children, session, logoutUrl }: PropsWithChildren<AuthProviderProps>) => {
-  useLoginRedirectOnSessionExpiry(session);
-
-  return (
-    <SessionProvider session={session}>
-      <AuthContext.Provider value={{ logoutUrl }}>{children}</AuthContext.Provider>
-    </SessionProvider>
-  );
-};
-
-interface AuthContextProps {
-  logoutUrl: string | undefined;
-}
-
-const AuthContext = createContext<AuthContextProps | null>(null);
-
-export const useAuthContext = () => {
-  const context = useContext(AuthContext);
-
-  if (!context) throw new Error("useAuthContext must be used within an AuthProvider");
-
-  return context;
-};
-
-const useLoginRedirectOnSessionExpiry = (session: Session | null) => {
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    if (!session) return () => {};
-    //setTimeout doesn't allow for a number higher than 2147483647 (2³¹-1 , or roughly 24 days)
-    const timeout = setTimeout(() => void signIn(), Math.min(dayjs(session.expires).diff(), 2147483647));
-    return () => clearTimeout(timeout);
-  }, [session]);
+export const AuthProvider = ({
+  children,
+  session,
+}: PropsWithChildren<AuthProviderProps>) => {
+  return <SessionProvider session={session}>{children}</SessionProvider>;
 };

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

@@ -7,44 +7,17 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
 import {
   createWSClient,
-  httpLink,
-  isNonJsonSerializable,
   loggerLink,
-  splitLink,
   unstable_httpBatchStreamLink,
   wsLink,
 } from "@trpc/client";
 import superjson from "superjson";
 
 import type { AppRouter } from "@homarr/api";
-import { clientApi, createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/client";
-
-import { env } from "~/env.mjs";
-
-const getWebSocketProtocol = () => {
-  // window is not defined on server side
-  if (typeof window === "undefined") {
-    return "ws";
-  }
-
-  return window.location.protocol === "https:" ? "wss" : "ws";
-};
-
-const constructWebsocketUrl = () => {
-  const fallback = `${getWebSocketProtocol()}://localhost:3001/websockets`;
-  if (typeof window === "undefined") {
-    return fallback;
-  }
-
-  if (env.NODE_ENV === "development") {
-    return fallback;
-  }
-
-  return `${getWebSocketProtocol()}://${window.location.hostname}:${window.location.port}/websockets`;
-};
+import { clientApi } from "@homarr/api/client";
 
 const wsClient = createWSClient({
-  url: constructWebsocketUrl(),
+  url: "ws://localhost:3001",
 });
 
 export function TRPCReactProvider(props: PropsWithChildren) {
@@ -64,38 +37,31 @@ export function TRPCReactProvider(props: PropsWithChildren) {
       links: [
         loggerLink({
           enabled: (opts) =>
-            process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
+            process.env.NODE_ENV === "development" ||
+            (opts.direction === "down" && opts.result instanceof Error),
         }),
-        splitLink({
-          condition: ({ type }) => type === "subscription",
-          true: wsLink<AppRouter>({
-            client: wsClient,
-            transformer: superjson,
-          }),
-          false: splitLink({
-            condition: ({ input }) => isNonJsonSerializable(input),
-            true: httpLink({
-              /**
-               * We don't want to transform the data here as we want to use form data
-               */
-              transformer: {
-                serialize(object: unknown) {
-                  return object;
-                },
-                deserialize(data: unknown) {
-                  return data;
-                },
-              },
-              url: getTrpcUrl(),
-              headers: createHeadersCallbackForSource("nextjs-react (form-data)"),
-            }),
-            false: unstable_httpBatchStreamLink({
+        (args) => {
+          return ({ op, next }) => {
+            console.log("op", op.type, op.input, op.path, op.id);
+            if (op.type === "subscription") {
+              const link = wsLink<AppRouter>({
+                client: wsClient,
+                transformer: superjson,
+              });
+              return link(args)({ op, next });
+            }
+
+            return unstable_httpBatchStreamLink({
               transformer: superjson,
-              url: getTrpcUrl(),
-              headers: createHeadersCallbackForSource("nextjs-react (json)"),
-            }),
-          }),
-        }),
+              url: `${getBaseUrl()}/api/trpc`,
+              headers() {
+                const headers = new Headers();
+                headers.set("x-trpc-source", "nextjs-react");
+                return headers;
+              },
+            })(args)({ op, next });
+          };
+        },
       ],
     });
   });
@@ -103,9 +69,17 @@ export function TRPCReactProvider(props: PropsWithChildren) {
   return (
     <clientApi.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
-        <ReactQueryStreamedHydration transformer={superjson}>{props.children}</ReactQueryStreamedHydration>
+        <ReactQueryStreamedHydration transformer={superjson}>
+          {props.children}
+        </ReactQueryStreamedHydration>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
     </clientApi.Provider>
   );
 }
+
+function getBaseUrl() {
+  if (typeof window !== "undefined") return window.location.origin;
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+}

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

@@ -1,87 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
-
-import { clientApi } from "@homarr/api/client";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
-import { CustomPasswordInput } from "@homarr/ui";
-import type { z } from "@homarr/validation";
-import { validation } from "@homarr/validation";
-
-interface RegistrationFormProps {
-  invite: {
-    id: string;
-    token: string;
-  };
-}
-
-export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
-  const t = useScopedI18n("user");
-  const router = useRouter();
-  const { mutate, isPending } = clientApi.user.register.useMutation();
-  const form = useZodForm(validation.user.registration, {
-    initialValues: {
-      username: "",
-      password: "",
-      confirmPassword: "",
-    },
-  });
-
-  const handleSubmit = (values: z.infer<typeof validation.user.registration>) => {
-    mutate(
-      {
-        ...values,
-        inviteId: invite.id,
-        token: invite.token,
-      },
-      {
-        onSuccess() {
-          showSuccessNotification({
-            title: t("action.register.notification.success.title"),
-            message: t("action.register.notification.success.message"),
-          });
-          router.push("/auth/login");
-        },
-        onError(error) {
-          const message =
-            error.data?.code === "CONFLICT"
-              ? t("error.usernameTaken")
-              : t("action.register.notification.error.message");
-
-          showErrorNotification({
-            title: t("action.register.notification.error.title"),
-            message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <Stack gap="xl">
-      <form onSubmit={form.onSubmit(handleSubmit)}>
-        <Stack gap="lg">
-          <TextInput label={t("field.username.label")} autoComplete="off" {...form.getInputProps("username")} />
-          <CustomPasswordInput
-            withPasswordRequirements
-            label={t("field.password.label")}
-            autoComplete="new-password"
-            {...form.getInputProps("password")}
-          />
-
-          <PasswordInput
-            label={t("field.passwordConfirm.label")}
-            autoComplete="new-password"
-            {...form.getInputProps("confirmPassword")}
-          />
-          <Button type="submit" fullWidth loading={isPending}>
-            {t("action.register.label")}
-          </Button>
-        </Stack>
-      </form>
-    </Stack>
-  );
-};

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

@@ -1,69 +0,0 @@
-import { notFound } from "next/navigation";
-import { Card, Center, Stack, Text, Title } from "@mantine/core";
-
-import { auth } from "@homarr/auth/next";
-import { isProviderEnabled } from "@homarr/auth/server";
-import { and, db, eq } from "@homarr/db";
-import { invites } from "@homarr/db/schema/sqlite";
-import { getScopedI18n } from "@homarr/translation/server";
-
-import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
-import { RegistrationForm } from "./_registration-form";
-
-interface InviteUsagePageProps {
-  params: {
-    id: string;
-  };
-  searchParams: {
-    token: string;
-  };
-}
-
-export default async function InviteUsagePage({ params, searchParams }: InviteUsagePageProps) {
-  if (!isProviderEnabled("credentials")) notFound();
-
-  const session = await auth();
-  if (session) notFound();
-
-  const invite = await db.query.invites.findFirst({
-    where: and(eq(invites.id, params.id), eq(invites.token, searchParams.token)),
-    columns: {
-      id: true,
-      token: true,
-      expirationDate: true,
-    },
-    with: {
-      creator: {
-        columns: {
-          name: true,
-        },
-      },
-    },
-  });
-
-  if (!invite || invite.expirationDate < new Date()) notFound();
-
-  const t = await getScopedI18n("user.page.invite");
-
-  return (
-    <Center>
-      <Stack align="center" mt="xl">
-        <HomarrLogoWithTitle size="lg" />
-        <Stack gap={6} align="center">
-          <Title order={3} fw={400} ta="center">
-            {t("title")}
-          </Title>
-          <Text size="sm" c="gray.5" ta="center">
-            {t("subtitle")}
-          </Text>
-        </Stack>
-        <Card bg="dark.8" w={64 * 6} maw="90vw">
-          <RegistrationForm invite={invite} />
-        </Card>
-        <Text size="xs" c="gray.5" ta="center">
-          {t("description", { username: invite.creator.name })}
-        </Text>
-      </Stack>
-    </Center>
-  );
-}

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

@@ -1,185 +1,82 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Anchor, Button, Card, Code, Collapse, Divider, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import {
+  Alert,
+  Button,
+  PasswordInput,
+  rem,
+  Stack,
+  TextInput,
+} from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { signIn } from "@homarr/auth/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { useForm } from "@homarr/form";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useForm, zodResolver } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
-import { validation, z } from "@homarr/validation";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
-interface LoginFormProps {
-  providers: string[];
-  oidcClientName: string;
-  isOidcAutoLoginEnabled: boolean;
-  callbackUrl: string;
-}
-
-const extendedValidation = validation.user.signIn.extend({ provider: z.enum(["credentials", "ldap"]) });
-
-export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, callbackUrl }: LoginFormProps) => {
+export const LoginForm = () => {
   const t = useScopedI18n("user");
   const router = useRouter();
-  const [isPending, setIsPending] = useState(false);
-  const form = useZodForm(extendedValidation, {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const form = useForm<FormType>({
+    validate: zodResolver(validation.user.signIn),
     initialValues: {
       name: "",
       password: "",
-      provider: "credentials",
     },
   });
 
-  const credentialInputsVisible = providers.includes("credentials") || providers.includes("ldap");
+  const handleSubmit = async (values: FormType) => {
+    setIsLoading(true);
+    setError(undefined);
+    await signIn("credentials", {
+      ...values,
+      redirect: false,
+      callbackUrl: "/",
+    })
+      .then((response) => {
+        if (!response?.ok || response.error) {
+          throw response?.error;
+        }
 
-  const onSuccess = useCallback(
-    async (response: Awaited<ReturnType<typeof signIn>>) => {
-      if (response && (!response.ok || response.error)) {
-        // eslint-disable-next-line @typescript-eslint/only-throw-error
-        throw response.error;
-      }
-
-      showSuccessNotification({
-        title: t("action.login.notification.success.title"),
-        message: t("action.login.notification.success.message"),
-      });
-
-      // Redirect to the callback URL if the response is defined and comes from a credentials provider (ldap or credentials). oidc is redirected automatically.
-      if (response) {
-        await revalidatePathActionAsync("/");
-        router.push(callbackUrl);
-      }
-    },
-    [t, router, callbackUrl],
-  );
-
-  const onError = useCallback(() => {
-    setIsPending(false);
-
-    showErrorNotification({
-      title: t("action.login.notification.error.title"),
-      message: t("action.login.notification.error.message"),
-      autoClose: 10000,
-    });
-  }, [t]);
-
-  const signInAsync = useCallback(
-    async (provider: string, options?: Parameters<typeof signIn>[1]) => {
-      setIsPending(true);
-      await signIn(provider, {
-        ...options,
-        redirect: false,
-        callbackUrl: new URL(callbackUrl, window.location.href).href,
+        void router.push("/");
       })
-        .then(onSuccess)
-        .catch(onError);
-    },
-    [setIsPending, onSuccess, onError, callbackUrl],
-  );
-
-  const isLoginInProgress = useRef(false);
-
-  useEffect(() => {
-    if (isOidcAutoLoginEnabled && !isPending && !isLoginInProgress.current) {
-      isLoginInProgress.current = true;
-      void signInAsync("oidc");
-    }
-  }, [signInAsync, isOidcAutoLoginEnabled, isPending]);
+      .catch((error: Error | string) => {
+        setIsLoading(false);
+        setError(error.toString());
+      });
+  };
 
   return (
     <Stack gap="xl">
-      <Stack gap="lg">
-        {credentialInputsVisible && (
-          <>
-            <form onSubmit={form.onSubmit((credentials) => void signInAsync(credentials.provider, credentials))}>
-              <Stack gap="lg">
-                <TextInput label={t("field.username.label")} {...form.getInputProps("name")} />
-                <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
-
-                {providers.includes("credentials") && (
-                  <Stack gap="sm">
-                    <SubmitButton isPending={isPending} form={form} provider="credentials">
-                      {t("action.login.label")}
-                    </SubmitButton>
-                    <PasswordForgottenCollapse username={form.values.name} />
-                  </Stack>
-                )}
-
-                {providers.includes("ldap") && (
-                  <SubmitButton isPending={isPending} form={form} provider="ldap">
-                    {t("action.login.labelWith", { provider: "LDAP" })}
-                  </SubmitButton>
-                )}
-              </Stack>
-            </form>
-            {providers.includes("oidc") && <Divider label="OIDC" labelPosition="center" />}
-          </>
-        )}
-
-        {providers.includes("oidc") && (
-          <Button fullWidth variant="light" onClick={async () => await signInAsync("oidc")}>
-            {t("action.login.labelWith", { provider: oidcClientName })}
+      <form onSubmit={form.onSubmit((values) => void handleSubmit(values))}>
+        <Stack gap="lg">
+          <TextInput
+            label={t("field.username.label")}
+            {...form.getInputProps("name")}
+          />
+          <PasswordInput
+            label={t("field.password.label")}
+            {...form.getInputProps("password")}
+          />
+          <Button type="submit" fullWidth loading={isLoading}>
+            {t("action.login")}
           </Button>
-        )}
-      </Stack>
+        </Stack>
+      </form>
+
+      {error && (
+        <Alert icon={<IconAlertTriangle size={rem(16)} />} color="red">
+          {error}
+        </Alert>
+      )}
     </Stack>
   );
 };
 
-interface SubmitButtonProps {
-  isPending: boolean;
-  form: ReturnType<typeof useForm<FormType, (values: FormType) => FormType>>;
-  provider: "credentials" | "ldap";
-}
-
-const SubmitButton = ({ isPending, form, provider, children }: PropsWithChildren<SubmitButtonProps>) => {
-  const isCurrentProviderActive = form.getValues().provider === provider;
-
-  return (
-    <Button
-      type="submit"
-      name={provider}
-      fullWidth
-      onClick={() => form.setFieldValue("provider", provider)}
-      loading={isPending && isCurrentProviderActive}
-      disabled={isPending && !isCurrentProviderActive}
-    >
-      {children}
-    </Button>
-  );
-};
-
-interface PasswordForgottenCollapseProps {
-  username: string;
-}
-const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps) => {
-  const [visible, { toggle }] = useDisclosure(false);
-  const tForgotPassword = useScopedI18n("user.action.login.forgotPassword");
-
-  const commandUsername = username.trim().length >= 1 ? username.trim() : "<username>";
-
-  return (
-    <>
-      <Anchor type="button" component="button" onClick={toggle}>
-        {tForgotPassword("label")}
-      </Anchor>
-
-      <Collapse in={visible}>
-        <Card>
-          <Stack gap="xs">
-            <Text size="sm">{tForgotPassword("description")}</Text>
-
-            <Code>homarr reset-password -u {commandUsername}</Code>
-          </Stack>
-        </Card>
-      </Collapse>
-    </>
-  );
-};
-
-type FormType = z.infer<typeof extendedValidation>;
+type FormType = z.infer<typeof validation.user.signIn>;

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

@@ -1,26 +1,11 @@
-import { redirect } from "next/navigation";
 import { Card, Center, Stack, Text, Title } from "@mantine/core";
 
-import { env } from "@homarr/auth/env.mjs";
-import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
 
 import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
 import { LoginForm } from "./_login-form";
 
-interface LoginProps {
-  searchParams: {
-    callbackUrl?: string;
-  };
-}
-
-export default async function Login({ searchParams }: LoginProps) {
-  const session = await auth();
-
-  if (session) {
-    redirect(searchParams.callbackUrl ?? "/");
-  }
-
+export default async function Login() {
   const t = await getScopedI18n("user.page.login");
 
   return (
@@ -36,12 +21,7 @@ export default async function Login({ searchParams }: LoginProps) {
           </Text>
         </Stack>
         <Card bg="dark.8" w={64 * 6} maw="90vw">
-          <LoginForm
-            providers={env.AUTH_PROVIDERS}
-            oidcClientName={env.AUTH_OIDC_CLIENT_NAME}
-            isOidcAutoLoginEnabled={env.AUTH_OIDC_AUTO_LOGIN}
-            callbackUrl={searchParams.callbackUrl ?? "/"}
-          />
+          <LoginForm />
         </Card>
       </Stack>
     </Center>

apps/nextjs/src/app/[locale]/boards/(content)/(default)/_definition.ts

@@ -3,7 +3,7 @@ import { api } from "@homarr/api/server";
 import { createBoardContentPage } from "../_creator";
 
 export default createBoardContentPage<{ locale: string }>({
-  async getInitialBoardAsync() {
-    return await api.board.getHomeBoard();
+  async getInitialBoard() {
+    return await api.board.getDefaultBoard();
   },
 });

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

@@ -1,6 +1,6 @@
 import definition from "./_definition";
 
-const { generateMetadataAsync: generateMetadata, page } = definition;
+const { generateMetadata, page } = definition;
 
 export default page;
 

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

@@ -3,7 +3,7 @@ import { api } from "@homarr/api/server";
 import { createBoardContentPage } from "../_creator";
 
 export default createBoardContentPage<{ locale: string; name: string }>({
-  async getInitialBoardAsync({ name }) {
+  async getInitialBoard({ name }) {
     return await api.board.getBoardByName({ name });
   },
 });

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

@@ -1,6 +1,6 @@
 import definition from "./_definition";
 
-const { generateMetadataAsync: generateMetadata, page } = definition;
+const { generateMetadata, page } = definition;
 
 export default page;
 

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

@@ -18,7 +18,9 @@ export const updateBoardName = (name: string | null) => {
   boardName = name;
 };
 
-type UpdateCallback = (prev: RouterOutputs["board"]["getHomeBoard"]) => RouterOutputs["board"]["getHomeBoard"];
+type UpdateCallback = (
+  prev: RouterOutputs["board"]["getDefaultBoard"],
+) => RouterOutputs["board"]["getDefaultBoard"];
 
 export const useUpdateBoard = () => {
   const utils = clientApi.useUtils();
@@ -44,9 +46,9 @@ export const ClientBoard = () => {
   const board = useRequiredBoard();
   const isReady = useIsBoardReady();
 
-  const fullWidthSortedSections = board.sections
-    .filter((section) => section.kind === "empty" || section.kind === "category")
-    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
+  const sortedSections = board.sections.sort(
+    (sectionA, sectionB) => sectionA.position - sectionB.position,
+  );
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -59,12 +61,24 @@ export const ClientBoard = () => {
         loaderProps={{ size: "lg" }}
         h={fullHeightWithoutHeaderAndFooter}
       />
-      <Stack ref={ref} h="100%" style={{ visibility: isReady ? "visible" : "hidden" }}>
-        {fullWidthSortedSections.map((section) =>
+      <Stack
+        ref={ref}
+        h="100%"
+        style={{ visibility: isReady ? "visible" : "hidden" }}
+      >
+        {sortedSections.map((section) =>
           section.kind === "empty" ? (
-            <BoardEmptySection key={section.id} section={section} />
+            <BoardEmptySection
+              key={section.id}
+              section={section}
+              mainRef={ref}
+            />
           ) : (
-            <BoardCategorySection key={section.id} section={section} />
+            <BoardCategorySection
+              key={section.id}
+              section={section}
+              mainRef={ref}
+            />
           ),
         )}
       </Stack>

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

@@ -1,7 +1,13 @@
 "use client";
 
-import type { Dispatch, PropsWithChildren, SetStateAction } from "react";
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import type { PropsWithChildren } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { usePathname } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -10,11 +16,9 @@ import { clientApi } from "@homarr/api/client";
 import { updateBoardName } from "./_client";
 
 const BoardContext = createContext<{
-  board: RouterOutputs["board"]["getHomeBoard"];
+  board: RouterOutputs["board"]["getDefaultBoard"];
   isReady: boolean;
   markAsReady: (id: string) => void;
-  isEditMode: boolean;
-  setEditMode: Dispatch<SetStateAction<boolean>>;
 } | null>(null);
 
 export const BoardProvider = ({
@@ -26,11 +30,11 @@ export const BoardProvider = ({
   const pathname = usePathname();
   const utils = clientApi.useUtils();
   const [readySections, setReadySections] = useState<string[]>([]);
-  const [isEditMode, setEditMode] = useState(false);
   const { data } = clientApi.board.getBoardByName.useQuery(
     { name: initialBoard.name },
     {
       initialData: initialBoard,
+      refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
     },
@@ -48,12 +52,18 @@ export const BoardProvider = ({
   }, [pathname, utils, initialBoard.name]);
 
   useEffect(() => {
-    setReadySections((previous) => previous.filter((id) => data.sections.some((section) => section.id === id)));
+    setReadySections((previous) =>
+      previous.filter((id) =>
+        data.sections.some((section) => section.id === id),
+      ),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.sections.length, setReadySections]);
 
   const markAsReady = useCallback((id: string) => {
-    setReadySections((previous) => (previous.includes(id) ? previous : [...previous, id]));
+    setReadySections((previous) =>
+      previous.includes(id) ? previous : [...previous, id],
+    );
   }, []);
 
   return (
@@ -62,8 +72,6 @@ export const BoardProvider = ({
         board: data,
         isReady: data.sections.length === readySections.length,
         markAsReady,
-        isEditMode,
-        setEditMode,
       }}
     >
       {children}
@@ -106,13 +114,3 @@ export const useOptionalBoard = () => {
 
   return context?.board;
 };
-
-export const useEditMode = () => {
-  const context = useContext(BoardContext);
-
-  if (!context) {
-    throw new Error("Board is required");
-  }
-
-  return [context.isEditMode, context.setEditMode] as const;
-};

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

@@ -1,15 +1,11 @@
 import type { Metadata } from "next";
 import { TRPCError } from "@trpc/server";
 
+import { capitalize } from "@homarr/common";
+
 // Placed here because gridstack styles are used for board content
 import "~/styles/gridstack.scss";
 
-import { IntegrationProvider } from "@homarr/auth/client";
-import { auth } from "@homarr/auth/next";
-import { getIntegrationsWithPermissionsAsync } from "@homarr/auth/server";
-import { getI18n } from "@homarr/translation/server";
-
-import { createMetaTitle } from "~/metadata";
 import { createBoardLayout } from "../_layout-creator";
 import type { Board } from "../_types";
 import { ClientBoard } from "./_client";
@@ -18,41 +14,35 @@ import { BoardContentHeaderActions } from "./_header-actions";
 export type Params = Record<string, unknown>;
 
 interface Props<TParams extends Params> {
-  getInitialBoardAsync: (params: TParams) => Promise<Board>;
+  getInitialBoard: (params: TParams) => Promise<Board>;
 }
 
-export const createBoardContentPage = <TParams extends Record<string, unknown>>({
-  getInitialBoardAsync: getInitialBoard,
+export const createBoardContentPage = <
+  TParams extends Record<string, unknown>,
+>({
+  getInitialBoard,
 }: Props<TParams>) => {
   return {
     layout: createBoardLayout({
       headerActions: <BoardContentHeaderActions />,
-      getInitialBoardAsync: getInitialBoard,
+      getInitialBoard,
+      isBoardContentPage: true,
     }),
-    // eslint-disable-next-line no-restricted-syntax
-    page: async () => {
-      const session = await auth();
-      const integrations = await getIntegrationsWithPermissionsAsync(session);
-
-      return (
-        <IntegrationProvider integrations={integrations}>
-          <ClientBoard />
-        </IntegrationProvider>
-      );
+    page: () => {
+      return <ClientBoard />;
     },
-    generateMetadataAsync: async ({ params }: { params: TParams }): Promise<Metadata> => {
+    generateMetadata: async ({
+      params,
+    }: {
+      params: TParams;
+    }): Promise<Metadata> => {
       try {
         const board = await getInitialBoard(params);
-        const t = await getI18n();
 
         return {
-          title: board.metaTitle ?? createMetaTitle(t("board.content.metaTitle", { boardName: board.name })),
+          title: board.metaTitle ?? `${capitalize(board.name)} board | Homarr`,
           icons: {
             icon: board.faviconImageUrl ? board.faviconImageUrl : undefined,
-            apple: board.faviconImageUrl ? board.faviconImageUrl : undefined,
-          },
-          appleWebApp: {
-            startupImage: { url: board.faviconImageUrl ? board.faviconImageUrl : "/logo/logo.png" },
           },
         };
       } catch (error) {

apps/nextjs/src/app/[locale]/boards/(content)/_custom-css.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-import { useRequiredBoard } from "./_context";
-
-export const CustomCss = () => {
-  const board = useRequiredBoard();
-
-  return <style>{board.customCss}</style>;
-};

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

@@ -1,38 +1,38 @@
 "use client";
 
-import type { MouseEvent } from "react";
-import { useCallback, useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useCallback } from "react";
 import { Group, Menu } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
 import {
   IconBox,
   IconBoxAlignTop,
   IconChevronDown,
+  IconPackageImport,
   IconPencil,
   IconPencilOff,
   IconPlus,
-  IconResize,
   IconSettings,
 } from "@tabler/icons-react";
+import { useAtom, useAtomValue } from "jotai";
 
 import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useConfirmModal, useModalAction } from "@homarr/modals";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useModalAction } from "@homarr/modals";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
+import { revalidatePathAction } from "~/app/revalidatePathAction";
+import { editModeAtom } from "~/components/board/editMode";
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";
 import { useBoardPermissions } from "~/components/board/permissions/client";
 import { useCategoryActions } from "~/components/board/sections/category/category-actions";
 import { CategoryEditModal } from "~/components/board/sections/category/category-edit-modal";
-import { useDynamicSectionActions } from "~/components/board/sections/dynamic/dynamic-actions";
 import { HeaderButton } from "~/components/layout/header/button";
-import { env } from "~/env.mjs";
-import { useEditMode, useRequiredBoard } from "./_context";
+import { useRequiredBoard } from "./_context";
 
 export const BoardContentHeaderActions = () => {
-  const [isEditMode] = useEditMode();
+  const isEditMode = useAtomValue(editModeAtom);
   const board = useRequiredBoard();
   const { hasChangeAccess } = useBoardPermissions(board);
 
@@ -54,10 +54,10 @@ export const BoardContentHeaderActions = () => {
 };
 
 const AddMenu = () => {
-  const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
+  const { openModal: openCategoryEditModal } =
+    useModalAction(CategoryEditModal);
   const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
   const { addCategoryToEnd } = useCategoryActions();
-  const { addDynamicSection } = useDynamicSectionActions();
   const t = useI18n();
 
   const handleAddCategory = useCallback(
@@ -95,118 +95,65 @@ const AddMenu = () => {
         </HeaderButton>
       </Menu.Target>
       <Menu.Dropdown style={{ transform: "translate(-3px, 0)" }}>
-        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectItem}>
+        <Menu.Item
+          leftSection={<IconBox size={20} />}
+          onClick={handleSelectItem}
+        >
           {t("item.action.create")}
         </Menu.Item>
+        <Menu.Item leftSection={<IconPackageImport size={20} />}>
+          {t("item.action.import")}
+        </Menu.Item>
 
         <Menu.Divider />
 
-        <Menu.Item leftSection={<IconBoxAlignTop size={20} />} onClick={handleAddCategory}>
+        <Menu.Item
+          leftSection={<IconBoxAlignTop size={20} />}
+          onClick={handleAddCategory}
+        >
           {t("section.category.action.create")}
         </Menu.Item>
-
-        <Menu.Item leftSection={<IconResize size={20} />} onClick={addDynamicSection}>
-          {t("section.dynamic.action.create")}
-        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );
 };
 
 const EditModeMenu = () => {
-  const [isEditMode, setEditMode] = useEditMode();
+  const [isEditMode, setEditMode] = useAtom(editModeAtom);
   const board = useRequiredBoard();
   const utils = clientApi.useUtils();
   const t = useScopedI18n("board.action.edit");
-  const { mutate: saveBoard, isPending } = clientApi.board.saveBoard.useMutation({
-    onSuccess() {
-      showSuccessNotification({
-        title: t("notification.success.title"),
-        message: t("notification.success.message"),
-      });
-      void utils.board.getBoardByName.invalidate({ name: board.name });
-      void revalidatePathActionAsync(`/boards/${board.name}`);
-      setEditMode(false);
-    },
-    onError() {
-      showErrorNotification({
-        title: t("notification.error.title"),
-        message: t("notification.error.message"),
-      });
-    },
-  });
+  const { mutate: saveBoard, isPending } =
+    clientApi.board.saveBoard.useMutation({
+      onSuccess() {
+        showSuccessNotification({
+          title: t("notification.success.title"),
+          message: t("notification.success.message"),
+        });
+        void utils.board.getBoardByName.invalidate({ name: board.name });
+        void revalidatePathAction(`/boards/${board.name}`);
+        setEditMode(false);
+      },
+      onError() {
+        showErrorNotification({
+          title: t("notification.error.title"),
+          message: t("notification.error.message"),
+        });
+      },
+    });
 
   const toggle = useCallback(() => {
     if (isEditMode) return saveBoard(board);
     setEditMode(true);
   }, [board, isEditMode, saveBoard, setEditMode]);
 
-  useHotkeys([["mod+e", toggle]]);
-  usePreventLeaveWithDirty(isEditMode);
-
   return (
     <HeaderButton onClick={toggle} loading={isPending}>
-      {isEditMode ? <IconPencilOff stroke={1.5} /> : <IconPencil stroke={1.5} />}
+      {isEditMode ? (
+        <IconPencilOff stroke={1.5} />
+      ) : (
+        <IconPencil stroke={1.5} />
+      )}
     </HeaderButton>
   );
 };
-
-const usePreventLeaveWithDirty = (isDirty: boolean) => {
-  const t = useI18n();
-  const { openConfirmModal } = useConfirmModal();
-  const router = useRouter();
-
-  useEffect(() => {
-    const handleClick = (event: MouseEvent<HTMLElement>) => {
-      const target = (event.target as HTMLElement).closest("a");
-
-      if (!target) return;
-      if (!isDirty) return;
-
-      event.preventDefault();
-
-      openConfirmModal({
-        title: t("board.action.edit.confirmLeave.title"),
-        children: t("board.action.edit.confirmLeave.message"),
-        onConfirm() {
-          router.push(target.href);
-        },
-        confirmProps: {
-          children: t("common.action.discard"),
-        },
-      });
-    };
-
-    const handlePopState = (event: Event) => {
-      if (isDirty) {
-        window.history.pushState(null, document.title, window.location.href);
-        event.preventDefault();
-      } else {
-        window.history.back();
-      }
-    };
-
-    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-      if (!isDirty) return;
-      if (env.NODE_ENV === "development") return; // Allow to reload in development
-
-      event.preventDefault();
-      event.returnValue = true;
-    };
-
-    document.querySelectorAll("a").forEach((link) => {
-      link.addEventListener("click", handleClick as never);
-    });
-    window.addEventListener("popstate", handlePopState);
-    window.addEventListener("beforeunload", handleBeforeUnload);
-
-    return () => {
-      document.querySelectorAll("a").forEach((link) => {
-        link.removeEventListener("click", handleClick as never);
-        window.removeEventListener("popstate", handlePopState);
-      });
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDirty]);
-};

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

@@ -4,17 +4,10 @@ import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
 import { createTheme, darken, lighten, MantineProvider } from "@mantine/core";
 
-import type { ColorScheme } from "@homarr/definitions";
-
-import { useColorSchemeManager } from "../../_client-providers/mantine";
 import { useRequiredBoard } from "./_context";
 
-export const BoardMantineProvider = ({
-  children,
-  defaultColorScheme,
-}: PropsWithChildren<{ defaultColorScheme: ColorScheme }>) => {
+export const BoardMantineProvider = ({ children }: PropsWithChildren) => {
   const board = useRequiredBoard();
-  const colorSchemeManager = useColorSchemeManager();
 
   const theme = createTheme({
     colors: {
@@ -25,15 +18,13 @@ export const BoardMantineProvider = ({
     autoContrast: true,
   });
 
-  return (
-    <MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
-      {children}
-    </MantineProvider>
-  );
+  return <MantineProvider theme={theme}>{children}</MantineProvider>;
 };
 
 export const generateColors = (hex: string) => {
-  const lightnessForColors = [-0.25, -0.2, -0.15, -0.1, -0.05, 0, 0.05, 0.1, 0.15, 0.2] as const;
+  const lightnessForColors = [
+    -0.25, -0.2, -0.15, -0.1, -0.05, 0, 0.05, 0.1, 0.15, 0.2,
+  ] as const;
   const rgbaColors = lightnessForColors.map((lightness) => {
     if (lightness < 0) {
       return lighten(hex, -lightness);
@@ -44,7 +35,6 @@ export const generateColors = (hex: string) => {
   return rgbaColors.map((color) => {
     return (
       "#" +
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       color
         .split("(")[1]!
         .replaceAll(" ", "")

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

@@ -5,7 +5,8 @@ import { createBoardLayout } from "../_layout-creator";
 
 export default createBoardLayout<{ locale: string; name: string }>({
   headerActions: <BoardOtherHeaderActions />,
-  async getInitialBoardAsync({ name }) {
+  async getInitialBoard({ name }) {
     return await api.board.getBoardByName({ name });
   },
+  isBoardContentPage: false,
 });

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { Group, Stack, Tabs } from "@mantine/core";
+import { IconUser, IconUserDown, IconUsersGroup } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
+import { CountBadge } from "@homarr/ui";
+
+import type { Board } from "../../_types";
+import { GroupsForm } from "./_access/group-access";
+import { InheritTable } from "./_access/inherit-access";
+import { UsersForm } from "./_access/user-access";
+
+interface Props {
+  board: Board;
+  initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
+}
+
+export const AccessSettingsContent = ({ board, initialPermissions }: Props) => {
+  const { data: permissions } = clientApi.board.getBoardPermissions.useQuery(
+    {
+      id: board.id,
+    },
+    {
+      initialData: initialPermissions,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  );
+
+  const [counts, setCounts] = useState({
+    user: initialPermissions.userPermissions.length + (board.creator ? 1 : 0),
+    group: initialPermissions.groupPermissions.length,
+  });
+
+  return (
+    <Stack>
+      <Tabs color="red" defaultValue="user">
+        <Tabs.List grow>
+          <TabItem value="user" count={counts.user} icon={IconUser} />
+          <TabItem value="group" count={counts.group} icon={IconUsersGroup} />
+          <TabItem
+            value="inherited"
+            count={initialPermissions.inherited.length}
+            icon={IconUserDown}
+          />
+        </Tabs.List>
+
+        <Tabs.Panel value="user">
+          <UsersForm
+            board={board}
+            initialPermissions={permissions}
+            onCountChange={(callback) =>
+              setCounts(({ user, ...others }) => ({
+                user: callback(user),
+                ...others,
+              }))
+            }
+          />
+        </Tabs.Panel>
+
+        <Tabs.Panel value="group">
+          <GroupsForm
+            board={board}
+            initialPermissions={permissions}
+            onCountChange={(callback) =>
+              setCounts(({ group, ...others }) => ({
+                group: callback(group),
+                ...others,
+              }))
+            }
+          />
+        </Tabs.Panel>
+
+        <Tabs.Panel value="inherited">
+          <InheritTable initialPermissions={permissions} />
+        </Tabs.Panel>
+      </Tabs>
+    </Stack>
+  );
+};
+
+interface TabItemProps {
+  value: "user" | "group" | "inherited";
+  count: number;
+  icon: TablerIcon;
+}
+
+const TabItem = ({ value, icon: Icon, count }: TabItemProps) => {
+  const t = useScopedI18n("board.setting.section.access.permission");
+
+  return (
+    <Tabs.Tab value={value} leftSection={<Icon stroke={1.5} size={16} />}>
+      <Group gap="sm">
+        {t(`tab.${value}`)}
+        <CountBadge count={count} />
+      </Group>
+    </Tabs.Tab>
+  );
+};

apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx

@@ -0,0 +1,139 @@
+import { useCallback } from "react";
+import type { ReactNode } from "react";
+import type { SelectProps } from "@mantine/core";
+import {
+  Button,
+  Flex,
+  Group,
+  Select,
+  TableTd,
+  TableTr,
+  Text,
+} from "@mantine/core";
+import {
+  IconCheck,
+  IconEye,
+  IconPencil,
+  IconSettings,
+} from "@tabler/icons-react";
+
+import type { BoardPermission } from "@homarr/definitions";
+import { boardPermissions } from "@homarr/definitions";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
+
+import type { OnCountChange } from "./form";
+import { useFormContext } from "./form";
+
+const icons = {
+  "board-change": IconPencil,
+  "board-view": IconEye,
+  "board-full": IconSettings,
+} satisfies Record<BoardPermission | "board-full", TablerIcon>;
+
+interface BoardAccessSelectRowProps {
+  itemContent: ReactNode;
+  permission: BoardPermission;
+  index: number;
+  onCountChange: OnCountChange;
+}
+
+export const BoardAccessSelectRow = ({
+  itemContent,
+  permission,
+  index,
+  onCountChange,
+}: BoardAccessSelectRowProps) => {
+  const tRoot = useI18n();
+  const tPermissions = useScopedI18n("board.setting.section.access.permission");
+  const form = useFormContext();
+  const Icon = icons[permission];
+
+  const handleRemove = useCallback(() => {
+    form.setFieldValue(
+      "items",
+      form.values.items.filter((_, i) => i !== index),
+    );
+    onCountChange((prev) => prev - 1);
+  }, [form, index, onCountChange]);
+
+  return (
+    <TableTr>
+      <TableTd w={{ sm: 128, lg: 256 }}>{itemContent}</TableTd>
+      <TableTd>
+        <Flex
+          direction={{ base: "column", xs: "row" }}
+          align={{ base: "end", xs: "center" }}
+          wrap="nowrap"
+        >
+          <Select
+            allowDeselect={false}
+            flex="1"
+            leftSection={<Icon size="1rem" />}
+            renderOption={RenderOption}
+            variant="unstyled"
+            data={boardPermissions.map((permission) => ({
+              value: permission,
+              label: tPermissions(`item.${permission}.label`),
+            }))}
+            {...form.getInputProps(`items.${index}.permission`)}
+          />
+
+          <Button size="xs" variant="subtle" onClick={handleRemove}>
+            {tRoot("common.action.remove")}
+          </Button>
+        </Flex>
+      </TableTd>
+    </TableTr>
+  );
+};
+
+interface BoardAccessDisplayRowProps {
+  itemContent: ReactNode;
+  permission: BoardPermission | "board-full";
+}
+
+export const BoardAccessDisplayRow = ({
+  itemContent,
+  permission,
+}: BoardAccessDisplayRowProps) => {
+  const tPermissions = useScopedI18n("board.setting.section.access.permission");
+  const Icon = icons[permission];
+
+  return (
+    <TableTr>
+      <TableTd w={{ sm: 128, lg: 256 }}>{itemContent}</TableTd>
+      <TableTd>
+        <Group gap={0}>
+          <Flex w={34} h={34} align="center" justify="center">
+            <Icon
+              size="1rem"
+              color="var(--input-section-color, var(--mantine-color-dimmed))"
+            />
+          </Flex>
+          <Text size="sm">{tPermissions(`item.${permission}.label`)}</Text>
+        </Group>
+      </TableTd>
+    </TableTr>
+  );
+};
+
+const iconProps = {
+  stroke: 1.5,
+  color: "currentColor",
+  opacity: 0.6,
+  size: "1rem",
+};
+
+const RenderOption: SelectProps["renderOption"] = ({ option, checked }) => {
+  const Icon = icons[option.value as BoardPermission];
+  return (
+    <Group flex="1" gap="xs" wrap="nowrap">
+      <Icon {...iconProps} />
+      {option.label}
+      {checked && (
+        <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />
+      )}
+    </Group>
+  );
+};

apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts

@@ -0,0 +1,14 @@
+import type { BoardPermission } from "@homarr/definitions";
+import { createFormContext } from "@homarr/form";
+
+export interface BoardAccessFormType {
+  items: {
+    itemId: string;
+    permission: BoardPermission;
+  }[];
+}
+
+export const [FormProvider, useFormContext, useForm] =
+  createFormContext<BoardAccessFormType>();
+
+export type OnCountChange = (callback: (prev: number) => number) => void;

apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx

@@ -0,0 +1,148 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import {
+  Anchor,
+  Button,
+  Group,
+  Stack,
+  Table,
+  TableTbody,
+  TableTh,
+  TableThead,
+  TableTr,
+} from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useModalAction } from "@homarr/modals";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+import { BoardAccessSelectRow } from "./board-access-table-rows";
+import type { BoardAccessFormType } from "./form";
+import { FormProvider, useForm } from "./form";
+import { GroupSelectModal } from "./group-select-modal";
+import type { FormProps } from "./user-access";
+
+export const GroupsForm = ({
+  board,
+  initialPermissions,
+  onCountChange,
+}: FormProps) => {
+  const { mutate, isPending } =
+    clientApi.board.saveGroupBoardPermissions.useMutation();
+  const utils = clientApi.useUtils();
+  const [groups, setGroups] = useState<Map<string, Group>>(
+    new Map(
+      initialPermissions.groupPermissions.map(({ group }) => [group.id, group]),
+    ),
+  );
+  const { openModal } = useModalAction(GroupSelectModal);
+  const t = useI18n();
+  const tPermissions = useScopedI18n("board.setting.section.access.permission");
+  const form = useForm({
+    initialValues: {
+      items: initialPermissions.groupPermissions.map(
+        ({ group, permission }) => ({
+          itemId: group.id,
+          permission,
+        }),
+      ),
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (values: BoardAccessFormType) => {
+      mutate(
+        {
+          id: board.id,
+          permissions: values.items,
+        },
+        {
+          onSuccess: () => {
+            void utils.board.getBoardPermissions.invalidate();
+          },
+        },
+      );
+    },
+    [board.id, mutate, utils.board.getBoardPermissions],
+  );
+
+  const handleAddUser = useCallback(() => {
+    openModal({
+      presentGroupIds: form.values.items.map(({ itemId: id }) => id),
+      onSelect: (group) => {
+        setGroups((prev) => new Map(prev).set(group.id, group));
+        form.setFieldValue("items", [
+          {
+            itemId: group.id,
+            permission: "board-view",
+          },
+          ...form.values.items,
+        ]);
+        onCountChange((prev) => prev + 1);
+      },
+    });
+  }, [form, openModal, onCountChange]);
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <FormProvider form={form}>
+        <Stack pt="sm">
+          <Table>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ whiteSpace: "nowrap" }}>
+                  {tPermissions("field.group.label")}
+                </TableTh>
+                <TableTh>{tPermissions("field.permission.label")}</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {form.values.items.map((row, index) => (
+                <BoardAccessSelectRow
+                  key={row.itemId}
+                  itemContent={
+                    <GroupItemContent group={groups.get(row.itemId)!} />
+                  }
+                  permission={row.permission}
+                  index={index}
+                  onCountChange={onCountChange}
+                />
+              ))}
+            </TableTbody>
+          </Table>
+
+          <Group justify="space-between">
+            <Button
+              rightSection={<IconPlus size="1rem" />}
+              variant="light"
+              onClick={handleAddUser}
+            >
+              {t("common.action.add")}
+            </Button>
+            <Button type="submit" loading={isPending} color="teal">
+              {t("common.action.saveChanges")}
+            </Button>
+          </Group>
+        </Stack>
+      </FormProvider>
+    </form>
+  );
+};
+
+export const GroupItemContent = ({ group }: { group: Group }) => {
+  return (
+    <Anchor
+      component={Link}
+      href={`/manage/users/groups/${group.id}`}
+      size="sm"
+      style={{ whiteSpace: "nowrap" }}
+    >
+      {group.name}
+    </Anchor>
+  );
+};
+
+type Group =
+  RouterOutputs["board"]["getBoardPermissions"]["groupPermissions"][0]["group"];

apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-select-modal.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Button, Group, Loader, Select, Stack } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { useForm } from "@homarr/form";
+import { createModal } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+
+interface InnerProps {
+  presentGroupIds: string[];
+  onSelect: (props: { id: string; name: string }) => void | Promise<void>;
+  confirmLabel?: string;
+}
+
+interface GroupSelectFormType {
+  groupId: string;
+}
+
+export const GroupSelectModal = createModal<InnerProps>(
+  ({ actions, innerProps }) => {
+    const t = useI18n();
+    const { data: groups, isPending } = clientApi.group.selectable.useQuery();
+    const [loading, setLoading] = useState(false);
+    const form = useForm<GroupSelectFormType>();
+    const handleSubmit = async (values: GroupSelectFormType) => {
+      const currentGroup = groups?.find((group) => group.id === values.groupId);
+      if (!currentGroup) return;
+      setLoading(true);
+      await innerProps.onSelect({
+        id: currentGroup.id,
+        name: currentGroup.name,
+      });
+
+      setLoading(false);
+      actions.closeModal();
+    };
+
+    const confirmLabel = innerProps.confirmLabel ?? t("common.action.add");
+
+    return (
+      <form onSubmit={form.onSubmit((values) => void handleSubmit(values))}>
+        <Stack>
+          <Select
+            {...form.getInputProps("groupId")}
+            label={t("group.action.select.label")}
+            clearable
+            searchable
+            leftSection={isPending ? <Loader size="xs" /> : undefined}
+            nothingFoundMessage={t("group.action.select.notFound")}
+            limit={5}
+            data={groups
+              ?.filter(
+                (group) => !innerProps.presentGroupIds.includes(group.id),
+              )
+              .map((group) => ({ value: group.id, label: group.name }))}
+          />
+          <Group justify="end">
+            <Button variant="default" onClick={actions.closeModal}>
+              {t("common.action.cancel")}
+            </Button>
+            <Button type="submit" loading={loading}>
+              {confirmLabel}
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    );
+  },
+).withOptions({
+  defaultTitle: (t) =>
+    t("board.setting.section.access.permission.groupSelect.title"),
+});

apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx

@@ -0,0 +1,66 @@
+import {
+  Stack,
+  Table,
+  TableTbody,
+  TableTh,
+  TableThead,
+  TableTr,
+} from "@mantine/core";
+
+import type { RouterOutputs } from "@homarr/api";
+import { getPermissionsWithChildren } from "@homarr/definitions";
+import type { BoardPermission, GroupPermissionKey } from "@homarr/definitions";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { BoardAccessDisplayRow } from "./board-access-table-rows";
+import { GroupItemContent } from "./group-access";
+
+export interface InheritTableProps {
+  initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
+}
+
+const mapPermissions = {
+  "board-full-access": "board-full",
+  "board-modify-all": "board-change",
+  "board-view-all": "board-view",
+} satisfies Partial<Record<GroupPermissionKey, BoardPermission | "board-full">>;
+
+export const InheritTable = ({ initialPermissions }: InheritTableProps) => {
+  const tPermissions = useScopedI18n("board.setting.section.access.permission");
+  return (
+    <Stack pt="sm">
+      <Table>
+        <TableThead>
+          <TableTr>
+            <TableTh>{tPermissions("field.user.label")}</TableTh>
+            <TableTh>{tPermissions("field.permission.label")}</TableTh>
+          </TableTr>
+        </TableThead>
+        <TableTbody>
+          {initialPermissions.inherited.map(({ group, permission }) => {
+            const boardPermission =
+              permission in mapPermissions
+                ? mapPermissions[permission as keyof typeof mapPermissions]
+                : getPermissionsWithChildren([permission]).includes(
+                      "board-full-access",
+                    )
+                  ? "board-full"
+                  : null;
+
+            if (!boardPermission) {
+              return null;
+            }
+
+            return (
+              <BoardAccessDisplayRow
+                key={group.id}
+                itemContent={<GroupItemContent group={group} />}
+                permission={boardPermission}
+              />
+            );
+          })}
+        </TableTbody>
+      </Table>
+    </Stack>
+  );
+};

apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx

@@ -0,0 +1,173 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import {
+  Anchor,
+  Box,
+  Button,
+  Group,
+  Stack,
+  Table,
+  TableTbody,
+  TableTh,
+  TableThead,
+  TableTr,
+} from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useModalAction } from "@homarr/modals";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { UserAvatar } from "@homarr/ui";
+
+import type { Board } from "../../../_types";
+import {
+  BoardAccessDisplayRow,
+  BoardAccessSelectRow,
+} from "./board-access-table-rows";
+import type { BoardAccessFormType, OnCountChange } from "./form";
+import { FormProvider, useForm } from "./form";
+import { UserSelectModal } from "./user-select-modal";
+
+export interface FormProps {
+  board: Pick<Board, "id" | "creatorId" | "creator">;
+  initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
+  onCountChange: OnCountChange;
+}
+
+export const UsersForm = ({
+  board,
+  initialPermissions,
+  onCountChange,
+}: FormProps) => {
+  const { mutate, isPending } =
+    clientApi.board.saveUserBoardPermissions.useMutation();
+  const utils = clientApi.useUtils();
+  const [users, setUsers] = useState<Map<string, User>>(
+    new Map(
+      initialPermissions.userPermissions.map(({ user }) => [user.id, user]),
+    ),
+  );
+  const { openModal } = useModalAction(UserSelectModal);
+  const t = useI18n();
+  const tPermissions = useScopedI18n("board.setting.section.access.permission");
+  const form = useForm({
+    initialValues: {
+      items: initialPermissions.userPermissions.map(({ user, permission }) => ({
+        itemId: user.id,
+        permission,
+      })),
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (values: BoardAccessFormType) => {
+      mutate(
+        {
+          id: board.id,
+          permissions: values.items,
+        },
+        {
+          onSuccess: () => {
+            void utils.board.getBoardPermissions.invalidate();
+          },
+        },
+      );
+    },
+    [board.id, mutate, utils.board.getBoardPermissions],
+  );
+
+  const handleAddUser = useCallback(() => {
+    const presentUserIds = form.values.items.map(({ itemId: id }) => id);
+
+    openModal({
+      presentUserIds: board.creatorId
+        ? presentUserIds.concat(board.creatorId)
+        : presentUserIds,
+      onSelect: (user) => {
+        setUsers((prev) => new Map(prev).set(user.id, user));
+        form.setFieldValue("items", [
+          {
+            itemId: user.id,
+            permission: "board-view",
+          },
+          ...form.values.items,
+        ]);
+        onCountChange((prev) => prev + 1);
+      },
+    });
+  }, [form, openModal, board.creatorId, onCountChange]);
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <FormProvider form={form}>
+        <Stack pt="sm">
+          <Table>
+            <TableThead>
+              <TableTr>
+                <TableTh>{tPermissions("field.user.label")}</TableTh>
+                <TableTh>{tPermissions("field.permission.label")}</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {board.creator && (
+                <BoardAccessDisplayRow
+                  itemContent={<UserItemContent user={board.creator} />}
+                  permission="board-full"
+                />
+              )}
+              {form.values.items.map((row, index) => (
+                <BoardAccessSelectRow
+                  key={row.itemId}
+                  itemContent={
+                    <UserItemContent user={users.get(row.itemId)!} />
+                  }
+                  permission={row.permission}
+                  index={index}
+                  onCountChange={onCountChange}
+                />
+              ))}
+            </TableTbody>
+          </Table>
+
+          <Group justify="space-between">
+            <Button
+              rightSection={<IconPlus size="1rem" />}
+              variant="light"
+              onClick={handleAddUser}
+            >
+              {t("common.action.add")}
+            </Button>
+            <Button type="submit" loading={isPending} color="teal">
+              {t("common.action.saveChanges")}
+            </Button>
+          </Group>
+        </Stack>
+      </FormProvider>
+    </form>
+  );
+};
+
+const UserItemContent = ({ user }: { user: User }) => {
+  return (
+    <Group wrap="nowrap">
+      <Box visibleFrom="xs">
+        <UserAvatar user={user} size="sm" />
+      </Box>
+      <Anchor
+        component={Link}
+        href={`/manage/users/${user.id}`}
+        size="sm"
+        style={{ whiteSpace: "nowrap" }}
+      >
+        {user.name}
+      </Anchor>
+    </Group>
+  );
+};
+
+interface User {
+  id: string;
+  name: string | null;
+  image: string | null;
+}

apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-select-modal.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react";
+import type { SelectProps } from "@mantine/core";
+import { Button, Group, Loader, Select, Stack } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useForm } from "@homarr/form";
+import { createModal } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import { UserAvatar } from "@homarr/ui";
+
+interface InnerProps {
+  presentUserIds: string[];
+  onSelect: (props: {
+    id: string;
+    name: string;
+    image: string;
+  }) => void | Promise<void>;
+  confirmLabel?: string;
+}
+
+interface UserSelectFormType {
+  userId: string;
+}
+
+export const UserSelectModal = createModal<InnerProps>(
+  ({ actions, innerProps }) => {
+    const t = useI18n();
+    const { data: users, isPending } = clientApi.user.selectable.useQuery();
+    const [loading, setLoading] = useState(false);
+    const form = useForm<UserSelectFormType>();
+    const handleSubmit = async (values: UserSelectFormType) => {
+      const currentUser = users?.find((user) => user.id === values.userId);
+      if (!currentUser) return;
+      setLoading(true);
+      await innerProps.onSelect({
+        id: currentUser.id,
+        name: currentUser.name ?? "",
+        image: currentUser.image ?? "",
+      });
+
+      setLoading(false);
+      actions.closeModal();
+    };
+
+    const confirmLabel = innerProps.confirmLabel ?? t("common.action.add");
+    const currentUser = users?.find((user) => user.id === form.values.userId);
+
+    return (
+      <form onSubmit={form.onSubmit((values) => void handleSubmit(values))}>
+        <Stack>
+          <Select
+            {...form.getInputProps("userId")}
+            label={t("user.action.select.label")}
+            searchable
+            clearable
+            leftSection={
+              isPending ? (
+                <Loader size="xs" />
+              ) : currentUser ? (
+                <UserAvatar user={currentUser} size="xs" />
+              ) : undefined
+            }
+            nothingFoundMessage={t("user.action.select.notFound")}
+            renderOption={createRenderOption(users ?? [])}
+            limit={5}
+            data={users
+              ?.filter((user) => !innerProps.presentUserIds.includes(user.id))
+              .map((user) => ({ value: user.id, label: user.name ?? "" }))}
+          />
+          <Group justify="end">
+            <Button variant="default" onClick={actions.closeModal}>
+              {t("common.action.cancel")}
+            </Button>
+            <Button type="submit" loading={loading}>
+              {confirmLabel}
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    );
+  },
+).withOptions({
+  defaultTitle: (t) =>
+    t("board.setting.section.access.permission.userSelect.title"),
+});
+
+const iconProps = {
+  stroke: 1.5,
+  color: "currentColor",
+  opacity: 0.6,
+  size: "1rem",
+};
+
+const createRenderOption = (
+  users: RouterOutputs["user"]["selectable"],
+): SelectProps["renderOption"] =>
+  function InnerRenderRoot({ option, checked }) {
+    const user = users.find((user) => user.id === option.value);
+    if (!user) return null;
+
+    return (
+      <Group flex="1" gap="xs">
+        <UserAvatar user={user} size="xs" />
+        {option.label}
+        {checked && (
+          <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />
+        )}
+      </Group>
+    );
+  };

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

@@ -2,13 +2,16 @@
 
 import { Button, Grid, Group, Stack, TextInput } from "@mantine/core";
 
-import { backgroundImageAttachments, backgroundImageRepeats, backgroundImageSizes } from "@homarr/definitions";
-import { useZodForm } from "@homarr/form";
+import {
+  backgroundImageAttachments,
+  backgroundImageRepeats,
+  backgroundImageSizes,
+} from "@homarr/definitions";
+import { useForm } from "@homarr/form";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 import type { SelectItemWithDescriptionBadge } from "@homarr/ui";
 import { SelectWithDescriptionBadge } from "@homarr/ui";
-import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -18,8 +21,9 @@ interface Props {
 }
 export const BackgroundSettingsContent = ({ board }: Props) => {
   const t = useI18n();
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useZodForm(validation.board.savePartialSettings, {
+  const { mutate: savePartialSettings, isPending } =
+    useSavePartialSettingsMutation(board);
+  const form = useForm({
     initialValues: {
       backgroundImageUrl: board.backgroundImageUrl ?? "",
       backgroundImageAttachment: board.backgroundImageAttachment,
@@ -32,8 +36,14 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
     "backgroundImageAttachment",
     backgroundImageAttachments,
   );
-  const backgroundImageSizeData = useBackgroundOptionData("backgroundImageSize", backgroundImageSizes);
-  const backgroundImageRepeatData = useBackgroundOptionData("backgroundImageRepeat", backgroundImageRepeats);
+  const backgroundImageSizeData = useBackgroundOptionData(
+    "backgroundImageSize",
+    backgroundImageSizes,
+  );
+  const backgroundImageRepeatData = useBackgroundOptionData(
+    "backgroundImageRepeat",
+    backgroundImageRepeats,
+  );
 
   return (
     <form
@@ -85,9 +95,13 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
   );
 };
 
-type BackgroundImageKey = "backgroundImageAttachment" | "backgroundImageSize" | "backgroundImageRepeat";
+type BackgroundImageKey =
+  | "backgroundImageAttachment"
+  | "backgroundImageSize"
+  | "backgroundImageRepeat";
 
-type inferOptions<TKey extends BackgroundImageKey> = TranslationObject["board"]["field"][TKey]["option"];
+type inferOptions<TKey extends BackgroundImageKey> =
+  TranslationObject["board"]["field"][TKey]["option"];
 
 const useBackgroundOptionData = <
   TKey extends BackgroundImageKey,
@@ -105,7 +119,9 @@ const useBackgroundOptionData = <
     (value) =>
       ({
         label: t(`board.field.${key}.option.${value as string}.label` as never),
-        description: t(`board.field.${key}.option.${value as string}.description` as never),
+        description: t(
+          `board.field.${key}.option.${value as string}.description` as never,
+        ),
         value: value as string,
         badge:
           data.defaultValue === value

apps/nextjs/src/app/[locale]/boards/[name]/settings/_board-access.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import { IconEye, IconPencil, IconSettings } from "@tabler/icons-react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { boardPermissions, boardPermissionsMap } from "@homarr/definitions";
-import { useI18n } from "@homarr/translation/client";
-
-import { AccessSettings } from "~/components/access/access-settings";
-import type { Board } from "../../_types";
-
-interface Props {
-  board: Board;
-  initialPermissions: RouterOutputs["board"]["getBoardPermissions"];
-}
-
-export const BoardAccessSettings = ({ board, initialPermissions }: Props) => {
-  const groupMutation = clientApi.board.saveGroupBoardPermissions.useMutation();
-  const userMutation = clientApi.board.saveUserBoardPermissions.useMutation();
-  const utils = clientApi.useUtils();
-  const t = useI18n();
-
-  const { data: permissions } = clientApi.board.getBoardPermissions.useQuery(
-    {
-      id: board.id,
-    },
-    {
-      initialData: initialPermissions,
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    },
-  );
-
-  return (
-    <AccessSettings
-      entity={{
-        id: board.id,
-        ownerId: board.creatorId,
-        owner: board.creator,
-      }}
-      query={{
-        invalidate: () => utils.board.getBoardPermissions.invalidate(),
-        data: permissions,
-      }}
-      groupsMutation={{
-        mutate: groupMutation.mutate,
-        isPending: groupMutation.isPending,
-      }}
-      usersMutation={{
-        mutate: userMutation.mutate,
-        isPending: userMutation.isPending,
-      }}
-      translate={(key) => t(`board.setting.section.access.permission.item.${key}.label`)}
-      permission={{
-        items: boardPermissions,
-        default: "view",
-        fullAccessGroupPermission: "board-full-all",
-        groupPermissionMapping: boardPermissionsMap,
-        icons: {
-          modify: IconPencil,
-          view: IconEye,
-          full: IconSettings,
-        },
-      }}
-    />
-  );
-};

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

@@ -17,9 +17,8 @@ import {
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 
-import { useZodForm } from "@homarr/form";
+import { useForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 import { generateColors } from "../../(content)/_theme";
@@ -34,7 +33,7 @@ const hexRegex = /^#[0-9a-fA-F]{6}$/;
 const progressPercentageLabel = (value: number) => `${value}%`;
 
 export const ColorSettingsContent = ({ board }: Props) => {
-  const form = useZodForm(validation.board.savePartialSettings, {
+  const form = useForm({
     initialValues: {
       primaryColor: board.primaryColor,
       secondaryColor: board.secondaryColor,
@@ -44,7 +43,8 @@ export const ColorSettingsContent = ({ board }: Props) => {
   const [showPreview, { toggle }] = useDisclosure(false);
   const t = useI18n();
   const theme = useMantineTheme();
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
+  const { mutate: savePartialSettings, isPending } =
+    useSavePartialSettingsMutation(board);
 
   return (
     <form
@@ -76,7 +76,11 @@ export const ColorSettingsContent = ({ board }: Props) => {
             />
           </Grid.Col>
           <Grid.Col span={12}>
-            <Anchor onClick={toggle}>{showPreview ? t("common.preview.hide") : t("common.preview.show")}</Anchor>
+            <Anchor onClick={toggle}>
+              {showPreview
+                ? t("common.preview.hide")
+                : t("common.preview.show")}
+            </Anchor>
           </Grid.Col>
           <Grid.Col span={12}>
             <Collapse in={showPreview}>
@@ -110,13 +114,15 @@ export const ColorSettingsContent = ({ board }: Props) => {
 };
 
 interface ColorsPreviewProps {
-  previewColor: string | undefined;
+  previewColor: string;
 }
 
 const ColorsPreview = ({ previewColor }: ColorsPreviewProps) => {
   const theme = useMantineTheme();
 
-  const colors = previewColor && hexRegex.test(previewColor) ? generateColors(previewColor) : generateColors("#000000");
+  const colors = hexRegex.test(previewColor)
+    ? generateColors(previewColor)
+    : generateColors("#000000");
 
   return (
     <Group gap={0} wrap="nowrap">

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

@@ -1,91 +1,7 @@
 "use client";
 
-import { Alert, Button, Group, Input, Stack } from "@mantine/core";
-import { highlight, languages } from "prismjs";
-import Editor from "react-simple-code-editor";
+// TODO: add some sort of store (maybe directory on GitHub)
 
-import "~/styles/prismjs.scss";
-
-import { IconInfoCircle } from "@tabler/icons-react";
-
-import { useForm } from "@homarr/form";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-
-import type { Board } from "../../_types";
-import { useSavePartialSettingsMutation } from "./_shared";
-import classes from "./customcss.module.css";
-
-interface Props {
-  board: Board;
-}
-
-export const CustomCssSettingsContent = ({ board }: Props) => {
-  const t = useI18n();
-  const customCssT = useScopedI18n("board.field.customCss");
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useForm({
-    initialValues: {
-      customCss: board.customCss ?? "",
-    },
-  });
-
-  return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        savePartialSettings({
-          id: board.id,
-          ...values,
-        });
-      })}
-    >
-      <Stack>
-        <CustomCssInput {...form.getInputProps("customCss")} />
-
-        <Alert variant="light" color="cyan" title={customCssT("customClassesAlert.title")} icon={<IconInfoCircle />}>
-          {customCssT("customClassesAlert.description")}
-        </Alert>
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending} color="teal">
-            {t("common.action.saveChanges")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-};
-
-interface CustomCssInputProps {
-  value?: string;
-  onChange: (value: string) => void;
-}
-
-const CustomCssInput = ({ value, onChange }: CustomCssInputProps) => {
-  const customCssT = useScopedI18n("board.field.customCss");
-
-  return (
-    <Input.Wrapper
-      label={customCssT("label")}
-      labelProps={{
-        htmlFor: "custom-css",
-      }}
-      description={customCssT("description")}
-      inputWrapperOrder={["label", "description", "input", "error"]}
-    >
-      <div className={classes.codeEditorRoot}>
-        <Editor
-          textareaId="custom-css"
-          onValueChange={onChange}
-          value={value ?? ""}
-          highlight={(code) => highlight(code, languages.extend("css", {}), "css")}
-          padding={10}
-          style={{
-            fontFamily: '"Fira code", "Fira Mono", monospace',
-            fontSize: 12,
-            minHeight: 250,
-          }}
-        />
-      </div>
-    </Input.Wrapper>
-  );
+export const CustomCssSettingsContent = () => {
+  return null;
 };

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

@@ -12,7 +12,7 @@ import { BoardRenameModal } from "~/components/board/modals/board-rename-modal";
 import { useRequiredBoard } from "../../(content)/_context";
 import classes from "./danger.module.css";
 
-export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility: boolean }) => {
+export const DangerZoneSettingsContent = () => {
   const board = useRequiredBoard();
   const t = useScopedI18n("board.setting");
   const router = useRouter();
@@ -20,7 +20,8 @@ export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility:
   const { openModal } = useModalAction(BoardRenameModal);
   const { mutate: changeVisibility, isPending: isChangeVisibilityPending } =
     clientApi.board.changeBoardVisibility.useMutation();
-  const { mutate: deleteBoard, isPending: isDeletePending } = clientApi.board.deleteBoard.useMutation();
+  const { mutate: deleteBoard, isPending: isDeletePending } =
+    clientApi.board.deleteBoard.useMutation();
   const utils = clientApi.useUtils();
   const visibility = board.isPublic ? "public" : "private";
 
@@ -36,8 +37,12 @@ export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility:
 
   const onVisibilityClick = useCallback(() => {
     openConfirmModal({
-      title: t(`section.dangerZone.action.visibility.confirm.${visibility}.title`),
-      children: t(`section.dangerZone.action.visibility.confirm.${visibility}.description`),
+      title: t(
+        `section.dangerZone.action.visibility.confirm.${visibility}.title`,
+      ),
+      children: t(
+        `section.dangerZone.action.visibility.confirm.${visibility}.description`,
+      ),
       onConfirm: () => {
         changeVisibility(
           {
@@ -47,7 +52,7 @@ export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility:
           {
             onSettled() {
               void utils.board.getBoardByName.invalidate({ name: board.name });
-              void utils.board.getHomeBoard.invalidate();
+              void utils.board.getDefaultBoard.invalidate();
             },
           },
         );
@@ -59,7 +64,7 @@ export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility:
     changeVisibility,
     t,
     utils.board.getBoardByName,
-    utils.board.getHomeBoard,
+    utils.board.getDefaultBoard,
     visibility,
     openConfirmModal,
   ]);
@@ -90,18 +95,18 @@ export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility:
         buttonText={t("section.dangerZone.action.rename.button")}
         onClick={onRenameClick}
       />
-      {hideVisibility ? null : (
-        <>
-          <Divider />
-          <DangerZoneRow
-            label={t("section.dangerZone.action.visibility.label")}
-            description={t(`section.dangerZone.action.visibility.description.${visibility}`)}
-            buttonText={t(`section.dangerZone.action.visibility.button.${visibility}`)}
-            onClick={onVisibilityClick}
-            isPending={isChangeVisibilityPending}
-          />
-        </>
-      )}
+      <Divider />
+      <DangerZoneRow
+        label={t("section.dangerZone.action.visibility.label")}
+        description={t(
+          `section.dangerZone.action.visibility.description.${visibility}`,
+        )}
+        buttonText={t(
+          `section.dangerZone.action.visibility.button.${visibility}`,
+        )}
+        onClick={onVisibilityClick}
+        isPending={isChangeVisibilityPending}
+      />
       <Divider />
       <DangerZoneRow
         label={t("section.dangerZone.action.delete.label")}
@@ -122,7 +127,13 @@ interface DangerZoneRowProps {
   onClick: () => void;
 }
 
-const DangerZoneRow = ({ label, description, buttonText, onClick, isPending }: DangerZoneRowProps) => {
+const DangerZoneRow = ({
+  label,
+  description,
+  buttonText,
+  onClick,
+  isPending,
+}: DangerZoneRowProps) => {
   return (
     <Group justify="space-between" px="md" className={classes.dangerZoneGroup}>
       <Stack gap={0}>
@@ -132,7 +143,12 @@ const DangerZoneRow = ({ label, description, buttonText, onClick, isPending }: D
         <Text size="sm">{description}</Text>
       </Stack>
       <Group justify="end" w={{ base: "100%", xs: "auto" }}>
-        <Button variant="subtle" color="red" loading={isPending} onClick={onClick}>
+        <Button
+          variant="subtle"
+          color="red"
+          loading={isPending}
+          onClick={onClick}
+        >
           {buttonText}
         </Button>
       </Group>

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

@@ -1,15 +1,25 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { Button, Grid, Group, Loader, Stack, TextInput, Tooltip } from "@mantine/core";
-import { useDebouncedValue, useDocumentTitle, useFavicon } from "@mantine/hooks";
+import {
+  Button,
+  Grid,
+  Group,
+  Loader,
+  Stack,
+  TextInput,
+  Tooltip,
+} from "@mantine/core";
+import {
+  useDebouncedValue,
+  useDocumentTitle,
+  useFavicon,
+} from "@mantine/hooks";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
-import { useZodForm } from "@homarr/form";
+import { useForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { validation } from "@homarr/validation";
 
-import { createMetaTitle } from "~/metadata";
 import type { Board } from "../../_types";
 import { useUpdateBoard } from "../../(content)/_client";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -26,31 +36,22 @@ export const GeneralSettingsContent = ({ board }: Props) => {
   });
   const { updateBoard } = useUpdateBoard();
 
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useZodForm(
-    validation.board.savePartialSettings
-      .pick({
-        pageTitle: true,
-        logoImageUrl: true,
-        metaTitle: true,
-        faviconImageUrl: true,
-      })
-      .required(),
-    {
-      initialValues: {
-        pageTitle: board.pageTitle ?? "",
-        logoImageUrl: board.logoImageUrl ?? "",
-        metaTitle: board.metaTitle ?? "",
-        faviconImageUrl: board.faviconImageUrl ?? "",
-      },
-      onValuesChange({ pageTitle }) {
-        updateBoard((previous) => ({
-          ...previous,
-          pageTitle,
-        }));
-      },
+  const { mutate: savePartialSettings, isPending } =
+    useSavePartialSettingsMutation(board);
+  const form = useForm({
+    initialValues: {
+      pageTitle: board.pageTitle ?? "",
+      logoImageUrl: board.logoImageUrl ?? "",
+      metaTitle: board.metaTitle ?? "",
+      faviconImageUrl: board.faviconImageUrl ?? "",
     },
-  );
+    onValuesChange({ pageTitle }) {
+      updateBoard((previous) => ({
+        ...previous,
+        pageTitle,
+      }));
+    },
+  });
 
   const metaTitleStatus = useMetaTitlePreview(form.values.metaTitle);
   const faviconStatus = useFaviconPreview(form.values.faviconImageUrl);
@@ -93,7 +94,7 @@ export const GeneralSettingsContent = ({ board }: Props) => {
           <Grid.Col span={{ xs: 12, md: 6 }}>
             <TextInput
               label={t("board.field.metaTitle.label")}
-              placeholder={createMetaTitle(t("board.content.metaTitle", { boardName: board.name }))}
+              placeholder="Default Board | Homarr"
               rightSection={<PendingOrInvalidIndicator {...metaTitleStatus} />}
               {...form.getInputProps("metaTitle")}
             />
@@ -125,12 +126,22 @@ export const GeneralSettingsContent = ({ board }: Props) => {
   );
 };
 
-const PendingOrInvalidIndicator = ({ isPending, isInvalid }: { isPending: boolean; isInvalid?: boolean }) => {
+const PendingOrInvalidIndicator = ({
+  isPending,
+  isInvalid,
+}: {
+  isPending: boolean;
+  isInvalid?: boolean;
+}) => {
   const t = useI18n();
 
   if (isInvalid) {
     return (
-      <Tooltip multiline w={220} label={t("board.setting.section.general.unrecognizedLink")}>
+      <Tooltip
+        multiline
+        w={220}
+        label={t("board.setting.section.general.unrecognizedLink")}
+      >
         <IconAlertTriangle size="1rem" color="red" />
       </Tooltip>
     );
@@ -172,7 +183,8 @@ const useMetaTitlePreview = (title: string | null) => {
 
 const validFaviconExtensions = ["ico", "png", "svg", "gif"];
 const isValidUrl = (url: string) =>
-  url.includes("/") && validFaviconExtensions.some((extension) => url.endsWith(`.${extension}`));
+  url.includes("/") &&
+  validFaviconExtensions.some((extension) => url.endsWith(`.${extension}`));
 
 const useFaviconPreview = (url: string | null) => {
   const [faviconDebounced] = useDebouncedValue(url ?? "", 500);

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

@@ -2,9 +2,8 @@
 
 import { Button, Grid, Group, Input, Slider, Stack } from "@mantine/core";
 
-import { useZodForm } from "@homarr/form";
+import { useForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -14,8 +13,9 @@ interface Props {
 }
 export const LayoutSettingsContent = ({ board }: Props) => {
   const t = useI18n();
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useZodForm(validation.board.savePartialSettings.pick({ columnCount: true }).required(), {
+  const { mutate: savePartialSettings, isPending } =
+    useSavePartialSettingsMutation(board);
+  const form = useForm({
     initialValues: {
       columnCount: board.columnCount,
     },
@@ -34,7 +34,13 @@ export const LayoutSettingsContent = ({ board }: Props) => {
         <Grid>
           <Grid.Col span={{ sm: 12, md: 6 }}>
             <Input.Wrapper label={t("board.field.columnCount.label")}>
-              <Slider mt="xs" min={1} max={24} step={1} {...form.getInputProps("columnCount")} />
+              <Slider
+                mt="xs"
+                min={1}
+                max={24}
+                step={1}
+                {...form.getInputProps("columnCount")}
+              />
             </Input.Wrapper>
           </Grid.Col>
         </Grid>

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

@@ -7,7 +7,7 @@ export const useSavePartialSettingsMutation = (board: Board) => {
   return clientApi.board.savePartialBoardSettings.useMutation({
     onSettled() {
       void utils.board.getBoardByName.invalidate({ name: board.name });
-      void utils.board.getHomeBoard.invalidate();
+      void utils.board.getDefaultBoard.invalidate();
     },
   });
 };

apps/nextjs/src/app/[locale]/boards/[name]/settings/customcss.module.css

@@ -1,22 +0,0 @@
-.codeEditorFooter {
-  border-bottom-left-radius: var(--mantine-radius-sm);
-  border-bottom-right-radius: var(--mantine-radius-sm);
-  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-7));
-}
-
-.codeEditorRoot {
-  margin-top: 4px;
-  border-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--mantine-radius-sm);
-}
-
-.codeEditor {
-  background-color: light-dark(white, var(--mantine-color-dark-6));
-  font-size: var(--mantine-font-size-xs);
-}
-
-.codeEditor ::placeholder {
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-}

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

@@ -1,6 +1,14 @@
 import type { PropsWithChildren } from "react";
 import { notFound } from "next/navigation";
-import { AccordionControl, AccordionItem, AccordionPanel, Container, Stack, Text, Title } from "@mantine/core";
+import {
+  AccordionControl,
+  AccordionItem,
+  AccordionPanel,
+  Container,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import {
   IconAlertTriangle,
   IconBrush,
@@ -14,16 +22,14 @@ import { TRPCError } from "@trpc/server";
 
 import { api } from "@homarr/api/server";
 import { capitalize } from "@homarr/common";
-import { db } from "@homarr/db";
-import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import type { TranslationObject } from "@homarr/translation";
 import { getScopedI18n } from "@homarr/translation/server";
 import type { TablerIcon } from "@homarr/ui";
 
-import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
+import { getBoardPermissions } from "~/components/board/permissions/server";
 import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
+import { AccessSettingsContent } from "./_access";
 import { BackgroundSettingsContent } from "./_background";
-import { BoardAccessSettings } from "./_board-access";
 import { ColorSettingsContent } from "./_colors";
 import { CustomCssSettingsContent } from "./_customCss";
 import { DangerZoneSettingsContent } from "./_danger";
@@ -39,15 +45,15 @@ interface Props {
   };
 }
 
-const getBoardAndPermissionsAsync = async (params: Props["params"]) => {
+const getBoardAndPermissions = async (params: Props["params"]) => {
   try {
     const board = await api.board.getBoardByName({ name: params.name });
-    const { hasFullAccess } = await getBoardPermissionsAsync(board);
+    const { hasFullAccess } = await getBoardPermissions(board);
     const permissions = hasFullAccess
       ? await api.board.getBoardPermissions({ id: board.id })
       : {
-          users: [],
-          groups: [],
+          userPermissions: [],
+          groupPermissions: [],
           inherited: [],
         };
 
@@ -63,17 +69,22 @@ const getBoardAndPermissionsAsync = async (params: Props["params"]) => {
   }
 };
 
-export default async function BoardSettingsPage({ params, searchParams }: Props) {
-  const { board, permissions } = await getBoardAndPermissionsAsync(params);
-  const boardSettings = await getServerSettingByKeyAsync(db, "board");
-  const { hasFullAccess } = await getBoardPermissionsAsync(board);
+export default async function BoardSettingsPage({
+  params,
+  searchParams,
+}: Props) {
+  const { board, permissions } = await getBoardAndPermissions(params);
+  const { hasFullAccess } = await getBoardPermissions(board);
   const t = await getScopedI18n("board.setting");
 
   return (
     <Container>
       <Stack>
         <Title>{t("title", { boardName: capitalize(board.name) })}</Title>
-        <ActiveTabAccordion variant="separated" defaultValue={searchParams.tab ?? "general"}>
+        <ActiveTabAccordion
+          variant="separated"
+          defaultValue={searchParams.tab ?? "general"}
+        >
           <AccordionItemFor value="general" icon={IconSettings}>
             <GeneralSettingsContent board={board} />
           </AccordionItemFor>
@@ -87,15 +98,23 @@ export default async function BoardSettingsPage({ params, searchParams }: Props)
             <ColorSettingsContent board={board} />
           </AccordionItemFor>
           <AccordionItemFor value="customCss" icon={IconFileTypeCss}>
-            <CustomCssSettingsContent board={board} />
+            <CustomCssSettingsContent />
           </AccordionItemFor>
           {hasFullAccess && (
             <>
               <AccordionItemFor value="access" icon={IconUser}>
-                <BoardAccessSettings board={board} initialPermissions={permissions} />
+                <AccessSettingsContent
+                  board={board}
+                  initialPermissions={permissions}
+                />
               </AccordionItemFor>
-              <AccordionItemFor value="dangerZone" icon={IconAlertTriangle} danger noPadding>
-                <DangerZoneSettingsContent hideVisibility={boardSettings.homeBoardId === board.id} />
+              <AccordionItemFor
+                value="dangerZone"
+                icon={IconAlertTriangle}
+                danger
+                noPadding
+              >
+                <DangerZoneSettingsContent />
               </AccordionItemFor>
             </>
           )}
@@ -112,7 +131,13 @@ type AccordionItemForProps = PropsWithChildren<{
   noPadding?: boolean;
 }>;
 
-const AccordionItemFor = async ({ value, children, icon: Icon, danger, noPadding }: AccordionItemForProps) => {
+const AccordionItemFor = async ({
+  value,
+  children,
+  icon: Icon,
+  danger,
+  noPadding,
+}: AccordionItemForProps) => {
   const t = await getScopedI18n("board.setting.section");
   return (
     <AccordionItem
@@ -133,7 +158,13 @@ const AccordionItemFor = async ({ value, children, icon: Icon, danger, noPadding
           {t(`${value}.title`)}
         </Text>
       </AccordionControl>
-      <AccordionPanel styles={noPadding ? { content: { paddingRight: 0, paddingLeft: 0 } } : undefined}>
+      <AccordionPanel
+        styles={
+          noPadding
+            ? { content: { paddingRight: 0, paddingLeft: 0 } }
+            : undefined
+        }
+      >
         {children}
       </AccordionPanel>
     </AccordionItem>

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

@@ -4,25 +4,26 @@ import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";
 
 import { logger } from "@homarr/log";
+import { GlobalItemServerDataRunner } from "@homarr/widgets";
 
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
 import { ClientShell } from "~/components/layout/shell";
-import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import type { Board } from "./_types";
 import { BoardProvider } from "./(content)/_context";
 import type { Params } from "./(content)/_creator";
-import { CustomCss } from "./(content)/_custom-css";
 import { BoardMantineProvider } from "./(content)/_theme";
 
 interface CreateBoardLayoutProps<TParams extends Params> {
   headerActions: JSX.Element;
-  getInitialBoardAsync: (params: TParams) => Promise<Board>;
+  getInitialBoard: (params: TParams) => Promise<Board>;
+  isBoardContentPage: boolean;
 }
 
 export const createBoardLayout = <TParams extends Params>({
   headerActions,
-  getInitialBoardAsync: getInitialBoard,
+  getInitialBoard,
+  isBoardContentPage,
 }: CreateBoardLayoutProps<TParams>) => {
   const Layout = async ({
     params,
@@ -38,22 +39,25 @@ export const createBoardLayout = <TParams extends Params>({
 
       throw error;
     });
-    const colorScheme = await getCurrentColorSchemeAsync();
 
     return (
-      <BoardProvider initialBoard={initialBoard}>
-        <BoardMantineProvider defaultColorScheme={colorScheme}>
-          <CustomCss />
-          <ClientShell hasNavigation={false}>
-            <MainHeader
-              logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
-              actions={headerActions}
-              hasNavigation={false}
-            />
-            <AppShellMain>{children}</AppShellMain>
-          </ClientShell>
-        </BoardMantineProvider>
-      </BoardProvider>
+      <GlobalItemServerDataRunner
+        board={initialBoard}
+        shouldRun={isBoardContentPage}
+      >
+        <BoardProvider initialBoard={initialBoard}>
+          <BoardMantineProvider>
+            <ClientShell hasNavigation={false}>
+              <MainHeader
+                logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
+                actions={headerActions}
+                hasNavigation={false}
+              />
+              <AppShellMain>{children}</AppShellMain>
+            </ClientShell>
+          </BoardMantineProvider>
+        </BoardProvider>
+      </GlobalItemServerDataRunner>
     );
   };
 

apps/nextjs/src/app/[locale]/boards/_types.ts

@@ -1,12 +1,14 @@
 import type { RouterOutputs } from "@homarr/api";
 import type { WidgetKind } from "@homarr/definitions";
 
-export type Board = RouterOutputs["board"]["getHomeBoard"];
+export type Board = RouterOutputs["board"]["getDefaultBoard"];
 export type Section = Board["sections"][number];
 export type Item = Section["items"][number];
 
 export type CategorySection = Extract<Section, { kind: "category" }>;
 export type EmptySection = Extract<Section, { kind: "empty" }>;
-export type DynamicSection = Extract<Section, { kind: "dynamic" }>;
 
-export type ItemOfKind<TKind extends WidgetKind> = Extract<Item, { kind: TKind }>;
+export type ItemOfKind<TKind extends WidgetKind> = Extract<
+  Item,
+  { kind: TKind }
+>;

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

@@ -5,11 +5,14 @@ type PropsWithChildren = Required<React.PropsWithChildren>;
 export const composeWrappers = (
   wrappers: React.FunctionComponent<PropsWithChildren>[],
 ): React.FunctionComponent<PropsWithChildren> => {
-  return wrappers.reverse().reduce((Acc, Current): React.FunctionComponent<PropsWithChildren> => {
-    return (props) => (
-      <Current>
-        <Acc {...props} />
-      </Current>
-    );
-  });
+  return wrappers
+    .reverse()
+    .reduce((Acc, Current): React.FunctionComponent<PropsWithChildren> => {
+      // eslint-disable-next-line react/display-name
+      return (props) => (
+        <Current>
+          <Acc {...props} />
+        </Current>
+      );
+    });
 };

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

@@ -4,18 +4,24 @@ import { useRouter } from "next/navigation";
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useZodForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useForm, zodResolver } from "@homarr/form";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { CustomPasswordInput } from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 export const InitUserForm = () => {
   const router = useRouter();
   const t = useScopedI18n("user");
-  const { mutateAsync, error, isPending } = clientApi.user.initUser.useMutation();
-  const form = useZodForm(validation.user.init, {
+  const { mutateAsync, error, isPending } =
+    clientApi.user.initUser.useMutation();
+  const form = useForm<FormType>({
+    validate: zodResolver(validation.user.init),
+    validateInputOnBlur: true,
+    validateInputOnChange: true,
     initialValues: {
       username: "",
       password: "",
@@ -23,7 +29,7 @@ export const InitUserForm = () => {
     },
   });
 
-  const handleSubmitAsync = async (values: FormType) => {
+  const handleSubmit = async (values: FormType) => {
     await mutateAsync(values, {
       onSuccess: () => {
         showSuccessNotification({
@@ -45,18 +51,23 @@ export const InitUserForm = () => {
     <Stack gap="xl">
       <form
         onSubmit={form.onSubmit(
-          (values) => void handleSubmitAsync(values),
+          (values) => void handleSubmit(values),
           (err) => console.log(err),
         )}
       >
         <Stack gap="lg">
-          <TextInput label={t("field.username.label")} {...form.getInputProps("username")} />
-          <CustomPasswordInput
-            withPasswordRequirements
+          <TextInput
+            label={t("field.username.label")}
+            {...form.getInputProps("username")}
+          />
+          <PasswordInput
             label={t("field.password.label")}
             {...form.getInputProps("password")}
           />
-          <PasswordInput label={t("field.passwordConfirm.label")} {...form.getInputProps("confirmPassword")} />
+          <PasswordInput
+            label={t("field.passwordConfirm.label")}
+            {...form.getInputProps("confirmPassword")}
+          />
           <Button type="submit" fullWidth loading={isPending}>
             {t("action.create")}
           </Button>

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

@@ -3,25 +3,16 @@ import { Inter } from "next/font/google";
 
 import "@homarr/notifications/styles.css";
 import "@homarr/spotlight/styles.css";
-import "@homarr/ui/styles.css";
-import "~/styles/scroll-area.scss";
+import "@mantine/core/styles.css";
 
-import { notFound } from "next/navigation";
-import { NextIntlClientProvider } from "next-intl";
+import { ColorSchemeScript, createTheme, MantineProvider } from "@mantine/core";
 
-import { env } from "@homarr/auth/env.mjs";
 import { auth } from "@homarr/auth/next";
 import { ModalProvider } from "@homarr/modals";
 import { Notifications } from "@homarr/notifications";
-import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
-import { getI18nMessages } from "@homarr/translation/server";
 
-import { Analytics } from "~/components/layout/analytics";
-import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
-import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
-import { DayJsLoader } from "./_client-providers/dayjs-loader";
 import { JotaiProvider } from "./_client-providers/jotai";
-import { CustomMantineProvider } from "./_client-providers/mantine";
+import { NextInternationalProvider } from "./_client-providers/next-international";
 import { AuthProvider } from "./_client-providers/session";
 import { TRPCReactProvider } from "./_client-providers/trpc";
 import { composeWrappers } from "./compose";
@@ -31,8 +22,8 @@ const fontSans = Inter({
   variable: "--font-sans",
 });
 
-// eslint-disable-next-line no-restricted-syntax
-export const generateMetadata = async (): Promise<Metadata> => ({
+export const metadata: Metadata = {
+  metadataBase: new URL("http://localhost:3000"),
   title: "Homarr",
   description:
     "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.",
@@ -43,17 +34,12 @@ export const generateMetadata = async (): Promise<Metadata> => ({
     url: "https://homarr.dev",
     siteName: "Homarr Documentation",
   },
-  icons: {
-    icon: "/logo/logo.png",
-    apple: "/logo/logo.png",
+  twitter: {
+    card: "summary_large_image",
+    site: "@jullerino",
+    creator: "@jullerino",
   },
-  appleWebApp: {
-    title: "Homarr",
-    capable: true,
-    startupImage: { url: "/logo/logo.png" },
-    statusBarStyle: (await getCurrentColorSchemeAsync()) === "dark" ? "black-translucent" : "default",
-  },
-});
+};
 
 export const viewport: Viewport = {
   themeColor: [
@@ -62,42 +48,39 @@ export const viewport: Viewport = {
   ],
 };
 
-export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
-  if (!isLocaleSupported(props.params.locale)) {
-    notFound();
-  }
-
-  const session = await auth();
-  const colorScheme = await getCurrentColorSchemeAsync();
-  const direction = isLocaleRTL(props.params.locale) ? "rtl" : "ltr";
-  const i18nMessages = await getI18nMessages();
+export default function Layout(props: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  const colorScheme = "dark";
 
   const StackedProvider = composeWrappers([
-    (innerProps) => {
-      return <AuthProvider session={session} logoutUrl={env.AUTH_LOGOUT_REDIRECT_URL} {...innerProps} />;
+    async (innerProps) => {
+      const session = await auth();
+      return <AuthProvider session={session} {...innerProps} />;
     },
     (innerProps) => <JotaiProvider {...innerProps} />,
     (innerProps) => <TRPCReactProvider {...innerProps} />,
-    (innerProps) => <DayJsLoader {...innerProps} />,
-    (innerProps) => <NextIntlClientProvider {...innerProps} messages={i18nMessages} />,
-    (innerProps) => <CustomMantineProvider {...innerProps} defaultColorScheme={colorScheme} />,
+    (innerProps) => (
+      <NextInternationalProvider {...innerProps} locale={props.params.locale} />
+    ),
+    (innerProps) => (
+      <MantineProvider
+        {...innerProps}
+        defaultColorScheme="dark"
+        theme={createTheme({
+          primaryColor: "red",
+          autoContrast: true,
+        })}
+      />
+    ),
     (innerProps) => <ModalProvider {...innerProps} />,
   ]);
 
   return (
-    // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
-    <html
-      lang={props.params.locale}
-      dir={direction}
-      data-mantine-color-scheme={colorScheme}
-      style={{
-        backgroundColor: colorScheme === "dark" ? "#242424" : "#fff",
-      }}
-      suppressHydrationWarning
-    >
+    <html lang="en" suppressHydrationWarning>
       <head>
-        <Analytics />
-        <SearchEngineOptimization />
+        <ColorSchemeScript defaultColorScheme={colorScheme} />
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <StackedProvider>

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

@@ -1,5 +1,17 @@
-import { notFound } from "next/navigation";
+import { Center, Stack, Text, Title } from "@mantine/core";
 
-export default function NotFound() {
-  return notFound();
+import { getScopedI18n } from "@homarr/translation/server";
+
+export default async function NotFound() {
+  const t = await getScopedI18n("management.notFound");
+  return (
+    <Center h="100%">
+      <Stack align="center">
+        <Title order={1} tt="uppercase">
+          {t("title")}
+        </Title>
+        <Text>{t("text")}</Text>
+      </Stack>
+    </Center>
+  );
 }

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

@@ -1,36 +0,0 @@
-.bannerContainer {
-  border-radius: 8px;
-  overflow: hidden;
-  background: linear-gradient(
-    130deg,
-    #fa52521f 0%,
-    var(--mantine-color-dark-6) 35%,
-    var(--mantine-color-dark-6) 100%
-  ) !important;
-}
-
-.scrollContainer {
-  height: 100%;
-  transform: rotateZ(10deg);
-}
-
-@keyframes scrolling {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-50.8%);
-  }
-}
-
-.scrollAnimationContainer {
-  animation: scrolling;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .scrollAnimationContainer {
-    animation: none !important;
-  }
-}

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

@@ -1,78 +0,0 @@
-import { Box, Grid, GridCol, Group, Image, Stack, Title } from "@mantine/core";
-
-import { splitToNChunks } from "@homarr/common";
-
-import classes from "./hero-banner.module.css";
-
-const icons = [
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/homarr.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/sabnzbd.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/deluge.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/radarr.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/sonarr.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/lidarr.svg",
-  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/pihole.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/dashdot.png",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/overseerr.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/plex.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/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/walkxcode/dashboard-icons/svg/readarr.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/transmission.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/qbittorrent.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/nzbget.png",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/openmediavault.svg",
-  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/docker.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/jellyseerr.svg",
-  "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/assets/adguardhome.svg",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/tdarr.png",
-  "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/prowlarr.svg",
-];
-
-const countIconGroups = 3;
-const animationDurationInSeconds = 12;
-
-export const HeroBanner = () => {
-  const arrayInChunks = splitToNChunks(icons, countIconGroups);
-  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">
-          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" }}>Homarr Board</Title>
-        </Group>
-      </Stack>
-      <Box visibleFrom="md" className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
-        <Grid>
-          {Array(countIconGroups)
-            .fill(0)
-            .map((_, columnIndex) => (
-              <GridCol key={`grid-column-${columnIndex}`} span={gridSpan}>
-                <Stack
-                  className={classes.scrollAnimationContainer}
-                  style={{
-                    animationDuration: `${animationDurationInSeconds - columnIndex}s`,
-                  }}
-                >
-                  {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image key={`grid-column-${columnIndex}-scroll-1-${index}`} src={icon} radius="md" w={50} h={50} />
-                  ))}
-
-                  {/* This is used for making the animation seem seamless */}
-                  {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image key={`grid-column-${columnIndex}-scroll-2-${index}`} src={icon} radius="md" w={50} h={50} />
-                  ))}
-                </Stack>
-              </GridCol>
-            ))}
-        </Grid>
-      </Box>
-    </Box>
-  );
-};

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

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