feat: replace all caret arrow with rotating-arrow component

src/main/frontend/components/block.cljs

@@ -1156,10 +1156,9 @@
                        (if collapsed?
                          (editor-handler/expand-block! uuid)
                          (editor-handler/collapse-block! uuid)))))}
-      [:span {:class (if control-show? "control-show" "control-hide")}
-         (cond
-           collapsed? (svg/caret-right)
-           has-child? (svg/caret-down))]]
+      (when
+       control-show?
+        (ui/rotating-arrow collapsed?))]
      [:a {:on-click (fn [e]
                       (bullet-on-click e block config uuid))}
       [:span.bullet-container.cursor

src/main/frontend/components/block.css

@@ -139,16 +139,6 @@
   }
 }
 
-.block-control {
-  .not-collapsed svg {
-    transform: rotate(90deg);
-  }
-
-  .arrow svg {
-    transition: all 100ms ease-in 0ms;
-  }
-}
-
 .block-control,
 .block-control:hover {
   text-decoration: none;

src/main/frontend/components/right_sidebar.cljs

@@ -188,9 +188,7 @@
              [:div.flex.flex-row.justify-center
               [:a.opacity-50.hover:opacity-100.flex.items-center.pr-1
                {:on-click #(state/sidebar-block-toggle-collapse! db-id)}
-               (if collapse?
-                 (svg/caret-right)
-                 (svg/caret-down))]
+               (ui/rotating-arrow collapse?)]
               [:div.ml-1.font-medium
                title]]
              (close #(state/sidebar-remove-block! idx))]

src/main/frontend/ui.cljs

@@ -524,6 +524,12 @@
    [:span.icon.flex.items-center svg/loading]
    [:span.text.pl-2 content]])
 
+(rum/defc rotating-arrow
+  [collapsed?]
+  [:span
+   {:class (if collapsed? "rotating-arrow collapsed" "rotating-arrow not-collapsed")}
+   (svg/caret-right)])
+
 (rum/defcs foldable <
   (rum/local false ::control?)
   (rum/local false ::collapsed?)
@@ -547,10 +553,7 @@
           :on-click (fn [e]
                       (util/stop e)
                       (swap! collapsed? not))}
-         [:span {:class (if @control? "control-show" "control-hide")}
-          (if @collapsed?
-            (svg/caret-right)
-            (svg/caret-down))]]
+         (when @control? (rotating-arrow @collapsed?))]
         (if (fn? header)
           (header @collapsed?)
           header)]]]
@@ -610,19 +613,19 @@
   (let [*mounted? (::mounted? state)
         mounted? @*mounted?]
     (Tippy (->
-           (merge {:arrow true
-                   :sticky true
-                   :theme "customized"
-                   :disabled (not (state/enable-tooltip?))
-                   :unmountHTMLWhenHide true
-                   :open @*mounted?
-                   :onShow #(reset! *mounted? true)
-                   :onHide #(reset! *mounted? false)}
-                  opts)
-           (assoc :html (if mounted?
-                          (when-let [html (:html opts)]
-                            (if (fn? html)
-                              (html)
-                              html))
-                          [:div {:key "tippy"} ""])))
-          child)))
+            (merge {:arrow true
+                    :sticky true
+                    :theme "customized"
+                    :disabled (not (state/enable-tooltip?))
+                    :unmountHTMLWhenHide true
+                    :open @*mounted?
+                    :onShow #(reset! *mounted? true)
+                    :onHide #(reset! *mounted? false)}
+                   opts)
+            (assoc :html (if mounted?
+                           (when-let [html (:html opts)]
+                             (if (fn? html)
+                               (html)
+                               html))
+                           [:div {:key "tippy"} ""])))
+           child)))

src/main/frontend/ui.css

@@ -187,3 +187,11 @@
     @apply py-1.5 sm:leading-4 sm:text-xs;
   }
 }
+
+.rotating-arrow.not-collapsed svg {
+  transform: rotate(90deg);
+}
+
+.rotating-arrow svg {
+  transition: all 100ms ease-in 0ms;
+}