diff --git a/frontend/src/App.js b/frontend/src/App.js
index 914e13ac..257e209a 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -28,6 +28,7 @@ import Settings from './pages/Settings';
import StreamProfiles from './pages/StreamProfiles';
import useAuthStore from './store/auth';
import logo from './images/logo.png';
+import Alert from './components/Alert';
// NEW: import the floating PiP component
import FloatingVideo from './components/FloatingVideo';
@@ -110,8 +111,8 @@ const App = () => {
flexDirection: 'column',
ml: `${open ? drawerWidth : miniDrawerWidth}px`,
transition: 'width 0.3s, margin-left 0.3s',
- // height: '100vh',
backgroundColor: '#495057',
+ height: '100%',
}}
>
{
+ {/* Global Snackbar for system-wide messages */}
+
+
{/* Always-available floating video; remains visible across page changes */}
diff --git a/frontend/src/components/Alert.js b/frontend/src/components/Alert.js
new file mode 100644
index 00000000..8f625364
--- /dev/null
+++ b/frontend/src/components/Alert.js
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Snackbar, Alert, Button } from '@mui/material';
+import useAlertStore from '../store/alerts';
+
+const AlertPopup = () => {
+ const { open, message, severity, hideAlert } = useAlertStore();
+
+ const handleClose = () => {
+ hideAlert();
+ };
+
+ return (
+
+
+ {message}
+
+
+ );
+};
+
+export default AlertPopup;
diff --git a/frontend/src/components/forms/UserAgent.js b/frontend/src/components/forms/UserAgent.js
index 6f5f80c4..db13429f 100644
--- a/frontend/src/components/forms/UserAgent.js
+++ b/frontend/src/components/forms/UserAgent.js
@@ -1,5 +1,5 @@
// Modal.js
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
import {
TextField,
Button,
@@ -9,22 +9,23 @@ import {
DialogTitle,
DialogContent,
DialogActions,
-} from "@mui/material";
-import { useFormik } from "formik";
-import * as Yup from "yup";
-import API from "../../api";
+} from '@mui/material';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import API from '../../api';
+import useSettingsStore from '../../store/settings';
const UserAgent = ({ userAgent = null, isOpen, onClose }) => {
const formik = useFormik({
initialValues: {
- user_agent_name: "",
- user_agent: "",
- description: "",
+ user_agent_name: '',
+ user_agent: '',
+ description: '',
is_active: true,
},
validationSchema: Yup.object({
- user_agent_name: Yup.string().required("Name is required"),
- user_agent: Yup.string().required("User-Agent is required"),
+ user_agent_name: Yup.string().required('Name is required'),
+ user_agent: Yup.string().required('User-Agent is required'),
}),
onSubmit: async (values, { setSubmitting, resetForm }) => {
if (userAgent?.id) {
@@ -60,8 +61,8 @@ const UserAgent = ({ userAgent = null, isOpen, onClose }) => {