Merge pull request #1055 from ChakibMoMi/feature/privacy-mode

Add privacy mode to blur financial data across the app
2026-04-09 15:24:48 +00:00 · 2026-03-22 11:06:03 +01:00
parent e43a8f295d b6b093c578
commit 79e8469102
59 changed files with 237 additions and 136 deletions
--- a/app/javascript/controllers/privacy_mode_controller.js
+++ b/app/javascript/controllers/privacy_mode_controller.js
@@ -0,0 +1,43 @@
+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.
+// A synchronous inline script in <head> pre-applies the class to prevent
+// a flash of unblurred content on first paint (see _privacy_mode_check.html.erb).
+export default class extends Controller {
+  static targets = ["toggle", "iconOn", "iconOff"]
+
+  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")
+    }
+
+    // Update button state
+    this.toggleTargets.forEach((el) => {
+      el.setAttribute("aria-pressed", this.active.toString())
+    })
+
+    // Toggle icon visibility: show eye when active (click to reveal), eye-off when inactive
+    this.iconOnTargets.forEach((el) => {
+      el.classList.toggle("hidden", !this.active)
+    })
+    this.iconOffTargets.forEach((el) => {
+      el.classList.toggle("hidden", this.active)
+    })
+  }
+}