From 6f7692c08663a2684acb9ef10a61ea7bcf0f1a25 Mon Sep 17 00:00:00 2001 From: Manuel <30572287+manuel-rw@users.noreply.github.com> Date: Tue, 28 Feb 2023 20:35:57 +0100 Subject: [PATCH 01/27] =?UTF-8?q?=F0=9F=9A=91=20Fix=20RSS=20widget=20crash?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/api/modules/rss/index.ts | 9 +++++++++ src/widgets/rss/RssWidgetTile.tsx | 20 ++++++++++---------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/pages/api/modules/rss/index.ts b/src/pages/api/modules/rss/index.ts index 0a5623158..0ee993be3 100644 --- a/src/pages/api/modules/rss/index.ts +++ b/src/pages/api/modules/rss/index.ts @@ -53,6 +53,7 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) => title: item.title ? decode(item.title) : undefined, content: decode(item.content), enclosure: createEnclosure(item), + link: createLink(item), })) .sort((a: { pubDate: number }, b: { pubDate: number }) => { if (!a.pubDate || !b.pubDate) { @@ -70,6 +71,14 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) => }); }; +const createLink = (item: any) => { + if (item.link) { + return item.link; + } + + return item.guid; +}; + const createEnclosure = (item: any) => { if (item.enclosure) { return item.enclosure; diff --git a/src/widgets/rss/RssWidgetTile.tsx b/src/widgets/rss/RssWidgetTile.tsx index 39b03db68..8877fff80 100644 --- a/src/widgets/rss/RssWidgetTile.tsx +++ b/src/widgets/rss/RssWidgetTile.tsx @@ -16,7 +16,6 @@ import { Title, UnstyledButton, } from '@mantine/core'; -import { useElementSize } from '@mantine/hooks'; import { IconBulldozer, IconCalendarTime, @@ -65,7 +64,6 @@ function RssTile({ widget }: RssTileProps) { ); const { classes } = useStyles(); const [loadingOverlayVisible, setLoadingOverlayVisible] = useState(false); - const { ref, height } = useElementSize(); if (!data || isLoading) { return ( @@ -88,7 +86,7 @@ function RssTile({ widget }: RssTileProps) { } return ( - + {data.feed.image ? ( @@ -121,7 +119,7 @@ function RssTile({ widget }: RssTileProps) { - - - - {data.feed.lastBuildDate} - - + {data.feed.lastBuildDate && ( + + + + {data.feed.lastBuildDate} + + + )} {data.feed.feedUrl && ( From 0b7f407b8c30cbded65f7a165385db5d793ea0b9 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 2 Mar 2023 16:40:50 +0900 Subject: [PATCH 02/27] =?UTF-8?q?=E2=9C=A8=20Add=20feature=20for=20edit=20?= =?UTF-8?q?mode=20password?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 2 + .../Modals/AboutModal/AboutModal.tsx | 37 +++++---- src/components/layout/header/SettingsMenu.tsx | 2 + .../header/SettingsMenu/EditModeToggle.tsx | 78 +++++++++++++++++++ src/modules/Docker/DockerModule.tsx | 2 +- src/pages/api/configs/tryToggleEdit.tsx | 34 ++++++++ 6 files changed, 138 insertions(+), 17 deletions(-) create mode 100644 .env create mode 100644 src/components/layout/header/SettingsMenu/EditModeToggle.tsx create mode 100644 src/pages/api/configs/tryToggleEdit.tsx diff --git a/.env b/.env new file mode 100644 index 000000000..611ce2a59 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +DISABLE_EDIT_MODE=TRUE +EDIT_MODE_PASSWORD='edit' \ No newline at end of file diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 8f366fd9f..4346f0124 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -9,10 +9,10 @@ import { Group, HoverCard, Modal, - Stack, Table, Text, Title, + Tooltip, } from '@mantine/core'; import { IconAnchor, @@ -35,6 +35,7 @@ import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation'; import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore'; +import { useColorTheme } from '../../../../tools/color'; import { usePrimaryGradient } from '../../../layout/useGradient'; import Credits from '../../../Settings/Common/Credits'; @@ -161,9 +162,9 @@ interface ExtendedInitOptions extends InitOptions { } const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => { - const colorGradiant = usePrimaryGradient(); const { attributes } = usePackageAttributesStore(); const { editModeEnabled } = useEditModeInformationStore(); + const { primaryColor } = useColorTheme(); const { configVersion } = useConfigContext(); const { configs } = useConfigStore(); @@ -177,15 +178,19 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl icon: , label: 'experimental_disableEditMode', content: ( - + WARNING - - This is an experimental feature, where the edit mode is disabled entirely - no config - modifications are possbile anymore. All update requests for the config will be dropped - on the API. This will be removed in future versions, as Homarr will receive a proper - authentication system, which will make this obsolete. - - + ), }, ]; @@ -201,7 +206,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl icon: , label: 'i18n', content: ( - + {usedI18nNamespaces.length} ), @@ -210,7 +215,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl icon: , label: 'locales', content: ( - + {initOptions.locales.length} ), @@ -223,7 +228,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl icon: , label: 'configurationSchemaVersion', content: ( - + {configVersion} ), @@ -232,7 +237,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl icon: , label: 'configurationsCount', content: ( - + {configs.length} ), @@ -242,7 +247,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl label: 'version', content: ( - + {attributes.packageVersion ?? 'Unknown'} {newVersionAvailable && ( @@ -282,7 +287,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl icon: , label: 'nodeEnvironment', content: ( - + {attributes.environment} ), diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx index 970762e68..91d04a2fd 100644 --- a/src/components/layout/header/SettingsMenu.tsx +++ b/src/components/layout/header/SettingsMenu.tsx @@ -7,6 +7,7 @@ import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal'; import { SettingsDrawer } from '../../Settings/SettingsDrawer'; import { useCardStyles } from '../useCardStyles'; import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch'; +import { EditModeToggle } from './SettingsMenu/EditModeToggle'; export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) { const [drawerOpened, drawer] = useDisclosure(false); @@ -25,6 +26,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str + {!editModeEnabled && ( } onClick={drawer.open}> diff --git a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx new file mode 100644 index 000000000..083e889c9 --- /dev/null +++ b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx @@ -0,0 +1,78 @@ +import { Button, Code, Menu, PasswordInput, Stack, Text } from '@mantine/core'; +import { useForm } from '@mantine/form'; +import { openModal } from '@mantine/modals'; +import { showNotification } from '@mantine/notifications'; +import { IconEdit, IconEditOff } from '@tabler/icons'; +import axios from 'axios'; +import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation'; + +function ModalContent() { + const form = useForm({ + initialValues: { + triedPassword: '', + }, + }); + return ( +
{ + axios.post('/api/configs/tryToggleEdit', { tried: values.triedPassword }).then((res) => { + if (res.data.success) { + showNotification({ + title: 'Success', + message: 'Successfully toggled edit mode, reloading the page...', + color: 'green', + }); + setTimeout(() => { + window.location.reload(); + }, 500); + } else { + showNotification({ + title: 'Wrong password', + message: 'The password you entered is wrong.', + color: 'red', + }); + } + }); + })} + > + + + In order to toggle edit mode, you need to enter the password you entered in the + environment variable named EDIT_MODE_PASSWORD + + + + +
+ ); +} + +export function EditModeToggle() { + const { editModeEnabled } = useEditModeInformationStore(); + const Icon = editModeEnabled ? IconEdit : IconEditOff; + + return ( + } + onClick={() => + openModal({ + title: 'Toggle edit mode', + centered: true, + size: 'lg', + children: , + }) + } + > + {editModeEnabled ? 'Enable edit mode' : 'Disable edit mode'} + + ); +} diff --git a/src/modules/Docker/DockerModule.tsx b/src/modules/Docker/DockerModule.tsx index 91de2247b..1948c60a3 100644 --- a/src/modules/Docker/DockerModule.tsx +++ b/src/modules/Docker/DockerModule.tsx @@ -54,7 +54,7 @@ export default function DockerMenuButton(props: any) { }, 300); } - if (!dockerEnabled) { + if (!dockerEnabled || process.env.DISABLE_EDIT_MODE === 'true') { return null; } diff --git a/src/pages/api/configs/tryToggleEdit.tsx b/src/pages/api/configs/tryToggleEdit.tsx new file mode 100644 index 000000000..406babdce --- /dev/null +++ b/src/pages/api/configs/tryToggleEdit.tsx @@ -0,0 +1,34 @@ +import Consola from 'consola'; +import { NextApiRequest, NextApiResponse } from 'next'; + +function Post(req: NextApiRequest, res: NextApiResponse) { + const { tried } = req.body; + // Try to match the password with the EDIT_PASSWORD env variable + Consola.log(req.body, process.env.EDIT_MODE_PASSWORD); + if (tried === process.env.EDIT_MODE_PASSWORD) { + process.env.DISABLE_EDIT_MODE = process.env.DISABLE_EDIT_MODE === 'true' ? 'false' : 'true'; + return res.status(200).json({ + success: true, + }); + } + // Warn that there was a wrong password attempt (date : wrong password, person's IP) + Consola.warn( + `${new Date().toLocaleString()} : Wrong edit password attempt, from ${ + req.headers['x-forwarded-for'] + }` + ); + return res.status(200).json({ + success: false, + }); +} + +export default async (req: NextApiRequest, res: NextApiResponse) => { + // Filter out if the request is a POST or a GET + if (req.method === 'POST') { + return Post(req, res); + } + return res.status(405).json({ + statusCode: 405, + message: 'Method not allowed', + }); +}; From 8850e3a0278738ab09ae1fff27c5804547fc02c1 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 2 Mar 2023 16:41:27 +0900 Subject: [PATCH 03/27] =?UTF-8?q?=F0=9F=94=A5=20remove=20.env=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index 611ce2a59..000000000 --- a/.env +++ /dev/null @@ -1,2 +0,0 @@ -DISABLE_EDIT_MODE=TRUE -EDIT_MODE_PASSWORD='edit' \ No newline at end of file From e734af0109303f6b55885f4cf7d7b1264665c689 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 2 Mar 2023 16:43:54 +0900 Subject: [PATCH 04/27] =?UTF-8?q?=F0=9F=94=A5=20Remove=20logs=20and=20reph?= =?UTF-8?q?rase=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout/header/SettingsMenu/EditModeToggle.tsx | 7 +++---- src/pages/api/configs/tryToggleEdit.tsx | 1 - 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx index 083e889c9..5d4fda871 100644 --- a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx +++ b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx @@ -38,7 +38,8 @@ function ModalContent() { In order to toggle edit mode, you need to enter the password you entered in the - environment variable named EDIT_MODE_PASSWORD + environment variable named EDIT_MODE_PASSWORD . If it is not set, you are not + able to toggle edit mode on and off. - + ); diff --git a/src/pages/api/configs/tryToggleEdit.tsx b/src/pages/api/configs/tryToggleEdit.tsx index 406babdce..45f22e8f2 100644 --- a/src/pages/api/configs/tryToggleEdit.tsx +++ b/src/pages/api/configs/tryToggleEdit.tsx @@ -4,7 +4,6 @@ import { NextApiRequest, NextApiResponse } from 'next'; function Post(req: NextApiRequest, res: NextApiResponse) { const { tried } = req.body; // Try to match the password with the EDIT_PASSWORD env variable - Consola.log(req.body, process.env.EDIT_MODE_PASSWORD); if (tried === process.env.EDIT_MODE_PASSWORD) { process.env.DISABLE_EDIT_MODE = process.env.DISABLE_EDIT_MODE === 'true' ? 'false' : 'true'; return res.status(200).json({ From f906214fa93c1489ae4c2ceb0eb50ddaeff331f5 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 2 Mar 2023 16:53:52 +0900 Subject: [PATCH 05/27] Try adding a vercel config file --- vercel.json | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 000000000..77cfe5754 --- /dev/null +++ b/vercel.json @@ -0,0 +1,6 @@ +{ + "env": { + "EDIT_MODE_PASSWORD": "edit", + "DISABLE_EDIT_MODE": "TRUE" + } +} \ No newline at end of file From 46938db8f3f36ac00a205699821b94e0d4f70618 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 2 Mar 2023 20:04:25 +0900 Subject: [PATCH 06/27] Show the toggle conditionally The toggle button should only show if the environment variable is defined --- .env | 1 + src/components/layout/header/SettingsMenu.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 000000000..c22045117 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +DISABLE_EDIT_MODE=TRUE diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx index 91d04a2fd..8e44d0e2e 100644 --- a/src/components/layout/header/SettingsMenu.tsx +++ b/src/components/layout/header/SettingsMenu.tsx @@ -26,7 +26,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str - + {process.env.EDIT_MODE_PASSWORD !== undefined && } {!editModeEnabled && ( } onClick={drawer.open}> From 402f05f265a0df1d45c08a4dc3978ce69f9f04a5 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 2 Mar 2023 20:04:58 +0900 Subject: [PATCH 07/27] =?UTF-8?q?=F0=9F=94=A5=20Delete=20.env?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index c22045117..000000000 --- a/.env +++ /dev/null @@ -1 +0,0 @@ -DISABLE_EDIT_MODE=TRUE From ab212e36d0b7d73990f7905a512ccf72c9d1e169 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 2 Mar 2023 20:05:27 +0900 Subject: [PATCH 08/27] =?UTF-8?q?=F0=9F=99=88=20add=20.env=20file=20to=20g?= =?UTF-8?q?itignore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 92b9ea013..1b7d1e587 100644 --- a/.gitignore +++ b/.gitignore @@ -46,4 +46,7 @@ data/configs !.yarn/plugins !.yarn/releases !.yarn/sdks -!.yarn/versions \ No newline at end of file +!.yarn/versions + +#envfiles +.env \ No newline at end of file From caa625c3ec82765b6666197a47c98238d31ed5b2 Mon Sep 17 00:00:00 2001 From: ajnart Date: Thu, 2 Mar 2023 20:44:52 +0900 Subject: [PATCH 09/27] Disable show the toggle conditionally --- src/components/layout/header/SettingsMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx index 8e44d0e2e..91d04a2fd 100644 --- a/src/components/layout/header/SettingsMenu.tsx +++ b/src/components/layout/header/SettingsMenu.tsx @@ -26,7 +26,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str - {process.env.EDIT_MODE_PASSWORD !== undefined && } + {!editModeEnabled && ( } onClick={drawer.open}> From 5dae500ac3139d97df6fc21f83294b770420b762 Mon Sep 17 00:00:00 2001 From: ajnart Date: Fri, 3 Mar 2023 00:37:22 +0900 Subject: [PATCH 10/27] =?UTF-8?q?=F0=9F=9A=A7=20=20WIP=20on=20Mantine=20V6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 18 +- src/components/Config/ConfigChanger.tsx | 7 +- .../Dashboard/Tiles/Apps/AppTile.tsx | 10 +- .../Dashboard/Wrappers/gridstack/store.tsx | 6 +- .../Settings/Common/CommonSettings.tsx | 2 +- .../SearchEngine/SearchEngineSelector.tsx | 1 + .../Customization/CustomizationSettings.tsx | 2 +- src/components/Settings/SettingsDrawer.tsx | 2 +- src/components/layout/header/Search.tsx | 3 +- src/config/provider.tsx | 4 +- src/constants/constants.ts | 1 + src/modules/Docker/ContainerActionBar.tsx | 2 +- src/modules/Docker/ContainerState.tsx | 4 +- src/modules/Docker/DockerModule.tsx | 7 +- src/modules/Docker/DockerTable.tsx | 2 +- src/modules/overseerr/RequestModal.tsx | 2 +- src/pages/404.tsx | 4 +- src/pages/_app.tsx | 31 ++- src/pages/login.tsx | 2 +- src/pages/migrate.tsx | 4 +- src/widgets/calendar/CalendarDay.tsx | 4 +- src/widgets/calendar/CalendarTile.tsx | 30 +-- src/widgets/dashDot/DashDotGraph.tsx | 8 +- src/widgets/dashDot/DashDotTile.tsx | 2 +- src/widgets/torrent/TorrentQueueItem.tsx | 8 +- src/widgets/torrent/TorrentTile.tsx | 2 +- src/widgets/useNet/UseNetTile.tsx | 2 +- src/widgets/useNet/UsenetHistoryList.tsx | 2 +- src/widgets/useNet/UsenetQueueList.tsx | 4 +- yarn.lock | 255 +++++++++++++----- 30 files changed, 275 insertions(+), 156 deletions(-) create mode 100644 src/constants/constants.ts diff --git a/package.json b/package.json index c398dc5cc..5a934f618 100644 --- a/package.json +++ b/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/dates": "^5.9.3", - "@mantine/dropzone": "^5.9.3", - "@mantine/form": "^5.9.3", - "@mantine/hooks": "^5.9.3", - "@mantine/modals": "^5.9.3", - "@mantine/next": "^5.9.3", - "@mantine/notifications": "^5.9.3", + "@mantine/core": "^6.0.0", + "@mantine/dates": "^6.0.0", + "@mantine/dropzone": "^6.0.0", + "@mantine/form": "^6.0.0", + "@mantine/hooks": "^6.0.0", + "@mantine/modals": "^6.0.0", + "@mantine/next": "^6.0.0", + "@mantine/notifications": "^6.0.0", "@nivo/core": "^0.80.0", "@nivo/line": "^0.80.0", "@tabler/icons": "^1.106.0", diff --git a/src/components/Config/ConfigChanger.tsx b/src/components/Config/ConfigChanger.tsx index faa60f1f0..640c9a386 100644 --- a/src/components/Config/ConfigChanger.tsx +++ b/src/components/Config/ConfigChanger.tsx @@ -57,7 +57,12 @@ export default function ConfigChanger() { size="lg" radius="md" > - + {t('configSelect.pleaseWait')} diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Dashboard/Tiles/Apps/AppTile.tsx index 1c9edd328..83989478a 100644 --- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx +++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx @@ -36,7 +36,13 @@ export const AppTile = ({ className, app }: AppTileProps) => { className="dashboard-tile-app" > @@ -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: { diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Dashboard/Wrappers/gridstack/store.tsx index 52a965bfd..483d8abb7 100644 --- a/src/components/Dashboard/Wrappers/gridstack/store.tsx +++ b/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'; }; diff --git a/src/components/Settings/Common/CommonSettings.tsx b/src/components/Settings/Common/CommonSettings.tsx index e404bd9bb..9d99df8a7 100644 --- a/src/components/Settings/Common/CommonSettings.tsx +++ b/src/components/Settings/Common/CommonSettings.tsx @@ -18,7 +18,7 @@ export default function CommonSettings() { ); } return ( - + diff --git a/src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx b/src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx index c001184e2..53d643004 100644 --- a/src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx +++ b/src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx @@ -60,6 +60,7 @@ export const SearchEngineSelector = ({ searchEngine }: Props) => { + {t('text')} diff --git a/src/components/Settings/SettingsDrawer.tsx b/src/components/Settings/SettingsDrawer.tsx index ab8a792b7..be7aabc71 100644 --- a/src/components/Settings/SettingsDrawer.tsx +++ b/src/components/Settings/SettingsDrawer.tsx @@ -41,7 +41,7 @@ export function SettingsDrawer({ return ( {t('title')}} diff --git a/src/components/layout/header/Search.tsx b/src/components/layout/header/Search.tsx index a4a1dc70a..714509b62 100644 --- a/src/components/layout/header/Search.tsx +++ b/src/components/layout/header/Search.tsx @@ -181,7 +181,6 @@ export function Search() { shadow="md" radius="md" zIndex={100} - transition="pop-top-right" > {item.icon}, diff --git a/src/config/provider.tsx b/src/config/provider.tsx index 3559287d9..3f9a52704 100644 --- a/src/config/provider.tsx +++ b/src/config/provider.tsx @@ -16,8 +16,8 @@ const ConfigContext = createContext({ name: 'unknown', config: undefined, configVersion: undefined, - increaseVersion: () => console.error('Provider not set'), - setConfigName: () => console.error('Provider not set'), + increaseVersion: () => {}, + setConfigName: () => {}, }); export const ConfigProvider = ({ children }: { children: ReactNode }) => { diff --git a/src/constants/constants.ts b/src/constants/constants.ts new file mode 100644 index 000000000..41410816d --- /dev/null +++ b/src/constants/constants.ts @@ -0,0 +1 @@ +export const MIN_WIDTH_MOBILE = 500; diff --git a/src/modules/Docker/ContainerActionBar.tsx b/src/modules/Docker/ContainerActionBar.tsx index 3b8943908..c379546c0 100644 --- a/src/modules/Docker/ContainerActionBar.tsx +++ b/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}`) diff --git a/src/modules/Docker/ContainerState.tsx b/src/modules/Docker/ContainerState.tsx index d124f9f44..667f62f61 100644 --- a/src/modules/Docker/ContainerState.tsx +++ b/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', diff --git a/src/modules/Docker/DockerModule.tsx b/src/modules/Docker/DockerModule.tsx index 91de2247b..5f9dc38e5 100644 --- a/src/modules/Docker/DockerModule.tsx +++ b/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={} + transitionProps={{ + transition: 'pop', + }} styles={{ - drawer: { + content: { display: 'flex', flexDirection: 'column', }, diff --git a/src/modules/Docker/DockerTable.tsx b/src/modules/Docker/DockerTable.tsx index b2ba3c3c2..a0fa32f73 100644 --- a/src/modules/Docker/DockerTable.tsx +++ b/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(containers); const { classes, cx } = useStyles(); const [search, setSearch] = useState(''); diff --git a/src/modules/overseerr/RequestModal.tsx b/src/modules/overseerr/RequestModal.tsx index 93e6e4920..c58bc4174 100644 --- a/src/modules/overseerr/RequestModal.tsx +++ b/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: , }); axios diff --git a/src/pages/404.tsx b/src/pages/404.tsx index aadf66175..eebe020eb 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -55,8 +55,8 @@ const useStyles = createStyles((theme) => ({ description: { maxWidth: 540, margin: 'auto', - marginTop: theme.spacing.xl, - marginBottom: theme.spacing.xl * 1.5, + marginTop: parseInt(theme.spacing.xl, 10), + marginBottom: `calc(${theme.spacing.xl} * 1.5)`, }, })); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index e55dd6bef..693efa28c 100644 --- a/src/pages/_app.tsx +++ b/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 > - - - - - + + + + diff --git a/src/pages/login.tsx b/src/pages/login.tsx index bf414ed83..193a558ab 100644 --- a/src/pages/login.tsx +++ b/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', { diff --git a/src/pages/migrate.tsx b/src/pages/migrate.tsx index 428e7e564..ee73caa7f 100644 --- a/src/pages/migrate.tsx +++ b/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)`, }, })); diff --git a/src/widgets/calendar/CalendarDay.tsx b/src/widgets/calendar/CalendarDay.tsx index c8ddc2f9d..e3920db8a 100644 --- a/src/widgets/calendar/CalendarDay.tsx +++ b/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} > diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx index edd4b6672..7068231dc 100644 --- a/src/widgets/calendar/CalendarTile.tsx +++ b/src/widgets/calendar/CalendarTile.tsx @@ -74,26 +74,25 @@ function CalendarTile({ widget }: CalendarTileProps) { {}} - firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'} - dayStyle={(date) => ({ - margin: -1, - backgroundColor: isToday(date) - ? colorScheme === 'dark' - ? colors.dark[5] - : colors.gray[0] - : undefined, - })} + firstDayOfWeek={widget.properties.sundayStart ? 0 : 1} 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} - dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })} + hasNextLevel={false} renderDay={(date) => ( )} diff --git a/src/widgets/dashDot/DashDotGraph.tsx b/src/widgets/dashDot/DashDotGraph.tsx index 6977005cd..dd9fda585 100644 --- a/src/widgets/dashDot/DashDotGraph.tsx +++ b/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, }, }, diff --git a/src/widgets/dashDot/DashDotTile.tsx b/src/widgets/dashDot/DashDotTile.tsx index 522c555c3..33bdf820d 100644 --- a/src/widgets/dashDot/DashDotTile.tsx +++ b/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)`, }, })); diff --git a/src/widgets/torrent/TorrentQueueItem.tsx b/src/widgets/torrent/TorrentQueueItem.tsx index 6d7afd891..c416252b6 100644 --- a/src/widgets/torrent/TorrentQueueItem.tsx +++ b/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) => {humanFileSize(size, false)} - {width > MIN_WIDTH_MOBILE && ( + {theme.fn.largerThan('xs') && ( {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} )} - {width > MIN_WIDTH_MOBILE && ( + {theme.fn.largerThan('xs') && ( {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} )} - {width > MIN_WIDTH_MOBILE && ( + {theme.fn.largerThan('xs') && ( {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} diff --git a/src/widgets/torrent/TorrentTile.tsx b/src/widgets/torrent/TorrentTile.tsx index eaf7c8ee9..40c4db175 100644 --- a/src/widgets/torrent/TorrentTile.tsx +++ b/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 { diff --git a/src/widgets/useNet/UseNetTile.tsx b/src/widgets/useNet/UseNetTile.tsx index 832b8d2d7..e2d218567 100644 --- a/src/widgets/useNet/UseNetTile.tsx +++ b/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(downloadApps[0]?.id); const { data } = useGetUsenetInfo({ appId: selectedAppId! }); diff --git a/src/widgets/useNet/UsenetHistoryList.tsx b/src/widgets/useNet/UsenetHistoryList.tsx index 2578fdec6..6d2dbdae5 100644 --- a/src/widgets/useNet/UsenetHistoryList.tsx +++ b/src/widgets/useNet/UsenetHistoryList.tsx @@ -128,7 +128,7 @@ export const UsenetHistoryList: FunctionComponent = ({ a position="center" mt="md" total={totalPages} - page={page} + value={page} onChange={setPage} /> )} diff --git a/src/widgets/useNet/UsenetQueueList.tsx b/src/widgets/useNet/UsenetQueueList.tsx index aa3dc99e6..52e797ff5 100644 --- a/src/widgets/useNet/UsenetQueueList.tsx +++ b/src/widgets/useNet/UsenetQueueList.tsx @@ -35,7 +35,7 @@ const PAGE_SIZE = 13; export const UsenetQueueList: FunctionComponent = ({ 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 = ({ appId size="sm" position="center" total={totalPages} - page={page} + value={page} onChange={setPage} /> )} diff --git a/yarn.lock b/yarn.lock index 2d3338ba5..a0074f10a 100644 --- a/yarn.lock +++ b/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": - version: 5.10.4 - resolution: "@mantine/core@npm:5.10.4" +"@mantine/core@npm:^6.0.0": + version: 6.0.0 + resolution: "@mantine/core@npm:6.0.0" dependencies: "@floating-ui/react": ^0.19.1 - "@mantine/styles": 5.10.4 - "@mantine/utils": 5.10.4 + "@mantine/styles": 6.0.0 + "@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": - version: 5.10.4 - resolution: "@mantine/dates@npm:5.10.4" +"@mantine/dates@npm:^6.0.0": + version: 6.0.0 + 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/hooks": 5.10.4 + "@mantine/core": 6.0.0 + "@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": - version: 5.10.4 - resolution: "@mantine/dropzone@npm:5.10.4" +"@mantine/dropzone@npm:^6.0.0": + version: 6.0.0 + 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/hooks": 5.10.4 + "@mantine/core": 6.0.0 + "@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": - version: 5.10.4 - resolution: "@mantine/form@npm:5.10.4" +"@mantine/form@npm:^6.0.0": + version: 6.0.0 + 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": - version: 5.10.4 - resolution: "@mantine/hooks@npm:5.10.4" +"@mantine/hooks@npm:^6.0.0": + version: 6.0.0 + 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": - version: 5.10.4 - resolution: "@mantine/modals@npm:5.10.4" +"@mantine/modals@npm:^6.0.0": + version: 6.0.0 + 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/hooks": 5.10.4 + "@mantine/core": 6.0.0 + "@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": - version: 5.10.4 - resolution: "@mantine/next@npm:5.10.4" +"@mantine/next@npm:^6.0.0": + version: 6.0.0 + resolution: "@mantine/next@npm:6.0.0" dependencies: - "@mantine/ssr": 5.10.4 - "@mantine/styles": 5.10.4 + "@mantine/ssr": 6.0.0 + "@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": - version: 5.10.4 - resolution: "@mantine/notifications@npm:5.10.4" +"@mantine/notifications@npm:^6.0.0": + version: 6.0.0 + 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/hooks": 5.10.4 + "@mantine/core": 6.0.0 + "@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": - version: 5.10.4 - resolution: "@mantine/ssr@npm:5.10.4" +"@mantine/ssr@npm:6.0.0": + version: 6.0.0 + 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": - version: 5.10.4 - resolution: "@mantine/styles@npm:5.10.4" +"@mantine/styles@npm:6.0.0": + version: 6.0.0 + 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": - version: 5.10.4 - resolution: "@mantine/utils@npm:5.10.4" +"@mantine/utils@npm:6.0.0": + version: 6.0.0 + 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/dates": ^5.9.3 - "@mantine/dropzone": ^5.9.3 - "@mantine/form": ^5.9.3 - "@mantine/hooks": ^5.9.3 - "@mantine/modals": ^5.9.3 - "@mantine/next": ^5.9.3 - "@mantine/notifications": ^5.9.3 + "@mantine/core": ^6.0.0 + "@mantine/dates": ^6.0.0 + "@mantine/dropzone": ^6.0.0 + "@mantine/form": ^6.0.0 + "@mantine/hooks": ^6.0.0 + "@mantine/modals": ^6.0.0 + "@mantine/next": ^6.0.0 + "@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" From 387f155b294c96e4012b4014659628f1b32b5a11 Mon Sep 17 00:00:00 2001 From: ajnart Date: Fri, 3 Mar 2023 01:13:23 +0900 Subject: [PATCH 11/27] WIP on Mantine v6 --- src/hooks/useScreenLargerThan.ts | 2 +- src/pages/404.tsx | 2 +- src/widgets/calendar/CalendarDay.tsx | 16 ++++++++++++++-- src/widgets/calendar/CalendarTile.tsx | 24 +----------------------- 4 files changed, 17 insertions(+), 27 deletions(-) diff --git a/src/hooks/useScreenLargerThan.ts b/src/hooks/useScreenLargerThan.ts index 4cb70371c..1b64ef336 100644 --- a/src/hooks/useScreenLargerThan.ts +++ b/src/hooks/useScreenLargerThan.ts @@ -4,5 +4,5 @@ import { useMediaQuery } from '@mantine/hooks'; export const useScreenLargerThan = (size: MantineSize | number) => { const { breakpoints } = useMantineTheme(); const pixelCount = typeof size === 'string' ? breakpoints[size] : size; - return useMediaQuery(`(min-width: ${pixelCount}px)`); + return useMediaQuery('(min-width: 500px)'); }; diff --git a/src/pages/404.tsx b/src/pages/404.tsx index eebe020eb..9b67c9cf7 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -55,7 +55,7 @@ const useStyles = createStyles((theme) => ({ description: { maxWidth: 540, margin: 'auto', - marginTop: parseInt(theme.spacing.xl, 10), + marginTop: theme.spacing.xl, marginBottom: `calc(${theme.spacing.xl} * 1.5)`, }, })); diff --git a/src/widgets/calendar/CalendarDay.tsx b/src/widgets/calendar/CalendarDay.tsx index e3920db8a..f41789a67 100644 --- a/src/widgets/calendar/CalendarDay.tsx +++ b/src/widgets/calendar/CalendarDay.tsx @@ -1,5 +1,6 @@ -import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core'; +import { Box, Indicator, IndicatorProps, Popover, useMantineTheme } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; +import { isToday } from '../../tools/isToday'; import { MediaList } from './MediaList'; import { MediasType } from './type'; @@ -10,6 +11,7 @@ interface CalendarDayProps { export const CalendarDay = ({ date, medias }: CalendarDayProps) => { const [opened, { close, open }] = useDisclosure(false); + const { colorScheme, colors } = useMantineTheme(); if (medias.totalCount === 0) { return
{date.getDate()}
; @@ -29,7 +31,17 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => { opened={opened} > - + diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx index 7068231dc..66c204d46 100644 --- a/src/widgets/calendar/CalendarTile.tsx +++ b/src/widgets/calendar/CalendarTile.tsx @@ -72,36 +72,14 @@ function CalendarTile({ widget }: CalendarTileProps) { return ( ( From 1aeee38c0d2b05cbd270dc87b13735836b7c2e38 Mon Sep 17 00:00:00 2001 From: ajnart Date: Fri, 3 Mar 2023 01:21:38 +0900 Subject: [PATCH 12/27] WIP on Mantine v6 --- .../SelectElement/Components/Shared/GenericElementType.tsx | 2 +- .../Components/StaticElementsTab/AvailableStaticElementsTab.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx index fbf9cd169..cde3d46e4 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx @@ -29,7 +29,7 @@ export const GenericAvailableElementType = ({ : image; return ( - + diff --git a/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx b/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx index ef0da1757..6ae6b5562 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx @@ -19,7 +19,7 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps) they don't integrate with any apps and their content never changes. - + Date: Sat, 18 Mar 2023 19:09:21 +0800 Subject: [PATCH 13/27] =?UTF-8?q?=E2=9C=A8=20Make=20integrations=20fields?= =?UTF-8?q?=20required?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Minor integration styling, bigger tooltips, longer texts, removed clear secret button --- .../InputElements/GenericSecretInput.tsx | 44 +++++++------------ 1 file changed, 17 insertions(+), 27 deletions(-) diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx index 895dbf015..b65b0f5b7 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx @@ -6,7 +6,6 @@ import { Grid, Group, PasswordInput, - Stack, ThemeIcon, Title, Text, @@ -40,7 +39,7 @@ export const GenericSecretInput = ({ const Icon = setIcon; - const [displayUpdateField, setDisplayUpdateField] = useState(false); + const [displayUpdateField, setDisplayUpdateField] = useState(!secretIsPresent); const { t } = useTranslation(['layout/modals/add-app', 'common']); return ( @@ -51,26 +50,26 @@ export const GenericSecretInput = ({ - + {t(label)} - {secretIsPresent ? ( - - {t('integration.type.defined')} - - ) : ( - - {t('integration.type.undefined')} - - )} + + {secretIsPresent + ? t('integration.type.defined') + : t('integration.type.undefined')} + {type === 'private' ? ( - + {type === 'private' ? 'Private: Once saved, you cannot read out this value again' : 'Public: Can be read out repeatedly'} - + - {displayUpdateField === true ? ( Date: Mon, 20 Mar 2023 10:54:46 +0800 Subject: [PATCH 14/27] =?UTF-8?q?=E2=9C=A8=20Add=20a=20simple=20keybind=20?= =?UTF-8?q?viewer=20in=20about=20menu=20#751?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modals/AboutModal/AboutModal.tsx | 39 +++++++++++++++++-- .../Actions/ToggleEditMode/ToggleEditMode.tsx | 2 +- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 8f366fd9f..952018c0f 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -1,13 +1,14 @@ import { + Accordion, ActionIcon, Anchor, Badge, Button, createStyles, - Divider, Grid, Group, HoverCard, + Kbd, Modal, Stack, Table, @@ -35,6 +36,7 @@ import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation'; import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore'; +import Tip from '../../../layout/Tip'; import { usePrimaryGradient } from '../../../layout/useGradient'; import Credits from '../../../Settings/Common/Credits'; @@ -50,6 +52,21 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod const informations = useInformationTableItems(newVersionAvailable); const { t } = useTranslation(['common', 'layout/modals/about']); + const keybinds = [ + { key: 'Mod + J', shortcut: 'Toggle light/dark mode' }, + { key: 'Mod + K', shortcut: 'Focus on search bar' }, + { key: 'Mod + B', shortcut: 'Open docker widget' }, + { key: 'Mod + E', shortcut: 'Toggle Edit mode' }, + ]; + const rows = keybinds.map((element) => ( + + + {element.key} + + {element.shortcut} + + )); + return ( closeModal()} @@ -76,7 +93,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod - +
{informations.map((item, index) => ( @@ -100,8 +117,24 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod ))}
+ + + }>Keybinds + + + + + + + + + {rows} +
KeyShortcut
+ Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key + + + - {t('layout/modals/about:contact')} diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx index 365431379..c1f4445ff 100644 --- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx +++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx @@ -29,7 +29,7 @@ export const ToggleEditModeAction = () => { const { config } = useConfigContext(); const { classes } = useCardStyles(true); - useHotkeys([['ctrl+E', toggleEditMode]]); + useHotkeys([['mod+E', toggleEditMode]]); useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => { if (enabled) { From c799d507d2533701aac17146c8f7d4c99da09bf3 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:11:50 +0800 Subject: [PATCH 15/27] =?UTF-8?q?=F0=9F=8E=A8=20Wrap=20shortcut=20with=20t?= =?UTF-8?q?ext=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dashboard/Modals/AboutModal/AboutModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 952018c0f..1914c59f9 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -63,7 +63,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod {element.key} - {element.shortcut} + {element.shortcut} )); From ed159ea3c3af0776971e85280d5295ae07c6275b Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:18:19 +0800 Subject: [PATCH 16/27] =?UTF-8?q?=F0=9F=8C=90=20Add=20translations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/layout/modals/about.json | 3 +++ src/components/Dashboard/Modals/AboutModal/AboutModal.tsx | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/public/locales/en/layout/modals/about.json b/public/locales/en/layout/modals/about.json index aa99318db..d85feef8b 100644 --- a/public/locales/en/layout/modals/about.json +++ b/public/locales/en/layout/modals/about.json @@ -2,6 +2,9 @@ "description": "Homarr is a sleek, modern dashboard that puts all of your apps and services at your fingertips. With Homarr, you can access and control everything in one convenient location. Homarr seamlessly integrates with the apps you've added, providing you with valuable information and giving you complete control. Installation is a breeze, and Homarr supports a wide range of deployment methods.", "contact": "Having trouble or questions? Connect with us!", "addToDashboard": "Add to Dashboard", + "tip": "Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key", + "key": "Shortcut key", + "action": "Action", "metrics": { "configurationSchemaVersion": "Configuration schema version", "configurationsCount": "Available configurations", diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 1914c59f9..0dffd9487 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -124,13 +124,13 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod - - + + {rows}
KeyShortcutt{'layout/modals/about:key'}t{'layout/modals/about:action'}
- Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key + {t('layout/modals/about:tip')} From 850375767e745340be010939425d8e9949c79343 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:20:15 +0800 Subject: [PATCH 17/27] =?UTF-8?q?=F0=9F=8C=90=20Add=20translations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/layout/modals/about.json | 1 + src/components/Dashboard/Modals/AboutModal/AboutModal.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/public/locales/en/layout/modals/about.json b/public/locales/en/layout/modals/about.json index d85feef8b..83109b624 100644 --- a/public/locales/en/layout/modals/about.json +++ b/public/locales/en/layout/modals/about.json @@ -5,6 +5,7 @@ "tip": "Mod refers to your modifier key, it is Ctrl and Command/Super/Windows key", "key": "Shortcut key", "action": "Action", + "keybinds": "Keybinds", "metrics": { "configurationSchemaVersion": "Configuration schema version", "configurationsCount": "Available configurations", diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 0dffd9487..89d796001 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -119,7 +119,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod - }>Keybinds + }>t{'layout/modals/about:keybinds'} From 3bb0f2006687a6cc28aa18917f22d60901c13a4c Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:26:19 +0800 Subject: [PATCH 18/27] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Addre?= =?UTF-8?q?ss=20PR=20comments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dashboard/Wrappers/gridstack/store.tsx | 1 - src/hooks/useScreenLargerThan.ts | 3 ++- src/widgets/calendar/CalendarDay.tsx | 11 +++++------ 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Dashboard/Wrappers/gridstack/store.tsx index 483d8abb7..3cf104d56 100644 --- a/src/components/Dashboard/Wrappers/gridstack/store.tsx +++ b/src/components/Dashboard/Wrappers/gridstack/store.tsx @@ -20,7 +20,6 @@ export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | nul const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth); if (!mainAreaWidth) return null; - // TODO: Calculate rem to pixels using Calc function if (mainAreaWidth >= 1400) return 'large'; if (mainAreaWidth >= 800) return 'medium'; diff --git a/src/hooks/useScreenLargerThan.ts b/src/hooks/useScreenLargerThan.ts index 1b64ef336..2b1b3abd3 100644 --- a/src/hooks/useScreenLargerThan.ts +++ b/src/hooks/useScreenLargerThan.ts @@ -1,8 +1,9 @@ import { MantineSize, useMantineTheme } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; +import { MIN_WIDTH_MOBILE } from '../constants/constants'; export const useScreenLargerThan = (size: MantineSize | number) => { const { breakpoints } = useMantineTheme(); const pixelCount = typeof size === 'string' ? breakpoints[size] : size; - return useMediaQuery('(min-width: 500px)'); + return useMediaQuery(`(min-width: ${MIN_WIDTH_MOBILE})`); }; diff --git a/src/widgets/calendar/CalendarDay.tsx b/src/widgets/calendar/CalendarDay.tsx index f41789a67..ffee6c9cf 100644 --- a/src/widgets/calendar/CalendarDay.tsx +++ b/src/widgets/calendar/CalendarDay.tsx @@ -11,7 +11,6 @@ interface CalendarDayProps { export const CalendarDay = ({ date, medias }: CalendarDayProps) => { const [opened, { close, open }] = useDisclosure(false); - const { colorScheme, colors } = useMantineTheme(); if (medias.totalCount === 0) { return
{date.getDate()}
; @@ -33,14 +32,14 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => { ({ margin: 5, backgroundColor: isToday(date) - ? colorScheme === 'dark' - ? colors.dark[5] - : colors.gray[0] + ? theme.colorScheme === 'dark' + ? theme.colors.dark[5] + : theme.colors.gray[0] : undefined, - }} + })} > From 13670c56267599ecb0e798bc62f03a8fdf733a9d Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:35:07 +0800 Subject: [PATCH 19/27] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Addre?= =?UTF-8?q?ss=20PR=20comments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/api/configs/tryPassword.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pages/api/configs/tryPassword.tsx b/src/pages/api/configs/tryPassword.tsx index 381845abf..1632985ab 100644 --- a/src/pages/api/configs/tryPassword.tsx +++ b/src/pages/api/configs/tryPassword.tsx @@ -2,26 +2,31 @@ import Consola from 'consola'; import { NextApiRequest, NextApiResponse } from 'next'; function Post(req: NextApiRequest, res: NextApiResponse) { - const { tried } = req.body; - // Try to match the password with the PASSWORD env variable - if (tried === process.env.PASSWORD) { + const { tried, type = 'password' } = req.body; + // If the type of password is "edit", we run this branch to check the edit password + if (type === 'edit') { + if (tried === process.env.EDIT_MODE_PASSWORD) { + process.env.DISABLE_EDIT_MODE = process.env.DISABLE_EDIT_MODE === 'true' ? 'false' : 'true'; + return res.status(200).json({ + success: true, + }); + } + } else if (tried === process.env.PASSWORD) { return res.status(200).json({ success: true, }); } - // Warn that there was a wrong password attempt (date : wrong password, person's IP) Consola.warn( `${new Date().toLocaleString()} : Wrong password attempt, from ${ req.headers['x-forwarded-for'] }` ); - return res.status(200).json({ + return res.status(401).json({ success: false, }); } export default async (req: NextApiRequest, res: NextApiResponse) => { - // Filter out if the request is a POST or a GET if (req.method === 'POST') { return Post(req, res); } From b923f8261bed913645219a1da11dc72522efc02e Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:36:34 +0800 Subject: [PATCH 20/27] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Addre?= =?UTF-8?q?ss=20PR=20comments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../header/SettingsMenu/EditModeToggle.tsx | 38 ++++++++++--------- src/pages/api/configs/tryToggleEdit.tsx | 33 ---------------- 2 files changed, 20 insertions(+), 51 deletions(-) delete mode 100644 src/pages/api/configs/tryToggleEdit.tsx diff --git a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx index 5d4fda871..e27c48139 100644 --- a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx +++ b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx @@ -15,24 +15,26 @@ function ModalContent() { return (
{ - axios.post('/api/configs/tryToggleEdit', { tried: values.triedPassword }).then((res) => { - if (res.data.success) { - showNotification({ - title: 'Success', - message: 'Successfully toggled edit mode, reloading the page...', - color: 'green', - }); - setTimeout(() => { - window.location.reload(); - }, 500); - } else { - showNotification({ - title: 'Wrong password', - message: 'The password you entered is wrong.', - color: 'red', - }); - } - }); + axios + .post('/api/configs/tryPassword', { tried: values.triedPassword, type: 'edit' }) + .then((res) => { + if (res.data.success) { + showNotification({ + title: 'Success', + message: 'Successfully toggled edit mode, reloading the page...', + color: 'green', + }); + setTimeout(() => { + window.location.reload(); + }, 500); + } else { + showNotification({ + title: 'Wrong password', + message: 'The password you entered is wrong.', + color: 'red', + }); + } + }); })} > diff --git a/src/pages/api/configs/tryToggleEdit.tsx b/src/pages/api/configs/tryToggleEdit.tsx deleted file mode 100644 index 45f22e8f2..000000000 --- a/src/pages/api/configs/tryToggleEdit.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import Consola from 'consola'; -import { NextApiRequest, NextApiResponse } from 'next'; - -function Post(req: NextApiRequest, res: NextApiResponse) { - const { tried } = req.body; - // Try to match the password with the EDIT_PASSWORD env variable - if (tried === process.env.EDIT_MODE_PASSWORD) { - process.env.DISABLE_EDIT_MODE = process.env.DISABLE_EDIT_MODE === 'true' ? 'false' : 'true'; - return res.status(200).json({ - success: true, - }); - } - // Warn that there was a wrong password attempt (date : wrong password, person's IP) - Consola.warn( - `${new Date().toLocaleString()} : Wrong edit password attempt, from ${ - req.headers['x-forwarded-for'] - }` - ); - return res.status(200).json({ - success: false, - }); -} - -export default async (req: NextApiRequest, res: NextApiResponse) => { - // Filter out if the request is a POST or a GET - if (req.method === 'POST') { - return Post(req, res); - } - return res.status(405).json({ - statusCode: 405, - message: 'Method not allowed', - }); -}; From c507a8892ff66412f95ba3ceeafbea0b7c659e89 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:39:34 +0800 Subject: [PATCH 21/27] =?UTF-8?q?=F0=9F=90=9B=20Fix=20bug=20with=20notific?= =?UTF-8?q?ation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../header/SettingsMenu/EditModeToggle.tsx | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx index e27c48139..fed323e8c 100644 --- a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx +++ b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx @@ -18,22 +18,21 @@ function ModalContent() { axios .post('/api/configs/tryPassword', { tried: values.triedPassword, type: 'edit' }) .then((res) => { - if (res.data.success) { - showNotification({ - title: 'Success', - message: 'Successfully toggled edit mode, reloading the page...', - color: 'green', - }); - setTimeout(() => { - window.location.reload(); - }, 500); - } else { - showNotification({ - title: 'Wrong password', - message: 'The password you entered is wrong.', - color: 'red', - }); - } + showNotification({ + title: 'Success', + message: 'Successfully toggled edit mode, reloading the page...', + color: 'green', + }); + setTimeout(() => { + window.location.reload(); + }, 500); + }) + .catch((_) => { + showNotification({ + title: 'Error', + message: 'Failed to toggle edit mode, please try again.', + color: 'red', + }); }); })} > From 94f13b805ce5b73a0fbc0dfbe5e458d11d4245f9 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 21 Mar 2023 11:40:33 +0800 Subject: [PATCH 22/27] =?UTF-8?q?=F0=9F=90=9B=20Hide=20docker=20when=20edi?= =?UTF-8?q?t=20mode=20is=20not=20enabled=20#745?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 44bb12b51..5eeadc149 100644 --- a/src/components/layout/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -42,7 +42,7 @@ export function Header(props: any) { > {!editModeEnabled && } - + {!editModeEnabled && } Date: Tue, 21 Mar 2023 11:43:10 +0800 Subject: [PATCH 23/27] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20compilation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dashboard/Modals/AboutModal/AboutModal.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx index 89d796001..936779bff 100644 --- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx +++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx @@ -63,7 +63,9 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod - + )); @@ -119,13 +121,15 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
{element.key} {element.shortcut} + {element.shortcut} +
- }>t{'layout/modals/about:keybinds'} + }> + {t('layout/modals/about:keybinds')} + - - + + {rows} From fdeac8eb29bb1a3d47e5e9580a13fb83787a4976 Mon Sep 17 00:00:00 2001 From: ajnart Date: Sat, 18 Mar 2023 20:29:47 +0800 Subject: [PATCH 24/27] =?UTF-8?q?=E2=9C=A8=20Add=20TV=20show=20name=20in?= =?UTF-8?q?=20media=20info=20and=20style=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/api/modules/media-server/index.ts | 3 +- src/types/api/media-server/session-info.ts | 1 + src/widgets/media-server/MediaServerTile.tsx | 29 ++++++++++++++----- .../media-server/NowPlayingDisplay.tsx | 7 ++--- 4 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/pages/api/modules/media-server/index.ts b/src/pages/api/modules/media-server/index.ts index 09430878d..9085c02bc 100644 --- a/src/pages/api/modules/media-server/index.ts +++ b/src/pages/api/modules/media-server/index.ts @@ -110,8 +110,9 @@ const handleServer = async (app: ConfigAppType): Promise x.enabled); - const { data, isError } = useGetMediaServers({ + const { data, isError, isFetching, isInitialLoading } = useGetMediaServers({ enabled: config !== undefined, }); @@ -57,16 +59,28 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) { ); } - if (!data) { -
- -
; + if (isInitialLoading) { + return ( + + + + {t('descriptor.name')} + Homarr is loading streams... + + + ); } return ( -
t{'layout/modals/about:key'}t{'layout/modals/about:action'}{t('layout/modals/about:key')}{t('layout/modals/about:action')}
+
@@ -97,7 +111,8 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) { return ( ); })} diff --git a/src/widgets/media-server/NowPlayingDisplay.tsx b/src/widgets/media-server/NowPlayingDisplay.tsx index 740de5507..98decb05c 100644 --- a/src/widgets/media-server/NowPlayingDisplay.tsx +++ b/src/widgets/media-server/NowPlayingDisplay.tsx @@ -30,11 +30,10 @@ export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo }) }; const Test = Icon(); - return ( - + {session.currentlyPlaying.name} {session.currentlyPlaying.albumName ? ( @@ -43,8 +42,8 @@ export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo }) ) : ( session.currentlyPlaying.seasonName && ( - - {session.currentlyPlaying.seasonName} + + {session.currentlyPlaying.seasonName} - {session.currentlyPlaying.episodeName} ) )} From 39a4e89d66fca39594cd08c2dfe690fc55127a16 Mon Sep 17 00:00:00 2001 From: "deepsource-io[bot]" <42547082+deepsource-io[bot]@users.noreply.github.com> Date: Mon, 27 Mar 2023 02:49:53 +0000 Subject: [PATCH 25/27] ci: Add .deepsource.toml --- .deepsource.toml | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .deepsource.toml diff --git a/.deepsource.toml b/.deepsource.toml new file mode 100644 index 000000000..a26941c1c --- /dev/null +++ b/.deepsource.toml @@ -0,0 +1,7 @@ +version = 1 + +[[analyzers]] +name = "javascript" + + [analyzers.meta] + plugins = ["react"] \ No newline at end of file From 964b65477c87c57b6d857b22b85a4d4bacc0e211 Mon Sep 17 00:00:00 2001 From: "deepsource-io[bot]" <42547082+deepsource-io[bot]@users.noreply.github.com> Date: Mon, 27 Mar 2023 06:02:42 +0000 Subject: [PATCH 26/27] ci: Update .deepsource.toml --- .deepsource.toml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.deepsource.toml b/.deepsource.toml index a26941c1c..3b8658213 100644 --- a/.deepsource.toml +++ b/.deepsource.toml @@ -4,4 +4,7 @@ version = 1 name = "javascript" [analyzers.meta] - plugins = ["react"] \ No newline at end of file + plugins = ["react"] + +[[transformers]] +name = "prettier" \ No newline at end of file From 497e22830eadb1d6bd2c1c6e6d1af8df8488b3a6 Mon Sep 17 00:00:00 2001 From: "deepsource-autofix[bot]" <62050782+deepsource-autofix[bot]@users.noreply.github.com> Date: Tue, 28 Mar 2023 07:05:26 +0000 Subject: [PATCH 27/27] style: Format code with prettier Format code with prettier This commit fixes the style issues introduced in e966fda according to the output from prettier. Details: https://deepsource.io/gh/ajnart/homarr/transform/d081bf6a-f351-4ebd-a249-c708aaec7e67/ --- src/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 5d40d1b49..f9616862b 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -149,7 +149,7 @@ App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => { Consola.debug(`Overriding the default color scheme with ${process.env.DEFAULT_COLOR_SCHEME}`); } - const colorScheme: ColorScheme = process.env.DEFAULT_COLOR_SCHEME as ColorScheme ?? 'light'; + const colorScheme: ColorScheme = (process.env.DEFAULT_COLOR_SCHEME as ColorScheme) ?? 'light'; return { colorScheme: getCookie('color-scheme', ctx) || 'light',
{t('card.table.header.session')}