From 443b834b46f1e67a4b886870e300f9b62bd392af Mon Sep 17 00:00:00 2001
From: Alex Hatzenbuhler <hatz@hey.com>
Date: Tue, 20 May 2025 14:13:18 -0500
Subject: [PATCH] Create shared ruler and standardize across views (#2240)

* Create shared ruler view

* Use collection rendering/spacer templates for rules, and new shared_ruler

* Use shared ruler for all the places a ruler is used

* Use shared ruler for imports and balance sheet

* Fix brakeman by using a static partial with a defined collection

* Update balance sheet
---
 .../maybe-design-system/background-utils.css  |  8 --------
 .../maybe-design-system/border-utils.css      |  6 +++++-
 app/components/menu_item_component.html.erb   |  2 +-
 .../accounts/_accountable_group.html.erb      |  1 -
 app/views/budgets/_budget_categories.html.erb |  4 +---
 .../categories/_category_list_group.html.erb  |  2 +-
 app/views/categories/_ruler.html.erb          |  3 ---
 app/views/category/dropdowns/show.html.erb    |  2 +-
 app/views/credit_cards/_form.html.erb         |  2 +-
 app/views/entries/_ruler.html.erb             |  1 -
 app/views/family_merchants/_ruler.html.erb    |  3 ---
 app/views/family_merchants/index.html.erb     |  2 +-
 app/views/holdings/_ruler.html.erb            |  1 -
 app/views/holdings/index.html.erb             |  5 ++---
 app/views/imports/_import.html.erb            |  2 +-
 app/views/imports/_ready.html.erb             |  4 ++--
 app/views/imports/index.html.erb              |  2 +-
 app/views/imports/new.html.erb                | 20 +++++--------------
 app/views/loans/_form.html.erb                |  2 +-
 .../pages/dashboard/_balance_sheet.html.erb   |  4 +---
 app/views/properties/_form.html.erb           |  2 +-
 app/views/rules/_rule.html.erb                |  3 ++-
 app/views/rules/index.html.erb                |  7 +------
 app/views/settings/_settings_nav.html.erb     |  2 +-
 app/views/shared/_ruler.html.erb              |  2 ++
 app/views/tags/_ruler.html.erb                |  3 ---
 app/views/tags/index.html.erb                 |  2 +-
 app/views/transfers/show.html.erb             |  2 +-
 app/views/valuations/index.html.erb           |  2 +-
 app/views/vehicles/_form.html.erb             |  2 +-
 30 files changed, 35 insertions(+), 68 deletions(-)
 delete mode 100644 app/views/categories/_ruler.html.erb
 delete mode 100644 app/views/entries/_ruler.html.erb
 delete mode 100644 app/views/family_merchants/_ruler.html.erb
 delete mode 100644 app/views/holdings/_ruler.html.erb
 create mode 100644 app/views/shared/_ruler.html.erb
 delete mode 100644 app/views/tags/_ruler.html.erb

diff --git a/app/assets/tailwind/maybe-design-system/background-utils.css b/app/assets/tailwind/maybe-design-system/background-utils.css
index f7244692..2c57f18f 100644
--- a/app/assets/tailwind/maybe-design-system/background-utils.css
+++ b/app/assets/tailwind/maybe-design-system/background-utils.css
@@ -78,14 +78,6 @@
   }
 }
 
-@utility bg-divider {
-  @apply bg-alpha-black-100;
-
-  @variant theme-dark {
-    @apply bg-alpha-white-100;
-  }
-}
-
 @utility bg-overlay {
   background-color: --alpha(var(--color-gray-100) / 50%);
 
diff --git a/app/assets/tailwind/maybe-design-system/border-utils.css b/app/assets/tailwind/maybe-design-system/border-utils.css
index 94c54a55..8fcc1c9c 100644
--- a/app/assets/tailwind/maybe-design-system/border-utils.css
+++ b/app/assets/tailwind/maybe-design-system/border-utils.css
@@ -63,6 +63,10 @@
   }
 }
 
