Add sample CSV download functionality and UI adjustments

app/controllers/import/uploads_controller.rb

@@ -20,6 +20,26 @@ class Import::UploadsController < ApplicationController
     end
   end
 
+  def download_sample
+    # Generate CSV stripped of whitespace, since we use heredoc strings
+    template = @import.csv_template
+
+    clean_headers = template.headers.map(&:strip)
+
+    sample_csv = CSV.generate do |csv|
+      csv << clean_headers
+      template.each do |row|
+        clean_values = row.to_h.values.map(&:to_s).map(&:strip)
+        csv << clean_values
+      end
+    end
+
+    send_data sample_csv,
+              filename: "#{@import.type.underscore.gsub('_import', '')}_sample.csv",
+              type: "text/csv",
+              disposition: "attachment"
+  end
+
   private
     def set_import
       @import = Current.family.imports.find(params[:import_id])

app/views/import/uploads/show.html.erb

@@ -4,7 +4,7 @@
 
 <%= content_for :previous_path, imports_path %>
 
-<div class="space-y-12">
+<div class="space-y-4">
   <div class="space-y-4 mx-auto max-w-md">
     <div class="text-center space-y-2">
       <h1 class="text-3xl text-primary font-medium"><%= t(".title") %></h1>
@@ -51,22 +51,7 @@
     </div>
   </div>
 
-  <div class="bg-alpha-black-25 rounded-xl p-1 mt-5 mx-auto max-w-7xl">
-    <div class="text-secondary p-2 mb-2">
-      <div class="flex gap-2 mb-2">
-        <%= lucide_icon("info", class: "w-5 h-5 shrink-0") %>
-        <p class="text-sm"><%= t(".instructions_1") %></p>
-
-      </div>
-
-      <ul class="list-disc list-inside text-sm pl-8">
-        <li><%= t(".instructions_2") %></li>
-        <li><%= t(".instructions_3") %></li>
-        <li><%= t(".instructions_4") %></li>
-        <li><%= t(".instructions_5") %></li>
-      </ul>
-    </div>
-
-    <%= render partial: "imports/table", locals: { headers: @import.csv_template.headers, rows: @import.csv_template } %>
+  <div class="text-secondary text-sm p-1 mx-auto">
+    <p class="text-center"><%= link_to t(".download_sample_1"), download_sample_import_upload_path(@import), class: "text-sm font-medium hover:underline" %> <%= t(".download_sample_2") %></p>
   </div>
 </div>

app/views/imports/_table.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (headers: [], rows: [], caption: nil) %>
-<div class="overflow-x-auto w-full">
+<div class="overflow-x-auto w-full pb-2 scrollbar">
   <div class="inline-block min-w-full border border-secondary rounded-md shadow-border-xs text-sm bg-container">
     <div class="grid border-b border-b-alpha-black-200" style="grid-template-columns: repeat(<%= headers.length %>, minmax(150px, 1fr))">
       <% headers.each_with_index do |header, index| %>

app/views/layouts/imports.html.erb

@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex flex-col h-dvh bg-surface">
+  <div class="flex flex-col h-dvh bg-container">
     <header class="flex items-center justify-between p-4 sm:p-8">
       <%= link_to content_for(:previous_path) || imports_path do %>
         <% if controller_name == 'uploads' %>
@@ -24,7 +24,7 @@
       </div>
     <% end %>
 
-    <main class="grow px-8 pt-12 pb-32 overflow-y-auto">
+    <main class="grow px-4 sm:px-8 pt-12 pb-32 overflow-y-auto">
       <%= yield %>
     </main>
   </div>

config/locales/views/imports/en.yml

@@ -47,13 +47,9 @@ en:
       show:
         description: Paste or upload your CSV file below.  Please review the instructions
           in the table below before beginning.
-        instructions_1: Below is an example CSV with columns available for import.
-        instructions_2: Your CSV must have a header row
-        instructions_3: You may name your columns anything you like.  You will map
-          them at a later step.
-        instructions_4: Columns marked with an asterisk (*) are required data.
-        instructions_5: No commas, no currency symbols, and no parentheses in numbers.
         title: Import your data
+        download_sample_1: Download a sample CSV
+        download_sample_2: to see the required CSV format
   imports:
     empty:
       message: No imports yet.

config/routes.rb

@@ -86,7 +86,9 @@ Rails.application.routes.draw do
       put :apply_template
     end
 
-    resource :upload, only: %i[show update], module: :import
+    resource :upload, only: %i[show update], module: :import do
+      get :download_sample, on: :member
+    end
     resource :configuration, only: %i[show update], module: :import
     resource :clean, only: :show, module: :import
     resource :confirm, only: :show, module: :import