Refactor views to use SectionComponent

Using the SectionComponent in each view rather implementing it in the application layout gives us a bit more flexibility. In particular we use the flexibility to lift the "An online music store. Owned by us." strapline on the homepage out of the white SectionComponent.
freerange · Dec 11, 2024 · cd72fd4 · cd72fd4
1 parent 6d3bbae
commit cd72fd4
Show file tree

Hide file tree

Showing 29 changed files with 389 additions and 383 deletions.
diff --git a/app/components/section_component.rb b/app/components/section_component.rb
@@ -3,11 +3,15 @@
 class SectionComponent < ViewComponent::Base
   include ApplicationHelper
 
-  def initialize(title:, link_text: nil, link_path: nil)
+  def initialize(title: nil, link_text: nil, link_path: nil)
     @title = title
     @link_text = link_text
     @link_path = link_path
 
     super
   end
+
+  def show_header?
+    @title || (@link_text && @link_path)
+  end
 end
diff --git a/app/components/section_component/section_component.html.erb b/app/components/section_component/section_component.html.erb
@@ -1,10 +1,14 @@
 <section class="divide-y divide-slate-300 bg-white p-3 sm:p-6 shadow">
-  <div class="flex justify-between content-baseline">
-    <h2 class="text-slate-800 font-semibold text-lg"><%= @title %></h2>
-    <% if @link_text && @link_path %>
-      <%= link_to @link_text, @link_path, class: 'text-red-400 hover:underline' %>
-    <% end %>
-  </div>
+  <% if show_header? %>
+    <div class="flex justify-between content-baseline">
+      <% if @title %>
+        <h2 class="text-slate-800 font-semibold text-lg"><%= @title %></h2>
+      <% end %>
+      <% if @link_text && @link_path %>
+        <%= link_to @link_text, @link_path, class: 'text-red-400 hover:underline' %>
+      <% end %>
+    </div>
+  <% end %>
   <div class="pt-3">
     <%= content %>
   </div>

diff --git a/app/components/sidebar_section_component/sidebar_section_component.html.erb b/app/components/sidebar_section_component/sidebar_section_component.html.erb
@@ -1,4 +1,4 @@
-<section class="flex flex-col md:flex-row py-6">
+<section class="sidebar-section flex flex-col md:flex-row py-6">
   <div class="md:basis-1/4 mb-3 md:mb-0">
     <h2 class="text-lg font-bold"><%= @title %></h2>
   </div>

diff --git a/app/views/admin/albums/index.html.erb b/app/views/admin/albums/index.html.erb
@@ -1,8 +1,7 @@
-<%= render('shared/page_header', text: 'Albums') %>
-<%= render('shared/page_sub_header', text: 'Pending') %>
-
-<ul>
-  <% Album.pending.each do |album| %>
-    <li><%= text_link_to "#{album.title} by #{album.artist.name}", artist_album_path(album.artist, album) %></li>
-  <% end %>
-</ul>
+<%= render(SectionComponent.new(title: 'Pending albums')) do %>
+  <ul>
+    <% Album.pending.each do |album| %>
+      <li><%= text_link_to "#{album.title} by #{album.artist.name}", artist_album_path(album.artist, album) %></li>
+    <% end %>
+  </ul>
+<% end %>
diff --git a/app/views/albums/edit.html.erb b/app/views/albums/edit.html.erb
@@ -1,15 +1,13 @@
-<div class="flex flex-col gap-6">
-  <ol class="flex gap-2 text-sm">
-    <li><%= link_to 'Account', account_path, class: 'hover:underline' %></li>
-    <li class='text-slate-400'>/</li>
-    <li><%= link_to @album.artist.name, edit_artist_path(@album.artist), class: 'hover:underline' %></li>
-    <li class='text-slate-400'>/</li>
-    <li class='text-rose-400'><%= @album.title %></li>
-  </ol>
+<%= render(SectionComponent.new(title: "Editing #{@album.title}")) do %>
+  <div class="flex flex-col gap-6">
+    <ol class="flex gap-2 text-sm">
+      <li><%= link_to 'Account', account_path, class: 'hover:underline' %></li>
+      <li class='text-slate-400'>/</li>
+      <li><%= link_to @album.artist.name, edit_artist_path(@album.artist), class: 'hover:underline' %></li>
+      <li class='text-slate-400'>/</li>
+      <li class='text-rose-400'><%= @album.title %></li>
+    </ol>
 
