Add and change a due date on bubbles

app/assets/images/calendar-add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>calendar-add-1</title><path d="M9.569,16.5H2.5A.5.5,0,0,1,2,16V7.5A.5.5,0,0,1,2.5,7H16a.5.5,0,0,1,.5.5V9.57a7.281,7.281,0,0,1,2,0V3a1,1,0,0,0-1-1H15a.25.25,0,0,1-.25-.25v-1a.75.75,0,1,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H7a.25.25,0,0,1-.25-.25v-1a.75.75,0,0,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H1A1,1,0,0,0,0,3V16.5a2,2,0,0,0,2,2H9.569a7.281,7.281,0,0,1,0-2Z"/><path d="M17.5,11A6.5,6.5,0,1,0,24,17.5,6.508,6.508,0,0,0,17.5,11Zm.75,9a.75.75,0,1,1-1.5,0V18.5a.25.25,0,0,0-.25-.25H15a.75.75,0,0,1,0-1.5h1.5a.25.25,0,0,0,.25-.25V15a.75.75,0,1,1,1.5,0v1.5a.25.25,0,0,0,.25.25H20a.75.75,0,0,1,0,1.5H18.5a.25.25,0,0,0-.25.25Z"/></svg>

app/assets/stylesheets/bubbles.css

@@ -136,6 +136,23 @@
   &.bubble__date {
     aspect-ratio: 1;
     inset: 2cqi 2cqi auto auto;
+
+    label {
+      display: grid;
+      place-items: center;
+
+      > * {
+        grid-area: 1/1;
+      }
+    }
+  }
+
+  &.bubble__date--new {
+    padding: 0.7em;
+
+    .windshield & {
+      display: none;
+    }
   }
 
   &:where(.bubble__meta) {
@@ -157,7 +174,7 @@
     white-space: nowrap;
     z-index: 1;
 
-    &:has(.input:not([type="file"])) {
+    &:has(.input:not([type="file"], [type="date"])) {
       border-radius: 2em;
       padding: 0.2em 0.5em;
 

app/assets/stylesheets/inputs.css

@@ -179,3 +179,10 @@
       -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
   }
 }
+
+.input--hidden {
+  block-size: 0;
+  inline-size: 0;
+  opacity: 0;
+  padding: 0;
+}

app/controllers/bubbles_controller.rb

@@ -41,7 +41,7 @@ class BubblesController < ApplicationController
     end
 
     def bubble_params
-      params.require(:bubble).permit(:title, :body, :color, :image, :remove_image, tag_ids: [])
+      params.require(:bubble).permit(:title, :body, :color, :due_on, :image, :remove_image, tag_ids: [])
     end
 
     def remove_image

app/javascript/controllers/form_controller.js

@@ -14,4 +14,10 @@ export default class extends Controller {
   preventAttachment(event) {
     event.preventDefault()
   }
+
+  showPicker(event) {
+    if ("showPicker" in HTMLInputElement.prototype) {
+      event.target.showPicker()
+    }
+  }
 }

app/views/bubbles/_bubble.html.erb

@@ -35,9 +35,25 @@
     </div>
   <% end %>
 
-  <time class="bubble__bubble bubble__meta bubble__date">
-    <%= bubble.created_at.strftime("%b <br> %d").html_safe %>
-  </time>
+  <% if bubble.due_on.present? %>
+    <%= form_with model: bubble, data: { controller: "form" } do | form | %>
+      <label class="bubble__bubble bubble__meta bubble__date">
+        <%= bubble.due_on.strftime("%b <br> %d").html_safe %>
+        <%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker"} %>
+        <span class="for-screen-reader">Change the due date</span>
+      </label>
+    <% end %>
+  <% else %>
+    <div class="bubble__bubble bubble__meta bubble__date bubble__date--new">
+      <%= form_with model: bubble, data: { controller: "form" } do | form | %>
+        <label class="btn btn--plain" style="--btn-icon-size: 2.5em; margin-inline-end: -0.2em">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--bubble-color)"><path d="M9.569,16.5H2.5A.5.5,0,0,1,2,16V7.5A.5.5,0,0,1,2.5,7H16a.5.5,0,0,1,.5.5V9.57a7.281,7.281,0,0,1,2,0V3a1,1,0,0,0-1-1H15a.25.25,0,0,1-.25-.25v-1a.75.75,0,1,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H7a.25.25,0,0,1-.25-.25v-1a.75.75,0,0,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H1A1,1,0,0,0,0,3V16.5a2,2,0,0,0,2,2H9.569a7.281,7.281,0,0,1,0-2Z"/><path fill="var(--color-positive)" d="M17.5,11A6.5,6.5,0,1,0,24,17.5,6.508,6.508,0,0,0,17.5,11Zm.75,9a.75.75,0,1,1-1.5,0V18.5a.25.25,0,0,0-.25-.25H15a.75.75,0,0,1,0-1.5h1.5a.25.25,0,0,0,.25-.25V15a.75.75,0,1,1,1.5,0v1.5a.25.25,0,0,0,.25.25H20a.75.75,0,0,1,0,1.5H18.5a.25.25,0,0,0-.25.25Z"/></svg>
+          <%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker"} %>
+          <span class="for-screen-reader">Add a due date</span>
+        </label>
+      <% end %>
+    </div>
+  <% end %>
 
   <% bubble.tags.each do |tag| %>
     <%= link_to "##{tag.title}", bubbles_path(tag_id: tag), class: "bubble__bubble bubble__meta bubble__tag" %>

db/migrate/20240913172737_add_due_date_to_bubbles.rb

@@ -0,0 +1,5 @@
+class AddDueDateToBubbles < ActiveRecord::Migration[8.0]
+  def change
+    add_column :bubbles, :due_on, :date
+  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_09_05_191233) do
+ActiveRecord::Schema[8.0].define(version: 2024_09_13_172737) do
   create_table "accounts", force: :cascade do |t|
     t.string "name", null: false
     t.datetime "created_at", null: false
@@ -62,6 +62,7 @@ ActiveRecord::Schema[8.0].define(version: 2024_09_05_191233) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.integer "creator_id", null: false
+    t.date "due_on"
   end
 
   create_table "comments", force: :cascade do |t|