fix: add dialog confirm when move folder and next dest isn't empty

web/screens/Settings/Advanced/DataFolder/ModalConfirmDestNotEmpty.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import {
+  Modal,
+  ModalPortal,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalFooter,
+  ModalClose,
+  Button,
+} from '@janhq/uikit'
+
+import { atom, useAtom } from 'jotai'
+
+export const showDestNotEmptyConfirmAtom = atom(false)
+
+type Props = {
+  onUserConfirmed: () => void
+}
+
+const ModalChangeDestNotEmpty: React.FC<Props> = ({ onUserConfirmed }) => {
+  const [show, setShow] = useAtom(showDestNotEmptyConfirmAtom)
+
+  return (
+    <Modal open={show} onOpenChange={setShow}>
+      <ModalPortal />
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>
+            <span className="block pr-8 leading-relaxed">
+              This folder is not empty. Are you sure you want to relocate Jan
+              Data Folder here?
+            </span>
+          </ModalTitle>
+        </ModalHeader>
+        <p className="text-muted-foreground">
+          You may accidentally delete your other personal data when uninstalling
+          the app in the future. Are you sure you want to proceed with this
+          folder? Please review your selection carefully.
+        </p>
+        <ModalFooter>
+          <div className="flex gap-x-2">
+            <ModalClose asChild onClick={() => setShow(false)}>
+              <Button themes="ghost">Cancel</Button>
+            </ModalClose>
+            <ModalClose asChild>
+              <Button onClick={onUserConfirmed} autoFocus themes="danger">
+                Yes, Proceed
+              </Button>
+            </ModalClose>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default ModalChangeDestNotEmpty

web/screens/Settings/Advanced/DataFolder/index.tsx

@@ -12,6 +12,9 @@ export const SUCCESS_SET_NEW_DESTINATION = 'successSetNewDestination'
 import ModalChangeDirectory, {
   showDirectoryConfirmModalAtom,
 } from './ModalChangeDirectory'
+import ModalChangeDestNotEmpty, {
+  showDestNotEmptyConfirmAtom,
+} from './ModalConfirmDestNotEmpty'
 import ModalErrorSetDestGlobal, {
   showChangeFolderErrorAtom,
 } from './ModalErrorSetDestGlobal'
@@ -24,6 +27,7 @@ const DataFolder = () => {
   const setShowDirectoryConfirm = useSetAtom(showDirectoryConfirmModalAtom)
   const setShowSameDirectory = useSetAtom(showSamePathModalAtom)
   const setShowChangeFolderError = useSetAtom(showChangeFolderErrorAtom)
+  const showDestNotEmptyConfirm = useSetAtom(showDestNotEmptyConfirmAtom)
   const [destinationPath, setDestinationPath] = useState(undefined)
 
   useEffect(() => {
@@ -52,9 +56,24 @@ const DataFolder = () => {
       return
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const newDestChildren: any[] = await fs.readdirSync(destFolder)
+    const isNotEmpty =
+      newDestChildren.filter((x) => x !== '.DS_Store').length > 0
+
+    if (isNotEmpty) {
+      showDestNotEmptyConfirm(true)
+      return
+    }
+
     setDestinationPath(destFolder)
     setShowDirectoryConfirm(true)
-  }, [janDataFolderPath, setShowSameDirectory, setShowDirectoryConfirm])
+  }, [
+    janDataFolderPath,
+    setShowDirectoryConfirm,
+    setShowSameDirectory,
+    showDestNotEmptyConfirm,
+  ])
 
   const onUserConfirmed = useCallback(async () => {
     if (!destinationPath) return
@@ -124,6 +143,7 @@ const DataFolder = () => {
         onUserConfirmed={onUserConfirmed}
       />
       <ModalErrorSetDestGlobal />
+      <ModalChangeDestNotEmpty onUserConfirmed={onUserConfirmed} />
       {showLoader && <Loader description="Relocating Jan Data Folder..." />}
     </Fragment>
   )