QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-08 14:54:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize privacy mode: move toggle to breadcrumbs bar, fix flash, improve UX

Browse Source 
- Move privacy toggle button from dashboard-only to global breadcrumbs bar
  (desktop) and mobile top nav so it's accessible on every page
- Add _privacy_mode_check.html.erb inline script in <head> to prevent
  flash of unblurred content on first page load (same pattern as dark mode)
- Improve Stimulus controller: add iconOn/iconOff targets to toggle between
  eye/eye-off icons; update aria-pressed on all toggle targets simultaneously
- Remove hover-unblur (blur(4px) on hover) from CSS for security; add
  pointer-events: none to prevent interaction with blurred values
- Move i18n key from pages.dashboard scope to layouts.application scope;
  add privacy_mode translation to all 12 locales (EN, DE, FR, ES, CA,
  NL, NB, PT-BR, RO, TR, ZH-CN, ZH-TW)
This commit is contained in:
Chakib
2026-03-01 17:46:50 +01:00
parent 583d91291f
commit d5d450fc1a
20 changed files with 59 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/controllers/privacy_mode_controller.js
View File

@@ -4,8 +4,10 @@ import { Controller } from "@hotwired/stimulus"
// 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"]
static targets = ["toggle", "iconOn", "iconOff"]
connect() {
this.active = localStorage.getItem("privacyMode") === "true"
@@ -25,8 +27,17 @@ export default class extends Controller {
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)
})
}
}