diff --git a/app/javascript/controllers/account_collapse_controller.js b/app/javascript/controllers/account_collapse_controller.js new file mode 100644 index 00000000..2f453198 --- /dev/null +++ b/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() + } + } +} diff --git a/app/views/accounts/_account_list.html.erb b/app/views/accounts/_account_list.html.erb index 96a33999..90bb9294 100644 --- a/app/views/accounts/_account_list.html.erb +++ b/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 %> -
+
<%= 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") %>