Render comments on splats

app/assets/stylesheets/comments.css

@@ -40,3 +40,9 @@
   inline-size: 100%;
   flex-wrap: wrap;
 }
+
+.comment__body {
+  p:first-child {
+    margin-block-start: 0;
+  }
+}

app/controllers/comments_controller.rb

@@ -0,0 +1,2 @@
+class CommentsController < ApplicationController
+end

app/helpers/comments_helper.rb

@@ -0,0 +1,2 @@
+module CommentsHelper
+end

app/models/comment.rb

@@ -0,0 +1,4 @@
+class Comment < ApplicationRecord
+  belongs_to :splat
+  belongs_to :creator, class_name: "User", default: -> { Current.user }
+end

app/models/splat.rb

@@ -1,6 +1,7 @@
 class Splat < ApplicationRecord
   has_many :categorizations
   has_many :categories, through: :categorizations, dependent: :destroy
+  has_many :comments, dependent: :destroy
 
   belongs_to :creator, class_name: "User", default: -> { Current.user }
 

app/models/user.rb

@@ -11,6 +11,10 @@ class User < ApplicationRecord
     self == Current.user
   end
 
+  def initials
+    name.scan(/\b\w/).join
+  end
+
   def deactivate
     transaction do
       sessions.delete_all

app/views/comments/_comment.html.erb

@@ -0,0 +1,13 @@
+<div class="comment flex align-start gap">
+  <div class="flex align-center gap full-width">
+    <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= comment.creator.initials %></strong></span>
+    <header class="full-width flex align-center gap">
+      <strong><%= comment.creator.name %></strong>
+    </header>
+  </div>
+  <div class="comment__body txt-align-start">
+    <%= simple_format comment.body %>
+  </div>
+</div>
+
+<hr />

app/views/splats/show.html.erb

@@ -38,57 +38,7 @@
 <section class="comments panel center borderless margin-block flex flex-column gap" style="--splat-color: <%= @splat.color %>;">
 
   <hr />
-
-  <div class="comment flex align-start gap">
-    <header class="full-width margin-block">
-      Added by <strong><%= @splat.creator.name %></strong> on <%= @splat.created_at.strftime("%B %d") %> (<%= time_ago_in_words @splat.created_at %> ago).
-    </header>
-  </div>
-
-  <hr />
-
-  <div class="comment flex align-start gap">
-    <div class="flex align-center gap">
-      <span class="avatar fill-shade flex-item-no-shrink"><strong>JZ</strong></span>
-      <header class="full-width flex align-center gap">
-        <strong>Jason Zimdars</strong>
-      </header>
-    </div>
-    <div class="comment__body txt-align-start">
-      <p class="margin-none-block-start">I'll be speaking in Chicago early next month at the ABA convention and they'll be sharing this resource with all State Bar Presidents. I mentioned Writebook in the intro towards the bottom. The platform is awesome! </p>
-    </div>
-  </div>
-
-  <hr />
-
-  <div class="comment flex align-start gap">
-    <div class="flex align-center gap">
-      <span class="avatar fill-selected flex-item-no-shrink"><strong>JF</strong></span>
-      <header class="full-width flex align-center gap">
-        <strong>Jason Fried</strong>
-      </header>
-    </div>
-    <div class="comment__body txt-align-start">
-      <p class="margin-none-block-start">Never mind, I nipped home and tried it on Browser Stack. It's working correctly on Windows with Edge, Chrome & Firefox. </p>
-    </div>
-  </div>
-
-  <hr />
-
-  <div class="comment flex align-start gap">
-    <div class="flex align-center gap">
-      <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong>JF</strong></span>
-      <header class="full-width flex align-center gap">
-        <strong>Kevin McConnell</strong>
-      </header>
-    </div>
-    <div class="comment__body txt-align-start">
-      <p class="margin-none-block-start">If this is only happening to one site, and potentially has already resolved itself, then I'll just dig into this on Monday and see if I can find an explanation or a way to reproduce it. Hopefully this isn't a sign of something more common, but so far doesn't sound like it. </p>
-      <p>But if you hear about something similar happening to anyone else, please flag it here and I'll look more urgently.</p>
-    </div>
-  </div>
-
-  <hr />
+  <%= render @splat.comments %>
 
   <button class="btn btn--positive center">
     <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>

db/migrate/20240814214252_create_comments.rb

@@ -0,0 +1,11 @@
+class CreateComments < ActiveRecord::Migration[8.0]
+  def change
+    create_table :comments do |t|
+      t.text :body
+      t.integer :creator_id, null: false
+      t.integer :splat_id, null: false
+
+      t.timestamps
+    end
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.0].define(version: 2024_08_14_210043) do
+ActiveRecord::Schema[8.0].define(version: 2024_08_14_214252) do
   create_table "categories", force: :cascade do |t|
     t.string "title"
     t.datetime "created_at", null: false
@@ -26,6 +26,14 @@ ActiveRecord::Schema[8.0].define(version: 2024_08_14_210043) do
     t.index ["splat_id"], name: "index_categorizations_on_splat_id"
   end
 
+  create_table "comments", force: :cascade do |t|
+    t.text "body"
+    t.integer "creator_id", null: false
+    t.integer "splat_id", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+  end
+
   create_table "organizations", force: :cascade do |t|
     t.string "name", null: false
     t.datetime "created_at", null: false

test/controllers/comments_controller_test.rb

@@ -0,0 +1,7 @@
+require "test_helper"
+
+class CommentsControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end

test/fixtures/comments.yml

@@ -0,0 +1,11 @@
+# Read about fixtures at https://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
+
+one:
+  body: I agree.
+  creator: :jz
+  splat: :one
+
+two:
+  body: Same, let’s do it.
+  creator: :kevin
+  splat: :one

test/models/comment_test.rb

@@ -0,0 +1,7 @@
+require "test_helper"
+
+class CommentTest < ActiveSupport::TestCase
+  # test "the truth" do
+  #   assert true
+  # end
+end