fix: merge issues

src/main/frontend/components/sidebar.cljs

@@ -234,7 +234,7 @@
      [:button#create-button
       {:on-click toggle-fn}
       [:<>
-       (ui/icon "plus")
+       (ui/icon "plus" {:font? true})
        [:span.mx-1 (t :left-side-bar/create)]]])
    (->>
     [{:title (t :left-side-bar/new-page)
@@ -288,24 +288,24 @@
        [:div.nav-header.flex.gap-1.flex-col
         (let [page (:page default-home)]
           (if (and page (not (state/enable-journals? (state/get-current-repo))))
-          (sidebar-item
-           {:class            "home-nav"
-            :title            page
-            :on-click-handler route-handler/redirect-to-home!
-            :active           (and (not srs-open?)
-                                   (= route-name :page)
-                                   (= page (get-in route-match [:path-params :name])))
-            :icon             "home"})
-          (sidebar-item
-           {:class            "journals-nav"
-            :active           (and (not srs-open?)
-                                   (or (= route-name :all-journals) (= route-name :home)))
-            :title            (t :left-side-bar/journals)
-            :on-click-handler (fn [e]
-                                (if (gobj/get e "shiftKey")
-                                  (route-handler/sidebar-journals!)
-                                  (route-handler/go-to-journals!)))
-            :icon             "calendar"})))
+            (sidebar-item
+             {:class            "home-nav"
+              :title            page
+              :on-click-handler route-handler/redirect-to-home!
+              :active           (and (not srs-open?)
+                                     (= route-name :page)
+                                     (= page (get-in route-match [:path-params :name])))
+              :icon             "home"})
+            (sidebar-item
+             {:class            "journals-nav"
+              :active           (and (not srs-open?)
+                                     (or (= route-name :all-journals) (= route-name :home)))
+              :title            (t :left-side-bar/journals)
+              :on-click-handler (fn [e]
+                                  (if (gobj/get e "shiftKey")
+                                    (route-handler/sidebar-journals!)
+                                    (route-handler/go-to-journals!)))
+              :icon             "calendar"})))
 
         (when (state/enable-flashcards? (state/get-current-repo))
           [:div.flashcards-nav
@@ -347,10 +347,11 @@
          (if enable-whiteboards?
            (create-dropdown)
            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md.new-page-link
-            {:on-click #((close-sidebar-on-mobile!)
+            {:on-click (fn []
+                         (and (util/sm-breakpoint?)
+                              (state/toggle-left-sidebar!))
                          (state/pub-event! [:go/search]))}
-            ;; TODO: check following line
-            (ui/icon "circle-plus mr-3" {:style {:font-size 20}})
+            (ui/icon "circle-plus" {:style {:font-size 20}})
             [:span.flex-1 (t :right-side-bar/new-page)]]))]]]))
 
 (rum/defc left-sidebar < rum/reactive

src/main/frontend/components/sidebar.css

@@ -304,7 +304,7 @@
     }
 
     #create-button {
-      @apply p-2 text-sm font-medium rounded-md w-full border;
+      @apply flex items-center justify-center p-2 text-sm font-medium rounded-md w-full border;
       background-color: var(--ls-secondary-background-color) !important;
       border-color: transparent;
 

src/main/frontend/ui.cljs

@@ -5,6 +5,7 @@
             ["react-textarea-autosize" :as TextareaAutosize]
             ["react-tippy" :as react-tippy]
             ["react-transition-group" :refer [CSSTransition TransitionGroup]]
+            [camel-snake-kebab.core :as csk]
             [cljs-bean.core :as bean]
             [clojure.string :as string]
             [datascript.core :as d]
@@ -30,18 +31,8 @@
             [goog.object :as gobj]
             [lambdaisland.glogi :as log]
             [medley.core :as medley]
-            [electron.ipc :as ipc]
-            ["react-resize-context" :as Resize]
-            ["react-textarea-autosize" :as TextareaAutosize]
-            ["react-tippy" :as react-tippy]
-            ["react-transition-group" :refer [CSSTransition TransitionGroup]]
-            ["@logseq/react-tweet-embed" :as react-tweet-embed]
-            ["react-intersection-observer" :as react-intersection-observer]
-            [rum.core :as rum]
-            [camel-snake-kebab.core :as csk]
-            [frontend.db-mixins :as db-mixins]
-            [frontend.mobile.util :as mobile-util]
-            [goog.functions :refer [debounce]]))
+            [promesa.core :as p]
+            [rum.core :as rum]))
 
 (defonce transition-group (r/adapt-class TransitionGroup))
 (defonce css-transition (r/adapt-class CSSTransition))
@@ -970,6 +961,12 @@
               {:class (str "ls-icon-" class)}
               (f (merge {:size 18} (r/map-keys->camel-case opts)))])))))))
 
+(rum/defc type-icon
+  [{:keys [name class title extension?]}]
+  [:.type-icon {:class class
+                :title title}
+   (icon name {:extension? extension?})])
+
 (rum/defc with-shortcut < rum/reactive
   < {:key-fn (fn [key pos] (str "shortcut-" key pos))}
   [shortcut-key position content]

src/main/frontend/ui.css

@@ -353,6 +353,34 @@ html.is-mobile {
   background-color: var(--ls-quaternary-background-color);
 }
 
-.ui__icon {
-  display: inline-block;
-}
+.type-icon {
+  @apply text-xs text-center flex items-center justify-center rounded border mr-2 relative;
+
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border-color: var(--ls-primary-background-color);
+  overflow: hidden;
+  color: var(--ls-primary-text-color);
+
+  .ti,
+  .tie {
+    z-index: 1;
+  }
+
+  &:before {
+    @apply block absolute inset-0 ;
+    background: var(--ls-primary-background-color);
+    content: " ";
+  }
+
+  &.highlight {
+    color: var(--ls-selection-text-color);
+    border-color: var(--ls-selection-background-color);
+
+    &:before {
+      opacity: 0.5;
+      background: var(--ls-selection-background-color);
+    }
+  }
+}