Replace Bubble#color enum with a standard attribute with a default

app/models/bubble.rb

@@ -1,4 +1,6 @@
 class Bubble < ApplicationRecord
+  include Colored
+
   belongs_to :project
   belongs_to :creator, class_name: "User", default: -> { Current.user }
 
@@ -12,9 +14,4 @@ class Bubble < ApplicationRecord
   has_many :assignees, through: :assignments, source: :user
 
   has_one_attached :image, dependent: :purge_later
-
-  enum :color, %w[
-    #BF1B1B #ED3F1C #ED8008 #7C956B
-    #698F9C #3B4B59 #5D618F #3B3633 #67695E
-  ].index_by(&:itself), suffix: true, default: "#698F9C"
 end

app/models/bubble/colored.rb

@@ -0,0 +1,9 @@
+module Bubble::Colored
+  extend ActiveSupport::Concern
+
+  COLORS = %w[ #BF1B1B #ED3F1C #ED8008 #7C956B #698F9C #3B4B59 #5D618F #3B3633 #67695E ]
+
+  included do
+    attribute :color, default: "#698F9C"
+  end
+end

app/views/bubbles/_bubble.html.erb

@@ -1,4 +1,7 @@
-<div class="bubble" data-controller="upload-preview" style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) -%> <%= bubble_size(bubble) %>">
+<div class="bubble"
+  style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>"
+  data-controller="upload-preview">
+
   <h1 class="bubble__title">
     <%= turbo_frame_tag bubble, :edit do %>
       <%= link_to bubble.title, edit_project_bubble_path(bubble.project, bubble), class: "txt-undecorated" %>

app/views/bubbles/_color.html.erb

@@ -6,9 +6,9 @@
 
   <dialog class="bubble__color-picker" data-dialog-target="dialog">
     <%= form_with model: bubble, url: project_bubble_path(bubble.project, bubble), data: { controller: "form", action: "change->form#submit" } do |form| %>
-      <% Bubble.colors.keys.each do |color| %>
+      <% Bubble::COLORS.each do |color| %>
         <span class="bubble__color-picker__color">
-          <label class="btn btn--circle" style="--btn-background: <%= color -%>" title="<%= 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>

app/views/bubbles/new.html.erb

@@ -1,5 +1,7 @@
 <div class="bubble__perma flex justify-center center">
-  <div class="bubble" style="view-transition-name: bubble-<%= @bubble.id -%>; --bubble-color: <%= @bubble.color %>; <%= bubble_size(@bubble) %> <%= bubble_rotation(@bubble) %>">
+  <div class="bubble"
+    style="view-transition-name: bubble-<%= @bubble.id -%>; --bubble-color: #<%= @bubble.color %>; <%= bubble_size(@bubble) %> <%= bubble_rotation(@bubble) %>">
+
     <%= form_with model: @bubble, url: project_bubble_path(@bubble.project, @bubble), class: "flex flex-column gap full-width" do |form| %>
       <h1 class="bubble__title">
         <%= form.text_area :title, class: "input full-width borderless", required: true, placeholder: "Name it…", rows: 4, autofocus: true %>
@@ -10,6 +12,7 @@
         <span class="for-screen-reader">Save</span>
       <% end %>
     <% end %>
+
     <svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
   </div>
 </div>