Filter index by category

app/assets/images/remove.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.664 5.578a1.5 1.5 0 0 0 0-2.121l-2.121-2.121a1.5 1.5 0 0 0-2.122 0l-6.244 6.245a.25.25 0 0 1-.354 0L5.579 1.336a1.5 1.5 0 0 0-2.122 0L1.336 3.457a1.5 1.5 0 0 0 0 2.121l6.245 6.245a.25.25 0 0 1 0 .354l-6.245 6.245a1.5 1.5 0 0 0 0 2.121l2.121 2.121a1.5 1.5 0 0 0 2.122 0l6.244-6.245a.25.25 0 0 1 .354 0l6.244 6.245a1.5 1.5 0 0 0 2.122 0l2.121-2.121a1.5 1.5 0 0 0 0-2.121l-6.245-6.245a.25.25 0 0 1 0-.354z"/></svg>

app/assets/stylesheets/splats.css

@@ -34,10 +34,31 @@
   }
 }
 
+.splat__category {
+  aspect-ratio: 1;
+  background-color: var(--color-bg);
+  border: 0.5em solid var(--splat-color);
+  border-radius: 50%;
+  color: var(--splat-color);
+  display: flex;
+  font-size: 5cqi;
+  font-weight: 800;
+  inset: auto auto 3cqi 3cqi;
+  padding: 0.5em 1em;
+  place-items: center;
+  position: absolute;
+
+  + & {
+    inset: auto auto 0 24cqi;
+  }
+}
+
 .splat__date {
   aspect-ratio: 1;
-  background-color: var(--splat-color);
+  background-color: var(--color-bg);
+  border: 0.5em solid var(--splat-color);
   border-radius: 50%;
+  color: var(--splat-color);
   display: flex;
   font-size: 5cqi;
   font-weight: 800;
@@ -59,23 +80,6 @@
   z-index: -1;
 }
 
-.splat__tag {
-  aspect-ratio: 1;
-  background-color: var(--splat-color);
-  border-radius: 50%;
-  display: flex;
-  font-size: 5cqi;
-  font-weight: 800;
-  inset: auto auto 3cqi 3cqi;
-  padding: 0.5em 1em;
-  place-items: center;
-  position: absolute;
-
-  + & {
-    inset: auto auto 0 24cqi;
-  }
-}
-
 .splat__title {
   font-size: 10cqi;
   line-height: 1.2;

app/controllers/splats_controller.rb

@@ -2,7 +2,12 @@ class SplatsController < ApplicationController
   before_action :set_splat, only: [ :show, :edit, :update ]
 
   def index
-    @splats = Splat.all
+    if params[:category_id]
+      @category = Category.find(params[:category_id])
+      @splats = @category.splats
+    else
+      @splats = Splat.all
+    end
   end
 
   def new

app/views/splats/_splat.html.erb

@@ -5,7 +5,7 @@
   <% end %>
   <time class="splat__date"><%= splat.updated_at.strftime("%B <br> %d").html_safe %></time>
 
-  <% if splat.categories.any? %>
-    <span class="splat__tag"><%= splat.categories.first.title %></span>
+  <% splat.categories.each do | category | %>
+    <%= link_to category.title, splats_path(category_id: category.id), class: "splat__category" %>
   <% end %>
 </div>

app/views/splats/index.html.erb

@@ -5,6 +5,19 @@
       <span class="for-screen-reader">Settings</span>
     </button>
 
+    <h1 class="txt-xx-large margin-none flex align-center gap-half">
+      Splats
+
+      <% if @category %>
+        in <%= @category.title %>
+
+        <%= link_to splats_path, class: "btn txt-small" do %>
+          <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+          <span class="for-screen-reader">Clear</span>
+        <% end %>
+      <% end %>
+    </h1>
+
     <div class="flex-item-justify-end" data-controller="dialog">
       <%= tag.button class: "btn flex-item-justify-end", popovertarget: "new-splat-panel" do %>
         <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
@@ -67,7 +80,7 @@
         <% end %>
         <small class="flex align-center gap flex-item-shrink">
           <% splat.categories.each do |category| %>
-            <span class="btn txt-small txt-nowrap"><%= category.title %></span>
+            <%= link_to category.title, splats_path(category_id: category.id), class: "btn txt-small txt-nowrap" %>
           <% end %>
           <span class="avatar txt-small txt-nowrap fill-shade"><strong>JZ</strong></span>
           <time class="txt-nowrap flex-item-justify-end"><%= splat.updated_at.strftime("%B %d").html_safe %></time>