Allow select color scale for preview

Author: rossta

app/controllers/color_themes_controller.rb

@@ -1,10 +1,10 @@
 class ColorThemesController < ApplicationController
   def show
     @color_scale = params[:id] ? ColorScale.find(params[:id]) : ColorScale.find_or_create_default
-    curated_color_scales = Rails.cache.fetch("curated_color_scales") { ColorScale.curated }
+    curated_color_scales = ColorScale.cached_curated
 
     render ColorThemes::ShowView.new(
-      color_scale: color_scale,
+      color_scale: @color_scale,
       curated_color_scales: curated_color_scales
     )
   end

app/views/application/theme/_color.html.erb

@@ -1,8 +1,5 @@
 <%
-  my_color = 'cerulean-blue'
-  ui_colors_color_increments = [50, *1.upto(9).map { |n| n*100}, 950 ]
-
-  color_scale = ColorScale.find_or_create_default
+  color_scale = @color_scale || ColorScale.find_or_create_default
 %>
 <style>
   :root {

app/views/color_themes/show_view.rb

@@ -2,6 +2,7 @@
 
 class ColorThemes::ShowView < ApplicationView
   include Phlex::Rails::Helpers::FormWith
+  include Phlex::Rails::Helpers::LinkTo
 
   def initialize(color_scale:, curated_color_scales: [])
     @color_scale = color_scale
@@ -11,8 +12,6 @@ def initialize(color_scale:, curated_color_scales: [])
   def view_template
     render Pages::Header.new(title: "Settings: Color Theme")
     div(class: "section-content container py-gap") do
-      p { "You can preview and save your desired color theme for this site. We have curated some options for you below." }
-
       h3 { @color_scale.display_name }
       div(class: "color-theme color-theme:#{@color_scale.name.parameterize}") do
         @color_scale.weights.each do |weight, color|
@@ -24,12 +23,23 @@ def view_template
       end
 
       h3 { "Want to try a different color theme?" }
+      p { "You can preview and save your desired color theme for this site. We have curated some options for you below." }
+
       form_with(url: color_theme_path, method: :get) do |f|
-        fieldset do
-          f.select :id, @curated_color_scales.map { |cs| [cs.display_name, cs.id] }, include_blank: "Pick one!"
-        end
-        fieldset do
-          f.submit "Show me!", class: "button primary"
+        fieldset(class: "flex items-center") do
+          f.select :id,
+            @curated_color_scales.map { |cs| [cs.display_name, cs.id] },
+            {
+              prompt: "Pick one!"
+            },
+            # https://stackoverflow.com/questions/68624668/how-can-i-submit-a-form-on-input-change-with-turbo-streams
+            onchange: "this.form.requestSubmit()",
+            class: "mr-2 bg-gray-50 border border-gray-300 text-small rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+
+          whitespace
+          span(class: "mr-2 font-small") { "OR" }
+          whitespace
+          link_to "I feel lucky!", color_theme_path(id: @curated_color_scales.sample.id), class: "button primary"
         end
       end
     end