Do not hide notification behind message bar

web/src/components/ActionBar.js

@@ -105,7 +105,7 @@ const SettingsIcons = (props) => {
         }
     };
 
-    const handleSendTestMessage = () => {
+    const handleSendTestMessage = async () => {
         const baseUrl = props.subscription.baseUrl;
         const topic = props.subscription.topic;
         const tags = shuffle([
@@ -135,11 +135,15 @@ const SettingsIcons = (props) => {
             `I'm really excited that you're trying out ntfy. Did you know that there are a few public topics, such as ntfy.sh/stats and ntfy.sh/announcements.`,
             `It's interesting to hear what people use ntfy for. I've heard people talk about using it for so many cool things. What do you use it for?`
         ])[0];
-        api.publish(baseUrl, topic, message, {
-            title: title,
-            priority: priority,
-            tags: tags
-        });
+        try {
+            await api.publish(baseUrl, topic, message, {
+                title: title,
+                priority: priority,
+                tags: tags
+            });
+        } catch (e) {
+            console.log(`[ActionBar] Error publishing message`, e);
+        }
         setOpen(false);
     }
 

web/src/components/Messaging.js

@@ -10,6 +10,7 @@ import api from "../app/Api";
 import SendDialog from "./SendDialog";
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import EmojiPicker from "./EmojiPicker";
+import {Portal, Snackbar} from "@mui/material";
 
 const Messaging = (props) => {
     const [message, setMessage] = useState("");
@@ -51,8 +52,14 @@ const Messaging = (props) => {
 
 const MessageBar = (props) => {
     const subscription = props.subscription;
-    const handleSendClick = () => {
-        api.publish(subscription.baseUrl, subscription.topic, props.message); // FIXME
+    const [snackOpen, setSnackOpen] = useState(false);
+    const handleSendClick = async () => {
+        try {
+            await api.publish(subscription.baseUrl, subscription.topic, props.message);
+        } catch (e) {
+            console.log(`[MessageBar] Error publishing message`, e);
+            setSnackOpen(true);
+        }
         props.onMessageChange("");
     };
     return (
@@ -64,7 +71,7 @@ const MessageBar = (props) => {
                 bottom: 0,
                 right: 0,
                 padding: 2,
-                width: `calc(100% - ${Navigation.width}px)`,
+                width: { xs: "100%", sm: `calc(100% - ${Navigation.width}px)` },
                 backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
             }}
         >
@@ -90,6 +97,14 @@ const MessageBar = (props) => {
             <IconButton color="inherit" size="large" edge="end" onClick={handleSendClick}>
                 <SendIcon/>
             </IconButton>
+            <Portal>
+                <Snackbar
+                    open={snackOpen}
+                    autoHideDuration={3000}
+                    onClose={() => setSnackOpen(false)}
+                    message="Error publishing message"
+                />
+            </Portal>
         </Paper>
     );
 };

web/src/components/Notifications.js

@@ -57,7 +57,7 @@ const AllSubscriptions = (props) => {
     } else if (notifications.length === 0) {
         return <NoNotificationsWithoutSubscription subscriptions={subscriptions}/>;
     }
-    return <NotificationList key="all" notifications={notifications}/>;
+    return <NotificationList key="all" notifications={notifications} messageBar={false}/>;
 }
 
 const SingleSubscription = (props) => {
@@ -68,7 +68,7 @@ const SingleSubscription = (props) => {
     } else if (notifications.length === 0) {
         return <NoNotifications subscription={subscription}/>;
     }
-    return <NotificationList id={subscription.id} notifications={notifications}/>;
+    return <NotificationList id={subscription.id} notifications={notifications} messageBar={true}/>;
 }
 
 const NotificationList = (props) => {
@@ -94,7 +94,13 @@ const NotificationList = (props) => {
             scrollThreshold={0.7}
             scrollableTarget="main"
         >
-            <Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
+            <Container
+                maxWidth="md"
+                sx={{
+                    marginTop: 3,
+                    marginBottom: (props.messageBar) ? "100px" : 3 // Hack to avoid hiding notifications behind the message bar
+                }}
+            >
                 <Stack spacing={3}>
                     {notifications.slice(0, count).map(notification =>
                         <NotificationItem