Add offline caching and refine Live Activity

lib/trpc.tsx

@@ -9,9 +9,15 @@ import {
 } from "react";
 import SuperJSON from "superjson";
 
+import { LoadingScreen } from "@/components/LoadingScreen";
 import { useAccounts } from "@/contexts/AccountsContext";
 import { useAuthClient, useSession } from "@/contexts/AuthContext";
 import { getAuthCookieHeaders } from "@/lib/auth-cookie";
+import { configureReactQueryOnlineManager } from "@/lib/network-status";
+import {
+  persistOfflineQueryCache,
+  restoreOfflineQueryCache,
+} from "@/lib/offline-cache";
 import { performAuthReset } from "@/lib/auth-session";
 import { createAppQueryClient } from "@/lib/query-client";
 import type { AppRouter } from "beenvoice/server/api/root";
@@ -31,6 +37,7 @@ export function TRPCProvider({
   const { refetch } = useSession();
   const authStoragePrefixRef = useRef(authStoragePrefix);
   authStoragePrefixRef.current = authStoragePrefix;
+  const [cacheReady, setCacheReady] = useState(false);
 
   const mountedRef = useRef(true);
   const resettingRef = useRef(false);
@@ -87,6 +94,43 @@ export function TRPCProvider({
     }),
   );
 
+  useEffect(() => {
+    configureReactQueryOnlineManager();
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setCacheReady(false);
+
+    restoreOfflineQueryCache({
+      queryClient,
+      accountId: activeAccountId,
+      apiUrl,
+    }).finally(() => {
+      if (!cancelled && mountedRef.current) {
+        setCacheReady(true);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeAccountId, apiUrl, queryClient]);
+
+  useEffect(() => {
+    if (!cacheReady) return;
+
+    return persistOfflineQueryCache({
+      queryClient,
+      accountId: activeAccountId,
+      apiUrl,
+    });
+  }, [activeAccountId, apiUrl, cacheReady, queryClient]);
+
+  if (!cacheReady) {
+    return <LoadingScreen message="Loading saved data…" />;
+  }
+
   return (
     <api.Provider client={trpcClient} queryClient={queryClient}>
       {children}