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/bulk_select_controller.js

@@ -146,7 +146,9 @@ export default class extends Controller {
 
   _updateGroups() {
     this.groupTargets.forEach((group) => {
-      const rows = this.rowTargets.filter((row) => group.contains(row));
+      const rows = this.rowTargets.filter(
+        (row) => group.contains(row) && !row.disabled,
+      );
       const groupSelected =
         rows.length > 0 &&
         rows.every((row) => this.selectedIdsValue.includes(row.dataset.id));

app/javascript/controllers/pie_chart_controller.js

@@ -1,154 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-import * as d3 from "d3";
-
-// Connects to data-controller="pie-chart"
-export default class extends Controller {
-  static values = {
-    data: Array,
-    total: String,
-    label: String,
-  };
-
-  #d3SvgMemo = null;
-  #d3GroupMemo = null;
-  #d3ContentMemo = null;
-  #d3ViewboxWidth = 200;
-  #d3ViewboxHeight = 200;
-
-  connect() {
-    this.#draw();
-    document.addEventListener("turbo:load", this.#redraw);
-  }
-
-  disconnect() {
-    this.#teardown();
-    document.removeEventListener("turbo:load", this.#redraw);
-  }
-
-  #redraw = () => {
-    this.#teardown();
-    this.#draw();
-  };
-
-  #teardown() {
-    this.#d3SvgMemo = null;
-    this.#d3GroupMemo = null;
-    this.#d3ContentMemo = null;
-    this.#d3Container.selectAll("*").remove();
-  }
-
-  #draw() {
-    this.#d3Container.attr("class", "relative");
-    this.#d3Content.html(this.#contentSummaryTemplate());
-
-    const pie = d3
-      .pie()
-      .value((d) => d.percent_of_total)
-      .padAngle(0.06);
-
-    const arc = d3
-      .arc()
-      .innerRadius(this.#radius - 8)
-      .outerRadius(this.#radius)
-      .cornerRadius(2);
-
-    const arcs = this.#d3Group
-      .selectAll("arc")
-      .data(pie(this.dataValue))
-      .enter()
-      .append("g")
-      .attr("class", "arc");
-
-    const paths = arcs
-      .append("path")
-      .attr("class", (d) => d.data.fill_color)
-      .attr("d", arc);
-
-    paths
-      .on("mouseover", (event) => {
-        this.#d3Svg.selectAll(".arc path").attr("class", "fill-gray-200");
-        d3.select(event.target).attr("class", (d) => d.data.fill_color);
-        this.#d3ContentMemo.html(
-          this.#contentDetailTemplate(d3.select(event.target).datum().data),
-        );
-      })
-      .on("mouseout", () => {
-        this.#d3Svg
-          .selectAll(".arc path")
-          .attr("class", (d) => d.data.fill_color);
-        this.#d3ContentMemo.html(this.#contentSummaryTemplate());
-      });
-  }
-
-  #contentSummaryTemplate() {
-    return `<span class="text-xl text-gray-900 font-medium">${this.totalValue}</span> <span class="text-xs">${this.labelValue}</span>`;
-  }
-
-  #contentDetailTemplate(datum) {
-    return `
-      <span class="text-xl text-gray-900 font-medium">${datum.formatted_value}</span>
-      <div class="flex flex-row text-xs gap-2 items-center">
-      <div class="w-[10px] h-[10px] rounded-full ${datum.bg_color}"></div>
-        <span>${datum.label}</span>
-        <span>${datum.percent_of_total}%</span>
-      </div>
-    `;
-  }
-
-  get #radius() {
-    return Math.min(this.#d3ViewboxWidth, this.#d3ViewboxHeight) / 2;
-  }
-
-  get #d3Container() {
-    return d3.select(this.element);
-  }
-
-  get #d3Svg() {
-    if (!this.#d3SvgMemo) {
-      this.#d3SvgMemo = this.#createMainSvg();
-    }
-    return this.#d3SvgMemo;
-  }
-
-  get #d3Group() {
-    if (!this.#d3GroupMemo) {
-      this.#d3GroupMemo = this.#createMainGroup();
-    }
-
-    return this.#d3GroupMemo;
-  }
-
-  get #d3Content() {
-    if (!this.#d3ContentMemo) {
-      this.#d3ContentMemo = this.#createContent();
-    }
-    return this.#d3ContentMemo;
-  }
-
-  #createMainSvg() {
-    return this.#d3Container
-      .append("svg")
-      .attr("width", "100%")
-      .attr("class", "relative aspect-1")
-      .attr("viewBox", [0, 0, this.#d3ViewboxWidth, this.#d3ViewboxHeight]);
-  }
-
-  #createMainGroup() {
-    return this.#d3Svg
-      .append("g")
-      .attr(
-        "transform",
-        `translate(${this.#d3ViewboxWidth / 2},${this.#d3ViewboxHeight / 2})`,
-      );
-  }
-
-  #createContent() {
-    this.#d3ContentMemo = this.#d3Container
-      .append("div")
-      .attr(
-        "class",
-        "absolute inset-0 w-full text-center flex flex-col items-center justify-center",
-      );
-    return this.#d3ContentMemo;
-  }
-}

