feat(goals): extract shared color_icon_picker controller; add icon to goals; tinted avatar

User requested replacing the in-house color disclosure with the
categories color+icon popover. Done as a controller extraction so
categories and goals share one Stimulus controller (user's option:
"Extract a shared color_icon_picker_controller.js").

- `git mv` app/javascript/controllers/category_controller.js to
  color_icon_picker_controller.js. Categories form + color_avatar
  partial updated to use the new identifier (data-controller=
  "color-icon-picker", target/action selectors renamed).
- Goal model gains an icon column (migration
  20260511190000_add_icon_to_goals.rb) + ICONS = Category.icon_codes
  + inclusion validation. GoalsController permits :icon in
  goal_params + goal_update_params.
- Goals::AvatarComponent now renders icon when present (falls back to
  first-letter initial), and adopts the Categories tinted-bg + colored
  -content style (bg = `color-mix(in oklab, COLOR 10%, transparent)`,
  text/icon = COLOR). Matches the picker's live preview so what the
  user sees during selection equals the saved state.
- New goals/_color_picker.html.erb mirrors categories/_form's popover:
  avatar + pen overlay summary + popup with color row (+ rainbow
  custom-hex trigger) + icon grid. Pickr / contrast validation / auto-
  adjust all inherited from the shared controller.
- Stepper step 1 layout: drop the inline letter-avatar (data-goal-
  stepper-target="avatarPreview") in favour of the picker avatar next
  to the name input. Step 1's tail no longer renders a separate color
  partial. Edit form passes icons local through.

Verified live: new goal modal renders 11 color radios (10 presets +
custom) + 141 icon radios + pen-summary; categories form still
operational (no console errors) under the renamed controller.

app/components/goals/avatar_component.html.erb

@@ -1,6 +1,10 @@
-<span class="inline-flex items-center justify-center text-inverse font-semibold <%= box_classes %> <%= text_classes %> <%= radius_classes %>"
-      style="background-color: <%= color %>;"
+<span class="inline-flex items-center justify-center font-semibold <%= box_classes %> <%= text_classes %> <%= radius_classes %>"
+      style="background-color: color-mix(in oklab, <%= color %> 10%, transparent); color: <%= color %>;"
       aria-hidden="true"
       data-testid="goal-avatar">
-  <%= initial %>
+  <% if icon.present? %>
+    <%= icon(icon, size: icon_size, color: "current") %>
+  <% else %>
+    <%= initial %>
+  <% end %>
 </span>

app/components/goals/avatar_component.rb

@@ -16,20 +16,30 @@ class Goals::AvatarComponent < ApplicationComponent
     PALETTE[Digest::MD5.hexdigest(name).to_i(16) % PALETTE.size]
   end
 
-  def initialize(goal: nil, name: nil, color: nil, size: "md")
+  def initialize(goal: nil, name: nil, color: nil, icon: nil, size: "md")
     @goal = goal
     @name = name || goal&.name
     @color = color || goal&.color || Goal::COLORS.first
+    @icon = icon || goal&.icon
     @size = SIZES.key?(size) ? size : "md"
   end
 
-  attr_reader :color
+  attr_reader :color, :icon
 
   def initial
     return "?" if @name.blank?
     @name.strip.first&.upcase || "?"
   end
 
+  def icon_size
+    case @size
+    when "sm" then "xs"
+    when "md" then "sm"
+    when "lg" then "md"
+    when "xl" then "xl"
+    end
+  end
+
   def box_classes
     SIZES[@size][:box]
   end