major mantine update

2026-03-21 21:37:29 +00:00 · 2023-05-08 14:54:16 +02:00
parent c5763e2f8f
commit 0199ebb6c3
10 changed files with 1452 additions and 2005 deletions
--- a/commafeed-client/package-lock.json
+++ b/commafeed-client/package-lock.json
--- a/commafeed-client/package.json
+++ b/commafeed-client/package.json
@@ -22,13 +22,13 @@
    "@lingui/core": "^4.0.0",
    "@lingui/macro": "^4.0.0",
    "@lingui/react": "^4.0.0",
-    "@mantine/core": "^5.10.3",
-    "@mantine/form": "^5.10.3",
-    "@mantine/hooks": "^5.10.3",
-    "@mantine/modals": "^5.10.3",
-    "@mantine/notifications": "^5.10.3",
-    "@mantine/spotlight": "^5.10.3",
-    "@mantine/styles": "^5.10.3",
+    "@mantine/core": "^6.0.10",
+    "@mantine/form": "^6.0.10",
+    "@mantine/hooks": "^6.0.10",
+    "@mantine/modals": "^6.0.10",
+    "@mantine/notifications": "^6.0.10",
+    "@mantine/spotlight": "^6.0.10",
+    "@mantine/styles": "^6.0.10",
    "@reduxjs/toolkit": "^1.9.5",
    "axios": "^1.4.0",
    "dayjs": "^1.11.7",
--- a/commafeed-client/src/App.tsx
+++ b/commafeed-client/src/App.tsx
@@ -3,7 +3,7 @@ import { I18nProvider } from "@lingui/react"
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core"
 import { useColorScheme } from "@mantine/hooks"
 import { ModalsProvider } from "@mantine/modals"
-import { NotificationsProvider } from "@mantine/notifications"
+import { Notifications } from "@mantine/notifications"
 import { Constants } from "app/constants"
 import { redirectTo } from "app/slices/redirect"
 import { reloadServerInfos } from "app/slices/server"
@@ -51,9 +51,8 @@ function Providers(props: { children: React.ReactNode }) {
                    }}
                >
                    <ModalsProvider>
-                        <NotificationsProvider position="bottom-right" zIndex={9999}>
-                            <ErrorBoundary>{props.children}</ErrorBoundary>
-                        </NotificationsProvider>
+                        <Notifications position="bottom-right" zIndex={9999} />
+                        <ErrorBoundary>{props.children}</ErrorBoundary>
                    </ModalsProvider>
                </MantineProvider>
            </ColorSchemeProvider>
--- a/commafeed-client/src/components/ActionButtton.tsx
+++ b/commafeed-client/src/components/ActionButtton.tsx
@@ -1,5 +1,6 @@
-import { ActionIcon, Button, ButtonVariant, useMantineTheme } from "@mantine/core"
-import { ActionIconVariant } from "@mantine/core/lib/ActionIcon/ActionIcon.styles"
+import { ActionIcon, Button, useMantineTheme } from "@mantine/core"
+import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
+import { ButtonProps } from "@mantine/core/lib/Button/Button"
 import { useMediaQuery } from "@mantine/hooks"
 import { forwardRef, MouseEventHandler, ReactNode } from "react"

@@ -8,7 +9,7 @@ interface ActionButtonProps {
    icon?: ReactNode
    label?: ReactNode
    onClick?: MouseEventHandler
-    variant?: ActionIconVariant & ButtonVariant
+    variant?: ActionIconProps["variant"] & ButtonProps["variant"]
    showLabelOnMobile?: boolean
 }

@@ -18,7 +19,7 @@ interface ActionButtonProps {
 export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
    const theme = useMantineTheme()
    const variant = props.variant ?? "subtle"
-    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg}px)`)
+    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`)
    const iconOnly = !props.showLabelOnMobile && (mobile || !props.label)
    return iconOnly ? (
        <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/commafeed-client/src/components/content/FeedEntry.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
+import { Box, createStyles, Divider, Paper } from "@mantine/core"
 import { MantineNumberSize } from "@mantine/styles"
 import { Constants } from "app/constants"
 import { markEntry } from "app/slices/entries"
@@ -25,7 +25,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
    if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
    else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"

-    let marginY = theme.spacing.xs
+    let marginY = 10
    if (props.viewMode === "title") marginY = 2
    else if (props.viewMode === "cozy") marginY = 6

@@ -53,6 +53,10 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
                },
            },
        },
+        headerLink: {
+            color: "inherit",
+            textDecoration: "none",
+        },
        body: {
            maxWidth: Constants.layout.entryMaxWidth,
        },
