fix(frontend): refine navbar and subs

3 files changed, 111 insertions, 93 deletions

diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index aa238d3..46be7a4 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -83,26 +83,14 @@
    (assoc db :http-response (get-in res [:response :error]))))
 
 (rf/reg-event-db
- ::change-global-search
+ ::change-search-query
  (fn [db [_ res]]
-   (assoc db :global-search res)))
+   (assoc db :search-query res)))
 
 (rf/reg-event-db
- ::change-service-color
- (fn [db [_ service-id]]
-   (assoc db :service-color
-          (case service-id
-            0 "#cc0000"
-            1 "#ff7700"
-            2 "#333333"
-            3 "#F2690D"
-            4 "#629aa9"))))
-
-(rf/reg-event-fx
  ::change-service-id
- (fn [{:keys [db]} [_ service-id]]
-   {:db (assoc db :service-id service-id)
-    :fx [[:dispatch [::change-service-color service-id]]]}))
+ (fn [db [_ service-id]]
+   (assoc db :service-id service-id)))
 
 (rf/reg-event-db
  ::load-paginated-channel-results
@@ -328,9 +316,10 @@
      {:fx [[:dispatch [::get-default-kiosk-page service-id]]]})))
 
 (rf/reg-event-fx
- ::change-service
+ ::change-service-kiosk
  (fn [{:keys [db]} [_ service-id]]
-   {:fx [[:dispatch
+   {:fx [[:dispatch [::change-service-id service-id]]
+         [:dispatch
           [::navigate {:name :tubo.routes/kiosk
                        :params {}
                        :query  {:serviceId service-id}}]]]}))
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index 1132cdd..0eb5cfb 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -58,9 +58,9 @@
    (:channel db)))
 
 (rf/reg-sub
- :global-search
+ :search-query
  (fn [db _]
-   (:global-search db)))
+   (:search-query db)))
 
 (rf/reg-sub
  :service-id
@@ -69,8 +69,15 @@
 
 (rf/reg-sub
  :service-color
- (fn [db _]
-   (:service-color db)))
+ (fn [_]
+   (rf/subscribe [:service-id]))
+ (fn [id _]
+   (case id
+     0 "#cc0000"
+     1 "#ff7700"
+     2 "#333333"
+     3 "#F2690D"
+     4 "#629aa9")))
 
 (rf/reg-sub
  :services
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index d412edf..c1a04ed 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -2,8 +2,9 @@
   (:require
    [reitit.frontend.easy :as rfe]
    [re-frame.core :as rf]
+   [reagent.core :as r]
    [tubo.components.navigation :as navigation]
-   [tubo.components.player :as player]
+   [tubo.components.audio-player :as player]
    [tubo.events :as events]
    [tubo.routes :as routes]))
 
