feat: add tabs in settings page and add items layout setting

8 files changed, 59 insertions, 35 deletions

diff --git a/src/frontend/tubo/channel/views.cljs b/src/frontend/tubo/channel/views.cljs
index bd033f7..71c58cd 100644
--- a/src/frontend/tubo/channel/views.cljs
+++ b/src/frontend/tubo/channel/views.cljs
@@ -39,7 +39,7 @@
 (defn channel
   [_]
   (let [!show-description? (r/atom false)
-        !layout            (r/atom :list)]
+        !layout            (r/atom (:items-layout @(rf/subscribe [:settings])))]
     (fn [{{:keys [url]} :query-params}]
       (let [{:keys [banner description next-page related-streams] :as channel}
             @(rf/subscribe [:channel])
diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index 31ecc8c..c4f3c1d 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -49,6 +49,7 @@
                         :show-description (if-nil (:show-description
                                                    store)
                                                   true)
+                        :items-layout     :list
                         :default-service  (if-nil
                                            (:default-service store)
                                            {:service-id 0
diff --git a/src/frontend/tubo/items/views.cljs b/src/frontend/tubo/items/views.cljs
index 7470d65..c89f481 100644
--- a/src/frontend/tubo/items/views.cljs
+++ b/src/frontend/tubo/items/views.cljs
@@ -175,7 +175,7 @@
        [:div.flex.items-center.flex-auto.flex-col.justify-center.gap-y-4
         [:i.fa-solid.fa-ghost.text-3xl]
         [:p.text-lg "No available streams"]]
-       (if (and !layout (= @!layout :grid))
+       (if (and !layout (= @!layout "grid"))
          [:div.grid.w-full.gap-x-10.gap-y-6
           {:class "xs:grid-cols-[repeat(auto-fill,_minmax(165px,_1fr))]"}
           (for [[i item] (map-indexed vector related-streams)]
@@ -188,14 +188,16 @@
 
 (defn layout-switcher
   [!layout]
-  [:div.gap-x-6.text-lg.flex.justify-end
-   [:button
-    {:on-click #(reset! !layout :list)
+  [:div.gap-x-5.text-lg.flex.items-center.justify-end
+   [:button.flex.items-center
+    {:on-click #(reset! !layout "list")
      :title    "Switch to list layout"}
-    [:i.fa-solid.fa-list
-     {:class (when-not (= @!layout :list) :text-neutral-500)}]]
-   [:button
-    {:on-click #(reset! !layout :grid)
+    [:i.fa-solid.fa-list.text-sm
+     {:class (when-not (= @!layout "list")
+               ["dark:text-neutral-500" "text-neutral-400"])}]]
+   [:button.flex.items-center
+    {:on-click #(reset! !layout "grid")
      :title    "Switch to grid layout"}
-    [:i.fa-solid.fa-grip
-     {:class (when-not (= @!layout :grid) :text-neutral-500)}]]])
+    [:i.fa-solid.fa-grip.text-base
+     {:class (when-not (= @!layout "grid")
+               ["dark:text-neutral-500" "text-neutral-400"])}]]])
diff --git a/src/frontend/tubo/kiosks/views.cljs b/src/frontend/tubo/kiosks/views.cljs
index fd9b07e..3ad3f42 100644
--- a/src/frontend/tubo/kiosks/views.cljs
+++ b/src/frontend/tubo/kiosks/views.cljs
@@ -34,7 +34,7 @@
 
 (defn kiosk
   [_]
-  (let [!layout (r/atom :list)]
+  (let [!layout (r/atom (:items-layout @(rf/subscribe [:settings])))]
     (fn [{{:keys [serviceId]} :query-params}]
       (let [{:keys [id related-streams next-page]}
             @(rf/subscribe [:kiosk])
diff --git a/src/frontend/tubo/playlist/views.cljs b/src/frontend/tubo/playlist/views.cljs
index 065a3e0..78174d6 100644
--- a/src/frontend/tubo/playlist/views.cljs
+++ b/src/frontend/tubo/playlist/views.cljs
@@ -24,7 +24,7 @@
 
 (defn playlist
   [_]
-  (let [!layout (r/atom :list)]
+  (let [!layout (r/atom (:items-layout @(rf/subscribe [:settings])))]
     (fn [{{:keys [url]} :query-params}]
       (let [{:keys [name next-page uploader-name uploader-url related-streams
                     stream-count]
diff --git a/src/frontend/tubo/search/views.cljs b/src/frontend/tubo/search/views.cljs
index 5896d01..4cfe90e 100644
--- a/src/frontend/tubo/search/views.cljs
+++ b/src/frontend/tubo/search/views.cljs
@@ -7,7 +7,7 @@
 
 (defn search
   [_]
-  (let [!layout (r/atom :list)]
+  (let [!layout (r/atom (:items-layout @(rf/subscribe [:settings])))]
     (fn [{{:keys [q serviceId]} :query-params}]
       (let [{:keys [items next-page]} @(rf/subscribe [:search/results])
             next-page-url             (:url next-page)
diff --git a/src/frontend/tubo/settings/views.cljs b/src/frontend/tubo/settings/views.cljs
index 51520bb..1e95e92 100644
--- a/src/frontend/tubo/settings/views.cljs
+++ b/src/frontend/tubo/settings/views.cljs
@@ -1,6 +1,7 @@
 (ns tubo.settings.views
   (:require
    [re-frame.core :as rf]
+   [reagent.core :as r]
    [tubo.layout.views :as layout]))
 
 (defn boolean-input
@@ -14,25 +15,45 @@
    (or on-change
        #(rf/dispatch [:settings/change key (.. % -target -value)]))])
 
+(defn general-settings
+  [{:keys [theme default-service items-layout]}]
+  (let [services @(rf/subscribe [:services])]
+    [:<>
+     [select-input "Theme" :theme theme #{:auto :light :dark}]
+     [select-input "Default service" :default-service (:id default-service)
+      (map #(-> %
+                :info
+                :name)
+           services)
+      #(rf/dispatch [:settings/change-service (.. % -target -value)])]
+     [select-input "Default kiosk" :default-service
+      (:default-kiosk default-service) (:available-kiosks default-service)
+      #(rf/dispatch [:settings/change-kiosk (.. % -target -value)])]
+     [select-input "Items Layout" :items-layout items-layout #{:grid :list}]]))
+
+(defn stream-settings
+  [{:keys [show-description show-comments show-related]}]
+  [:<>
+   [boolean-input "Show description" :show-description show-description]
+   [boolean-input "Show comments" :show-comments show-comments]
+   [boolean-input "Show related videos" :show-related show-related]])
+
 (defn settings
   []
-  (let [{:keys [theme show-comments show-related show-description
-                default-service]}
-        @(rf/subscribe [:settings])
-        services @(rf/subscribe [:services])]
-    [layout/content-container
-     [layout/content-header "Settings"]
-     [:form.flex.flex-wrap.py-4
-      [select-input "Theme" :theme theme #{:auto :light :dark}]
-      [select-input "Default service" :default-service (:id default-service)
-       (map #(-> %
-                 :info
-                 :name)
-            services)
-       #(rf/dispatch [:settings/change-service (.. % -target -value)])]
-      [select-input "Default kiosk" :default-service
-       (:default-kiosk default-service) (:available-kiosks default-service)
-       #(rf/dispatch [:settings/change-kiosk (.. % -target -value)])]
-      [boolean-input "Show description" :show-description show-description]
-      [boolean-input "Show comments" :show-comments show-comments]
-      [boolean-input "Show related videos" :show-related show-related]]]))
+  (let [!active-tab (r/atom :general)]
+    (fn []
+      (let [settings @(rf/subscribe [:settings])]
+        [layout/content-container
+         [layout/content-header "Settings"]
+         [layout/tabs
+          [{:id    :general
+            :label "General"}
+           {:id    :stream
+            :label "Stream"}]
+          :selected-id @!active-tab
+          :on-change #(reset! !active-tab %)]
+         [:form.flex.flex-wrap.py-4
+          (case @!active-tab
+            :general [general-settings settings]
+            :stream  [stream-settings settings]
+            [general-settings settings])]]))))
diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs
index 7e03f40..63184b4 100644
--- a/src/frontend/tubo/stream/views.cljs
+++ b/src/frontend/tubo/stream/views.cljs
@@ -116,7 +116,7 @@
 (defn related-items
   [_]
   (let [!menu-active? (r/atom nil)
-        !layout       (r/atom :list)]
+        !layout       (r/atom (:items-layout @(rf/subscribe [:settings])))]
     (fn [{:keys [related-streams]}]
       (let [show? (:show-related @(rf/subscribe [:settings]))]
         (when (and show? (seq related-streams))