fix: search input issues

src/main/electron/listener.cljs

@@ -128,6 +128,8 @@
                      (fn [data]
                        (let [data' (bean/->clj data)]
                          (state/set-state! [:ui/find-in-page :matches] data')
+                         (state/set-state! [:ui/find-in-page :searching?] false)
+                         (ui/focus-element "search-in-page-input")
                          true)))
 
   (js/window.apis.on "loginCallback"

src/main/frontend/components/find_in_page.cljs

@@ -6,81 +6,89 @@
             [frontend.handler.search :as search-handler]
             [goog.dom :as gdom]
             [goog.functions :refer [debounce]]
-            [frontend.mixins :as mixins]
-            [clojure.string :as string]))
-
-(defn focus-input!
-  []
-  (when-let [element ^js (gdom/getElement "search-in-page-input")]
-    (.focus element)))
+            [frontend.mixins :as mixins]))
 
 (defn find-in-page!
   []
-  (search-handler/electron-find-in-page! focus-input!))
+  (search-handler/electron-find-in-page!))
 
 (defonce debounced-search (debounce find-in-page! 500))
 
-(defn- enter-to-search
+(defn enter-to-search
   [e]
   (when (and (= (.-code e) "Enter")
              (not (state/editing?)))
     (let [shift? (.-shiftKey e)]
       (state/set-state! [:ui/find-in-page :backward?] shift?)
-      (search-handler/electron-find-in-page!))))
+      (debounced-search))))
 
 (rum/defc search-inner <
-  {:did-mount (fn [state]
-                (js/document.addEventListener "keyup" enter-to-search)
-                state)
-   :will-unmount (fn [state]
-                   (js/document.removeEventListener "keyup" enter-to-search)
-                   state)}
   (mixins/event-mixin
    (fn [state]
      (mixins/hide-when-esc-or-outside
       state
       :node (gdom/getElement "search-in-page")
       :on-hide (fn []
                  (search-handler/electron-exit-find-in-page!)))))
-  [{:keys [matches]}]
+  [{:keys [matches searching? match-case? q]}]
   [:div#search-in-page.flex.flex-row.absolute.top-2.right-4.shadow-lg.px-2.py-1.faster-fade-in.items-center
-   [:div.flex
-    [:input#search-in-page-input.form-input.block.w-48.sm:text-sm.sm:leading-5.my-2.border-none.mr-4.outline-none
+   [:div.flex.w-48
+    (when searching? (ui/loading nil))
+    [:input#search-in-page-input.form-input.block.sm:text-sm.sm:leading-5.my-2.border-none.mr-4.outline-none
      {:auto-focus true
+      :style {:visibility (when searching? "hidden")}
+      :type (if searching? "password" "text")
       :placeholder "Find in page"
+      :aria-label "Find in page"
+      :value q
+      :on-key-down enter-to-search
       :on-change (fn [e]
                    (let [value (util/evalue e)]
                      (state/set-state! [:ui/find-in-page :q] value)
-                     (if (string/blank? value)
-                       (search-handler/electron-exit-find-in-page!)
-                       (debounced-search))))}]]
+
+                       (debounced-search)))}]]
    [:div.px-4.text-sm.opacity-80
     (:activeMatchOrdinal matches 0)
     "/"
     (:matches matches 0)]
 
    (ui/button
-     (ui/icon "caret-up" {:style {:font-size 18}})
-     :on-click (fn []
-                 (state/set-state! [:ui/find-in-page :backward?] true)
-                 (search-handler/electron-find-in-page!))
-     :intent "link"
-     :small? true)
+    (ui/icon "letter-case")
+    :on-click (fn []
+                (state/update-state! [:ui/find-in-page :match-case?] not)
+                (debounced-search))
+    :intent "link"
+    :small? true
+    :class (str (when match-case? "active ") "text-lg"))
+
+   (ui/button
+    (ui/icon "caret-up")
+    :on-click (fn []
+                (state/set-state! [:ui/find-in-page :backward?] true)
+                (debounced-search))
+    :intent "link"
+    :small? true
+    :class "text-lg"
+    :title "Previous result")
 
    (ui/button
-     (ui/icon "caret-down" {:style {:font-size 18}})
-     :on-click (fn []
-                 (state/set-state! [:ui/find-in-page :backward?] false)
-                 (search-handler/electron-find-in-page!))
-     :intent "link"
-     :small? true)
+    (ui/icon "caret-down")
+    :on-click (fn []
+                (state/set-state! [:ui/find-in-page :backward?] false)
+                (debounced-search))
+    :intent "link"
+    :small? true
+    :class "text-lg"
+    :title "Next result")
 
    (ui/button
-     [:span.px-1 "X"]
-     :on-click (fn []
-                 (search-handler/electron-exit-find-in-page!))
-     :intent "link"
-     :small? true)])
+    (ui/icon "x")
+    :on-click (fn []
+                (search-handler/electron-exit-find-in-page!))
+    :intent "link"
+    :small? true
+    :class "text-lg"
+    :title "Close")])
 
 (rum/defc search < rum/reactive
   []

src/main/frontend/components/find_in_page.css

@@ -6,7 +6,8 @@
       box-shadow: none;
   }
 
