fix: determine os type from useOs hook

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

@@ -1,8 +1,10 @@
 import { Trans } from "@lingui/macro"
 import { Anchor, Box, Kbd, Stack, Table } from "@mantine/core"
+import { useOs } from "@mantine/hooks"
 import { Constants } from "app/constants"
 
 export function KeyboardShortcutsHelp() {
+    const isMacOS = useOs() === "macos"
     return (
         <Stack gap="xs">
             <Table striped highlightOnHover>
@@ -149,7 +151,7 @@ export function KeyboardShortcutsHelp() {
                         </Table.Td>
                         <Table.Td>
                             <Kbd>
-                                <Trans>Ctrl</Trans>
+                                <Trans>{isMacOS ? "Cmd" : "Ctrl"}</Trans>
                             </Kbd>
                             <span> + </span>
                             <Kbd>K</Kbd>

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

@@ -1,5 +1,6 @@
 import { t, Trans } from "@lingui/macro"
 import { Box, Center, Kbd, TextInput } from "@mantine/core"
+import { useOs } from "@mantine/hooks"
 import { Spotlight, spotlight, type SpotlightActionData } from "@mantine/spotlight"
 import { redirectToFeed } from "app/redirect/thunks"
 import { useAppDispatch } from "app/store"
@@ -12,13 +13,9 @@ export interface TreeSearchProps {
     feeds: Subscription[]
 }
 
-function isMacOS() {
-    return navigator.platform.toUpperCase().includes("MAC")
-}
-
 export function TreeSearch(props: TreeSearchProps) {
     const dispatch = useAppDispatch()
-
+    const isMacOS = useOs() === "macos"
     const actions: SpotlightActionData[] = props.feeds
         .map(f => ({
             id: `${f.id}`,
@@ -31,7 +28,7 @@ export function TreeSearch(props: TreeSearchProps) {
     const searchIcon = <TbSearch size={18} />
     const rightSection = (
         <Center style={{ cursor: "pointer" }} onClick={() => spotlight.open()}>
-            <Kbd>{isMacOS() ? "Cmd" : "Ctrl"}</Kbd>
+            <Kbd>{isMacOS ? "Cmd" : "Ctrl"}</Kbd>
             <Box mx={5}>+</Box>
             <Kbd>K</Kbd>
         </Center>