Iterate on ux for syntax highlight preview

Author: rossta

app/controllers/concerns/syntax_highlighting.rb

@@ -6,7 +6,7 @@ module SyntaxHighlighting
   end
 
   def find_syntax_highlight
-    @syntax_highlight ||= preview_syntax_highlight || default_syntax_highlight
+    @syntax_highlight ||= preview_syntax_highlight || session_syntax_highlight || default_syntax_highlight
   end
 
   def preview_syntax_highlight_name = params.fetch(:settings, {}).permit(:syntax_highlight_name)[:syntax_highlight_name]

app/controllers/settings/syntax_highlights_controller.rb

@@ -1,8 +1,13 @@
 class Settings::SyntaxHighlightsController < ApplicationController
   def show
+    @syntax_highlight = find_syntax_highlight
+
     render Settings::SyntaxHighlights::ShowView.new(
-      settings: Settings.new(syntax_highlight: find_syntax_highlight),
-      available_highlights: Settings::SyntaxHighlight.curated
+      settings: Settings.new(syntax_highlight: @syntax_highlight),
+      available_highlights: Settings::SyntaxHighlight.curated,
+      preview_syntax_highlight: preview_syntax_highlight,
+      session_syntax_highlight: session_syntax_highlight,
+      default_syntax_highlight: default_syntax_highlight
     )
   end
 

app/views/color_schemes/form.rb

@@ -202,8 +202,8 @@ def preserving? = @session_color_scheme.present?
 
   def default_color_scheme? = @color_scheme.id == @default_color_scheme
 
-  def markdown(&block)
-    render Markdown::Application.new(block.call)
+  def markdown
+    render Markdown::Application.new(yield)
   end
 
   def flex_block(options = {}, &)

app/views/settings/syntax_highlights/form.rb

@@ -5,29 +5,48 @@ class Settings::SyntaxHighlights::Form < ApplicationView
   include Phlex::Rails::Helpers::ContentFor
   include Phlex::Rails::Helpers::StylesheetLinkTag
 
-  def initialize(settings:, available_highlights:)
+  def initialize(
+    settings:,
+    available_highlights: [],
+    default_syntax_highlight: Settings::SyntaxHighlight.default,
+    preview_syntax_highlight: nil,
+    session_syntax_highlight: nil
+  )
     @settings = settings
     @current_highlight = settings.syntax_highlight
     @available_highlights = available_highlights
+    @preview_syntax_highlight = preview_syntax_highlight
+    @session_syntax_highlight = session_syntax_highlight
   end
 
   def view_template
     stylesheet_link_tag @current_highlight.asset_path, data: {syntax_highlight: @current_highlight.name}
 
-    div(class: "grid grid-content", data: {controller: "syntax-highlight-preview", syntax_highlight_preview_name_value: @current_highlight.name}) do
-      p do
-        plain %(Current syntax highlight style:)
-        whitespace
-        strong { @current_highlight.display_name }
+    div(
+      class: "grid grid-content",
+      data: {
+        controller: "syntax-highlight-preview",
+        syntax_highlight_preview_name_value: @current_highlight.name
+      }
+    ) do
+      markdown do
+        "You are currently previewing **#{@current_highlight.display_name}** as your syntax highlighting theme."
       end
+
+      if preserving?
+        markdown do
+          "You have saved **#{@session_highlight_light.display_name}** for syntax highlighting across the site."
+        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 a syntax highlight style to preview:"
+            form.label :syntax_highlight_name, "Choose another syntax highlighting theme to preview:"
             form.select :syntax_highlight_name,
               syntax_highlight_options_for_select,
               {
@@ -38,6 +57,27 @@ def view_template
         end
       end
 
+      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"}."
+        end
+
+        div(class: "outside") { reset_button }
+
+        darkmode_section
+
+        markdown do
+          "Click the Save button to preserve **#{@current_highlight.display_name}** as your new syntax highlighting theme."
+        end
+
+        div(class: "outside") do
+          button_to("Save #{@current_highlight.display_name}",
+            settings_color_scheme_path(settings: {syntax_highlight_name: @current_highlight.name}),
+            method: :patch,
+            class: "button primary")
+        end
+      end
+
       h2 { %(Preview) }
       h3 { %(Ruby) }
 
@@ -76,8 +116,35 @@ def each(&)
     end
   end
 
+  def darkmode_section
+    noscript do
+      markdown do
+        "*Disclaimer: The Light/Dark mode switch is not available without JavaScript enabled.*"
+      end
+    end
+
+    markdown do
+      "You can toggle the dark mode switch to see how the syntax highlighting looks in light or dark mode. Choosing **Light Mode** or **Dark Mode** will save in your browser local storage and will persist across page views on your current device. Choose **System Mode** to remove the saved choice and fall back to your system preference."
+    end
+    div(class: "outside") do
+      render "darkmode/switch", enable_description: true, enable_outline: true
+    end
+  end
+
   private
 
+  def previewing? = @preview_syntax_highlight.present?
+
+  def preserving? = @session_syntax_highlight.present?
+
+  def markdown
+    render Markdown::Application.new(yield)
+  end
+
+  def m
+    Markdown::Application.new(yield).call.html_safe
+  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
@@ -87,4 +154,10 @@ def syntax_highlight_options_for_select
       .group_by { |sh| sh.mode }
       .map { |mode, syntaxes| [mode.titleize, syntaxes.map { |sh| [sh.name.titleize, sh.name] }] }
   end
+
+  def reset_button
+    link_to "Reset preview",
+      url_for,
+      class: "button tertiary"
+  end
 end

app/views/settings/syntax_highlights/show_view.rb

@@ -1,9 +1,18 @@
 class Settings::SyntaxHighlights::ShowView < ApplicationView
   include Phlex::Rails::Helpers::TurboFrameTag
 
-  def initialize(settings:, available_highlights:)
+  def initialize(
+    settings:,
+    available_highlights:,
+    preview_syntax_highlight:,
+    session_syntax_highlight:,
+    default_syntax_highlight:
+  )
     @settings = settings
     @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
@@ -13,7 +22,10 @@ def view_template
       turbo_frame_tag "syntax-highlight-form", data: {turbo_action: "advance"} do
         render Settings::SyntaxHighlights::Form.new(
           settings: @settings,
-          available_highlights: @available_highlights
+          available_highlights: @available_highlights,
+          preview_syntax_highlight: @preview_syntax_highlight,
+          session_syntax_highlight: @session_syntax_highlight,
+          default_syntax_highlight: @default_syntax_highlight
         )
       end
     end

spec/system/settings/syntax_highlights_spec.rb

@@ -8,13 +8,13 @@
 
     click_link "Syntax Highlighting"
 
-    expect(page).to have_content("Choose a syntax highlight style to preview")
-    expect(page).to have_content("Current syntax highlight style: Dracula")
+    expect(page).to have_content("You are currently previewing Dracula as your syntax highlighting theme")
+    expect(page).to have_content("Choose another syntax highlighting theme to preview")
 
     select "Fruity", from: "settings[syntax_highlight_name]"
 
-    expect(page).to have_content("Current syntax highlight style: Fruity")
-    expect(page).not_to have_content("Current syntax highlight style: Dracula")
+    expect(page).to have_content("You are currently previewing Fruity as your syntax highlighting theme")
+    expect(page).not_to have_content("currently previewing Dracula")
 
     expect(page).to have_css("link[data-syntax-highlight*=fruity]", visible: false)
   end