Add controller to save accounts collapse state to localStorage (#432)

* Add controller to save accounts collapse state to localStorage

* Small clean up

* Fix indentation

app/javascript/controllers/account_collapse_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="account-collapse"
+export default class extends Controller {
+  static values = { type: String }
+  boundOnToggle = null
+  initialToggle = false
+  STORAGE_NAME = "accountCollapseStates"
+
+  connect() {
+    this.boundOnToggle = this.onToggle.bind(this)
+    this.element.addEventListener("toggle", this.boundOnToggle)
+    this.updateFromLocalStorage()
+  }
+
+  disconnect() {
+    this.element.removeEventListener("toggle", this.boundOnToggle)
+  }
+
+  onToggle() {
+    if (this.initialToggle) {
+      this.initialToggle = false
+      return
+    }
+
+    const items = this.getItemsFromLocalStorage()
+    if (items.has(this.typeValue)) {
+      items.delete(this.typeValue)
+    } else {
+      items.add(this.typeValue)
+    }
+    localStorage.setItem(this.STORAGE_NAME, JSON.stringify([...items]))
+  }
+
+  updateFromLocalStorage() {
+    const items = this.getItemsFromLocalStorage()
+
+    if (items.has(this.typeValue)) {
+      this.initialToggle = true
+      this.element.setAttribute("open", "")
+    }
+  }
+
+  getItemsFromLocalStorage() {
+    try {
+      const items = localStorage.getItem(this.STORAGE_NAME)
+      return new Set(items ? JSON.parse(items) : [])
+    } catch (error) {
+      console.error("Error parsing items from localStorage:", error)
+      return new Set()
+    }
+  }
+}

app/views/accounts/_account_list.html.erb

@@ -3,7 +3,7 @@
 <% accounts = Current.family.accounts.where(accountable_type: type.name) %>
 
 <% if accounts.sum(&:converted_balance) > 0 %>
-<details class="mb-1 text-sm group">
+<details class="mb-1 text-sm group" data-controller="account-collapse" data-account-collapse-type-value="<%= type %>">
   <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") %>