CSV Transaction Imports (#708)

Introduces a basic CSV import module for bulk-importing account transactions.

Changes include:

- User can load a CSV
- User can configure the column mappings for a CSV
- Imported CSV shows invalid cells
- User can clean up their data directly in the UI
- User can see a preview of the import rows and confirm import
- Layout refactor + Import nav stepper
- System test stability improvements

app/views/transactions/index.html.erb

@@ -6,16 +6,28 @@
         <%= contextual_menu do %>
           <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
             <%= link_to transaction_categories_path,
-                  class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
+                        class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
               <%= lucide_icon "tags", class: "w-5 h-5 text-gray-500" %>
               <span class="text-black"><%= t(".edit_categories") %></span>
             <% end %>
+
+            <%= link_to imports_path,
+                        class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
+              <%= lucide_icon "hard-drive-upload", class: "w-5 h-5 text-gray-500" %>
+              <span class="text-black"><%= t(".edit_imports") %></span>
+            <% end %>
           </div>
+
+        <% end %>
+
+        <%= link_to new_import_path(enable_type_selector: true), class: "rounded-lg bg-gray-50 border border-gray-200 flex items-center gap-1 justify-center px-3 py-2", data: { turbo_frame: "modal" } do %>
+          <%= lucide_icon("download", class: "text-gray-500 w-4 h-4") %>
+          <p class="text-sm font-medium text-gray-900"><%= t(".import") %></p>
         <% end %>
 
         <%= link_to new_transaction_path, class: "rounded-lg bg-gray-900 text-white flex items-center gap-1 justify-center hover:bg-gray-700 px-3 py-2", data: { turbo_frame: :modal } do %>
           <%= lucide_icon("plus", class: "w-5 h-5") %>
-          <p>New transaction</p>
+          <p class="text-sm font-medium">New transaction</p>
         <% end %>
       </div>
     </div>

app/views/transactions/rules/index.html.erb

@@ -10,6 +10,6 @@
   </div>
   <div class="flex justify-between gap-4">
     <%= previous_setting("Merchants", transaction_merchants_path) %>
-    <%= next_setting("What's New", changelog_path) %>
+    <%= next_setting("Imports", imports_path) %>
   </div>
 </div>