fix: fix tab selection and add icons

2 files changed, 18 insertions, 28 deletions

diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs
index 63e6b84..72988c7 100644
--- a/src/frontend/tubo/layout/views.cljs
+++ b/src/frontend/tubo/layout/views.cljs
@@ -276,24 +276,27 @@
 (defn tabs
   [tabs]
   (let [!current (r/atom (and (seq tabs) (nth tabs 0)))]
-    (fn [tabs & {:keys [on-change]}]
+    (fn [tabs & {:keys [on-change selected-id]}]
       [:div
        (into
         [:ul.w-full.flex.gap-x-4.justify-center.items-center]
         (when (seq tabs)
           (for [[i tab] (map-indexed vector tabs)]
-            (let [selected? (= (:id tab) (:id @!current))]
+            (let [selected? (= (:id tab) selected-id)]
               (when tab
                 [:li.flex-auto.flex.justify-center.items-center.font-semibold.border-b-2
                  {:class (if selected?
                            "border-neutral-700 dark:border-neutral-100"
                            "!border-transparent")
                   :key   i}
-                 [:button.flex-auto.py-4
+                 [:button.flex.flex-auto.py-4.items-center.gap-3.justify-center
                   {:on-click (when (not selected?)
                                (fn []
                                  (reset! !current tab)
                                  (on-change (:id @!current))))}
-                  (if (:label-fn tab)
-                    ((:label-fn tab) (:label tab))
-                    (:label tab))]])))))])))
+                  (:left-icon tab)
+                  [:span.hidden.xs:block
+                   (if (:label-fn tab)
+                     ((:label-fn tab) (:label tab))
+                     (:label tab))]
+                  (:right-icon tab)]])))))])))
diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs
index 1bbd2df..88d1a30 100644
--- a/src/frontend/tubo/stream/views.cljs
+++ b/src/frontend/tubo/stream/views.cljs
@@ -135,13 +135,9 @@
   []
   (let [!active-tab (r/atom :comments)]
     (fn []
-      (let [stream          @(rf/subscribe [:stream])
-            !player         @(rf/subscribe [:main-player])
-            page-loading?   @(rf/subscribe [:show-page-loading])
-            comments-length (-> stream
-                                :comments-page
-                                :comments
-                                count)]
+      (let [stream        @(rf/subscribe [:stream])
+            !player       @(rf/subscribe [:main-player])
+            page-loading? @(rf/subscribe [:show-page-loading])]
         [:<>
          (when-not page-loading?
            [:div.flex.flex-col.justify-center.items-center
@@ -151,21 +147,12 @@
           [description stream]
           [:div.mt-10
            [layout/tabs
-            [{:id :comments
-              :label "Comments"
-              :label-fn
-              (fn [label]
-                [:div.flex.gap-3.items-center.justify-center
-                 [:i.fa-solid.fa-comments]
-                 [:span label]
-                 [:span.bg-neutral-200.dark:bg-neutral-800.rounded.px-2.text-sm
-                  comments-length]])}
-             {:id       :related-items
-              :label    "Related Items"
-              :label-fn (fn [label]
-                          [:div.flex.gap-3.items-center.justify-center
-                           [:i.fa-solid.fa-table-list]
-                           [:span label]])}]
+            [{:id        :comments
+              :label     "Comments"
+              :left-icon [:i.fa-solid.fa-comments]}
+             {:id        :related-items
+              :label     "Related Items"
+              :left-icon [:i.fa-solid.fa-table-list]}]
             :selected-id @!active-tab
             :on-change #(reset! !active-tab %)]]
           (case @!active-tab