+@utility border-divider {
+  @apply border-tertiary;
+}
+
 @utility border-subdued {
   @apply border-alpha-black-50;
 
@@ -85,4 +89,4 @@
   @variant theme-dark {
     @apply border-red-400;
   }
-}
\ No newline at end of file
+}
diff --git a/app/components/menu_item_component.html.erb b/app/components/menu_item_component.html.erb
index 273c4551..cb71dc6d 100644
--- a/app/components/menu_item_component.html.erb
+++ b/app/components/menu_item_component.html.erb
@@ -1,5 +1,5 @@
 <% if variant == :divider %>
-  <hr class="border-tertiary my-1">
+  <%= render "shared/ruler", classes: "my-1" %>
 <% else %>
   <div class="px-1">
     <%= wrapper do %>
diff --git a/app/views/accounts/_accountable_group.html.erb b/app/views/accounts/_accountable_group.html.erb
index 26633918..b5393856 100644
--- a/app/views/accounts/_accountable_group.html.erb
+++ b/app/views/accounts/_accountable_group.html.erb
@@ -50,7 +50,6 @@
           <% else %>
             <div class="ml-auto text-right grow h-10">
               <%= tag.p format_money(account.balance_money), class: "text-sm font-medium text-primary whitespace-nowrap" %>
-
               <%= turbo_frame_tag dom_id(account, :sparkline), src: sparkline_account_path(account), loading: "lazy" do %>
                 <div class="flex items-center w-8 h-4 ml-auto">
                   <div class="w-6 h-px bg-loader"></div>
diff --git a/app/views/budgets/_budget_categories.html.erb b/app/views/budgets/_budget_categories.html.erb
index 5b9e1a1c..99437302 100644
--- a/app/views/budgets/_budget_categories.html.erb
+++ b/app/views/budgets/_budget_categories.html.erb
@@ -34,9 +34,7 @@
           </div>
         </div>
 
-        <div class="px-4">
-          <div class="h-px w-full bg-alpha-black-50"></div>
-        </div>
+        <%= render "shared/ruler" %>
       <% end %>
 
       <%= render "budget_categories/budget_category", budget_category: budget.uncategorized_budget_category %>
diff --git a/app/views/categories/_category_list_group.html.erb b/app/views/categories/_category_list_group.html.erb
index dc343d7f..e7337e45 100644
--- a/app/views/categories/_category_list_group.html.erb
+++ b/app/views/categories/_category_list_group.html.erb
@@ -17,7 +17,7 @@
         <% end %>
 
         <% unless idx == Category::Group.for(categories).count - 1 %>
-          <%= render "categories/ruler" %>
+          <%= render "shared/ruler" %>
         <% end %>
       <% end %>
     </div>
diff --git a/app/views/categories/_ruler.html.erb b/app/views/categories/_ruler.html.erb
deleted file mode 100644
index 600fcda1..00000000
--- a/app/views/categories/_ruler.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="bg-container">
-  <div class="h-px bg-alpha-black-50 ml-4 mr-6"></div>
-</div>
diff --git a/app/views/category/dropdowns/show.html.erb b/app/views/category/dropdowns/show.html.erb
index 3b25083b..4329918f 100644
--- a/app/views/category/dropdowns/show.html.erb
+++ b/app/views/category/dropdowns/show.html.erb
@@ -40,7 +40,7 @@
       <% end %>
     </div>
 
-    <hr class="border-tertiary">
+    <%= render "shared/ruler", classes: "my-2" %>
 
     <div class="relative p-1.5 w-full">
       <% if @transaction.category %>
diff --git a/app/views/credit_cards/_form.html.erb b/app/views/credit_cards/_form.html.erb
index 2405b77b..ef3d5d3d 100644
--- a/app/views/credit_cards/_form.html.erb
+++ b/app/views/credit_cards/_form.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (account:, url:) %>
 
 <%= render "accounts/form", account: account, url: url do |form| %>
-  <hr class="my-4">
+  <%= render "shared/ruler", classes: "my-4" %>
 
   <div class="space-y-2">
     <%= form.fields_for :accountable do |credit_card_form| %>
