usePrivacyCurtain

Location: src/hooks/usePrivacyCurtain.js

Overview

Manages the privacy curtain feature, which obscures the screen after a period of user inactivity. Combines user preferences (enabled state, timeout duration, visual style) with idle detection from useIdleDetection. Preferences are persisted both to localStorage for instant hydration and to the profiles table in Supabase for cross-device sync.

Use this hook in layout or shell components that need to render a privacy overlay when the user goes idle.

Signature

function usePrivacyCurtain(): {
  // State
  showCurtain: boolean,
  isIdle: boolean,
  loading: boolean,
  // Preferences
  preferences: {
    enabled: boolean,
    timeoutMinutes: number,
    style: 'fade' | 'blur' | 'black'
  },
  // Actions
  toggleEnabled: () => void,
  setTimeout: (minutes: number) => void,
  setStyle: (style: 'fade' | 'blur' | 'black') => void,
  dismissCurtain: () => void,
  updatePreference: (key: string, value: any) => Promise<void>
}

Parameters

This hook takes no parameters. It fetches the current user internally via supabase.auth.getUser().

Return Value

Property	Type	Description
showCurtain	boolean	Whether the curtain should be displayed (enabled AND idle)
isIdle	boolean	Whether the user is currently idle
loading	boolean	Whether preferences are being loaded from the database
preferences	object	Current preference values: enabled, timeoutMinutes, style
toggleEnabled	() => void	Toggles the curtain enabled/disabled
setTimeout	(minutes: number) => void	Sets the idle timeout (clamped to 1-60 minutes)
setStyle	(style: string) => void	Sets the curtain visual style ('fade', 'blur', or 'black')
dismissCurtain	() => void	Dismisses the curtain and resets the idle timer
updatePreference	(key: string, value: any) => Promise<void>	Low-level preference updater for any key

Usage

import { usePrivacyCurtain } from '../hooks/usePrivacyCurtain';

function AppShell({ children }) {
  const { showCurtain, preferences, dismissCurtain } = usePrivacyCurtain();

  return (
    <div>
      {children}
      {showCurtain && (
        <div
          className={`privacy-curtain privacy-curtain--${preferences.style}`}
          onClick={dismissCurtain}
        >
          <p>Click or press any key to continue</p>
        </div>
      )}
    </div>
  );
}

Notes

• Default timeout is 5 minutes, default style is 'fade', disabled by default.
• Preferences are loaded from localStorage first for instant initial state, then synced from the database.
• The setTimeout function clamps values between 1 and 60 minutes.
• Relies on useIdleDetection hook for idle state tracking.

---

Last updated: 2026-02-07