feat(frontend): improve search form ux

2 files changed, 60 insertions, 8 deletions

diff --git a/src/frontend/tubo/components/navigation.cljs b/src/frontend/tubo/components/navigation.cljs
index 4934990..daa1bd5 100644
--- a/src/frontend/tubo/components/navigation.cljs
+++ b/src/frontend/tubo/components/navigation.cljs
@@ -1,12 +1,59 @@
 (ns tubo.components.navigation
   (:require
+   [reagent.core :as r]
    [re-frame.core :as rf]
-   [tubo.events :as events]))
+   [tubo.events :as events]
+   [tubo.routes :as routes]))
 
-(defn back-button [service-color]
-  [:div.flex.items-center
-   [:button.py-4.pl-2.sm:pl-0
-    {:on-click #(rf/dispatch [::events/history-back])}
-    [:i.fa-solid.fa-chevron-left
-     {:style {:color service-color}}]
-    [:span " Back"]]])
+(defn navigation-buttons [service-color]
+  [:div.flex.items-center.text-white.ml-4
+   [:button.mx-2.outline-none.focus:ring-transparent
+    {:on-click #(rf/dispatch [::events/history-go -1])}
+    [:i.fa-solid.fa-arrow-left]]
+   [:button.mx-2.outline-none.focus:ring-transparent
+    {:on-click #(rf/dispatch [::events/history-go 1])}
+    [:i.fa-solid.fa-arrow-right]]])
+
+(defn search-form []
+  (let [!query (r/atom "")
+        !input (r/atom nil)]
+    (fn []
+      (let [search-query      @(rf/subscribe [:search-query])
+            show-search-form? @(rf/subscribe [:show-search-form])
+            service-id        @(rf/subscribe [:service-id])]
+        [:form.relative.flex.items-center.text-white.ml-4
+         {:class (when-not show-search-form? "hidden")
+          :on-submit
+          (fn [e]
+            (.preventDefault e)
+            (when-not (empty? @!query)
+              (rf/dispatch [::events/navigate
+                            {:name   ::routes/search
+                             :params {}
+                             :query  {:q search-query :serviceId service-id}}])))}
+         [:div.flex
+          [:button.mx-2
+           {:on-click #(rf/dispatch [::events/toggle-search-form])
+            :type     "button"}
+           [:i.fa-solid.fa-arrow-left]]
+          [:input.bg-transparent.border-none.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.sm:w-64.min-w-auto
+           {:type          "text"
+            :ref           #(do (reset! !input %)
+                                (when %
+                                  (.focus %)))
+            :default-value @!query
+            :on-change     #(let [input (.. % -target -value)]
+                              (when-not (empty? input) (rf/dispatch [::events/change-search-query input]))
+                              (reset! !query input))
+            :placeholder   "Search"}]
+          [:button.mx-2
+           {:type "submit"}
+           [:i.fa-solid.fa-search]]
+          [:button.mx-2.text-xs.absolute.right-8.top-3
+           {:type     "button"
+            :on-click #(when @!input
+                         (set! (.-value @!input) "")
+                         (reset! !query "")
+                         (.focus @!input))
+            :class    (when (empty? @!query) "invisible")}
+           [:i.fa-solid.fa-circle-xmark]]]]))))
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index 017697c..b046075 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -187,6 +187,11 @@
    (:show-mobile-nav db)))
 
 (rf/reg-sub
+ :show-search-form
+ (fn [db _]
+   (:show-search-form db)))
+
+(rf/reg-sub
  :show-media-queue
  (fn [db _]
    (:show-media-queue db)))