@@ -12,68 +13,87 @@
 
 (defn navbar
   [{{:keys [serviceId]} :query-params}]
-  (let [service-id @(rf/subscribe [:service-id])
-        service-color @(rf/subscribe [:service-color])
-        global-search @(rf/subscribe [:global-search])
-        services @(rf/subscribe [:services])
-        id (js/parseInt (or serviceId service-id))
-        mobile-nav? @(rf/subscribe [:show-mobile-nav])
-        {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
-    [:nav.flex.px-2.py-2.5.items-center.sticky.top-0.z-50.font-nunito
-     {:style {:background service-color}}
-     [:div.flex.items-center.justify-between.flex-auto
-      [:div.px-2
-       [:a.text-white.font-bold
-        {:href (rfe/href ::routes/home)}
-        [:img.mb-1 {:src "/images/tubo.png" :style {:maxHeight "35px" :maxWidth "50px"}
-               :title "Tubo"}]]]
-      [:form.flex.items-center.relative
-       {:on-submit (fn [e]
-                     (.preventDefault e)
-                     (rf/dispatch [::events/navigate
-                                   {:name   ::routes/search
-                                    :params {}
-                                    :query  {:q global-search :serviceId service-id}}]))}
-       [:div
-        [:input.bg-transparent.text-white.border-none.rounded.py-2.px-1.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
-         {:type        "text"
-          :default-value       global-search
-          :on-change   #(rf/dispatch [::events/change-global-search (.. % -target -value)])
-          :placeholder "Search for something"}]]
-       [:div.flex.items-center.px-2
-        [:button.text-white
-         {:type "submit"}
-         [:i.fas.fa-search]]]]
-      [:div.cursor-pointer.px-2.ml:hidden.text-white
-       {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
-       [:i.fa-solid.fa-bars]]
-      [:div.bg-white.dark:bg-neutral-900.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8
-       {:class (str "ease-in-out delay-75 transition-[right] "
-                    "ml:w-full ml:flex ml:min-h-0 ml:relative ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 "
-                    (if mobile-nav? "right-0" "right-[-245px]"))}
-       [:div.cursor-pointer.px-2.ml:hidden.absolute.top-1.right-2
-        {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
-        [:i.fa-solid.fa-close.text-xl]]
-       [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row
-        [:div.w-full.box-border.z-10.ml:text-white
-         [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full
-          {:on-change #(rf/dispatch [::events/change-service (js/parseInt (.. % -target -value))])
-           :value     service-id
-           :style     {:background "transparent"}}
-          (when services
-            (for [service services]
-              [:option.text-white.bg-neutral-900.border-none
-               {:value (:id service) :key (:id service)}
-               (-> service :info :name)]))]]
-        [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0.ml:text-white
-         [:i.fa-solid.fa-caret-down]]]
-       [:div.relative.flex-auto.ml:pl-4
-        [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white
-         (for [kiosk available-kiosks]
-           [:li.px-5.py-2 {:key kiosk}
-            [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
-                                                     :kioskId   kiosk})}
-             kiosk]])]]]]]))
+  (let [!query (r/atom "")
+        !input (r/atom nil)]
+    (fn [{{:keys [serviceId]} :query-params}]
+      (let [service-id                               @(rf/subscribe [:service-id])
+            service-color                            @(rf/subscribe [:service-color])
+            search-query                            @(rf/subscribe [:search-query])
+            services                                 @(rf/subscribe [:services])
+            {:keys [current-theme]}                  @(rf/subscribe [:settings])
+            id                                       (js/parseInt (or serviceId service-id))
+            mobile-nav?                              @(rf/subscribe [:show-mobile-nav])
+            {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
+        [:nav.flex.px-2.py-2.5.items-center.sticky.top-0.z-50.font-nunito
+         {:style {:background service-color}}
+         [:div.flex.items-center.justify-between.flex-auto
+          [:div.px-2
+           [:a.text-white.font-bold
+            {:href (rfe/href ::routes/home)}
+            [:img.mb-1 {:src   "/images/tubo.png" :style {:maxHeight "25px" :maxWidth "40px"}
+                        :title "Tubo"}]]]
+          [:form.flex.items-center.relative
+           {: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
+            [:input.bg-transparent.text-white.border-none.rounded.py-2.px-0.mx-2.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
+             {:type          "text"
+              :ref #(reset! !input %)
+              :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 for something"}]]
+           [:div.flex.items-center.px-2.text-white
+            [:button.mx-2
+             {:type "button"
+              :on-click #(when @!input
+                           (set! (.-value @!input) "")
+                           (reset! !query "")
+                           (.focus @!input))
+              :class (when (empty? @!query) "invisible")}
+             [:i.fa-solid.fa-circle-xmark]]
+            [:button.mx-2
+             {:type "submit"}
+             [:i.fa-solid.fa-search]]
+            [:a.mx-2 {:href (rfe/href ::routes/settings)}
+             [:i.fa-solid.fa-cog]]]]
+          [:div.cursor-pointer.px-2.ml:hidden.text-white
+           {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
+           [:i.fa-solid.fa-bars]]
+          [:div.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8
+           {:class (str "ease-in-out delay-75 transition-[right] "
+                        (if (= current-theme :light) "bg-white" "bg-neutral-900")
+                        " ml:w-full ml:flex ml:min-h-0 ml:relative ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 "
+                        (if mobile-nav? "right-0" "right-[-245px]"))}
+           [:div.cursor-pointer.px-2.ml:hidden.absolute.top-1.right-2
+            {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
+            [:i.fa-solid.fa-close.text-xl]]
+           [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row
+            [:div.w-full.box-border.z-10.ml:text-white
+             [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full
+              {:on-change #(rf/dispatch [::events/change-service-kiosk (js/parseInt (.. % -target -value))])
+               :value     service-id
+               :style     {:background "transparent"}}
+              (when services
+                (for [service services]
+                  [:option.text-white.bg-neutral-900.border-none
+                   {:value (:id service) :key (:id service)}
+                   (-> service :info :name)]))]]
+            [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0.ml:text-white
+             [:i.fa-solid.fa-caret-down]]]
+           [:div.relative.flex-auto.ml:pl-4
+            [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white
+             (for [kiosk available-kiosks]
+               [:li.px-5.py-2 {:key kiosk}
+                [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
+                                                         :kioskId   kiosk})}
+                 kiosk]])]]]]]))))
 
 (defn footer
   []
@@ -88,11 +108,13 @@
 
 (defn app
   []
-  (let [current-match @(rf/subscribe [:current-match])]
-    [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative
-     [navbar current-match]
-     [:div.flex.flex-col.justify-between.relative.font-nunito {:style {:minHeight "100vh"}}
-      (when-let [view (-> current-match :data :view)]
-        [view current-match])
-      [footer]
-      [player/global-player]]]))
+  (let [current-match @(rf/subscribe [:current-match])
+        {:keys [current-theme]} @(rf/subscribe [:settings])]
+    [:div {:class (when (= current-theme "dark") "dark")}
+     [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative
+      [navbar current-match]
+      [:div.flex.flex-col.justify-between.relative.font-nunito {:style {:minHeight "100vh"}}
+       (when-let [view (-> current-match :data :view)]
+         [view current-match])
+       [footer]
+       [player/player]]]]))