diff --git a/app/views/entries/_ruler.html.erb b/app/views/entries/_ruler.html.erb
deleted file mode 100644
index 31c6ee6c..00000000
--- a/app/views/entries/_ruler.html.erb
+++ /dev/null
@@ -1 +0,0 @@
-<div class="h-px bg-alpha-black-50 ml-16 mr-4"></div>
diff --git a/app/views/family_merchants/_ruler.html.erb b/app/views/family_merchants/_ruler.html.erb
deleted file mode 100644
index 530d99eb..00000000
--- a/app/views/family_merchants/_ruler.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="bg-container">
-  <div class="h-px bg-alpha-black-50 ml-14 mr-6"></div>
-</div>
diff --git a/app/views/family_merchants/index.html.erb b/app/views/family_merchants/index.html.erb
index 944b4bb9..e54fc02c 100644
--- a/app/views/family_merchants/index.html.erb
+++ b/app/views/family_merchants/index.html.erb
@@ -20,7 +20,7 @@
 
       <div class="border border-alpha-black-25 rounded-md bg-container shadow-border-xs">
         <div class="overflow-hidden rounded-md">
-          <%= render partial: "family_merchants/family_merchant", collection: @merchants, spacer_template: "family_merchants/ruler" %>
+          <%= render partial: "family_merchants/family_merchant", collection: @merchants, spacer_template: "shared/ruler" %>
         </div>
       </div>
     </div>
diff --git a/app/views/holdings/_ruler.html.erb b/app/views/holdings/_ruler.html.erb
deleted file mode 100644
index 31c6ee6c..00000000
--- a/app/views/holdings/_ruler.html.erb
+++ /dev/null
@@ -1 +0,0 @@
-<div class="h-px bg-alpha-black-50 ml-16 mr-4"></div>
diff --git a/app/views/holdings/index.html.erb b/app/views/holdings/index.html.erb
index 2fcd0714..fe098f8b 100644
--- a/app/views/holdings/index.html.erb
+++ b/app/views/holdings/index.html.erb
@@ -24,11 +24,10 @@
 
       <div class="rounded-lg bg-container shadow-border-xs">
         <%= render "holdings/cash", account: @account %>
-
-        <%= render "holdings/ruler" %>
+        <%= render "shared/ruler" %>
 
         <% if @account.current_holdings.any? %>
-          <%= render partial: "holdings/holding", collection: @account.current_holdings, spacer_template: "ruler" %>
+          <%= render partial: "holdings/holding", collection: @account.current_holdings, spacer_template: "shared/ruler" %>
         <% end %>
       </div>
     </div>
diff --git a/app/views/imports/_import.html.erb b/app/views/imports/_import.html.erb
index a0b1d965..88a75dce 100644
--- a/app/views/imports/_import.html.erb
+++ b/app/views/imports/_import.html.erb
@@ -1,4 +1,4 @@
-<div id="<%= dom_id import %>" class="flex items-center justify-between mx-4 py-4 border-b last:border-b-0 border-alpha-black-50">
+<div id="<%= dom_id import %>" class="flex items-center justify-between mx-4 py-4">
 
   <div class="flex items-center gap-2 mb-1">
     <%= link_to import_path(import), class: "text-sm text-primary hover:underline" do %>
diff --git a/app/views/imports/_ready.html.erb b/app/views/imports/_ready.html.erb
index 225c0dd1..d093694f 100644
--- a/app/views/imports/_ready.html.erb
+++ b/app/views/imports/_ready.html.erb
@@ -16,7 +16,7 @@
       <% import.dry_run.each do |key, count| %>
         <% resource = dry_run_resource(key) %>
 
-        <div class="flex items-center justify-between gap-2 bg-container px-5 py-3 rounded-tl-lg rounded-tr-lg">
+        <div class="flex items-center justify-between gap-2 bg-container px-5 py-3 rounded-lg">
           <div class="flex items-center gap-3">
             <%= tag.div class: class_names(resource.bg_class, resource.text_class, "w-8 h-8 rounded-full flex justify-center items-center") do %>
               <%= icon resource.icon, color: "current" %>
