refactor(desktop): use the same logic of loading device modal with browser

desktop/src/renderer/src/App.tsx

@@ -42,7 +42,6 @@ const App = (): ReactElement => {
   const canvasContextRef = useRef<CanvasRenderingContext2D | null>(null)
 
   const [state, setState] = useState<State>('loading')
-  const [isConnected, setIsConnected] = useState(false)
 
   const videoStyle = clsx(
     'block select-none origin-center max-w-full max-h-full object-scale-down',
@@ -135,10 +134,6 @@ const App = (): ReactElement => {
     }
   }, [])
 
-  useEffect(() => {
-    setIsConnected(videoState === 'connected' && serialPortState === 'connected')
-  }, [videoState, serialPortState])
-
   async function requestMediaPermissions(resolution?: Resolution): Promise<void> {
     try {
       if (window.electron.process.platform === 'darwin') {
@@ -190,14 +185,14 @@ const App = (): ReactElement => {
 
   return (
     <>
-      {isConnected ? (
+      <DeviceModal />
+
+      {videoState === 'connected' && serialPortState === 'connected' && (
         <>
           <Menu />
           <Mouse />
           {isKeyboardEnable && <Keyboard />}
         </>
-      ) : (
-        <DeviceModal />
       )}
 
       <video

desktop/src/renderer/src/components/device-modal/index.tsx

@@ -1,17 +1,33 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement, useEffect, useState } from 'react'
 import { Modal } from 'antd'
+import { useAtomValue } from 'jotai'
 import { useTranslation } from 'react-i18next'
 
+import { serialPortStateAtom, videoStateAtom } from '@renderer/jotai/device'
+
 import { SerialPort } from './serial-port'
 import { Video } from './video'
 
 export const DeviceModal = (): ReactElement => {
   const { t } = useTranslation()
 
+  const videoState = useAtomValue(videoStateAtom)
+  const serialPortState = useAtomValue(serialPortStateAtom)
+
+  const [isOpen, setIsOpen] = useState(false)
   const [errMsg, setErrMsg] = useState('')
 
+  useEffect(() => {
+    if (videoState === 'connected' && serialPortState === 'connected') {
+      setIsOpen(false)
+      return
+    }
+
+    setIsOpen(true)
+  }, [videoState, serialPortState])
+
   return (
-    <Modal open={true} title={t('modal.title')} footer={null} closable={false} destroyOnClose>
+    <Modal open={isOpen} title={t('modal.title')} footer={null} closable={false} destroyOnClose>
       <div className="flex flex-col items-center justify-center space-y-5 py-10">
         <Video setErrMsg={setErrMsg} />
         <SerialPort setErrMsg={setErrMsg} />