🟠 Feature/editing past happythings

Gemfile.lock

@@ -447,6 +447,7 @@ GEM
     zeitwerk (2.7.3)
 
 PLATFORMS
+  arm64-darwin-22
   arm64-darwin-24
   x86_64-linux
 

app/assets/stylesheets/application.scss

@@ -41,3 +41,7 @@
 body {
   background-color: $off-white;
 }
+
+a {
+  text-decoration: none;
+}

app/assets/stylesheets/components/_happy_thing.scss

@@ -2,17 +2,18 @@
 @import "mixins/media";
 
 .happy_thing {
-  // Base
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: $space-s;
-
+  gap: $space-xs;
+  line-height: 1.1;
+  color: $sexy_blue;
   background-color: $color-white;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
-  margin-bottom: $space-m;
-  padding: $space-xs;
+  margin-top: $space-s;
+  margin-bottom: $space-s;
+  padding: $space-m $space-xs;
 
   @include media(tabletAndUp) {
     padding: $space-xs $space-m;
@@ -24,6 +25,51 @@
     align-self: flex-start;
     gap: $space-xs;
   }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.happy_thing_for_long_title {
+  @extend .happy_thing;
+  flex-direction: column !important;
+}
+
+.happy_thing_title {
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+
+.happy_thing_metadata_bottom {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  align-self: flex-end;
+  gap: 4px;
+  line-height: 1;
+  margin-top: $space-xs;
+}
+
+.happy_thing_metadata_right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 4px;
+  line-height: 1;
+}
+
+.happy_thing_photo_emoji {
+  opacity: 0.7;
+  font-size: 0.95em;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.happy_thing_date {
+  font-size: 0.85em;
+  color: #888;
+  font-weight: 300;
 }
 
 .pagination {

app/assets/stylesheets/config/_colors.scss

@@ -10,6 +10,7 @@ $cornflowerblue: #6499E9;
 $colombia_blue: #9EDDFF;
 $paleturquoise: #A6F6FF;
 $cute_blue: #BEFFF7;
+$sexy_blue: #3498D8;
 
 $yellow: #F1C40F;
 $orange: #ffc229;
@@ -31,3 +32,5 @@ $olive: #808000;
 $lime: #00FF00;
 $mint: #98FF98; // Mint is calming and fresh. Lavender (E6E6FA) - This shade is often associated with tranquility and calmness
 $gold: #FDB813; // This color is often associated with sunshine happiness
+
+$grey: #888;

app/assets/stylesheets/layouts/_container.scss

@@ -14,3 +14,8 @@
     max-width: 60rem;
   }
 }
+
+.app-container {
+  max-width: 480px;
+  margin: 0 auto;
+}

app/controllers/happy_things_controller.rb

@@ -22,6 +22,7 @@ def recent_happy_things
 
   def show
     @marker = @happy_thing.geocoded? ? { lat: @happy_thing.latitude, lng: @happy_thing.longitude } : nil
+    @comment = Comment.new
   end
 
   def new
@@ -73,7 +74,6 @@ def calendar
   end
 
   def show_by_date
-    @comment = Comment.new
     @date = begin
       Date.parse(params[:date])
     rescue ArgumentError

app/helpers/happy_things_helper.rb

@@ -14,6 +14,16 @@ def friendly_date(date)
     end
   end
 
+  def use_long_title_layout?(happy_thing)
+    base_threshold = 93
+    date_string_subtraction = friendly_date(happy_thing.start_time).length
+    photo_emoji_subtraction = happy_thing.photo.attached? ? 6 : 0
+    comments_emoji_subtraction = happy_thing.comments.any? ? 6 : 0
+
+    threshold = base_threshold - photo_emoji_subtraction - date_string_subtraction - comments_emoji_subtraction
+    happy_thing.title.length >= threshold
+  end
+
   def grouped_visibility_options(user) # rubocop:disable Metrics/AbcSize
     group_options = user.groups.map { |g| ["🌟 #{g.name}", "group_#{g.id}"] }
     group_member_options = user.groups.flat_map do |group|

app/views/dashboards/index.html.erb

@@ -24,7 +24,7 @@
   <div class="dash-box mx-2 my-3">
     <h3>What made you happy</h3>
     <% @happy_things_of_the_last_two_days.each do |user, happy_things| %>
-      <h5><%= user.emoji %> <%= user.first_name %></h5>
+      <h5 class="mt-3"><%= user.emoji %> <%= user.first_name %></h5>
       <% happy_things.each do |happy_thing| %>
         <%= render 'happy_things/happy_thing', happy_thing: happy_thing %>
       <% end %>

app/views/happy_things/_happy_thing.html.erb

@@ -1,20 +1,31 @@
-<div class="happy_thing shadow">
-    <% if happy_thing.photo.attached? %>
-        <span>📸</span>
+<%= link_to happy_thing_path(happy_thing) do %>
+    <% if use_long_title_layout?(happy_thing) %>
+        <div class="happy_thing_for_long_title">
+            <div class="happy_thing_title">
+                <%= happy_thing.title %>
+            </div>
+            <div class="happy_thing_metadata_bottom">
+                <div class="happy_thing_photo_emoji">
+                    <%= "📸" if happy_thing.photo.attached? %><%= "📝" if happy_thing.comments.any? %>
+                </div>
+                <div class="happy_thing_date">
+                    <%= friendly_date(happy_thing.start_time) %>
+                </div>
+            </div>
+        </div>
+    <% else %>
+        <div class="happy_thing">
+            <div class="happy_thing_title">
+                <%= happy_thing.title %>
+            </div>
+            <div class="happy_thing_metadata_right">    
+                <div class="happy_thing_photo_emoji">
+                    <%= "📸" if happy_thing.photo.attached? %><%= "📝" if happy_thing.comments.any? %>
+                </div>
+                <div class="happy_thing_date">
+                    <%= friendly_date(happy_thing.start_time) %>
+                </div> 
+            </div>
+        </div>
     <% end %>
-    <div class="happy_thing_content">
-        <span><%= link_to happy_thing.title, happy_thing_path(happy_thing), class: "text-decoration-none" %></span>
-    </div>
-    <div class="happy_thing_creator">
-        <!-- TODO: Show user's name or other details -->
-    </div>
-
-    <div class="happy_thing_actions d-flex justify-content-between align-items-center">
-        <span style="color: #888; font-size: 0.85em;"><%= friendly_date(happy_thing.start_time) %></span>
-        <% if happy_thing.user == current_user %>
-            <%= link_to "⋮", edit_happy_thing_path(happy_thing), class: "btn btn--light edit-link" %>
-            <% else %>
-            <%= link_to "⋮", '#', class: "btn btn--light edit-link" %>
-        <% end %>
-    </div>
-</div>
+<% end %>

app/views/happy_things/show.html.erb

@@ -1,4 +1,4 @@
-<main class="container my-3">
+<main class="container my-3" data-controller="toggle">
   <%= link_to sanitize("&larr;"), root_path, class: "btn button--primary m-4" %>
   <div class="header d-flex justify-content-center text-center">
     <h1>
@@ -9,6 +9,38 @@
     </h1>
   </div>
 
+  <!-- Comments Section -->
+  <div class="mt-3">
+    <!-- Show Comments if Any -->
+    <% if @happy_thing.comments.any? %>
+      <div class="existing-comments">
+        <h5>Comments:</h5>
+        <% @happy_thing.comments.each do |comment| %>
+          <div class="comment mb-2">
+            <p><strong><%= comment.user.first_name %>:</strong> <%= comment.content %></p>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <p class="opacity-80">No Comments yet.</p>
+    <% end %>
+
+    <!-- Smaller "Add a comment" Button -->
+    <a data-action="click->toggle#fire" class="btn btn-sm button--primary mt-2">Add a comment...</a>
+
+    <!-- Comments Section (Hidden by default) -->
+    <div class="comments mt-3 d-none" data-toggle-target="togglableElement">
+      <!-- Form to Add a New Comment -->
+      <%= simple_form_for([@happy_thing, @comment], html: { class: 'mt-2' }) do |f| %>
+        <div class="form-group">
+          <%= f.input :content, label: false, placeholder: 'Add a comment...', input_html: { class: 'form-control' } %>
+        </div>
+        <%= f.button :submit, 'Add Comment', class: 'btn btn-sm button--primary mt-2' %>
+      <% end %>
+    </div>
+  </div>
+  <!-- End of Comments Section -->
+
   <% if @marker %>
     <div style="width: 100%; height: 600px;"
           data-controller="map"
@@ -18,4 +50,7 @@
             (Rails.env.development? || Rails.env.test? ? 'FAKE_MAPBOX_API_KEY' : nil) %>">
     </div>
   <% end %>
+  <% if @happy_thing.user == current_user %>
+    <%= link_to "Edit", edit_happy_thing_path(@happy_thing), class: "btn button--primary float-end"%>
+  <% end %>
 </main>

app/views/happy_things/show_by_date.html.erb

@@ -1,62 +1,24 @@
 <div class="container my-3" data-controller="toggle">
   <%= link_to sanitize("&larr;"), root_path, class: "btn button--primary my-3" %>
-  <h1><%= @date.strftime('%B %d, %Y') %></h1>
 
-  <% if @happy_things.any? %>
-    <ul>
+  <div class="dash-box mx-2 my-3">
+    <h1><%= @date.strftime('%B %d, %Y') %></h1>
+    <% if @happy_things.any? %>
       <% @happy_things.group_by(&:user).each do |user, happy_things| %>
-        <li class="list-unstyled mt-3">
-          <h2><%= user.emoji %> <%= user.first_name %></h2>
-          <ol>
-            <% happy_things.each do |happy_thing| %>
-              <li class="mb-4">
-                <strong><%= happy_thing.title.sub(/\S/, &:upcase) %></strong>
-                <%= cl_image_tag happy_thing.photo.key, class: "rounded mt-3", height: 200, width: 200, crop: :fill, gravity: :auto if happy_thing.photo.attached? %>
-
-                <!-- Comments Section -->
-                <div class="mt-3">
-                  <!-- Show Comments if Any -->
-                  <% if happy_thing.comments.any? %>
-                    <div class="existing-comments">
-                      <h5>Comments:</h5>
-                      <% happy_thing.comments.each do |comment| %>
-                        <div class="comment mb-2">
-                          <p><strong><%= comment.user.first_name %>:</strong> <%= comment.content %></p>
-                        </div>
-                      <% end %>
-                    </div>
-                  <% else %>
-                    <p class="opacity-80">No Comments yet.</p>
-                  <% end %>
-
-                  <!-- Smaller "Add a comment" Button -->
-                  <a data-action="click->toggle#fire" class="btn btn-sm button--primary mt-2">Add a comment...</a>
-
-                  <!-- Comments Section (Hidden by default) -->
-                  <div class="comments mt-3 d-none" data-toggle-target="togglableElement">
-                    <!-- Form to Add a New Comment -->
-                    <%= simple_form_for([happy_thing, @comment], html: { class: 'mt-2' }) do |f| %>
-                      <div class="form-group">
-                        <%= f.input :content, label: false, placeholder: 'Add a comment...', input_html: { class: 'form-control' } %>
-                      </div>
-                      <%= f.button :submit, 'Add Comment', class: 'btn btn-sm button--primary mt-2' %>
-                    <% end %>
-                  </div>
-                </div>
-                <!-- End of Comments Section -->
-              </li>
-            <% end %>
-          </ol>
-        </li>
+        <h5 class="mt-3"><%= user.emoji %> <%= user.first_name %></h5>
+        <% happy_things.each do |happy_thing| %>
+          <%= render 'happy_things/happy_thing', happy_thing: happy_thing %>
+        <% end %>
       <% end %>
-    </ul>
-  <% else %>
-    <p class="opacity-50">No Happy Things found for this date.</p>
-  <% end %>
+    <% else %>
+      <p class="opacity-50">No Happy Things found for this date.</p>
+    <% end %>
+  </div>
+</div>
 
   <!-- Conditional Form to add a new Happy Thing, shown only if there are less than 10 happy things -->
   <% if @happy_things.count < 10 %>
-    <div class="my-5">
+    <div class="dash-box mx-2 my-3">
       <h3>Forgot something? Add more Happy Things</h3>
       <%= simple_form_for(@old_happy_thing, url: happy_things_old_happy_thing_path, method: :post, html: { multipart: true }) do |f| %>
         <%= f.input :title, label: 'Title', required: true, input_html: {class: 'form-control mt-3 mb-2'} %>
@@ -66,6 +28,4 @@
       <% end %>
     </div>
   <% end %>
-
-  <%= link_to 'Back to Dashboard', root_path, class: "btn button--primary" %>
 </div>

app/views/layouts/application.html.erb

@@ -19,8 +19,10 @@
   </head>
 
   <body data-controller="notification service-worker" data-notification-target="notification">
-    <%= render partial: 'layouts/navbar' if render_navbar?  %>
-    <%= yield %>
-    <%= render partial: 'layouts/alerts'  %>
+    <div class="app-container">
+      <%= render partial: 'layouts/navbar' if @render_navbar  %>
+      <%= yield %>
+      <%= render partial: 'layouts/alerts'  %>
+    </div>
   </body>
 </html>

spec/system/happy_things_crud_spec.rb

@@ -55,7 +55,10 @@
     it 'updates a happy thing' do
       expect(page).to have_content(happy_thing.title, wait: 5)
 
-      click_link(href: edit_happy_thing_path(happy_thing), match: :first)
+      click_link(href: happy_thing_path(happy_thing), match: :first)
+
+      expect(page).to have_link(href: edit_happy_thing_path(happy_thing))
+      click_link(href: edit_happy_thing_path(happy_thing))
 
       expect(page).to have_selector('h1', text: 'EDIT HAPPY THING', wait: 5)
       expect(page).to have_current_path(edit_happy_thing_path(happy_thing))
@@ -71,7 +74,10 @@
     it 'destroys a happy thing' do
       expect(page).to have_content(happy_thing.title, wait: 5)
 
-      click_link(href: edit_happy_thing_path(happy_thing), match: :first)
+      click_link(href: happy_thing_path(happy_thing), match: :first)
+
+      expect(page).to have_link(href: edit_happy_thing_path(happy_thing))
+      click_link(href: edit_happy_thing_path(happy_thing))
 
       expect(page).to have_selector('h1', text: 'EDIT HAPPY THING', wait: 5)
       expect(page).to have_current_path(edit_happy_thing_path(happy_thing))