major mantine update

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/core": "^6.0.10",
-    "@mantine/form": "^5.10.3",
+    "@mantine/form": "^6.0.10",
-    "@mantine/hooks": "^5.10.3",
+    "@mantine/hooks": "^6.0.10",
-    "@mantine/modals": "^5.10.3",
+    "@mantine/modals": "^6.0.10",
-    "@mantine/notifications": "^5.10.3",
+    "@mantine/notifications": "^6.0.10",
-    "@mantine/spotlight": "^5.10.3",
+    "@mantine/spotlight": "^6.0.10",
-    "@mantine/styles": "^5.10.3",
+    "@mantine/styles": "^6.0.10",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "dayjs": "^1.11.7",

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}>
+                        <Notifications position="bottom-right" zIndex={9999} />
-                            <ErrorBoundary>{props.children}</ErrorBoundary>
+                        <ErrorBoundary>{props.children}</ErrorBoundary>
-                        </NotificationsProvider>
                     </ModalsProvider>
                 </MantineProvider>
             </ColorSchemeProvider>

commafeed-client/src/components/ActionButtton.tsx

@@ -1,5 +1,6 @@
-import { ActionIcon, Button, ButtonVariant, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Button, useMantineTheme } from "@mantine/core"
-import { ActionIconVariant } from "@mantine/core/lib/ActionIcon/ActionIcon.styles"
+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}>

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
+            <a
-                variant="text"
+                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" }}>

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>

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)`,
     },
 }))
 

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 (

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 && (

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 onClick={() => dispatch(redirectToRootCategory())} style={{ cursor: "pointer" }}>
-            <Center inline>
+            <Logo size={24} />
-                <Logo size={24} />
+            <Title order={3} pl="md">
-                <Title order={3} pl="md">
+                CommaFeed
-                    CommaFeed
+            </Title>
-                </Title>
+        </Center>
-            </Center>
-        </Anchor>
     )
 }