From e78d630bbb87148c69940bcaa45a988796df177a Mon Sep 17 00:00:00 2001
From: charlie <xyhp915@qq.com>
Date: Wed, 11 Jun 2025 14:55:59 +0800
Subject: [PATCH] enhance(mobile): add action header for the page block modal

---
 src/main/capacitor/components/app.css    | 14 +++++++++++++-
 src/main/capacitor/components/modal.cljs | 20 ++++++++++++++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/main/capacitor/components/app.css b/src/main/capacitor/components/app.css
index e07955b3ba..bd8a901dbe 100644
--- a/src/main/capacitor/components/app.css
+++ b/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;
diff --git a/src/main/capacitor/components/modal.cljs b/src/main/capacitor/components/modal.cljs
index 18fac395c3..132d0709f0 100644
--- a/src/main/capacitor/components/modal.cljs
+++ b/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)))))))