enhance(mobile): add action header for the page block modal

src/main/capacitor/components/app.css

@@ -26,7 +26,7 @@ html.plt-capacitor.plt-android {
   ion-modal {
     ion-content {
       #app-container-wrapper {
-        @apply pt-8;
+        @apply pt-0;
       }
     }
   }
@@ -99,6 +99,18 @@ ion-buttons {
   }
 }
 
+.block-modal-page {
+  > ion-header {
+    @apply pt-5 pb-1 px-6 flex justify-between bg-white/10;
+  }
+
+  > ion-content {
+    #app-container-wrapper {
+      @apply relative -top-6;
+    }
+  }
+}
+
 ion-tab-bar {
   box-shadow: 0 0 1px #999999;
   padding-top: 4px;

src/main/capacitor/components/modal.cljs

@@ -21,9 +21,17 @@
        :mode "ios" ;; force card modal for android
        :expand "block"}
 
-      (ion/content {:class "ion-padding scrolling"}
-        (ui/classic-app-container-wrap
-          (page/page-cp (db/entity [:block/uuid (:block/uuid block)])))
-                  (mobile-bar/mobile-bar)
-                  (when show-action-bar?
-                    (action-bar/action-bar))))))
+      (ion/page
+        {:class "block-modal-page"}
+        (ion/header
+          [:span.opacity-40.active:opacity-60
+           {:on-click #(swap! state/*modal-data assoc :open? false)}
+           (ion/tabler-icon "chevron-down" {:size 16 :stroke 3})]
+          [:span.opacity-40.active:opacity-60 (ion/tabler-icon "dots-vertical" {:size 18 :stroke 2})])
+
+        (ion/content {:class "ion-padding scrolling"}
+          (ui/classic-app-container-wrap
+            (page/page-cp (db/entity [:block/uuid (:block/uuid block)])))
+          (mobile-bar/mobile-bar)
+          (when show-action-bar?
+            (action-bar/action-bar)))))))