Emoji page identifiers + sidebar tweaks (#3014)

* feat: add emoji identifiers to pages

* enhance: clean up left sidebar styles

* misc cleanup

* enhance: make it clearer when you are hovering over a nav-content-item header

* refactor: clarify classname for .nav-content-item.header

Co-authored-by: Tienson Qin <[email protected]>

resources/css/common.css

@@ -850,6 +850,32 @@ h1.title {
   font-weight: 600;
 }
 
+.title .page-emoji {
+  margin-right: 12px;
+}
+
+.left-sidebar-inner .recent .page-emoji,
+.left-sidebar-inner .favorites .page-emoji {
+  margin-right: 8px;
+  width: 1.1em;
+  text-align: center;
+  display: inline-block;
+  color: #aaa;
+}
+
+.favorites li.favorite-item,
+.recent    li.recent-item {
+  margin: 0.1rem 0;
+}
+
+.left-sidebar-inner > .wrap {
+  height: 100%;
+}
+
+.left-sidebar-inner .flex-column-spacer {
+  flex: 1 1 0%;
+}
+
 .block-highlight,
 .content .selected {
   transition: background-color 0.15s;

src/main/frontend/components/page.cljs

@@ -225,7 +225,7 @@
   {:will-update (fn [state]
                   (assoc state ::title-value (atom (second (:rum/args state)))))}
   (rum/local false ::edit?)
-  [state page-name title format fmt-journal?]
+  [state page-name emoji title format fmt-journal?]
   (when title
     (let [*title-value (get state ::title-value)
           *edit? (get state ::edit?)
@@ -271,6 +271,7 @@
                                       (when (and (not hls-file?) (not fmt-journal?))
                                         (reset! *edit? true))))}
          [:h1.title {:style {:margin-left -2}}
+          (when (not= emoji "") [:span.page-emoji emoji])
           title]]))))
 
 ;; A page is just a logical block
@@ -302,10 +303,11 @@
                                               :block/original-name path-page-name
                                               :block/uuid (db/new-block-id)}]))
                        (db/pull [:block/name page-name])))
-              {:keys [title] :as properties} (:block/properties page)
+              {:keys [title emoji] :as properties} (:block/properties page)
               page-name (:block/name page)
               page-original-name (:block/original-name page)
               title (or title page-original-name page-name)
+              emoji (or emoji "")
               today? (and
                       journal?
                       (= page-name (string/lower-case (date/journal-name))))
