New Design System + Codebase Refresh (#1823)

Since the very first 0.1.0-alpha.1 release, we've been moving quickly to add new features to the Maybe app. In doing so, some parts of the codebase have become outdated, unnecessary, or overly-complex as a natural result of this feature prioritization.

Now that "core" Maybe is complete, we're moving into a second phase of development where we'll be working hard to improve the accuracy of existing features and build additional features on top of "core". This PR is a quick overhaul of the existing codebase aimed to:

- Establish the brand new and simplified dashboard view (pictured above)
- Establish and move towards the conventions introduced in Cursor rules and project design overview #1788
- Consolidate layouts and improve the performance of layout queries
- Organize the core models of the Maybe domain (i.e. Account::Entry, Account::Transaction, etc.) and break out specific traits of each model into dedicated concerns for better readability
- Remove stale / dead code from codebase
- Remove overly complex code paths in favor of simpler ones

app/views/imports/_import.html.erb

@@ -42,7 +42,7 @@
       <% end %>
 
       <% if import.complete? || import.revert_failed? %>
-        <%= button_to revert_import_path(import), 
+        <%= button_to revert_import_path(import),
                       method: :put,
                       class: "block w-full py-2 px-3 space-x-2 text-orange-600 hover:bg-orange-50 flex items-center rounded-lg",
                       data: { turbo_confirm: true } do %>

app/views/imports/_ready.html.erb

@@ -12,7 +12,7 @@
       <p class="justify-self-end">count</p>
     </div>
 
-    <div class="bg-white border border-alpha-black-25 rounded-lg shadow-xs text-sm">
+    <div class="bg-white shadow-border-xs rounded-lg text-sm">
       <% import.dry_run.each do |key, count| %>
         <% resource = dry_run_resource(key) %>
 

app/views/imports/_table.html.erb

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

app/views/imports/index.html.erb

@@ -1,29 +1,22 @@
-<% content_for :sidebar do %>
-  <%= render "settings/nav" %>
-<% end %>
+<div class="flex items-center justify-between">
+  <h1 class="text-xl font-medium text-primary"><%= t(".title") %></h1>
 
-<div class="space-y-4">
-  <div class="flex items-center justify-between">
-    <h1 class="text-xl font-medium text-primary"><%= t(".title") %></h1>
-
-    <%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: :modal } do %>
-      <%= lucide_icon("plus", class: "w-5 h-5") %>
-      <span><%= t(".new") %></span>
-    <% end %>
-  </div>
-  <div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
-    <% if @imports.empty? %>
-      <%= render partial: "imports/empty" %>
-    <% else %>
-      <div class="rounded-xl bg-gray-25 p-1">
-        <h2 class="uppercase px-4 py-2 text-secondary text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
-
-        <div class="border border-alpha-gray-100 rounded-lg bg-white shadow-xs">
-          <%= render partial: "imports/import", collection: @imports.ordered %>
-        </div>
-      </div>
-    <% end %>
-  </div>
-
-  <%= settings_nav_footer %>
+  <%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: :modal } do %>
+    <%= lucide_icon("plus", class: "w-5 h-5") %>
+    <span><%= t(".new") %></span>
+  <% end %>
+</div>
+
+<div class="bg-white shadow-border-xs rounded-xl p-4">
+  <% if @imports.empty? %>
+    <%= render partial: "imports/empty" %>
+  <% else %>
+    <div class="rounded-xl bg-gray-25 p-1">
+      <h2 class="uppercase px-4 py-2 text-secondary text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
+
+      <div class="border border-alpha-black-100 rounded-lg bg-white shadow-xs">
+        <%= render partial: "imports/import", collection: @imports.ordered %>
+      </div>
+    </div>
+  <% end %>
 </div>

app/views/imports/new.html.erb

@@ -13,7 +13,7 @@
 
     <div class="rounded-xl bg-gray-25 p-1">
       <h3 class="uppercase text-secondary text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
-      <ul class="bg-white border border-alpha-black-25 rounded-lg shadow-xs">
+      <ul class="bg-white shadow-border-xs rounded-lg">
         <li>
           <% if @pending_import.present? && (params[:type].nil? || params[:type] == @pending_import.type) %>
             <%= link_to import_path(@pending_import), class: "flex items-center justify-between p-4 group cursor-pointer", data: { turbo: false } do %>