enhance(ux): foldable section for the class page

src/main/frontend/components/objects.cljs

@@ -157,47 +157,49 @@
       [:div.flex.flex-col.gap-2.mt-2
 
        (ui/foldable
-        [:div.font-medium.opacity-50 "Tagged Nodes"]
-        [:div.mt-2
-         (views/view view-entity {:config config
-                                  :data data
-                                  :set-data! set-data!
-                                  :views-title (class-views class views view-entity {:set-view-entity! set-view-entity!
-                                                                                     :set-views! set-views!})
-                                  :columns columns
-                                  :add-new-object! (if (= :logseq.class/Asset (:db/ident class))
-                                                     (fn [_e]
-                                                       (shui/dialog-open!
-                                                        (fn []
-                                                          [:div.flex.flex-col.gap-2
-                                                           [:div.font-medium "Add assets"]
-                                                           (filepicker/picker
-                                                            {:on-change (fn [_e files]
-                                                                          (p/do!
-                                                                           (editor-handler/upload-asset! nil files :markdown editor-handler/*asset-uploading? true)
-                                                                           (set-data! (get-class-objects class))
-                                                                           (shui/dialog-close!)))})])))
-                                                     #(add-new-class-object! class set-data!))
-                                  :show-add-property? true
-                                  :add-property! (fn []
-                                                   (state/pub-event! [:editor/new-property {:block class
-                                                                                            :class-schema? true}]))
-                                  :on-delete-rows (fn [table selected-rows]
-                                                    (let [pages (filter ldb/page? selected-rows)
-                                                          blocks (remove ldb/page? selected-rows)]
-                                                      (p/do!
-                                                       (ui-outliner-tx/transact!
-                                                        {:outliner-op :delete-blocks}
-                                                        (when (seq blocks)
-                                                          (outliner-op/delete-blocks! blocks nil))
-                                                        (let [page-ids (map :db/id pages)
-                                                              tx-data (map (fn [pid] [:db/retract pid :block/tags (:db/id class)]) page-ids)]
-                                                          (when (seq tx-data)
-                                                            (outliner-op/transact! tx-data {:outliner-op :save-block}))))
-                                                       (set-data! (get-class-objects class))
-                                                       (when-let [f (get-in table [:data-fns :set-row-selection!])]
-                                                         (f {})))))})]
-        {:disable-on-pointer-down? true
+        [:div.font-medium.opacity-60.as-toggle
+         "Tagged Nodes"]
+         (fn []
+           [:div.mt-2
+            (views/view view-entity {:config config
+                                     :data data
+                                     :set-data! set-data!
+                                     :views-title (class-views class views view-entity {:set-view-entity! set-view-entity!
+                                                                                        :set-views! set-views!})
+                                     :columns columns
+                                     :add-new-object! (if (= :logseq.class/Asset (:db/ident class))
+                                                        (fn [_e]
+                                                          (shui/dialog-open!
+                                                            (fn []
+                                                              [:div.flex.flex-col.gap-2
+                                                               [:div.font-medium "Add assets"]
+                                                               (filepicker/picker
+                                                                 {:on-change (fn [_e files]
+                                                                               (p/do!
+                                                                                 (editor-handler/upload-asset! nil files :markdown editor-handler/*asset-uploading? true)
+                                                                                 (set-data! (get-class-objects class))
+                                                                                 (shui/dialog-close!)))})])))
+                                                        #(add-new-class-object! class set-data!))
+                                     :show-add-property? true
+                                     :add-property! (fn []
+                                                      (state/pub-event! [:editor/new-property {:block class
+                                                                                               :class-schema? true}]))
+                                     :on-delete-rows (fn [table selected-rows]
+                                                       (let [pages (filter ldb/page? selected-rows)
+                                                             blocks (remove ldb/page? selected-rows)]
+                                                         (p/do!
+                                                           (ui-outliner-tx/transact!
+                                                             {:outliner-op :delete-blocks}
+                                                             (when (seq blocks)
+                                                               (outliner-op/delete-blocks! blocks nil))
+                                                             (let [page-ids (map :db/id pages)
+                                                                   tx-data (map (fn [pid] [:db/retract pid :block/tags (:db/id class)]) page-ids)]
+                                                               (when (seq tx-data)
+                                                                 (outliner-op/transact! tx-data {:outliner-op :save-block}))))
+                                                           (set-data! (get-class-objects class))
+                                                           (when-let [f (get-in table [:data-fns :set-row-selection!])]
+                                                             (f {})))))})])
+         {:disable-on-pointer-down? true
          :default-collapsed? (:sidebar? config)})])))
 
 (rum/defcs class-objects < rum/reactive db-mixins/query mixins/container-id

src/main/frontend/components/page.cljs

@@ -254,7 +254,7 @@
          (if (and db-based? (or (ldb/class? block) (ldb/property? block)))
            [:div.mt-4.ml-2.-mb-1
             (ui/foldable
-             [:div.font-medium.opacity-50 {:class "pl-0.5"} "Notes"]
+             [:div.font-medium.as-toggle {:class "pl-0.5"} "Notes"]
              [:div.ml-1.-mb-2 blocks]
              {:disable-on-pointer-down? true})]
            blocks))])))

src/main/frontend/ui.cljs

@@ -600,7 +600,11 @@
                                             title-trigger?
                                             (assoc :on-pointer-down on-pointer-down
                                                    :class "cursor"))
-      [:div.flex.flex-row.items-center
+      [:div.flex.flex-row.items-center.ls-foldable-header
+       {:on-click (fn [^js e]
+                    (let [^js target (.-target e)]
+                      (when (some-> target (.closest ".as-toggle"))
+                        (reset! collapsed? (not @collapsed?)))))}
        (when-not (mobile-util/native-platform?)
          [:a.block-control.opacity-50.hover:opacity-100.mr-2
           (cond->

src/main/frontend/ui.css

@@ -324,3 +324,9 @@ input[type='range'] {
     @apply px-2;
   }
 }
+
+.ls-foldable-header {
+  .as-toggle {
+    @apply opacity-60 cursor-pointer select-none active:opacity-50;
+  }
+}