From be2062f9021e0b267b0a5bf6231bf99e967ccc14 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jzimdars@37signals.com>
Date: Wed, 31 Jul 2024 16:22:36 -0500
Subject: [PATCH] Simple flow for creating categories

- Also includes a dev-facing index for removing them (for now)
- Saves an interim bubble style for posterity
---
 app/assets/stylesheets/splats.css        | 19 ++++++++++--
 app/assets/stylesheets/utilities.css     |  5 +++
 app/controllers/categories_controller.rb | 39 ++++++++++++++++++++++++
 app/controllers/splats_controller.rb     |  2 +-
 app/models/category.rb                   |  2 +-
 app/views/categories/index.html.erb      | 20 ++++++++++++
 app/views/categories/new.html.erb        |  6 ++++
 app/views/splats/_splat.html.erb         |  8 +++++
 app/views/splats/index.html.erb          |  2 +-
 config/routes.rb                         |  6 +++-
 10 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 app/controllers/categories_controller.rb
 create mode 100644 app/views/categories/index.html.erb
 create mode 100644 app/views/categories/new.html.erb

diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css
index 0dd687956..d189e72b9 100644
--- a/app/assets/stylesheets/splats.css
+++ b/app/assets/stylesheets/splats.css
@@ -69,7 +69,7 @@
 .splat__bubble {
   aspect-ratio: 1 / 0.96;
   background-color: var(--color-bg);
-  background-image: radial-gradient(90% 90% at 50% 50%, #FFFFFF80 0%, #ffffff90 45%, var(--splat-color) 70%);
+  background-image: radial-gradient(90% 90% at 50% 50%, #FFFFFFFF 0%, #ffffff90 45%, var(--splat-color) 70%);
   background-position: 0;
   background-size: 100%;
   block-size: 95%;
@@ -79,11 +79,20 @@
   transform: rotate(var(--splat-rotate));
   z-index: -1;
 
+  a {
+    color: var(--splat-color);
+  }
+
   &.splat__category {
+    aspect-ratio: unset;
     inset: auto auto 3cqi 3cqi;
 
     + & {
-      inset: auto auto 0 24cqi;
+      inset: auto auto -5cqi 26cqi;
+
+      + & {
+        inset: auto auto -5cqi 52cqi;
+      }
     }
   }
 
@@ -105,6 +114,12 @@
     scale: 1;
     transform: none;
   }
+
+  &.splat__category-new {
+    .windshield & {
+      display: none;
+    }
+  }
 }
 
 .splat__title {
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index d6f2dd0fa..0a3173ff6 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -239,3 +239,8 @@
 /* Visibility */
 [hidden] { display: none; }
 [contents] { display: contents; }
+
+/* Turbo */
+turbo-frame {
+  display: contents;
+}
diff --git a/app/controllers/categories_controller.rb b/app/controllers/categories_controller.rb
new file mode 100644
index 000000000..02af1a511
--- /dev/null
+++ b/app/controllers/categories_controller.rb
@@ -0,0 +1,39 @@
+class CategoriesController < ApplicationController
+  before_action :set_category, only: :destroy
+  before_action :set_splat, only: %i[ new create ]
+
+  def index
+    @categories = Category.all
+  end
+
+  def new
+    @category = Category.new
+  end
+
+  def create
+    @category = Category.new(category_params)
+    @category.save
+
+    @category.splats << @splat
+    redirect_to splat_path(@splat)
+  end
+
+  def destroy
+    @category.destroy
+    redirect_to categories_path
+  end
+
+  private
+
+  def category_params
+    params.require(:category).permit(:title)
+  end
+
+  def set_category
+    @category = Category.find(params[:id])
+  end
+
+  def set_splat
+    @splat = Splat.find(params[:splat_id])
+  end
+end
diff --git a/app/controllers/splats_controller.rb b/app/controllers/splats_controller.rb
index ae5408174..cfe056b28 100644
--- a/app/controllers/splats_controller.rb
+++ b/app/controllers/splats_controller.rb
@@ -1,5 +1,5 @@
 class SplatsController < ApplicationController
-  before_action :set_splat, only: [ :show, :edit, :update ]
+  before_action :set_splat, only: %i[ show edit update ]
 
   def index
     if params[:category_id]
diff --git a/app/models/category.rb b/app/models/category.rb
index bd7a63a92..4034bd7be 100644
--- a/app/models/category.rb
+++ b/app/models/category.rb
@@ -1,4 +1,4 @@
 class Category < ApplicationRecord
   has_many :categorizations
-  has_many :splats, through: :categorizations
+  has_many :splats, through: :categorizations, dependent: :destroy
 end
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
new file mode 100644
index 000000000..0c175fd23
--- /dev/null
+++ b/app/views/categories/index.html.erb
@@ -0,0 +1,20 @@
+<section class="panel borderless center margin pad">
+  <h1>All categories</h1>
+  <ul class="txt-align-start">
+    <% @categories.each do | category | %>
+      <li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-subtle)">
+        <span>
+          <strong class="txt-nowrap"><%= category.title %></strong>
+          <span class="txt-nowrap"><%= category.id %></span>
+        </span>
+        <span><%= category.splats.collect { |splat| link_to(splat.title, splat) }.to_sentence.html_safe %></span>
+        <%= button_to category_path(category),
+            method: :delete, data: { turbo_confirm: "Are you sure you want to delete this category?" },
+            class: "btn txt-small" do %>
+          <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+          <span class="for-screen-reader">Delete</span>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</section>
diff --git a/app/views/categories/new.html.erb b/app/views/categories/new.html.erb
new file mode 100644
index 000000000..a92d413cf
--- /dev/null
+++ b/app/views/categories/new.html.erb
@@ -0,0 +1,6 @@
+<turbo-frame id="new_catgory">
+  <%= form_with model: [@splat, @category], data: { turbo_frame: "_top" } do |form| %>
+      <%= form.text_field :title, class: "input txt-small", autofocus: "on" %>
+      <%= form.submit "Create Category", hidden: true %>
+  <% end %>
+</turbo-frame>
diff --git a/app/views/splats/_splat.html.erb b/app/views/splats/_splat.html.erb
index ecc93d427..7ff9252c6 100644
--- a/app/views/splats/_splat.html.erb
+++ b/app/views/splats/_splat.html.erb
@@ -9,4 +9,12 @@
   <% splat.categories.each do | category | %>
     <%= link_to category.title, splats_path(category_id: category.id), class: "splat__bubble splat__meta splat__category" %>
   <% end %>
+
+  <% if splat.categories.count < 3 %>
+    <span class="splat__bubble splat__meta splat__category">
+      <turbo-frame id="new_catgory">
+        <%= link_to "#", new_splat_category_path(splat) %>
+      </turbo-frame>
+    </span>
+  <% end %>
 </div>
diff --git a/app/views/splats/index.html.erb b/app/views/splats/index.html.erb
index 7ff69108b..5d2ee1663 100644
--- a/app/views/splats/index.html.erb
+++ b/app/views/splats/index.html.erb
@@ -6,7 +6,7 @@
     <% end %>
 
     <h1 class="txt-xx-large margin-none flex align-center gap-half">
-      Splats
+      Bubbled up
 
       <% if @category %>
         in <%= @category.title %>
diff --git a/config/routes.rb b/config/routes.rb
index f75e6b678..b6deb26ee 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,8 +1,12 @@
 Rails.application.routes.draw do
   root "splats#index"
 
+  resources :categories, only: %i[index destroy]
   resource :session
-  resources :splats
+
+  resources :splats do
+    resources :categories, only: %i[new create]
+  end
 
   get "up" => "rails/health#show", as: :rails_health_check
 end