chore: clean up use os hook (#1418)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

extensions/model-extension/src/index.ts

@@ -200,6 +200,7 @@ export default class JanModelExtension implements ModelExtension {
       const allDirectories: string[] = []
       for (const file of files) {
         if (file === '.DS_Store') continue
+        if (file === 'config') continue
         allDirectories.push(file)
       }
 

web/containers/Layout/BottomBar/index.tsx

@@ -28,6 +28,19 @@ import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
 import useGetSystemResources from '@/hooks/useGetSystemResources'
 import { useMainViewState } from '@/hooks/useMainViewState'
 
+const menuLinks = [
+  {
+    name: 'Discord',
+    icon: <FaDiscord size={20} className="flex-shrink-0" />,
+    link: 'https://discord.gg/FTk2MvZwJH',
+  },
+  {
+    name: 'Github',
+    icon: <FaGithub size={16} className="flex-shrink-0" />,
+    link: 'https://github.com/janhq/jan',
+  },
+]
+
 const BottomBar = () => {
   const { activeModel, stateModel } = useActiveModel()
   const { ram, cpu } = useGetSystemResources()
@@ -36,19 +49,6 @@ const BottomBar = () => {
   const { setMainViewState } = useMainViewState()
   const { downloadStates } = useDownloadState()
 
-  const linksMenu = [
-    {
-      name: 'Discord',
-      icon: <FaDiscord size={20} className="flex-shrink-0" />,
-      link: 'https://discord.gg/FTk2MvZwJH',
-    },
-    {
-      name: 'Github',
-      icon: <FaGithub size={16} className="flex-shrink-0" />,
-      link: 'https://github.com/janhq/jan',
-    },
-  ]
-
   return (
     <div className="fixed bottom-0 left-16 z-20 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-background/80 px-3">
       <div className="flex flex-shrink-0 items-center gap-x-2">
@@ -99,30 +99,28 @@ const BottomBar = () => {
         {/* VERSION is defined by webpack, please see next.config.js */}
         <span className="text-xs">Jan v{VERSION ?? ''}</span>
         <div className="mt-1 flex items-center gap-x-2">
-          {linksMenu
+          {menuLinks
             .filter((link) => !!link)
-            .map((link, i) => {
+            .map((link, i) => (
-              return (
+              <div className="relative" key={i}>
-                <div className="relative" key={i}>
+                <Tooltip>
-                  <Tooltip>
+                  <TooltipTrigger>
-                    <TooltipTrigger>
+                    <a
-                      <a
+                      href={link.link}
-                        href={link.link}
+                      target="_blank"
-                        target="_blank"
+                      rel="noopener noreferrer"
-                        rel="noopener noreferrer"
+                      className="relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center"
-                        className="relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center"
+                    >
-                      >
+                      {link.icon}
-                        {link.icon}
+                    </a>
-                      </a>
+                  </TooltipTrigger>
-                    </TooltipTrigger>
+                  <TooltipContent side="top" sideOffset={10}>
-                    <TooltipContent side="top" sideOffset={10}>
+                    <span>{link.name}</span>
-                      <span>{link.name}</span>
+                    <TooltipArrow />
-                      <TooltipArrow />
+                  </TooltipContent>
-                    </TooltipContent>
+                </Tooltip>
-                  </Tooltip>
+              </div>
-                </div>
+            ))}
-              )
-            })}
         </div>
       </div>
     </div>

web/containers/Shortcut/index.tsx

@@ -1,21 +1,10 @@
-import { useOs, type OS } from '@/hooks/useOs'
-
 export default function ShortCut(props: { menu: string }) {
-  const os = useOs()
   const { menu } = props
-  const getSymbol = (os: OS) => {
+  const symbol = isMac ? '⌘' : 'Ctrl'
-    switch (os) {
-      case 'macos':
-        return '⌘'
-
-      default:
-        return 'Ctrl'
-    }
-  }
 
   return (
     <div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
-      <p>{getSymbol(os) + ' + ' + menu}</p>
+      <p>{symbol + ' + ' + menu}</p>
     </div>
   )
 }

web/hooks/useOs.ts

@@ -1,57 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export type OS =
-  | 'undetermined'
-  | 'macos'
-  | 'ios'
-  | 'windows'
-  | 'android'
-  | 'linux'
-
-function getOS(): OS {
-  if (typeof window === 'undefined') {
-    return 'undetermined'
-  }
-
-  const { userAgent } = window.navigator
-  const macosPlatforms = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i
-  const windowsPlatforms = /(Win32)|(Win64)|(Windows)|(WinCE)/i
-  const iosPlatforms = /(iPhone)|(iPad)|(iPod)/i
-
-  if (iosPlatforms.test(userAgent)) {
-    return 'ios'
-  }
-  if (/Android/i.test(userAgent)) {
-    return 'android'
-  }
-
-  if (macosPlatforms.test(userAgent)) {
-    return 'macos'
-  }
-  if (windowsPlatforms.test(userAgent)) {
-    return 'windows'
-  }
-  if (/Linux/i.test(userAgent)) {
-    return 'linux'
-  }
-
-  return 'undetermined'
-}
-
-interface UseOsOptions {
-  getValueInEffect: boolean
-}
-
-export function useOs(options: UseOsOptions = { getValueInEffect: true }): OS {
-  const [value, setValue] = useState<OS>(
-    options.getValueInEffect ? 'undetermined' : getOS()
-  )
-
-  useEffect(() => {
-    if (options.getValueInEffect) {
-      setValue(getOS)
-    }
-  }, [])
-
-  return value
-}