Add "new" badge and title

web/src/components/App.js

@@ -46,6 +46,7 @@ const Root = () => {
     const users = useLiveQuery(() => userManager.all());
     const subscriptions = useLiveQuery(() => subscriptionManager.all());
     const selectedSubscription = findSelected(location, subscriptions);
+    const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0;
 
     useWorkers();
     useConnectionListeners();
@@ -54,6 +55,11 @@ const Root = () => {
         connectionManager.refresh(subscriptions, users);
     }, [subscriptions, users]); // Dangle!
 
+    useEffect(() => {
+        console.log(`hello ${newNotificationsCount}`)
+        document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy web` : "ntfy web";
+    }, [newNotificationsCount]);
+
     return (
         <Box sx={{display: 'flex'}}>
             <CssBaseline/>

web/src/components/Navigation.js

@@ -12,12 +12,13 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import HomeIcon from '@mui/icons-material/Home';
 import AddIcon from "@mui/icons-material/Add";
 import SubscribeDialog from "./SubscribeDialog";
-import {Alert, AlertTitle, CircularProgress, ListSubheader} from "@mui/material";
+import {Alert, AlertTitle, Badge, CircularProgress, ListSubheader} from "@mui/material";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import {subscriptionRoute, topicShortUrl, topicUrl} from "../app/utils";
 import {ConnectionState} from "../app/Connection";
 import {useLocation, useNavigate} from "react-router-dom";
+import subscriptionManager from "../app/SubscriptionManager";
 
 const navWidth = 240;
 
@@ -134,12 +135,16 @@ const SubscriptionItem = (props) => {
     const subscription = props.subscription;
     const icon = (subscription.state === ConnectionState.Connecting)
         ? <CircularProgress size="24px"/>
-        : <ChatBubbleOutlineIcon/>;
+        : <Badge badgeContent={subscription.new} invisible={subscription.new === 0} color="primary"><ChatBubbleOutlineIcon/></Badge>;
     const label = (subscription.baseUrl === window.location.origin)
         ? subscription.topic
         : topicShortUrl(subscription.baseUrl, subscription.topic);
+    const handleClick = async () => {
+        navigate(subscriptionRoute(subscription));
+        await subscriptionManager.markNotificationsRead(subscription.id);
+    };
     return (
-        <ListItemButton onClick={() => navigate(subscriptionRoute(subscription))} selected={props.selected}>
+        <ListItemButton onClick={handleClick} selected={props.selected}>
             <ListItemIcon>{icon}</ListItemIcon>
             <ListItemText primary={label}/>
         </ListItemButton>

web/src/components/Notifications.js

@@ -80,6 +80,10 @@ const NotificationItem = (props) => {
                             alt={`Priority ${notification.priority}`}
                             style={{ verticalAlign: 'bottom' }}
                         />}
+                    {notification.new === 1 &&
+                        <svg style={{ width: '8px', height: '8px', marginLeft: '4px' }} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="50" cy="50" r="50" fill="#338574"/>
+                        </svg>}
                 </Typography>
                 {notification.title && <Typography variant="h5" component="div">{formatTitle(notification)}</Typography>}
                 <Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{formatMessage(notification)}</Typography>