-  .ui__button[intent='link'], .ui__button[intent='link']:focus {
+  .ui__button[intent='link'],
+  .ui__button[intent='link']:focus {
       border-color: none;
   }
 

src/main/frontend/handler/search.cljs

@@ -49,25 +49,31 @@
                search-key (if more? :search/more-result :search/result)]
            (swap! state/state assoc search-key result)))))))
 
+(defn open-find-in-page!
+  []
+  (when (util/electron?)
+    (let [{:keys [active?]} (:ui/find-in-page @state/state)]
+      (when-not active? (state/set-state! [:ui/find-in-page :active?] true)))))
+
 (defn electron-find-in-page!
-  ([]
-   (electron-find-in-page! nil))
-  ([on-success]
-   (when (util/electron?)
-     (let [{:keys [active? backward? q]} (:ui/find-in-page @state/state)
-           option (cond->
-                    {}
+  []
+  (when (util/electron?)
+    (let [{:keys [active? backward? match-case? q]} (:ui/find-in-page @state/state)
+          option (cond->
+                  {}
 
-                    (not active?)
-                    (assoc :findNext true)
+                   (not active?)
+                   (assoc :findNext true)
 
-                    backward?
-                    (assoc :forward false))]
-       (when-not active? (state/set-state! [:ui/find-in-page :active?] true))
-       (when-not (string/blank? q)
-         (ipc/ipc "find-in-page" q option)
-         (when on-success
-           (js/setTimeout #(on-success) 500)))))))
+                   backward?
+                   (assoc :forward false)
+
+                   match-case?
+                   (assoc :matchCase true))]
+      (open-find-in-page!)
+      (when-not (string/blank? q)
+          (state/set-state! [:ui/find-in-page :searching?] true)
+          (ipc/ipc "find-in-page" q option)))))
 
 (defn electron-exit-find-in-page!
   [& {:keys [clear-state?]

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

@@ -251,7 +251,7 @@
 
    :go/electron-find-in-page       {:binding "mod+f"
                                     :fn      #(when (util/electron?)
-                                                (search-handler/electron-find-in-page!))}
+                                                (search-handler/open-find-in-page!))}
 
    :go/journals                    {:binding "g j"
                                     :fn      route-handler/go-to-journals!}

src/main/frontend/ui.cljs

@@ -166,7 +166,7 @@
    opts))
 
 (defn button
-  [text & {:keys [background href class intent on-click small? large?]
+  [text & {:keys [background href class intent on-click small? large? title]
            :or   {small? false large? false}
            :as   option}]
   (let [klass (when-not intent ".bg-indigo-600.hover:bg-indigo-700.focus:border-indigo-700.active:bg-indigo-700.text-center")
@@ -176,6 +176,7 @@
     [:button.ui__button
      (merge
       {:type  "button"
+       :title title
        :class (str (util/hiccup->class klass) " " class)}
       (dissoc option :background :class :small? :large?)
       (when href
@@ -274,6 +275,11 @@
   []
   (gdom/getElement "main-content-container"))
 
+(defn focus-element
+  [element]
+  (when-let [element ^js (gdom/getElement element)]
+    (.focus element)))
+
 (defn get-scroll-top []
   (.-scrollTop (main-node)))
 

src/main/frontend/ui.css

@@ -243,6 +243,10 @@ html.is-mobile {
     @apply text-white;
   }
 
+  &.active {
+    color: var(--ls-link-text-color);
+  }
+
   &[intent='logseq'] {
     @apply focus:border-gray-500 dark:hover:text-gray-200;