From 9284352f06abf2f384b7ee3240cb40589f40ac69 Mon Sep 17 00:00:00 2001
From: Josh Brown <josh@joossh.com>
Date: Thu, 8 Feb 2024 21:46:27 +0000
Subject: [PATCH] Build out account sidebar (#391)

* Build out account sidebar

* Use detail and summary element instead of controller

* Update localisation

* Remove redundant code
---
 app/views/accounts/_account_list.html.erb | 30 +++++++++++++++++++++++
 app/views/layouts/application.html.erb    | 23 +++++++----------
 config/locales/models/account/en.yml      |  4 +--
 config/locales/views/layout/en.yml        |  3 +--
 4 files changed, 42 insertions(+), 18 deletions(-)
 create mode 100644 app/views/accounts/_account_list.html.erb

diff --git a/app/views/accounts/_account_list.html.erb b/app/views/accounts/_account_list.html.erb
new file mode 100644
index 00000000..6d9617a6
--- /dev/null
+++ b/app/views/accounts/_account_list.html.erb
@@ -0,0 +1,30 @@
+<%# locals: (type:) -%>
+
+<% accounts = Current.family.accounts.where(accountable_type: type.name) %>
+
+<details class="text-sm mb-1 group">
+  <summary class="flex gap-4 px-2 py-3 items-center w-full rounded-[10px] font-medium hover:bg-[#f2f2f2]">
+    <%= lucide_icon("chevron-down", class: "hidden group-open:block text-[#737373] w-5 h-5") %>
+    <%= lucide_icon("chevron-right", class: "group-open:hidden text-[#737373] w-5 h-5") %>
+    <div class="text-left"><%= type.model_name.human %></div>
+    <div class="ml-auto"><%= humanized_money_with_symbol accounts.sum(&:balance) %></div>
+  </summary>
+  
+  <% accounts.each do |account| %>
+    <div class="flex gap-3 px-2 py-3 items-center w-full mb-1">
+      <div>
+        <p class="font-medium"><%= account.name %></p>
+        <% if account.subtype %>
+          <p class="text-xs text-[#737373]"><%= account.subtype&.humanize %></p>
+        <% end %>
+      </div>
+      <p class="ml-auto font-medium"><%= humanized_money_with_symbol account.balance %></p>
+    </div>
+  <% end %>
+
+  <%= link_to new_account_path(step: 'method', type: type.name.demodulize), class: "flex items-center gap-4 px-2 py-3 mb-1 text-[#737373] text-sm font-medium rounded-[10px] hover:bg-[#f2f2f2]", data: { turbo_frame: "modal" } do %>
+    <%= lucide_icon("plus", class: "w-5 h-5") %>
+    <p>New <%= type.model_name.human.downcase %></p>
+  <% end %>
+</details>
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 553132a6..59dc4c63 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -56,7 +56,7 @@
         </nav>
         <div class="flex flex-col mt-6">
           <div class="flex items-center justify-between">
-            <%= link_to accounts_path, class: 'text-xs' do%>
+            <%= link_to accounts_path, class: 'text-xs uppercase text-[#737373] font-bold tracking-wide' do%>
               <%= t('.accounts') %>
             <% end %>
             <%= link_to new_account_path, class: 'block hover:bg-gray-100 p-2 text-sm font-semibold text-gray-900 flex items-center rounded', title: t('.new_account'), data: { turbo_frame: "modal" } do %>
@@ -64,20 +64,15 @@
             <% end %>
           </div>
 
-          <div>
-            <h2 class="text-sm font-semibold font-display"><%= t('.cash') %></h2>
 
-            <% Current.family.accounts.each do |account| %>
-              <div class="flex items-center justify-between py-2">
-                <div class="flex items-center text-sm">
-                  <%= account.name %>
-                </div>
-                <p class="text-sm text-right">
-                  <span class="block mb-1"><%= humanized_money_with_symbol account.balance  %></span>
-                </p>
-              </div>
-            <% end %>
-          </div>
+          <%= link_to new_account_path, class: "flex items-center gap-4 px-2 py-3 mb-1 text-[#737373] text-sm font-medium rounded-[10px] hover:bg-[#f2f2f2]", data: { turbo_frame: "modal" } do %>
+            <%= lucide_icon("plus", class: "w-5 h-5") %>
+            <p><%= t('.new_account') %></p>
+          <% end %>
+
+          <% Account.accountable_types.each do |type| %>
+            <%= render 'accounts/account_list', type: type.constantize %>
+          <% end %>
         </div>
       </div>
       <main class="flex-grow py-5 pr-5">
diff --git a/config/locales/models/account/en.yml b/config/locales/models/account/en.yml
index 81090ddf..4b199653 100644
--- a/config/locales/models/account/en.yml
+++ b/config/locales/models/account/en.yml
@@ -12,8 +12,8 @@ en:
     models:
       account: Account
       account/credit: Credit Card
-      account/depository: Bank Accounts
-      account/investment: Investments
+      account/depository: Bank Account
+      account/investment: Investment
       account/loan: Loan
       account/other_asset: Other Asset
       account/other_liability: Other Liability
diff --git a/config/locales/views/layout/en.yml b/config/locales/views/layout/en.yml
index 780891a5..403f3ad9 100644
--- a/config/locales/views/layout/en.yml
+++ b/config/locales/views/layout/en.yml
@@ -3,9 +3,8 @@ en:
   layouts:
     application:
       accounts: Accounts
-      cash: Cash
       dashboard: Dashboard
-      new_account: New Account
+      new_account: New account
     auth:
       or: or
       privacy_policy: Privacy Policy