diff --git a/gadget-code/frontend/src/App.tsx b/gadget-code/frontend/src/App.tsx index 113e9ab..cd32c76 100644 --- a/gadget-code/frontend/src/App.tsx +++ b/gadget-code/frontend/src/App.tsx @@ -51,7 +51,7 @@ interface AppContextType { onSignOut: () => void; } -const AppContext = createContext(null); +export const AppContext = createContext(null); export function useAppContext(): AppContextType { const ctx = useContext(AppContext); diff --git a/gadget-code/frontend/src/components/StatusBar.tsx b/gadget-code/frontend/src/components/StatusBar.tsx index 86442ed..183fe88 100644 --- a/gadget-code/frontend/src/components/StatusBar.tsx +++ b/gadget-code/frontend/src/components/StatusBar.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; import { socketClient } from '../lib/socket'; export type ConnectionStatus = 'connected' | 'connecting' | 'error' | 'disconnected'; @@ -33,6 +33,25 @@ function ConnectionIndicator({ status }: { status: ConnectionStatus }) { export default function StatusBar({ statusMessage = 'Ready.', projectSlug, sessionMode }: StatusBarProps) { const [connectionStatus, setConnectionStatus] = useState('disconnected'); + const [displayMessage, setDisplayMessage] = useState(statusMessage); + const clearTimerRef = useRef | null>(null); + + useEffect(() => { + if (clearTimerRef.current) { + clearTimeout(clearTimerRef.current); + } + + setDisplayMessage(statusMessage); + clearTimerRef.current = setTimeout(() => { + setDisplayMessage(''); + }, 10000); + + return () => { + if (clearTimerRef.current) { + clearTimeout(clearTimerRef.current); + } + }; + }, [statusMessage]); useEffect(() => { const updateStatus = () => { @@ -59,7 +78,7 @@ export default function StatusBar({ statusMessage = 'Ready.', projectSlug, sessi return (