Mute button

web/src/app/Notifier.js

@@ -22,7 +22,7 @@ class Notifier {
         if (notification.click) {
             n.onclick = (e) => openUrl(notification.click);
         } else {
-            n.onclick = onClickFallback;
+            n.onclick = () => onClickFallback(subscription);
         }
 
         // Play sound
@@ -51,6 +51,9 @@ class Notifier {
     }
 
     async shouldNotify(subscription, notification) {
+        if (subscription.mutedUntil === 1) {
+            return false;
+        }
         const priority = (notification.priority) ? notification.priority : 3;
         const minPriority = await prefs.minPriority();
         if (priority < minPriority) {

web/src/app/SubscriptionManager.js

@@ -23,6 +23,7 @@ class SubscriptionManager {
             baseUrl: baseUrl,
             topic: topic,
             ephemeral: ephemeral,
+            mutedUntil: 0,
             last: null
         };
         await db.subscriptions.put(subscription);
@@ -108,6 +109,12 @@ class SubscriptionManager {
             .modify({new: 0});
     }
 
+    async setMutedUntil(subscriptionId, mutedUntil) {
+        await db.subscriptions.update(subscriptionId, {
+            mutedUntil: mutedUntil
+        });
+    }
+
     async pruneNotifications(thresholdTimestamp) {
         await db.notifications
             .where("time").below(thresholdTimestamp)

web/src/components/ActionBar.js

@@ -16,6 +16,8 @@ import Popper from '@mui/material/Popper';
 import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import MoreVertIcon from "@mui/icons-material/MoreVert";
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
 import api from "../app/Api";
 import subscriptionManager from "../app/SubscriptionManager";
 
@@ -50,25 +52,32 @@ const ActionBar = (props) => {
                 <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
                     {title}
                 </Typography>
-                {props.selected && <SettingsIcon
+                {props.selected &&
-                    subscription={props.selected}
+                    <SettingsIcons
-                    onUnsubscribe={props.onUnsubscribe}
+                        subscription={props.selected}
-                />}
+                        onUnsubscribe={props.onUnsubscribe}
+                    />}
             </Toolbar>
         </AppBar>
     );
 };
 
 // Originally from https://mui.com/components/menus/#MenuListComposition.js
-const SettingsIcon = (props) => {
+const SettingsIcons = (props) => {
     const navigate = useNavigate();
     const [open, setOpen] = useState(false);
     const anchorRef = useRef(null);
+    const subscription = props.subscription;
 
-    const handleToggle = () => {
+    const handleToggleOpen = () => {
         setOpen((prevOpen) => !prevOpen);
     };
 
+    const handleToggleMute = async () => {
+        const mutedUntil = (subscription.mutedUntil) ? 0 : 1; // Make this a timestamp in the future
+        await subscriptionManager.setMutedUntil(subscription.id, mutedUntil);
+    }
+
     const handleClose = (event) => {
         if (anchorRef.current && anchorRef.current.contains(event.target)) {
             return;
@@ -122,14 +131,10 @@ const SettingsIcon = (props) => {
 
     return (
         <>
-            <IconButton
+            <IconButton color="inherit" size="large" edge="end" onClick={handleToggleMute} sx={{marginRight: 0}}>
-                color="inherit"
+                {subscription.mutedUntil ? <NotificationsOffIcon/> : <NotificationsIcon/>}
-                size="large"
+            </IconButton>
-                edge="end"
+            <IconButton color="inherit" size="large" edge="end" ref={anchorRef} onClick={handleToggleOpen}>
-                ref={anchorRef}
-                id="composition-button"
-                onClick={handleToggle}
-            >
                 <MoreVertIcon/>
             </IconButton>
             <Popper
@@ -143,10 +148,7 @@ const SettingsIcon = (props) => {
                 {({TransitionProps, placement}) => (
                     <Grow
                         {...TransitionProps}
-                        style={{
+                        style={{transformOrigin: placement === 'bottom-start' ? 'left top' : 'left bottom'}}
-                            transformOrigin:
-                                placement === 'bottom-start' ? 'left top' : 'left bottom',
-                        }}
                     >
                         <Paper>
                             <ClickAwayListener onClickAway={handleClose}>

web/src/components/Navigation.js

@@ -18,11 +18,11 @@ import {subscriptionRoute, topicShortUrl, topicUrl} from "../app/utils";
 import {ConnectionState} from "../app/Connection";
 import {useLocation, useNavigate} from "react-router-dom";
 import subscriptionManager from "../app/SubscriptionManager";
-import {ChatBubble} from "@mui/icons-material";
+import {ChatBubble, NotificationsOffOutlined} from "@mui/icons-material";
 import Box from "@mui/material/Box";
 import notifier from "../app/Notifier";
 
-const navWidth = 240;
+const navWidth = 280;
 
 const Navigation = (props) => {
     const navigationList = <NavList {...props}/>;
@@ -159,6 +159,8 @@ const SubscriptionItem = (props) => {
         <ListItemButton onClick={handleClick} selected={props.selected}>
             <ListItemIcon>{icon}</ListItemIcon>
             <ListItemText primary={label}/>
+            {subscription.mutedUntil > 0 &&
+                <ListItemIcon edge="end"><NotificationsOffOutlined /></ListItemIcon>}
         </ListItemButton>
     );
 };