improve(mobile): WIP onboarding for set-up a graph

package.json

@@ -138,7 +138,8 @@
         "threads": "1.6.5",
         "url": "^0.11.0",
         "yargs-parser": "20.2.4",
-        "path-complete-extname": "1.0.0"
+        "path-complete-extname": "1.0.0",
+        "sanitize-filename": "1.6.3"
     },
     "resolutions": {
         "pixi-graph-fork/@pixi/app": "6.2.0",

src/main/frontend/handler/notification.cljs

@@ -14,7 +14,7 @@
 
 (defn show!
   ([content]
-   (show! content :info true nil 1500))
+   (show! content :info true nil 2000))
   ([content status]
    (show! content status true nil 1500))
   ([content status clear?]

src/main/frontend/mobile/graph_picker.cljs

@@ -1,22 +1,86 @@
 (ns frontend.mobile.graph-picker
-  (:require [rum.core :as rum]
-            [frontend.ui :as ui]
-            [frontend.handler.notification :as notification]))
+  (:require
+   [clojure.string :as string]
+   [rum.core :as rum]
+   [frontend.ui :as ui]
+   [frontend.handler.notification :as notification]
+   [frontend.handler.page :as page-handler]
+   [frontend.util :as util]
+   [frontend.modules.shortcut.core :as shortcut]
+   [frontend.state :as state]
+   [promesa.core :as p]))
+
+(defn validate-graph-dirname
+  [root dirname]
+
+  ;; TODO: call plugin api
+  (p/resolved (util/node-path.join root dirname)))
 
 (rum/defc graph-picker-cp
   []
-  [:div.flex.flex-col.w-full.px-10.space-y-4.pt-8
-   (ui/button
-    [:span.flex.items-center.justify-between.w-full.py-1
-     [:strong "Create a new graph"]
-     (ui/icon "chevron-right")]
+  (let [[step set-step!] (rum/use-state :init)
+        *input-ref (rum/create-ref)
+
+        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
+                         (when-let [root (state/get-local-container-root-url)]
+                           (-> (validate-graph-dirname root graph-name)
+                               (p/then #(notification/show! (str "Create graph: " %)))
+                               (p/finally
+                                #(notification/show! graph-name)))))))]
+
+    [:div.cp__graph-picker.px-10.py-10.w-full
+
+     (case step
+       ;; step 0
+       :init
+       [:div.flex.flex-col.w-full.space-y-4
+        (ui/button
+         [:span.flex.items-center.justify-between.w-full.py-1
+          [:strong "Create a new graph"]
+          (ui/icon "chevron-right")]
+
+         :on-click #(set-step! :new-graph))
+
+        (ui/button
+         [:span.flex.items-center.justify-between.w-full.py-1
+          [:strong "Select an existing graph"]
+          (ui/icon "folder-plus")]
+
+         :intent "logseq"
+         :on-click #(page-handler/ls-dir-files!
+                     (fn []
+                       (shortcut/refresh!))))]
+
+       ;; step 1
+       :new-graph
+       [:div.flex.flex-col.w-full.space-y-4.faster-fade-in
+        [:input.form-input.block
+         {:auto-focus  true
+          :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")]
 
-    :on-click #(notification/show! "Hi Graph :)"))
+         :intent "logseq"
+         :on-click #())
 
-   (ui/button
-    [:span.flex.items-center.justify-between.w-full.py-1
-     [:strong "Select an existing graph"]
-     (ui/icon "folder-plus")]
+        [:div.flex.justify-between.items-center.pt-2
+         (ui/button [:span.flex.items-center
+                     (ui/icon "chevron-left" {:size 18}) "Back"]
+                    :intent "logseq"
+                    :on-click #(set-step! :init))
 
-    :intent "logseq"
-    :on-click #(notification/show! "Hi Folder :)"))])
+         (ui/button "Create"
+                    :on-click
+                    #(let [val (util/trim-safe (.-value (rum/deref *input-ref)))]
+                       (if (string/blank? val)
+                         (.focus (rum/deref *input-ref))
+                         (on-create val))))]])]))

src/main/frontend/state.cljs

@@ -1924,3 +1924,13 @@ Similar to re-frame subscriptions"
 (defn get-onboarding-whiteboard?
   []
   (get-in @state [:whiteboard/onboarding-whiteboard?]))
+
+(defn get-local-container-root-url
+  []
+  (when (mobile-util/native-ios?)
+    (get-in @state [:mobile/container-urls :localContainerUrl])))
+
+(defn get-icloud-container-root-url
+  []
+  (when (mobile-util/native-ios?)
+    (get-in @state [:mobile/container-urls :iCloudContainerUrl])))

src/main/frontend/util.cljc

@@ -8,6 +8,7 @@
             ["@capacitor/status-bar" :refer [^js StatusBar Style]]
             ["grapheme-splitter" :as GraphemeSplitter]
             ["remove-accents" :as removeAccents]
+            ["sanitize-filename" :as sanitizeFilename]
             ["check-password-strength" :refer [passwordStrength]]
             [frontend.loader :refer [load]]
             [cljs-bean.core :as bean]
@@ -72,7 +73,9 @@
        (when-let [^js ret (and (string? input)
                                (not (string/blank? input))
                                (passwordStrength input))]
-         (bean/->clj ret)))))
+         (bean/->clj ret)))
+     (defn safe-sanitize-file-name [s]
+       (sanitizeFilename (str s)))))
 
 #?(:cljs
    (defn ios?