feat: Implement automatic API connectivity banner

src/components/ui/api-status-banner.tsx

@@ -1,20 +1,16 @@
 import { AlertTriangle, X, ExternalLink } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { useCronitorHealth } from '@/contexts/CronitorHealthContext';
+import { useAPIConnectivity } from '@/contexts/APIConnectivityContext';
 
 /**
- * Banner displayed when Cronitor detects Supabase API is down
+ * Banner displayed when Supabase API is unreachable
  * Includes link to status page and dismissal option
  */
 export function APIStatusBanner() {
-  const { passing, isLoading, isBannerDismissed, dismissBanner } = useCronitorHealth();
+  const { isAPIReachable, isBannerDismissed, dismissBanner } = useAPIConnectivity();
   
-  // Don't show if:
-  // - Still loading initial data
-  // - API is healthy (passing === true)
-  // - User dismissed it
-  // - Status unknown (passing === null) after initial load
-  if (isLoading || passing === true || passing === null || isBannerDismissed) {
+  // Show banner when API is down AND not dismissed
+  if (isAPIReachable || isBannerDismissed) {
     return null;
   }
 
@@ -25,9 +21,9 @@ export function APIStatusBanner() {
           <div className="flex items-center gap-3 flex-1">
             <AlertTriangle className="h-5 w-5 flex-shrink-0" />
             <div className="flex-1">
-              <p className="font-semibold">API Monitoring Alert</p>
+              <p className="font-semibold">API Connection Issue</p>
               <p className="text-sm opacity-90">
-                Supabase services are experiencing issues. Some features may be temporarily unavailable.
+                Unable to reach the Supabase API. The service may be experiencing an outage or your connection may be interrupted.
               </p>
               <a
                 href="https://status.thrillwiki.com"
@@ -35,7 +31,7 @@ export function APIStatusBanner() {
                 rel="noopener noreferrer"
                 className="text-sm inline-flex items-center gap-1 mt-1 underline hover:opacity-80 transition-opacity"
               >
-                View Status Page
+                Check Status Page
                 <ExternalLink className="h-3 w-3" />
               </a>
             </div>