Implement WebSocket connection management and settings UI

src/contexts/Contexts.jsx

@@ -1,9 +1,15 @@
 import QueryContext from './QueryContext'
 import RouterContext from './RouterContext'
 import ThemeContext from './ThemeContext'
+import WebSocketProvider from './WebSocketContext'
 
 const Contexts = () => {
-  const contexts = [ThemeContext, QueryContext, RouterContext]
+  const contexts = [
+    ThemeContext,
+    QueryContext,
+    WebSocketProvider,
+    RouterContext,
+  ]
 
   return contexts.reduceRight((acc, Context) => {
     return <Context>{acc}</Context>

src/contexts/WebSocketContext.jsx

@@ -0,0 +1,29 @@
+import { createContext, useContext } from 'react'
+import { useWebSocket } from '../hooks/useWebSocket'
+
+const WebSocketContext = createContext({
+  connectionState: 3, // CLOSED
+  isConnected: false,
+  isConnecting: false,
+  lastEvent: null,
+  error: null,
+  connect: () => {},
+  disconnect: () => {},
+  getConnectionStatus: () => 'disconnected',
+})
+
+export const useWebSocketContext = () => {
+  return useContext(WebSocketContext)
+}
+
+export const WebSocketProvider = ({ children }) => {
+  const webSocketState = useWebSocket()
+
+  return (
+    <WebSocketContext.Provider value={webSocketState}>
+      {children}
+    </WebSocketContext.Provider>
+  )
+}
+
+export default WebSocketProvider