enhance: bottom bar to show undo mode

src/main/frontend/components/bottom_bar.cljs

@@ -0,0 +1,25 @@
+(ns frontend.components.bottom-bar
+  "Bottom bar for editor's status, the general rule is to avoid using this
+  to present user a simple and clean UI."
+  (:require [frontend.ui :as ui]
+            [frontend.state :as state]
+            [rum.core :as rum]
+            [frontend.db :as db]
+            [frontend.modules.editor.undo-redo :as undo-redo]))
+
+(rum/defc bar < rum/reactive
+  []
+  (let [page-only-mode? (state/sub :history/page-only-mode?)
+        undo-page-id    (state/sub :history/page)]
+    (prn "render bar " {:page-only-mode? page-only-mode?
+                        :undo-page-id undo-page-id})
+    (when (or (and page-only-mode? undo-page-id)
+              ;; others
+              )
+      [:div#ls-bottom-bar
+       [:div.items
+        (when undo-page-id
+          [:div.item.flex.items-center
+           (str "Undo: " (:block/original-name (db/entity undo-page-id)))
+           [:a.inline-flex.ml-1 {:on-click undo-redo/toggle-undo-redo-mode!}
+            (ui/icon "x")]])]])))

src/main/frontend/components/bottom_bar.css

@@ -0,0 +1,7 @@
+#ls-bottom-bar {
+    @apply shadow-lg text-sm p-1 fixed bottom-0 rounded-md;
+
+    .items {
+        @apply flex flex-row flex-1;
+    }
+}

src/main/frontend/components/container.cljs

@@ -12,6 +12,7 @@
             [frontend.components.svg :as svg]
             [frontend.components.theme :as theme]
             [frontend.components.widgets :as widgets]
+            [frontend.components.bottom-bar :as bottom-bar]
             [frontend.config :as config]
             [frontend.context.i18n :refer [t]]
             [frontend.db :as db]
@@ -506,7 +507,7 @@
      (left-sidebar {:left-sidebar-open? left-sidebar-open?
                     :route-match route-match})
 
-     [:div#main-content-container.scrollbar-spacing.w-full.flex.justify-center.flex-row.outline-none
+     [:div#main-content-container.scrollbar-spacing.w-full.flex.justify-center.flex-row.outline-none.relative
 
       {:tabIndex "-1"
        :data-is-margin-less-pages margin-less-pages?}
@@ -551,7 +552,9 @@
           main-content])
 
        (when onboarding-and-home?
-         (onboarding/intro onboarding-and-home?))]]]))
+         (onboarding/intro onboarding-and-home?))]
+
+      (bottom-bar/bar)]]))
 
 (defonce sidebar-inited? (atom false))
 ;; TODO: simplify logic

src/main/frontend/modules/editor/undo_redo.cljs

@@ -44,7 +44,8 @@
    (when-let [id (if (= :undo action)
                    (get-page-from-block @(get-undo-stack))
                    (get-page-from-block @(get-redo-stack)))]
-     (swap! state/state assoc :history/page id))))
+     (swap! state/state assoc :history/page id)
+     id)))
 
 (defn push-undo
   [txs]
@@ -218,6 +219,17 @@
         (state/pub-event! [:whiteboard/redo e]))
       (assoc e :txs-op new-txs))))
 
+(defn toggle-undo-redo-mode!
+  []
+  (if (:history/page-only-mode? @state/state)
+    (swap! state/state assoc
+           :history/page-only-mode? false
+           :history/page nil)
+    (when-let [page-id (get-history-page :undo)]
+      (swap! state/state assoc
+            :history/page-only-mode? true
+            :history/page page-id))))
+
 (defn pause-listener!
   []
   (reset! *pause-listener true))

src/main/frontend/modules/shortcut/config.cljs

@@ -15,6 +15,7 @@
             [frontend.handler.export :as export-handler]
             [frontend.handler.whiteboard :as whiteboard-handler]
             [frontend.handler.plugin-config :as plugin-config-handler]
+            [frontend.modules.editor.undo-redo :as undo-redo]
             [frontend.modules.shortcut.dicts :as dicts]
             [frontend.modules.shortcut.before :as m]
             [frontend.state :as state]
@@ -258,7 +259,7 @@
                                     :fn      editor-handler/zoom-out!}
 
    :editor/toggle-undo-redo-mode   {:binding "mod+c mod+u"
-                                    :fn      state/toggle-undo-redo-mode!}
+                                    :fn      undo-redo/toggle-undo-redo-mode!}
 
    :ui/toggle-brackets             {:binding "mod+c mod+b"
                                     :fn      config-handler/toggle-ui-show-brackets!}

src/main/frontend/state.cljs

@@ -2095,13 +2095,3 @@ Similar to re-frame subscriptions"
 (defn clear-user-info!
   []
   (storage/remove :user-groups))
-
-(defn toggle-undo-redo-mode!
-  []
-  (if (:history/page-only-mode? @state)
-    (swap! state assoc
-           :history/page-only-mode? false
-           :history/page nil)
-    (swap! state assoc
-           :history/page-only-mode? true
-           :history/page nil)))