diff --git a/.deepsource.toml b/.deepsource.toml index edc4a8907..e2f2ffcf8 100644 --- a/.deepsource.toml +++ b/.deepsource.toml @@ -3,9 +3,6 @@ version = 1 [[analyzers]] name = "javascript" - [analyzers.meta] - plugins = ["react"] - environment = ["nodejs"] - -[[transformers]] -name = "prettier" \ No newline at end of file +[analyzers.meta] +plugins = ["react"] +environment = ["nodejs"] diff --git a/.dockerignore b/.dockerignore index 4a3a71c06..d75e30111 100644 --- a/.dockerignore +++ b/.dockerignore @@ -9,4 +9,8 @@ README.md .git dev .build -e2e \ No newline at end of file +e2e +apps/nextjs/.next +.env +.env.* +!.env.example diff --git a/.env.example b/.env.example index a11cff63f..318b171e1 100644 --- a/.env.example +++ b/.env.example @@ -41,6 +41,14 @@ DB_URL='FULL_PATH_TO_YOUR_SQLITE_DB_FILE' TURBO_TELEMETRY_DISABLED=1 +# Turborepo remote cache (optional, for faster CI/local builds) +# Uncomment and fill in to enable remote caching locally. +# CI uses GitHub secrets for these values automatically. +# TURBO_API=https://your-cache-worker.workers.dev +# TURBO_TEAM=team_your_team +# TURBO_TOKEN=your-turbo-token +# TURBO_REMOTE_CACHE_SIGNATURE_KEY=your-signature-key + # Comma-separated paths to Docker-compatible Unix sockets. # Useful for connecting to multiple runtimes (Docker + Podman) simultaneously. # When unset and no TCP hosts configured, defaults to /var/run/docker.sock. diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index a5137601a..973aef4ab 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -33,6 +33,7 @@ body: options: # The below comment is used to insert a new version with on-release.yml #NEXT_VERSION# + - 1.62.0 - 1.61.0 - 1.60.1-beta.1 - 1.60.0 diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml index 5dc6df825..40d4ceb08 100644 --- a/.github/workflows/code-quality.yml +++ b/.github/workflows/code-quality.yml @@ -15,13 +15,54 @@ concurrency: env: FORCE_COLOR: 3 + SKIP_ENV_VALIDATION: true + TURBO_API: ${{ secrets.TURBO_API }} + TURBO_TEAM: ${{ secrets.TURBO_TEAM }} + TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }} + TURBO_REMOTE_CACHE_SIGNATURE_KEY: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }} + TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha || github.event.before || 'HEAD~1' }} + TURBO_SCM_HEAD: ${{ github.sha }} jobs: + lint-format-autofix: + if: github.event_name == 'pull_request' + runs-on: ubuntu-latest + timeout-minutes: 5 + permissions: + contents: write + steps: + - uses: actions/checkout@v6 + with: + fetch-depth: 0 + ref: ${{ github.head_ref }} + + - name: Setup + uses: ./tooling/github/setup + + - name: Get changed files + id: changed + run: | + git diff --name-only --diff-filter=ACMR origin/${{ github.base_ref }}...HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' > /tmp/changed-files + echo "count=$(wc -l < /tmp/changed-files | tr -d '[:space:]')" >> $GITHUB_OUTPUT + + - name: Auto-fix lint + format + if: steps.changed.outputs.count != '0' + run: | + xargs -r -a /tmp/changed-files pnpm exec oxlint --fix || true + xargs -r -a /tmp/changed-files pnpm exec oxfmt --write + + - name: Commit fixes + uses: stefanzweifel/git-auto-commit-action@v5 + with: + commit_message: "style: auto-fix lint and format" + lint: runs-on: ubuntu-latest timeout-minutes: 10 steps: - uses: actions/checkout@v6 + with: + fetch-depth: 0 - name: Setup uses: ./tooling/github/setup @@ -31,31 +72,35 @@ jobs: run: cp .env.example .env - name: Lint - run: pnpm lint && pnpm lint:ws + run: pnpm turbo lint --affected && pnpm lint:ws format: runs-on: ubuntu-latest timeout-minutes: 10 steps: - uses: actions/checkout@v6 + with: + fetch-depth: 0 - name: Setup uses: ./tooling/github/setup - name: Format - run: pnpm format + run: pnpm turbo format --affected --continue typecheck: runs-on: ubuntu-latest timeout-minutes: 10 steps: - uses: actions/checkout@v6 + with: + fetch-depth: 0 - name: Setup uses: ./tooling/github/setup - name: Typecheck - run: pnpm typecheck + run: pnpm turbo typecheck --affected test: runs-on: ubuntu-latest @@ -78,11 +123,12 @@ jobs: e2e: runs-on: ubuntu-latest timeout-minutes: 15 - steps: - uses: actions/checkout@v6 - name: Setup uses: ./tooling/github/setup + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v4 - name: Build docker image id: build-docker-image uses: docker/build-push-action@v7 @@ -90,8 +136,11 @@ jobs: platforms: linux/amd64 context: . push: false + load: true tags: homarr-e2e network: host + cache-from: type=gha + cache-to: type=gha,mode=max env: SKIP_ENV_VALIDATION: true - name: Install playwright browsers @@ -105,10 +154,12 @@ jobs: timeout-minutes: 10 steps: - uses: actions/checkout@v6 + with: + fetch-depth: 0 - name: Setup uses: ./tooling/github/setup - name: Copy env shell: bash run: cp .env.example .env - name: Build - run: pnpm build + run: pnpm turbo build --affected diff --git a/.github/workflows/deployment-docker-image.yml b/.github/workflows/deployment-docker-image.yml index c43094223..98f9357db 100644 --- a/.github/workflows/deployment-docker-image.yml +++ b/.github/workflows/deployment-docker-image.yml @@ -66,7 +66,7 @@ jobs: - uses: actions/setup-node@v6 if: env.SKIP_RELEASE == 'false' with: - node-version: 24.15.0 + node-version: 24.16.0 package-manager-cache: false - run: npm i -g pnpm if: env.SKIP_RELEASE == 'false' diff --git a/.nvmrc b/.nvmrc index 5bf4400f2..b832e4001 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -24.15.0 +24.16.0 diff --git a/.oxfmtrc.json b/.oxfmtrc.json new file mode 100644 index 000000000..88c14e2f9 --- /dev/null +++ b/.oxfmtrc.json @@ -0,0 +1,7 @@ +{ + "$schema": "./node_modules/oxfmt/configuration_schema.json", + "printWidth": 120, + "endOfLine": "lf", + "sortPackageJson": true, + "ignorePatterns": ["**/*.cjs", "**/lang/**", "static-data/**", "CHANGELOG.md"] +} diff --git a/.oxlintrc.json b/.oxlintrc.json new file mode 100644 index 000000000..1dbc54c92 --- /dev/null +++ b/.oxlintrc.json @@ -0,0 +1,37 @@ +{ + "$schema": "./node_modules/oxlint/configuration_schema.json", + "plugins": ["eslint", "typescript", "unicorn", "oxc", "react", "import", "jsx-a11y"], + "categories": { + "correctness": "error", + "suspicious": "warn", + "pedantic": "off", + "perf": "off", + "style": "off", + "restriction": "off", + "nursery": "off" + }, + "rules": { + "eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }], + "typescript/consistent-type-imports": ["warn", { "prefer": "type-imports", "fixStyle": "separate-type-imports" }], + "typescript/no-non-null-assertion": "error", + "import/consistent-type-specifier-style": ["error", "prefer-top-level"], + "unicorn/no-new-array": "warn", + "unicorn/no-useless-spread": "warn", + "unicorn/no-useless-length-check": "warn", + "unicorn/no-useless-fallback-in-spread": "warn", + "jsx-a11y/prefer-tag-over-role": "warn", + "oxc/const-comparisons": "warn", + "react-hooks/exhaustive-deps": "warn", + "react/no-children-prop": "warn", + "jsx-a11y/no-autofocus": "warn", + "jsx-a11y/img-redundant-alt": "warn", + "react/react-in-jsx-scope": "off" + }, + "options": { + "reportUnusedDisableDirectives": "off" + }, + "ignorePatterns": ["**/*.config.js", "**/*.config.mjs", "**/*.cjs", "**/lang/*.d.json.ts", ".next/**"], + "settings": { + "react": { "version": "19" } + } +} diff --git a/.vscode/i18n-ally-custom-framework.yml b/.vscode/i18n-ally-custom-framework.yml index 1ee83bc7e..865d1ae28 100644 --- a/.vscode/i18n-ally-custom-framework.yml +++ b/.vscode/i18n-ally-custom-framework.yml @@ -31,6 +31,5 @@ scopeRangeRegex: "(?:const|let|var)\\s+t\\s*=\\s*(?:await\\s+)?(?:getScopedI18n| # refactorTemplates: # - i18n.get("$1") - # If set to true, only enables this custom framework (will disable all built-in frameworks) -monopoly: true \ No newline at end of file +monopoly: true diff --git a/.vscode/launch.json b/.vscode/launch.json index b24d8b507..f3f0886e0 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -15,9 +15,7 @@ "request": "launch", "command": "pnpm docker:dev", "cwd": "${workspaceFolder}", - "skipFiles": [ - "/**" - ] + "skipFiles": ["/**"] }, { "name": "lint fix", @@ -25,9 +23,7 @@ "request": "launch", "command": "pnpm lint:fix", "cwd": "${workspaceFolder}", - "skipFiles": [ - "/**" - ] + "skipFiles": ["/**"] }, { "name": "format fix", @@ -35,9 +31,7 @@ "request": "launch", "command": "pnpm format:fix", "cwd": "${workspaceFolder}", - "skipFiles": [ - "/**" - ] + "skipFiles": ["/**"] }, { "name": "db push", @@ -69,9 +63,7 @@ "request": "launch", "command": "pnpm test", "cwd": "${workspaceFolder}", - "skipFiles": [ - "/**" - ] + "skipFiles": ["/**"] }, { "name": "test ui", @@ -79,9 +71,7 @@ "request": "launch", "command": "pnpm test:ui", "cwd": "${workspaceFolder}", - "skipFiles": [ - "/**" - ] + "skipFiles": ["/**"] } ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index f018a27b5..aa5d827ff 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,13 +1,6 @@ { - "eslint.workingDirectories": [ - { - "mode": "auto" - } - ], - "eslint.experimental.useFlatConfig": true, "typescript.tsdk": "node_modules\\typescript\\lib", "js/ts.implicitProjectConfig.experimentalDecorators": true, - "prettier.configPath": "./tooling/prettier/index.mjs", "cSpell.words": [ "ajnart", "cqmin", @@ -34,11 +27,7 @@ ], "i18n-ally.dirStructure": "auto", "i18n-ally.displayLanguage": "en", - "i18n-ally.enabledFrameworks": [ - "custom" - ], - "i18n-ally.localesPaths": [ - "packages/translation/src/lang", - ], - "i18n-ally.keystyle": "nested", + "i18n-ally.enabledFrameworks": ["custom"], + "i18n-ally.localesPaths": ["packages/translation/src/lang"], + "i18n-ally.keystyle": "nested" } diff --git a/CHANGELOG.md b/CHANGELOG.md index 83a872367..a99e511b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## [1.61.1](https://github.com/homarr-labs/homarr/compare/v1.61.0...v1.61.1) (2026-05-18) + +### Bug Fixes + +* **downloads-widget:** increase name column default width ratio ([e9142c0](https://github.com/homarr-labs/homarr/commit/e9142c0dbcaca6cd9215b5292a2d139d96919b51)) + ## [1.61.1-beta.1](https://github.com/homarr-labs/homarr/compare/v1.61.0...v1.61.1-beta.1) (2026-05-08) ### Performance Improvements diff --git a/Dockerfile b/Dockerfile index 51b562f7d..fd852fd9e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:24.15.0-alpine AS base +FROM node:24.16.0-alpine AS base FROM base AS builder RUN apk add --no-cache libc6-compat diff --git a/apps/nextjs/eslint.config.js b/apps/nextjs/eslint.config.js deleted file mode 100644 index 3d593e34e..000000000 --- a/apps/nextjs/eslint.config.js +++ /dev/null @@ -1,30 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; -import nextjsConfig from "@homarr/eslint-config/nextjs"; -import reactConfig from "@homarr/eslint-config/react"; - -/** @type {import('typescript-eslint').Config} */ -export default [ - { - ignores: [".next/**"], - }, - ...baseConfig, - ...reactConfig, - ...nextjsConfig, - { - files: ["public/sw.js"], - languageOptions: { - globals: { - self: "readonly", - clients: "readonly", - skipWaiting: "readonly", - importScripts: "readonly", - caches: "readonly", - fetch: "readonly", - }, - }, - rules: { - "@typescript-eslint/no-unsafe-call": "off", - "@typescript-eslint/no-unsafe-member-access": "off", - }, - }, -]; diff --git a/apps/nextjs/next.config.ts b/apps/nextjs/next.config.ts index 24b32fd21..bcce78519 100644 --- a/apps/nextjs/next.config.ts +++ b/apps/nextjs/next.config.ts @@ -6,7 +6,6 @@ import "@homarr/core/infrastructure/logs/env"; import "@homarr/docker/env"; import type { NextConfig } from "next"; -import MillionLint from "@million/lint"; import createNextIntlPlugin from "next-intl/plugin"; // Package path does not work... so we need to use relative path @@ -85,8 +84,4 @@ const nextConfig: NextConfig = { }, }; -// Skip transform is used because of webpack loader, without it for example 'Tooltip.Floating' will not work and show an error -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const withMillionLint = MillionLint.next({ rsc: true, skipTransform: true, telemetry: false }); - export default withNextIntl(nextConfig); diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json index 4a7323606..ff5864f13 100644 --- a/apps/nextjs/package.json +++ b/apps/nextjs/package.json @@ -7,13 +7,12 @@ "build": "pnpm with-env next build", "clean": "git clean -xdf .next .turbo node_modules", "dev": "pnpm with-env next dev", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "start": "pnpm with-env next start", "typecheck": "tsc --noEmit", "with-env": "dotenv -e ../../.env --" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@dnd-kit/core": "catalog:", "@dnd-kit/modifiers": "catalog:", @@ -56,7 +55,6 @@ "@mantine/hooks": "catalog:", "@mantine/modals": "catalog:", "@mantine/tiptap": "catalog:", - "@million/lint": "catalog:", "@tabler/icons-react": "catalog:", "@tanstack/react-query": "catalog:", "@tanstack/react-query-devtools": "catalog:", @@ -93,8 +91,6 @@ "zod": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", "@types/chroma-js": "catalog:", "@types/node": "catalog:", @@ -103,9 +99,7 @@ "@types/react-dom": "catalog:", "@types/swagger-ui-react": "catalog:", "concurrently": "catalog:", - "eslint": "catalog:", "node-loader": "catalog:", - "prettier": "catalog:", "typescript": "catalog:" } } diff --git a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx index d81b828f3..1d939c919 100644 --- a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx +++ b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx @@ -2,13 +2,14 @@ import type { PropsWithChildren } from "react"; import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core"; -import { createTheme, DirectionProvider, MantineProvider } from "@mantine/core"; +import { DirectionProvider, MantineProvider } from "@mantine/core"; import dayjs from "dayjs"; import { clientApi } from "@homarr/api/client"; import { useSession } from "@homarr/auth/client"; import { parseCookies, setClientCookie } from "@homarr/common"; import { colorSchemeCookieKey } from "@homarr/definitions"; +import { theme } from "@homarr/ui"; export const CustomMantineProvider = ({ children, @@ -23,6 +24,7 @@ export const CustomMantineProvider = ({ theme={createTheme({ primaryColor: "red", autoContrast: true, + defaultRadius: "sm", })} > {children} 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 cc6535703..dbf6306c3 100644 --- a/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx +++ b/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx @@ -59,7 +59,7 @@ export default async function InviteUsagePage(props: InviteUsagePageProps) { {t("subtitle")} - + 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 71d249cf5..8d36d1e79 100644 --- a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx +++ b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx @@ -9,7 +9,7 @@ import { z } from "zod/v4"; import { signIn } from "@homarr/auth/client"; import { revalidatePathActionAsync } from "@homarr/common/client"; -import type { useForm } from "@homarr/form"; +import type { UseFormReturnType } from "@homarr/form"; import { useZodForm } from "@homarr/form"; import { showErrorNotification, showSuccessNotification } from "@homarr/notifications"; import { useScopedI18n } from "@homarr/translation/client"; @@ -162,7 +162,7 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c interface SubmitButtonProps { isPending: boolean; - form: ReturnType FormType>>; + form: UseFormReturnType; provider: "credentials" | "ldap"; } @@ -198,7 +198,7 @@ const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps) {tForgotPassword("label")} - + {tForgotPassword("description")} diff --git a/apps/nextjs/src/app/[locale]/auth/login/page.tsx b/apps/nextjs/src/app/[locale]/auth/login/page.tsx index 22adf3b87..6cf00b6b3 100644 --- a/apps/nextjs/src/app/[locale]/auth/login/page.tsx +++ b/apps/nextjs/src/app/[locale]/auth/login/page.tsx @@ -37,7 +37,7 @@ export default async function Login(props: LoginProps) { {t("subtitle")} - + { - boardName = name; -}; - -type UpdateCallback = (prev: RouterOutputs["board"]["getHomeBoard"]) => RouterOutputs["board"]["getHomeBoard"]; - -export const useUpdateBoard = () => { - const utils = clientApi.useUtils(); - - const updateBoard = useCallback( - (updaterWithoutUndefined: UpdateCallback) => { - if (!boardName) { - throw new Error("Board name is not set"); - } - utils.board.getBoardByName.setData({ name: boardName }, (previous) => - previous ? updaterWithoutUndefined(previous) : previous, - ); - }, - [utils], - ); - - return { - updateBoard, - }; -}; export const ClientBoard = () => { const board = useRequiredBoard(); const currentLayoutId = useCurrentLayout(); - const isReady = useIsBoardReady(); const fullWidthSortedSections = board.sections .filter((section) => section.kind === "empty" || section.kind === "category") .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset); - const ref = useRef(null); - return ( - - + {fullWidthSortedSections.map((section) => section.kind === "empty" ? ( - // Unique keys per layout to always reinitialize the gridstack ) : ( diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx index 64c9289e3..3314dee3c 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx @@ -41,13 +41,11 @@ export const createBoardContentPage = >( }), // eslint-disable-next-line no-restricted-syntax page: async ({ params }: { params: Promise }) => { - const session = await auth(); - const integrations = await getIntegrationsWithPermissionsAsync(session); - - const board = await getInitialBoard(await params); + const resolvedParams = await params; const queryClient = getQueryClient(); - // Prefetch item data + const [board, session] = await Promise.all([getInitialBoard(resolvedParams), auth()]); + const itemsMap = board.items.reduce((acc, item) => { const existing = acc.get(item.kind); if (existing) { @@ -58,17 +56,20 @@ export const createBoardContentPage = >( return acc; }, new Map()); - for (const [kind, items] of itemsMap) { - await prefetchForKindAsync(kind, queryClient, items).catch((error) => { - logger.error( - new ErrorWithMetadata( - "Failed to prefetch widget", - { widgetKind: kind, itemCount: items.length }, - { cause: error }, - ), - ); - }); - } + const [integrations] = await Promise.all([ + getIntegrationsWithPermissionsAsync(session), + ...Array.from(itemsMap).map(([kind, items]) => + prefetchForKindAsync(kind, queryClient, items).catch((error) => { + logger.error( + new ErrorWithMetadata( + "Failed to prefetch widget", + { widgetKind: kind, itemCount: items.length }, + { cause: error }, + ), + ); + }), + ), + ]); return ( diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx index f1185430c..3b6ea7a37 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx @@ -109,7 +109,7 @@ const AddMenu = () => { }, [openAppSelectModal, createItem]); return ( - + @@ -183,7 +183,7 @@ const SelectBoardsMenu = () => { const { data: boards = [] } = clientApi.board.getAllBoards.useQuery(); return ( - + diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_ready-context.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_ready-context.tsx index 606a296ea..3d50c5a8c 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_ready-context.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_ready-context.tsx @@ -1,42 +1,19 @@ "use client"; import type { PropsWithChildren } from "react"; -import { createContext, useCallback, useContext, useEffect, useState } from "react"; -import { usePathname } from "next/navigation"; - -import { clientApi } from "@homarr/api/client"; -import { useRequiredBoard } from "@homarr/boards/context"; +import { createContext, useCallback, useContext } from "react"; const BoardReadyContext = createContext<{ - isReady: boolean; markAsReady: (id: string) => void; } | null>(null); export const BoardReadyProvider = ({ children }: PropsWithChildren) => { - const pathname = usePathname(); - const utils = clientApi.useUtils(); - const board = useRequiredBoard(); - const [readySections, setReadySections] = useState([]); - - // Reset sections required for ready state - useEffect(() => { - return () => { - setReadySections([]); - }; - }, [pathname, utils]); - - useEffect(() => { - setReadySections((previous) => previous.filter((id) => board.sections.some((section) => section.id === id))); - }, [board.sections.length, setReadySections]); - - const markAsReady = useCallback((id: string) => { - setReadySections((previous) => (previous.includes(id) ? previous : [...previous, id])); - }, []); + // eslint-disable-next-line @typescript-eslint/no-empty-function + const markAsReady = useCallback((_id: string) => {}, []); return ( @@ -54,13 +31,3 @@ export const useMarkSectionAsReady = () => { return context.markAsReady; }; - -export const useIsBoardReady = () => { - const context = useContext(BoardReadyContext); - - if (!context) { - throw new Error("BoardReadyProvider is required"); - } - - return context.isReady; -}; diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx index 27f3e9152..8fa031ad0 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx @@ -24,6 +24,7 @@ export const BoardMantineProvider = ({ }, primaryColor: "primaryColor", autoContrast: true, + defaultRadius: "sm", fontSizes: { "2xl": rem(24), "3xl": rem(28), diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx index 95b3602e6..4af4af15f 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx @@ -83,7 +83,7 @@ export const ColorSettingsContent = ({ board }: Props) => { {showPreview ? t("common.preview.hide") : t("common.preview.show")} - + diff --git a/apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx b/apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx index 288b9adae..133581d58 100644 --- a/apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx +++ b/apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx @@ -15,7 +15,7 @@ export const InitFinish = async () => { const tFinish = await getScopedI18n("init.step.finish"); return ( - + {tFinish("description")} diff --git a/apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx b/apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx index 0a91d4ced..94424ef7d 100644 --- a/apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx +++ b/apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx @@ -34,7 +34,7 @@ export const InitGroup = () => { }; return ( - +
{ const tFileInfo = useScopedI18n("init.step.import.fileInfo"); return ( - + diff --git a/apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx b/apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx index 8b7124a03..cdb3faf50 100644 --- a/apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx +++ b/apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx @@ -20,7 +20,7 @@ export const InitImport = () => { if (!file) { return ( - + { diff --git a/apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx b/apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx index 3badc014e..cb024fc2f 100644 --- a/apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx +++ b/apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx @@ -30,7 +30,7 @@ export const InitSettings = () => { return ( - + {tSection("analytics.title")} @@ -39,7 +39,7 @@ export const InitSettings = () => { - + {tSection("crawlingAndIndexing.title")} diff --git a/apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx b/apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx index b5005f8b4..da858f1f4 100644 --- a/apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx +++ b/apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx @@ -10,7 +10,7 @@ export const InitStart = async () => { const tStart = await getScopedI18n("init.step.start"); return ( - + {tStart("description")} diff --git a/apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx b/apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx index 0f52de3dc..fa0ed777d 100644 --- a/apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx +++ b/apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx @@ -4,7 +4,7 @@ import { InitUserForm } from "./init-user-form"; export const InitUser = () => { return ( - + ); diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx index 5449e1252..e88f1965b 100644 --- a/apps/nextjs/src/app/[locale]/layout.tsx +++ b/apps/nextjs/src/app/[locale]/layout.tsx @@ -44,13 +44,13 @@ const fontSans = Inter({ export const generateMetadata = async (): Promise => ({ title: "Homarr", description: - "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.", + "A self-hosted dashboard for the *arr stack and your entire homelab. Integrates with 50+ services, real-time widgets, no config files.", openGraph: { title: "Homarr Dashboard", description: - "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.", + "A self-hosted dashboard for the *arr stack and your entire homelab. Integrates with 50+ services, real-time widgets, no config files.", url: "https://homarr.dev", - siteName: "Homarr Documentation", + siteName: "Homarr", }, icons: { icon: "/logo/logo.png", @@ -142,7 +142,7 @@ export default async function Layout(props: { - + {props.children} 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 b694ee81d..66c9e0398 100644 --- a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx +++ b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx @@ -45,7 +45,6 @@ export const HeroBanner = async () => { { - - Homarr - + Homarr {t("version", { version })} @@ -195,9 +193,9 @@ export default async function AboutPage() { href={`https://www.npmjs.com/package/${name}`} target="_blank" > - + - + diff --git a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx index 27ab01fb5..1093524e7 100644 --- a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx @@ -1,6 +1,6 @@ import { Fragment } from "react"; import { redirect } from "next/navigation"; -import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core"; +import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core"; import { IconBox, IconPencil } from "@tabler/icons-react"; import { z } from "zod/v4"; @@ -11,9 +11,8 @@ import type { inferSearchParamsFromSchema } from "@homarr/common/types"; import { getI18n, getScopedI18n } from "@homarr/translation/server"; import { Link, SearchInput, TablePagination } from "@homarr/ui"; -import { ManageContainer } from "~/components/manage/manage-container"; +import { ManagePageLayout } from "~/components/manage/manage-page-layout"; import { MobileAffixButton } from "~/components/manage/mobile-affix-button"; -import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb"; import { NoResults } from "~/components/no-results"; import { AppDeleteButton } from "./_app-delete-button"; @@ -39,34 +38,31 @@ export default async function AppsPage(props: AppsPageProps) { const { items: apps, totalCount } = await api.app.getPaginated(searchParams); const t = await getScopedI18n("app"); - return ( - - - - {t("page.list.title")} - - - {session.user.permissions.includes("app-create") && ( - - {t("page.create.title")} - - )} - - {apps.length === 0 && } - {apps.length > 0 && ( - - {apps.map((app) => ( - - ))} - - )} + const canCreate = session.user.permissions.includes("app-create"); - {/* Added margin to not hide pagination behind affix-button */} - - - - - + return ( + + {t("page.create.title")} + + ) : undefined + } + toolbar={} + footer={} + floatingPrimaryAction={canCreate} + > + {apps.length === 0 && } + {apps.length > 0 && ( + + {apps.map((app) => ( + + ))} + + )} + ); } @@ -79,7 +75,7 @@ const AppCard = async ({ app }: AppCardProps) => { const session = await auth(); return ( - + { const t = useI18n(); const { openModal: openAddModal } = useModalAction(AddBoardModal); const { openModal: openImportModal } = useModalAction(ImportBoardModal); - const buttonGroupContent = ( - <> - - - - - - - }> - {t("board.action.oldImport.label")} - - - - - ); - return ( - <> - {buttonGroupContent} - - {buttonGroupContent} - - + + + + + + + + + }> + {t("board.action.oldImport.label")} + + + + + ); }; diff --git a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx index 9c0a28344..45bbcd2b5 100644 --- a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx @@ -9,12 +9,17 @@ import { Group, Menu, MenuTarget, - Stack, Text, - Title, Tooltip, } from "@mantine/core"; -import { IconDeviceMobile, IconDotsVertical, IconHomeFilled, IconLock, IconWorld } from "@tabler/icons-react"; +import { + IconDeviceMobile, + IconDotsVertical, + IconHomeFilled, + IconLayoutDashboard, + IconLock, + IconWorld, +} from "@tabler/icons-react"; import type { RouterOutputs } from "@homarr/api"; import { api } from "@homarr/api/server"; @@ -23,8 +28,8 @@ import { getScopedI18n } from "@homarr/translation/server"; import { Link, 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 { ManagePageLayout } from "~/components/manage/manage-page-layout"; +import { NoResults } from "~/components/no-results"; import { BoardCardMenuDropdown } from "./_components/board-card-menu-dropdown"; import { CreateBoardButton } from "./_components/create-board-button"; @@ -35,23 +40,22 @@ export default async function ManageBoardsPage() { const canCreateBoards = session?.user.permissions.includes("board-create"); return ( - - - - - {t("title")} - {canCreateBoards && } - - - + : undefined} + floatingPrimaryAction={canCreateBoards} + > + {boards.length === 0 && } + {boards.length > 0 && ( + {boards.map((board) => ( ))} - - + )} + ); } @@ -66,16 +70,14 @@ const BoardCard = async ({ board }: BoardCardProps) => { const VisibilityIcon = board.isPublic ? IconWorld : IconLock; return ( - + - - {board.name} - + {board.name} @@ -123,6 +125,7 @@ const BoardCard = async ({ board }: BoardCardProps) => { style={{ borderTop: "none", borderBottom: "none", borderRight: "none", borderRadius: 0 }} variant="default" size="lg" + aria-label={t("action.settings.label")} > diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx index 06c4baff3..0bfe34ed0 100644 --- a/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx +++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx @@ -33,7 +33,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => { const KindIcon = integrationSecretIcons[secret.kind]; return ( - + @@ -58,7 +58,12 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => { )} {isPublic ? ( - + ) : null} @@ -79,7 +84,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => { - {children} + {children} ); diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-segmented-control.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-segmented-control.tsx index e524b3870..9272e47c2 100644 --- a/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-segmented-control.tsx +++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-segmented-control.tsx @@ -12,7 +12,7 @@ interface FormType { interface SecretKindsSegmentedControlProps { defaultKinds?: IntegrationSecretKind[]; secretKinds: IntegrationSecretKind[][]; - form: UseFormReturnType TFormType>; + form: UseFormReturnType; } export const SecretKindsSegmentedControl = ({ diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/integration-test-connection-error.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/integration-test-connection-error.tsx index cdaa70d93..a50625106 100644 --- a/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/integration-test-connection-error.tsx +++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/integration-test-connection-error.tsx @@ -18,7 +18,7 @@ export const IntegrationTestConnectionError = ({ error, url }: IntegrationTestCo const causeArray = useMemo(() => toCauseArray(error.cause), [error.cause]); return ( - + diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/test-connection-certificate.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/test-connection-certificate.tsx index 9f7b00530..6ebbdbb6d 100644 --- a/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/test-connection-certificate.tsx +++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/test-connection-certificate.tsx @@ -216,7 +216,7 @@ export const CertificateDetailsCard = ({ certificate }: CertificateDetailsProps) const tCertificateField = useScopedI18n("certificate.field"); return ( - + {tDetails("title")} 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 016b9336c..b7fbf3291 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 @@ -226,7 +226,7 @@ const AppForm = ({ form, canCreateApps }: { form: UseFormReturnType; c description={t("integration.field.createApp.description")} /> - +
{canCreateApps && ( diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/page.module.css b/apps/nextjs/src/app/[locale]/manage/integrations/page.module.css index 34001e53b..551deb5ab 100644 --- a/apps/nextjs/src/app/[locale]/manage/integrations/page.module.css +++ b/apps/nextjs/src/app/[locale]/manage/integrations/page.module.css @@ -8,7 +8,7 @@ border: 1px solid transparent; position: relative; z-index: 0; - transition: transform 150ms ease; + transition: background-color 150ms ease; overflow: hidden; &[data-first="true"] { @@ -20,11 +20,9 @@ } &[data-active] { - transform: scale(1.01); z-index: 1; background-color: var(--mantine-color-body); border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); - box-shadow: var(--mantine-shadow-md); border-radius: var(--mantine-radius-lg); } } diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx index 1fe3a83e2..994d63b3c 100644 --- a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx @@ -7,9 +7,7 @@ import { AccordionPanel, ActionIcon, ActionIconGroup, - Affix, Anchor, - Box, Button, Divider, Group, @@ -24,9 +22,8 @@ import { TableThead, TableTr, Text, - Title, } from "@mantine/core"; -import { IconChevronDown, IconChevronUp, IconPencil, IconPlugX } from "@tabler/icons-react"; +import { IconChevronDown, IconPencil, IconPlugX } from "@tabler/icons-react"; import type { RouterOutputs } from "@homarr/api"; import { api } from "@homarr/api/server"; @@ -37,8 +34,8 @@ import { getIntegrationName } from "@homarr/definitions"; import { getScopedI18n } from "@homarr/translation/server"; import { CountBadge, IntegrationAvatar, Link } from "@homarr/ui"; -import { ManageContainer } from "~/components/manage/manage-container"; -import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb"; +import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action"; +import { ManagePageLayout } from "~/components/manage/manage-page-layout"; import { NoResults } from "~/components/no-results"; import { env } from "~/env"; import { ActiveTabAccordion } from "../../../../components/active-tab-accordion"; @@ -66,38 +63,23 @@ export default async function IntegrationsPage(props: IntegrationsPageProps) { const canCreateIntegrations = session.user.permissions.includes("integration-create"); return ( - - - - - {t("page.list.title")} - - {canCreateIntegrations && ( - <> - - - - - - - - - - - - - - - - - - - )} - - - - - + + + + + + + + ) : undefined + } + floatingPrimaryAction={canCreateIntegrations} + > + + ); } diff --git a/apps/nextjs/src/app/[locale]/manage/medias/page.tsx b/apps/nextjs/src/app/[locale]/manage/medias/page.tsx index b14ceb531..51d4a2caf 100644 --- a/apps/nextjs/src/app/[locale]/manage/medias/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/medias/page.tsx @@ -4,17 +4,15 @@ import { Anchor, Group, Image, - Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, - Title, Tooltip, } from "@mantine/core"; -import { IconExternalLink } from "@tabler/icons-react"; +import { IconExternalLink, IconPhoto } from "@tabler/icons-react"; import { z } from "zod/v4"; import type { RouterOutputs } from "@homarr/api"; @@ -26,8 +24,9 @@ import { createLocalImageUrl } from "@homarr/icons/local"; import { getI18n } from "@homarr/translation/server"; import { Link, SearchInput, TablePagination, UserAvatar } from "@homarr/ui"; -import { ManageContainer } from "~/components/manage/manage-container"; -import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb"; +import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action"; +import { ManagePageLayout } from "~/components/manage/manage-page-layout"; +import { NoResults } from "~/components/no-results"; import { CopyMedia } from "./_actions/copy-media"; import { DeleteMedia } from "./_actions/delete-media"; import { IncludeFromAllUsersSwitch } from "./_actions/show-all"; @@ -48,7 +47,7 @@ interface MediaListPageProps { searchParams: Promise>; } -export default async function GroupsListPage(props: MediaListPageProps) { +export default async function MediaListPage(props: MediaListPageProps) { const session = await auth(); if (!session) { @@ -58,22 +57,31 @@ export default async function GroupsListPage(props: MediaListPageProps) { const t = await getI18n(); const searchParams = searchParamsSchema.parse(await props.searchParams); const { items: medias, totalCount } = await api.media.getPaginated(searchParams); + const canUpload = session.user.permissions.includes("media-upload"); return ( - - - - {t("media.plural")} - - - - {session.user.permissions.includes("media-view-all") && ( - - )} - - - {session.user.permissions.includes("media-upload") && } + + + + ) : undefined + } + toolbar={ + + + {session.user.permissions.includes("media-view-all") && ( + + )} + } + footer={} + floatingPrimaryAction={canUpload} + > + {medias.length === 0 && } + {medias.length > 0 && ( @@ -90,13 +98,8 @@ export default async function GroupsListPage(props: MediaListPageProps) { ))}
- - {/* Added margin to not hide pagination behind affix-button */} - - - - - + )} + ); } diff --git a/apps/nextjs/src/app/[locale]/manage/not-found.tsx b/apps/nextjs/src/app/[locale]/manage/not-found.tsx index 8579e45c4..f6931af9f 100644 --- a/apps/nextjs/src/app/[locale]/manage/not-found.tsx +++ b/apps/nextjs/src/app/[locale]/manage/not-found.tsx @@ -7,9 +7,7 @@ export default async function NotFound() { return (
- - {t("title")} - + {t("title")} {t("text")}
diff --git a/apps/nextjs/src/app/[locale]/manage/page.tsx b/apps/nextjs/src/app/[locale]/manage/page.tsx index 256eaddb5..c7a3a1813 100644 --- a/apps/nextjs/src/app/[locale]/manage/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/page.tsx @@ -29,20 +29,20 @@ export default async function ManagementPage() { {statistics.map((statistic) => ( - + - + {statistic.count} - + {t(`statisticLabel.${statistic.subtitleKey}`)} - {t(`statistic.${statistic.titleKey}`)} + {t(`statistic.${statistic.titleKey}`)} - + ))} diff --git a/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx b/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx index ce2500d02..fd4066d64 100644 --- a/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx @@ -1,5 +1,5 @@ import { redirect } from "next/navigation"; -import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core"; +import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core"; import { IconPencil, IconSearch } from "@tabler/icons-react"; import { z } from "zod/v4"; @@ -10,9 +10,8 @@ import type { inferSearchParamsFromSchema } from "@homarr/common/types"; import { getI18n, getScopedI18n } from "@homarr/translation/server"; import { Link, SearchInput, TablePagination } from "@homarr/ui"; -import { ManageContainer } from "~/components/manage/manage-container"; +import { ManagePageLayout } from "~/components/manage/manage-page-layout"; import { MobileAffixButton } from "~/components/manage/mobile-affix-button"; -import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb"; import { NoResults } from "~/components/no-results"; import { SearchEngineDeleteButton } from "./_search-engine-delete-button"; @@ -38,34 +37,31 @@ export default async function SearchEnginesPage(props: SearchEnginesPageProps) { const tEngine = await getScopedI18n("search.engine"); - return ( - - - - {tEngine("page.list.title")} - - - {session.user.permissions.includes("search-engine-create") && ( - - {tEngine("page.create.title")} - - )} - - {searchEngines.length === 0 && } - {searchEngines.length > 0 && ( - - {searchEngines.map((searchEngine) => ( - - ))} - - )} + const canCreate = session.user.permissions.includes("search-engine-create"); - {/* Added margin to not hide pagination behind affix-button */} - - - - - + return ( + + {tEngine("page.create.title")} + + ) : undefined + } + toolbar={} + footer={} + floatingPrimaryAction={canCreate} + > + {searchEngines.length === 0 && } + {searchEngines.length > 0 && ( + + {searchEngines.map((searchEngine) => ( + + ))} + + )} + ); } @@ -78,7 +74,7 @@ const SearchEngineCard = async ({ searchEngine }: SearchEngineCardProps) => { const session = await auth(); return ( - + { <> {t("title")} - - + + diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx index b99f298ee..29206a473 100644 --- a/apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx +++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx @@ -41,11 +41,11 @@ export const CrawlingAndIndexingSettings = ({ initialData }: CrawlingAndIndexing <> {t("title")} - + {t("warning")} - + diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx index 293a8fa96..adec086ad 100644 --- a/apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx +++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx @@ -15,7 +15,7 @@ export const SwitchSetting = >({ disabled, }: { form: Modify< - UseFormReturnType TFormValue>, + UseFormReturnType, { setFieldValue: (key: keyof TFormValue, value: (previous: boolean) => boolean) => void; } diff --git a/apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx index cf1730736..422b9f858 100644 --- a/apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx @@ -79,7 +79,7 @@ export default async function CertificatesPage({ params }: CertificatesPageProps {x509Certificates.map((cert) => ( - + {cert.isError ? ( - @@ -253,7 +253,6 @@ const ContainerActionBarButton = (props: ContainerActionBarButtonProps) => { onClick={handleClickAsync} loading={isPending} variant="light" - radius="md" > {t(`${props.action}.label`)} diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.module.css b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.module.css index b439e7f4b..dbc035932 100644 --- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.module.css +++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.module.css @@ -4,28 +4,16 @@ overflow: hidden; padding: var(--mantine-spacing-xs); padding-left: calc(var(--mantine-spacing-xs) * 2); - - @mixin hover { - box-shadow: var(--mantine-shadow-md); - } - - &::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 6px; - background-image: linear-gradient(0, var(--mantine-color-blue-4), var(--mantine-color-blue-9)); - } + border-left: 1px solid var(--mantine-color-blue-6); + background-color: light-dark( + var(--mantine-color-blue-0), + color-mix(in oklch, var(--mantine-color-blue-9), transparent 85%) + ); @mixin rtl { padding-left: var(--mantine-spacing-xs); padding-right: calc(var(--mantine-spacing-xs) * 2); - - &::before { - left: unset; - right: 0; - } + border-left: none; + border-right: 1px solid var(--mantine-color-blue-6); } } diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.tsx index a8704e1b5..37ed66fe2 100644 --- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.tsx +++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card.tsx @@ -23,7 +23,6 @@ export function HeaderCard(props: HeaderCardProps) { - + + diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-tile/resource-tile.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-tile/resource-tile.tsx index d2405fcf7..17c922c90 100644 --- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-tile/resource-tile.tsx +++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-tile/resource-tile.tsx @@ -17,12 +17,7 @@ interface ResourceTileProps { export function ResourceTile(props: ResourceTileProps) { const t = useI18n(); return ( - + {props.label} diff --git a/apps/nextjs/src/app/[locale]/manage/tools/logs/level-selection.tsx b/apps/nextjs/src/app/[locale]/manage/tools/logs/level-selection.tsx index 71846ca02..243521471 100644 --- a/apps/nextjs/src/app/[locale]/manage/tools/logs/level-selection.tsx +++ b/apps/nextjs/src/app/[locale]/manage/tools/logs/level-selection.tsx @@ -2,12 +2,14 @@ import { Select } from "@mantine/core"; -import type { LogLevel } from "@homarr/core/infrastructure/logs/constants"; import { logLevelConfiguration, logLevels } from "@homarr/core/infrastructure/logs/constants"; +import type { LogLevel } from "@homarr/core/infrastructure/logs/constants"; import { useI18n } from "@homarr/translation/client"; import { useLogContext } from "./log-context"; +const levelByValue = Object.fromEntries(logLevels.map((logLevel) => [logLevel, logLevel])) as Record; + export const LogLevelSelection = () => { const { level, setLevel } = useLogContext(); const t = useI18n(); @@ -19,7 +21,12 @@ export const LogLevelSelection = () => { label: `${logLevelConfiguration[level].prefix} ${t(`log.level.option.${level}`)}`, }))} value={level} - onChange={(value) => setLevel(value as LogLevel)} + onChange={(value) => { + const nextLevel = value && levelByValue[value]; + if (nextLevel) { + setLevel(nextLevel); + } + }} checkIconPosition="right" /> ); diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_general-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_general-settings-form.tsx index 6d66d5abf..65cc91002 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_general-settings-form.tsx +++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_general-settings-form.tsx @@ -198,6 +198,10 @@ export const UserGeneralSettingsForm = ({ form.resetDirty(); }; + const firstDayOfWeekInputProps = form.getInputProps("firstDayOfWeek"); + const firstDayOfWeekOnChange = firstDayOfWeekInputProps.onChange as (value: number) => void; + const firstDayOfWeekValue = (firstDayOfWeekInputProps.value as number).toString(); + return ( @@ -281,10 +285,14 @@ export const UserGeneralSettingsForm = ({ {showLanguageSelector && } {tGeneral("item.firstDayOfWeek")} - + firstDayOfWeekOnChange(parseInt(nextValue, 10))} + > {FIRST_DAY_OPTIONS.map(({ value: dayValue, labelKey }) => ( - + ))} diff --git a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx index 22f4d1b88..0e0fce5b9 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx +++ b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx @@ -1,24 +1,22 @@ "use client"; import { useMemo } from "react"; -import { Anchor, Button, Group, Text, Title, Tooltip } from "@mantine/core"; +import { Anchor, Group, Text, Tooltip } from "@mantine/core"; import { IconCheck } 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 { useI18n, useScopedI18n } from "@homarr/translation/client"; +import { useI18n } from "@homarr/translation/client"; import { Link, UserAvatar } from "@homarr/ui"; import { useTranslatedMantineReactTable } from "@homarr/ui/hooks"; interface UserListComponentProps { initialUserList: RouterOutputs["user"]["getAll"]; - credentialsProviderEnabled: boolean; } -export const UserListComponent = ({ initialUserList, credentialsProviderEnabled }: UserListComponentProps) => { - const tUserList = useScopedI18n("management.page.user.list"); +export const UserListComponent = ({ initialUserList }: UserListComponentProps) => { const t = useI18n(); const { data, isLoading } = clientApi.user.getAll.useQuery(undefined, { initialData: initialUserList, @@ -69,21 +67,10 @@ export const UserListComponent = ({ initialUserList, credentialsProviderEnabled enableFullScreenToggle: false, layoutMode: "grid-no-grow", getRowId: (row) => row.id, - renderTopToolbarCustomActions: () => - credentialsProviderEnabled ? ( - - ) : null, state: { isLoading, }, }); - return ( - <> - {tUserList("title")} - - - ); + return ; }; diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx index fbaae76c7..f443ae585 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx +++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx @@ -149,7 +149,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC color={!generalForm.isValid() ? "red" : undefined} > - + - + - + @@ -198,20 +198,20 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC - + - + {generalForm.values.username} - + {t("step.completed.title")} diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.tsx index 24d003a84..675f3f435 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.tsx +++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.tsx @@ -25,7 +25,7 @@ export const StepperNavigationComponent = ({ }: StepperNavigationComponentProps) => { const t = useI18n(); return ( - + {!isComplete ? ( + ); +}; diff --git a/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx b/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx index 5fa1b5eff..4bc1eaff1 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx +++ b/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx @@ -1,7 +1,7 @@ "use client"; import { useCallback, useMemo } from "react"; -import { ActionIcon, Button, Title } from "@mantine/core"; +import { ActionIcon } from "@mantine/core"; import { IconTrash } from "@tabler/icons-react"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; @@ -10,8 +10,7 @@ import { MantineReactTable } from "mantine-react-table"; import type { RouterOutputs } from "@homarr/api"; import { clientApi } from "@homarr/api/client"; -import { useConfirmModal, useModalAction } from "@homarr/modals"; -import { InviteCreateModal } from "@homarr/modals-collection"; +import { useConfirmModal } from "@homarr/modals"; import { useScopedI18n } from "@homarr/translation/client"; import { useTranslatedMantineReactTable } from "@homarr/ui/hooks"; @@ -65,7 +64,6 @@ export const InviteListComponent = ({ initialInvites }: InviteListComponentProps enableFullScreenToggle: false, layoutMode: "grid-no-grow", getRowId: (row) => row.id, - renderTopToolbarCustomActions: RenderTopToolbarCustomActions, state: { isLoading, }, @@ -74,22 +72,7 @@ export const InviteListComponent = ({ initialInvites }: InviteListComponentProps }, }); - return ( - <> - {t("title")} - - - ); -}; - -const RenderTopToolbarCustomActions = () => { - const t = useScopedI18n("management.page.user.invite"); - const { openModal } = useModalAction(InviteCreateModal); - const handleNewInvite = useCallback(() => { - openModal(); - }, [openModal]); - - return ; + return ; }; const RenderRowActions = ({ row }: { row: MRT_Row }) => { diff --git a/apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx index f392e8282..cb5c0423c 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/users/invites/page.tsx @@ -3,8 +3,11 @@ import { notFound } from "next/navigation"; import { api } from "@homarr/api/server"; import { auth } from "@homarr/auth/next"; import { isProviderEnabled } from "@homarr/auth/server"; +import { getScopedI18n } from "@homarr/translation/server"; -import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb"; +import { ManageMobilePrimaryAction } from "~/components/manage/manage-mobile-primary-action"; +import { ManagePageLayout } from "~/components/manage/manage-page-layout"; +import { InviteCreateButton } from "./_components/invite-create-button"; import { InviteListComponent } from "./_components/invite-list"; export default async function InvitesOverviewPage() { @@ -17,11 +20,20 @@ export default async function InvitesOverviewPage() { return notFound(); } + const t = await getScopedI18n("management.page.user.invite"); const initialInvites = await api.invite.getAll(); + return ( - <> - + + + + } + floatingPrimaryAction + > - + ); } diff --git a/apps/nextjs/src/app/[locale]/manage/users/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/page.tsx index 94ae5c103..4059b9972 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/page.tsx +++ b/apps/nextjs/src/app/[locale]/manage/users/page.tsx @@ -4,8 +4,10 @@ import { api } from "@homarr/api/server"; import { auth } from "@homarr/auth/next"; import { isProviderEnabled } from "@homarr/auth/server"; import { getScopedI18n } from "@homarr/translation/server"; +import { Link } from "@homarr/ui"; -import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb"; +import { ManagePageLayout } from "~/components/manage/manage-page-layout"; +import { MobileAffixButton } from "~/components/manage/mobile-affix-button"; import { createMetaTitle } from "~/metadata"; import { UserListComponent } from "./_components/user-list"; @@ -27,13 +29,23 @@ export default async function UsersPage() { return notFound(); } + const t = await getScopedI18n("management.page.user"); const userList = await api.user.getAll(); const credentialsProviderEnabled = isProviderEnabled("credentials"); return ( - <> - - - + + {t("create.title")} + + ) : undefined + } + floatingPrimaryAction={credentialsProviderEnabled} + > + + ); } diff --git a/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx b/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx index cd8b67ea2..9bbc0ac93 100644 --- a/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx +++ b/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx @@ -99,7 +99,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie return ( <> - = 96 ? undefined : 4}> + = 96 ? undefined : 4}> {({ reset }) => ( - + - + {editMode ? : } - + diff --git a/apps/nextjs/src/components/board/items/actions/create-item.ts b/apps/nextjs/src/components/board/items/actions/create-item.ts index f71e5aed0..42b619364 100644 --- a/apps/nextjs/src/components/board/items/actions/create-item.ts +++ b/apps/nextjs/src/components/board/items/actions/create-item.ts @@ -8,12 +8,14 @@ import { getFirstEmptyPosition } from "./empty-position"; import { getSectionElements } from "./section-elements"; export interface CreateItemInput { + id?: string; kind: WidgetKind; options?: Record; + integrationIds?: string[]; } export const createItemCallback = - ({ kind, options = {} }: CreateItemInput) => + ({ id, kind, options = {}, integrationIds = [] }: CreateItemInput) => (previous: Board): Board => { const firstSection = previous.sections .filter((section): section is EmptySection => section.kind === "empty") @@ -23,11 +25,11 @@ export const createItemCallback = if (!firstSection) return previous; const widget = { - id: createId(), + id: id ?? createId(), kind, options, layouts: createItemLayouts(previous, firstSection), - integrationIds: [], + integrationIds, advancedOptions: { title: null, customCssClasses: [], diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx index d61d05902..a6f6514e0 100644 --- a/apps/nextjs/src/components/board/items/item-content.tsx +++ b/apps/nextjs/src/components/board/items/item-content.tsx @@ -42,7 +42,6 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => { item.advancedOptions.customCssClasses.join(" "), )} radius={board.itemRadius} - withBorder styles={{ root: { "--opacity": board.opacity / 100, diff --git a/apps/nextjs/src/components/board/items/item-menu.tsx b/apps/nextjs/src/components/board/items/item-menu.tsx index a7d870a28..3b79dafd6 100644 --- a/apps/nextjs/src/components/board/items/item-menu.tsx +++ b/apps/nextjs/src/components/board/items/item-menu.tsx @@ -105,9 +105,17 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP }; return ( - + - + diff --git a/apps/nextjs/src/components/board/items/item-select-modal.tsx b/apps/nextjs/src/components/board/items/item-select-modal.tsx index 5066f5539..23c9ddec6 100644 --- a/apps/nextjs/src/components/board/items/item-select-modal.tsx +++ b/apps/nextjs/src/components/board/items/item-select-modal.tsx @@ -2,20 +2,26 @@ import { useMemo, useState } from "react"; import { Avatar, Button, Card, Center, Grid, Group, Input, Stack, Text, Tooltip } from "@mantine/core"; import { IconSearch } from "@tabler/icons-react"; -import { objectEntries } from "@homarr/common"; +import { clientApi } from "@homarr/api/client"; +import { createId, objectEntries } from "@homarr/common"; import { getIconUrl, getIntegrationName } from "@homarr/definitions"; import type { IntegrationKind, WidgetKind } from "@homarr/definitions"; -import { createModal } from "@homarr/modals"; +import { createModal, useModalAction } from "@homarr/modals"; +import { useSettings } from "@homarr/settings"; import { useI18n } from "@homarr/translation/client"; import type { TablerIcon } from "@homarr/ui"; -import { widgetImports } from "@homarr/widgets"; +import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets"; +import { WidgetEditModal } from "@homarr/widgets/modals"; import { useItemActions } from "./item-actions"; export const ItemSelectModal = createModal(({ actions }) => { const [search, setSearch] = useState(""); const t = useI18n(); - const { createItem } = useItemActions(); + const { createItem, updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations } = useItemActions(); + const { openModal: openEditModal } = useModalAction(WidgetEditModal); + const { data: integrationData } = clientApi.integration.all.useQuery(); + const settings = useSettings(); const items = useMemo( () => @@ -40,8 +46,43 @@ export const ItemSelectModal = createModal(({ actions }) => { ); const handleAdd = (kind: WidgetKind) => { - createItem({ kind }); + const definition = widgetImports[kind].definition; + const hasIntegrationSupport = "supportedIntegrations" in definition; + + const matchingIntegrations = hasIntegrationSupport + ? (integrationData ?? []).filter((integration) => + (definition.supportedIntegrations as string[]).includes(integration.kind), + ) + : []; + + const integrationIds = matchingIntegrations.map((i) => i.id); + const itemId = createId(); + const defaultOptions = reduceWidgetOptionsWithDefaultValues(kind, settings); + + createItem({ id: itemId, kind, integrationIds }); actions.closeModal(); + + openEditModal( + { + kind, + value: { + advancedOptions: { title: null, customCssClasses: [], borderColor: "" }, + options: defaultOptions, + integrationIds, + }, + onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }) => { + updateItemOptions({ itemId, newOptions: options }); + updateItemAdvancedOptions({ itemId, newAdvancedOptions: advancedOptions }); + updateItemIntegrations({ itemId, newIntegrations: newIntegrationIds }); + }, + integrationData: matchingIntegrations, + integrationSupport: hasIntegrationSupport, + settings, + }, + { + title: (titleT) => `${titleT("item.edit.title")} - ${titleT(`widget.${kind}.name`)}`, + }, + ); }; return ( @@ -104,7 +145,7 @@ const WidgetItem = ({ - @@ -129,7 +170,7 @@ const SupportedIntegrations = ({ integrations, mt }: SupportedIntegrationsProps) return (
- + {integrations.slice(0, countToShow).map((integration) => ( diff --git a/apps/nextjs/src/components/board/sections/category-section.tsx b/apps/nextjs/src/components/board/sections/category-section.tsx index df204998b..4c3958859 100644 --- a/apps/nextjs/src/components/board/sections/category-section.tsx +++ b/apps/nextjs/src/components/board/sections/category-section.tsx @@ -3,6 +3,7 @@ import { useDisclosure } from "@mantine/hooks"; import { IconChevronDown, IconChevronUp } from "@tabler/icons-react"; import { clientApi } from "@homarr/api/client"; +import { useSession } from "@homarr/auth/client"; import { useRequiredBoard } from "@homarr/boards/context"; import type { CategorySection } from "~/app/[locale]/boards/_types"; @@ -10,30 +11,41 @@ import { CategoryMenu } from "./category/category-menu"; import { GridStack } from "./gridstack/gridstack"; import classes from "./item.module.css"; +const localStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`; + interface Props { section: CategorySection; } export const BoardCategorySection = ({ section }: Props) => { + const { status } = useSession(); const { mutate } = clientApi.section.changeCollapsed.useMutation(); const board = useRequiredBoard(); - const [opened, { toggle }] = useDisclosure(section.collapsed, { + + const initialCollapsed = + typeof window !== "undefined" + ? (localStorage.getItem(localStorageKey(section.id)) ?? String(section.collapsed)) === "true" + : section.collapsed; + + const [opened, { toggle }] = useDisclosure(initialCollapsed, { onOpen() { - mutate({ sectionId: section.id, collapsed: true }); + if (status === "authenticated") { + mutate({ sectionId: section.id, collapsed: true }); + } else if (status === "unauthenticated") { + localStorage.setItem(localStorageKey(section.id), "true"); + } }, onClose() { - mutate({ sectionId: section.id, collapsed: false }); + if (status === "authenticated") { + mutate({ sectionId: section.id, collapsed: false }); + } else if (status === "unauthenticated") { + localStorage.setItem(localStorageKey(section.id), "false"); + } }, }); return ( - + @@ -44,7 +56,7 @@ export const BoardCategorySection = ({ section }: Props) => { - + diff --git a/apps/nextjs/src/components/board/sections/category/category-menu.tsx b/apps/nextjs/src/components/board/sections/category/category-menu.tsx index 894db8949..9e3928198 100644 --- a/apps/nextjs/src/components/board/sections/category/category-menu.tsx +++ b/apps/nextjs/src/components/board/sections/category/category-menu.tsx @@ -30,9 +30,9 @@ export const CategoryMenu = ({ category }: Props) => { const t = useScopedI18n("section.category"); return ( - + - + diff --git a/apps/nextjs/src/components/board/sections/dynamic-section.tsx b/apps/nextjs/src/components/board/sections/dynamic-section.tsx index 39818c5de..8bb0a52c3 100644 --- a/apps/nextjs/src/components/board/sections/dynamic-section.tsx +++ b/apps/nextjs/src/components/board/sections/dynamic-section.tsx @@ -28,7 +28,6 @@ export const BoardDynamicSection = ({ section }: Props) => { className={combineClasses(classes.itemCard, section.options.customCssClasses.join(" "))} w="100%" h="100%" - withBorder styles={{ root: { overflow: "visible", diff --git a/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx b/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx index f73328024..cffc3446f 100644 --- a/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx +++ b/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx @@ -43,9 +43,17 @@ export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionIt }; return ( - + - + diff --git a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts index eda89a8e6..b5e468de6 100644 --- a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts +++ b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts @@ -1,6 +1,6 @@ -import type { RefObject } from "react"; +import type { Ref, RefObject } from "react"; import { createRef, useCallback, useEffect, useRef } from "react"; -import { useElementSize } from "@mantine/hooks"; +import { useElementSize, useMergedRef } from "@mantine/hooks"; import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context"; import { useEditMode } from "@homarr/boards/edit-mode"; @@ -13,7 +13,7 @@ import { useSectionActions } from "../section-actions"; import { initializeGridstack } from "./init-gridstack"; export interface UseGridstackRefs { - wrapper: RefObject; + wrapper: Ref; items: RefObject>>; gridstack: RefObject; } @@ -59,8 +59,9 @@ export const useGridstack = (section: Omit, itemIds: string[]) const { moveAndResizeItem, moveItemToSection } = useItemActions(); const { moveAndResizeInnerSection, moveInnerSectionToSection } = useSectionActions(); - // define reference for wrapper - is used to calculate the width of the wrapper - const { ref: wrapperRef, width, height } = useElementSize(); + const wrapperElementRef = useRef(null); + const { ref: measureWrapperRef, width, height } = useElementSize(); + const wrapperRef = useMergedRef(measureWrapperRef, wrapperElementRef); // references to the diffrent items contained in the gridstack const itemRefs = useRef>>({}); // reference of the gridstack object for modifications after initialization @@ -193,7 +194,7 @@ export const useGridstack = (section: Omit, itemIds: string[]) itemIds, refs: { items: itemRefs, - wrapper: wrapperRef, + wrapper: wrapperElementRef, gridstack: gridRef, }, sectionColumnCount: columnCount, @@ -276,7 +277,7 @@ export const useGridstack = (section: Omit, itemIds: string[]) useCssVariableConfiguration({ columnCount, gridRef, - wrapperRef, + wrapperRef: wrapperElementRef, width, height, isDynamic: section.kind === "dynamic", @@ -293,7 +294,7 @@ export const useGridstack = (section: Omit, itemIds: string[]) interface UseCssVariableConfiguration { gridRef: UseGridstackRefs["gridstack"]; - wrapperRef: UseGridstackRefs["wrapper"]; + wrapperRef: RefObject; width: number; height: number; columnCount: number; diff --git a/apps/nextjs/src/components/layout/background.tsx b/apps/nextjs/src/components/layout/background.tsx index c7011408a..70efc6b14 100644 --- a/apps/nextjs/src/components/layout/background.tsx +++ b/apps/nextjs/src/components/layout/background.tsx @@ -44,6 +44,7 @@ export const BoardBackgroundVideo = () => { muted loop playsInline + aria-hidden="true" style={{ position: "fixed", width: "100vw", diff --git a/apps/nextjs/src/components/layout/navigation-link.tsx b/apps/nextjs/src/components/layout/navigation-link.tsx index dd6949682..2d98d42ec 100644 --- a/apps/nextjs/src/components/layout/navigation-link.tsx +++ b/apps/nextjs/src/components/layout/navigation-link.tsx @@ -12,16 +12,7 @@ export const CommonNavLink = (props: ClientNavigationLink) => const NavLinkHref = (props: NavigationLinkHref) => { const pathname = usePathname(); return props.external ? ( - + ) : ( { leftSection={props.icon} href={props.href} active={pathname === props.href} - style={{ - borderRadius: 5, - }} /> ); }; @@ -40,14 +28,7 @@ const NavLinkWithItems = (props: NavigationLinkWithItems) => { const pathname = usePathname(); const isActive = props.items.some((item) => item.href === pathname); return ( - + {props.items.map((item) => ( ))} diff --git a/apps/nextjs/src/components/manage/danger-zone.tsx b/apps/nextjs/src/components/manage/danger-zone.tsx index 30bfb3e37..38f63185b 100644 --- a/apps/nextjs/src/components/manage/danger-zone.tsx +++ b/apps/nextjs/src/components/manage/danger-zone.tsx @@ -15,7 +15,7 @@ export const DangerZoneRoot = async ({ children }: DangerZoneRootProps) => { {t("common.dangerZone")} - + {Array.isArray(children) ? children.map((child, index) => ( diff --git a/apps/nextjs/src/components/manage/manage-mobile-primary-action.tsx b/apps/nextjs/src/components/manage/manage-mobile-primary-action.tsx new file mode 100644 index 000000000..40192e0f8 --- /dev/null +++ b/apps/nextjs/src/components/manage/manage-mobile-primary-action.tsx @@ -0,0 +1,15 @@ +import type { PropsWithChildren } from "react"; +import { Affix, Box } from "@mantine/core"; + +import { MANAGE_ACTION_BUTTON_MIN_WIDTH, MANAGE_AFFIX_POSITION } from "./manage-page.constants"; + +export const ManageMobilePrimaryAction = ({ children }: PropsWithChildren) => ( + <> + + {children} + + + {children} + + +); diff --git a/apps/nextjs/src/components/manage/manage-page-layout.tsx b/apps/nextjs/src/components/manage/manage-page-layout.tsx new file mode 100644 index 000000000..d8655c58c --- /dev/null +++ b/apps/nextjs/src/components/manage/manage-page-layout.tsx @@ -0,0 +1,44 @@ +import type { ReactNode } from "react"; +import type { MantineSize } from "@mantine/core"; +import { Group, Stack, Title } from "@mantine/core"; + +import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb"; +import { ManageContainer } from "./manage-container"; +import { MANAGE_FLOATING_ACTION_BOTTOM_OFFSET } from "./manage-page.constants"; + +interface ManagePageLayoutProps { + title: ReactNode; + primaryAction?: ReactNode; + toolbar?: ReactNode; + footer?: ReactNode; + floatingPrimaryAction?: boolean; + size?: MantineSize; + children: ReactNode; +} + +export const ManagePageLayout = ({ + title, + primaryAction, + toolbar, + footer, + floatingPrimaryAction, + size, + children, +}: ManagePageLayoutProps) => { + const titleNode = typeof title === "string" ? {title} : title; + + return ( + + + + + {titleNode} + {primaryAction} + + {toolbar} + {children} + {footer && {footer}} + + + ); +}; diff --git a/apps/nextjs/src/components/manage/manage-page.constants.ts b/apps/nextjs/src/components/manage/manage-page.constants.ts new file mode 100644 index 000000000..7b3a59884 --- /dev/null +++ b/apps/nextjs/src/components/manage/manage-page.constants.ts @@ -0,0 +1,5 @@ +export const MANAGE_AFFIX_POSITION = { bottom: 20, right: 20 } as const; + +export const MANAGE_FLOATING_ACTION_BOTTOM_OFFSET = 48; + +export const MANAGE_ACTION_BUTTON_MIN_WIDTH = 160; diff --git a/apps/nextjs/src/components/manage/mobile-affix-button.tsx b/apps/nextjs/src/components/manage/mobile-affix-button.tsx index abe4f017c..f711751de 100644 --- a/apps/nextjs/src/components/manage/mobile-affix-button.tsx +++ b/apps/nextjs/src/components/manage/mobile-affix-button.tsx @@ -2,13 +2,15 @@ import { forwardRef } from "react"; import type { ButtonProps } from "@mantine/core"; import { Affix, Button, createPolymorphicComponent } from "@mantine/core"; +import { MANAGE_ACTION_BUTTON_MIN_WIDTH, MANAGE_AFFIX_POSITION } from "./manage-page.constants"; + type MobileAffixButtonProps = Omit; export const MobileAffixButton = createPolymorphicComponent<"button", MobileAffixButtonProps>( forwardRef((props, ref) => ( <> - @@ -100,7 +100,7 @@ export const AppSelectModal = createModal(({ actions, inner {app.description ?? ""} - diff --git a/packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx b/packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx index f94bf8f24..d83b16fdd 100644 --- a/packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx +++ b/packages/modals-collection/src/docker/add-docker-app-to-homarr.tsx @@ -58,7 +58,7 @@ export const AddDockerAppToHomarrModal = createModal( }; return ( - + {innerProps.selectedContainers.map((container, index) => ( diff --git a/packages/modals-collection/src/search-engines/request-media-modal.tsx b/packages/modals-collection/src/search-engines/request-media-modal.tsx index efb92cf7a..89306f3af 100644 --- a/packages/modals-collection/src/search-engines/request-media-modal.tsx +++ b/packages/modals-collection/src/search-engines/request-media-modal.tsx @@ -83,15 +83,10 @@ export const RequestMediaModal = createModal(({ actions, return ( - + {data && ( - poster + poster {data.overview} diff --git a/packages/modals/eslint.config.js b/packages/modals/eslint.config.js deleted file mode 100644 index 1df6129af..000000000 --- a/packages/modals/eslint.config.js +++ /dev/null @@ -1,5 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; -import reactConfig from "@homarr/eslint-config/react"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig, ...reactConfig]; diff --git a/packages/modals/package.json b/packages/modals/package.json index 8387be196..c4266cc78 100644 --- a/packages/modals/package.json +++ b/packages/modals/package.json @@ -4,9 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts" - }, "typesVersions": { "*": { "*": [ @@ -14,13 +11,15 @@ ] } }, + "exports": { + ".": "./index.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/translation": "workspace:^0.1.0", "@homarr/ui": "workspace:^0.1.0", @@ -29,10 +28,7 @@ "react": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/notifications/eslint.config.js b/packages/notifications/eslint.config.js deleted file mode 100644 index f7a5a7d36..000000000 --- a/packages/notifications/eslint.config.js +++ /dev/null @@ -1,4 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig]; diff --git a/packages/notifications/package.json b/packages/notifications/package.json index 2409be83a..2e0dd5cee 100644 --- a/packages/notifications/package.json +++ b/packages/notifications/package.json @@ -4,10 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts", - "./styles.css": "./src/styles.css" - }, "typesVersions": { "*": { "*": [ @@ -15,23 +11,23 @@ ] } }, + "exports": { + ".": "./index.ts", + "./styles.css": "./src/styles.css" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/ui": "workspace:^0.1.0", "@mantine/notifications": "catalog:", "@tabler/icons-react": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/old-import/eslint.config.js b/packages/old-import/eslint.config.js deleted file mode 100644 index 5b19b6f8a..000000000 --- a/packages/old-import/eslint.config.js +++ /dev/null @@ -1,9 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [ - { - ignores: [], - }, - ...baseConfig, -]; diff --git a/packages/old-import/package.json b/packages/old-import/package.json index 4f60fcad2..af34228f0 100644 --- a/packages/old-import/package.json +++ b/packages/old-import/package.json @@ -4,13 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts", - "./analyse": "./src/analyse/index.ts", - "./components": "./src/components/index.ts", - "./import": "./src/import/index.ts", - "./shared": "./src/shared.ts" - }, "typesVersions": { "*": { "*": [ @@ -18,13 +11,19 @@ ] } }, + "exports": { + ".": "./index.ts", + "./analyse": "./src/analyse/index.ts", + "./components": "./src/components/index.ts", + "./import": "./src/import/index.ts", + "./shared": "./src/shared.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/common": "workspace:^0.1.0", "@homarr/core": "workspace:^0.1.0", @@ -48,11 +47,8 @@ "zod-form-data": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", "@types/adm-zip": "catalog:", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/old-import/src/components/initial/board-selection-card.tsx b/packages/old-import/src/components/initial/board-selection-card.tsx index 294e68885..4665ec2cd 100644 --- a/packages/old-import/src/components/initial/board-selection-card.tsx +++ b/packages/old-import/src/components/initial/board-selection-card.tsx @@ -38,7 +38,7 @@ export const BoardSelectionCard = ({ selections, updateSelections }: BoardSelect } return ( - + @@ -57,7 +57,7 @@ export const BoardSelectionCard = ({ selections, updateSelections }: BoardSelect {[...selections.entries()].map(([name, selected]) => ( - + { const tImportSettings = useScopedI18n("init.step.import.importSettings"); return ( - + {tImportSettings("title")} diff --git a/packages/old-import/src/components/initial/import-summary-card.tsx b/packages/old-import/src/components/initial/import-summary-card.tsx index 876d1f43c..9993b3ac2 100644 --- a/packages/old-import/src/components/initial/import-summary-card.tsx +++ b/packages/old-import/src/components/initial/import-summary-card.tsx @@ -13,7 +13,7 @@ interface ImportSummaryCardProps { export const ImportSummaryCard = ({ counts, onSubmit, loading }: ImportSummaryCardProps) => { const tSummary = useScopedI18n("init.step.import.summary"); return ( - + {tSummary("title")} @@ -24,7 +24,7 @@ export const ImportSummaryCard = ({ counts, onSubmit, loading }: ImportSummaryCa {objectEntries(counts).map(([key, count]) => ( - + {tSummary(`entities.${key}`)} diff --git a/packages/old-schema/eslint.config.js b/packages/old-schema/eslint.config.js deleted file mode 100644 index 5b19b6f8a..000000000 --- a/packages/old-schema/eslint.config.js +++ /dev/null @@ -1,9 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [ - { - ignores: [], - }, - ...baseConfig, -]; diff --git a/packages/old-schema/package.json b/packages/old-schema/package.json index 9db60a184..f01667cfd 100644 --- a/packages/old-schema/package.json +++ b/packages/old-schema/package.json @@ -4,9 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts" - }, "typesVersions": { "*": { "*": [ @@ -14,22 +11,21 @@ ] } }, + "exports": { + ".": "./index.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/common": "workspace:^0.1.0", "zod": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/ping/eslint.config.js b/packages/ping/eslint.config.js deleted file mode 100644 index f7a5a7d36..000000000 --- a/packages/ping/eslint.config.js +++ /dev/null @@ -1,4 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig]; diff --git a/packages/ping/package.json b/packages/ping/package.json index 6f0a9e6df..02cc73a6a 100644 --- a/packages/ping/package.json +++ b/packages/ping/package.json @@ -4,9 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts" - }, "typesVersions": { "*": { "*": [ @@ -14,22 +11,21 @@ ] } }, + "exports": { + ".": "./index.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/common": "workspace:^0.1.0", "@homarr/core": "workspace:^0.1.0" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/redis/eslint.config.js b/packages/redis/eslint.config.js deleted file mode 100644 index f7a5a7d36..000000000 --- a/packages/redis/eslint.config.js +++ /dev/null @@ -1,4 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig]; diff --git a/packages/redis/package.json b/packages/redis/package.json index 6a5d14a38..bb514a27c 100644 --- a/packages/redis/package.json +++ b/packages/redis/package.json @@ -4,9 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts" - }, "typesVersions": { "*": { "*": [ @@ -14,13 +11,15 @@ ] } }, + "exports": { + ".": "./index.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/common": "workspace:^", "@homarr/core": "workspace:^", @@ -30,10 +29,7 @@ "superjson": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/request-handler/eslint.config.js b/packages/request-handler/eslint.config.js deleted file mode 100644 index 5b19b6f8a..000000000 --- a/packages/request-handler/eslint.config.js +++ /dev/null @@ -1,9 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [ - { - ignores: [], - }, - ...baseConfig, -]; diff --git a/packages/request-handler/package.json b/packages/request-handler/package.json index 5504d6031..dcca79f09 100644 --- a/packages/request-handler/package.json +++ b/packages/request-handler/package.json @@ -4,9 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - "./*": "./src/*.ts" - }, "typesVersions": { "*": { "*": [ @@ -14,13 +11,15 @@ ] } }, + "exports": { + "./*": "./src/*.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@extractus/feed-extractor": "catalog:", "@homarr/common": "workspace:^0.1.0", @@ -37,10 +36,7 @@ "zod": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/request-handler/src/docker.ts b/packages/request-handler/src/docker.ts index 6610aba7e..a31eed56c 100644 --- a/packages/request-handler/src/docker.ts +++ b/packages/request-handler/src/docker.ts @@ -2,6 +2,7 @@ import dayjs from "dayjs"; import type { ContainerInfo, ContainerStats } from "dockerode"; import type Dockerode from "dockerode"; +import { bestMatch } from "@homarr/common"; import { createLogger } from "@homarr/core/infrastructure/logs"; import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error"; import { db, like, or } from "@homarr/db"; @@ -82,12 +83,7 @@ async function getContainersWithStatsAsync() { name: container.Names[0]?.split("/")[1] ?? "Unknown", host: container.instance, state: container.State as ContainerState, - iconUrl: - dbIcons.find((icon) => { - const extractedImage = extractImage(container); - if (!extractedImage) return false; - return icon.name.toLowerCase().includes(extractedImage.toLowerCase()); - })?.url ?? null, + iconUrl: bestMatch(extractImage(container), dbIcons, (icon) => icon.name)?.url ?? null, cpuUsage, memoryUsage, image: container.Image, diff --git a/packages/server-settings/eslint.config.js b/packages/server-settings/eslint.config.js deleted file mode 100644 index f7a5a7d36..000000000 --- a/packages/server-settings/eslint.config.js +++ /dev/null @@ -1,4 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig]; diff --git a/packages/server-settings/package.json b/packages/server-settings/package.json index 494bc2a91..24b682229 100644 --- a/packages/server-settings/package.json +++ b/packages/server-settings/package.json @@ -4,9 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts" - }, "typesVersions": { "*": { "*": [ @@ -14,22 +11,21 @@ ] } }, + "exports": { + ".": "./index.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/definitions": "workspace:^0.1.0", "@homarr/translation": "workspace:^0.1.0" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/settings/eslint.config.js b/packages/settings/eslint.config.js deleted file mode 100644 index 5b19b6f8a..000000000 --- a/packages/settings/eslint.config.js +++ /dev/null @@ -1,9 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [ - { - ignores: [], - }, - ...baseConfig, -]; diff --git a/packages/settings/package.json b/packages/settings/package.json index ab2e62a2e..93f0a554e 100644 --- a/packages/settings/package.json +++ b/packages/settings/package.json @@ -4,10 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts", - "./creator": "./src/creator.ts" - }, "typesVersions": { "*": { "*": [ @@ -15,13 +11,16 @@ ] } }, + "exports": { + ".": "./index.ts", + "./creator": "./src/creator.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/db": "workspace:^0.1.0", "@homarr/server-settings": "workspace:^0.1.0", @@ -31,10 +30,7 @@ "react-dom": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/spotlight/eslint.config.js b/packages/spotlight/eslint.config.js deleted file mode 100644 index 1df6129af..000000000 --- a/packages/spotlight/eslint.config.js +++ /dev/null @@ -1,5 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; -import reactConfig from "@homarr/eslint-config/react"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig, ...reactConfig]; diff --git a/packages/spotlight/package.json b/packages/spotlight/package.json index c7903ee49..a3a36a3da 100644 --- a/packages/spotlight/package.json +++ b/packages/spotlight/package.json @@ -4,10 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts", - "./styles.css": "./src/styles.css" - }, "typesVersions": { "*": { "*": [ @@ -15,13 +11,16 @@ ] } }, + "exports": { + ".": "./index.ts", + "./styles.css": "./src/styles.css" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/api": "workspace:^0.1.0", "@homarr/auth": "workspace:^0.1.0", @@ -44,10 +43,7 @@ "use-deep-compare-effect": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/spotlight/src/components/spotlight.tsx b/packages/spotlight/src/components/spotlight.tsx index c90542f45..4ca086f3b 100644 --- a/packages/spotlight/src/components/spotlight.tsx +++ b/packages/spotlight/src/components/spotlight.tsx @@ -110,6 +110,7 @@ const SpotlightWithActiveMode = ({ modeState, queryState, activeMode }: Spotligh inputRef.current?.focus(); }} variant="subtle" + aria-label={t("common.action.close")} > diff --git a/packages/translation/eslint.config.js b/packages/translation/eslint.config.js deleted file mode 100644 index f7a5a7d36..000000000 --- a/packages/translation/eslint.config.js +++ /dev/null @@ -1,4 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig]; diff --git a/packages/translation/package.json b/packages/translation/package.json index e8e42b749..8fab918f3 100644 --- a/packages/translation/package.json +++ b/packages/translation/package.json @@ -4,6 +4,13 @@ "private": true, "license": "Apache-2.0", "type": "module", + "typesVersions": { + "*": { + "*": [ + "src/*" + ] + } + }, "exports": { ".": "./index.ts", "./client": "./src/client/index.ts", @@ -12,20 +19,12 @@ "./request": "./src/request.ts", "./dayjs": "./src/dayjs.ts" }, - "typesVersions": { - "*": { - "*": [ - "src/*" - ] - } - }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/common": "workspace:^0.1.0", "@homarr/definitions": "workspace:^0.1.0", @@ -38,10 +37,7 @@ "react-dom": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 29e86458e..a62728845 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -1054,6 +1054,9 @@ "open": { "label": "Open media" } + }, + "noResults": { + "title": "No media uploaded" } }, "common": { @@ -1084,7 +1087,9 @@ "checkoutDocs": "Check out the documentation", "checkLogs": "Check logs for more details", "tryAgain": "Try again", - "loading": "Loading" + "loading": "Loading", + "show": "Show", + "hide": "Hide" }, "here": "here", "iconPicker": { @@ -1249,7 +1254,8 @@ "menu": { "label": { "create": "New category", - "changePosition": "Change position" + "changePosition": "Change position", + "settings": "Settings" } }, "openAllInNewTabs": { @@ -3452,6 +3458,9 @@ "public": "This board is public", "private": "This board is private" }, + "noResults": { + "title": "No boards yet" + }, "modal": { "createBoard": { "field": { diff --git a/packages/translation/src/lang/pt-br.json b/packages/translation/src/lang/pt-br.json index 0e130afac..d013c5100 100644 --- a/packages/translation/src/lang/pt-br.json +++ b/packages/translation/src/lang/pt-br.json @@ -159,7 +159,7 @@ "label": "Abrir resultados da busca em uma nova guia" }, "ddgBangs": { - "label": "" + "label": "Ativar bangs do DuckDuckGo" } }, "error": { @@ -252,10 +252,10 @@ "changeDdgBangs": { "notification": { "success": { - "message": "" + "message": "Bangs do DuckDuckGo alternados com sucesso" }, "error": { - "message": "" + "message": "Não foi possível alternar os bangs do DuckDuckGo" } } }, @@ -1093,7 +1093,7 @@ }, "colorScheme": { "options": { - "auto": "", + "auto": "Automático", "light": "Claro", "dark": "Escuro" } @@ -2111,101 +2111,101 @@ } }, "umami": { - "name": "", - "description": "", - "visitors": "", - "active": "", - "pageviews": "", - "visits": "", - "bounceRate": "", - "avgDuration": "", + "name": "Umami Analytics", + "description": "Exibir estatísticas de visitantes da sua instância do Umami", + "visitors": "visitantes", + "active": "ativos", + "pageviews": "visualizações de página", + "visits": "visitas", + "bounceRate": "rejeição", + "avgDuration": "média", "option": { "websiteId": { - "label": "", - "description": "", - "placeholder": "", - "loading": "", - "noWebsites": "", - "configureIntegrationFirst": "" + "label": "site", + "description": "Selecione um site monitorado pela sua instância do Umami", + "placeholder": "Selecionar um site", + "loading": "Carregando sites...", + "noWebsites": "Nenhum site encontrado", + "configureIntegrationFirst": "Conecte uma integração do Umami primeiro" }, "timeFrame": { - "label": "", - "description": "", + "label": "Período de tempo", + "description": "O período de tempo para exibir os dados de visitantes", "option": { - "today": "", - "24h": "", - "7d": "", - "30d": "", - "month": "", - "lastMonth": "" + "today": "Hoje", + "24h": "Últimas 24 horas", + "7d": "Últimos 7 dias", + "30d": "Últimos 30 dias", + "month": "Este mês", + "lastMonth": "Mês passado" } }, "eventName": { - "label": "", - "description": "", - "placeholder": "", - "loading": "", - "noEvents": "", - "none": "", - "configureWebsiteFirst": "" + "label": "Evento", + "description": "Exibir total de ocorrências de um evento específico", + "placeholder": "Selecionar um evento", + "loading": "Carregando eventos...", + "noEvents": "Nenhum evento encontrado", + "none": "Nenhum evento", + "configureWebsiteFirst": "Selecione um site primeiro para carregar os eventos" }, "chartType": { - "label": "", - "description": "", + "label": "Tipo de gráfico", + "description": "Estilo de exibição do gráfico", "option": { - "bar": "", - "sparkline": "" + "bar": "Gráfico de barras", + "sparkline": "Sparkline" } }, "chartStyle": { - "label": "", - "description": "", + "label": "Estilo do gráfico", + "description": "Como exibir a série de eventos no gráfico", "option": { - "grouped": "", - "overlay": "" + "grouped": "Lado a lado", + "overlay": "Sobreposição (subconjunto)" } }, "viewMode": { - "label": "", - "description": "", + "label": "Visualização", + "description": "O que exibir no corpo do widget", "option": { - "chart": "", - "events": "", - "topPages": "", - "topReferrers": "" + "chart": "Gráfico", + "events": "Gráfico de eventos", + "topPages": "Principais páginas", + "topReferrers": "Principais referenciadores" } }, "eventNames": { - "label": "", - "description": "", - "placeholder": "", - "loading": "", - "noEvents": "", - "configureWebsiteFirst": "" + "label": "Eventos", + "description": "Selecione um ou mais eventos para o gráfico", + "placeholder": "Selecionar eventos...", + "loading": "Carregando eventos...", + "noEvents": "Nenhum evento encontrado", + "configureWebsiteFirst": "Selecione um site primeiro para carregar os eventos" }, "topCount": { - "label": "", - "description": "" + "label": "Itens para exibir", + "description": "Número de itens principais para exibir (máx 500)" } }, "event": { - "occurrences": "", - "label": "" + "occurrences": "Eventos", + "label": "Eventos" }, "topPages": { - "direct": "" + "direct": "Direto" }, "topReferrers": { - "direct": "" + "direct": "Direto" }, "events": { - "selectPrompt": "" + "selectPrompt": "Selecionar eventos para o gráfico" }, "error": { - "noIntegration": "", - "noWebsite": "", - "noData": "", - "internalServerError": "" + "noIntegration": "Nenhuma integração Umami configurada", + "noWebsite": "Nenhum site configurado", + "noData": "Nenhum dado disponível", + "internalServerError": "Falha ao buscar dados do Umami" } }, "common": { @@ -3680,7 +3680,7 @@ "defaultColorScheme": { "label": "Esquema de cores padrão", "options": { - "auto": "", + "auto": "Automático", "light": "Claro", "dark": "Escuro" } @@ -3783,7 +3783,7 @@ "label": "Tracearr" }, "umamiActiveVisitors": { - "label": "" + "label": "Visitantes Ativos do Umami" } }, "interval": { @@ -3972,7 +3972,7 @@ "label": "Portas" }, "host": { - "label": "" + "label": "Host" } }, "action": { @@ -4499,7 +4499,7 @@ "title": "Comandos globais", "option": { "colorScheme": { - "auto": "", + "auto": "Alternar modo de aparência", "light": "Alternar para o modo claro", "dark": "Alternar para o modo escuro" }, @@ -4551,13 +4551,13 @@ "group": { "searchEngine": { "title": "Mecanismos de busca", - "tipDdgBangs": "", + "tipDdgBangs": "Dica: Você também pode usar qualquer bang do DuckDuckGo aqui, ex: !something", "bang": { - "searchWithQuery": "", - "pressEnterToOpen": "", - "engineSelected": "", - "typeQueryToContinue": "", - "emptyBangHint": "" + "searchWithQuery": "Pesquisar \"{query}\" com {label}", + "pressEnterToOpen": "Pressione Enter para abrir", + "engineSelected": "{label} selecionado (!{bang})", + "typeQueryToContinue": "Digite sua pesquisa para continuar", + "emptyBangHint": "Digite um bang, ex: !yt, e pressione Espaço para selecionar" }, "children": { "action": { diff --git a/packages/ui/eslint.config.js b/packages/ui/eslint.config.js deleted file mode 100644 index 1df6129af..000000000 --- a/packages/ui/eslint.config.js +++ /dev/null @@ -1,5 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; -import reactConfig from "@homarr/eslint-config/react"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig, ...reactConfig]; diff --git a/packages/ui/package.json b/packages/ui/package.json index a781debfd..9956f7fee 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -4,12 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts", - "./styles.css": "./src/styles.css", - "./hooks": "./src/hooks/index.ts", - "./icons": "./src/icons/index.ts" - }, "typesVersions": { "*": { "*": [ @@ -17,13 +11,18 @@ ] } }, + "exports": { + ".": "./index.ts", + "./styles.css": "./src/styles.css", + "./hooks": "./src/hooks/index.ts", + "./icons": "./src/icons/index.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/common": "workspace:^0.1.0", "@homarr/definitions": "workspace:^0.1.0", @@ -42,12 +41,9 @@ "svgson": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", "@types/crypto-js": "catalog:", "@types/css-modules": "catalog:", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/ui/src/components/user-avatar-group.tsx b/packages/ui/src/components/user-avatar-group.tsx index 1aa2fbf6b..f014987e1 100644 --- a/packages/ui/src/components/user-avatar-group.tsx +++ b/packages/ui/src/components/user-avatar-group.tsx @@ -12,7 +12,7 @@ interface UserAvatarGroupProps { export const UserAvatarGroup = ({ size, limit, users }: UserAvatarGroupProps) => { return ( - + {users.slice(0, limit).map((user) => ( diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 2a4bb91a1..364f7a394 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -2,6 +2,7 @@ import type { MantineProviderProps } from "@mantine/core"; import { theme } from "./theme"; +export { theme } from "./theme"; export * from "./components"; export const uiConfiguration = { diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts index e1e928d57..9aea93dbf 100644 --- a/packages/ui/src/theme.ts +++ b/packages/ui/src/theme.ts @@ -1,12 +1,103 @@ -import { createTheme } from "@mantine/core"; - -import { primaryColor } from "./theme/colors/primary"; -import { secondaryColor } from "./theme/colors/secondary"; +import { createTheme, rem } from "@mantine/core"; export const theme = createTheme({ - colors: { - primaryColor, - secondaryColor, + primaryColor: "red", + autoContrast: true, + respectReducedMotion: true, + cursorType: "pointer", + + fontFamily: "Inter, system-ui, -apple-system, sans-serif", + fontFamilyMonospace: "ui-monospace, 'Cascadia Code', 'Fira Code', monospace", + + headings: { + fontFamily: "Inter, system-ui, -apple-system, sans-serif", + fontWeight: "600", + sizes: { + h1: { fontSize: rem(36), lineHeight: "1.1", fontWeight: "700" }, + h2: { fontSize: rem(24), lineHeight: "1.2", fontWeight: "700" }, + h3: { fontSize: rem(20), lineHeight: "1.3", fontWeight: "600" }, + h4: { fontSize: rem(16), lineHeight: "1.4", fontWeight: "600" }, + h5: { fontSize: rem(14), lineHeight: "1.5", fontWeight: "600" }, + h6: { fontSize: rem(12), lineHeight: "1.5", fontWeight: "600" }, + }, + }, + + fontSizes: { + xs: rem(12), + sm: rem(14), + md: rem(16), + lg: rem(18), + xl: rem(20), + }, + + spacing: { + xs: rem(10), + sm: rem(12), + md: rem(16), + lg: rem(20), + xl: rem(32), + }, + + radius: { + xs: rem(4), + sm: rem(4), + md: rem(8), + lg: rem(12), + xl: rem(16), + }, + defaultRadius: "md", + + shadows: { + xs: "0 1px 2px rgba(0, 0, 0, 0.04)", + sm: "0 1px 3px rgba(0, 0, 0, 0.06)", + md: "0 2px 8px rgba(0, 0, 0, 0.08)", + lg: "0 4px 12px rgba(0, 0, 0, 0.10)", + xl: "0 8px 24px rgba(0, 0, 0, 0.12)", + }, + + components: { + Card: { + defaultProps: { + withBorder: true, + radius: "lg", + }, + }, + Paper: { + defaultProps: { + withBorder: true, + radius: "md", + }, + }, + Button: { + defaultProps: { + radius: "md", + }, + }, + ActionIcon: { + defaultProps: { + radius: "md", + }, + }, + Tooltip: { + defaultProps: { + openDelay: 300, + }, + }, + Menu: { + defaultProps: { + withArrow: true, + }, + }, + NavLink: { + defaultProps: { + style: { borderRadius: 5 }, + }, + }, + LoadingOverlay: { + defaultProps: { + zIndex: 1000, + overlayProps: { radius: "sm", blur: 2 }, + }, + }, }, - primaryColor: "primaryColor", }); diff --git a/packages/ui/src/theme/colors/primary.ts b/packages/ui/src/theme/colors/primary.ts deleted file mode 100644 index 3bb5ef987..000000000 --- a/packages/ui/src/theme/colors/primary.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { MantineColorsTuple } from "@mantine/core"; - -export const primaryColor: MantineColorsTuple = [ - "#eafbf0", - "#ddefe3", - "#bedcc7", - "#9bc8aa", - "#7eb892", - "#6bad81", - "#60a878", - "#509265", - "#438359", - "#35724a", -]; diff --git a/packages/ui/src/theme/colors/secondary.ts b/packages/ui/src/theme/colors/secondary.ts deleted file mode 100644 index c3a10a691..000000000 --- a/packages/ui/src/theme/colors/secondary.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { MantineColorsTuple } from "@mantine/core"; - -export const secondaryColor: MantineColorsTuple = [ - "#e6f7ff", - "#d9e8f6", - "#b6cde6", - "#90b2d4", - "#6f9ac5", - "#5a8bbd", - "#4d84ba", - "#3d71a4", - "#326595", - "#205885", -]; diff --git a/packages/validation/eslint.config.js b/packages/validation/eslint.config.js deleted file mode 100644 index f7a5a7d36..000000000 --- a/packages/validation/eslint.config.js +++ /dev/null @@ -1,4 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig]; diff --git a/packages/validation/package.json b/packages/validation/package.json index 8cde9c838..db36ea5dc 100644 --- a/packages/validation/package.json +++ b/packages/validation/package.json @@ -4,9 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - "./*": "./src/*.ts" - }, "typesVersions": { "*": { "*": [ @@ -14,13 +11,15 @@ ] } }, + "exports": { + "./*": "./src/*.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@homarr/definitions": "workspace:^0.1.0", "@homarr/translation": "workspace:^0.1.0", @@ -28,10 +27,7 @@ "zod-form-data": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/widgets/eslint.config.js b/packages/widgets/eslint.config.js deleted file mode 100644 index 1df6129af..000000000 --- a/packages/widgets/eslint.config.js +++ /dev/null @@ -1,5 +0,0 @@ -import baseConfig from "@homarr/eslint-config/base"; -import reactConfig from "@homarr/eslint-config/react"; - -/** @type {import('typescript-eslint').Config} */ -export default [...baseConfig, ...reactConfig]; diff --git a/packages/widgets/package.json b/packages/widgets/package.json index 4ee4834f8..8b8444b3d 100644 --- a/packages/widgets/package.json +++ b/packages/widgets/package.json @@ -4,12 +4,6 @@ "private": true, "license": "Apache-2.0", "type": "module", - "exports": { - ".": "./index.ts", - "./errors": "./src/errors/component.tsx", - "./modals": "./src/modals/index.ts", - "./prefetch": "./src/prefetch.ts" - }, "typesVersions": { "*": { "*": [ @@ -17,13 +11,18 @@ ] } }, + "exports": { + ".": "./index.ts", + "./errors": "./src/errors/component.tsx", + "./modals": "./src/modals/index.ts", + "./prefetch": "./src/prefetch.ts" + }, "scripts": { "clean": "rm -rf .turbo node_modules", - "format": "prettier --check . --ignore-path ../../.gitignore", - "lint": "eslint", + "format": "oxfmt --check .", + "lint": "oxlint", "typecheck": "tsc --noEmit" }, - "prettier": "@homarr/prettier-config", "dependencies": { "@dnd-kit/core": "catalog:", "@dnd-kit/sortable": "catalog:", @@ -50,6 +49,7 @@ "@homarr/validation": "workspace:^0.1.0", "@mantine/charts": "catalog:", "@mantine/core": "catalog:", + "@mantine/form": "catalog:", "@mantine/hooks": "catalog:", "@tabler/icons-react": "catalog:", "@tiptap/extension-color": "catalog:", @@ -70,7 +70,6 @@ "@tiptap/starter-kit": "catalog:", "clsx": "catalog:", "dayjs": "catalog:", - "mantine-form-zod-resolver": "catalog:", "mantine-react-table": "catalog:", "next": "catalog:", "react": "catalog:", @@ -82,11 +81,8 @@ "zod": "catalog:" }, "devDependencies": { - "@homarr/eslint-config": "workspace:^0.2.0", - "@homarr/prettier-config": "workspace:^0.1.0", "@homarr/tsconfig": "workspace:^0.1.0", "@types/video.js": "catalog:", - "eslint": "catalog:", "typescript": "catalog:" } } diff --git a/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx b/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx index 39b70b325..de8ef5021 100644 --- a/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx +++ b/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx @@ -25,9 +25,22 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg const [search, setSearch] = useState(""); const [debouncedSearch] = useDebouncedValue(search, 300); const { isPending, options: selectOptions } = options.useOptions(debouncedSearch, form.values.integrationIds); - const value = inputProps.value as DynamicSelectOption | null; + const currentOption = inputProps.value as DynamicSelectOption | null; const onChange = inputProps.onChange as (value: DynamicSelectOption | null) => void; + const getLabelForValue = (selectedValue: string) => { + const matched = selectOptions.find((option) => + typeof option === "string" ? option === selectedValue : option.value === selectedValue, + ); + if (!matched) { + return selectedValue; + } + if (typeof matched === "string") { + return matched; + } + return translateIfNecessary(t, matched.label) ?? selectedValue; + }; + return (