98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
import { AppBar, Toolbar, Typography, IconButton, Box, Chip } from '@mui/material';
|
|
import LockIcon from '@mui/icons-material/Lock';
|
|
import LockOpenIcon from '@mui/icons-material/LockOpen';
|
|
import SignalWifiStatusbar4BarIcon from '@mui/icons-material/SignalWifiStatusbar4Bar';
|
|
import SignalWifiOffIcon from '@mui/icons-material/SignalWifiOff';
|
|
import { useSessionStore } from '../store/sessionStore';
|
|
|
|
const Header = () => {
|
|
const {
|
|
isSessionUnlocked,
|
|
currentKeyspace,
|
|
currentKeypair,
|
|
isWebSocketConnected,
|
|
lockSession
|
|
} = useSessionStore();
|
|
|
|
const handleLockClick = async () => {
|
|
if (isSessionUnlocked) {
|
|
await lockSession();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AppBar position="static" color="primary" elevation={0}>
|
|
<Toolbar>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Hero Vault
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
|
{/* WebSocket connection status */}
|
|
{isWebSocketConnected ? (
|
|
<Chip
|
|
icon={<SignalWifiStatusbar4BarIcon fontSize="small" />}
|
|
label="Connected"
|
|
size="small"
|
|
color="success"
|
|
variant="outlined"
|
|
/>
|
|
) : (
|
|
<Chip
|
|
icon={<SignalWifiOffIcon fontSize="small" />}
|
|
label="Offline"
|
|
size="small"
|
|
color="default"
|
|
variant="outlined"
|
|
/>
|
|
)}
|
|
|
|
{/* Session status */}
|
|
{isSessionUnlocked ? (
|
|
<Chip
|
|
icon={<LockOpenIcon fontSize="small" />}
|
|
label={currentKeyspace || 'Unlocked'}
|
|
size="small"
|
|
color="primary"
|
|
variant="outlined"
|
|
/>
|
|
) : (
|
|
<Chip
|
|
icon={<LockIcon fontSize="small" />}
|
|
label="Locked"
|
|
size="small"
|
|
color="error"
|
|
variant="outlined"
|
|
/>
|
|
)}
|
|
|
|
{/* Current keypair */}
|
|
{isSessionUnlocked && currentKeypair && (
|
|
<Chip
|
|
label={currentKeypair.name || currentKeypair.id}
|
|
size="small"
|
|
color="secondary"
|
|
variant="outlined"
|
|
/>
|
|
)}
|
|
|
|
{/* Lock button */}
|
|
{isSessionUnlocked && (
|
|
<IconButton
|
|
edge="end"
|
|
color="inherit"
|
|
onClick={handleLockClick}
|
|
size="small"
|
|
aria-label="lock session"
|
|
>
|
|
<LockIcon />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default Header;
|