enhance(capacitor): create new page

src/main/capacitor/app.cljs

@@ -1,6 +1,7 @@
 (ns capacitor.app
   (:require ["@capacitor/app" :refer [App]]
             ["@capacitor/status-bar" :refer [StatusBar Style]]
+            ["./externals.js"]
             [frontend.db.react :as react]
             [frontend.util :as util]
             [rum.core :as rum]
@@ -26,20 +27,9 @@
       [:div.p-4
        [:strong "hello, logseq?"]])))
 
-(defn- sub-journals
-  []
-  (-> (react/q (fstate/get-current-repo)
-        [:frontend.worker.react/journals]
-        {:query-fn
-         (fn []
-           (p/let [{:keys [data]} (handler/<load-view-data nil {:journals? true})]
-             (remove nil? data)))}
-        nil)
-    util/react))
-
 (rum/defc journals-list < rum/reactive db-mixins/query
   []
-  (let [journals (sub-journals)]
+  (let [journals (handler/sub-journals)]
     [:ul
      (for [journal-id journals]
        (let [journal (db-util/entity journal-id)]
@@ -48,9 +38,33 @@
           (ionic/tabler-icon "calendar")
           [:span.pl-1 (:block/title journal)]]))]))
 
+(rum/defc create-page-input
+  [{:keys [close! reload-pages!]}]
+  (ionic/ion-alert
+    {:is-open true
+     :header "Create new page"
+     :onWillDismiss (fn [^js e]
+                      (let [^js detail (.-detail e)]
+                        (when-let [val (and (= "confirm" (.-role detail))
+                                         (aget (.-values (.-data detail)) 0))]
+                          (-> (handler/<create-page! val)
+                            (p/finally reload-pages!)))
+                        (close!)))
+     :onDidPresent (fn [^js e]
+                     (let [^js target (.-target e)]
+                       (when-let [input (.querySelector target "input")]
+                         (js/setTimeout #(.focus input)))))
+     :buttons [#js {:text "Cancel"
+                    :role "cancel"}
+               #js {:text "Confirm"
+                    :role "confirm"}]
+     :inputs [#js {:placeholder "page name"
+                   :auto-focus true}]}))
+
 (rum/defc home []
   (let [[all-pages set-all-pages!] (rum/use-state [])
         [reload set-reload!] (rum/use-state 0)
+        [page-input-open? set-page-input-open?] (rum/use-state false)
         [filtered-pages set-filtered-pages!] (rum/use-state [])]
 
     (rum/use-effect!
@@ -70,6 +84,9 @@
       [all-pages])
 
     (ionic/ion-content
+      (when page-input-open?
+        (create-page-input {:close! #(set-page-input-open? false)
+                            :reload-pages! #(set-reload! (inc reload))}))
       [:div.pt-6.px-6
        [:h1.text-3xl.font-mono.font-bold.py-2 "Current graph"]
        [:h2.py-1.text-lg (fstate/get-current-repo)]
@@ -82,8 +99,11 @@
          "All pages"
          [:small.text-xs.pl-2.opacity-50 (count filtered-pages)]]
 
-        (ionic/ion-button {:size "small" :fill "clear" :on-click #(set-reload! (inc reload))}
-          [:span {:slot "icon-only"} (ionic/tabler-icon "refresh")])]
+        [:div.flex.gap-1
+         (ionic/ion-button {:size "small" :fill "clear" :on-click #(set-page-input-open? true)}
+           [:span {:slot "icon-only"} (ionic/tabler-icon "plus")])
+         (ionic/ion-button {:size "small" :fill "clear" :on-click #(set-reload! (inc reload))}
+           [:span {:slot "icon-only"} (ionic/tabler-icon "refresh")])]]
        [:ul.mb-24.pt-2
         (for [page filtered-pages]
           (let [ident (some-> (:block/tags page) first :db/ident)]
@@ -154,6 +174,13 @@
   (let [nav-ref (rum/use-ref nil)
         [_ set-nav-root!] (state/use-nav-root)]
 
+    ;; global
+    (rum/use-effect!
+      (fn []
+        (some-> js/window.externalsjs
+          (.initGlobalListeners)))
+      [])
+
     ;; navigation
     (rum/use-effect!
       (fn []

src/main/capacitor/app.css

@@ -47,4 +47,11 @@ ion-textarea {
 
     background-color: var(--ion-color-light-tint);
   }
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus,
+[type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus,
+[type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus,
+[multiple]:focus, textarea:focus, select:focus {
+  box-shadow: none;
 }

src/main/capacitor/externals.js

@@ -0,0 +1,34 @@
+import { Keyboard } from '@capacitor/keyboard'
+
+function initGlobalListeners () {
+  console.debug('[externals] init global listeners')
+
+  const didShowHandle = (event) => {
+    const { keyboardHeight } = event
+    const alertWrapper = document.querySelector('.alert-wrapper')
+    if (alertWrapper) {
+      setTimeout(() => {
+        alertWrapper.style.setProperty('transform',
+          `translateY(-${keyboardHeight / 3}px)`, 'important')
+      }, 100)
+    }
+  }
+
+  const didHideHandle = () => {
+    const alertWrapper = document.querySelector('.alert-wrapper')
+    if (alertWrapper) {
+      alertWrapper.style.transform = 'translateY(0)'
+    }
+  }
+
+  Keyboard.addListener('keyboardWillShow', didShowHandle)
+  Keyboard.addListener('keyboardWillHide', didHideHandle)
+
+  return () => {
+    Keyboard.removeAllListeners()
+  }
+}
+
+window.externalsjs = {
+  initGlobalListeners,
+}

src/main/capacitor/handler.cljs

@@ -1,5 +1,7 @@
 (ns capacitor.handler
-  (:require [logseq.db :as ldb]
+  (:require [frontend.db.react :as react]
+            [frontend.util :as util]
+            [logseq.db :as ldb]
             [frontend.db.conn :as db-conn]
             [frontend.state :as fstate]
             [frontend.date :as date]
@@ -16,8 +18,23 @@
   (fstate/<invoke-db-worker :thread-api/get-view-data
     (fstate/get-current-repo) (:db/id view) opts))
 
-(defn ui-db []
+(defn local-db []
   (db-conn/get-db))
 
 (defn local-all-pages []
-  (some->> (ui-db) (ldb/get-all-pages) (sort-by :block/created-at) (reverse)))
+  (some->> (local-db) (ldb/get-all-pages) (sort-by :block/created-at) (reverse)))
+
+(defn sub-journals
+  []
+  (-> (react/q (fstate/get-current-repo)
+        [:frontend.worker.react/journals]
+        {:query-fn
+         (fn []
+           (p/let [{:keys [data]} (<load-view-data nil {:journals? true})]
+             (remove nil? data)))}
+        nil)
+    util/react))
+
+(defn <create-page!
+  [page-name]
+  (page-handler/<create! page-name {:redirect? false}))