Clean up. Almost ready to deploy maybe. REally wanna rewrite but hey eventually we will.

src/components/status/ConnectionStatus.tsx

@@ -0,0 +1,68 @@
+'use client';
+import { Wifi, WifiOff, RefreshCw } from 'lucide-react';
+import { Badge, Button } from '@/components/ui';
+import type { ConnectionStatus as ConnectionStatusType } from '@/lib/hooks';
+
+type ConnectionStatusProps = {
+  status: ConnectionStatusType;
+  onReconnect?: () => void;
+  showAsButton?: boolean;
+  className?: string;
+}
+
+const getConnectionIcon = (status: ConnectionStatusType) => {
+  switch (status) {
+    case 'connected':
+      return <Wifi className='w-4 h-4 text-green-500' />;
+    case 'connecting':
+      return <Wifi className='w-4 h-4 text-yellow-500 animate-pulse' />;
+    case 'disconnected':
+      return <WifiOff className='w-4 h-4 text-red-500' />;
+    case 'updating':
+      return <RefreshCw className='w-4 h-4 text-blue-500 animate-spin' />;
+  }
+};
+
+const getConnectionText = (status: ConnectionStatusType) => {
+  switch (status) {
+    case 'connected':
+      return 'Connected';
+    case 'connecting':
+      return 'Connecting...';
+    case 'disconnected':
+      return 'Disconnected';
+    case 'updating':
+      return 'Updating...';
+  }
+};
+
+export const ConnectionStatus = ({
+  status,
+  onReconnect,
+  showAsButton = false,
+  className = '',
+}: ConnectionStatusProps) => {
+  if (showAsButton && status === 'disconnected' && onReconnect) {
+    return (
+      <Button
+        variant='outline'
+        size='sm'
+        onClick={onReconnect}
+        className={`flex items-center gap-2 cursor-pointer ${className}`}
+      >
+        {getConnectionIcon(status)}
+        <span className='text-base'>{getConnectionText(status)}</span>
+      </Button>
+    );
+  }
+
+  return (
+    <Badge
+      variant='outline'
+      className={`flex items-center gap-2 ${className}`}
+    >
+      {getConnectionIcon(status)}
+      <span className='text-base'>{getConnectionText(status)}</span>
+    </Badge>
+  );
+};