PWA Phase 3: Fix infinite loop risk in NotificationPreferences with Lingui translations

[kevalyq]

🐛 Bug Description

Component: src/components/NotificationPreferences.tsx (lines 76-91)
Severity: MEDIUM
Origin: Copilot review comment in PR #100

Problem

The NotificationPreferences component has a potential infinite loop risk due to how translations are handled:

const defaultPreferences = useMemo<NotificationPreference[]>(
  () => [...],
  [_]  // ← Depends on _ function
);

useEffect(() => {
  setPreferences((current) =>
    current.map((pref) => {
      const defaultPref = defaultPreferences.find(...);
      return defaultPref ? { ...pref, label: defaultPref.label, ... } : pref;
    })
  );
}, [defaultPreferences]);  // ← Triggers on _ function changes

Issue: The Lingui _ function reference may change frequently during re-renders, causing defaultPreferences to be recomputed, which then triggers the useEffect, which updates state, causing re-render... → potential infinite loop.

Expected Behavior

Translations should only update when the locale actually changes, not on every _ function reference change.

Proposed Solution

Depend on locale instead of defaultPreferences:

const locale = useLingui().i18n.locale;

useEffect(() => {
  // Only update when locale changes, not on every _ function reference change
  setPreferences((current) =>
    current.map((pref) => {
      const defaultPref = defaultPreferences.find(
        (d) => d.category === pref.category
      );
      return defaultPref
        ? { ...pref, label: defaultPref.label, description: defaultPref.description }
        : pref;
    })
  );
}, [locale]); // ← Depend on locale instead

Reproduction Steps

1. Open NotificationPreferences component
2. Change language rapidly (if multi-language switching is available)
3. Monitor for excessive re-renders

Context

• Related to PR feat: Implement PWA Phase 3 features (Push Notifications, Share Target API, Offline Analytics) #100 (PWA Phase 3 implementation)
• Copilot comment: "Potential infinite loop with defaultPreferences in useEffect"
• Currently not causing production issues, but should be fixed preventively

Acceptance Criteria

• useEffect depends on locale instead of defaultPreferences
• Translations still update correctly when language changes
• No excessive re-renders detected
• Tests updated to verify translation updates work correctly

[github-actions]

✅ This issue has been added to the SecPal Feature Roadmap with status: 💡 Ideas

New idea - needs discussion and evaluation

Status Flow:
💡 Ideas → 💬 Discussion → 📥 Backlog → 📋 Planned → 🚧 In Progress → 👀 In Review → ✅ Done

Note: Ideas that won't be implemented should be moved to 🚫 Won't Do with a reason.