From 585a2aa0b3591a82800781804d7f77234b6860fa Mon Sep 17 00:00:00 2001
From: Franco Labuschagne <92145222+FrancoLab@users.noreply.github.com>
Date: Wed, 11 Oct 2023 21:24:06 +0200
Subject: [PATCH] feat: Add OS detection hook and update search dialog (#1760)

---
 .../organisms/SearchDialog/search-dialog.tsx     |  9 ++++++---
 lib/hooks/useIsMacOS.ts                          | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 lib/hooks/useIsMacOS.ts

diff --git a/components/organisms/SearchDialog/search-dialog.tsx b/components/organisms/SearchDialog/search-dialog.tsx
index 41dc6f95ce..dea81f7187 100644
--- a/components/organisms/SearchDialog/search-dialog.tsx
+++ b/components/organisms/SearchDialog/search-dialog.tsx
@@ -12,6 +12,7 @@ import useLockBody from "lib/hooks/useLockBody";
 import { getAvatarByUsername } from "lib/utils/github";
 import { searchUsers } from "lib/hooks/search-users";
 import useDebounceTerm from "lib/hooks/useDebounceTerm";
+import useIsMacOS from "lib/hooks/useIsMacOS";
 
 const SearchDialog = () => {
   useLockBody();
@@ -23,6 +24,7 @@ const SearchDialog = () => {
   const setOpenSearch = store((state) => state.setOpenSearch);
   const debouncedSearchTerm = useDebounceTerm(searchTerm, 300);
   const [searchResult, setSearchResult] = useState<{ data: DbUserSearch[]; meta: {} }>();
+  const isMac = useIsMacOS();
 
   useEffect(() => {
     document.addEventListener("keydown", handleCloseSearch);
@@ -94,7 +96,7 @@ const SearchDialog = () => {
             onKeyDown={handleKeyboardCtrl}
           />
           <Text keyboard className="text-gray-600 !border-b !px-1">
-            ⌘K
+            {isMac ? "⌘K" : <span className="text-[12px] py-2 px-1">CTRL+K</span>}
           </Text>
         </div>
         <div className="w-full h-full flex items-center">
@@ -115,6 +117,7 @@ const SearchDialog = () => {
 
 const SearchDialogTrigger = () => {
   const setOpenSearch = store((state) => state.setOpenSearch);
+  const isMac = useIsMacOS();
 
   useEffect(() => {
     document.addEventListener("keydown", handleOpenSearch);
@@ -130,7 +133,7 @@ const SearchDialogTrigger = () => {
   return (
     <>
       <div
-        className="hidden sm:flex justify-between p-1 pl-3 h-fit w-52 ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden"
+        className="hidden sm:flex justify-between p-1 pl-3 h-fit w-56 ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden"
         onClick={() => setOpenSearch(true)}
       >
         <div className="flex items-center">
@@ -138,7 +141,7 @@ const SearchDialogTrigger = () => {
           <Text className="pl-2 text-sm font-semibold text-light-slate-9">Search for users</Text>
         </div>
         <Text keyboard className="text-gray-600 !border-b !px-1">
-          ⌘K
+          {isMac ? "⌘K" : <span className="text-[12px] px-1 py-2">CTRL+K</span>}
         </Text>
       </div>
       <div className="flex sm:hidden p-1" onClick={() => setOpenSearch(true)}>
diff --git a/lib/hooks/useIsMacOS.ts b/lib/hooks/useIsMacOS.ts
new file mode 100644
index 0000000000..cbff85138d
--- /dev/null
+++ b/lib/hooks/useIsMacOS.ts
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+const MACOS_USER_AGENT_PART = /Mac|Macintosh|MacIntel|Mac OS X/;
+
+function useIsMacOS(): boolean {
+  const [isMac, setIsMac] = useState<boolean>(false);
+
+  useEffect(() => {
+    const userAgentCheck = MACOS_USER_AGENT_PART.test(window.navigator.userAgent);
+    setIsMac(userAgentCheck);
+  }, []);
+
+  return isMac;
+}
+
+export default useIsMacOS;