Inline color picker

app/assets/images/art.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.2 15.2c.1-.7-.4-1.4-1.1-1.5-1.8-.2-3.5.8-4.2 2.5-.5 1.2-1 1.1-1.5.9-2.7-.7-4.6-3.1-4.8-5.8.1-3.5 3.6-6.3 7.9-6.3 1.7 0 3.3.4 4.7 1.3.6.4 1.5.2 1.9-.4s.2-1.5-.4-1.9c-1.9-1.1-4-1.7-6.1-1.7-6-.1-10.6 4-10.6 9 .2 3.9 2.8 7.3 6.6 8.4 1.9.7 4-.2 4.7-2.1 0-.1.1-.2.1-.3.2-.6.8-.9 1.4-.9s1.3-.5 1.4-1.2z"/><circle cx="6.1" cy="12.8" r="1.3"/><circle cx="7.4" cy="8.4" r="1.3"/><circle cx="11.8" cy="7.5" r="1.3"/><path d="m21.8 4.4c-.3-.2-.6-.2-.9-.1s-.5.4-.5.7c0 1.1-.6 2.1-1.5 2.6-1.3 1-2.2 2-1.8 3.7.1.4.3.8.5 1.1s.2.6.1.9l-4.5 8.9c-.3.7-.1 1.5.6 1.8s1.5.1 1.8-.6l4.7-9.3c.1-.2.3-.4.6-.5.9-.2 1.6-.8 2.2-1.5.8-1.1 1.1-2.5.8-3.8-.2-1.6-1-2.9-2.1-3.9z"/></svg>

app/assets/stylesheets/bubbles.css

@@ -147,10 +147,20 @@
     }
   }
 
+  &.bubble__color {
+    cursor: pointer;
+    inset: 10cqi auto auto 0cqi;
+    padding: 0.4em;
+
+    .windshield & {
+      display: none;
+    }
+  }
+
   &.bubble__date {
     aspect-ratio: 1;
     cursor: pointer;
-    inset: 2cqi 2cqi auto auto;
+    inset: 2cqb 2cqi auto auto;
 
     label {
       display: grid;
@@ -214,6 +224,63 @@
   }
 }
 
