feat(frontend): add content header layout component

src/frontend/tubo/components/layout.cljs

@@ -26,6 +26,14 @@
        [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5 xl:w-3/5"}
         (map-indexed #(with-meta %2 {:key %1}) children)])]))
 
+(defn content-header
+  [heading & children]
+  [:div.flex.items-center.justify-between.mt-6
+   [:h1.text-3xl.font-nunito-semibold.line-clamp-1.mr-6
+    {:title heading}
+    heading]
+   (map-indexed #(with-meta %2 {:key %1}) children)])
+
 (defn uploader-avatar
   [source name & url]
   (let [image [:img.rounded-full.object-cover.max-w-full.min-h-full {:src source :alt name}]]

src/frontend/tubo/views/bookmarks.cljs

@@ -10,8 +10,7 @@
   (let [service-color @(rf/subscribe [:service-color])
         bookmarks @(rf/subscribe [:bookmarks])]
     [layout/content-container
-     [:div.flex.justify-between.mt-6
-      [:h1.text-3xl.font-nunito-semibold "Bookmarks"]
+     [layout/content-header "Bookmarks"
       [layout/primary-button "Enqueue"
        #(rf/dispatch [::events/enqueue-related-streams bookmarks service-color]) "fa-solid fa-headphones"]]
      [items/related-streams bookmarks]]))

src/frontend/tubo/views/kiosk.cljs

@@ -15,6 +15,5 @@
     (when scrolled-to-bottom?
       (rf/dispatch [::events/kiosk-pagination serviceId id next-page-url]))
     [layout/content-container
-     [:div.flex.items-center.mt-6.mx-2
-      [:h1.text-3xl.font-nunito-semibold id]]
+     [layout/content-header id]
      [items/related-streams related-streams next-page-url]]))

src/frontend/tubo/views/playlist.cljs

@@ -18,16 +18,17 @@
     (when scrolled-to-bottom?
       (rf/dispatch [::events/playlist-pagination url next-page-url]))
     [layout/content-container
-     [:div.flex.flex-col.justify-center.my-4.mx-2
-      [:div.flex.justify-between.items-center.mb-4
-       [:h1.text-2xl.font-bold.line-clamp-1.pr-2 {:title name} name]
+     [:div.flex.flex-col.justify-center
+      [layout/content-header name
        [layout/primary-button "Enqueue"
-        #(rf/dispatch [::events/enqueue-related-streams related-streams service-color]) "fa-solid fa-headphones"]]
-      [:div.flex.items-center.justify-between
-       [:div.flex.items-center.my-4.mr-2
+        #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])
+        "fa-solid fa-headphones"]]
+      [:div.flex.items-center.justify-between.my-4.gap-x-4
+       [:div.flex.items-center
         [layout/uploader-avatar uploader-avatar uploader-name uploader-url]
-        [:div
-         [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
-          uploader-name]]]
-       [:span.ml-2.whitespace-nowrap (str stream-count " streams")]]]
+        [:a.line-clamp-1.ml-2
+         {:href  (rfe/href :tubo.routes/channel nil {:url uploader-url})
+          :title uploader-name}
+         uploader-name]]
+       [:span.whitespace-nowrap (str stream-count " streams")]]]
      [items/related-streams related-streams next-page-url]]))