-  <div class="border-b border-slate-300">
-    <h1 class="text-2xl font-bold mb-1">Editing <%= @album.title %></h1>
+    <%= render "form", album: @album %>
   </div>
-
-  <%= render "form", album: @album %>
-</div>
+<% end %>
diff --git a/app/views/albums/new.html.erb b/app/views/albums/new.html.erb
@@ -1,15 +1,13 @@
-<div class="flex flex-col gap-6">
-  <ol class="flex gap-2 text-sm">
-    <li><%= link_to 'Account', account_path, class: 'hover:underline' %></li>
-    <li class='text-slate-400'>/</li>
-    <li><%= link_to @album.artist.name, edit_artist_path(@album.artist), class: 'hover:underline' %></li>
-    <li class='text-slate-400'>/</li>
-    <li class='text-rose-400'>New album</li>
-  </ol>
+<%= render(SectionComponent.new(title: 'New album')) do %>
+  <div class="flex flex-col gap-3">
+    <ol class="flex gap-2 text-sm">
+      <li><%= link_to 'Account', account_path, class: 'hover:underline' %></li>
+      <li class='text-slate-400'>/</li>
+      <li><%= link_to @album.artist.name, edit_artist_path(@album.artist), class: 'hover:underline' %></li>
+      <li class='text-slate-400'>/</li>
+      <li class='text-rose-400'>New album</li>
+    </ol>
 
-  <div class="border-b border-slate-300">
-    <h1 class="text-2xl font-bold mb-1">New album</h1>
+    <%= render "form", album: @album %>
   </div>
-
-  <%= render "form", album: @album %>
-</div>
+<% end %>
diff --git a/app/views/albums/show.html.erb b/app/views/albums/show.html.erb
diff --git a/app/views/application/_navbar.html.erb b/app/views/application/_navbar.html.erb
@@ -1,4 +1,4 @@
-<nav class="w-full flex justify-between items-center px-1 sm:mt-2">
+<nav class="w-full flex justify-between items-center sm:mt-2 mb-6">
   <div>
     <a href="/">
       <svg width="7em" viewBox="0 0 139 80" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/app/views/artists/edit.html.erb b/app/views/artists/edit.html.erb
@@ -1,38 +1,36 @@
-<div class="border-b border-slate-300 mb-6">
-  <h1 class="text-2xl font-bold mb-1">My account</h1>
-</div>
+<%= render(SectionComponent.new(title: 'My account')) do %>
+  <%= render(AccountNavComponent.new(user: @artist.user)) %>
 
-<%= render(AccountNavComponent.new(user: @artist.user)) %>
+  <%= render(SidebarSectionComponent.new(title: 'Artist details')) do %>
+    <%= render "form", artist: @artist %>
+  <% end %>
 
-<%= render(SidebarSectionComponent.new(title: 'Artist details')) do %>
-  <%= render "form", artist: @artist %>
-<% end %>
-
-<%= render(SidebarSectionComponent.new(title: 'Albums')) do %>
-  <div class="grid grid-cols-3 gap-4">
-    <% @artist.albums.in_release_order.each do |album| %>
-      <%= link_to(edit_artist_album_path(album.artist, album)) do %>
-        <%= render(CardComponent.new(
-          title: album.title,
-          subtitle: ( album.publication_status if !album.published? ),
-          image: ( cdn_url(album.cover.representation(resize_to_limit: [1000, 1000])) if album.cover.representable? )
-        )) %>
+  <%= render(SidebarSectionComponent.new(title: 'Albums')) do %>
+    <div class="grid grid-cols-3 gap-4">
+      <% @artist.albums.in_release_order.each do |album| %>
+        <%= link_to(edit_artist_album_path(album.artist, album)) do %>
+          <%= render(CardComponent.new(
+      title: album.title,
+      subtitle: ( album.publication_status if !album.published? ),
+      image: ( cdn_url(album.cover.representation(resize_to_limit: [1000, 1000])) if album.cover.representable? )
+      )) %>
+        <% end %>
       <% end %>