+.bubble__color-picker {
+  border: 0;
+  display: none;
+  margin-block-start: -6.5em;
+
+  &[open] {
+    display: block;
+  }
+
+  .bubble__color-picker__color {
+    --btn-size: 2em;
+    --rotation: 0deg;
+
+    block-size: 4.33em;
+    inset: 0 auto auto 0;
+    position: absolute;
+    transform: rotate(var(--rotation));
+    transform-origin: bottom center;
+
+    .btn {
+      transform: rotate(calc(var(--rotation) * -1));
+    }
+
+    &:nth-of-type(2) {
+      --rotation: 40deg;
+    }
+
+    &:nth-of-type(3) {
+      --rotation: 80deg;
+    }
+
+    &:nth-of-type(4) {
+      --rotation: 120deg;
+    }
+
+    &:nth-of-type(5) {
+      --rotation: 160deg;
+    }
+
+    &:nth-of-type(6) {
+      --rotation: 200deg;
+    }
+
+    &:nth-of-type(7) {
+      --rotation: 240deg;
+    }
+
+    &:nth-of-type(8) {
+      --rotation: 280deg;
+    }
+
+    &:nth-of-type(9) {
+      --rotation: -40deg;
+    }
+  }
+}
+
 .bubble__image {
   mask-image: url(blob.svg);
   mask-position: center;

app/assets/stylesheets/popover.css

@@ -1,44 +0,0 @@
-:is([popover]) {
-  --backdrop-speed: 150ms;
-  --speed: 150ms;
-
-  border: 0;
-  opacity: 0;
-  transform: translateY(50%);
-  transform-origin: bottom center;
-  transition:
-      display var(--speed) allow-discrete,
-      opacity var(--speed),
-      overlay var(--speed) allow-discrete,
-      transform var(--speed);
-
-  &::backdrop {
-    background-color: var(--color-ink);
-    opacity: 0;
-    transform: translateY(0);
-    transition:
-      display var(--backdrop-speed) allow-discrete,
-      opacity var(--backdrop-speed),
-      overlay var(--backdrop-speed) allow-discrete;
-  }
-
-  &:popover-open {
-    opacity: 1;
-    transform: translateY(0);
-
-    &::backdrop {
-      opacity: 0.5;
-    }
-  }
-
-  @starting-style {
-    &:popover-open {
-      opacity: 0;
-      transform: translateY(50%);
-    }
-
-    &:popover-open::backdrop {
-      opacity: 0;
-    }
-  }
-}

app/javascript/controllers/dialog_controller.js

@@ -4,6 +4,6 @@ export default class extends Controller {
   static targets = [ "dialog" ]
 
   open() {
-    this.dialogTarget.showModal()
+    this.dialogTarget.show()
   }
 }

app/models/bubble.rb

@@ -10,7 +10,7 @@ class Bubble < ApplicationRecord
   has_one_attached :image, dependent: :purge_later
 
   enum :color, %w[
-    #AF2E1B #CC6324 #3B4B59 #BFA07A #ED8008 #ED3F1C #BF1B1B #736B1E #D07B53
-    #736356 #AD1D1D #BF7C2A #C09C6F #698F9C #7C956B #5D618F #3B3633 #67695E
+    #BF1B1B #ED3F1C #ED8008 #7C956B
+    #698F9C #3B4B59 #5D618F #3B3633 #67695E
   ].index_by(&:itself), suffix: true, default: "#698F9C"
 end

app/views/bubbles/_bubble.html.erb

@@ -15,6 +15,7 @@
   <% end %>
 
   <%= render "bubbles/boosts", bubble: bubble %>
+  <%= render "bubbles/color", bubble: bubble %>
   <%= render "bubbles/date", bubble: bubble %>
   <%= render "bubbles/image", bubble: bubble %>
   <%= render "bubbles/tags", bubble: bubble %>

app/views/bubbles/_color.html.erb

@@ -0,0 +1,20 @@
+<div class="bubble__bubble bubble__meta bubble__color" data-controller="dialog">
+  <button class="btn btn--plain" style="--btn-icon-size: 2.25em;" data-action="dialog#open">
+    <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path d="m14.2 15.2c.1-.7-.4-1.4-1.1-1.5-1.8-.2-3.5.8-4.2 2.5-.5 1.2-1 1.1-1.5.9-2.7-.7-4.6-3.1-4.8-5.8.1-3.5 3.6-6.3 7.9-6.3 1.7 0 3.3.4 4.7 1.3.6.4 1.5.2 1.9-.4s.2-1.5-.4-1.9c-1.9-1.1-4-1.7-6.1-1.7-6-.1-10.6 4-10.6 9 .2 3.9 2.8 7.3 6.6 8.4 1.9.7 4-.2 4.7-2.1 0-.1.1-.2.1-.3.2-.6.8-.9 1.4-.9s1.3-.5 1.4-1.2z"/><circle cx="6.1" cy="12.8" r="1.3"/><circle cx="7.4" cy="8.4" r="1.3"/><circle cx="11.8" cy="7.5" r="1.3"/><path d="m21.8 4.4c-.3-.2-.6-.2-.9-.1s-.5.4-.5.7c0 1.1-.6 2.1-1.5 2.6-1.3 1-2.2 2-1.8 3.7.1.4.3.8.5 1.1s.2.6.1.9l-4.5 8.9c-.3.7-.1 1.5.6 1.8s1.5.1 1.8-.6l4.7-9.3c.1-.2.3-.4.6-.5.9-.2 1.6-.8 2.2-1.5.8-1.1 1.1-2.5.8-3.8-.2-1.6-1-2.9-2.1-3.9z"/></svg>
+    <span class="for-screen-reader">Change color</span>
+  </button>
+
+  <dialog class="bubble__color-picker" data-dialog-target="dialog">
+    <%= form_with model: bubble, data: { controller: "form", action: "change->form#submit" } do |form| %>
+      <% Bubble.colors.keys.each do |color| %>
+        <span class="bubble__color-picker__color">
+          <label class="btn btn--circle" style="--btn-background: <%= color -%>" title="<%= color %>">
+            <%= form.radio_button :color, color %>
+            <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24, class: "checked" %>
+            <span class="for-screen-reader"><%= color %></span>
+          </label>
+        </span>
+      <% end %>
+    <% end %>
+  </dialog>
+</div>