Ability to set color scheme in session

Author: rossta

app/controllers/application_controller.rb

@@ -1,4 +1,21 @@
 class ApplicationController < ActionController::Base
   include Erroring
   include Authentication
+
+  before_action :set_color_theme
+
+  def set_color_theme
+    @color_scale = find_color_theme
+  end
+
+  def find_color_theme
+    if session[:color_scale_id]
+      begin
+        return ColorScale.find(session[:color_scale_id])
+      rescue ActiveRecord::RecordNotFound
+      end
+    end
+
+    ColorScale.cached_default
+  end
 end

app/controllers/color_themes_controller.rb

@@ -1,14 +1,38 @@
 class ColorThemesController < ApplicationController
   def show
-    show_params = params[:color_theme] ? params.require(:color_theme).permit(:color_scale_id) : {}
-    color_scale_id = show_params[:color_scale_id]
-    @color_scale = color_scale_id ? ColorScale.find(color_scale_id) : ColorScale.find_or_create_default
+    @color_scale = selected_color_scale || session_color_scale || ColorScale.cached_default
     @color_theme = ColorTheme.new(color_scale: @color_scale)
 
     render ColorThemes::ShowView.new(
       color_theme: @color_theme,
+      fallback_color_scale: session_color_scale || ColorScale.cached_default,
       curated_color_scales: ColorScale.cached_curated,
-      selected: color_scale_id.present?
+      selected: selected_color_scale_id.present?,
+      saved: session[:color_scale_id].presence == @color_scale.id
     )
   end
+
+  def update
+    update_params = params[:color_theme] ? params.require(:color_theme).permit(:color_scale_id) : {}
+    color_scale_id = update_params[:color_scale_id]
+    @color_scale = ColorScale.find(color_scale_id)
+
+    redirect_to color_theme_path unless @color_scale.present?
+
+    if @color_scale == ColorScale.cached_default
+      session.delete(:color_scale_id)
+    else
+      session[:color_scale_id] = @color_scale.id
+    end
+
+    redirect_to color_theme_path, status: :see_other
+  end
+
+  private
+
+  def selected_color_scale_id = params.dig(:color_theme, :color_scale_id) || session[:color_scale_id]
+
+  def session_color_scale = session[:color_scale_id] && ColorScale.find(session[:color_scale_id])
+
+  def selected_color_scale = selected_color_scale_id && ColorScale.find(selected_color_scale_id)
 end

app/models/color_scale.rb

@@ -52,8 +52,8 @@ def self.cached_default
 
     return where(id: cached_id).first if cached_id
 
-    where(name: APP_DEFAULT[:name]).first.tap do |cs|
-      Rails.cache.write("default_color_scale_id", cs.id)
+    find_or_create_default.tap do |cs|
+      Rails.cache.write(cache_key, cs.id)
     end
   end
 

app/models/color_theme.rb

@@ -6,4 +6,6 @@ class ColorTheme
   def initialize(color_scale:)
     @color_scale = color_scale
   end
+
+  def color_scale_id = color_scale.id
 end

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

@@ -1,8 +1,5 @@
-<%
-  color_scale = @color_scale || ColorScale.find_or_create_default
-%>
 <style>
   :root {
-    <%= render ColorScales::Css.new(color_scale: color_scale) %>
+    <%= render ColorScales::Css.new(color_scale: @color_scale || ColorScale.find_or_create_default) %>
   }
 </style>

app/views/color_themes/show_view.rb

@@ -3,47 +3,95 @@
 class ColorThemes::ShowView < ApplicationView
   include Phlex::Rails::Helpers::FormWith
   include Phlex::Rails::Helpers::LinkTo
+  include Phlex::Rails::Helpers::ButtonTo
+  include Phlex::Rails::Helpers::ContentFor
 
-  def initialize(color_theme:, curated_color_scales: [], selected: false)
+  def initialize(color_theme:, fallback_color_scale: nil, curated_color_scales: [], selected: false, saved: false)
     @color_theme = color_theme
     @color_scale = color_theme.color_scale
+    @fallback_color_scale = fallback_color_scale
     @curated_color_scales = curated_color_scales
     @selected = selected
+    @saved = saved
   end
 
   def view_template
-    render Pages::Header.new(title: "Settings: Color Theme")
+    content_for :head do
+      render("application/theme/color")
+    end
+    render Pages::Header.new(title: "Theme")
     div(class: "section-content container py-gap") do
