enhance(mobile): onboarding graph picker for non-login user

src/main/frontend/components/onboarding/setups.cljs

@@ -67,8 +67,11 @@
 
 (rum/defcs picker < rum/reactive
   [_state onboarding-and-home?]
-  (let [parsing?    (state/sub :repo/parsing-files?)
-        native-ios? (mobile-util/native-ios?)]
+  (let [parsing?       (state/sub :repo/parsing-files?)
+        _              (state/sub :auth/id-token)
+        native-ios?    (mobile-util/native-ios?)
+        native-icloud? (not (string/blank? (state/sub [:mobile/container-urls :iCloudContainerUrl])))
+        logged?        (user-handler/logged-in?)]
 
     (setups-container
      :picker
@@ -81,7 +84,9 @@
 
        (if native-ios?
          ;; TODO: open for all native mobile platforms
-         (graph-picker/graph-picker-cp {:onboarding-and-home? onboarding-and-home?})
+         (graph-picker/graph-picker-cp {:onboarding-and-home? onboarding-and-home?
+                                        :logged? logged?
+                                        :native-icloud? native-icloud?})
 
          (if (or (nfs/supported?) (mobile-util/native-platform?))
            [:div.choose.flex.flex-col.items-center

src/main/frontend/components/repo.cljs

@@ -195,7 +195,7 @@
     (->>
      (concat repo-links
              [(when (seq repo-links) {:hr true})
-              {:title (t :new-graph) :options {:on-click #(page-handler/ls-dir-files! shortcut/refresh!)}}
+              {:title (t :new-graph) :options {:on-click #(state/pub-event! [:graph/setup-a-repo])}}
               {:title (t :all-graphs) :options {:href (rfe/href :repos)}}
               refresh-link
               reindex-link

src/main/frontend/handler/events.cljs

@@ -725,11 +725,14 @@
       (fs/watch-dir! dir))))
 
 (defmethod handle :graph/setup-a-repo [[_ opts]]
-  (if (mobile-util/native-ios?)
-    (do (state/set-modal!
-         #(graph-picker/graph-picker-cp {})
-         {:label "graph-setup"}))
-    (page-handler/ls-dir-files! st/refresh! opts)))
+  (let [opts' (merge {:picked-root-fn #(state/close-modal!)
+                      :native-icloud? (not (string/blank? (state/get-icloud-container-root-url)))
+                      :logged?        (user-handler/logged-in?)} opts)]
+    (if (mobile-util/native-ios?)
+      (do (state/set-modal!
+           #(graph-picker/graph-picker-cp opts')
+           {:label "graph-setup"}))
+      (page-handler/ls-dir-files! st/refresh! opts'))))
 
 (defmethod handle :file/alter [[_ repo path content]]
   (p/let [_ (file-handler/alter-file repo path content {:from-disk? true})]

src/main/frontend/handler/web/nfs.cljs

@@ -122,7 +122,7 @@
 (defn ^:large-vars/cleanup-todo ls-dir-files-with-handler!
   "Read files from directory and setup repo (for the first time setup a repo)"
   ([ok-handler] (ls-dir-files-with-handler! ok-handler nil))
-  ([ok-handler {:keys [empty-dir?-or-pred dir-result-fn ios-logseq-sync?]}]
+  ([ok-handler {:keys [empty-dir?-or-pred dir-result-fn picked-root-fn ios-logseq-sync?]}]
    (let [path-handles (atom {})
          electron? (util/electron?)
          mobile-native? (mobile-util/native-platform?)
@@ -149,6 +149,7 @@
                     (fn? empty-dir?-or-pred)
                     (empty-dir?-or-pred result)))
               root-handle (first result)
+              _ (when (fn? picked-root-fn) (picked-root-fn root-handle))
               dir-name (if nfs?
                          (gobj/get root-handle "name")
                          root-handle)

src/main/frontend/mobile/graph_picker.cljs

@@ -21,34 +21,52 @@
   ;; TODO: temporarily just load the existing folder
   (p/resolved (util/node-path.join root dirname)))
 
+(rum/defc toggle-item
+  [{:keys [on? disabled? title on-toggle]}]
+  (ui/button
+   [:span.flex.items-center.justify-between.w-full.py-1
+    [:strong title]
+    (ui/icon (if on? "toggle-right" "toggle-left"))]
+
+   :class (str "toggle-item " (when on? "is-on"))
+   :intent "logseq"
+   :on-mouse-down #(util/stop %)
+   :on-click #(when (fn? on-toggle)
+                (on-toggle (not on?)))))
+
 (rum/defc graph-picker-cp
-  [{:keys [onboarding-and-home?]}]
+  [{:keys [onboarding-and-home? logged? native-icloud?] :as opts}]
   (let [[step set-step!] (rum/use-state :init)
-        *input-ref  (rum/create-ref)
-        native-ios? (mobile-util/native-ios?)
-
-        open-picker #(page-handler/ls-dir-files!
-                      (fn []
-                        (shortcut/refresh!)))
-        on-create   (fn [input-val]
-                      (let [graph-name (util/safe-sanitize-file-name input-val)]
-                        (if (string/blank? graph-name)
-                          (notification/show! "Illegal graph folder name.")
-
-                          ;; create graph directory under Logseq document folder
-                          ;; TODO: icloud sync
-                          (when-let [root (state/get-local-container-root-url)]
-                            (-> (validate-graph-dirname root graph-name)
-                                (p/then (fn [graph-path]
-                                          (-> (fs/mkdir! graph-path)
-                                              (p/then (fn []
-                                                        (web-nfs/ls-dir-files-with-path! graph-path)
-                                                        (notification/show! (str "Create graph: " graph-name) :success))))))
-                                (p/catch (fn [^js e]
-                                           (notification/show! (str e) :error)
-                                           (js/console.error e)))
-                                (p/finally
-                                 #()))))))]
+        [sync-mode set-sync-mode!] (rum/use-state
+                                    (cond
+                                      logged? :logseq-sync
+                                      native-icloud? :icloud-sync))
+        icloud-sync-on? (= sync-mode :icloud-sync)
+        logseq-sync-on? (= sync-mode :logseq-sync)
+        *input-ref      (rum/create-ref)
+        native-ios?     (mobile-util/native-ios?)
+
+        open-picker     #(page-handler/ls-dir-files! shortcut/refresh! opts)
+        on-create       (fn [input-val]
+                          (let [graph-name (util/safe-sanitize-file-name input-val)]
+                            (if (string/blank? graph-name)
+                              (notification/show! "Illegal graph folder name.")
+
+                              ;; create graph directory under Logseq document folder
+                              ;; TODO: icloud sync
+                              (when-let [root (if icloud-sync-on? (state/get-icloud-container-root-url)
+                                                                  (state/get-local-container-root-url))]
+                                (-> (validate-graph-dirname root graph-name)
+                                    (p/then (fn [graph-path]
+                                              (-> (fs/mkdir! graph-path)
+                                                  (p/then (fn []
+                                                            (web-nfs/ls-dir-files-with-path! graph-path opts)
+                                                            (notification/show! (str "Create graph: " graph-name) :success))))))
+                                    (p/catch (fn [^js e]
+                                               (notification/show! (str e) :error)
+                                               (js/console.error e)))
+                                    (p/finally
+                                     #()))))))]
 
     (rum/use-effect!
      (fn []
@@ -100,13 +118,14 @@
           :ref         *input-ref
           :placeholder "What's the graph name?"}]
 
-        (ui/button
-         [:span.flex.items-center.justify-between.w-full.py-1
-          [:strong "Logseq sync"]
-          (ui/icon "toggle-right")]
+        (when logged?
+          (toggle-item {:title "Logseq sync"
+                        :on?   logseq-sync-on?}))
 
-         :intent "logseq"
-         :on-click #())
+        (when (and native-icloud? (not logseq-sync-on?))
+          (toggle-item {:title     "iCloud sync"
+                        :on?       icloud-sync-on?
+                        :on-toggle #(set-sync-mode! (if % :icloud-sync nil))}))
 
         [:div.flex.justify-between.items-center.pt-2
          (ui/button [:span.flex.items-center

src/main/frontend/mobile/index.css

@@ -199,12 +199,31 @@ html.is-zoomed-native-ios {
   }
 }
 
+
+.cp__graph-picker {
+  button.toggle-item {
+    @apply opacity-90 hover:text-inherit;
+
+    .ui__icon {
+      @apply scale-150;
+    }
+
+    &.is-on {
+      @apply opacity-100;
+
+      .ui__icon {
+        @apply text-indigo-600;
+      }
+    }
+  }
+}
+
 .ui__modal {
   &[label=graph-setup] {
     align-items: center;
 
     .ui__modal-panel {
-      transform: translate3d(0, -60px, 0);
+      transform: translate3d(0, -70px, 0);
     }
 
     .panel-content {