enhance: plus button to add a block in the end of a page

src/main/frontend/components/page.cljs

@@ -109,6 +109,18 @@
      [:span.opacity-50
       "Click here to edit..."]]]])
 
+(rum/defc add-button
+  [page-name]
+  [:div.ls-block.flex-1.flex-col.rounded-sm {:style {:width "100%"}}
+   [:div.flex.flex-row
+    [:div {:style {:height 24
+                   :margin-left 2}}
+     [:a.add-button-link
+      {:on-click (fn []
+                   (when-let [block (editor-handler/api-insert-new-block! "" {:page page-name})]
+                     (js/setTimeout #(editor-handler/edit-block! block :max nil (:block/uuid block)) 100)))}
+      svg/plus-circle]]]])
+
 (rum/defc page-blocks-cp < rum/reactive
   db-mixins/query
   [repo page-e {:keys [sidebar? preview?] :as config}]
@@ -137,7 +149,10 @@
                              config)
               hiccup-config (common-handler/config-with-document-mode hiccup-config)
               hiccup (block/->hiccup page-blocks hiccup-config {})]
-          (page-blocks-inner page-name page-blocks hiccup sidebar? preview?))))))
+          [:div
+           (page-blocks-inner page-name page-blocks hiccup sidebar? preview?)
+           (when (and (not block?) (not config/publishing?))
+             (add-button page-name))])))))
 
 (defn contents-page
   [page]

src/main/frontend/components/svg.css

@@ -2,15 +2,17 @@
   svg.add-button > .circle {
     opacity: 1;
   }
+
+  svg.add-button {
+    opacity: 1;
+  }
 }
 
 svg.add-button {
   display: block;
-  margin-left: 12px;
-  margin-top: 6.5px;
   width: 20px;
   height: 20px;
-  opacity: 0.5;
+  opacity: 0.4;
 
   > .circle {
     opacity: 0;