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/javascript/controllers/tabs_controller.js

@@ -2,12 +2,16 @@ import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="tabs"
 export default class extends Controller {
-  static classes = ["active"];
+  static classes = ["active", "inactive"];
   static targets = ["btn", "tab"];
-  static values = { defaultTab: String };
+  static values = { defaultTab: String, localStorageKey: String };
 
   connect() {
-    this.updateClasses(this.defaultTabValue);
+    const selectedTab = this.hasLocalStorageKeyValue
+      ? this.getStoredTab() || this.defaultTabValue
+      : this.defaultTabValue;
+
+    this.updateClasses(selectedTab);
     document.addEventListener("turbo:load", this.onTurboLoad);
   }
 
@@ -18,23 +22,46 @@ export default class extends Controller {
   select(event) {
     const element = event.target.closest("[data-id]");
     if (element) {
-      this.updateClasses(element.dataset.id);
+      const selectedId = element.dataset.id;
+      this.updateClasses(selectedId);
+      if (this.hasLocalStorageKeyValue) {
+        this.storeTab(selectedId);
+      }
     }
   }
 
   onTurboLoad = () => {
-    this.updateClasses(this.defaultTabValue);
+    const selectedTab = this.hasLocalStorageKeyValue
+      ? this.getStoredTab() || this.defaultTabValue
+      : this.defaultTabValue;
+
+    this.updateClasses(selectedTab);
   };
 
+  getStoredTab() {
+    const tabs = JSON.parse(localStorage.getItem("tabs") || "{}");
+    return tabs[this.localStorageKeyValue];
+  }
+
+  storeTab(selectedId) {
+    const tabs = JSON.parse(localStorage.getItem("tabs") || "{}");
+    tabs[this.localStorageKeyValue] = selectedId;
+    localStorage.setItem("tabs", JSON.stringify(tabs));
+  }
+
   updateClasses = (selectedId) => {
-    this.btnTargets.forEach((btn) =>
-      btn.classList.remove(...this.activeClasses),
-    );
+    this.btnTargets.forEach((btn) => {
+      btn.classList.remove(...this.activeClasses);
+      btn.classList.remove(...this.inactiveClasses);
+    });
+
     this.tabTargets.forEach((tab) => tab.classList.add("hidden"));
 
     this.btnTargets.forEach((btn) => {
       if (btn.dataset.id === selectedId) {
         btn.classList.add(...this.activeClasses);
+      } else {
+        btn.classList.add(...this.inactiveClasses);
       }
     });