Files
sure/app/javascript/controllers/privacy_mode_controller.js
Chakib 583d91291f Add privacy mode with blur toggle for financial data
- Stimulus controller on global layout (persists across all pages)
- CSS blur effect on .privacy-sensitive elements (8px active, 4px on hover)
- localStorage persistence survives page navigations
- Toggle button on dashboard with aria-pressed for accessibility
- Applied to 28+ views: accounts, budgets, transactions, reports, etc.

Fixes: UTF-8 encoding, global controller mount, aria-pressed attribute
2026-02-22 23:20:49 +01:00

32 lines
877 B
JavaScript

import { Controller } from "@hotwired/stimulus"
// Privacy Mode Controller
// Toggles visibility of financial numbers across the page.
// Elements with class "privacy-sensitive" will be blurred when active.
// State persists in localStorage so it survives page navigations.
export default class extends Controller {
static targets = ["toggle"]
connect() {
this.active = localStorage.getItem("privacyMode") === "true"
this._apply()
}
toggle() {
this.active = !this.active
localStorage.setItem("privacyMode", this.active.toString())
this._apply()
}
_apply() {
if (this.active) {
document.documentElement.classList.add("privacy-mode")
} else {
document.documentElement.classList.remove("privacy-mode")
}
this.toggleTargets.forEach((el) => {
el.setAttribute("aria-pressed", this.active.toString())
})
}
}