Separate snippet screenshot controller

Author: rossta

app/controllers/share/snippet_screenshots_controller.rb

@@ -0,0 +1,17 @@
+class Share::SnippetScreenshotsController < ApplicationController
+  def show
+    @snippet = Snippet.find(params[:snippet_id])
+
+    render layout: false
+  end
+
+  def new
+    @snippet = Snippet.find(params[:snippet_id])
+  end
+
+  def create
+    @snippet = Snippet.find(params[:snippet_id])
+    @snippet.attach_screenshot_from_base64(params[:screenshot])
+    redirect_to share_snippet_url(@snippet), notice: "Screenshot attached."
+  end
+end

app/controllers/share/snippets_controller.rb

@@ -32,7 +32,7 @@ def create
     @snippet = Snippet.new(snippet_params)
 
     if @snippet.save
-      redirect_to share_snippet_url(@snippet), notice: "Snippet was successfully created."
+      redirect_to share_snippet_redirect_url(@snippet), notice: "Snippet was successfully created."
     else
       render :new, status: :unprocessable_entity
     end
@@ -43,7 +43,8 @@ def update
     @snippet = Snippet.find(params[:id])
     if @snippet.update(snippet_params)
       @snippet.attach_screenshot_from_base64(params[:screenshot]) if params[:screenshot]
-      redirect_to share_snippet_url(@snippet), notice: "Snippet was successfully updated.", status: :see_other
+
+      redirect_to share_snippet_redirect_url(@snippet), notice: "Snippet was successfully updated.", status: :see_other
     else
       render :edit, status: :unprocessable_entity
     end
@@ -58,6 +59,15 @@ def destroy
 
   private
 
+  def share_snippet_redirect_url(snippet)
+    case params[:commit]
+    when "Share"
+      new_share_snippet_screenshot_url(snippet)
+    else
+      share_snippet_url(snippet)
+    end
+  end
+
   # Only allow a list of trusted parameters through.
   def snippet_params
     params.fetch(:snippet, {}).permit(:filename, :source, :language)

app/javascript/css/components/code.scss

