feat(frontend): Add further features and address quirks

1 files changed, 55 insertions, 43 deletions

diff --git a/src/frontend/tau/views.cljs b/src/frontend/tau/views.cljs
index 81aaa40..4f89fef 100644
--- a/src/frontend/tau/views.cljs
+++ b/src/frontend/tau/views.cljs
@@ -10,64 +10,76 @@
 
 (defonce scroll-hook (.addEventListener js/window "scroll" #(rf/dispatch [::events/page-scroll])))
 (defonce services (rf/dispatch [::events/get-services]))
+(defonce kiosks (rf/dispatch [::events/get-kiosks 0]))
 
 (defn footer
   []
   [:footer
    [:div.bg-black.text-gray-300.p-5.text-center.w-full
-    [:p (str "Tau " (.getFullYear (js/Date.)))]]])
-
-(defn search-bar
-  [{{:keys [serviceId]} :query-params}]
-  (let [global-search @(rf/subscribe [:global-search])
-        services @(rf/subscribe [:services])
-        service-id @(rf/subscribe [:service-id])
-        id (js/parseInt (or serviceId service-id)) ]
-    [:div.flex
-     [:form {:on-submit (fn [e]
-                          (.preventDefault e)
-                          (rf/dispatch [::events/navigate
-                                        {:name ::routes/search
-                                         :params {}
-                                         :query  {:q global-search :serviceId service-id}}]))}
-      [:input.bg-neutral-900.border.border-solid.border-black.rounded.py-2.px-1.mx-2.text-gray-500
-       {:type "text"
-        :value global-search
-        :on-change #(rf/dispatch [::events/change-global-search (.. % -target -value)])
-        :placeholder "Search for something"}]
-      [:select.mx-2.bg-gray-50.border.border-gray-900.text-gray-900
-       {:on-change #(rf/dispatch [::events/change-service-id (js/parseInt (.. % -target -value))])}
-       (when services
-         (for [service services]
-           [:option {:value (:id service) :key (:id service) :selected (= id (:id service))}
-            (-> service :info :name)]))]
-      [:button.text-white.mx-2
-       {:type "submit"}
-       [:i.fas.fa-search]]]]))
+    [:div.flex.flex-col.justify-center
+     [:div
+      [:p.px-2 (str "Tau " (.getFullYear (js/Date.)))]]
+     [:div.pt-4
+      [:a {:href "https://sr.ht/~conses/tau"}
+       [:i.fa-solid.fa-code]]]]]])
 
 (defn navbar
-  [match]
+  [{{:keys [serviceId]} :query-params}]
   (let [service-id @(rf/subscribe [:service-id])
         service-color @(rf/subscribe [:service-color])
-        {:keys [default-kiosk available-kiosks]} @(rf/subscribe [:kiosks])]
-    (rf/dispatch [::events/get-kiosks service-id])
-    [:nav.flex.p-2.content-center.sticky.top-0.z-50
+        global-search @(rf/subscribe [:global-search])
+        services @(rf/subscribe [:services])
+        id (js/parseInt (or serviceId service-id))
+        {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
+    [:nav.flex.p-2.content-center.sticky.top-0.z-50.font-nunito
      {:style {:background service-color}}
-     [:div.px-5.text-white.p-2.font-bold
-      [:a {:href (rfe/href ::routes/home) :dangerouslySetInnerHTML {:__html "τ"}}]]
-     [:ul.flex.content-center.p-2.text-white
-      (for [kiosk available-kiosks]
-        [:li.px-5 [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
-                                                           :kioskId kiosk})}
-                   kiosk]])]
-     [search-bar match]]))
+     [:div.flex
+      [:form.flex.items-center
+       {:on-submit (fn [e]
+                     (.preventDefault e)
+                     (rf/dispatch [::events/navigate
+                                   {:name ::routes/search
+                                    :params {}
+                                    :query  {:q global-search :serviceId service-id}}]))}
+       [:div
+        [:a.px-5.text-white.font-bold.font-nunito
+         {:href (rfe/href ::routes/home) :dangerouslySetInnerHTML {:__html "τ"}}]]
+       [:div.relative
+        [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito
+         {:on-change #(rf/dispatch [::events/change-service (js/parseInt (.. % -target -value))])
+          :value service-id
+          :style {:background "transparent"}}
+         (when services
+           (for [service services]
+             [:option.bg-neutral-900.border-none {:value (:id service) :key (:id service)}
+              (-> service :info :name)]))]
+        [:div.flex.absolute.min-h-full.min-w-full.top-0.right-0.items-center.justify-end
+         {:style {:zIndex "-1"}}
+         [:i.fa-solid.fa-caret-down.mr-4]]]
+       [:div
+        [:input.bg-transparent.border-none.rounded.py-2.px-1.mx-2.focus:ring-transparent.placeholder-white
+         {:type "text"
+          :value global-search
+          :on-change #(rf/dispatch [::events/change-global-search (.. % -target -value)])
+          :placeholder "Search for something"}]]
+       [:div
+        [:button.text-white.mx-2
+         {:type "submit"}
+         [:i.fas.fa-search]]]]
+      [:div
+       [:ul.flex.content-center.p-2.text-white.font-roboto
+        (for [kiosk available-kiosks]
+          [:li.px-5 {:key kiosk}
+           [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
+                                                    :kioskId kiosk})}
+            kiosk]])]]]]))
 
 (defn app
   []
   (let [current-match @(rf/subscribe [:current-match])]
-    [:div.font-sans.min-h-screen.flex.flex-col.h-full {:style {:background "rgba(23, 23, 23)"}}
+    [:div.min-h-screen.flex.flex-col.h-full.text-white.bg-neutral-900
      [navbar current-match]
-     [:div.flex.flex-col.justify-between.relative {:class "min-h-[calc(100vh-58px)]"}
+     [:div.flex.flex-col.justify-between.relative.font-nunito {:class "min-h-[calc(100vh-58px)]"}
       (when-let [view (-> current-match :data :view)]
         [view current-match])
       [player/global-player]