-      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(model: @color_theme, url: url_for, method: :get) do |f|
-        fieldset(class: "flex items-center") do
-          f.select(
-            :color_scale_id,
-            @curated_color_scales.map { |cs| [cs.display_name, cs.id] },
-            {
-              prompt: "Pick one!",
-              selected: (@selected ? @color_scale.id : nil)
-            },
-            # requestSubmit and Turbo
-            # 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"
-          )
+      if @saved || @selected
+        h3 do
+          plain "You are now #{@saved ? "using" : "previewing"} the"
+          whitespace
+          span(class: "emphasis") { @color_scale.display_name }
+          whitespace
+          plain "color scheme"
+        end
+      else
+        h3 { "Want to try a different color scheme?" }
+      end
 
-          span(class: "mr-2 text-small") { "OR" }
-          link_to "I feel lucky!", url_for(color_theme: {color_scale_id: @curated_color_scales.sample.id}), class: "button primary mr-2"
-          if @selected
-            span(class: "mr-2 text-small") { unsafe_raw "&bull;" }
-            link_to "Reset to default", url_for, class: "button secondary"
+      p { "You can preview and save your desired color scheme for this site. We have curated some options for you below." }
+
+      div(class: "flex items-center") do
+        span(class: "mr-2 text-small") { "Preview" }
+
+        form_with(model: @color_theme, url: url_for, method: :get) do |f|
+          fieldset do
+            f.select(
+              :color_scale_id,
+              @curated_color_scales.map { |cs| [cs.display_name, cs.id] },
+              {
+                prompt: "Pick one!",
+                selected: @selected && @color_scale.id
+              },
+              # requestSubmit and Turbo
+              # https://stackoverflow.com/questions/68624668/how-can-i-submit-a-form-on-input-change-with-turbo-streams
+              onchange: "this.form.requestSubmit()",
+              class: "mr-2"
+            )
           end
         end
+
+        span(class: "mr-2 text-small") { "OR" }
+
+        link_to "I feel lucky!",
+          color_theme_path(color_theme: {color_scale_id: @curated_color_scales.sample.id}),
+          class: "button secondary mr-2"
+
+        if @selected && @color_scale != @fallback_color_scale
+          span(class: "mr-2 text-small") { "OR" }
+
+          button_to "Reset preview",
+            color_theme_path(color_theme: {color_scale_id: @fallback_color_scale.id}),
+            method: :patch,
+            class: "button tertiary mr-2"
+        end
+      end
+
+      if @selected
+        div(class: "flex items-center") do
+          span(class: "mr-2 text-small") { plain "Save" }
+
+          button_to "Save this color scheme",
+            color_theme_path(color_theme: {color_scale_id: @color_scale.id}),
+            method: :patch,
+            class: "button primary mr-2"
+
+          span(class: "mr-2 text-small") { unsafe_raw "&bull;" }
+
+          button_to "Reset to default",
+            color_theme_path(color_theme: {color_scale_id: ColorScale.cached_default.id}),
+            method: :patch,
+            class: "button tertiary mr-2"
+        end
       end
 
       h3 { display_name }
-      div(class: "color-theme color-theme:#{@color_scale.name.parameterize}") do
+
+      div(class: "color-scheme color-scheme__#{@color_scale.name.parameterize}") do
         @color_scale.weights.each do |weight, color|
           div(class: "color-swatch color-swatch__weight:#{weight}", style: "background-color: #{color.hex}") do
             div(class: "color-swatch__weight") { weight }

spec/models/color_scale_spec.rb

@@ -17,7 +17,8 @@
     it "should return a hash of all weights" do
       color_scale = FactoryBot.build(:color_scale)
 
-      expect(color_scale.weights).to eq(
+      # ColorConversion::Color objects don’t implement #==, so we convert to hex
+      expect(color_scale.weights.transform_values { |color| color.hex }).to eq(
         "50" => color_scale.weight_50,
         "100" => color_scale.weight_100,
         "200" => color_scale.weight_200,

spec/system/color_themes/customize_spec.rb

@@ -4,14 +4,21 @@
 
 RSpec.describe "Customize Color Themes", type: :system do
   it "user can selected a curated color scale" do
+    curated_color_names = YAML.load_file(Rails.root.join("config", "curated_colors.yml")).sample(3)
+
+    curated_colors = curated_color_names.map do |name|
+      FactoryBot.create(:color_scale, name: name)
+    end
+
     visit color_theme_path
 
-    select "Thunderbird", from: "Choose a color scheme"
+    chosen_color = curated_colors.second
+    select chosen_color.display_name, from: "color_theme[color_scale_id]"
 
-    click_button "Use this color scheme"
+    click_button "Save this color scheme"
 
-    expect(page).to have_content("You are now using the Cerulean Blue color scheme")
+    expect(page).to have_content("You are now using the #{chosen_color.display_name} color scheme")
 
-    expect(page).to have_css("color-theme:custom-thunderbird")
+    expect(page).to have_css(".color-scheme__#{chosen_color.name.parameterize}")
   end
 end