@@ -18,7 +18,7 @@
 
 @media screen and (min-width: $screen-md) {
   .article-content {
-    & .code-wrapper {
+    & > .code-wrapper {
       margin-inline-start: calc(var(--space-m) * -1);
       margin-inline-end: calc(var(--space-m) * -1);
     }

app/views/components/code_block/snippet.rb

@@ -3,16 +3,26 @@ class CodeBlock::Snippet < ApplicationComponent
   include Phlex::Rails::Helpers::DOMID
   prepend CodeBlock::AtomAware
 
-  attr_reader :snippet, :data
+  attr_reader :snippet, :options
 
-  def initialize(snippet, editing: false, data: {}, **)
+  def initialize(snippet, screenshot: false, **options)
     @snippet = snippet
+    @screenshot = screenshot
+    @options = options
   end
 
   def view_template
-    div(class: "snippet-background") do
-      render CodeBlock::Article.new(source, language: language, filename: filename, class: "snippet") do |code_block|
-        code_block.title { filename }
+    div(class: "snippet-background", **options) do
+      render CodeBlock::Container.new(language: language) do
+        render CodeBlock::Header.new { title_content } if title_content.present?
+
+        render CodeBlock::Body.new do
+          render CodeBlock::Code.new(source, language: language)
+          unless screenshot?
+            whitespace
+            render ClipboardCopy.new(text: source)
+          end
+        end
       end
     end
   end
@@ -31,4 +41,6 @@ def source
   end
 
   delegate :language, :filename, to: :snippet
+
+  def screenshot? = @screenshot
 end

app/views/share/snippet_screenshots/form.rb

@@ -0,0 +1,51 @@
+class Share::SnippetScreenshots::Form < ApplicationComponent
+  include Phlex::Rails::Helpers::DOMID
+  include Phlex::Rails::Helpers::FormWith
+  include Phlex::Rails::Helpers::TurboFrameTag
+  include Phlex::Rails::Helpers::Pluralize
+
+  attr_accessor :snippet
+
+  def initialize(snippet)
+    @snippet = snippet
+  end
+
+  def view_template
+    form_with(
+      model: snippet,
+      url: share_snippet_screenshot_path(snippet),
+      method: :post,
+      class: "grid-content",
+      data: {
+        controller: "snippet-screenshot"
+      }
+    ) do |form|
+      errors
+
+      render CodeBlock::Snippet.new(snippet, screenshot: true, data: {snippet_screenshot_target: "snippet"})
+
+      fieldset do
+        plain form.button "Share", class: "button primary"
+      end
+    end
+  end
+
+  private
+
+  def errors
+    if snippet.errors.any?
+      div(style: "color:red") do
+        h2 do
+          pluralize(snippet.errors.count, "error")
+          plain " prohibited this snippet from being saved:"
+        end
+        ul do
+          snippet.errors.each do |error|
+            li { error.full_message }
+            whitespace
+          end
+        end
+      end
+    end
+  end
+end

app/views/share/snippet_screenshots/new.html.erb

@@ -0,0 +1,10 @@
+<%= render Pages::Header.new(title: "Snippet Screenshot") %>
+<div class="section-content container py-gap">
+  <%= render Share::SnippetScreenshots::Form.new(@snippet) %>
+
+  <br>
+
+  <div>
+    <%= link_to "Back to snippets", share_snippets_path %>
+  </div>
+</div>

app/views/share/snippet_screenshots/show.html.erb

@@ -0,0 +1,5 @@
+<%- if @snippet.screenshot.attached? %>
+<%= image_tag @snippet.screenshot %>
+<%- else %>
+<%= link_to "Add a screenshot", new_share_snippet_screenshot_path(@snippet), class: "button primary" %>
+<%- end %>

app/views/share/snippets/edit.html.erb

@@ -1,6 +1,6 @@
 <%= render Pages::Header.new(title: "Edit snippet") %>
 <div class="section-content container py-gap">
-  <%= render Share::Snippets::Form.new(snippet: @snippet) %>
+  <%= render Share::Snippets::Form.new(@snippet) %>
 
   <br>
 

app/views/share/snippets/form.rb

@@ -6,7 +6,7 @@ class Share::Snippets::Form < ApplicationComponent
 
   attr_accessor :snippet
 
-  def initialize(snippet:)
+  def initialize(snippet)
     @snippet = snippet
   end
 
@@ -15,7 +15,7 @@ def view_template
       model: [:share, snippet],
       class: "grid-content",
       data: {
-        controller: "snippet-preview snippet-screenshot",
+        controller: "snippet-preview",
         action: "snippet-editor:edit-finish->snippet-preview#preview"
       }
     ) do |form|
@@ -24,7 +24,7 @@ def view_template
       language_select(form, data: {action: "change->snippet-preview#preview"})
 
       turbo_frame_tag dom_id(snippet, :code_block), class: "snippet-frame grid-cols-12" do
-        div(class: "snippet-background", data: {snippet_screenshot_target: "snippet"}) do
+        div(class: "snippet-background") do
           render CodeBlock::Container.new(language: language, class: "snippet") do
             render CodeBlock::Header.new do
               label(class: "sr-only", for: "snippet[filename]") { "Filename" }
@@ -50,11 +50,7 @@ def view_template
       fieldset do
         plain form.submit class: "button primary"
         whitespace
-        plain form.button "Share",
-          class: "button secondary",
-          data: {
-            action: "snippet-preview#share"
-          }
+        plain form.submit "Share", class: "button secondary"
         whitespace
         plain form.submit "Preview",
           class: "button secondary hidden",

app/views/share/snippets/index.html.erb

@@ -6,11 +6,7 @@
 
   <% @snippets.each do |snippet| %>
     <%= link_to share_snippet_path(snippet), class: "block" do %>
-      <% if snippet.screenshot.attached? %>
-        <%= image_tag snippet.screenshot %>
-      <% else %>
-        <%= render CodeBlock::Snippet.new(snippet) %>
-      <% end %>
+      <%= render CodeBlock::Snippet.new(snippet) %>
     <% end %>
   <% end %>
 </div>