update to mantine 7

commafeed-client/src/components/sidebar/TreeNode.tsx

@@ -1,5 +1,6 @@
 import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core"
 import { FeedFavicon } from "components/content/FeedFavicon"
+import { useColorScheme } from "hooks/useColorScheme"
 import React, { type ReactNode } from "react"
 import { tss } from "tss"
 import { UnreadCount } from "./UnreadCount"
@@ -20,18 +21,19 @@ interface TreeNodeProps {
 const useStyles = tss
     .withParams<{
         theme: MantineTheme
+        colorScheme: "dark" | "light"
         selected: boolean
         hasError: boolean
         hasUnread: boolean
     }>()
-    .create(({ theme, selected, hasError, hasUnread }) => {
+    .create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
         let backgroundColor = "inherit"
-        if (selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
+        if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
 
         let color
         if (hasError) {
             color = theme.colors.red[6]
-        } else if (theme.colorScheme === "dark") {
+        } else if (colorScheme === "dark") {
             color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
         } else {
             color = hasUnread ? theme.black : theme.colors.gray[6]
@@ -45,7 +47,7 @@ const useStyles = tss
                 color,
                 backgroundColor,
                 "&:hover": {
-                    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+                    backgroundColor: colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
                 },
             },
             nodeText: {
@@ -59,8 +61,10 @@ const useStyles = tss
 
 export function TreeNode(props: TreeNodeProps) {
     const theme = useMantineTheme()
+    const colorScheme = useColorScheme()
     const { classes } = useStyles({
         theme,
+        colorScheme,
         selected: props.selected,
         hasError: props.hasError,
         hasUnread: props.unread > 0,

commafeed-client/src/components/sidebar/TreeSearch.tsx

@@ -1,6 +1,6 @@
 import { t, Trans } from "@lingui/macro"
 import { Box, Center, Kbd, TextInput } from "@mantine/core"
-import { openSpotlight, type SpotlightAction, SpotlightProvider } from "@mantine/spotlight"
+import { Spotlight, spotlight, type SpotlightActionData } from "@mantine/spotlight"
 import { redirectToFeed } from "app/redirect/thunks"
 import { useAppDispatch } from "app/store"
 import { type Subscription } from "app/types"
@@ -15,17 +15,18 @@ export interface TreeSearchProps {
 export function TreeSearch(props: TreeSearchProps) {
     const dispatch = useAppDispatch()
 
-    const actions: SpotlightAction[] = props.feeds
-        .sort((f1, f2) => f1.name.localeCompare(f2.name))
+    const actions: SpotlightActionData[] = props.feeds
+        .toSorted((f1, f2) => f1.name.localeCompare(f2.name))
         .map(f => ({
-            title: f.name,
-            icon: <FeedFavicon url={f.iconUrl} />,
-            onTrigger: async () => await dispatch(redirectToFeed(f.id)),
+            id: `${f.id}`,
+            label: f.name,
+            leftSection: <FeedFavicon url={f.iconUrl} />,
+            onClick: async () => await dispatch(redirectToFeed(f.id)),
         }))
 
     const searchIcon = <TbSearch size={18} />
     const rightSection = (
-        <Center>
+        <Center style={{ cursor: "pointer" }} onClick={() => spotlight.open()}>
             <Kbd>Ctrl</Kbd>
             <Box mx={5}>+</Box>
             <Kbd>K</Kbd>
@@ -33,30 +34,35 @@ export function TreeSearch(props: TreeSearchProps) {
     )
 
     // additional keyboard shortcut used by commafeed v1
-    useMousetrap("g u", () => openSpotlight())
+    useMousetrap("g u", () => spotlight.open())
 
     return (
-        <SpotlightProvider
-            actions={actions}
-            searchIcon={searchIcon}
-            searchPlaceholder={t`Search`}
-            shortcut="ctrl+k"
-            nothingFoundMessage={<Trans>Nothing found</Trans>}
-        >
+        <>
             <TextInput
                 placeholder={t`Search`}
-                icon={searchIcon}
+                leftSection={searchIcon}
                 rightSectionWidth={100}
                 rightSection={rightSection}
                 styles={{
-                    input: { cursor: "pointer" },
-                    rightSection: { pointerEvents: "none" },
+                    input: {
+                        cursor: "pointer",
+                    },
                 }}
-                onClick={() => openSpotlight()}
+                onClick={() => spotlight.open()}
                 // prevent focus
                 onFocus={e => e.target.blur()}
                 readOnly
             />
-        </SpotlightProvider>
+            <Spotlight
+                actions={actions}
+                limit={10}
+                shortcut="ctrl+k"
+                searchProps={{
+                    leftSection: searchIcon,
+                    placeholder: t`Search`,
+                }}
+                nothingFound={<Trans>Nothing found</Trans>}
+            ></Spotlight>
+        </>
     )
 }

commafeed-client/src/components/sidebar/UnreadCount.tsx

@@ -17,7 +17,9 @@ export function UnreadCount(props: { unreadCount: number }) {
     const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
     return (
         <Tooltip label={props.unreadCount} disabled={props.unreadCount === count}>
-            <Badge className={classes.badge}>{count}</Badge>
+            <Badge className={classes.badge} variant="light">
+                {count}
+            </Badge>
         </Tooltip>
     )
 }