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,15 +28,7 @@ import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
 import useGetSystemResources from '@/hooks/useGetSystemResources'
 import { useMainViewState } from '@/hooks/useMainViewState'
 
-const BottomBar = () => {
-  const { activeModel, stateModel } = useActiveModel()
-  const { ram, cpu } = useGetSystemResources()
-  const progress = useAtomValue(appDownloadProgress)
-  const { downloadedModels } = useGetDownloadedModels()
-  const { setMainViewState } = useMainViewState()
-  const { downloadStates } = useDownloadState()
-
-  const linksMenu = [
+const menuLinks = [
   {
     name: 'Discord',
     icon: <FaDiscord size={20} className="flex-shrink-0" />,
@@ -49,6 +41,14 @@ const BottomBar = () => {
   },
 ]
 
+const BottomBar = () => {
+  const { activeModel, stateModel } = useActiveModel()
+  const { ram, cpu } = useGetSystemResources()
+  const progress = useAtomValue(appDownloadProgress)
+  const { downloadedModels } = useGetDownloadedModels()
+  const { setMainViewState } = useMainViewState()
+  const { downloadStates } = useDownloadState()
+
   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,10 +99,9 @@ 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) => {
-              return (
+            .map((link, i) => (
               <div className="relative" key={i}>
                 <Tooltip>
                   <TooltipTrigger>
@@ -121,8 +120,7 @@ const BottomBar = () => {
                   </TooltipContent>
                 </Tooltip>
               </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) => {
-    switch (os) {
-      case 'macos':
-        return '⌘'
-
-      default:
-        return 'Ctrl'
-    }
-  }
+  const symbol = isMac ? '⌘' : '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
-}