diff --git a/.github/renovate.json b/.github/renovate.json5
similarity index 75%
rename from .github/renovate.json
rename to .github/renovate.json5
index 69fb4cdad..8978459cf 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json5
@@ -6,7 +6,8 @@
"packageRules": [
{
"matchPackagePatterns": [
- "^@homarr/"
+ "^@homarr/",
+ "tsx" // Disabled for now as version 0.14.4 did not work with the current version of homarr. It resulted in a ERR_MODULE_NOT_FOUND error
],
"enabled": false
},
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
deleted file mode 100644
index b8fbfaa9d..000000000
--- a/.github/workflows/build.yml
+++ /dev/null
@@ -1,31 +0,0 @@
-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
diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml
index 228dd9989..a75c144b7 100644
--- a/.github/workflows/code-quality.yml
+++ b/.github/workflows/code-quality.yml
@@ -1,4 +1,4 @@
-name: Code quality analysis
+name: "[Quality] Code 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
@@ -72,3 +72,15 @@ jobs:
# Only works if you set `reportOnFailure: true` in your vite config as specified above
if: always()
uses: davelosert/vitest-coverage-report-action@v2
+
+ 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
diff --git a/.github/workflows/conventional-commits.yml b/.github/workflows/conventions-semantic-commits.yml
similarity index 77%
rename from .github/workflows/conventional-commits.yml
rename to .github/workflows/conventions-semantic-commits.yml
index 8f2216bd7..d26307ba0 100644
--- a/.github/workflows/conventional-commits.yml
+++ b/.github/workflows/conventions-semantic-commits.yml
@@ -1,7 +1,5 @@
-
# https://github.com/webiny/action-conventional-commits?tab=readme-ov-file
-
-name: Conventional Commits
+name: "[Conventions] Semantic Commits"
on:
pull_request:
@@ -12,5 +10,5 @@ jobs:
name: Conventional Commits
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: webiny/action-conventional-commits@v1.3.0
\ No newline at end of file
diff --git a/.github/workflows/pr-conventional-commits.yml b/.github/workflows/conventions-semantic-pull-requests.yml
similarity index 81%
rename from .github/workflows/pr-conventional-commits.yml
rename to .github/workflows/conventions-semantic-pull-requests.yml
index e3dfb587b..cec459930 100644
--- a/.github/workflows/pr-conventional-commits.yml
+++ b/.github/workflows/conventions-semantic-pull-requests.yml
@@ -1,4 +1,4 @@
-name: "Lint PR"
+name: "[Conventions] Semantic PRs"
on:
pull_request_target:
@@ -11,8 +11,7 @@ permissions:
pull-requests: read
jobs:
- main:
- name: Validate PR title
+ validate-pull-request-title:
runs-on: ubuntu-latest
steps:
- uses: amannn/action-semantic-pull-request@v5
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/deployment-docker-image.yml
similarity index 63%
rename from .github/workflows/docker-image.yml
rename to .github/workflows/deployment-docker-image.yml
index 046523358..63592aff5 100644
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/deployment-docker-image.yml
@@ -1,18 +1,25 @@
-name: Docker image
+name: "[Deployment] Release"
on:
- pull_request:
- types:
- - closed
+ push:
branches:
- main
- workflow_dispatch: {}
+ workflow_dispatch:
+ inputs:
+ send-notifications:
+ type: boolean
+ required: false
+ default: true
+ description: Send notifications
permissions:
contents: write
packages: write
env:
+ SKIP_ENV_VALIDATION: true
+ REGISTRY: ghcr.io
+ IMAGE_NAME: ${{ github.repository }}
TURBO_TELEMETRY_DISABLED: 1
concurrency: production
@@ -26,6 +33,7 @@ jobs:
node-version: [20]
steps:
- name: Discord notification
+ if: ${{ github.events.inputs.send-notifications }}
env:
DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
uses: Ilshidur/action-discord@master
@@ -37,8 +45,9 @@ jobs:
uses: ietf-tools/semver-action@v1
with:
token: ${{ github.token }}
- branch: master
+ branch: dev
- name: Discord notification
+ if: ${{ github.events.inputs.send-notifications }}
env:
DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
uses: Ilshidur/action-discord@master
@@ -52,16 +61,19 @@ jobs:
with:
node-version: ${{ matrix.node-version }}
cache: "pnpm"
- - name: Install dependencies
- run: pnpm install
- - name: Build artifacts
- run: pnpm build
- name: Discord notification
+ if: ${{ github.events.inputs.send-notifications }}
env:
DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
uses: Ilshidur/action-discord@master
with:
args: "Built application artifacts. 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
@@ -70,23 +82,27 @@ jobs:
id: meta
uses: docker/metadata-action@v5
with:
- images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+ images: "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
tags: |
- type=raw,value=latest
- type=raw,value=${{ steps.semver.outputs.next }}
+ 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@v5
+ uses: docker/build-push-action@v6
with:
- platforms: linux/amd64,linux/arm64,linux/riscv64,linux/arm/v7,linux/arm/v6
+ platforms: linux/amd64 # we currently do't build for linux/arm64 as it's really slow and we'll move to a self hosted runner for that or use the official github runner, once it's available
context: .
- push: false
+ push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
- cache-from: type=gha
- cache-to: type=gha,mode=max
network: host
+ env:
+ SKIP_ENV_VALIDATION: true
- name: Discord notification
+ if: ${{ github.events.inputs.send-notifications }}
env:
DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
uses: Ilshidur/action-discord@master
diff --git a/.github/workflows/deployment-weekly-release.yml b/.github/workflows/deployment-weekly-release.yml
new file mode 100644
index 000000000..20b732a63
--- /dev/null
+++ b/.github/workflows/deployment-weekly-release.yml
@@ -0,0 +1,101 @@
+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**.
Manual action may be required for major bumps.
Detected change to be ``${{ steps.semver.outputs.bump }}``
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.3"
+ 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"
diff --git a/.github/workflows/renovate-automatic-approval b/.github/workflows/renovate-automatic-approval.yml
similarity index 56%
rename from .github/workflows/renovate-automatic-approval
rename to .github/workflows/renovate-automatic-approval.yml
index b4701ed96..1185fd800 100644
--- a/.github/workflows/renovate-automatic-approval
+++ b/.github/workflows/renovate-automatic-approval.yml
@@ -1,4 +1,4 @@
-name: Approve Renovate PRs
+name: "[Dependency Updates] Auto Approve"
on:
pull_request:
types: [opened, synchronize]
@@ -6,17 +6,20 @@ on:
jobs:
approve-renovate-prs:
runs-on: ubuntu-latest
-
steps:
- name: Checkout code
- uses: actions/checkout@v2
-
+ 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: ${{ secrets.RENOVATE_APPROVE_TOKEN }}
+ GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
run: |
for pr in $(gh pr list --author homarr-renovate[bot] --json number --jq .[].number); do
gh pr review $pr --approve --body "Automatically approved by GitHub Action"
diff --git a/.gitignore b/.gitignore
index 8327c8b84..f7d87aa53 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,8 +14,8 @@ coverage
out/
next-env.d.ts
-# nest.js
-apps/nestjs/dist
+# artifacts
+packages/db/migrations/*/migrate.cjs
# nitro
.nitro/
diff --git a/.nvmrc b/.nvmrc
index 48b14e6b2..8ce703082 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20.14.0
+20.16.0
diff --git a/.run/db_migration_mysql_generate.run.xml b/.run/db_migration_mysql_generate.run.xml
new file mode 100644
index 000000000..1eaa49077
--- /dev/null
+++ b/.run/db_migration_mysql_generate.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/db_migration_sqlite_generate.run.xml b/.run/db_migration_sqlite_generate.run.xml
new file mode 100644
index 000000000..ea63d6b81
--- /dev/null
+++ b/.run/db_migration_sqlite_generate.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/db_push.run.xml b/.run/db_push.run.xml
new file mode 100644
index 000000000..e5d56c827
--- /dev/null
+++ b/.run/db_push.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/db_studio.run.xml b/.run/db_studio.run.xml
new file mode 100644
index 000000000..df61c66f7
--- /dev/null
+++ b/.run/db_studio.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/dev.run.xml b/.run/dev.run.xml
new file mode 100644
index 000000000..15ec68c7f
--- /dev/null
+++ b/.run/dev.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/docker_dev.run.xml b/.run/docker_dev.run.xml
new file mode 100644
index 000000000..0aa18c69a
--- /dev/null
+++ b/.run/docker_dev.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/format.run.xml b/.run/format.run.xml
new file mode 100644
index 000000000..801ecad89
--- /dev/null
+++ b/.run/format.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/format_fix.run.xml b/.run/format_fix.run.xml
new file mode 100644
index 000000000..391e76671
--- /dev/null
+++ b/.run/format_fix.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/test.run.xml b/.run/test.run.xml
new file mode 100644
index 000000000..d96c3ec1b
--- /dev/null
+++ b/.run/test.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.run/test_ui.run.xml b/.run/test_ui.run.xml
new file mode 100644
index 000000000..2f18e7aa9
--- /dev/null
+++ b/.run/test_ui.run.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b9a963aad..90148c6f2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,13 +4,23 @@
"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": [
- "superjson",
+ "cqmin",
"homarr",
+ "jellyfin",
+ "superjson",
"trpc",
- "Umami"
- ]
-}
\ No newline at end of file
+ "Umami",
+ "Sonarr"
+ ],
+ "i18n-ally.dirStructure": "auto",
+ "i18n-ally.enabledFrameworks": ["next-international"],
+ "i18n-ally.localesPaths": ["./packages/translation/src/lang/"],
+ "i18n-ally.enabledParsers": ["ts"],
+ "i18n-ally.extract.keyMaxLength": 0,
+ "i18n-ally.keystyle": "flat"
+}
diff --git a/Dockerfile b/Dockerfile
index b9471f77e..845d978c0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,8 +1,9 @@
-FROM node:20.13.1-alpine AS base
+FROM node:20.16.0-alpine AS base
FROM base AS builder
RUN apk add --no-cache libc6-compat
RUN apk update
+
# Set working directory
WORKDIR /app
COPY . .
@@ -35,6 +36,7 @@ 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
RUN corepack enable pnpm && pnpm install sharp -w
@@ -43,10 +45,12 @@ 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/ .
+
# Copy static data as it is not part of the build
COPY static-data ./static-data
-ARG SKIP_ENV_VALIDATION=true
-RUN corepack enable pnpm && pnpm turbo run build
+ARG SKIP_ENV_VALIDATION='true'
+ARG DISABLE_REDIS_LOGS='true'
+RUN corepack enable pnpm && pnpm build
FROM base AS runner
WORKDIR /app
@@ -83,5 +87,6 @@ COPY --chown=nextjs:nodejs packages/redis/redis.conf /app/redis.conf
ENV DB_URL='/appdata/db/db.sqlite'
ENV DB_DIALECT='sqlite'
ENV DB_DRIVER='better-sqlite3'
+ENV AUTH_PROVIDERS='credentials'
CMD ["sh", "run.sh"]
diff --git a/apps/nextjs/eslint.config.js b/apps/nextjs/eslint.config.js
new file mode 100644
index 000000000..c131bab90
--- /dev/null
+++ b/apps/nextjs/eslint.config.js
@@ -0,0 +1,13 @@
+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,
+];
diff --git a/apps/nextjs/next.config.mjs b/apps/nextjs/next.config.mjs
index fcf1321a4..6dcb85464 100644
--- a/apps/nextjs/next.config.mjs
+++ b/apps/nextjs/next.config.mjs
@@ -1,6 +1,6 @@
// Importing env files here to validate on build
-import "./src/env.mjs";
import "@homarr/auth/env.mjs";
+import "./src/env.mjs";
/** @type {import("next").NextConfig} */
const config = {
@@ -9,6 +9,16 @@ const config = {
/** 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"],
},
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
index d82c1decd..9fbf6f904 100644
--- a/apps/nextjs/package.json
+++ b/apps/nextjs/package.json
@@ -7,7 +7,7 @@
"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",
+ "lint": "eslint",
"format": "prettier --check . --ignore-path ../../.gitignore",
"start": "pnpm with-env next start",
"typecheck": "tsc --noEmit",
@@ -18,6 +18,7 @@
"@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",
@@ -31,34 +32,40 @@
"@homarr/ui": "workspace:^0.1.0",
"@homarr/validation": "workspace:^0.1.0",
"@homarr/widgets": "workspace:^0.1.0",
- "@mantine/colors-generator": "^7.10.0",
- "@mantine/hooks": "^7.10.0",
- "@mantine/modals": "^7.10.0",
- "@mantine/tiptap": "^7.10.0",
+ "@mantine/colors-generator": "^7.11.2",
+ "@mantine/core": "^7.11.2",
+ "@mantine/hooks": "^7.11.2",
+ "@mantine/modals": "^7.11.2",
+ "@mantine/tiptap": "^7.11.2",
"@homarr/server-settings": "workspace:^0.1.0",
- "@t3-oss/env-nextjs": "^0.10.1",
- "@tanstack/react-query": "^5.40.0",
- "@tanstack/react-query-devtools": "^5.40.0",
- "@tanstack/react-query-next-experimental": "5.40.0",
- "@trpc/client": "11.0.0-rc.377",
+ "@t3-oss/env-nextjs": "^0.11.0",
+ "@tanstack/react-query": "^5.51.21",
+ "@tanstack/react-query-devtools": "^5.51.21",
+ "@tanstack/react-query-next-experimental": "5.51.21",
+ "@tabler/icons-react": "^3.11.0",
+ "@trpc/client": "next",
"@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": "^2.4.2",
- "dayjs": "^1.11.11",
+ "chroma-js": "^2.6.0",
+ "clsx": "^2.1.1",
+ "dayjs": "^1.11.12",
"dotenv": "^16.4.5",
- "flag-icons": "^7.2.2",
- "glob": "^10.4.1",
- "jotai": "^2.8.2",
- "next": "^14.2.3",
- "postcss-preset-mantine": "^1.15.0",
- "react": "18.3.1",
- "react-dom": "18.3.1",
+ "flag-icons": "^7.2.3",
+ "glob": "^11.0.0",
+ "jotai": "^2.9.1",
+ "mantine-react-table": "2.0.0-beta.6",
+ "next": "^14.2.5",
+ "postcss-preset-mantine": "^1.17.0",
+ "prismjs": "^1.29.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
"react-error-boundary": "^4.0.13",
- "sass": "^1.77.2",
+ "react-simple-code-editor": "^0.14.1",
+ "sass": "^1.77.8",
"superjson": "2.2.1",
"use-deep-compare-effect": "^1.8.1"
},
@@ -67,22 +74,15 @@
"@homarr/prettier-config": "workspace:^0.1.0",
"@homarr/tsconfig": "workspace:^0.1.0",
"@types/chroma-js": "2.4.4",
- "@types/node": "^20.12.12",
+ "@types/node": "^20.14.14",
+ "@types/prismjs": "^1.26.4",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"concurrently": "^8.2.2",
- "eslint": "^8.57.0",
- "prettier": "^3.2.5",
- "tsx": "4.11.0",
- "typescript": "^5.4.5"
- },
- "eslintConfig": {
- "root": true,
- "extends": [
- "@homarr/eslint-config/base",
- "@homarr/eslint-config/nextjs",
- "@homarr/eslint-config/react"
- ]
+ "eslint": "^9.8.0",
+ "node-loader": "^2.0.0",
+ "prettier": "^3.3.3",
+ "typescript": "^5.5.4"
},
"prettier": "@homarr/prettier-config"
}
diff --git a/apps/nextjs/public/images/apps/imdb.png b/apps/nextjs/public/images/apps/imdb.png
new file mode 100644
index 000000000..9565159a4
Binary files /dev/null and b/apps/nextjs/public/images/apps/imdb.png differ
diff --git a/apps/nextjs/public/images/apps/lidarr.svg b/apps/nextjs/public/images/apps/lidarr.svg
new file mode 100644
index 000000000..41c5fb58a
--- /dev/null
+++ b/apps/nextjs/public/images/apps/lidarr.svg
@@ -0,0 +1,25 @@
+
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/radarr.svg b/apps/nextjs/public/images/apps/radarr.svg
new file mode 100644
index 000000000..93a4c9232
--- /dev/null
+++ b/apps/nextjs/public/images/apps/radarr.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/readarr.svg b/apps/nextjs/public/images/apps/readarr.svg
new file mode 100644
index 000000000..faae05f79
--- /dev/null
+++ b/apps/nextjs/public/images/apps/readarr.svg
@@ -0,0 +1 @@
+
diff --git a/apps/nextjs/public/images/apps/sonarr.svg b/apps/nextjs/public/images/apps/sonarr.svg
new file mode 100644
index 000000000..86c9243db
--- /dev/null
+++ b/apps/nextjs/public/images/apps/sonarr.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/the-tvdb.svg b/apps/nextjs/public/images/apps/the-tvdb.svg
new file mode 100644
index 000000000..b23711d36
--- /dev/null
+++ b/apps/nextjs/public/images/apps/the-tvdb.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/tmdb.png b/apps/nextjs/public/images/apps/tmdb.png
new file mode 100644
index 000000000..9f983b883
Binary files /dev/null and b/apps/nextjs/public/images/apps/tmdb.png differ
diff --git a/apps/nextjs/public/images/apps/truenas.svg b/apps/nextjs/public/images/apps/truenas.svg
new file mode 100644
index 000000000..c3d96ff70
--- /dev/null
+++ b/apps/nextjs/public/images/apps/truenas.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/nextjs/public/images/apps/unraid-alt.svg b/apps/nextjs/public/images/apps/unraid-alt.svg
new file mode 100644
index 000000000..7d695dadc
--- /dev/null
+++ b/apps/nextjs/public/images/apps/unraid-alt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx b/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx
index 989406228..1624b50b5 100644
--- a/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx
@@ -2,6 +2,7 @@ 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";
@@ -19,6 +20,8 @@ interface InviteUsagePageProps {
}
export default async function InviteUsagePage({ params, searchParams }: InviteUsagePageProps) {
+ if (!isProviderEnabled("credentials")) notFound();
+
const session = await auth();
if (session) notFound();
diff --git a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
index d0345ec72..927e0c6f2 100644
--- a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
+++ b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
@@ -1,75 +1,153 @@
"use client";
-import { useState } from "react";
+import type { PropsWithChildren } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
-import { Alert, Button, PasswordInput, rem, Stack, TextInput } from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
+import { Button, Divider, PasswordInput, Stack, TextInput } from "@mantine/core";
import { signIn } from "@homarr/auth/client";
+import type { useForm } from "@homarr/form";
import { useZodForm } from "@homarr/form";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useScopedI18n } from "@homarr/translation/client";
import type { z } from "@homarr/validation";
import { validation } from "@homarr/validation";
-export const LoginForm = () => {
+import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
+
+interface LoginFormProps {
+ providers: string[];
+ oidcClientName: string;
+ isOidcAutoLoginEnabled: boolean;
+ callbackUrl: string;
+}
+
+export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, callbackUrl }: LoginFormProps) => {
const t = useScopedI18n("user");
const router = useRouter();
- const [isLoading, setIsLoading] = useState(false);
- const [error, setError] = useState();
+ const [isPending, setIsPending] = useState(false);
const form = useZodForm(validation.user.signIn, {
initialValues: {
name: "",
password: "",
+ credentialType: "basic",
},
});
- const handleSubmitAsync = async (values: z.infer) => {
- setIsLoading(true);
- setError(undefined);
- await signIn("credentials", {
- ...values,
- redirect: false,
- callbackUrl: "/",
- })
- .then((response) => {
- if (!response?.ok || response.error) {
- throw response?.error;
- }
+ const credentialInputsVisible = providers.includes("credentials") || providers.includes("ldap");
- showSuccessNotification({
- title: t("action.login.notification.success.title"),
- message: t("action.login.notification.success.message"),
- });
- router.push("/");
- })
- .catch((error: Error | string) => {
- setIsLoading(false);
- setError(error.toString());
- showErrorNotification({
- title: t("action.login.notification.error.title"),
- message: t("action.login.notification.error.message"),
- });
+ const onSuccess = useCallback(
+ async (response: Awaited>) => {
+ 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[1]) => {
+ setIsPending(true);
+ await signIn(provider, {
+ ...options,
+ redirect: false,
+ callbackUrl: new URL(callbackUrl, window.location.href).href,
+ })
+ .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]);
return (
-
+
+ {credentialInputsVisible && (
+ <>
+
+ {providers.includes("oidc") && }
+
+ )}
+
+ {providers.includes("oidc") && (
+
+ )}
+
);
};
+
+interface SubmitButtonProps {
+ isPending: boolean;
+ form: ReturnType FormType>>;
+ credentialType: "basic" | "ldap";
+}
+
+const SubmitButton = ({ isPending, form, credentialType, children }: PropsWithChildren) => {
+ const isCurrentProviderActive = form.getValues().credentialType === credentialType;
+
+ return (
+
+ );
+};
+
+type FormType = z.infer;
diff --git a/apps/nextjs/src/app/[locale]/auth/login/page.tsx b/apps/nextjs/src/app/[locale]/auth/login/page.tsx
index 00de2f2f3..7823d050d 100644
--- a/apps/nextjs/src/app/[locale]/auth/login/page.tsx
+++ b/apps/nextjs/src/app/[locale]/auth/login/page.tsx
@@ -1,11 +1,26 @@
+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";
-export default async function Login() {
+interface LoginProps {
+ searchParams: {
+ redirectAfterLogin?: string;
+ };
+}
+
+export default async function Login({ searchParams }: LoginProps) {
+ const session = await auth();
+
+ if (session) {
+ redirect(searchParams.redirectAfterLogin ?? "/");
+ }
+
const t = await getScopedI18n("user.page.login");
return (
@@ -21,7 +36,12 @@ export default async function Login() {
-
+
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
index 808759af1..346baff75 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
@@ -49,7 +49,6 @@ export const BoardProvider = ({
useEffect(() => {
setReadySections((previous) => previous.filter((id) => data.sections.some((section) => section.id === id)));
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [data.sections.length, setReadySections]);
const markAsReady = useCallback((id: string) => {
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
index bf68bb902..e3c87aa05 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
@@ -33,6 +33,7 @@ export const generateColors = (hex: string) => {
return rgbaColors.map((color) => {
return (
"#" +
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
color
.split("(")[1]!
.replaceAll(" ", "")
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
deleted file mode 100644
index 5739e98b6..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"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 (
-
-
-
-
-
-
-
-
-
-
- setCounts(({ user, ...others }) => ({
- user: callback(user),
- ...others,
- }))
- }
- />
-
-
-
-
- setCounts(({ group, ...others }) => ({
- group: callback(group),
- ...others,
- }))
- }
- />
-
-
-
-
-
-
-
- );
-};
-
-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 (
- }>
-
- {t(`tab.${value}`)}
-
-
-
- );
-};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts
deleted file mode 100644
index 08520b9d5..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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();
-
-export type OnCountChange = (callback: (prev: number) => number) => void;
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx
deleted file mode 100644
index d887ee696..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-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>;
-
-export const InheritTable = ({ initialPermissions }: InheritTableProps) => {
- const tPermissions = useScopedI18n("board.setting.section.access.permission");
- return (
-
-
-
-
- {tPermissions("field.user.label")}
- {tPermissions("field.permission.label")}
-
-
-
- {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 (
- }
- permission={boardPermission}
- />
- );
- })}
-
-
-
- );
-};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
deleted file mode 100644
index 8ed7e98ee..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-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;
- 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>(
- 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 (
-
- );
-};
-
-const UserItemContent = ({ user }: { user: User }) => {
- return (
-
-
-
-
-
- {user.name}
-
-
- );
-};
-
-interface User {
- id: string;
- name: string | null;
- image: string | null;
-}
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_board-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_board-access.tsx
new file mode 100644
index 000000000..c5ea88cb2
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_board-access.tsx
@@ -0,0 +1,69 @@
+"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 (
+ 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,
+ },
+ }}
+ />
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
index 1748ee36b..c110651d3 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
@@ -20,8 +20,8 @@ import type { TablerIcon } from "@homarr/ui";
import { getBoardPermissionsAsync } 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";
@@ -44,8 +44,8 @@ const getBoardAndPermissionsAsync = async (params: Props["params"]) => {
const permissions = hasFullAccess
? await api.board.getBoardPermissions({ id: board.id })
: {
- userPermissions: [],
- groupPermissions: [],
+ users: [],
+ groups: [],
inherited: [],
};
@@ -89,7 +89,7 @@ export default async function BoardSettingsPage({ params, searchParams }: Props)
{hasFullAccess && (
<>
-
+
diff --git a/apps/nextjs/src/app/[locale]/compose.tsx b/apps/nextjs/src/app/[locale]/compose.tsx
index 6997ca986..e7899c938 100644
--- a/apps/nextjs/src/app/[locale]/compose.tsx
+++ b/apps/nextjs/src/app/[locale]/compose.tsx
@@ -6,7 +6,6 @@ export const composeWrappers = (
wrappers: React.FunctionComponent[],
): React.FunctionComponent => {
return wrappers.reverse().reduce((Acc, Current): React.FunctionComponent => {
- // eslint-disable-next-line react/display-name
return (props) => (
diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx
index 86db1c66c..7b3a8d657 100644
--- a/apps/nextjs/src/app/[locale]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -4,6 +4,7 @@ import { Inter } from "next/font/google";
import "@homarr/ui/styles.css";
import "@homarr/notifications/styles.css";
import "@homarr/spotlight/styles.css";
+import "~/styles/scroll-area.scss";
import { ColorSchemeScript, createTheme, MantineProvider } from "@mantine/core";
diff --git a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
index cfadc375d..0805459ef 100644
--- a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
+++ b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
@@ -1,5 +1,4 @@
.bannerContainer {
- padding: 3rem;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(
@@ -20,7 +19,7 @@
transform: translateY(0);
}
100% {
- transform: translateY(-50%);
+ transform: translateY(-50.8%);
}
}
diff --git a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
index 35943bcf9..cb1a3094a 100644
--- a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
@@ -38,17 +38,17 @@ export const HeroBanner = () => {
const gridSpan = 12 / countIconGroups;
return (
-
+
-
+ <Title fz={{ base: "h4", md: "h2" }} c="dimmed">
Welcome back to your
-
-
- Homarr Dashboard
+
+
+ Homarr Board
-
+
{Array(countIconGroups)
.fill(0)
diff --git a/apps/nextjs/src/app/[locale]/manage/about/page.tsx b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
index a1dadf037..3724cb668 100644
--- a/apps/nextjs/src/app/[locale]/manage/about/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
@@ -21,11 +21,12 @@ import { setStaticParamsLocale } from "next-international/server";
import { getScopedI18n, getStaticParams } from "@homarr/translation/server";
+import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { createMetaTitle } from "~/metadata";
import { getPackageAttributesAsync } from "~/versions/package-reader";
import contributorsData from "../../../../../../../static-data/contributors.json";
import translatorsData from "../../../../../../../static-data/translators.json";
-import logo from "../../../../../public/logo/logo.png";
import classes from "./about.module.css";
export async function generateMetadata() {
@@ -48,9 +49,10 @@ export default async function AboutPage({ params: { locale } }: PageProps) {
const attributes = await getPackageAttributesAsync();
return (
+
-
+
Homarr
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx b/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
index 0f81cde48..dd20241d3 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
@@ -49,7 +49,7 @@ export const AppDeleteButton = ({ app }: AppDeleteButtonProps) => {
}, [app, mutate, t, openConfirmModal]);
return (
- <ActionIcon loading={isPending} variant="subtle" color="red" onClick={onClick} aria-label="Delete app">
+ <ActionIcon loading={isPending} variant="subtle" color="red" onClick={onClick} aria-label={t("title")}>
<IconTrash color="red" size={16} stroke={1.5} />
</ActionIcon>
);
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx b/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
index 2cb6b6a47..2cf9bf9b3 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
@@ -36,10 +36,10 @@ export const AppForm = (props: AppFormProps) => {
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
- <TextInput {...form.getInputProps("name")} withAsterisk label="Name" />
+ <TextInput {...form.getInputProps("name")} withAsterisk label={t("app.field.name.label")} />
<IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
- <Textarea {...form.getInputProps("description")} label="Description" />
- <TextInput {...form.getInputProps("href")} label="URL" />
+ <Textarea {...form.getInputProps("description")} label={t("app.field.description.label")} />
+ <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
<Group justify="end">
<Button variant="default" component={Link} href="/manage/apps">
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx
index eddb8bb3b..9b3551e43 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx
@@ -3,6 +3,7 @@ import { Container, Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { getI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AppEditForm } from "./_app-edit-form";
interface AppEditPageProps {
@@ -14,11 +15,14 @@ export default async function AppEditPage({ params }: AppEditPageProps) {
const t = await getI18n();
return (
- <Container>
- <Stack>
- <Title>{t("app.page.edit.title")}
-
-
-
+ <>
+
+
+
+ {t("app.page.edit.title")}
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx
index 5087a5b66..9fe1a2de6 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx
@@ -1,14 +1,22 @@
import { Container, Stack, Title } from "@mantine/core";
+import { getI18n } from "@homarr/translation/server";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AppNewForm } from "./_app-new-form";
-export default function AppNewPage() {
+export default async function AppNewPage() {
+ const t = await getI18n();
+
return (
-
-
- New app
-
-
-
+ <>
+
+
+
+ {t("app.page.create.title")}
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
index 6aab6ae37..2e6983b6e 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
@@ -1,36 +1,29 @@
import Link from "next/link";
-import {
- ActionIcon,
- ActionIconGroup,
- Anchor,
- Avatar,
- Button,
- Card,
- Container,
- Group,
- Stack,
- Text,
- Title,
-} from "@mantine/core";
+import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
import { IconApps, IconPencil } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { api } from "@homarr/api/server";
-import { getI18n } from "@homarr/translation/server";
+import { getI18n, getScopedI18n } from "@homarr/translation/server";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AppDeleteButton } from "./_app-delete-button";
export default async function AppsPage() {
const apps = await api.app.all();
+ const t = await getScopedI18n("app");
return (
-
+
+
- Apps
-
+ {t("page.list.title")}
+
+ {t("page.create.title")}
+
{apps.length === 0 && }
{apps.length > 0 && (
@@ -41,7 +34,7 @@ export default async function AppsPage() {
)}
-
+
);
}
@@ -49,10 +42,12 @@ interface AppCardProps {
app: RouterOutputs["app"]["all"][number];
}
-const AppCard = ({ app }: AppCardProps) => {
+const AppCard = async ({ app }: AppCardProps) => {
+ const t = await getScopedI18n("app");
+
return (
-
+
{
}}
/>
- {app.name}
+
+ {app.name}
+
{app.description && (
-
+
{app.description}
)}
{app.href && (
-
+
{app.href}
)}
@@ -85,7 +82,7 @@ const AppCard = ({ app }: AppCardProps) => {
href={`/manage/apps/edit/${app.id}`}
variant="subtle"
color="gray"
- aria-label="Edit app"
+ aria-label={t("page.edit.title")}
>
diff --git a/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx b/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
index 4bd24a346..1c59db412 100644
--- a/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
@@ -1,7 +1,6 @@
"use client";
import { useCallback } from "react";
-import { Button } from "@mantine/core";
import { IconCategoryPlus } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
@@ -10,6 +9,7 @@ import { useI18n } from "@homarr/translation/client";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
import { AddBoardModal } from "~/components/manage/boards/add-board-modal";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
interface CreateBoardButtonProps {
boardNames: string[];
@@ -37,8 +37,8 @@ export const CreateBoardButton = ({ boardNames }: CreateBoardButtonProps) => {
}, [mutateAsync, boardNames, openModal]);
return (
- } onClick={onClick} loading={isPending}>
+ } onClick={onClick} loading={isPending}>
{t("management.page.board.action.new.label")}
-
+
);
};
diff --git a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
index 5dc4c79d7..506af6a99 100644
--- a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
@@ -10,6 +10,7 @@ import {
Group,
Menu,
MenuTarget,
+ Stack,
Text,
Title,
Tooltip,
@@ -22,6 +23,8 @@ import { getScopedI18n } from "@homarr/translation/server";
import { UserAvatar } from "@homarr/ui";
import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { BoardCardMenuDropdown } from "./_components/board-card-menu-dropdown";
import { CreateBoardButton } from "./_components/create-board-button";
@@ -31,20 +34,23 @@ export default async function ManageBoardsPage() {
const boards = await api.board.getAllBoards();
return (
- <>
-
- {t("title")}
- board.name)} />
-
+
+
+
+
+ {t("title")}
+ board.name)} />
+
-
- {boards.map((board) => (
-
-
-
- ))}
-
-
+
+ {boards.map((board) => (
+
+
+
+ ))}
+
+
+
);
}
@@ -83,7 +89,7 @@ const BoardCard = async ({ board }: BoardCardProps) => {
{board.creator && (
- {board.creator?.name}
+ {board.creator.name}
)}
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_components/integration-access-settings.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/integration-access-settings.tsx
new file mode 100644
index 000000000..c6df1abad
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/integration-access-settings.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { IconPlayerPlay, IconSelector, IconSettings } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { integrationPermissions, integrationPermissionsMap } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+
+import { AccessSettings } from "~/components/access/access-settings";
+
+interface Props {
+ integration: RouterOutputs["integration"]["byId"];
+ initialPermissions: RouterOutputs["integration"]["getIntegrationPermissions"];
+}
+
+export const IntegrationAccessSettings = ({ integration, initialPermissions }: Props) => {
+ const t = useI18n();
+ const utils = clientApi.useUtils();
+ const { data } = clientApi.integration.getIntegrationPermissions.useQuery(
+ {
+ id: integration.id,
+ },
+ {
+ refetchOnMount: false,
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ initialData: initialPermissions,
+ },
+ );
+ const usersMutation = clientApi.integration.saveUserIntegrationPermissions.useMutation();
+ const groupsMutation = clientApi.integration.saveGroupIntegrationPermissions.useMutation();
+
+ return (
+ t(`integration.permission.${key}`)}
+ query={{
+ data,
+ invalidate: () => utils.integration.getIntegrationPermissions.invalidate(),
+ }}
+ groupsMutation={groupsMutation}
+ usersMutation={usersMutation}
+ />
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
similarity index 97%
rename from apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx
rename to apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
index b23fd148a..f90b1d40f 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
@@ -12,7 +12,7 @@ import type { RouterOutputs } from "@homarr/api";
import { integrationSecretKindObject } from "@homarr/definitions";
import { useI18n } from "@homarr/translation/client";
-import { integrationSecretIcons } from "./_integration-secret-icons";
+import { integrationSecretIcons } from "./integration-secret-icons";
dayjs.extend(relativeTime);
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-icons.ts b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-icons.ts
similarity index 100%
rename from apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-icons.ts
rename to apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-icons.ts
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-inputs.tsx
similarity index 92%
rename from apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx
rename to apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-inputs.tsx
index f73e8516b..45f5b3156 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-inputs.tsx
@@ -7,7 +7,7 @@ import { integrationSecretKindObject } from "@homarr/definitions";
import type { IntegrationSecretKind } from "@homarr/definitions";
import { useI18n } from "@homarr/translation/client";
-import { integrationSecretIcons } from "./_integration-secret-icons";
+import { integrationSecretIcons } from "./integration-secret-icons";
interface IntegrationSecretInputProps {
withAsterisk?: boolean;
@@ -50,7 +50,7 @@ const PrivateSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) =>
}
/>
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
index 2f31cb169..3640dc790 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
@@ -56,7 +56,7 @@ export const DeleteIntegrationActionButton = ({ count, integration }: DeleteInte
},
});
}}
- aria-label="Delete integration"
+ aria-label={t("title")}
>
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx
deleted file mode 100644
index 2ae512edd..000000000
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-
-import { useRef, useState } from "react";
-import { Alert, Anchor, Group, Loader } from "@mantine/core";
-import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
-
-import type { RouterInputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-
-interface UseTestConnectionDirtyProps {
- defaultDirty: boolean;
- initialFormValue: {
- url: string;
- secrets: { kind: string; value: string | null }[];
- };
-}
-
-export const useTestConnectionDirty = ({ defaultDirty, initialFormValue }: UseTestConnectionDirtyProps) => {
- const [isDirty, setIsDirty] = useState(defaultDirty);
- const prevFormValueRef = useRef(initialFormValue);
-
- return {
- onValuesChange: (values: typeof initialFormValue) => {
- if (isDirty) return;
-
- // If relevant values changed, set dirty
- if (
- prevFormValueRef.current.url !== values.url ||
- !prevFormValueRef.current.secrets
- .map((secret) => secret.value)
- .every((secretValue, index) => values.secrets[index]?.value === secretValue)
- ) {
- setIsDirty(true);
- return;
- }
-
- // If relevant values changed back to last tested, set not dirty
- setIsDirty(false);
- },
- isDirty,
- removeDirty: () => {
- prevFormValueRef.current = initialFormValue;
- setIsDirty(false);
- },
- };
-};
-
-interface TestConnectionProps {
- isDirty: boolean;
- removeDirty: () => void;
- integration: RouterInputs["integration"]["testConnection"] & { name: string };
-}
-
-export const TestConnection = ({ integration, removeDirty, isDirty }: TestConnectionProps) => {
- const t = useScopedI18n("integration.testConnection");
- const { mutateAsync, ...mutation } = clientApi.integration.testConnection.useMutation();
-
- return (
-
- {
- await mutateAsync(integration, {
- onSuccess: () => {
- removeDirty();
- showSuccessNotification({
- title: t("notification.success.title"),
- message: t("notification.success.message"),
- });
- },
- onError: (error) => {
- if (error.data?.zodError?.fieldErrors.url) {
- showErrorNotification({
- title: t("notification.invalidUrl.title"),
- message: t("notification.invalidUrl.message"),
- });
- return;
- }
-
- if (error.message === "SECRETS_NOT_DEFINED") {
- showErrorNotification({
- title: t("notification.notAllSecretsProvided.title"),
- message: t("notification.notAllSecretsProvided.message"),
- });
- return;
- }
-
- showErrorNotification({
- title: t("notification.commonError.title"),
- message: t("notification.commonError.message"),
- });
- },
- });
- }}
- >
- {t("action")}
-
-
-
- );
-};
-
-interface TestConnectionIconProps {
- isDirty: boolean;
- isPending: boolean;
- isSuccess: boolean;
- isError: boolean;
- size: number;
-}
-
-const TestConnectionIcon = ({ isDirty, isPending, isSuccess, isError, size }: TestConnectionIconProps) => {
- if (isPending) return ;
- if (isDirty) return null;
- if (isSuccess) return ;
- if (isError) return ;
- return null;
-};
-
-export const TestConnectionNoticeAlert = () => {
- const t = useI18n();
- return (
- }>
- {t("integration.testConnection.alertNotice")}
-
- );
-};
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
index e1521abd2..847479ea3 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
@@ -8,6 +8,7 @@ import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { getAllSecretKindOptions, getDefaultSecretKinds } from "@homarr/definitions";
import { useZodForm } from "@homarr/form";
+import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
import { useConfirmModal } from "@homarr/modals";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n } from "@homarr/translation/client";
@@ -15,9 +16,8 @@ import type { z } from "@homarr/validation";
import { validation } from "@homarr/validation";
import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
-import { SecretCard } from "../../_integration-secret-card";
-import { IntegrationSecretInput } from "../../_integration-secret-inputs";
-import { TestConnection, TestConnectionNoticeAlert, useTestConnectionDirty } from "../../_integration-test-connection";
+import { SecretCard } from "../../_components/secrets/integration-secret-card";
+import { IntegrationSecretInput } from "../../_components/secrets/integration-secret-inputs";
interface EditIntegrationForm {
integration: RouterOutputs["integration"]["byId"];
@@ -30,30 +30,23 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
getAllSecretKindOptions(integration.kind).find((secretKinds) =>
integration.secrets.every((secret) => secretKinds.includes(secret.kind)),
) ?? getDefaultSecretKinds(integration.kind);
- const initialFormValues = {
- name: integration.name,
- url: integration.url,
- secrets: secretsKinds.map((kind) => ({
- kind,
- value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
- })),
- };
- const { isDirty, onValuesChange, removeDirty } = useTestConnectionDirty({
- defaultDirty: true,
- initialFormValue: initialFormValues,
- });
const router = useRouter();
const form = useZodForm(validation.integration.update.omit({ id: true }), {
- initialValues: initialFormValues,
- onValuesChange,
+ initialValues: {
+ name: integration.name,
+ url: integration.url,
+ secrets: secretsKinds.map((kind) => ({
+ kind,
+ value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
+ })),
+ },
});
const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
const handleSubmitAsync = async (values: FormType) => {
- if (isDirty) return;
await mutateAsync(
{
id: integration.id,
@@ -71,7 +64,19 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
});
void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
},
- onError: () => {
+ onError: (error) => {
+ const testConnectionError = convertIntegrationTestConnectionError(error.data?.error);
+
+ if (testConnectionError) {
+ showErrorNotification({
+ title: t(`integration.testConnection.notification.${testConnectionError.key}.title`),
+ message: testConnectionError.message
+ ? testConnectionError.message
+ : t(`integration.testConnection.notification.${testConnectionError.key}.message`),
+ });
+ return;
+ }
+
showErrorNotification({
title: t("integration.page.edit.notification.error.title"),
message: t("integration.page.edit.notification.error.message"),
@@ -84,8 +89,6 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
return (
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
index bebf34626..a2b557522 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
@@ -1,9 +1,11 @@
-import { Container, Group, Stack, Title } from "@mantine/core";
+import { Container, Fieldset, Group, Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { getIntegrationName } from "@homarr/definitions";
-import { getScopedI18n } from "@homarr/translation/server";
+import { getI18n, getScopedI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { IntegrationAccessSettings } from "../../_components/integration-access-settings";
import { IntegrationAvatar } from "../../_integration-avatar";
import { EditIntegrationForm } from "./_integration-edit-form";
@@ -12,18 +14,28 @@ interface EditIntegrationPageProps {
}
export default async function EditIntegrationPage({ params }: EditIntegrationPageProps) {
- const t = await getScopedI18n("integration.page.edit");
+ const editT = await getScopedI18n("integration.page.edit");
+ const t = await getI18n();
const integration = await api.integration.byId({ id: params.id });
+ const integrationPermissions = await api.integration.getIntegrationPermissions({ id: integration.id });
return (
-
-
-
-
- {t("title", { name: getIntegrationName(integration.kind) })}
-
-
-
-
+ <>
+
+
+
+
+
+ {editT("title", { name: getIntegrationName(integration.kind) })}
+
+
+
+ {t("permission.title")}
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
index 8f03a39ff..b2700ff70 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
@@ -3,7 +3,7 @@
import type { ChangeEvent } from "react";
import React, { useMemo, useState } from "react";
import Link from "next/link";
-import { Group, Menu, ScrollArea, Stack, Text, TextInput } from "@mantine/core";
+import { Flex, Group, Menu, ScrollArea, Text, TextInput } from "@mantine/core";
import { IconSearch } from "@tabler/icons-react";
import { getIntegrationName, integrationKinds } from "@homarr/definitions";
@@ -25,7 +25,7 @@ export const IntegrationCreateDropdownContent = () => {
);
return (
-
+
}
placeholder={t("integration.page.list.search")}
@@ -47,6 +47,6 @@ export const IntegrationCreateDropdownContent = () => {
) : (
{t("common.noResults")}
)}
-
+
);
};
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
index 524b2efb9..6d4ed9727 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
@@ -3,20 +3,21 @@
import { useCallback } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
-import { Button, Fieldset, Group, SegmentedControl, Stack, TextInput } from "@mantine/core";
+import { Alert, Button, Fieldset, Group, SegmentedControl, Stack, Text, TextInput } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
import { getAllSecretKindOptions } from "@homarr/definitions";
import type { UseFormReturnType } from "@homarr/form";
import { useZodForm } from "@homarr/form";
+import { convertIntegrationTestConnectionError } from "@homarr/integrations/client";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import type { z } from "@homarr/validation";
import { validation } from "@homarr/validation";
-import { IntegrationSecretInput } from "../_integration-secret-inputs";
-import { TestConnection, TestConnectionNoticeAlert, useTestConnectionDirty } from "../_integration-test-connection";
+import { IntegrationSecretInput } from "../_components/secrets/integration-secret-inputs";
import { revalidatePathActionAsync } from "../../../../revalidatePathAction";
interface NewIntegrationFormProps {
@@ -28,27 +29,20 @@ interface NewIntegrationFormProps {
export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) => {
const t = useI18n();
const secretKinds = getAllSecretKindOptions(searchParams.kind);
- const initialFormValues = {
- name: searchParams.name ?? "",
- url: searchParams.url ?? "",
- secrets: secretKinds[0].map((kind) => ({
- kind,
- value: "",
- })),
- };
- const { isDirty, onValuesChange, removeDirty } = useTestConnectionDirty({
- defaultDirty: true,
- initialFormValue: initialFormValues,
- });
const router = useRouter();
const form = useZodForm(validation.integration.create.omit({ kind: true }), {
- initialValues: initialFormValues,
- onValuesChange,
+ initialValues: {
+ name: searchParams.name ?? "",
+ url: searchParams.url ?? "",
+ secrets: secretKinds[0].map((kind) => ({
+ kind,
+ value: "",
+ })),
+ },
});
const { mutateAsync, isPending } = clientApi.integration.create.useMutation();
const handleSubmitAsync = async (values: FormType) => {
- if (isDirty) return;
await mutateAsync(
{
kind: searchParams.kind,
@@ -62,7 +56,19 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
});
void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
},
- onError: () => {
+ onError: (error) => {
+ const testConnectionError = convertIntegrationTestConnectionError(error.data?.error);
+
+ if (testConnectionError) {
+ showErrorNotification({
+ title: t(`integration.testConnection.notification.${testConnectionError.key}.title`),
+ message: testConnectionError.message
+ ? testConnectionError.message
+ : t(`integration.testConnection.notification.${testConnectionError.key}.message`),
+ });
+ return;
+ }
+
showErrorNotification({
title: t("integration.page.create.notification.error.title"),
message: t("integration.page.create.notification.error.message"),
@@ -75,8 +81,6 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
return (
@@ -129,12 +126,20 @@ const SecretKindsSegmentedControl = ({ secretKinds, form }: SecretKindsSegmented
const t = useScopedI18n("integration.secrets");
const secretKindGroups = secretKinds.map((kinds) => ({
- label: kinds.map((kind) => t(`kind.${kind}.label`)).join(" & "),
- value: kinds.join("-"),
+ label:
+ kinds.length === 0
+ ? t("noSecretsRequired.segmentTitle")
+ : kinds.map((kind) => t(`kind.${kind}.label`)).join(" & "),
+ value: kinds.length === 0 ? "empty" : kinds.join("-"),
}));
const onChange = useCallback(
(value: string) => {
+ if (value === "empty") {
+ form.setFieldValue("secrets", []);
+ return;
+ }
+
const kinds = value.split("-") as IntegrationSecretKind[];
const secrets = kinds.map((kind) => ({
kind,
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
index 23eb474f5..7d4b436d2 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
@@ -7,6 +7,7 @@ import { getScopedI18n } from "@homarr/translation/server";
import type { validation } from "@homarr/validation";
import { z } from "@homarr/validation";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { IntegrationAvatar } from "../_integration-avatar";
import { NewIntegrationForm } from "./_integration-new-form";
@@ -17,24 +18,28 @@ interface NewIntegrationPageProps {
}
export default async function IntegrationsNewPage({ searchParams }: NewIntegrationPageProps) {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const result = z.enum([integrationKinds[0]!, ...integrationKinds.slice(1)]).safeParse(searchParams.kind);
if (!result.success) {
notFound();
}
- const t = await getScopedI18n("integration.page.create");
+ const tCreate = await getScopedI18n("integration.page.create");
const currentKind = result.data;
return (
-
-
-
-
- {t("title", { name: getIntegrationName(currentKind) })}
-
-
-
-
+ <>
+
+
+
+
+
+ {tCreate("title", { name: getIntegrationName(currentKind) })}
+
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
index 07b4c894d..f3d1cc0af 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
@@ -1,3 +1,5 @@
+import { Fragment } from "react";
+import type { PropsWithChildren } from "react";
import Link from "next/link";
import {
AccordionControl,
@@ -5,9 +7,11 @@ import {
AccordionPanel,
ActionIcon,
ActionIconGroup,
+ Affix,
Anchor,
+ Box,
Button,
- Container,
+ Divider,
Group,
Menu,
MenuDropdown,
@@ -22,7 +26,7 @@ import {
Text,
Title,
} from "@mantine/core";
-import { IconChevronDown, IconPencil } from "@tabler/icons-react";
+import { IconChevronDown, IconChevronUp, IconPencil } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { api } from "@homarr/api/server";
@@ -32,6 +36,8 @@ import { getIntegrationName } from "@homarr/definitions";
import { getScopedI18n } from "@homarr/translation/server";
import { CountBadge } from "@homarr/ui";
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
import { IntegrationAvatar } from "./_integration-avatar";
import { DeleteIntegrationActionButton } from "./_integration-buttons";
@@ -48,26 +54,48 @@ export default async function IntegrationsPage({ searchParams }: IntegrationsPag
const t = await getScopedI18n("integration");
return (
-
+
+
{t("page.list.title")}
-
+
+
+
+
+
+ }>{t("action.create")}
+
+
+
+
+
+
+
+
+ }>{t("action.create")}
+
+
+
-
+
);
}
+const IntegrationSelectMenu = ({ children }: PropsWithChildren) => {
+ return (
+
+ );
+};
+
interface IntegrationListProps {
integrations: RouterOutputs["integration"]["all"];
activeTab?: IntegrationKind;
@@ -82,6 +110,7 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
const grouppedIntegrations = integrations.reduce(
(acc, integration) => {
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!acc[integration.kind]) {
acc[integration.kind] = [];
}
@@ -104,7 +133,7 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
-
+
{t("field.name.label")}
@@ -129,7 +158,7 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
href={`/manage/integrations/edit/${integration.id}`}
variant="subtle"
color="gray"
- aria-label="Edit integration"
+ aria-label={t("page.edit.title", { name: getIntegrationName(integration.kind) })}
>
@@ -141,6 +170,34 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps
))}
+
+
+ {integrations.map((integration, index) => (
+
+ {index !== 0 && }
+
+
+ {integration.name}
+
+
+
+
+
+
+
+
+ {integration.url}
+
+
+
+ ))}
+
))}
diff --git a/apps/nextjs/src/app/[locale]/manage/layout.tsx b/apps/nextjs/src/app/[locale]/manage/layout.tsx
index 63e964b29..694017e41 100644
--- a/apps/nextjs/src/app/[locale]/manage/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/layout.tsx
@@ -14,6 +14,7 @@ import {
IconMailForward,
IconPlug,
IconQuestionMark,
+ IconReport,
IconSettings,
IconTool,
IconUser,
@@ -21,6 +22,7 @@ import {
IconUsersGroup,
} from "@tabler/icons-react";
+import { isProviderEnabled } from "@homarr/auth/server";
import { getScopedI18n } from "@homarr/translation/server";
import { MainHeader } from "~/components/layout/header";
@@ -64,6 +66,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
label: t("items.users.items.invites"),
icon: IconMailForward,
href: "/manage/users/invites",
+ hidden: !isProviderEnabled("credentials"),
},
{
label: t("items.users.items.groups"),
@@ -86,6 +89,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
icon: IconLogs,
href: "/manage/tools/logs",
},
+ {
+ label: t("items.tools.items.tasks"),
+ icon: IconReport,
+ href: "/manage/tools/tasks",
+ },
],
},
{
diff --git a/apps/nextjs/src/app/[locale]/manage/page.tsx b/apps/nextjs/src/app/[locale]/manage/page.tsx
index 711a2e3a3..8e25ffb92 100644
--- a/apps/nextjs/src/app/[locale]/manage/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/page.tsx
@@ -3,8 +3,10 @@ import { Card, Group, SimpleGrid, Space, Stack, Text } from "@mantine/core";
import { IconArrowRight } from "@tabler/icons-react";
import { api } from "@homarr/api/server";
+import { isProviderEnabled } from "@homarr/auth/server";
import { getScopedI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { createMetaTitle } from "~/metadata";
import { HeroBanner } from "./_components/hero-banner";
@@ -13,6 +15,7 @@ interface LinkProps {
subtitle: string;
count: number;
href: string;
+ hidden?: boolean;
}
export async function generateMetadata() {
@@ -36,13 +39,14 @@ export default async function ManagementPage() {
},
{
count: statistics.countUsers,
- href: "/manage/boards",
+ href: "/manage/users",
subtitle: t("statisticLabel.authentication"),
title: t("statistic.createUser"),
},
{
+ hidden: !isProviderEnabled("credentials"),
count: statistics.countInvites,
- href: "/manage/boards",
+ href: "/manage/users/invites",
subtitle: t("statisticLabel.authentication"),
title: t("statistic.createInvite"),
},
@@ -67,27 +71,31 @@ export default async function ManagementPage() {
];
return (
<>
+
- {links.map((link, index) => (
-
-
-
-
- {link.count}
-
-
-
- {link.subtitle}
-
- {link.title}
-
-
-
-
-
- ))}
+ {links.map(
+ (link) =>
+ !link.hidden && (
+
+
+
+
+ {link.count}
+
+
+
+ {link.subtitle}
+
+ {link.title}
+
+
+
+
+
+ ),
+ )}
);
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
index 7ac93b917..fe10331c9 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
@@ -109,7 +109,9 @@ const SwitchSetting = ({
{title}
- {text}
+
+ {text}
+
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
index bf5c92f34..c90261c37 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
@@ -3,6 +3,7 @@ import { Stack, Title } from "@mantine/core";
import { api } from "@homarr/api/server";
import { getScopedI18n } from "@homarr/translation/server";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { AnalyticsSettings } from "./_components/analytics.settings";
export async function generateMetadata() {
@@ -18,9 +19,12 @@ export default async function SettingsPage() {
const serverSettings = await api.serverSettings.getAll();
const t = await getScopedI18n("management.page.settings");
return (
-
- {t("title")}
-
-
+ <>
+
+
+ {t("title")}
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
new file mode 100644
index 000000000..caea75a79
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import type { MantineColor } from "@mantine/core";
+import { Avatar, Badge, Box, Button, Group, Text } from "@mantine/core";
+import { IconPlayerPlay, IconPlayerStop, IconRotateClockwise, IconTrash } from "@tabler/icons-react";
+import type { MRT_ColumnDef } from "mantine-react-table";
+import { MantineReactTable } from "mantine-react-table";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useTimeAgo } from "@homarr/common";
+import type { DockerContainerState } from "@homarr/definitions";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import type { TranslationFunction } from "@homarr/translation";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
+import { OverflowBadge } from "@homarr/ui";
+import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
+
+const createColumns = (
+ t: TranslationFunction,
+): MRT_ColumnDef[] => [
+ {
+ accessorKey: "name",
+ header: t("docker.field.name.label"),
+ Cell({ renderedCellValue, row }) {
+ return (
+
+
+ {row.original.name.at(0)?.toUpperCase()}
+
+ {renderedCellValue}
+
+ );
+ },
+ },
+ {
+ accessorKey: "state",
+ header: t("docker.field.state.label"),
+ size: 120,
+ Cell({ cell }) {
+ return ;
+ },
+ },
+ {
+ accessorKey: "image",
+ header: t("docker.field.containerImage.label"),
+ maxSize: 200,
+ Cell({ renderedCellValue }) {
+ return (
+
+ {renderedCellValue}
+
+ );
+ },
+ },
+ {
+ accessorKey: "ports",
+ header: t("docker.field.ports.label"),
+ Cell({ cell }) {
+ return (
+ port.PrivatePort.toString())} />
+ );
+ },
+ },
+];
+
+export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"]) {
+ const t = useI18n();
+ const tDocker = useScopedI18n("docker");
+ const { data } = clientApi.docker.getContainers.useQuery(undefined, {
+ initialData,
+ refetchOnMount: false,
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ });
+ const relativeTime = useTimeAgo(data.timestamp);
+ const table = useTranslatedMantineReactTable({
+ data: data.containers,
+ enableDensityToggle: false,
+ enableColumnActions: false,
+ enableColumnFilters: false,
+ enablePagination: false,
+ enableRowSelection: true,
+ positionToolbarAlertBanner: "top",
+ enableTableFooter: false,
+ enableBottomToolbar: false,
+ positionGlobalFilter: "right",
+ mantineSearchTextInputProps: {
+ placeholder: tDocker("table.search", { count: data.containers.length }),
+ style: { minWidth: 300 },
+ autoFocus: true,
+ },
+
+ initialState: { density: "xs", showGlobalFilter: true },
+ renderToolbarAlertBannerContent: ({ groupedAlert, table }) => {
+ return (
+
+ {groupedAlert}
+
+ {tDocker("table.selected", {
+ selectCount: table.getSelectedRowModel().rows.length,
+ totalCount: table.getRowCount(),
+ })}
+
+ row.original.id)} />
+
+ );
+ },
+
+ columns: createColumns(t),
+ });
+
+ return (
+ <>
+ {tDocker("table.updated", { when: relativeTime })}
+
+
+ );
+}
+
+interface ContainerActionBarProps {
+ selectedIds: string[];
+}
+
+const ContainerActionBar = ({ selectedIds }: ContainerActionBarProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+interface ContainerActionBarButtonProps {
+ icon: TablerIcon;
+ color: MantineColor;
+ action: "start" | "stop" | "restart" | "remove";
+ selectedIds: string[];
+}
+
+const ContainerActionBarButton = (props: ContainerActionBarButtonProps) => {
+ const t = useScopedI18n("docker.action");
+ const { mutateAsync, isPending } = clientApi.docker[`${props.action}All`].useMutation();
+ const utils = clientApi.useUtils();
+
+ const handleClickAsync = async () => {
+ await mutateAsync(
+ { ids: props.selectedIds },
+ {
+ async onSettled() {
+ await utils.docker.getContainers.invalidate();
+ },
+ onSuccess() {
+ showSuccessNotification({
+ title: t(`${props.action}.notification.success.title`),
+ message: t(`${props.action}.notification.success.message`),
+ });
+ },
+ onError() {
+ showErrorNotification({
+ title: t(`${props.action}.notification.error.title`),
+ message: t(`${props.action}.notification.error.message`),
+ });
+ },
+ },
+ );
+ };
+
+ return (
+ }
+ color={props.color}
+ onClick={handleClickAsync}
+ loading={isPending}
+ variant="light"
+ radius="md"
+ >
+ {t(`${props.action}.label`)}
+
+ );
+};
+
+const containerStates = {
+ created: "cyan",
+ running: "green",
+ paused: "yellow",
+ restarting: "orange",
+ exited: "red",
+ removing: "pink",
+ dead: "dark",
+} satisfies Record;
+
+const ContainerStateBadge = ({ state }: { state: DockerContainerState }) => {
+ const t = useScopedI18n("docker.field.state.option");
+
+ return (
+
+ {t(state)}
+
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx
new file mode 100644
index 000000000..c9054efe2
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx
@@ -0,0 +1,22 @@
+import { Stack, Title } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { DockerTable } from "./docker-table";
+
+export default async function DockerPage() {
+ const { containers, timestamp } = await api.docker.getContainers();
+ const tDocker = await getScopedI18n("docker");
+
+ return (
+ <>
+
+
+ {tDocker("title")}
+
+
+
+ );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
index 4b6373764..7822da49c 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
@@ -6,6 +6,7 @@ import "@xterm/xterm/css/xterm.css";
import dynamic from "next/dynamic";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
import { fullHeightWithoutHeaderAndFooter } from "~/constants";
import { createMetaTitle } from "~/metadata";
@@ -23,8 +24,11 @@ const ClientSideTerminalComponent = dynamic(() => import("./terminal"), {
export default function LogsManagementPage() {
return (
-
-
-
+ <>
+
+
+
+
+
);
}
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx b/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx
new file mode 100644
index 000000000..cab75ef95
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import { ActionIcon, Badge, Card, Group, Stack, Text } from "@mantine/core";
+import { useListState } from "@mantine/hooks";
+import { IconPlayerPlay } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useTimeAgo } from "@homarr/common";
+import type { TaskStatus } from "@homarr/cron-job-status";
+import type { TranslationKeys } from "@homarr/translation";
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface JobsListProps {
+ initialJobs: RouterOutputs["cronJobs"]["getJobs"];
+}
+
+interface JobState {
+ job: JobsListProps["initialJobs"][number];
+ status: TaskStatus | null;
+}
+
+export const JobsList = ({ initialJobs }: JobsListProps) => {
+ const t = useScopedI18n("management.page.tool.tasks");
+ const [jobs, handlers] = useListState(
+ initialJobs.map((job) => ({
+ job,
+ status: null,
+ })),
+ );
+ clientApi.cronJobs.subscribeToStatusUpdates.useSubscription(undefined, {
+ onData: (data) => {
+ const jobByName = jobs.find((job) => job.job.name === data.name);
+ if (!jobByName) {
+ return;
+ }
+ handlers.applyWhere(
+ (job) => job.job.name === data.name,
+ (job) => ({ ...job, status: data }),
+ );
+ },
+ });
+ const { mutateAsync } = clientApi.cronJobs.triggerJob.useMutation();
+ const handleJobTrigger = React.useCallback(
+ async (job: JobState) => {
+ if (job.status?.status === "running") {
+ return;
+ }
+ await mutateAsync(job.job.name);
+ },
+ [mutateAsync],
+ );
+ return (
+
+ {jobs.map((job) => (
+
+
+
+
+ {t(`job.${job.job.name}.label` as TranslationKeys)}
+ {job.status?.status === "idle" && {t("status.idle")}}
+ {job.status?.status === "running" && {t("status.running")}}
+ {job.status?.lastExecutionStatus === "error" && {t("status.error")}}
+
+ {job.status && }
+
+
+ handleJobTrigger(job)}
+ disabled={job.status?.status === "running"}
+ variant={"default"}
+ size={"xl"}
+ radius={"xl"}
+ >
+
+
+
+
+ ))}
+
+ );
+};
+
+const TimeAgo = ({ timestamp }: { timestamp: string }) => {
+ const timeAgo = useTimeAgo(new Date(timestamp));
+
+ return (
+
+ {timeAgo}
+
+ );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/tasks/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/tasks/page.tsx
new file mode 100644
index 000000000..834935659
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/tasks/page.tsx
@@ -0,0 +1,25 @@
+import { Box, Title } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
+
+import { createMetaTitle } from "~/metadata";
+import { JobsList } from "./_components/jobs-list";
+
+export async function generateMetadata() {
+ const t = await getScopedI18n("management");
+
+ return {
+ title: createMetaTitle(t("metaTitle")),
+ };
+}
+
+export default async function TasksPage() {
+ const jobs = await api.cronJobs.getJobs();
+ return (
+
+ Tasks
+
+
+ );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
index 0e819d163..7a61bc3de 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
@@ -93,24 +93,38 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
});
}, [mutate, user.id, openConfirmModal, tManageAvatar]);
+ const isCredentialsUser = user.provider === "credentials";
+
return (
-