enhance(mobile): set up Logseq sync when create a logseq sync graph

src/main/frontend/components/encryption.cljs

@@ -158,7 +158,7 @@
            ;; password strength checker
            (when-not (string/blank? @*password)
              [:<>
-              [:div.input-hints.text-sm.py-2.px-3.rounded.mb-2.-mt-1.5.flex.items-center.space-x-3
+              [:div.input-hints.text-sm.py-2.px-3.rounded.mb-2.-mt-1.5.flex.items-center.sm:space-x-3.strength-wrap
                (let [included-set (set (:contains pw-strength))]
                  (for [i ["lowercase" "uppercase" "number" "symbol"]
                        :let [included? (contains? included-set i)]]

src/main/frontend/components/file_sync.css

@@ -461,8 +461,12 @@
       @apply flex-nowrap md:flex-wrap;
       background-color: var(--ls-primary-background-color);
 
+      &.strength-wrap {
+        @apply flex-wrap;
+      }
+      
       .strength-item {
-        @apply flex items-center leading-none opacity-60 mr-2;
+        @apply whitespace-nowrap flex items-center leading-none opacity-60;
 
         .ti {
           @apply scale-75;

src/main/frontend/mobile/graph_picker.cljs

@@ -59,9 +59,19 @@
                                 (-> (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/then
+                                                   (fn []
+                                                     (web-nfs/ls-dir-files-with-path!
+                                                      graph-path (merge
+                                                                  {:logseq-sync-on
+                                                                   logseq-sync-on?
+
+                                                                   :ok-handler
+                                                                   (fn []
+                                                                     (when logseq-sync-on?
+                                                                       (state/pub-event! [:sync/create-remote-graph (state/get-current-repo)])))}
+                                                                  opts))
+                                                     (notification/show! (str "Create graph: " graph-name) :success))))))
                                     (p/catch (fn [^js e]
                                                (notification/show! (str e) :error)
                                                (js/console.error e)))
@@ -112,20 +122,22 @@
 
        ;; step 1
        :new-graph
-       [:div.flex.flex-col.w-full.space-y-4.faster-fade-in
+       [:div.flex.flex-col.w-full.space-y-3.faster-fade-in
         [:input.form-input.block
          {:auto-focus  true
           :ref         *input-ref
           :placeholder "What's the graph name?"}]
 
-        (when logged?
-          (toggle-item {:title "Logseq sync"
-                        :on?   logseq-sync-on?}))
+        [:div.flex.flex-col
+         (when logged?
+           (toggle-item {:title     "Logseq sync"
+                         :on?       logseq-sync-on?
+                         :on-toggle #(set-sync-mode! (if % :logseq-sync (if native-icloud? :icloud-sync nil)))}))
 
-        (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))}))
+         (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

@@ -202,7 +202,14 @@ html.is-zoomed-native-ios {
 
 .cp__graph-picker {
   button.toggle-item {
-    @apply opacity-90 hover:text-inherit;
+    opacity: .5;
+    background: transparent !important;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      color: inherit;
+      opacity: .5;
+    }
 
     .ui__icon {
       @apply scale-150;
@@ -223,7 +230,7 @@ html.is-zoomed-native-ios {
     align-items: center;
 
     .ui__modal-panel {
-      transform: translate3d(0, -70px, 0);
+      transform: translate3d(0, -78px, 0);
     }
 
     .panel-content {
@@ -231,7 +238,7 @@ html.is-zoomed-native-ios {
     }
 
     .cp__graph-picker {
-      padding: 58px 20px 26px 20px;
+      padding: 58px 20px 20px 20px;
       background: var(--ls-search-background-color);
 
       > h1 {