@@ -325,7 +327,7 @@
                        (not block?))
               [:div.flex.flex-row.space-between
                [:div.flex-1.flex-row
-                (page-title page-name title format fmt-journal?)]
+                (page-title page-name emoji title format fmt-journal?)]
                (when (not config/publishing?)
                  [:div.flex.flex-row
                   (when plugin-handler/lsp-enabled?

src/main/frontend/components/sidebar.cljs

@@ -51,7 +51,7 @@
 
   [:div.nav-content-item.is-expand
    {:class class}
-   [:div.hd.items-center.mb-2
+   [:div.header.items-center.mb-1
     {:on-click (fn [^js/MouseEvent e]
                  (let [^js target (.-target e)
                        ^js parent (.closest target ".nav-content-item")]
@@ -82,7 +82,7 @@
     (< delta 14)))
 
 (rum/defc page-name
-  [name]
+  [name emoji]
   (let [original-name (db-model/get-page-original-name name)]
     [:a {:on-click (fn [e]
                      (let [name (util/safe-lower-case name)]
@@ -94,12 +94,20 @@
                             :page
                             {:page page-entity}))
                          (route-handler/redirect-to-page! name))))}
+     [:span.page-emoji emoji]
      (pdf-assets/fix-local-asset-filename original-name)]))
 
+(defn get-page-emoji [page-entity]
+  (let [default-emoji "◦"
+        from-properties (get-in (into {} page-entity) [:block/properties :emoji])]
+    (or
+     (when (not= from-properties "") from-properties)
+     default-emoji))) ;; Fall back to default if emoji is undefined or empty
+
 (rum/defcs favorite-item <
   (rum/local nil ::up?)
   (rum/local nil ::dragging-over)
-  [state t name]
+  [state t name emoji]
   (let [up? (get state ::up?)
         dragging-over (get state ::dragging-over)
         target (state/sub :favorites/dragging)]
@@ -123,14 +131,14 @@
                                                    :up? (move-up? e)})
                  (reset! up? nil)
                  (reset! dragging-over nil))}
-     (page-name name)]))
+     (page-name name emoji)]))
 
 (rum/defc favorites < rum/reactive
   [t]
   (nav-content-item
    [:a.flex.items-center.text-sm.font-medium.rounded-md
     (ui/icon "star mr-1" {:style {:font-size 18}})
-    [:span.flex-1.uppercase {:style {:padding-top 2}}
+    [:span.flex-1.ml-1 {:style {:padding-top 2}}
      (t :left-side-bar/nav-favorites)]]
 
    {:class "favorites"
@@ -143,19 +151,20 @@
                         (remove string/blank?)
                         (filter string?))]
      (when (seq favorites)
-       [:ul.favorites
+       [:ul.favorites.text-sm
         (for [name favorites]
           (when-not (string/blank? name)
-            (when (db/entity [:block/name (util/safe-lower-case name)])
-                (favorite-item t name))))]))))
+            (when-let [entity (db/entity [:block/name (util/safe-lower-case name)])]
+              (let [emoji (get-page-emoji entity)]
+                (favorite-item t name emoji)))))]))))
 
 (rum/defc recent-pages
   < rum/reactive db-mixins/query
   [t]
   (nav-content-item
    [:a.flex.items-center.text-sm.font-medium.rounded-md
-    (ui/icon "history mr-1" {:style {:font-size 18}})
-    [:span.flex-1.uppercase {:style {:padding-top 2}}
+    (ui/icon "history mr-2" {:style {:font-size 18}})
+    [:span.flex-1 {:style {:padding-top 2}}
      (t :left-side-bar/nav-recent-pages)]]
 
    {:class "recent"}
@@ -163,11 +172,11 @@
    (let [pages (->> (db/sub-key-value :recent/pages)
                     (remove string/blank?)
                     (filter string?))]
-     [:ul
+     [:ul.text-sm
       (for [name pages]
-        (when (db/entity [:block/name (util/safe-lower-case name)])
-          [:li {:key name}
-           (page-name name)]))])))
+        (when-let [entity (db/entity [:block/name (util/safe-lower-case name)])]
+          [:li.recent-item {:key name}
+           (page-name name (get-page-emoji entity))]))]))) ;; TODO: pass in the real emoji
 
 (rum/defcs flashcards < db-mixins/query rum/reactive
   {:did-mount (fn [state]
@@ -199,32 +208,43 @@
                                    [".favorites" ".recent" ".dropdown-wrapper" ".nav-header"])
                          (close-modal-fn)))}
          [:div.flex.flex-col.pb-4.wrap
-          [:nav.flex-1.px-2.space-y-1 {:aria-label "Sidebar"}
+          [:nav.px-2.space-y-1 {:aria-label "Sidebar"}
            (repo/repos-dropdown)
 
            [:div.nav-header
-            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:on-click route-handler/go-to-journals!}
-             (ui/icon "calendar mr-3" {:style {:font-size 20}})
-             [:span.flex-1 "Journals"]]
-
-            (flashcards)
-
-            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:href (rfe/href :graph)}
-             (ui/icon "hierarchy mr-3" {:style {:font-size 20}})
-             [:span.flex-1 "Graph view"]]
+            (when true
+             [:div.journals-nav
+              [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
+               {:on-click route-handler/go-to-journals!}
+               (ui/icon "calendar mr-3" {:style {:font-size 20}})
+               [:span.flex-1 "Journals"]]])
+
+            [:div.flashcards-nav
+             (flashcards)]
+
+            [:div.graph-view-nav
+             [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
+              {:href (rfe/href :graph)}
+              (ui/icon "hierarchy mr-3" {:style {:font-size 20}})
+              [:span.flex-1 "Graph view"]]]
+
+            [:div.all-pages-nav
+             [:a.all-pages-nav.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
+              {:href (rfe/href :all-pages)}
+              (ui/icon "files mr-3" {:style {:font-size 20}})
+              [:span.flex-1 "All pages"]]]]]
 
-            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:href (rfe/href :all-pages)}
-             (ui/icon "files mr-3" {:style {:font-size 20}})
-             [:span.flex-1 "All pages"]]
+          (favorites t)
 
-            (when-not config/publishing?
-              [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:on-click #(state/pub-event! [:go/search])}
-               (ui/icon "circle-plus mr-3" {:style {:font-size 20}})
-               [:span.flex-1 "New page"]])]]
+          (recent-pages t)
 
-          (favorites t)
+          [:div.flex-column-spacer] ;; Push following objects to the bottom
 
-          (recent-pages t)]]))))
+          [:nav.px-2.space-y-1 {:aria-label "Sidebar"}
+           (when-not config/publishing?
+             [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:on-click #(state/pub-event! [:go/search])}
+              (ui/icon "circle-plus mr-3" {:style {:font-size 20}})
+              [:span.flex-1 "New page"]])]]]))))
 
 (rum/defc sidebar-mobile-sidebar < rum/reactive
   [{:keys [open? left-sidebar-open? close-fn route-match]}]

src/main/frontend/components/sidebar.css

@@ -102,13 +102,15 @@
   .nav-content-item {
     padding: 32px 0 0 0;
 
-    > .hd {
+    > .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       user-select: none;
       cursor: pointer;
-      padding: 0 18px;
+      padding: 4px 18px;
+      padding-top: 4px;
+      margin: -4px 0;
 
       > span {
         > a {
@@ -124,12 +126,18 @@
           &:last-child {
             transform: translateY(-6px) translateX(2px) rotate(90deg);
             transform-origin: center center;
-            transition: .25s transform;
+            transition: .15s transform;
           }
         }
       }
 
       &:hover {
+        background-color: var(--ls-tertiary-background-color);
+
+        * {
+          opacity: 1 !important;
+        }
+
         > span {
           > a {
             display: block;
@@ -176,7 +184,7 @@
     }
 
     &.is-expand {
-      > .hd > span > a {
+      > .header > span > a {
         &:last-child {
           transform: translateY(2px) translateX(-3px);
         }