diff --git a/apps/client/package.json b/apps/client/package.json index 9abc7c64..e8001c31 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -16,12 +16,12 @@ "@emoji-mart/data": "^1.2.1", "@emoji-mart/react": "^1.1.1", "@excalidraw/excalidraw": "0.18.0-864353b", - "@mantine/core": "^7.17.0", - "@mantine/form": "^7.17.0", - "@mantine/hooks": "^7.17.0", - "@mantine/modals": "^7.17.0", - "@mantine/notifications": "^7.17.0", - "@mantine/spotlight": "^7.17.0", + "@mantine/core": "^8.1.3", + "@mantine/form": "^8.1.3", + "@mantine/hooks": "^8.1.3", + "@mantine/modals": "^8.1.3", + "@mantine/notifications": "^8.1.3", + "@mantine/spotlight": "^8.1.3", "@tabler/icons-react": "^3.34.0", "@tanstack/react-query": "^5.80.6", "@tiptap/extension-character-count": "^2.10.3", diff --git a/apps/client/src/components/layouts/global/top-menu.tsx b/apps/client/src/components/layouts/global/top-menu.tsx index 52cabb5a..d3a89ecc 100644 --- a/apps/client/src/components/layouts/global/top-menu.tsx +++ b/apps/client/src/components/layouts/global/top-menu.tsx @@ -1,9 +1,21 @@ -import { Group, Menu, UnstyledButton, Text } from "@mantine/core"; import { + Group, + Menu, + UnstyledButton, + Text, + useMantineColorScheme, +} from "@mantine/core"; +import { + IconBrightnessFilled, IconBrush, + IconCheck, IconChevronDown, + IconChevronRight, + IconDeviceDesktop, IconLogout, + IconMoon, IconSettings, + IconSun, IconUserCircle, IconUsers, } from "@tabler/icons-react"; @@ -19,6 +31,7 @@ export default function TopMenu() { const { t } = useTranslation(); const [currentUser] = useAtom(currentUserAtom); const { logout } = useAuth(); + const { colorScheme, setColorScheme } = useMantineColorScheme(); const user = currentUser?.user; const workspace = currentUser?.workspace; @@ -75,7 +88,7 @@ export default function TopMenu() { name={user.name} /> -
+
{user.name} @@ -101,6 +114,44 @@ export default function TopMenu() { {t("My preferences")} + + + }> + {t("Theme")} + + + + + setColorScheme("light")} + leftSection={} + rightSection={ + colorScheme === "light" ? : null + } + > + {t("Light")} + + setColorScheme("dark")} + leftSection={} + rightSection={ + colorScheme === "dark" ? : null + } + > + {t("Dark")} + + setColorScheme("auto")} + leftSection={} + rightSection={ + colorScheme === "auto" ? : null + } + > + {t("System settings")} + + + + }> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b8c0c88c..5c38d553 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -222,23 +222,23 @@ importers: specifier: 0.18.0-864353b version: 0.18.0-864353b(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mantine/core': - specifier: ^7.17.0 - version: 7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^8.1.3 + version: 8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mantine/form': - specifier: ^7.17.0 - version: 7.17.0(react@18.3.1) + specifier: ^8.1.3 + version: 8.1.3(react@18.3.1) '@mantine/hooks': - specifier: ^7.17.0 - version: 7.17.0(react@18.3.1) + specifier: ^8.1.3 + version: 8.1.3(react@18.3.1) '@mantine/modals': - specifier: ^7.17.0 - version: 7.17.0(@mantine/core@7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.17.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^8.1.3 + version: 8.1.3(@mantine/core@8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.1.3(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mantine/notifications': - specifier: ^7.17.0 - version: 7.17.0(@mantine/core@7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.17.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^8.1.3 + version: 8.1.3(@mantine/core@8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.1.3(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mantine/spotlight': - specifier: ^7.17.0 - version: 7.17.0(@mantine/core@7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.17.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^8.1.3 + version: 8.1.3(@mantine/core@8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.1.3(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tabler/icons-react': specifier: ^3.34.0 version: 3.34.0(react@18.3.1) @@ -2503,49 +2503,49 @@ packages: resolution: {integrity: sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA==} engines: {node: '>=8'} - '@mantine/core@7.17.0': - resolution: {integrity: sha512-AU5UFewUNzBCUXIq5Jk6q402TEri7atZW61qHW6P0GufJ2W/JxGHRvgmHOVHTVIcuWQRCt9SBSqZoZ/vHs9LhA==} + '@mantine/core@8.1.3': + resolution: {integrity: sha512-2WOPC8GSN3MApet0MccSn6LaXRhcP6SVtZnbuHoqJ/atrfK7kLE66ILr4OXov7JAj1ASJ4Xk0bOXmu5fBExAvQ==} peerDependencies: - '@mantine/hooks': 7.17.0 + '@mantine/hooks': 8.1.3 react: ^18.x || ^19.x react-dom: ^18.x || ^19.x - '@mantine/form@7.17.0': - resolution: {integrity: sha512-LONdeb+wL8h9fvyQ339ZFLxqrvYff+b+H+kginZhnr45OBTZDLXNVAt/YoKVFEkynF9WDJjdBVrXKcOZvPgmrA==} + '@mantine/form@8.1.3': + resolution: {integrity: sha512-OoSVv2cyjKRZ+C4Rw63VsnO3qjKGZHJkd6DSJTVRQHXfDr10hxmC5yXgxGKsxGQ+xFd4ZCdtzPUU2BoWbHfZAA==} peerDependencies: react: ^18.x || ^19.x - '@mantine/hooks@7.17.0': - resolution: {integrity: sha512-vo3K49mLy1nJ8LQNb5KDbJgnX0xwt3Y8JOF3ythjB5LEFMptdLSSgulu64zj+QHtzvffFCsMb05DbTLLpVP/JQ==} + '@mantine/hooks@8.1.3': + resolution: {integrity: sha512-yL4SbyYjrkmtIhscswajNz9RL0iO2+V8CMtOi0KISch2rPNvTAJNumFuZaXgj4UHeDc0JQYSmcZ+EW8NGm7xcQ==} peerDependencies: react: ^18.x || ^19.x - '@mantine/modals@7.17.0': - resolution: {integrity: sha512-4sfiFxIxMxfm2RH4jXMN+cr8tFS5AexXG4TY7TRN/ySdkiWtFVvDe5l2/KRWWeWwDUb7wQhht8Ompj5KtexlEA==} + '@mantine/modals@8.1.3': + resolution: {integrity: sha512-PTLquO7OuYHrbezhjqf1fNwxU1NKZJmNYDOll6RHp6FPQ80xCVWQqVFsj3R8XsLluu2b5ygTYi+avWrUr1GvGg==} peerDependencies: - '@mantine/core': 7.17.0 - '@mantine/hooks': 7.17.0 + '@mantine/core': 8.1.3 + '@mantine/hooks': 8.1.3 react: ^18.x || ^19.x react-dom: ^18.x || ^19.x - '@mantine/notifications@7.17.0': - resolution: {integrity: sha512-xejr1WW02NrrrE4HPDoownILJubcjLLwCDeTk907ZeeHKBEPut7RukEq6gLzOZBhNhKdPM+vCM7GcbXdaLZq/Q==} + '@mantine/notifications@8.1.3': + resolution: {integrity: sha512-Xy6f/l1yLTo77hz8X80sOuY+HW80e1rn8ucygx9TAexK5+XtyriOv26TQ3EJ6Ej5jlchtZRFEUJ4tJGRWjGCNg==} peerDependencies: - '@mantine/core': 7.17.0 - '@mantine/hooks': 7.17.0 + '@mantine/core': 8.1.3 + '@mantine/hooks': 8.1.3 react: ^18.x || ^19.x react-dom: ^18.x || ^19.x - '@mantine/spotlight@7.17.0': - resolution: {integrity: sha512-T7xfXxyDg2fxf7qvKwBozQ8HBnTQ2GRCIIoeYdAoiHoFQUS7NbBAnqrjdr5iYZpJqyLRXn8uFI7DX1Zdzd6/PQ==} + '@mantine/spotlight@8.1.3': + resolution: {integrity: sha512-GhJbSoUdcALGSMLC/zjVVncRDyvxwxjtlzFeHLuY0Dgkgj+60x3tnzAulDrqYVhLMk7fGyex22VV/Xwl7mG1+Q==} peerDependencies: - '@mantine/core': 7.17.0 - '@mantine/hooks': 7.17.0 + '@mantine/core': 8.1.3 + '@mantine/hooks': 8.1.3 react: ^18.x || ^19.x react-dom: ^18.x || ^19.x - '@mantine/store@7.17.0': - resolution: {integrity: sha512-nhWRYRLqvAjrD/ApKCXxuHyTWg2b5dC06Z5gmO8udj4pBgndNf9nmCl+Of90H6bgOa56moJA7UQyXoF1SfxqVg==} + '@mantine/store@8.1.3': + resolution: {integrity: sha512-rO72LfSJqSNCwufqJxTWiHMyOR6sR3mqAcnBcw/f5aTvyOYoHZzlm4q4+TL8/2vYGRVsr9YM2Ez6HQ1vk/RR8g==} peerDependencies: react: ^18.x || ^19.x @@ -8265,8 +8265,8 @@ packages: '@types/react': optional: true - react-textarea-autosize@8.5.6: - resolution: {integrity: sha512-aT3ioKXMa8f6zHYGebhbdMD2L00tKeRX1zuVuDx9YQK/JLLRSaSxq3ugECEmUB9z2kvk6bFSIoRHLkkUv0RJiw==} + react-textarea-autosize@8.5.9: + resolution: {integrity: sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==} engines: {node: '>=10'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -12228,55 +12228,55 @@ snapshots: '@lukeed/ms@2.0.2': {} - '@mantine/core@7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mantine/core@8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@floating-ui/react': 0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mantine/hooks': 7.17.0(react@18.3.1) + '@mantine/hooks': 8.1.3(react@18.3.1) clsx: 2.1.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) react-number-format: 5.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-remove-scroll: 2.6.3(@types/react@18.3.12)(react@18.3.1) - react-textarea-autosize: 8.5.6(@types/react@18.3.12)(react@18.3.1) + react-textarea-autosize: 8.5.9(@types/react@18.3.12)(react@18.3.1) type-fest: 4.28.1 transitivePeerDependencies: - '@types/react' - '@mantine/form@7.17.0(react@18.3.1)': + '@mantine/form@8.1.3(react@18.3.1)': dependencies: fast-deep-equal: 3.1.3 klona: 2.0.6 react: 18.3.1 - '@mantine/hooks@7.17.0(react@18.3.1)': + '@mantine/hooks@8.1.3(react@18.3.1)': dependencies: react: 18.3.1 - '@mantine/modals@7.17.0(@mantine/core@7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.17.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mantine/modals@8.1.3(@mantine/core@8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.1.3(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@mantine/core': 7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mantine/hooks': 7.17.0(react@18.3.1) + '@mantine/core': 8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mantine/hooks': 8.1.3(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@mantine/notifications@7.17.0(@mantine/core@7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.17.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mantine/notifications@8.1.3(@mantine/core@8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.1.3(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@mantine/core': 7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mantine/hooks': 7.17.0(react@18.3.1) - '@mantine/store': 7.17.0(react@18.3.1) + '@mantine/core': 8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mantine/hooks': 8.1.3(react@18.3.1) + '@mantine/store': 8.1.3(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mantine/spotlight@7.17.0(@mantine/core@7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.17.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mantine/spotlight@8.1.3(@mantine/core@8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.1.3(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@mantine/core': 7.17.0(@mantine/hooks@7.17.0(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mantine/hooks': 7.17.0(react@18.3.1) - '@mantine/store': 7.17.0(react@18.3.1) + '@mantine/core': 8.1.3(@mantine/hooks@8.1.3(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mantine/hooks': 8.1.3(react@18.3.1) + '@mantine/store': 8.1.3(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@mantine/store@7.17.0(react@18.3.1)': + '@mantine/store@8.1.3(react@18.3.1)': dependencies: react: 18.3.1 @@ -18849,7 +18849,7 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 - react-textarea-autosize@8.5.6(@types/react@18.3.12)(react@18.3.1): + react-textarea-autosize@8.5.9(@types/react@18.3.12)(react@18.3.1): dependencies: '@babel/runtime': 7.25.6 react: 18.3.1