156 lines
4.0 KiB
TypeScript
156 lines
4.0 KiB
TypeScript
import {
|
||
Alert,
|
||
Box,
|
||
Snackbar,
|
||
Button,
|
||
Stack,
|
||
Typography,
|
||
Paper,
|
||
} from '@mui/material';
|
||
import { useEffect, useState } from 'react';
|
||
import { styled, alpha, keyframes } from '@mui/material/styles';
|
||
|
||
export const GRADIENT =
|
||
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
|
||
|
||
const glowPulse = keyframes`
|
||
0% { opacity: .6 }
|
||
50% { opacity: 1 }
|
||
100% { opacity: .6 }
|
||
`;
|
||
|
||
export const GlassCard = styled(Paper)(() => ({
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
borderRadius: 18,
|
||
background: 'rgba(0,0,0,0.45)',
|
||
border: '1px solid rgba(255,255,255,0.12)',
|
||
backdropFilter: 'blur(14px)',
|
||
boxShadow: '0 16px 40px rgba(0,0,0,0.45)',
|
||
}));
|
||
|
||
export const Glow = styled('div')(() => ({
|
||
position: 'absolute',
|
||
inset: -2,
|
||
background:
|
||
'radial-gradient(400px 120px at 10% 0%, rgba(242,113,33,0.25), transparent 60%),' +
|
||
'radial-gradient(400px 120px at 90% 0%, rgba(233,64,205,0.25), transparent 60%)',
|
||
pointerEvents: 'none',
|
||
animation: `${glowPulse} 5s ease-in-out infinite`,
|
||
}));
|
||
|
||
export const GradientButton = styled(Button)(() => ({
|
||
background: GRADIENT,
|
||
borderRadius: 999,
|
||
textTransform: 'none',
|
||
fontWeight: 700,
|
||
'&:hover': {
|
||
background: GRADIENT,
|
||
filter: 'brightness(1.08)',
|
||
},
|
||
}));
|
||
|
||
export const SoftButton = styled(Button)(() => ({
|
||
borderRadius: 999,
|
||
textTransform: 'none',
|
||
color: '#fff',
|
||
border: '1px solid rgba(255,255,255,0.14)',
|
||
background: 'rgba(255,255,255,0.06)',
|
||
'&:hover': { background: 'rgba(255,255,255,0.1)' },
|
||
}));
|
||
|
||
type Severity = 'error' | 'warning' | 'info' | 'success';
|
||
|
||
const severityColor: Record<Severity, string> = {
|
||
info: '#4fc3f7',
|
||
success: '#4caf50',
|
||
warning: '#ff9800',
|
||
error: '#f44336',
|
||
};
|
||
|
||
export const Notifier = () => {
|
||
const [open, setOpen] = useState(false);
|
||
const [message, setMessage] = useState('');
|
||
const [severity, setSeverity] = useState<Severity>('info');
|
||
const [hasUpdateAvailable, setHasUpdateAvailable] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// Слушаем событие о наличии обновления
|
||
window.electron.ipcRenderer.on('update-available', () => {
|
||
setMessage('Доступно новое обновление');
|
||
setSeverity('info');
|
||
setHasUpdateAvailable(true);
|
||
setOpen(true);
|
||
});
|
||
|
||
return () => {
|
||
// Отписываемся от события при размонтировании
|
||
window.electron.ipcRenderer.removeAllListeners('update-available');
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (process.env.NODE_ENV === 'development') {
|
||
setMessage('Доступно новое обновление (dev preview)');
|
||
setSeverity('info');
|
||
setHasUpdateAvailable(true);
|
||
setOpen(true);
|
||
}
|
||
}, []);
|
||
|
||
const handleClose = () => {
|
||
setOpen(false);
|
||
};
|
||
|
||
const handleUpdate = () => {
|
||
window.electron.ipcRenderer.invoke('install-update');
|
||
setOpen(false);
|
||
};
|
||
|
||
return (
|
||
<Snackbar
|
||
open={open}
|
||
onClose={handleClose}
|
||
autoHideDuration={hasUpdateAvailable ? null : 5000}
|
||
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
||
>
|
||
<GlassCard sx={{ minWidth: 340 }}>
|
||
<Glow />
|
||
|
||
<Box
|
||
sx={{
|
||
p: 2,
|
||
position: 'relative',
|
||
gap: 1,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
color: 'rgba(255,255,255,0.82)',
|
||
fontSize: 13.5,
|
||
lineHeight: 1.35,
|
||
pr: hasUpdateAvailable ? 1 : 0,
|
||
}}
|
||
>
|
||
{message}
|
||
</Typography>
|
||
|
||
{hasUpdateAvailable && (
|
||
<Stack direction="row" spacing={1} justifyContent="center" gap={1}>
|
||
<SoftButton size="small" onClick={handleUpdate}>
|
||
Обновить
|
||
</SoftButton>
|
||
|
||
<SoftButton size="small" onClick={handleClose}>
|
||
Позже
|
||
</SoftButton>
|
||
</Stack>
|
||
)}
|
||
</Box>
|
||
</GlassCard>
|
||
</Snackbar>
|
||
);
|
||
};
|