app/javascript/controllers/sidebar_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="sidebar"
+export default class extends Controller {
+  static values = { userId: String };
+  static targets = ["panel", "content"];
+
+  toggle() {
+    this.panelTarget.classList.toggle("w-0");
+    this.panelTarget.classList.toggle("opacity-0");
+    this.panelTarget.classList.toggle("w-[260px]");
+    this.panelTarget.classList.toggle("opacity-100");
+    this.contentTarget.classList.toggle("max-w-4xl");
+    this.contentTarget.classList.toggle("max-w-5xl");
+
+    fetch(`/users/${this.userIdValue}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        "X-CSRF-Token": document.querySelector('[name="csrf-token"]').content,
+        Accept: "application/json",
+      },
+      body: new URLSearchParams({
+        "user[show_sidebar]": !this.panelTarget.classList.contains("w-0"),
+      }).toString(),
+    });
+  }
+}

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);
       }
     });
 

app/javascript/controllers/time_series_chart_controller.js

@@ -7,7 +7,6 @@ export default class extends Controller {
     strokeWidth: { type: Number, default: 2 },
     useLabels: { type: Boolean, default: true },
     useTooltip: { type: Boolean, default: true },
-    usePercentSign: Boolean,
   };
 
   _d3SvgMemo = null;
@@ -16,15 +15,18 @@ export default class extends Controller {
   _d3InitialContainerWidth = 0;
   _d3InitialContainerHeight = 0;
   _normalDataPoints = [];
+  _resizeObserver = null;
 
   connect() {
     this._install();
     document.addEventListener("turbo:load", this._reinstall);
+    this._setupResizeObserver();
   }
 
   disconnect() {
     this._teardown();
     document.removeEventListener("turbo:load", this._reinstall);
+    this._resizeObserver?.disconnect();
   }
 
   _reinstall = () => {
@@ -49,10 +51,9 @@ export default class extends Controller {
 
   _normalizeDataPoints() {
     this._normalDataPoints = (this.dataValue.values || []).map((d) => ({
-      ...d,
       date: new Date(`${d.date}T00:00:00Z`),
-      value: d.value.amount ? +d.value.amount : +d.value,
-      currency: d.value.currency,
+      date_formatted: d.date_formatted,
+      trend: d.trend,
     }));
   }
 
@@ -138,13 +139,13 @@ export default class extends Controller {
       .append("stop")
       .attr("class", "start-color")
       .attr("offset", "0%")
-      .attr("stop-color", this._trendColor);
+      .attr("stop-color", this.dataValue.trend.color);
 
     gradient
       .append("stop")
       .attr("class", "middle-color")
       .attr("offset", "100%")
-      .attr("stop-color", this._trendColor);
+      .attr("stop-color", this.dataValue.trend.color);
 
     gradient
       .append("stop")
@@ -182,7 +183,7 @@ export default class extends Controller {
             this._normalDataPoints[this._normalDataPoints.length - 1].date,
           ])
           .tickSize(0)
-          .tickFormat(d3.utcFormat("%d %b %Y")),
+          .tickFormat(d3.utcFormat("%b %d, %Y")),
       )
       .select(".domain")
       .remove();
@@ -212,7 +213,7 @@ export default class extends Controller {
       .attr("x2", 0)
       .attr(
         "y1",
-        this._d3YScale(d3.max(this._normalDataPoints, (d) => d.value)),
+        this._d3YScale(d3.max(this._normalDataPoints, this._getDatumValue)),
       )
       .attr("y2", this._d3ContainerHeight);
 
@@ -240,7 +241,7 @@ export default class extends Controller {
           .area()
           .x((d) => this._d3XScale(d.date))
           .y0(this._d3ContainerHeight)
-          .y1((d) => this._d3YScale(d.value)),
+          .y1((d) => this._d3YScale(this._getDatumValue(d))),
       );
 
     // Apply the gradient + clip path
@@ -320,7 +321,7 @@ export default class extends Controller {
           .append("circle")
           .attr("class", "data-point-circle")
           .attr("cx", this._d3XScale(d.date))
-          .attr("cy", this._d3YScale(d.value))
+          .attr("cy", this._d3YScale(this._getDatumValue(d)))
           .attr("r", 8)
           .attr("fill", this._trendColor)
           .attr("fill-opacity", "0.1")
@@ -331,7 +332,7 @@ export default class extends Controller {
           .append("circle")
           .attr("class", "data-point-circle")
           .attr("cx", this._d3XScale(d.date))
-          .attr("cy", this._d3YScale(d.value))
+          .attr("cy", this._d3YScale(this._getDatumValue(d)))
           .attr("r", 3)
           .attr("fill", this._trendColor)
           .attr("pointer-events", "none");
@@ -361,7 +362,7 @@ export default class extends Controller {
   _tooltipTemplate(datum) {
     return `
       <div style="margin-bottom: 4px; color: var(--color-gray-500);">
-        ${d3.utcFormat("%b %d, %Y")(datum.date)}
+        ${datum.date_formatted}
       </div>
 
       <div style="display: flex; align-items: center; gap: 16px;">
@@ -371,24 +372,20 @@ export default class extends Controller {
               cx="5"
               cy="5"
               r="4"
-              stroke="${this._tooltipTrendColor(datum)}"
+              stroke="${datum.trend.color}"
               fill="transparent"
               stroke-width="1"></circle>
           </svg>
 
-          ${this._tooltipValue(datum)}${this.usePercentSignValue ? "%" : ""}
+          ${this._extractFormattedValue(datum.trend.current)}
         </div>
 
         ${
-          this.usePercentSignValue ||
-          datum.trend.value === 0 ||
-          datum.trend.value.amount === 0
-            ? `
-          <span style="width: 80px;"></span>
-        `
+          datum.trend.value === 0
+            ? `<span style="width: 80px;"></span>`
             : `
-          <span style="color: ${this._tooltipTrendColor(datum)};">
-            ${this._tooltipChange(datum)} (${datum.trend.percent}%)
+          <span style="color: ${datum.trend.color};">
+            ${this._extractFormattedValue(datum.trend.value)} (${datum.trend.percent_formatted})
           </span>
         `
         }
@@ -396,55 +393,23 @@ export default class extends Controller {
     `;
   }
 
-  _tooltipTrendColor(datum) {
-    return {
-      up:
-        datum.trend.favorable_direction === "up"
-          ? "var(--color-success)"
-          : "var(--color-destructive)",
-      down:
-        datum.trend.favorable_direction === "down"
-          ? "var(--color-success)"
-          : "var(--color-destructive)",
-      flat: "var(--color-gray-500)",
-    }[datum.trend.direction];
-  }
+  _getDatumValue = (datum) => {
+    return this._extractNumericValue(datum.trend.current);
+  };
 
-  _tooltipValue(datum) {
-    if (datum.currency) {
-      return this._currencyValue(datum);
+  _extractNumericValue = (numeric) => {
+    if (typeof numeric === "object" && "amount" in numeric) {
+      return Number(numeric.amount);
     }
-    return datum.value;
-  }
+    return Number(numeric);
+  };
 
-  _tooltipChange(datum) {
-    if (datum.currency) {
-      return this._currencyChange(datum);
+  _extractFormattedValue = (numeric) => {
+    if (typeof numeric === "object" && "formatted" in numeric) {
+      return numeric.formatted;
     }
-    return this._decimalChange(datum);
-  }
-
-  _currencyValue(datum) {
-    return Intl.NumberFormat(undefined, {
-      style: "currency",
-      currency: datum.currency,
-    }).format(datum.value);
-  }
-
-  _currencyChange(datum) {
-    return Intl.NumberFormat(undefined, {
-      style: "currency",
-      currency: datum.currency,
-      signDisplay: "always",
-    }).format(datum.trend.value.amount);
-  }
-
-  _decimalChange(datum) {
-    return Intl.NumberFormat(undefined, {
-      style: "decimal",
-      signDisplay: "always",
-    }).format(datum.trend.value);
-  }
+    return numeric;
+  };
 
   _createMainSvg() {
     return this._d3Container
@@ -503,28 +468,14 @@ export default class extends Controller {
   }
 
   get _trendColor() {
-    if (this._trendDirection === "flat") {
-      return "var(--color-gray-500)";
-    }
-    if (this._trendDirection === this._favorableDirection) {
-      return "var(--color-green-500)";
-    }
-    return "var(--color-destructive)";
-  }
-
-  get _trendDirection() {
-    return this.dataValue.trend.direction;
-  }
-
-  get _favorableDirection() {
-    return this.dataValue.trend.favorable_direction;
+    return this.dataValue.trend.color;
   }
 
   get _d3Line() {
     return d3
       .line()
       .x((d) => this._d3XScale(d.date))
-      .y((d) => this._d3YScale(d.value));
+      .y((d) => this._d3YScale(this._getDatumValue(d)));
   }
 
   get _d3XScale() {
@@ -536,8 +487,8 @@ export default class extends Controller {
 
   get _d3YScale() {
     const reductionPercent = this.useLabelsValue ? 0.3 : 0.05;
-    const dataMin = d3.min(this._normalDataPoints, (d) => d.value);
-    const dataMax = d3.max(this._normalDataPoints, (d) => d.value);
+    const dataMin = d3.min(this._normalDataPoints, this._getDatumValue);
+    const dataMax = d3.max(this._normalDataPoints, this._getDatumValue);
     const padding = (dataMax - dataMin) * reductionPercent;
 
     return d3
@@ -545,4 +496,11 @@ export default class extends Controller {
       .rangeRound([this._d3ContainerHeight, 0])
       .domain([dataMin - padding, dataMax + padding]);
   }
+
+  _setupResizeObserver() {
+    this._resizeObserver = new ResizeObserver(() => {
+      this._reinstall();
+    });
+    this._resizeObserver.observe(this.element);
+  }
 }