Refactor code structure and remove redundant changes

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

@@ -0,0 +1,52 @@
+import { AlertTriangle, X, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useAPIConnectivity } from '@/contexts/APIConnectivityContext';
+
+/**
+ * Banner displayed when Supabase API is unreachable
+ * Includes link to status page and dismissal option
+ */
+export function APIStatusBanner() {
+  const { isAPIReachable, isBannerDismissed, dismissBanner } = useAPIConnectivity();
+  
+  // Show banner when API is down AND not dismissed
+  if (isAPIReachable || isBannerDismissed) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 bg-destructive text-destructive-foreground shadow-lg">
+      <div className="container mx-auto px-4 py-3">
+        <div className="flex items-center justify-between gap-4">
+          <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 Connection Issue</p>
+              <p className="text-sm opacity-90">
+                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"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm inline-flex items-center gap-1 mt-1 underline hover:opacity-80 transition-opacity"
+              >
+                Check Status Page
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={dismissBanner}
+            className="flex-shrink-0 hover:bg-destructive-foreground/10 text-destructive-foreground"
+            aria-label="Dismiss alert"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}