@@ -29,7 +29,7 @@
         </div>
 
         <% if key != import.dry_run.keys.last %>
-          <div class="h-px bg-alpha-black-50 ml-14 mr-5"></div>
+          <%= render "shared/ruler" %>
         <% end %>
       <% end %>
     </div>
diff --git a/app/views/imports/index.html.erb b/app/views/imports/index.html.erb
index 108f3dc5..1a81ecdb 100644
--- a/app/views/imports/index.html.erb
+++ b/app/views/imports/index.html.erb
@@ -18,7 +18,7 @@
       <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-container shadow-xs">
-        <%= render partial: "imports/import", collection: @imports.ordered %>
+        <%= render partial: "imports/import", collection: @imports.ordered, spacer_template: "shared/ruler" %>
       </div>
     </div>
   <% end %>
diff --git a/app/views/imports/new.html.erb b/app/views/imports/new.html.erb
index ac739056..a1fcbe0c 100644
--- a/app/views/imports/new.html.erb
+++ b/app/views/imports/new.html.erb
@@ -21,9 +21,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
 
@@ -43,9 +41,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
 
@@ -65,9 +61,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
 
@@ -87,9 +81,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
 
@@ -105,9 +97,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
       </ul>
diff --git a/app/views/loans/_form.html.erb b/app/views/loans/_form.html.erb
index 6af5715f..48d7a0ce 100644
--- a/app/views/loans/_form.html.erb
+++ b/app/views/loans/_form.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (account:, url:) %>
 
 <%= render "accounts/form", account: account, url: url do |form| %>
-  <hr class="my-4">
+  <%= render "shared/ruler", classes: "my-4" %>
 
   <div class="space-y-2">
     <%= form.fields_for :accountable do |loan_form| %>
diff --git a/app/views/pages/dashboard/_balance_sheet.html.erb b/app/views/pages/dashboard/_balance_sheet.html.erb
index 6b4ea525..d79c566d 100644
--- a/app/views/pages/dashboard/_balance_sheet.html.erb
+++ b/app/views/pages/dashboard/_balance_sheet.html.erb
@@ -124,9 +124,7 @@
                     </div>
 
                     <% if idx < account_group.accounts.size - 1 %>
-                      <div class="pl-[84px] pr-40">
-                        <div class="w-full border-subdued border-b"></div>
-                      </div>
+                      <%= render "shared/ruler", classes: "ml-21 mr-4" %>
                     <% end %>
                   <% end %>
                 </div>
diff --git a/app/views/properties/_form.html.erb b/app/views/properties/_form.html.erb
index 61b6cb59..ea7b7ae0 100644
--- a/app/views/properties/_form.html.erb
+++ b/app/views/properties/_form.html.erb
@@ -5,7 +5,7 @@
                  Property::SUBTYPES.map { |k, v| [v[:long], k] },
                  { label: true, prompt: t("properties.form.subtype_prompt"), include_blank: t("properties.form.none") } %>
 
-  <hr class="my-4">
+  <%= render "shared/ruler", classes: "my-4" %>
 
   <div class="space-y-2">
     <%= form.fields_for :accountable do |property_form| %>
diff --git a/app/views/rules/_rule.html.erb b/app/views/rules/_rule.html.erb
index 1dbf9641..9f35c465 100644
--- a/app/views/rules/_rule.html.erb
+++ b/app/views/rules/_rule.html.erb
@@ -1,5 +1,6 @@
 <%# locals: (rule:) %>
-<div class="flex justify-between items-center p-4 <%= rule.active? ? "text-primary" : "text-secondary" %>">
+<div id="<%= dom_id(rule) %>" class="flex justify-between items-center p-4 <%= rule.active? ? 'text-primary' : 'text-secondary' %>">
+
   <div class="text-sm space-y-1.5">
     <% if rule.name.present? %>
       <h3 class="font-medium text-md"><%= rule.name %></h3>
diff --git a/app/views/rules/index.html.erb b/app/views/rules/index.html.erb
index c6ca513f..59961714 100644
--- a/app/views/rules/index.html.erb
+++ b/app/views/rules/index.html.erb
@@ -59,12 +59,7 @@
       </div>
       <div class="p-1">
         <div class="flex flex-col bg-container rounded-xl shadow-border-xs first_child:rounded-t-xl last_child:rounded-b-xl">
