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

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

@@ -10,9 +10,11 @@
             [frontend.util :as util]
             [frontend.handler.web.nfs :as nfs]
             [frontend.mobile.util :as mobile-util]
+            [frontend.mobile.graph-picker :as graph-picker]
             [frontend.handler.notification :as notification]
             [frontend.handler.external :as external-handler]
             [frontend.modules.shortcut.core :as shortcut]
+            [frontend.handler.user :as user-handler]
             [clojure.string :as string]
             [goog.object :as gobj]))
 
@@ -65,7 +67,8 @@
 
 (rum/defcs picker < rum/reactive
   [_state]
-  (let [parsing? (state/sub :repo/parsing-files?)]
+  (let [parsing?    (state/sub :repo/parsing-files?)
+        native-ios? (mobile-util/native-ios?)]
 
     (setups-container
      :picker
@@ -73,30 +76,34 @@
       [:section.a
        [:strong "Let’s get you set up."]
        [:small (str "Where on your " DEVICE " do you want to save your work?")
-        (when (mobile-util/native-platform?)
+        (when (and (mobile-util/native-platform?) (not native-ios?))
           (mobile-intro))]
 
-       (if (or (nfs/supported?) (mobile-util/native-platform?))
-         [:div.choose.flex.flex-col.items-center
-          {:on-click #(page-handler/ls-dir-files!
-                       (fn []
-                         (shortcut/refresh!)))}
-          [:i]
-          [:div.control
-           [:label.action-input.flex.items-center.justify-center.flex-col
-            {:disabled parsing?}
+       (if native-ios?
+         ;; TODO: open for all native mobile platforms
+         (graph-picker/graph-picker-cp)
 
-            (if parsing?
-              (ui/loading "")
-              [[:strong "Choose a folder"]
-               [:small "Open existing directory or Create a new one"]])]]]
-         [:div.px-5
-          (ui/admonition :warning
-                         [:p "It seems that your browser doesn't support the "
-                          [:a {:href   "https://web.dev/file-system-access/"
-                               :target "_blank"}
-                           "new native filesystem API"]
-                          [:span ", please use any Chromium 86+ based browser like Chrome, Vivaldi, Edge, etc. Notice that the API doesn't support mobile browsers at the moment."]])])]
+         (if (or (nfs/supported?) (mobile-util/native-platform?))
+           [:div.choose.flex.flex-col.items-center
+            {:on-click #(page-handler/ls-dir-files!
+                         (fn []
+                           (shortcut/refresh!)))}
+            [:i]
+            [:div.control
+             [:label.action-input.flex.items-center.justify-center.flex-col
+              {:disabled parsing?}
+
+              (if parsing?
+                (ui/loading "")
+                [[:strong "Choose a folder"]
+                 [:small "Open existing directory or Create a new one"]])]]]
+           [:div.px-5
+            (ui/admonition :warning
+                           [:p "It seems that your browser doesn't support the "
+                            [:a {:href   "https://web.dev/file-system-access/"
+                                 :target "_blank"}
+                             "new native filesystem API"]
+                            [:span ", please use any Chromium 86+ based browser like Chrome, Vivaldi, Edge, etc. Notice that the API doesn't support mobile browsers at the moment."]])]))]
       [:section.b.flex.items-center.flex-col
        [:p.flex
         [:i.as-flex-center (ui/icon "zoom-question" {:style {:fontSize "22px"}})]

src/main/frontend/handler/notification.cljs

@@ -13,6 +13,8 @@
   (state/set-state! :notification/contents nil))
 
 (defn show!
+  ([content]
+   (show! content :info true nil 1500))
   ([content status]
    (show! content status true nil 1500))
   ([content status clear?]

src/main/frontend/mobile/graph_picker.cljs

@@ -0,0 +1,22 @@
+(ns frontend.mobile.graph-picker
+  (:require [rum.core :as rum]
+            [frontend.ui :as ui]
+            [frontend.handler.notification :as notification]))
+
+(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")]
+
+    :on-click #(notification/show! "Hi 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 #(notification/show! "Hi Folder :)"))])

src/main/frontend/ui.cljs

@@ -36,6 +36,8 @@
             [promesa.core :as p]
             [rum.core :as rum]))
 
+(declare icon)
+
 (defonce transition-group (r/adapt-class TransitionGroup))
 (defonce css-transition (r/adapt-class CSSTransition))
 (defonce textarea (r/adapt-class (gobj/get TextareaAutosize "default")))
@@ -216,29 +218,15 @@
     (let [svg
           (case status
             :success
-            [:svg.h-6.w-6.text-green-400
-             {:stroke "var(--ls-success-color)", :viewBox "0 0 24 24", :fill "none"}
-             [:path
-              {:d               "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-               :stroke-width    "2"
-               :stroke-linejoin "round"
-               :stroke-linecap  "round"}]]
+            (icon "circle-check" {:class "text-green-500" :size "22"})
+
             :warning
-            [:svg.h-6.w-6.text-yellow-500
-             {:stroke "var(--ls-warning-color)", :viewBox "0 0 24 24", :fill "none"}
-             [:path
-              {:d               "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-               :stroke-width    "2"
-               :stroke-linejoin "round"
-               :stroke-linecap  "round"}]]
-
-            [:svg.h-6.w-6.text-red-500
-             {:view-box "0 0 20 20", :fill "var(--ls-error-color)"}
-             [:path
-              {:clip-rule "evenodd"
-               :d
-               "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-               :fill-rule "evenodd"}]])]
+            (icon "alert-circle" {:class "text-yellow-500" :size "22"})
+
+            :error
+            (icon "circle-x" {:class "text-red-500" :size "22"})
+
+            (icon "info-circle" {:class "text-indigo-500" :size "22"}))]
       [:div.ui__notifications-content
        {:style
         (when (or (= state "exiting")
@@ -264,13 +252,8 @@
             [:button.inline-flex.text-gray-400.focus:outline-none.focus:text-gray-500.transition.ease-in-out.duration-150.notification-close-button
              {:on-click (fn []
                           (notification/clear! uid))}
-             [:svg.h-5.w-5
-              {:fill "currentColor", :view-Box "0 0 20 20"}
-              [:path
-               {:clip-rule "evenodd"
-                :d
-                "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                :fill-rule "evenodd"}]]]]]]]]])))
+
+            (icon "x" {:fill "currentColor"})]]]]]]])))
 
 (rum/defc notification < rum/reactive
   []