enhance: show search button by default

resources/css/common.css

@@ -736,28 +736,6 @@ a.navigation {
     transition: .3s;
 }
 
-/* search-field */
-
-#search-wrapper {
-    opacity: 0;
-    transition: .3s;
-    padding-right: 12px;
-}
-
-#search-wrapper:hover,
-#search-wrapper:focus-within {
-    opacity: 1;
-}
-
-#search>.inner {
-    max-width: 100%;
-    border-radius: 4px;
-}
-
-#search_field:focus {
-    background: var(--ls-search-background-color);
-}
-
 /* text mark/highlight */
 
 mark {
@@ -801,17 +779,6 @@ a {
     transition: .3s;
 }
 
-/* search-field */
-
-.dark-theme #search_field {
-    background: var(--ls-search-background-color);
-    transition: background .3s;
-}
-
-.dark-theme #search_field:focus {
-    box-shadow: 0px 0px 20px 0px rgba(18, 18, 18, .3);
-}
-
 .page-reference:hover {
     background: var(--ls-secondary-background-color);
 }

src/main/frontend/components/search.cljs

@@ -121,7 +121,7 @@
 
 (defn- leave-focus
   []
-  (when-let [input (gdom/getElement "search_field")]
+  (when-let [input (gdom/getElement "search-field")]
     (.blur input)))
 
 (defonce search-timeout (atom nil))
@@ -247,7 +247,7 @@
     (rum/with-context [[t] i18n/*tongue-context*]
       [:div#search.flex-1.flex
        [:div.inner
-        [:label.sr-only {:for "search_field"} (t :search)]
+        [:label.sr-only {:for "search-field"} (t :search)]
         [:div#search-wrapper.relative.w-full.text-gray-400.focus-within:text-gray-600
          [:div.absolute.inset-y-0.flex.items-center.pointer-events-none {:style {:left 6}}
           [:svg.h-5.w-5
@@ -257,7 +257,7 @@
              "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
              :clip-rule "evenodd"
              :fill-rule "evenodd"}]]]
-         [:input#search_field.block.w-full.h-full.pr-3.py-2.rounded-md.focus:outline-none.placeholder-gray-500.focus:placeholder-gray-400.sm:text-sm.sm:bg-transparent
+         [:input#search-field.block.w-full.h-full.pr-3.py-2.rounded-md.focus:outline-none.placeholder-gray-500.focus:placeholder-gray-400.sm:text-sm.sm:bg-transparent
           {:style {:padding-left "2rem"}
            :placeholder (t :search)
            :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here

src/main/frontend/components/search.css

@@ -5,14 +5,43 @@
 }
 
 #search-wrapper svg {
-  color: var(--ls-search-icon-color, #9fa6b2);
+    color: var(--ls-search-icon-color, #9fa6b2);
+    opacity: 0.3;
+    transition: .3s;
 }
 
-#search-wrapper:focus-within svg {
-  color: var(--ls-link-text-hover-color, #4b5563);
+#search-wrapper:hover svg, #search-wrapper:focus-within svg {
+    color: var(--ls-link-text-hover-color, #4b5563);
+    opacity: 0.8;
 }
 
-#search_field {
+#search-field {
   background-color: var(--ls-search-background-color, #fff);
   color: var(--ls-secondary-text-color, #161e2e);
+  transition: background .3s;
+  max-width: 545px;
+  opacity: 0;
+}
+
+#search-wrapper {
+    transition: .3s;
+    padding-right: 12px;
+}
+
+#search-field:hover,
+#search-field:focus-within {
+    opacity: 1;
+}
+
+#search>.inner {
+    max-width: 100%;
+    border-radius: 4px;
+}
+
+#search-field:focus {
+    background: var(--ls-search-background-color);
+}
+
+.dark-theme #search-field:focus {
+    box-shadow: 0px 0px 20px 0px rgba(18, 18, 18, .3);
 }

src/main/frontend/handler/route.cljs

@@ -94,7 +94,7 @@
 
 (defn go-to-search!
   []
-  (when-let [element (gdom/getElement "search_field")]
+  (when-let [element (gdom/getElement "search-field")]
     (.focus element)))
 
 (defn go-to-journals!

src/main/frontend/handler/search.cljs

@@ -18,7 +18,7 @@
   (swap! state/state assoc
          :search/result nil
          :search/q "")
-  (when-let [input (gdom/getElement "search_field")]
+  (when-let [input (gdom/getElement "search-field")]
     (gobj/set input "value" "")))
 
 (defn rebuild-indices!