diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index cc43b4f..443a233 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -7,6 +7,7 @@ import Logo from './components/Logo'; import ThemeToggle from './components/ThemeToggle'; import InstallPrompt from './components/InstallPrompt'; import SafariInstallPrompt from './components/SafariInstallPrompt'; +import PresenceBar from './components/PresenceBar'; import Home from './pages/Home'; import Login from './pages/Login'; import Picker from './pages/Picker'; @@ -156,6 +157,9 @@ function App() { + {/* Admin Presence */} + + {/* Main Content */} diff --git a/frontend/src/components/PresenceBar.jsx b/frontend/src/components/PresenceBar.jsx new file mode 100644 index 0000000..844eb80 --- /dev/null +++ b/frontend/src/components/PresenceBar.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { usePresence } from '../hooks/usePresence'; +import { useAuth } from '../context/AuthContext'; + +function PresenceBar() { + const { isAuthenticated } = useAuth(); + const { viewers } = usePresence(); + + if (!isAuthenticated) return null; + + const otherViewers = viewers.filter(v => v !== 'me'); + if (otherViewers.length === 0) return null; + + return ( + + + + + who is watching + + + {viewers.map((name, i) => ( + + {name} + + ))} + + + + + ); +} + +export default PresenceBar;