-    <% end %>
 
-    <%= link_to(new_artist_album_path(@artist)) do %>
-      <div class="border border-slate-500 border-dashed hover:border-solid aspect-w-1 aspect-h-1">
-        <div class="grid place-items-center">
-          <div class="flex gap-2 items-center text-amber-600">
-            <span>
-              <svg class="fill-amber-600" width="14" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M14 8.5H8V14.5H6V8.5H0V6.5H6V0.5H8V6.5H14V8.5Z" />
-              </svg>
-            </span>
-            Add album
+      <%= link_to(new_artist_album_path(@artist)) do %>
+        <div class="border border-slate-500 border-dashed hover:border-solid aspect-w-1 aspect-h-1">
+          <div class="grid place-items-center">
+            <div class="flex gap-2 items-center text-amber-600">
+              <span>
+                <svg class="fill-amber-600" width="14" height="14" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M14 8.5H8V14.5H6V8.5H0V6.5H6V0.5H8V6.5H14V8.5Z" />
+                </svg>
+              </span>
+              Add album
+            </div>
           </div>
         </div>
-      </div>
-    <% end %>
-  </div>
+      <% end %>
+    </div>
+  <% end %>
 <% end %>
diff --git a/app/views/artists/index.html.erb b/app/views/artists/index.html.erb
@@ -8,19 +8,20 @@
   <%= auto_discovery_link_tag(:atom, { format: :atom }, { title: 'Artists on jam.coop' }) %>
 <% end %>
 
-<%= render('shared/page_header', text: 'Artists') %>
+<%= render(SectionComponent.new(title: 'Artists')) do %>
 
-<div class="pt-4 grid grid-cols-3 gap-4">
-  <% @artists.order(:name).each do |artist| %>
-    <div>
-      <%= link_to(artist_path(artist)) do %>
-        <div class="border border-slate-200 w-full aspect-w-1 aspect-h-1">
-          <% if artist.profile_picture.representable? %>
-            <%= image_tag cdn_url(artist.profile_picture.representation(resize_to_fill: [300, 300])), class: 'w-full' %>
-          <% end %>
-        </div>
-        <p class='text-sm text-slate-500 break-words'><%= artist.name %><%= artist.listed? ? '' : ' (unlisted)' %></p>
-      <% end %>
-    </div>
-  <% end %>
-</div>
+  <div class="pt-4 grid grid-cols-3 gap-4">
+    <% @artists.order(:name).each do |artist| %>
+      <div>
+        <%= link_to(artist_path(artist)) do %>
+          <div class="border border-slate-200 w-full aspect-w-1 aspect-h-1">
+            <% if artist.profile_picture.representable? %>
+              <%= image_tag cdn_url(artist.profile_picture.representation(resize_to_fill: [300, 300])), class: 'w-full' %>
+            <% end %>
+          </div>
+          <p class='text-sm text-slate-500 break-words'><%= artist.name %><%= artist.listed? ? '' : ' (unlisted)' %></p>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/views/artists/new.html.erb b/app/views/artists/new.html.erb
@@ -1,9 +1,7 @@
-<div class="border-b border-slate-300 mb-6">
-  <h1 class="text-2xl font-bold mb-1">My account</h1>
-</div>
+<%= render(SectionComponent.new(title: 'My account')) do %>
+  <%= render(AccountNavComponent.new(user: @user)) %>
 
-<%= render(AccountNavComponent.new(user: @user)) %>
-
-<%= render(SidebarSectionComponent.new(title: 'Artist details')) do %>
-  <%= render "form", artist: @artist %>
+  <%= render(SidebarSectionComponent.new(title: 'Artist details')) do %>
+    <%= render "form", artist: @artist %>
+  <% end %>
 <% end %>
diff --git a/app/views/artists/show.html.erb b/app/views/artists/show.html.erb
@@ -9,29 +9,31 @@
   <%= auto_discovery_link_tag(:atom, { format: :atom }, { title: "#{@artist.name} albums on jam.coop" }) %>
 <% end %>
 
