chore: connection status

examples/buddybook/src/App.tsx

@@ -12,6 +12,7 @@ import { BlockPayload, getMessagesFromStore, subscribeToFilter } from './lib/wak
 import TelemetryOptIn from './components/TelemetryOptIn';
 import TelemetryPage from './components/TelemetryPage';
 import SignSharedChain from './components/Chain/SignSharedChain'
+import ConnectionStatus from '@/components/ConnectionStatus';
 
 type Status = 'success' | 'in-progress' | 'error';
 
@@ -132,6 +133,9 @@ function App() {
   return (
     <div className="min-h-screen bg-background text-foreground">
       <Header wakuStatus={wakuStatus} />
+      <div className="md:hidden">
+        <ConnectionStatus filter={wakuStatus.filter} store={wakuStatus.store} />
+      </div>
       <main className="container mx-auto px-4 py-4 md:py-8 max-w-7xl">
         <Routes>
           <Route path="" element={<Home />} />

examples/buddybook/src/components/ConnectionStatus.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Card } from "@/components/ui/card";
+import { Loader2, CheckCircle2, XCircle } from "lucide-react";
+import type { Status } from '@/App';
+
+interface ConnectionStatusProps {
+  filter: Status;
+  store: Status;
+}
+
+const StatusIndicator: React.FC<{ status: Status; label: string }> = ({ status, label }) => {
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'success':
+        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+      case 'error':
+        return <XCircle className="h-4 w-4 text-red-500" />;
+      case 'in-progress':
+        return <Loader2 className="h-4 w-4 animate-spin text-yellow-500" />;
+    }
+  };
+
+  const getStatusColor = () => {
+    switch (status) {
+      case 'success':
+        return 'bg-green-500/10 text-green-500';
+      case 'error':
+        return 'bg-red-500/10 text-red-500';
+      case 'in-progress':
+        return 'bg-yellow-500/10 text-yellow-500';
+    }
+  };
+
+  return (
+    <div className={`flex items-center gap-2 px-2 py-1 rounded-full ${getStatusColor()}`}>
+      {getStatusIcon()}
+      <span className="text-xs font-medium">{label}</span>
+    </div>
+  );
+};
+
+const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ filter, store }) => {
+  return (
+    <Card className="fixed bottom-4 left-4 right-4 md:static md:bottom-auto md:left-auto p-2 bg-background/80 backdrop-blur-sm border shadow-lg z-50 md:z-auto">
+      <div className="flex flex-row justify-around md:justify-start md:gap-4">
+        <StatusIndicator status={filter} label="Filter" />
+        <StatusIndicator status={store} label="Store" />
+      </div>
+    </Card>
+  );
+};
+
+export default ConnectionStatus; 

examples/buddybook/src/components/ui/dialog.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
 
@@ -36,9 +35,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
-        "rounded-lg",
-        "max-h-[85vh] overflow-y-auto",
+        "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200",
+        "p-4 md:p-6",
+        "rounded-t-lg md:rounded-lg",
+        "max-h-[95vh] md:max-h-[85vh]",
+        "w-full md:max-w-lg",
+        "bottom-0 md:bottom-auto",
+        "overflow-y-auto",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
         className
       )}
       {...props}