🚧 WIP on Mantine V6

package.json

@@ -27,17 +27,17 @@
     "@ctrl/qbittorrent": "^4.1.0",
     "@ctrl/shared-torrent": "^4.1.1",
     "@ctrl/transmission": "^4.1.1",
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.10.0",
     "@jellyfin/sdk": "^0.7.0",
-    "@mantine/core": "^5.9.3",
+    "@mantine/core": "^6.0.0",
-    "@mantine/dates": "^5.9.3",
+    "@mantine/dates": "^6.0.0",
-    "@mantine/dropzone": "^5.9.3",
+    "@mantine/dropzone": "^6.0.0",
-    "@mantine/form": "^5.9.3",
+    "@mantine/form": "^6.0.0",
-    "@mantine/hooks": "^5.9.3",
+    "@mantine/hooks": "^6.0.0",
-    "@mantine/modals": "^5.9.3",
+    "@mantine/modals": "^6.0.0",
-    "@mantine/next": "^5.9.3",
+    "@mantine/next": "^6.0.0",
-    "@mantine/notifications": "^5.9.3",
+    "@mantine/notifications": "^6.0.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
     "@tabler/icons": "^1.106.0",

src/components/Config/ConfigChanger.tsx

@@ -57,7 +57,12 @@ export default function ConfigChanger() {
         size="lg"
         radius="md"
       >
-        <Notification loading title={t('configSelect.loadingNew')} radius="md" disallowClose>
+        <Notification
+          loading
+          title={t('configSelect.loadingNew')}
+          radius="md"
+          withCloseButton={false}
+        >
           {t('configSelect.pleaseWait')}
         </Notification>
       </Dialog>

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -36,7 +36,13 @@ export const AppTile = ({ className, app }: AppTileProps) => {
           className="dashboard-tile-app"
         >
           <Box hidden={false}>
-            <Title order={5} size="md" ta="center" lineClamp={1} className={cx(classes.appName, 'dashboard-tile-app-title')}>
+            <Title
+              order={5}
+              size="md"
+              ta="center"
+              lineClamp={1}
+              className={cx(classes.appName, 'dashboard-tile-app-title')}
+            >
               {app.name}
             </Title>
           </Box>
@@ -87,12 +93,10 @@ export const AppTile = ({ className, app }: AppTileProps) => {
 
 const useStyles = createStyles((theme, _params, getRef) => ({
   image: {
-    ref: getRef('image'),
     maxHeight: '90%',
     maxWidth: '90%',
   },
   appName: {
-    ref: getRef('appName'),
     wordBreak: 'break-word',
   },
   button: {

src/components/Dashboard/Wrappers/gridstack/store.tsx

@@ -18,12 +18,12 @@ interface GridstackStoreType {
 
 export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | null => {
   const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
-  const { sm, xl } = useMantineTheme().breakpoints;
   if (!mainAreaWidth) return null;
 
-  if (mainAreaWidth >= xl) return 'large';
+  // TODO: Calculate rem to pixels using Calc function
+  if (mainAreaWidth >= 1400) return 'large';
 
-  if (mainAreaWidth >= sm) return 'medium';
+  if (mainAreaWidth >= 800) return 'medium';
 
   return 'small';
 };

src/components/Settings/Common/CommonSettings.tsx

@@ -18,7 +18,7 @@ export default function CommonSettings() {
     );
   }
   return (
-    <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+    <ScrollArea style={{ height: height - 100 }} scrollbarSize={5}>
       <Stack>
         <SearchEngineSelector searchEngine={config.settings.common.searchEngine} />
         <Space />

src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx

@@ -60,6 +60,7 @@ export const SearchEngineSelector = ({ searchEngine }: Props) => {
             <Space mb="md" />
             <TextInput
               label={t('customEngine.label')}
+              name={t('configurationName')}
               description={t('tips.placeholderTip')}
               placeholder={t('customEngine.placeholder')}
               value={searchUrl}

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -8,7 +8,7 @@ export default function CustomizationSettings() {
   const { t } = useTranslation('settings/customization/general');
 
   return (
-    <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+    <ScrollArea style={{ height: height - 100 }} scrollbarSize={5}>
       <Stack mt="xs" mb="md" spacing="xs">
         <Text color="dimmed">
           {t('text')}

src/components/Settings/SettingsDrawer.tsx

@@ -41,7 +41,7 @@ export function SettingsDrawer({
 
   return (
     <Drawer
-      size="xl"
+      size="lg"
       padding="lg"
       position="right"
       title={<Title order={5}>{t('title')}</Title>}

src/components/layout/header/Search.tsx

@@ -181,7 +181,6 @@ export function Search() {
         shadow="md"
         radius="md"
         zIndex={100}
-        transition="pop-top-right"
       >
         <Popover.Target>
           <Autocomplete
@@ -297,7 +296,7 @@ export function Search() {
     setSearchEngine(item);
     showNotification({
       radius: 'lg',
-      disallowClose: true,
+      withCloseButton: false,
       id: 'spotlight',
       autoClose: 1000,
       icon: <ActionIcon size="sm">{item.icon}</ActionIcon>,

src/config/provider.tsx

@@ -16,8 +16,8 @@ const ConfigContext = createContext<ConfigContextType>({
   name: 'unknown',
   config: undefined,
   configVersion: undefined,
-  increaseVersion: () => console.error('Provider not set'),
+  increaseVersion: () => {},
-  setConfigName: () => console.error('Provider not set'),
+  setConfigName: () => {},
 });
 
 export const ConfigProvider = ({ children }: { children: ReactNode }) => {

src/constants/constants.ts

@@ -0,0 +1 @@
+export const MIN_WIDTH_MOBILE = 500;

src/modules/Docker/ContainerActionBar.tsx

@@ -35,7 +35,7 @@ function sendDockerCommand(
     title: `${t(`actions.${action}.start`)} ${containerName}`,
     message: undefined,
     autoClose: false,
-    disallowClose: true,
+    withCloseButton: false,
   });
   axios
     .get(`/api/docker/container/${containerId}?action=${action}`)

src/modules/Docker/ContainerState.tsx

@@ -1,4 +1,4 @@
-import { Badge, BadgeVariant, MantineSize } from '@mantine/core';
+import { Badge, BadgeProps, MantineSize } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import Dockerode from 'dockerode';
 
@@ -14,7 +14,7 @@ export default function ContainerState(props: ContainerStateProps) {
   const options: {
     size: MantineSize;
     radius: MantineSize;
-    variant: BadgeVariant;
+    variant: BadgeProps['variant'];
   } = {
     size: 'md',
     radius: 'md',

src/modules/Docker/DockerModule.tsx

@@ -66,10 +66,13 @@ export default function DockerMenuButton(props: any) {
         onClose={() => setOpened(false)}
         padding="xl"
         position="right"
-        size="full"
+        size="100%"
         title={<ContainerActionBar selected={selection} reload={reload} />}
+        transitionProps={{
+          transition: 'pop',
+        }}
         styles={{
-          drawer: {
+          content: {
             display: 'flex',
             flexDirection: 'column',
           },

src/modules/Docker/DockerTable.tsx

@@ -14,6 +14,7 @@ import { IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
+import { MIN_WIDTH_MOBILE } from '../../constants/constants';
 import ContainerState from './ContainerState';
 
 const useStyles = createStyles((theme) => ({
@@ -34,7 +35,6 @@ export default function DockerTable({
   containers: Dockerode.ContainerInfo[];
   selection: Dockerode.ContainerInfo[];
 }) {
-  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
   const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
   const { classes, cx } = useStyles();
   const [search, setSearch] = useState('');

src/modules/overseerr/RequestModal.tsx

@@ -221,7 +221,7 @@ function askForMedia(type: MediaType, id: number, name: string, seasons?: number
     color: 'orange',
     loading: true,
     autoClose: false,
-    disallowClose: true,
+    withCloseButton: false,
     icon: <IconAlertCircle />,
   });
   axios

src/pages/404.tsx

@@ -55,8 +55,8 @@ const useStyles = createStyles((theme) => ({
   description: {
     maxWidth: 540,
     margin: 'auto',
-    marginTop: theme.spacing.xl,
+    marginTop: parseInt(theme.spacing.xl, 10),
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
   },
 }));
 

src/pages/_app.tsx

@@ -2,7 +2,6 @@ import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from
 import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import Consola from 'consola';
-import { NotificationsProvider } from '@mantine/notifications';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { getCookie } from 'cookies-next';
@@ -11,6 +10,7 @@ import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useEffect, useState } from 'react';
+import { Notifications } from '@mantine/notifications';
 import 'video.js/dist/video-js.css';
 import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
 import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
@@ -111,21 +111,20 @@ function App(
               withNormalizeCSS
             >
               <ConfigProvider>
-                <NotificationsProvider limit={4} position="bottom-left">
+                <Notifications limit={4} position="bottom-left" />
-                  <ModalsProvider
+                <ModalsProvider
-                    modals={{
+                  modals={{
-                      editApp: EditAppModal,
+                    editApp: EditAppModal,
-                      selectElement: SelectElementModal,
+                    selectElement: SelectElementModal,
-                      integrationOptions: WidgetsEditModal,
+                    integrationOptions: WidgetsEditModal,
-                      integrationRemove: WidgetsRemoveModal,
+                    integrationRemove: WidgetsRemoveModal,
-                      categoryEditModal: CategoryEditModal,
+                    categoryEditModal: CategoryEditModal,
-                      changeAppPositionModal: ChangeAppPositionModal,
+                    changeAppPositionModal: ChangeAppPositionModal,
-                      changeIntegrationPositionModal: ChangeWidgetPositionModal,
+                    changeIntegrationPositionModal: ChangeWidgetPositionModal,
-                    }}
+                  }}
-                  >
+                >
-                    <Component {...pageProps} />
+                  <Component {...pageProps} />
-                  </ModalsProvider>
+                </ModalsProvider>
-                </NotificationsProvider>
               </ConfigProvider>
             </MantineProvider>
           </ColorTheme.Provider>

src/pages/login.tsx

@@ -62,7 +62,7 @@ export default function AuthenticationTitle() {
               title: t('notifications.checking.title'),
               message: t('notifications.checking.message'),
               autoClose: false,
-              disallowClose: true,
+              withCloseButton: false,
             });
             axios
               .post('/api/configs/tryPassword', {

src/pages/migrate.tsx

@@ -56,7 +56,7 @@ const useStyles = createStyles((theme) => ({
     fontWeight: 900,
     fontSize: 110,
     lineHeight: 1,
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
 
     [theme.fn.smallerThan('sm')]: {
       fontSize: 60,
@@ -90,7 +90,7 @@ const useStyles = createStyles((theme) => ({
     maxWidth: 700,
     margin: 'auto',
     marginTop: theme.spacing.xl,
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
   },
 }));
 

src/widgets/calendar/CalendarDay.tsx

@@ -22,7 +22,9 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
       withinPortal
       radius="lg"
       shadow="sm"
-      transition="pop"
+      transitionProps={{
+        transition: 'pop',
+      }}
       onClose={close}
       opened={opened}
     >

src/widgets/calendar/CalendarTile.tsx

@@ -74,26 +74,25 @@ function CalendarTile({ widget }: CalendarTileProps) {
       <Calendar
         m={0}
         p={0}
-        month={month}
+        defaultDate={new Date()}
         // Should be offset 5px to the left
         style={{ position: 'relative', top: -15 }}
-        onMonthChange={setMonth}
+        onPreviousMonth={setMonth}
+        onNextMonth={setMonth}
         size="xs"
         locale={i18n?.resolvedLanguage ?? 'en'}
-        fullWidth
+        firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
-        onChange={() => {}}
-        firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'}
-        dayStyle={(date) => ({
-          margin: -1,
-          backgroundColor: isToday(date)
-            ? colorScheme === 'dark'
-              ? colors.dark[5]
-              : colors.gray[0]
-            : undefined,
-        })}
         hideWeekdays
         styles={{
-          weekdayCell: {
+          day: {
+            margin: -1,
+            backgroundColor: isToday(new Date())
+              ? colorScheme === 'dark'
+                ? colors.dark[5]
+                : colors.gray[0]
+              : undefined,
+          },
+          weekday: {
             margin: 0,
             padding: 0,
           },
@@ -103,8 +102,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
             padding: 0,
           },
         }}
-        allowLevelChange={false}
+        hasNextLevel={false}
-        dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
         renderDay={(date) => (
           <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
         )}

src/widgets/dashDot/DashDotGraph.tsx

@@ -1,4 +1,4 @@
-import { createStyles, Title, useMantineTheme } from '@mantine/core';
+import { createStyles, Title, useMantineTheme, getStylesRef } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
 import { DashDotCompactStorage } from './DashDotCompactStorage';
@@ -77,7 +77,7 @@ const useIframeSrc = (
   );
 };
 
-export const useStyles = createStyles((theme, _params, getRef) => ({
+export const useStyles = createStyles((theme, _params) => ({
   iframe: {
     flex: '1 0 auto',
     maxWidth: '100%',
@@ -87,7 +87,7 @@ export const useStyles = createStyles((theme, _params, getRef) => ({
     colorScheme: 'light', // fixes white borders around iframe
   },
   graphTitle: {
-    ref: getRef('graphTitle'),
+    ref: getStylesRef('graphTitle'),
     position: 'absolute',
     right: 0,
     bottom: 0,
@@ -99,7 +99,7 @@ export const useStyles = createStyles((theme, _params, getRef) => ({
   },
   graphContainer: {
     position: 'relative',
-    [`&:hover .${getRef('graphTitle')}`]: {
+    [`&:hover .${getStylesRef('graphTitle')}`]: {
       opacity: 0.5,
     },
   },

src/widgets/dashDot/DashDotTile.tsx

@@ -232,7 +232,7 @@ const fetchDashDotInfo = async (configName: string | undefined) => {
 
 export const useDashDotTileStyles = createStyles((theme) => ({
   graphsContainer: {
-    marginRight: theme.spacing.sm * -1, // fix because margin collapses weirdly
+    marginRight: `calc(${theme.spacing.sm} * -1)`,
   },
 }));
 

src/widgets/torrent/TorrentQueueItem.tsx

@@ -35,7 +35,7 @@ interface TorrentQueueItemProps {
 
 export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) => {
   const [popoverOpened, { open: openPopover, close: closePopover }] = useDisclosure(false);
-  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
+  const theme = useMantineTheme();
   const { width } = useElementSize();
   const { t } = useTranslation('modules/torrents-status');
 
@@ -75,17 +75,17 @@ export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) =>
       <td>
         <Text size="xs">{humanFileSize(size, false)}</Text>
       </td>
-      {width > MIN_WIDTH_MOBILE && (
+      {theme.fn.largerThan('xs') && (
         <td>
           <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
         </td>
       )}
-      {width > MIN_WIDTH_MOBILE && (
+      {theme.fn.largerThan('xs') && (
         <td>
           <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
         </td>
       )}
-      {width > MIN_WIDTH_MOBILE && (
+      {theme.fn.largerThan('xs') && (
         <td>
           <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
         </td>

src/widgets/torrent/TorrentTile.tsx

@@ -17,6 +17,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useTranslation } from 'next-i18next';
+import { MIN_WIDTH_MOBILE } from '../../constants/constants';
 import { useGetDownloadClientsQueue } from '../../hooks/widgets/download-speed/useGetNetworkSpeed';
 import { NormalizedDownloadQueueResponse } from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
 import { AppIntegrationType } from '../../types/app';
@@ -59,7 +60,6 @@ interface TorrentTileProps {
 
 function TorrentTile({ widget }: TorrentTileProps) {
   const { t } = useTranslation('modules/torrents-status');
-  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
   const { width } = useElementSize();
 
   const {

src/widgets/useNet/UseNetTile.tsx

@@ -28,6 +28,7 @@ import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { UsenetHistoryList } from './UsenetHistoryList';
 import { UsenetQueueList } from './UsenetQueueList';
+import { MIN_WIDTH_MOBILE } from '../../constants/constants';
 
 dayjs.extend(duration);
 
@@ -59,7 +60,6 @@ function UseNetTile({ widget }: UseNetTileProps) {
     config?.apps.filter((x) => x.integration && downloadAppTypes.includes(x.integration.type)) ??
     [];
   const { ref, width, height } = useElementSize();
-  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
 
   const [selectedAppId, setSelectedApp] = useState<string | null>(downloadApps[0]?.id);
   const { data } = useGetUsenetInfo({ appId: selectedAppId! });

src/widgets/useNet/UsenetHistoryList.tsx

@@ -128,7 +128,7 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
           position="center"
           mt="md"
           total={totalPages}
-          page={page}
+          value={page}
           onChange={setPage}
         />
       )}

src/widgets/useNet/UsenetQueueList.tsx

@@ -35,7 +35,7 @@ const PAGE_SIZE = 13;
 export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId }) => {
   const theme = useMantineTheme();
   const { t } = useTranslation('modules/usenet');
-  const progressbarBreakpoint = theme.breakpoints.xs;
+  const progressbarBreakpoint = parseInt(theme.breakpoints.xs, 10);
   const progressBreakpoint = 400;
   const sizeBreakpoint = 300;
   const { ref, width } = useElementSize();
@@ -177,7 +177,7 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
           size="sm"
           position="center"
           total={totalPages}
-          page={page}
+          value={page}
           onChange={setPage}
         />
       )}

yarn.lock

@@ -558,7 +558,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.10.5":
+"@emotion/react@npm:^11.10.6":
   version: 11.10.6
   resolution: "@emotion/react@npm:11.10.6"
   dependencies:
@@ -1050,134 +1050,135 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mantine/core@npm:^5.9.3":
+"@mantine/core@npm:^6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/core@npm:5.10.4"
+  resolution: "@mantine/core@npm:6.0.0"
   dependencies:
     "@floating-ui/react": ^0.19.1
-    "@mantine/styles": 5.10.4
+    "@mantine/styles": 6.0.0
-    "@mantine/utils": 5.10.4
+    "@mantine/utils": 6.0.0
     "@radix-ui/react-scroll-area": 1.0.2
+    react-remove-scroll: ^2.5.5
     react-textarea-autosize: 8.3.4
   peerDependencies:
-    "@mantine/hooks": 5.10.4
+    "@mantine/hooks": 6.0.0
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 98cba720fa9764a7a45b13d167ad2dce1af1b639c202a25cf60c8ca439e386dfddefae262e770df62348af90647ba6cbc095c074a8f0582968059450fbbc2ff0
+  checksum: 7a93ea2879b46dbead97599639d7ef922869ce9b2721d88874a2d625bbe702479618e7ab54ddeb30cdd576bfe5897e204c2af017f8e84d21617e976f016dff74
   languageName: node
   linkType: hard
 
-"@mantine/dates@npm:^5.9.3":
+"@mantine/dates@npm:^6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/dates@npm:5.10.4"
+  resolution: "@mantine/dates@npm:6.0.0"
   dependencies:
-    "@mantine/utils": 5.10.4
+    "@mantine/utils": 6.0.0
   peerDependencies:
-    "@mantine/core": 5.10.4
+    "@mantine/core": 6.0.0
-    "@mantine/hooks": 5.10.4
+    "@mantine/hooks": 6.0.0
     dayjs: ">=1.0.0"
     react: ">=16.8.0"
-  checksum: 14a32aa4c16e030266629dfc5171e930d271682de742541b2298d448df11c9fab40e1d8003eabccfd5449a65ef14681993af6426197da4dcad1f509fb9fff932
+  checksum: 320733cb0739605dcd6b67726e030bc881a6d298ccd2f20683938155bee558a2f6a2bf15e194d5fa7218c82f74a90aa3858d051348b22e04904ac78ee6b88340
   languageName: node
   linkType: hard
 
-"@mantine/dropzone@npm:^5.9.3":
+"@mantine/dropzone@npm:^6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/dropzone@npm:5.10.4"
+  resolution: "@mantine/dropzone@npm:6.0.0"
   dependencies:
-    "@mantine/utils": 5.10.4
+    "@mantine/utils": 6.0.0
     react-dropzone: 14.2.3
   peerDependencies:
-    "@mantine/core": 5.10.4
+    "@mantine/core": 6.0.0
-    "@mantine/hooks": 5.10.4
+    "@mantine/hooks": 6.0.0
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 0b837b5bc7c982ad9832142c880c1b0f2827de5c2163b76895cac2dbe6204f7c67e466468a3fb00f72482bad957c4b1209820025c4dfc2c25650734df79e208b
+  checksum: a0956160d7ad94938cab3cb86d650a9edce2ff51f204ca07b3d7b7046acb905f246bddc2cea6622beb2b2cf73c8de042b2f9ed3022b2649a868a2dd73ee26045
   languageName: node
   linkType: hard
 
-"@mantine/form@npm:^5.9.3":
+"@mantine/form@npm:^6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/form@npm:5.10.4"
+  resolution: "@mantine/form@npm:6.0.0"
   dependencies:
     fast-deep-equal: ^3.1.3
     klona: ^2.0.5
   peerDependencies:
     react: ">=16.8.0"
-  checksum: 00ebc0011981f8dae5e96e833f7e0102067a7bc38b1f6208b377f029fdc8bb703a492f40a688eb015dea3147c3b6e5a7cd26c584b93cc8d2567f0dcb10319759
+  checksum: a992fb860d4493b7c68a4f5464f6577b1a9c3ef2d68eee07199c133e771c1d2ae64e831a1290f3b8f277da22f3bd20f350beafbd7b7eded8ab897a0027958038
   languageName: node
   linkType: hard
 
-"@mantine/hooks@npm:^5.9.3":
+"@mantine/hooks@npm:^6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/hooks@npm:5.10.4"
+  resolution: "@mantine/hooks@npm:6.0.0"
   peerDependencies:
     react: ">=16.8.0"
-  checksum: 41ededb62ea9311303e4b8d577ec21c12ddb339e60e70c3a1f561cb1b2c66fb6e6f29a7a23a89322748779cc06797de749203afd546f2b13180781c0e2873fa6
+  checksum: becb583cd29ca90871195ea6fb21d118f17ae05f63aa91e932c93621dc879d0c8851f9a3102cb56deb77bc2a8aac2409a9e2685d5b4b8e1a9a7ecc3c5e601da1
   languageName: node
   linkType: hard
 
-"@mantine/modals@npm:^5.9.3":
+"@mantine/modals@npm:^6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/modals@npm:5.10.4"
+  resolution: "@mantine/modals@npm:6.0.0"
   dependencies:
-    "@mantine/utils": 5.10.4
+    "@mantine/utils": 6.0.0
   peerDependencies:
-    "@mantine/core": 5.10.4
+    "@mantine/core": 6.0.0
-    "@mantine/hooks": 5.10.4
+    "@mantine/hooks": 6.0.0
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 82fce48fffbbce11526212b994e2763f0b36a276a86385f5b9ac1b5f1226f39f3f12aa171fe8b9181b755f95dbb869ef88f339e620bfd0ec28b7b0017f6b7fa7
+  checksum: 23e0348821294eceab8e70fa6eb46902b6f8cb3acddd7ec6354a3636a878100a0bdcc36eb38d86e315ca4a148bc77afacb4206bcbee5b77639d9f0785d4f5260
   languageName: node
   linkType: hard
 
-"@mantine/next@npm:^5.9.3":
+"@mantine/next@npm:^6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/next@npm:5.10.4"
+  resolution: "@mantine/next@npm:6.0.0"
   dependencies:
-    "@mantine/ssr": 5.10.4
+    "@mantine/ssr": 6.0.0
-    "@mantine/styles": 5.10.4
+    "@mantine/styles": 6.0.0
   peerDependencies:
     next: "*"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 344590d09cfef4194187f7ea430082d9f22379e264b04fa3a9261a137abf9b1e4681eb7c610b678822b2ad3001f5611e201a73a4612ee8b13d93460d68a28b0c
+  checksum: 05d5a66fcdb130e4f97b787477feaf76db06a32d45794af7104563b1928cac755b9be52dfd23e778b9e847b8d2f38a064423f01f5192570d90121d4743c40b1b
   languageName: node
   linkType: hard
 
-"@mantine/notifications@npm:^5.9.3":
+"@mantine/notifications@npm:^6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/notifications@npm:5.10.4"
+  resolution: "@mantine/notifications@npm:6.0.0"
   dependencies:
-    "@mantine/utils": 5.10.4
+    "@mantine/utils": 6.0.0
     react-transition-group: 4.4.2
   peerDependencies:
-    "@mantine/core": 5.10.4
+    "@mantine/core": 6.0.0
-    "@mantine/hooks": 5.10.4
+    "@mantine/hooks": 6.0.0
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: da439698331f09dd1f3efaa470df1f9717f7309c2a61b0bfaa14bd832185fbd0711fbaffe867b0d6978108db30d059909b59c2b7c0ed83d1bd55bc8b7a6d3e7f
+  checksum: 3815227d8384be58f2d48507c4d6ee7133cf533a0a7377d8e010ee485ce8c87a8a2fbbe9e81d1f5c2f98d73154fd52444b3c4910a96b1bc908e9c46f511f579f
   languageName: node
   linkType: hard
 
-"@mantine/ssr@npm:5.10.4":
+"@mantine/ssr@npm:6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/ssr@npm:5.10.4"
+  resolution: "@mantine/ssr@npm:6.0.0"
   dependencies:
-    "@mantine/styles": 5.10.4
+    "@mantine/styles": 6.0.0
     html-react-parser: 1.4.12
   peerDependencies:
     "@emotion/react": ">=11.9.0"
     "@emotion/server": ">=11.4.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 74e5c56b85ea731597aba876941086306abb5ae24faa86d37a5210cfd743aa164e97b29e547563f810ef92b51b3c90bd02ce1a39fbee84cbec2abd2e6ad45ca7
+  checksum: eea337164c7d8afb0b2cf05531ed3448430e555eb567d64599d20cb1751f32fd3518ac490a45638396b512d313710b0a1a7c4bfcdbffbc02523f8fcb9128d2d1
   languageName: node
   linkType: hard
 
-"@mantine/styles@npm:5.10.4":
+"@mantine/styles@npm:6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/styles@npm:5.10.4"
+  resolution: "@mantine/styles@npm:6.0.0"
   dependencies:
     clsx: 1.1.1
     csstype: 3.0.9
@@ -1185,16 +1186,16 @@ __metadata:
     "@emotion/react": ">=11.9.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 54af835dca68a457be758570c82eab2d602da19a24da599b2f2c02f451be136a400b2f8efbbdc7d1a677188b57515d3ace23df0b8aa8e37c4ddf3a2fdbce1630
+  checksum: c369d10719bab36b03cdfa6b46a495b767dcf76ea4f1f5d5f9e5596b52ef0f1b0c295c8cc854d12e9bb7778c9ff80f810a44a929dd9646638da783589fedbf73
   languageName: node
   linkType: hard
 
-"@mantine/utils@npm:5.10.4":
+"@mantine/utils@npm:6.0.0":
-  version: 5.10.4
+  version: 6.0.0
-  resolution: "@mantine/utils@npm:5.10.4"
+  resolution: "@mantine/utils@npm:6.0.0"
   peerDependencies:
     react: ">=16.8.0"
-  checksum: 96e2602f8500c29b5979d4fe0b3456c8de911ff1bd2ef216d960b23a5370ff6828871aa859538a4004ad095fb63d7e0e76cdfb365bdb930f70f8076d730302c1
+  checksum: a0f876ebb910ccebc6bbeedb093c14fe22c319d08d8504be6e6085f2e935f3aad8fc9cb1e0ede182c762a03a35e02618cf304ba3ba556a4ba3951945cf8cfc56
   languageName: node
   linkType: hard
 
@@ -3584,6 +3585,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^28.1.1":
   version: 28.1.1
   resolution: "diff-sequences@npm:28.1.1"
@@ -4638,6 +4646,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: e2614e43b4694c78277bb61b0f04583d45786881289285c73770b07ded246a98be7e1f78b940c80cbe6f2b07f55f0b724e6db6fd6f1bcbd1e8bdac16521074ed
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -4942,17 +4957,17 @@ __metadata:
     "@ctrl/qbittorrent": ^4.1.0
     "@ctrl/shared-torrent": ^4.1.1
     "@ctrl/transmission": ^4.1.1
-    "@emotion/react": ^11.10.5
+    "@emotion/react": ^11.10.6
     "@emotion/server": ^11.10.0
     "@jellyfin/sdk": ^0.7.0
-    "@mantine/core": ^5.9.3
+    "@mantine/core": ^6.0.0
-    "@mantine/dates": ^5.9.3
+    "@mantine/dates": ^6.0.0
-    "@mantine/dropzone": ^5.9.3
+    "@mantine/dropzone": ^6.0.0
-    "@mantine/form": ^5.9.3
+    "@mantine/form": ^6.0.0
-    "@mantine/hooks": ^5.9.3
+    "@mantine/hooks": ^6.0.0
-    "@mantine/modals": ^5.9.3
+    "@mantine/modals": ^6.0.0
-    "@mantine/next": ^5.9.3
+    "@mantine/next": ^6.0.0
-    "@mantine/notifications": ^5.9.3
+    "@mantine/notifications": ^6.0.0
     "@next/bundle-analyzer": ^12.1.4
     "@next/eslint-plugin-next": ^12.1.4
     "@nivo/core": ^0.80.0
@@ -5287,6 +5302,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: ^1.0.0
+  checksum: cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14
+  languageName: node
+  linkType: hard
+
 "ip@npm:^2.0.0":
   version: 2.0.0
   resolution: "ip@npm:2.0.0"
@@ -6285,7 +6309,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -7395,6 +7419,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.3":
+  version: 2.3.4
+  resolution: "react-remove-scroll-bar@npm:2.3.4"
+  dependencies:
+    react-style-singleton: ^2.2.1
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: b5ce5f2f98d65c97a3e975823ae4043a4ba2a3b63b5ba284b887e7853f051b5cd6afb74abde6d57b421931c52f2e1fdbb625dc858b1cb5a32c27c14ab85649d4
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:^2.5.5":
+  version: 2.5.5
+  resolution: "react-remove-scroll@npm:2.5.5"
+  dependencies:
+    react-remove-scroll-bar: ^2.3.3
+    react-style-singleton: ^2.2.1
+    tslib: ^2.1.0
+    use-callback-ref: ^1.3.0
+    use-sidecar: ^1.1.2
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 2c7fe9cbd766f5e54beb4bec2e2efb2de3583037b23fef8fa511ab426ed7f1ae992382db5acd8ab5bfb030a4b93a06a2ebca41377d6eeaf0e6791bb0a59616a4
+  languageName: node
+  linkType: hard
+
 "react-simple-code-editor@npm:^0.13.1":
   version: 0.13.1
   resolution: "react-simple-code-editor@npm:0.13.1"
@@ -7405,6 +7464,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: ^1.0.0
+    invariant: ^2.2.4
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7ee8ef3aab74c7ae1d70ff34a27643d11ba1a8d62d072c767827d9ff9a520905223e567002e0bf6c772929d8ea1c781a3ba0cc4a563e92b1e3dc2eaa817ecbe8
+  languageName: node
+  linkType: hard
+
 "react-textarea-autosize@npm:8.3.4":
   version: 8.3.4
   resolution: "react-textarea-autosize@npm:8.3.4"
@@ -8345,7 +8421,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
   version: 2.5.0
   resolution: "tslib@npm:2.5.0"
   checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
@@ -8579,6 +8655,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "use-callback-ref@npm:1.3.0"
+  dependencies:
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7913df383a5a6fcb399212eedefaac2e0c6f843555202d4e3010bac3848afe38ecaa3d0d6500ad1d936fbeffd637e6c517e68edb024af5e6beca7f27f3ce7b21
+  languageName: node
+  linkType: hard
+
 "use-composed-ref@npm:^1.3.0":
   version: 1.3.0
   resolution: "use-composed-ref@npm:1.3.0"
@@ -8614,6 +8705,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: ^1.1.0
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b
+  languageName: node
+  linkType: hard
+
 "use-sync-external-store@npm:1.2.0, use-sync-external-store@npm:^1.2.0":
   version: 1.2.0
   resolution: "use-sync-external-store@npm:1.2.0"