-<div class="flex flex-row border-b-2 border-b-slate-100 pb-6">
-  <div class="basis-1/4 mr-4 m:mr-0">
-    <div class="aspect-w-1 aspect-h-1">
-      <% if @artist.profile_picture.representable? %>
-        <%= image_tag cdn_url(@artist.profile_picture.representation(resize_to_limit: [500, 500])), class: 'object-cover' %>
-      <% end %>
+<%= render(SectionComponent.new) do %>
+  <div class="flex flex-row border-b-2 border-b-slate-100 pb-6">
+    <div class="basis-1/4 mr-4 m:mr-0">
+      <div class="aspect-w-1 aspect-h-1">
+        <% if @artist.profile_picture.representable? %>
+          <%= image_tag cdn_url(@artist.profile_picture.representation(resize_to_limit: [500, 500])), class: 'object-cover' %>
+        <% end %>
+      </div>
+    </div>
+    <div class="basis-3/4">
+      <h2 class="text-2xl font-semibold"><%= @artist.name %></h2>
+      <p class="text-slate-400 mb-4"><%= @artist.location %></p>
+      <p><%= @artist.description %></p>
     </div>
   </div>
-  <div class="basis-3/4">
-    <h2 class="text-2xl font-semibold"><%= @artist.name %></h2>
-    <p class="text-slate-400 mb-4"><%= @artist.location %></p>
-    <p><%= @artist.description %></p>
-  </div>
-</div>
 