-          <% @rules.each_with_index do |rule, idx| %>
-            <%= render "rule", rule: rule %>
-            <% unless idx == @rules.size - 1 %>
-              <div class="h-px bg-divider ml-4 mr-6"></div>
-            <% end %>
-          <% end %>
+          <%= render partial: "rule", collection: @rules, spacer_template: "shared/ruler" %>
         </div>
       </div>
     </div>
diff --git a/app/views/settings/_settings_nav.html.erb b/app/views/settings/_settings_nav.html.erb
index 5aa2c258..83bceea4 100644
--- a/app/views/settings/_settings_nav.html.erb
+++ b/app/views/settings/_settings_nav.html.erb
@@ -48,7 +48,7 @@ nav_sections = [
       <section class="space-y-2">
         <div class="flex items-center gap-2 px-3">
           <h3 class="uppercase text-secondary font-medium text-xs"><%= section[:header] %></h3>
-          <div class="h-px bg-alpha-black-100 w-full"></div>
+          <%= render "shared/ruler", classes: "w-full" %>
         </div>
         <ul class="space-y-1">
           <% section[:items].each do |item| %>
diff --git a/app/views/shared/_ruler.html.erb b/app/views/shared/_ruler.html.erb
new file mode 100644
index 00000000..fa963914
--- /dev/null
+++ b/app/views/shared/_ruler.html.erb
@@ -0,0 +1,2 @@
+<%# locals: (classes: nil) %>
+<hr class="border-divider <%= classes || 'mx-4' %>">
diff --git a/app/views/tags/_ruler.html.erb b/app/views/tags/_ruler.html.erb
deleted file mode 100644
index 600fcda1..00000000
--- a/app/views/tags/_ruler.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="bg-container">
-  <div class="h-px bg-alpha-black-50 ml-4 mr-6"></div>
-</div>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 24bc2d10..cc4a8459 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -35,7 +35,7 @@
 
       <div class="border border-alpha-black-25 rounded-md bg-container shadow-border-xs">
         <div class="overflow-hidden rounded-md">
-          <%= render partial: @tags, spacer_template: "tags/ruler" %>
+          <%= render partial: @tags, spacer_template: "shared/ruler" %>
         </div>
       </div>
     </div>
diff --git a/app/views/transfers/show.html.erb b/app/views/transfers/show.html.erb
index 42b05219..dc587a4e 100644
--- a/app/views/transfers/show.html.erb
+++ b/app/views/transfers/show.html.erb
@@ -44,7 +44,7 @@
           </dl>
         </div>
 
-        <div class="bg-alpha-black-100 h-px my-2"></div>
+        <%= render "shared/ruler", classes: "my-2" %>
 
         <div class="space-y-3">
           <dl class="flex items-center gap-2 justify-between">
diff --git a/app/views/valuations/index.html.erb b/app/views/valuations/index.html.erb
index aa20b548..427714e3 100644
--- a/app/views/valuations/index.html.erb
+++ b/app/views/valuations/index.html.erb
@@ -27,7 +27,7 @@
           <%= render partial: "valuations/valuation",
                      collection:      @entries,
                      as:              :entry,
-                     spacer_template: "entries/ruler" %>
+                     spacer_template: "shared/ruler" %>
         <% else %>
           <p class="text-secondary text-sm p-4"><%= t(".no_valuations") %></p>
         <% end %>
diff --git a/app/views/vehicles/_form.html.erb b/app/views/vehicles/_form.html.erb
index 97dd7944..a77d88b7 100644
--- a/app/views/vehicles/_form.html.erb
+++ b/app/views/vehicles/_form.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (account:, url:) %>
 
 <%= render "accounts/form", account: account, url: url do |form| %>
-  <hr class="my-4">
+  <%= render "shared/ruler", classes: "my-4" %>
 
   <div class="space-y-2">
     <%= form.fields_for :accountable do |vehicle_form| %>