@@ -91,8 +95,8 @@ export function FeedEntry(props: FeedEntryProps) {
    const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
    return (
        <Paper withBorder radius={borderRadius} className={classes.paper}>
-            <Anchor
-                variant="text"
+            <a
+                className={classes.headerLink}
                href={props.entry.url}
                target="_blank"
                rel="noreferrer"
@@ -104,7 +108,7 @@ export function FeedEntry(props: FeedEntryProps) {
                    {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
                    {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
                </Box>
-            </Anchor>
+            </a>
            {props.expanded && (
                <Box px={paddingX} pb={paddingY}>
                    <Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>
--- a/commafeed-client/src/components/content/FeedEntryFooter.tsx
+++ b/commafeed-client/src/components/content/FeedEntryFooter.tsx
@@ -20,7 +20,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
    const [scrollPosition, setScrollPosition] = useState(0)
    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
    const tags = useAppSelector(state => state.user.tags)
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint}px)`)
+    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
    const dispatch = useAppDispatch()

    const showSharingButtons = sharingSettings && Object.values(sharingSettings).some(v => v)
@@ -74,7 +74,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                {tags && (
                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
                        <Popover.Target>
-                            <Indicator label={props.entry.tags.length} showZero={false} dot={false} inline size={16}>
+                            <Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
                                <ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
                            </Indicator>
                        </Popover.Target>
--- a/commafeed-client/src/pages/ErrorPage.tsx
+++ b/commafeed-client/src/pages/ErrorPage.tsx
@@ -13,7 +13,7 @@ const useStyles = createStyles(theme => ({
        fontWeight: "bold",
        fontSize: 120,
        lineHeight: 1,
-        marginBottom: theme.spacing.xl * 1.5,
+        marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
        color: theme.colors[theme.primaryColor][3],
    },

@@ -27,7 +27,7 @@ const useStyles = createStyles(theme => ({
        maxWidth: 540,
        margin: "auto",
        marginTop: theme.spacing.xl,
-        marginBottom: theme.spacing.xl * 1.5,
+        marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
    },
 }))

--- a/commafeed-client/src/pages/WelcomePage.tsx
+++ b/commafeed-client/src/pages/WelcomePage.tsx
@@ -38,7 +38,7 @@ export function WelcomePage() {
 }

 function Header() {
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint}px)`)
+    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)

    if (mobile) {
        return (
--- a/commafeed-client/src/pages/app/FeedEntriesPage.tsx
+++ b/commafeed-client/src/pages/app/FeedEntriesPage.tsx
@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/macro"
-import { ActionIcon, Anchor, Box, Center, Divider, Group, Title, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Box, Center, createStyles, Divider, Group, Title, useMantineTheme } from "@mantine/core"
 import { useViewportSize } from "@mantine/hooks"
 import { Constants } from "app/constants"
 import { EntrySourceType, loadEntries } from "app/slices/entries"
@@ -27,7 +27,15 @@ interface FeedEntriesPageProps {
    sourceType: EntrySourceType
 }

+const useStyles = createStyles(() => ({
+    sourceWebsiteLink: {
+        color: "inherit",
+        textDecoration: "none",
+    },
+}))
+
 export function FeedEntriesPage(props: FeedEntriesPageProps) {
+    const { classes } = useStyles()
    const location = useLocation()
    const { id = Constants.categories.all.id } = useParams()
    const viewport = useViewportSize()
@@ -63,9 +71,9 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
        <Box mb={viewport.height - Constants.layout.headerHeight - 210}>
            <Group spacing="xl">
                {sourceWebsiteUrl && (
-                    <Anchor href={sourceWebsiteUrl} target="_blank" rel="noreferrer" variant="text">
+                    <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
                        <Title order={3}>{sourceLabel}</Title>
-                    </Anchor>
+                    </a>
                )}
                {!sourceWebsiteUrl && <Title order={3}>{sourceLabel}</Title>}
                {sourceLabel && (
--- a/commafeed-client/src/pages/app/Layout.tsx
+++ b/commafeed-client/src/pages/app/Layout.tsx
@@ -1,6 +1,5 @@
 import {
    ActionIcon,
-    Anchor,
    AppShell,
    Box,
    Burger,
@@ -37,13 +36,13 @@ interface LayoutProps {
 }

 const sidebarPadding = DEFAULT_THEME.spacing.xs
-const sidebarRightBorderWidth = 1
+const sidebarRightBorderWidth = "1px"

 const useStyles = createStyles(theme => ({
    sidebarContent: {
-        maxWidth: Constants.layout.sidebarWidth - sidebarPadding * 2 - sidebarRightBorderWidth,
+        maxWidth: `calc(${Constants.layout.sidebarWidth} - ${sidebarPadding} * 2 - ${sidebarRightBorderWidth})`,
        [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
-            maxWidth: `calc(100vw - ${sidebarPadding * 2 + sidebarRightBorderWidth}px)`,
+            maxWidth: `calc(100vw - ${sidebarPadding} * 2 - ${sidebarRightBorderWidth})`,
        },
    },
    mainContentWrapper: {
@@ -68,14 +67,12 @@ const useStyles = createStyles(theme => ({
 function LogoAndTitle() {
    const dispatch = useAppDispatch()
    return (
-        <Anchor onClick={() => dispatch(redirectToRootCategory())} variant="text">
-            <Center inline>
-                <Logo size={24} />
-                <Title order={3} pl="md">
-                    CommaFeed
-                </Title>
-            </Center>
-        </Anchor>
+        <Center inline onClick={() => dispatch(redirectToRootCategory())} style={{ cursor: "pointer" }}>
+            <Logo size={24} />
+            <Title order={3} pl="md">
+                CommaFeed
+            </Title>
+        </Center>
    )
 }