"Limit reached" chips

web/public/static/langs/en.json

@@ -22,6 +22,7 @@
   "action_bar_reservation_add": "Reserve topic",
   "action_bar_reservation_edit": "Change reservation",
   "action_bar_reservation_delete": "Remove reservation",
+  "action_bar_reservation_limit_reached": "Limit reached",
   "action_bar_send_test_notification": "Send test notification",
   "action_bar_clear_notifications": "Clear all notifications",
   "action_bar_unsubscribe": "Unsubscribe",

web/src/components/SubscribeDialog.js

@@ -6,7 +6,7 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import {Autocomplete, Checkbox, FormControlLabel, FormGroup, useMediaQuery} from "@mui/material";
+import {Autocomplete, Checkbox, Chip, FormControlLabel, FormGroup, useMediaQuery} from "@mui/material";
 import theme from "./theme";
 import api from "../app/Api";
 import {randomAlphanumericString, topicUrl, validTopic, validUrl} from "../app/utils";
@@ -178,7 +178,12 @@ const SubscribePage = (props) => {
                                     }}
                                 />
                             }
-                            label={t("reserve_dialog_checkbox_label")}
+                            label={
+                                <>
+                                    {t("reserve_dialog_checkbox_label")}
+                                    <Chip label={t("action_bar_reservation_limit_reached")} variant="outlined" color="primary" sx={{ opacity: 0.8, borderWidth: "2px", height: "24px", marginLeft: "5px" }}/>
+                                </>
+                            }
                         />
                         {reserveTopicVisible &&
                             <ReserveTopicSelect

web/src/components/SubscriptionPopup.js

@@ -6,7 +6,7 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import {InputAdornment, Portal, Snackbar, useMediaQuery} from "@mui/material";
+import {Chip, InputAdornment, Portal, Snackbar, useMediaQuery} from "@mui/material";
 import theme from "./theme";
 import subscriptionManager from "../app/SubscriptionManager";
 import DialogFooter from "./DialogFooter";
@@ -24,6 +24,7 @@ import {Clear} from "@mui/icons-material";
 import {AccountContext} from "./App";
 import {ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog} from "./ReserveDialogs";
 import {UnauthorizedError} from "../app/errors";
+import Box from "@mui/material/Box";
 
 const SubscriptionPopup = (props) => {
     const { t } = useTranslation();
@@ -137,7 +138,12 @@ const SubscriptionPopup = (props) => {
             >
                 <MenuItem onClick={handleChangeDisplayName}>{t("action_bar_change_display_name")}</MenuItem>
                 {showReservationAdd && <MenuItem onClick={handleReserveAdd}>{t("action_bar_reservation_add")}</MenuItem>}
-                {showReservationAddDisabled && <MenuItem disabled={true}>{t("action_bar_reservation_add")}</MenuItem>}
+                {showReservationAddDisabled &&
+                    <MenuItem sx={{ cursor: "default" }}>
+                        <span style={{ opacity: 0.3 }}>{t("action_bar_reservation_add")}</span>
+                        <Chip label={t("action_bar_reservation_limit_reached")} variant="outlined" color="primary" sx={{ opacity: 0.8, borderWidth: "2px", height: "24px", marginLeft: "5px" }}/>
+                    </MenuItem>
+                }
                 {showReservationEdit && <MenuItem onClick={handleReserveEdit}>{t("action_bar_reservation_edit")}</MenuItem>}
                 {showReservationDelete && <MenuItem onClick={handleReserveDelete}>{t("action_bar_reservation_delete")}</MenuItem>}
                 <MenuItem onClick={handleSendTestMessage}>{t("action_bar_send_test_notification")}</MenuItem>