chore: introduce type icon

src/main/frontend/components/command_palette.css

@@ -43,34 +43,6 @@
 
     .search-result {
       @apply text-sm font-medium flex items-baseline;
-
-
-      &.highlight .search-result-icon {
-        color: var(--ls-selection-text-color);
-        border-color: var(--ls-selection-background-color);
-
-        &:before {
-          opacity: 0.5;
-          background: var(--ls-selection-background-color);
-        }
-      }
-    }
-
-    .search-result-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: transparent;
-      overflow: hidden;
-      color: var(--ls-secondary-text-color);
-
-      &:before {
-        @apply block absolute inset-0 ;
-        background: var(--ls-primary-background-color);
-        content: "";
-      }
     }
   }
 

src/main/frontend/components/search.cljs

@@ -62,10 +62,9 @@
             [:p {:class "m-0"} elements]))))))
 
 (rum/defc search-result-item
-  [{:keys [icon content class]}]
+  [icon content]
-  [:.search-result {:class class}
+  [:.search-result
-   [:.search-result-icon {:title icon}
+   (ui/type-icon icon)
-    (ui/icon icon {:extension? (not= icon "file")})]
    [:.self-center content]])
 
 (rum/defc block-search-result-item
@@ -194,10 +193,11 @@
 (defn- create-item-render
   [icon label name]
   (search-result-item
-   {:icon icon
+   {:name icon
     :class "highlight"
-    :content [:div.text.font-bold (str label ": ")
+    :extension? true}
-              [:span.ml-1 name]]}))
+   [:div.text.font-bold (str label ": ")
+    [:span.ml-1 name]]))
 
 (defn- search-item-render
   [search-q {:keys [type data alias]}]
@@ -219,12 +219,15 @@
         (when alias
           (let [target-original-name (model/get-page-original-name alias)]
             [:span.mr-2.text-sm.font-medium.mb-2 (str "Alias -> " target-original-name)]))
-        (search-result-item {:icon (if (model/whiteboard-page? data) "whiteboard" "page")
+        (search-result-item {:name (if (model/whiteboard-page? data) "whiteboard" "page")
-                             :content (highlight-exact-query data search-q)})]
+                             :extension? true
+                             :title (t (if (model/whiteboard-page? data) :search-item/whiteboard :search-item/page))}
+                            (highlight-exact-query data search-q))]
 
        :file
-       (search-result-item {:icon "file"
+       (search-result-item {:name "file"
-                            :content (highlight-exact-query data search-q)})
+                            :title (t :search-item/file)}
+                           (highlight-exact-query data search-q))
 
        :block
        (let [{:block/keys [page uuid]} data  ;; content here is normalized
@@ -234,11 +237,13 @@
              block (model/query-block-by-uuid uuid)
              content (:block/content block)]
          [:span {:data-block-ref uuid}
-          (search-result-item {:icon "block"
+          (search-result-item {:name "block"
-                               :content (if block
+                               :title (t :search-item/block)
-                                          (block-search-result-item repo uuid format content search-q search-mode)
+                               :extension? true}
-                                          (do (log/error "search result with non-existing uuid: " data)
+                              (if block
-                                              (str "Cache is outdated. Please click the 'Re-index' button in the graph's dropdown menu.")))})])
+                                (block-search-result-item repo uuid format content search-q search-mode)
+                                (do (log/error "search result with non-existing uuid: " data)
+                                    (str "Cache is outdated. Please click the 'Re-index' button in the graph's dropdown menu."))))])
 
        nil)]))
 
@@ -369,8 +374,9 @@
                                  svg/search
                                  [:span.ml-2 data]]
                         :page (when-let [original-name (model/get-page-original-name data)] ;; might be block reference
-                                (search-result-item {:icon "page" 
+                                (search-result-item {:name "page"
-                                                     :content original-name}))
+                                                     :extension? true}
+                                                    original-name))
                         nil))}))])
 
 (defn default-placeholder

src/main/frontend/components/sidebar.cljs

@@ -241,13 +241,16 @@
       :class "new-page-link"
       :options {:on-click #((close-sidebar-on-mobile!)
                             (state/pub-event! [:go/search]))}
-      :icon (ui/icon "page" {:extension? true})}
+      :icon (ui/type-icon {:name "new-page"
+                           :class "highlight"
+                           :extension? true})}
      {:title (t :left-side-bar/new-whiteboard)
       :class "new-whiteboard-link"
       :options {:on-click #((close-sidebar-on-mobile!)
                             (whiteboard/create-new-whiteboard!))}
-
+      :icon (ui/type-icon {:name "new-whiteboard"
-      :icon (ui/icon "whiteboard" {:extension? true})}])
+                           :class "highlight"
+                           :extension? true})}])
    {}))
 
 (rum/defc sidebar-nav

src/main/frontend/components/sidebar.css

@@ -287,10 +287,6 @@
         bottom: 0;
         left: calc(100% + 6px);
       }
-
-      i {
-        @apply text-xs rounded border mr-2 w-5 h-5 text-center;
-      }
     }
 
     #create-button {

src/main/frontend/dicts.cljc

@@ -45,6 +45,10 @@
         :search/result-for "Search result for "
         :search/items "items"
         :search/page-names "Search page names"
+        :search-item/whiteboard "Whiteboard"
+        :search-item/page "Page"
+        :search-item/file "File"
+        :search-item/block "Block"
         :help/context-menu "Block context menu"
         :help/fold-unfold "Fold/unfold blocks (when not in edit mode)"
         :help/markdown-syntax "Markdown syntax"

src/main/frontend/ui.cljs

@@ -930,6 +930,12 @@
                        (if extension? "tie tie" "ti ti"))}
               (dissoc opts :class :extension?))]))
 
+(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

@@ -352,3 +352,35 @@ html.is-mobile {
 .bg-quaternary {
   background-color: var(--ls-quaternary-background-color);
 }
+
+.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);
+    }
+  }
+}