enhance(iOS): add a modal to instruct users to select valid directory (#4947)

* enhance(ios): add a modal to instruct users to select valid directory

* tweak height for loom video on iPhone

ios/App/App/FolderPicker.swift

@@ -40,13 +40,15 @@ public class FolderPicker: CAPPlugin, UIDocumentPickerDelegate {
       didPickDocumentsAt urls: [URL]
     ){
         var items: [String] = []
-
+        let documentsPath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)
+        
         for url in urls {
             items.append(url.absoluteString)
         }
 
         self._call?.resolve([
-                              "path": items.first as Any
+                              "path": items.first as Any,
+                              "localDocumentsPath": documentsPath[0] as Any
                             ])
     }
 }

src/main/frontend/fs/capacitor_fs.cljs

@@ -2,11 +2,15 @@
   (:require ["@capacitor/filesystem" :refer [Encoding Filesystem]]
             [cljs-bean.core :as bean]
             [clojure.string :as string]
+            [frontend.db :as db]
+            [frontend.encrypt :as encrypt]
             [frontend.fs.protocol :as protocol]
             [frontend.mobile.util :as mobile-util]
+            [frontend.state :as state]
             [frontend.util :as util]
             [lambdaisland.glogi :as log]
             [promesa.core :as p]
+            [rum.core :as rum]
             [frontend.state :as state]
             [frontend.db :as db]))
 
@@ -170,6 +174,33 @@
       (js/encodeURI (js/decodeURI path))
       path)))
 
+(defn- local-container-path?
+  "Check whether `path' is logseq's container `localDocumentsPath' on iOS"
+  [path localDocumentsPath]
+  (string/includes? path localDocumentsPath))
+
+(defn- iCloud-container-path?
+  "Check whether `path' is logseq's iCloud container path on iOS"
+  [path]
+  (string/includes? path "iCloud~com~logseq~logseq"))
+
+(rum/defc instruction
+  []
+  [:div.instruction
+   [:h1.title "Please choose a valid directory!"]
+   [:p.leading-6 "Logseq app can only save or access your graphs stored in a specific directory with a "
+    [:strong "Logseq icon"]
+    " inside, located either in \"iCloud Drive\", \"On My iPhone\" or \"On My iPad\"."]
+   [:p.leading-6 "Please watch the following short instruction video. "
+    [:small.text-gray-500 "(may take few seconds to load...)"]]
+   [:iframe
+    {:src "https://www.loom.com/embed/dae612ae5fd94e508bd0acdf02efb888"
+     :frame-border "0"
+     :position "relative"
+     :allow-full-screen "allowfullscreen"
+     :webkit-allow-full-screen "webkitallowfullscreen"
+     :height "100%"}]])
+
 (defrecord Capacitorfs []
   protocol/Fs
   (mkdir! [_this dir]
@@ -241,11 +272,19 @@
         result)))
   (open-dir [_this _ok-handler]
     (p/let [_    (when (= (mobile-util/platform) "android") (check-permission-android))
-            path (p/chain
-                  (.pickFolder mobile-util/folder-picker)
-                  #(js->clj % :keywordize-keys true)
-                  :path)
-            _ (when (mobile-util/native-ios?) (mobile-util/sync-icloud-repo path))
+            {:keys [path localDocumentsPath]} (p/chain
+                                               (.pickFolder mobile-util/folder-picker)
+                                               #(js->clj % :keywordize-keys true))
+            _ (when (mobile-util/native-ios?)
+                (cond
+                  (not (or (local-container-path? path localDocumentsPath)
+                           (iCloud-container-path? path)))
+                  (state/pub-event! [:modal/show-instruction])
+
+                  (iCloud-container-path? path)
+                  (mobile-util/sync-icloud-repo path)
+
+                  :else nil))
             files (readdir path)
             files (js->clj files :keywordize-keys true)]
       (into [] (concat [{:path path}] files))))

src/main/frontend/handler/events.cljs

@@ -5,6 +5,7 @@
             [frontend.context.i18n :refer [t]]
             [frontend.components.diff :as diff]
             [frontend.handler.plugin :as plugin-handler]
+            [frontend.fs.capacitor-fs :as capacitor-fs]
             [frontend.components.plugins :as plugin]
             [frontend.components.git :as git-component]
             [frontend.components.shell :as shell]
@@ -196,6 +197,10 @@
   (state/set-modal! srs/global-cards {:id :srs
                                       :label "flashcards__cp"}))
 
+(defmethod handle :modal/show-instruction [_]
+  (state/set-modal! capacitor-fs/instruction {:id :instruction
+                                              :label "instruction__cp"}))
+
 (defmethod handle :modal/show-themes-modal [_]
   (plugin/open-select-theme!))
 

src/main/frontend/ui.css

@@ -156,6 +156,25 @@
           }
       }
   }
+
+  &[label="instruction__cp"] {
+
+      .ui__modal-panel {
+          height: 90%;
+      }
+    
+      .panel-content {
+          height: 100%;
+      }
+  }
+}
+
+.instruction {
+    height: 40%;
+
+    @screen sm {
+        height: 70%;
+    }
 }
 
 html.is-native-andorid,