Add ability to save chosen syntax highlight

Author: rossta

app/controllers/settings/syntax_highlights_controller.rb

@@ -12,16 +12,7 @@ def show
   end
 
   def update
-    # highlight = params[:syntax_highlight]
-    # if available_highlight_styles.include?(highlight)
-    #   current_user.update(syntax_highlight: highlight)
-    #   flash[:notice] = "Syntax highlight updated to #{highlight}"
-    # else
-    #   flash[:alert] = "Invalid syntax highlight choice"
-    # end
-    # redirect_to action: :show
-
-    syntax_highlight = params.fetch(:settings, {}).permit(:syntax_highlight)
+    syntax_highlight = params.fetch(:settings, {}).permit(:syntax_highlight_name)[:syntax_highlight_name]
     @syntax_highlight = Settings::SyntaxHighlight.find(syntax_highlight)
 
     redirect_to settings_syntax_highlight_path unless @syntax_highlight.present?

app/views/settings/syntax_highlights/form.rb

@@ -17,6 +17,7 @@ def initialize(
     @available_highlights = available_highlights
     @preview_syntax_highlight = preview_syntax_highlight
     @session_syntax_highlight = session_syntax_highlight
+    @default_syntax_highlight = default_syntax_highlight
   end
 
   def view_template
@@ -29,37 +30,28 @@ def view_template
         syntax_highlight_preview_name_value: @current_highlight.name
       }
     ) do
+      h2 { "Want to preview a new syntax highlighting theme?" }
+
       markdown do
-        "You are currently previewing **#{@current_highlight.display_name}** as your syntax highlighting theme."
+        "This site uses [Pygments-style CSS](https://pygments.org/) for syntax highlighting. You can use the select menu to preview a new syntax highlighting theme. I have curated over 90 options for you from sources around the web."
       end
 
-      if preserving?
+      if previewing?
         markdown do
-          "You have saved **#{@session_highlight_light.display_name}** for syntax highlighting across the site."
+          "You are currently previewing **#{@current_highlight.display_name}** as your syntax highlighting theme."
         end
       end
 
-      form_with(
-        model: @settings,
-        url: settings_syntax_highlight_path,
-        method: :get
-      ) do |form|
-        fieldset do
-          flex_block do
-            form.label :syntax_highlight_name, "Choose another syntax highlighting theme to preview:"
-            form.select :syntax_highlight_name,
-              syntax_highlight_options_for_select,
-              {
-                selected: @current_highlight.name
-              },
-              onchange: "this.form.requestSubmit()"
-          end
+      if preserving?
+        markdown do
+          "You have saved **#{@session_syntax_highlight.display_name}** for syntax highlighting across the site."
         end
       end
+      preview_select
 
       if previewing?
         markdown do
-          "You can preview what the site looks with this syntax highlighting theme while you remain on this page. Click the **Reset preview** button to go back to #{@session_syntax_highlight ? "your saved color scheme" : "the default color scheme"}."
+          "You can preview what the site looks with this syntax highlighting theme while you remain on this page. Click the **Reset preview** button to go back to #{@session_syntax_highlight ? "your saved color scheme, **#{@session_syntax_highlight.display_name}**" : "the default color scheme, **#{@default_syntax_highlight.display_name}**"}."
         end
 
         div(class: "outside") { reset_button }
@@ -72,13 +64,14 @@ def view_template
 
         div(class: "outside") do
           button_to("Save #{@current_highlight.display_name}",
-            settings_color_scheme_path(settings: {syntax_highlight_name: @current_highlight.name}),
+            settings_syntax_highlight_path(settings: {syntax_highlight_name: @current_highlight.name}),
             method: :patch,
             class: "button primary")
         end
       end
 
       h2 { %(Preview) }
+
       h3 { %(Ruby) }
 
       render CodeBlock::Article.new(language: "ruby") do |code|
@@ -145,6 +138,26 @@ def m
     Markdown::Application.new(yield).call.html_safe
   end
 
+  def preview_select
+    form_with(
+      model: @settings,
+      url: settings_syntax_highlight_path,
+      method: :get
+    ) do |form|
+      fieldset do
+        flex_block do
+          form.label :syntax_highlight_name, "Choose another syntax highlighting theme to preview:"
+          form.select :syntax_highlight_name,
+            syntax_highlight_options_for_select,
+            {
+              selected: @current_highlight.name
+            },
+            onchange: "this.form.requestSubmit()"
+        end
+      end
+    end
+  end
+
   def flex_block(options = {}, &)
     div(class: "flex items-start flex-col space-col-4 grid-cols-12 md:items-center md:flex-row md:space-row-4 #{options[:class]}", &)
   end

app/views/settings/syntax_highlights/show_view.rb

@@ -16,7 +16,7 @@ def initialize(
   end
 
   def view_template
-    render Pages::Header.new(title: "Settings: Syntax Highlight")
+    render Pages::Header.new(title: "Settings: Syntax Highlighting")
 
     section(class: %(secton-content container py-gap)) do
       turbo_frame_tag "syntax-highlight-form", data: {turbo_action: "advance"} do

spec/system/settings/syntax_highlights_spec.rb

@@ -8,7 +8,8 @@
 
     click_link "Syntax Highlighting"
 
-    expect(page).to have_content("You are currently previewing Dracula as your syntax highlighting theme")
+    expect(page).to have_css("link[data-syntax-highlight*=dracula]", visible: false)
+
     expect(page).to have_content("Choose another syntax highlighting theme to preview")
 
     select "Fruity", from: "settings[syntax_highlight_name]"
@@ -17,5 +18,10 @@
     expect(page).not_to have_content("currently previewing Dracula")
 
     expect(page).to have_css("link[data-syntax-highlight*=fruity]", visible: false)
+
+    click_button "Save Fruity"
+
+    expect(page).to have_content("You have saved Fruity for syntax highlighting across the site")
+    expect(page).to have_css("link[data-syntax-highlight*=fruity]", visible: false)
   end
 end