From d02aa78defda978708fc9628f44695a231cd70c5 Mon Sep 17 00:00:00 2001
From: luckrnx09 <luckrnx09@gmail.com>
Date: Sat, 25 May 2024 21:35:10 +0800
Subject: [PATCH] fix: determine os type from useOs hook

---
 .../src/components/KeyboardShortcutsHelp.tsx             | 4 +++-
 commafeed-client/src/components/sidebar/TreeSearch.tsx   | 9 +++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/commafeed-client/src/components/KeyboardShortcutsHelp.tsx b/commafeed-client/src/components/KeyboardShortcutsHelp.tsx
index d33d0302..be04c2cf 100644
--- a/commafeed-client/src/components/KeyboardShortcutsHelp.tsx
+++ b/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>
diff --git a/commafeed-client/src/components/sidebar/TreeSearch.tsx b/commafeed-client/src/components/sidebar/TreeSearch.tsx
index 7f5dbc4a..f804665b 100644
--- a/commafeed-client/src/components/sidebar/TreeSearch.tsx
+++ b/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>