SCIX-847 Handle blocked browser storage gracefully

[thostetler]

When a user has cookies or site data blocked in their browser, the app crashes with a SecurityError thrown by localStorage access during Zustand store initialization. Iron-session also cannot persist session cookies, causing continuous re-bootstrapping on every page load.

• Add browserStorage utility module with safe wrappers (try/catch) for localStorage and sessionStorage, and availability probes for cookies and localStorage
• Update Zustand persist middleware to use the safe storage adapter via getStorage option, preventing the crash
• Replace direct localStorage/sessionStorage access in useLandingFormPreference, SiteAlert, and useScrollRestoration with safe wrappers
• Render a full-page blocking notice when cookies are unavailable (app cannot maintain a stable session)
• Render a dismissable warning banner when localStorage is blocked but cookies work (session is stable, but preferences won't persist)

[codecov]

Codecov Report

❌ Patch coverage is 84.43396% with 33 lines in your changes missing coverage. Please review.
✅ Project coverage is 62.6%. Comparing base (006cf95) to head (54858be).

Files with missing lines	Patch %	Lines
src/lib/browserStorage.ts	78.7%	29 Missing ⚠️
src/lib/useLandingFormPreference.ts	80.0%	3 Missing ⚠️
src/store/store.ts	50.0%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           master    #841     +/-   ##
========================================
+ Coverage    62.5%   62.6%   +0.2%     
========================================
  Files         317     320      +3     
  Lines       36576   36765    +189     
  Branches     1673    1691     +18     
========================================
+ Hits        22827   22984    +157     
- Misses      13709   13741     +32     
  Partials       40      40             

Files with missing lines	Coverage Δ
...ts/StorageDegradedBanner/StorageDegradedBanner.tsx	100.0% <100.0%> (ø)
...rageUnavailableNotice/StorageUnavailableNotice.tsx	100.0% <100.0%> (ø)
src/store/store.ts	60.4% <50.0%> (-0.1%)	⬇️
src/lib/useLandingFormPreference.ts	94.1% <80.0%> (+0.5%)	⬆️
src/lib/browserStorage.ts	78.7% <78.7%> (ø)

... and 2 files with indirect coverage changes

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

This PR adds defensive browser storage handling so the app doesn’t crash when localStorage/sessionStorage access throws SecurityError, and introduces UX fallbacks for blocked cookies/storage (moderate regression risk due to app-wide bootstrapping changes and new SSR/client branching).

Changes:

• Introduces browserStorage utilities (safe local/session storage wrappers + availability probes) and wires Zustand persist to use a safe storage adapter.
• Replaces direct localStorage/sessionStorage usage in a few hooks/components with safe wrappers.
• Adds UI: a full-page “cookies required” notice and a dismissible degraded-storage banner, plus tests for the new utilities/components.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/store/store.ts	Switches Zustand persist middleware to use createSafeStorage to avoid crashes when storage access throws.
src/pages/_app.tsx	Adds cookie/localStorage availability checks to render a blocking notice or a degraded banner on the client.
src/lib/useScrollRestoration.ts	Replaces sessionStorage direct calls with safe wrapper functions.
src/lib/useLandingFormPreference.ts	Replaces localStorage direct calls with safe wrapper functions.
src/lib/browserStorage.ts	New module providing safe storage wrappers and availability probes, plus a Zustand StateStorage adapter.
src/lib/tests/browserStorage.test.ts	Adds Vitest coverage for the new storage utilities.
src/components/StorageUnavailableNotice/StorageUnavailableNotice.tsx	New full-page notice UI shown when cookies are unavailable.
src/components/StorageUnavailableNotice/StorageUnavailableNotice.test.tsx	Adds tests for the notice component.
src/components/StorageDegradedBanner/StorageDegradedBanner.tsx	New dismissible warning banner for blocked localStorage (cookies still work).
src/components/StorageDegradedBanner/StorageDegradedBanner.test.tsx	Adds tests for the banner component.
src/components/SiteAlert/SiteAlert.tsx	Replaces localStorage direct calls with safe wrapper functions for dismiss state.

[Copilot]

The notice copy says "cookies and browser storage ... Both are currently blocked", but this component is rendered based on cookies being unavailable (localStorage may still work). This message is misleading; adjust wording to focus on cookies/site data being blocked (and only mention local storage if you actually detect it).

Suggested change

	Browser storage is required
	</Heading>
	<Text>
	SciX uses cookies and browser storage to maintain your session and preferences. Both are currently blocked by
	your browser settings.
	Cookies are required
	</Heading>
	<Text>
	SciX uses cookies and site data to maintain your session and preferences. Cookies appear to be blocked by your
	browser settings.

[Copilot]

createSafeStorage() will also be used during SSR (the store is created server-side). In SSR, referencing localStorage will throw a ReferenceError that gets caught, but it will log debug messages and incur try/catch overhead on every request. Consider short-circuiting when window is undefined to return a no-op storage adapter without logging.

[Copilot]

This test uses the React namespace type (React.ReactElement) without importing React, which will fail under tsconfig jsx=react-jsx ("Cannot find namespace 'React'"). Import type ReactElement from 'react' (or remove the annotation) and use that instead.

Suggested change

	import { StorageUnavailableNotice } from './StorageUnavailableNotice';
	const renderWithChakra = (ui: React.ReactElement) => render(<ChakraProvider>{ui}</ChakraProvider>);
	import type { ReactElement } from 'react';
	import { StorageUnavailableNotice } from './StorageUnavailableNotice';
	const renderWithChakra = (ui: ReactElement) => render(<ChakraProvider>{ui}</ChakraProvider>);

[Copilot]

This test uses the React namespace type (React.ReactElement) without importing React, which will fail under tsconfig jsx=react-jsx ("Cannot find namespace 'React'"). Import type ReactElement from 'react' (or remove the annotation) and use that instead.

Suggested change

	import { ChakraProvider } from '@chakra-ui/react';
	import { StorageDegradedBanner } from './StorageDegradedBanner';
	const renderWithChakra = (ui: React.ReactElement) => render(<ChakraProvider>{ui}</ChakraProvider>);
	import type { ReactElement } from 'react';
	import { ChakraProvider } from '@chakra-ui/react';
	import { StorageDegradedBanner } from './StorageDegradedBanner';
	const renderWithChakra = (ui: ReactElement) => render(<ChakraProvider>{ui}</ChakraProvider>);