enhance(capacitor): bootstrap & ui components

package.json

@@ -64,6 +64,7 @@
         "cljs:watch": "clojure -M:cljs watch app electron",
         "cljs:storybook-watch": "clojure -M:cljs watch stories-dev",
         "gulp:capacitor-new-watch": "gulp capacitorNewWatch",
+        "css:capacitor-new-build": "postcss tailwind.capacitor.css -o static/style.css --verbose --env production",
         "css:capacitor-new-watch": "cross-env TAILWIND_MODE=watch postcss tailwind.capacitor.css -o static/capacitor/style.css --verbose --watch",
         "cljs:capacitor-new-watch": "clojure -M:cljs watch capacitor-new",
         "cljs:app-watch": "clojure -M:cljs watch app",

src/main/capacitor/app.cljs

@@ -44,21 +44,20 @@
 
 (rum/defc journals-calendar-modal
   [{:keys [close!]}]
-  (ionic/ion-modal
-    {:is-open true
-     :mode "ios"
-     :onWillDismiss (fn [] (close!))
-     :class "journals-calendar-modal ion-datetime-button-overlay"}
-    (ionic/ion-datetime {:presentation "date"
-                         :onIonChange (fn [^js e]
-                                        (let [val (.-value (.-detail e))]
-                                          (let [page-name (frontend-date/journal-name (gdate/Date. (js/Date. val)))
-                                                nav-to-journal! #(pages-util/nav-to-block! % {:reload-pages! (fn [] ())})]
-                                            (if-let [journal (handler/local-page page-name)]
-                                              (nav-to-journal! journal)
-                                              (-> (handler/<create-page! page-name)
-                                                (p/then #(nav-to-journal! (handler/local-page page-name)))))
-                                            (close!))))})))
+  (ui/simple-modal
+    {:close! close!}
+    (fn []
+      (ionic/ion-datetime
+        {:presentation "date"
+         :onIonChange (fn [^js e]
+                        (let [val (.-value (.-detail e))]
+                          (let [page-name (frontend-date/journal-name (gdate/Date. (js/Date. val)))
+                                nav-to-journal! #(pages-util/nav-to-block! % {:reload-pages! (fn [] ())})]
+                            (if-let [journal (handler/local-page page-name)]
+                              (nav-to-journal! journal)
+                              (-> (handler/<create-page! page-name)
+                                (p/then #(nav-to-journal! (handler/local-page page-name)))))
+                            (close!))))}))))
 
 (rum/defc create-page-input
   [{:keys [close! reload-pages!]}]

src/main/capacitor/bootstrap.cljs

@@ -42,12 +42,6 @@
   (js/window.addEventListener "online" handle-connection-change)
   (js/window.addEventListener "offline" handle-connection-change))
 
-;(defn- get-system-info
-;  []
-;  (when (util/electron?)
-;    (p/let [info (ipc/ipc :system/info)]
-;      (state/set-state! :system/info (bean/->clj info)))))
-
 (defn start!
   [render]
 
@@ -69,6 +63,7 @@
 
   (react/run-custom-queries-when-idle!)
 
+  ;; sentry for the worker messaging
   (events/run!)
 
   (p/do!
@@ -94,7 +89,9 @@
 
     (util/<app-wake-up-from-sleep-loop (atom false))
 
-    (persist-var/load-vars)))
+    ;; DB version not support for the persistent strategy
+    ;; (persist-var/load-vars)
+    ))
 
 (defn stop! []
   (prn "stop!"))

src/main/capacitor/components/ui.cljs

@@ -2,13 +2,22 @@
   (:require [frontend.handler.notification :as notification]
             [frontend.rum :as r]
             [frontend.state :as fstate]
-            ["react-transition-group" :refer [CSSTransition TransitionGroup]]
+            [react-transition-group :refer [CSSTransition TransitionGroup]]
             [rum.core :as rum]
             [capacitor.ionic :as ionic]))
 
 (defonce transition-group (r/adapt-class TransitionGroup))
 (defonce css-transition (r/adapt-class CSSTransition))
 
+(rum/defc safe-page-container
+  [content {:keys [header-content page-props content-props]}]
+  (ionic/ion-page
+    (merge {:class "app-safe-page"} page-props)
+    (some-> header-content (ionic/ion-header))
+    (ionic/ion-content
+      (merge {:class "ion-padding"} content-props)
+      content)))
+
 (rum/defc notification-clear-all
   []
   [:div.ui__notifications-content
@@ -91,3 +100,14 @@
                             (notification-clear-all))))
             items (if clear-all (cons clear-all notifications) notifications)]
         (doall items)))))
+
+(rum/defc simple-modal
+  [{:keys [close! as-page? modal-props]} children]
+  (let [{:keys [class]} modal-props]
+    (ionic/ion-modal
+      (merge modal-props
+        {:is-open true
+         :onWillDismiss (fn [] (close!))
+         :class (str class (when (not (true? as-page?)) " ion-datetime-button-overlay"))})
+      (if (fn? children)
+        (children) children))))

src/main/capacitor/pages/utils.cljs

@@ -1,6 +1,17 @@
 (ns capacitor.pages.utils
   (:require [capacitor.state :as state]
-            [capacitor.pages.blocks :as page-blocks]))
+            [capacitor.pages.blocks :as page-blocks]
+            [capacitor.components.ui :as ui]
+            [cljs-bean.core :as bean]))
+
+;; https://ionicframework.com/docs/api/nav#push
+(defn nav-push!
+  [component & opts]
+  (some-> @state/*nav-root
+    (.push component (bean/->js opts))))
+
+(defn nav-pop! []
+  (some-> @state/*nav-root (.pop)))
 
 (defn nav-to-block!
   [page-or-block opts]