feat: use formatted quantities in channel and playlist pages

src/frontend/tubo/channel/views.cljs

@@ -4,7 +4,8 @@
    [re-frame.core :as rf]
    [tubo.bookmarks.modals :as modals]
    [tubo.items.views :as items]
-   [tubo.layout.views :as layout]))
+   [tubo.layout.views :as layout]
+   [tubo.utils :as utils]))
 
 (defn metadata-popover
   [_]
@@ -30,9 +31,9 @@
     [:div.m-4
      [:h1.text-2xl.line-clamp-1.font-semibold {:title name} name]
      (when subscriber-count
-       [:div.flex.my-2.items-center
-        [:i.fa-solid.fa-users.text-xs]
-        [:span.mx-2 (.toLocaleString subscriber-count)]])]]
+       [:div.flex.items-center.text-neutral-600.dark:text-neutral-400.text-sm
+        [:span
+         (str (utils/format-quantity subscriber-count) " subscribers")]])]]
    [:div.hidden.lg:block
     [metadata-popover channel]]])
 

src/frontend/tubo/playlist/views.cljs

@@ -36,7 +36,10 @@
           (rf/dispatch [:playlist/fetch-paginated url next-page-url]))
         [layout/content-container
          [:div.flex.flex-col.justify-center
-          [layout/content-header name
+          [layout/content-header
+           [:div.flex.flex-col.gap-y-2.mb-2 name
+            [:span.text-sm.whitespace-nowrap.text-neutral-600.dark:text-neutral-400
+             (str stream-count " streams")]]
            [:div.hidden.lg:block
             [metadata-popover playlist]]]
           [:div.flex.items-center.justify-between.my-4.gap-x-4
@@ -45,7 +48,6 @@
             [:a.line-clamp-1.ml-2
              {:href  (rfe/href :channel-page nil {:url uploader-url})
               :title uploader-name}
-             uploader-name]]
-           [:span.text-sm.whitespace-nowrap (str stream-count " streams")]]]
+             uploader-name]]]]
          [items/layout-switcher !layout]
          [items/related-streams related-streams next-page-url !layout]]))))