From e3ad77b78c8f429899d2e4ffa0e0a9116ee121c6 Mon Sep 17 00:00:00 2001
From: ijeoma <ijeomaekezie2@gmail.com>
Date: Fri, 16 Oct 2026 04:17:05 +0100
Subject: [PATCH] fix: theme caching, form ARIA, PolicyCard guard, dashboard
 empty states

- Cache ThemeContext localStorage read in module-level variable (#732)
- Add aria-describedby, aria-invalid, aria-live to form modals (#733)
- Guard PolicyCard currency formatter against undefined/null amounts (#734)
- Add EmptyState with CTA for claims section in Dashboard (#735)
---
 src/app/dashboard/page.tsx        | 10 +++++++---
 src/components/BuyPolicyModal.tsx |  2 +-
 src/components/DepositModal.tsx   |  7 +++++--
 src/components/PolicyCard.tsx     |  4 ++--
 src/components/WithdrawModal.tsx  |  3 ++-
 src/context/ThemeContext.tsx      | 15 ++++++++++++---
 6 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 8f55376..ee41ccc 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -195,9 +195,13 @@ export default function DashboardPage() {
             <Skeleton className="h-40 w-full" />
           </div>
         ) : recentClaims.length === 0 ? (
-          <div className="rounded-2xl border border-white/10 bg-white/[0.02] p-6 text-center text-sm text-gray-400">
-            No claims submitted yet.
-          </div>
+          <EmptyState
+            icon="📋"
+            title="No claims yet"
+            description="When you file a claim on one of your active policies, it will appear here."
+            actionLabel="Browse policies"
+            actionHref="/policies"
+          />
         ) : (
           <div className="rounded-2xl border border-white/10 bg-white/[0.02]">
             <table className="w-full text-sm">
diff --git a/src/components/BuyPolicyModal.tsx b/src/components/BuyPolicyModal.tsx
index b6a146d..1bd47f6 100644
--- a/src/components/BuyPolicyModal.tsx
+++ b/src/components/BuyPolicyModal.tsx
@@ -436,7 +436,7 @@ export function BuyPolicyModal({ product, onClose }: Props) {
           </div>
         )}
 
-        {error && <p className={ERROR_TEXT}>{error}</p>}
+        {error && <p className={ERROR_TEXT} aria-live="polite">{error}</p>}
       </div>
 
       <div className="mt-6 flex gap-3">
diff --git a/src/components/DepositModal.tsx b/src/components/DepositModal.tsx
index 3c9ba52..a2e60c0 100644
--- a/src/components/DepositModal.tsx
+++ b/src/components/DepositModal.tsx
@@ -151,10 +151,11 @@ export function DepositModal({ pool, onClose }: Props) {
     <Modal open title={`Deposit — ${poolLabel} Pool`} onClose={onClose}>
       <div className="space-y-4">
         <div>
-          <label className={LABEL_CLASS}>
+          <label htmlFor="deposit-amount" className={LABEL_CLASS}>
             Amount (USDC)
           </label>
           <input
+            id="deposit-amount"
             type="number"
             value={amount}
             onChange={(e) => { setAmount(e.target.value); setError(''); }}
@@ -162,6 +163,8 @@ export function DepositModal({ pool, onClose }: Props) {
             min={0}
             step="0.01"
             className={INPUT_CLASS}
+            aria-invalid={!!error}
+            aria-describedby={error ? 'deposit-amount-error' : undefined}
           />
         </div>
 
@@ -193,7 +196,7 @@ export function DepositModal({ pool, onClose }: Props) {
         {paused && (
           <p className={WARNING_TEXT}>This pool is paused. Deposits are temporarily disabled.</p>
         )}
-        {error && <p className={ERROR_TEXT}>{error}</p>}
+        {error && <p id="deposit-amount-error" className={ERROR_TEXT} aria-live="polite">{error}</p>}
       </div>
 
       <button
diff --git a/src/components/PolicyCard.tsx b/src/components/PolicyCard.tsx
index 450bfd7..056518f 100644
--- a/src/components/PolicyCard.tsx
+++ b/src/components/PolicyCard.tsx
@@ -125,7 +125,7 @@ function PolicyCardComponent({ policy }: PolicyCardProps) {
         </div>
         <div>
           <dt className="text-gray-400">Premium paid</dt>
-          <dd className="mt-0.5 font-semibold">{formatUSDC(policy.premiumPaid)}</dd>
+          <dd className="mt-0.5 font-semibold">{policy.premiumPaid != null ? formatUSDC(policy.premiumPaid) : '—'}</dd>
         </div>
         <div>
           <dt className="text-gray-400">Start date</dt>
@@ -172,7 +172,7 @@ function PolicyCardComponent({ policy }: PolicyCardProps) {
           </div>
           <div className="flex justify-between gap-2">
             <dt className="text-gray-400 shrink-0">Premium</dt>
-            <dd className="text-gray-200">{formatUSDC(policy.premiumPaid)}</dd>
+            <dd className="text-gray-200">{policy.premiumPaid != null ? formatUSDC(policy.premiumPaid) : '—'}</dd>
           </div>
           <div className="flex justify-between gap-2">
             <dt className="text-gray-400 shrink-0">Oracle</dt>
diff --git a/src/components/WithdrawModal.tsx b/src/components/WithdrawModal.tsx
index c073030..be18046 100644
--- a/src/components/WithdrawModal.tsx
+++ b/src/components/WithdrawModal.tsx
@@ -144,6 +144,7 @@ export function WithdrawModal({ pool, onClose }: Props) {
             min={0}
             step="0.01"
             aria-invalid={invalidFormat || belowMinimum}
+            aria-describedby="withdraw-amount-error"
             className={`${INPUT_CLASS} ${invalidFormat || belowMinimum ? 'border-red-500' : ''}`}
           />
           {invalidFormat && (
@@ -189,7 +190,7 @@ export function WithdrawModal({ pool, onClose }: Props) {
         {paused && (
           <p className="text-sm text-amber-400">This pool is paused. Withdrawals are temporarily disabled.</p>
         )}
-        {error && <p className="text-sm text-red-400">{error}</p>}
+        {error && <p id="withdraw-amount-error" className="text-sm text-red-400" aria-live="polite">{error}</p>}
       </div>
 
       <button
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
index c0d4c05..9c8d582 100644
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -12,14 +12,23 @@ interface ThemeContextValue {
 const ThemeContext = createContext<ThemeContextValue | null>(null);
 const STORAGE_KEY = 'ps_theme';
 
+// Cache the initial theme so localStorage is read only once (#732).
+// React's useState lazy initializer calls this during the first render;
+// the module-level cache ensures a single read even across provider remounts.
+let cachedInitialTheme: Theme | null = null;
+
 function getInitialTheme(): Theme {
+  if (cachedInitialTheme !== null) return cachedInitialTheme;
   if (typeof window === 'undefined') return 'dark';
   try {
     const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored === 'light' || stored === 'dark') return stored;
+    if (stored === 'light' || stored === 'dark') {
+      cachedInitialTheme = stored;
+      return stored;
+    }
   } catch { /* ignore */ }
-  if (window.matchMedia?.('(prefers-color-scheme: light)').matches) return 'light';
-  return 'dark';
+  cachedInitialTheme = window.matchMedia?.('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+  return cachedInitialTheme;
 }
 
 export function ThemeProvider({ children }: { children: ReactNode }) {