-<div class="pt-4 grid grid-cols-3 gap-4">
-  <% @albums.in_release_order.each do |album| %>
-    <%= link_to(artist_album_path(album.artist, album)) do %>
-      <%= render(CardComponent.new(
+  <div class="pt-4 grid grid-cols-3 gap-4">
+    <% @albums.in_release_order.each do |album| %>
+      <%= link_to(artist_album_path(album.artist, album)) do %>
+        <%= render(CardComponent.new(
         title: album.title,
         subtitle: ( album.publication_status if !album.published? ),
         image: ( cdn_url(album.cover.representation(resize_to_limit: [1000, 1000])) if album.cover.representable? )
       )) %>
+      <% end %>
     <% end %>
-  <% end %>
-</div>
+  </div>
+<% end %>
diff --git a/app/views/collections/show.html.erb b/app/views/collections/show.html.erb
@@ -1,17 +1,18 @@
-<%= render('shared/page_header', text: 'My collection') %>
+<%= render(SectionComponent.new(title: 'My collection')) do %>
 
-<% if Current.user.collection.empty? %>
-  <p class="class='text-sm text-slate-600">There's nothing in your collection at the moment.</p>
-<% end %>
+  <% if Current.user.collection.empty? %>
+    <p class="class='text-sm text-slate-600">There's nothing in your collection at the moment.</p>
+  <% end %>
 
-<div class="pt-4 grid grid-cols-3 gap-4">
-  <% Current.user.collection.each do |purchase| %>
-    <%= link_to(artist_album_path(purchase.album.artist, purchase.album)) do %>
-      <%= render(CardComponent.new(
+  <div class="pt-4 grid grid-cols-3 gap-4">
+    <% Current.user.collection.each do |purchase| %>
+      <%= link_to(artist_album_path(purchase.album.artist, purchase.album)) do %>
+        <%= render(CardComponent.new(
         title: purchase.album.title,
         subtitle: purchase.album.artist.name,
         image: ( cdn_url(purchase.album.cover.representation(resize_to_limit: [1000, 1000])) if purchase.album.cover.representable? )
       )) %>
+      <% end %>
     <% end %>
-  <% end %>
-</div>
+  </div>
+<% end %>
diff --git a/app/views/identity/password_resets/edit.html.erb b/app/views/identity/password_resets/edit.html.erb
@@ -1,9 +1,9 @@
-<%= render('shared/page_header', text: 'Reset your password') %>
-
-<%= form_with(url: identity_password_reset_path, method: :patch, builder: TailwindFormBuilder) do |form| %>
-  <%= render ModelErrorComponent.new(model: @user) %>
-  <%= form.hidden_field :sid, value: params[:sid] %>
-  <%= form.password_field :password, label: { text: 'New password' }, required: true, autofocus: true, autocomplete: "new-password", class: 'w-full mb-3' %>
-  <%= form.password_field :password_confirmation, label: { text: 'Confirm new password' }, required: true, autocomplete: "new-password", class: 'w-full mb-3' %>
-  <%= form.submit "Save changes", class: 'w-full mt-3' %>
+<%= render(SectionComponent.new(title: 'Reset your password')) do %>
+  <%= form_with(url: identity_password_reset_path, method: :patch, builder: TailwindFormBuilder) do |form| %>
+    <%= render ModelErrorComponent.new(model: @user) %>
+    <%= form.hidden_field :sid, value: params[:sid] %>
+    <%= form.password_field :password, label: { text: 'New password' }, required: true, autofocus: true, autocomplete: "new-password", class: 'w-full mb-3' %>
+    <%= form.password_field :password_confirmation, label: { text: 'Confirm new password' }, required: true, autocomplete: "new-password", class: 'w-full mb-3' %>
+    <%= form.submit "Save changes", class: 'w-full mt-3' %>
+  <% end %>
 <% end %>
diff --git a/app/views/identity/password_resets/new.html.erb b/app/views/identity/password_resets/new.html.erb
@@ -1,9 +1,9 @@
-<%= render('shared/page_header', text: 'Forgot your password?') %>
+<%= render(SectionComponent.new(title: 'Forgot your password?')) do %>
+  <%= form_with(url: identity_password_reset_path, builder: TailwindFormBuilder) do |form| %>
+    <%= form.email_field :email, required: true, autofocus: true, class: 'w-full mb-3' %>
 
-<%= form_with(url: identity_password_reset_path, builder: TailwindFormBuilder) do |form| %>
-  <%= form.email_field :email, required: true, autofocus: true, class: 'w-full mb-3' %>
-
-  <div>
-    <%= form.submit "Send password reset email", class: 'w-full' %>
-  </div>
+    <div>
+      <%= form.submit "Send password reset email", class: 'w-full' %>
+    </div>
+  <% end %>
 <% end %>
diff --git a/app/views/interests/confirmation.html.erb b/app/views/interests/confirmation.html.erb
@@ -1,3 +1,3 @@
-<%= render 'shared/page_header', text: 'Thank you!' %>
-
-<p class="mb-3 leading-relaxed">Thank you for registering your interest. We'll be in touch with more news soon.</p>
+<%= render(SectionComponent.new(title: 'Thank you!')) do %>
+  <p class="mb-3 leading-relaxed">Thank you for registering your interest. We'll be in touch with more news soon.</p>
+<% end %>
diff --git a/app/views/interests/new.html.erb b/app/views/interests/new.html.erb
@@ -4,8 +4,7 @@
   )
 %>
 
-<h1 class="text-4xl tracking-tight leading-10 font-extrabold mb-3">An online music store. <br />
-  <span class="text-amber-600">Owned by us.</span></h1>
+<h1 class="text-4xl tracking-tight leading-10 font-extrabold mb-3">An online music store. <span class="text-amber-600">Owned by us.</span></h1>
 
 <div class="max-w-3xl mb-6">
   <p class="mb-3 text-slate-600">We're a co-operatively owned music store, 100% run by and for the benefit of musicians, fans and the people who work here. <%= text_link_to "Find out more", about_path %>.</p>

diff --git a/app/views/interests/thankyou.html.erb b/app/views/interests/thankyou.html.erb
@@ -1,5 +1,5 @@
-<%= render 'shared/page_header', text: 'Thank you' %>
-
-<p class="mb-3 leading-relaxed">We've sent you an email. Please
-  check your inbox and click the link to confirm your email
-  address.</p>
+<%= render(SectionComponent.new(title: 'Thank you!')) do %>
+  <p class="mb-3 leading-relaxed">We've sent you an email. Please
+    check your inbox and click the link to confirm your email
+    address.</p>
+<% end %>