enhance(mobile): ux for the asset images

resources/capacitor/index.html

@@ -26,6 +26,8 @@ const portal = new MagicPortal(worker);
 <script defer src="./js/interact.min.js"></script>
 <script defer src="./js/marked.min.js"></script>
 <script defer src="./js/eventemitter3.umd.min.js"></script>
+<script defer src="./js/photoswipe.umd.min.js"></script>
+<script defer src="./js/photoswipe-lightbox.umd.min.js"></script>
 <script defer src="./js/react.production.min.js"></script>
 <script defer src="./js/react-dom.production.min.js"></script>
 <script defer src="./js/prop-types.min.js"></script>

src/main/capacitor/components/app.css

@@ -91,6 +91,10 @@ ul {
   }
 }
 
+.bg-background {
+  @apply bg-gray-01;
+}
+
 ion-textarea {
   textarea {
     @apply !p-1 min-h-[120px];
@@ -103,6 +107,10 @@ ion-buttons {
   }
 }
 
+.pswp__top-bar {
+  @apply top-8;
+}
+
 .app-graph-select {
   ion-button {
     &::part(native) {

src/main/frontend/components/block.cljs

@@ -314,6 +314,7 @@
      {:key "resize-asset-container"
       :on-pointer-down util/stop
       :on-click (fn [e]
+                  (util/stop e)
                   (when (= "IMG" (some-> (.-target e) (.-nodeName)))
                     (open-lightbox! e)))
       :ref *el-ref}
@@ -394,7 +395,8 @@
                                       [:span.flex.items-center.gap-1.text-red-700
                                        (ui/icon "trash") (t :asset/delete)])])
                                  ])
-                              {:align :start}))}
+                              {:align :start
+                               :dropdown-menu? true}))}
                (shui/tabler-icon "dots-vertical")))])])]))
 
 ;; TODO: store image height and width for better ux

src/main/frontend/extensions/lightbox.cljs

@@ -5,6 +5,7 @@
   [images]
   (let [options {:dataSource images :pswpModule js/window.PhotoSwipe :showHideAnimationType "fade"}
         ^js lightbox (js/window.PhotoSwipeLightbox. (bean/->js options))]
+    (set! (.-photoLightbox js/window) lightbox)
     (doto lightbox
       (.init)
       (.loadAndOpen 0))))

src/main/frontend/mobile/core.cljs

@@ -40,6 +40,10 @@
     (fn []
       (when (false?
               (cond
+                ;; lightbox
+                (and (js/document.querySelector ".pswp"))
+                (some-> js/window.photoLightbox (.destroy))
+
                 (not-empty (cc-ui/get-modal))
                 (cc-ui/close-modal!)