Small refactor

web/public/static/langs/en.json

@@ -29,6 +29,8 @@
   "action_bar_reservation_limit_reached": "Limit reached",
   "action_bar_send_test_notification": "Send test notification",
   "action_bar_clear_notifications": "Clear all notifications",
+  "action_bar_mute_notifications": "Mute notifications",
+  "action_bar_unmute_notifications": "Unmute notifications",
   "action_bar_unsubscribe": "Unsubscribe",
   "action_bar_toggle_mute": "Mute/unmute notifications",
   "action_bar_toggle_action_menu": "Open/close action menu",
@@ -95,9 +97,6 @@
   "notifications_no_subscriptions_description": "Click the \"{{linktext}}\" link to create or subscribe to a topic. After that, you can send messages via PUT or POST and you'll receive notifications here.",
   "notifications_example": "Example",
   "notifications_more_details": "For more information, check out the <websiteLink>website</websiteLink> or <docsLink>documentation</docsLink>.",
-  "notification_toggle_mute": "Mute",
-  "notification_toggle_unmute": "Unmute",
-  "notification_toggle_background": "Background notifications",
   "display_name_dialog_title": "Change display name",
   "display_name_dialog_description": "Set an alternative name for a topic that is displayed in the subscription list. This helps identify topics with complicated names more easily.",
   "display_name_dialog_placeholder": "Display name",
@@ -170,7 +169,6 @@
   "subscribe_dialog_subscribe_description": "Topics may not be password-protected, so choose a name that's not easy to guess. Once subscribed, you can PUT/POST notifications.",
   "subscribe_dialog_subscribe_topic_placeholder": "Topic name, e.g. phil_alerts",
   "subscribe_dialog_subscribe_use_another_label": "Use another server",
-  "subscribe_dialog_subscribe_enable_background_notifications_label": "Enable background notifications (web push)",
   "subscribe_dialog_subscribe_base_url_label": "Service URL",
   "subscribe_dialog_subscribe_button_generate_topic_name": "Generate name",
   "subscribe_dialog_subscribe_button_cancel": "Cancel",
@@ -370,8 +368,8 @@
   "prefs_reservations_dialog_description": "Reserving a topic gives you ownership over the topic, and allows you to define access permissions for other users over the topic.",
   "prefs_reservations_dialog_topic_label": "Topic",
   "prefs_reservations_dialog_access_label": "Access",
-  "prefs_notifications_web_push_title": "Enable web push notifications",
-  "prefs_notifications_web_push_description": "Enable this to receive notifications in the background even when ntfy isn't running",
+  "prefs_notifications_web_push_title": "Background notifications",
+  "prefs_notifications_web_push_description": "Receive notifications in the background via Web Push, even when app is not running",
   "prefs_notifications_web_push_enabled": "Enabled",
   "prefs_notifications_web_push_disabled": "Disabled",
   "reservation_delete_dialog_description": "Removing a reservation gives up ownership over the topic, and allows others to reserve it. You can keep, or delete existing messages and attachments.",

web/src/components/Preferences.jsx

@@ -242,11 +242,6 @@ const WebPushEnabled = () => {
     await prefs.setWebPushEnabled(ev.target.value);
   };
 
-  // while loading
-  if (defaultEnabled == null) {
-    return null;
-  }
-
   if (!notifier.pushPossible()) {
     return null;
   }
@@ -254,7 +249,7 @@ const WebPushEnabled = () => {
   return (
     <Pref labelId={labelId} title={t("prefs_notifications_web_push_title")} description={t("prefs_notifications_web_push_description")}>
       <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
-        <Select value={defaultEnabled} onChange={handleChange} aria-labelledby={labelId}>
+        <Select value={defaultEnabled ?? false} onChange={handleChange} aria-labelledby={labelId}>
           <MenuItem value>{t("prefs_notifications_web_push_enabled")}</MenuItem>
           <MenuItem value={false}>{t("prefs_notifications_web_push_disabled")}</MenuItem>
         </Select>

web/src/components/SubscriptionPopup.jsx

@@ -142,6 +142,10 @@ export const SubscriptionPopup = (props) => {
     await subscriptionManager.deleteNotifications(props.subscription.id);
   };
 
+  const handleSetMutedUntil = async (mutedUntil) => {
+    await subscriptionManager.setMutedUntil(subscription.id, mutedUntil);
+  };
+
   const handleUnsubscribe = async () => {
     console.log(`[SubscriptionPopup] Unsubscribing from ${props.subscription.id}`, props.subscription);
     await subscriptionManager.remove(props.subscription);
@@ -166,8 +170,6 @@ export const SubscriptionPopup = (props) => {
   return (
     <>
       <PopupMenu horizontal={placement} anchorEl={props.anchor} open={!!props.anchor} onClose={props.onClose}>
-        <NotificationToggle subscription={subscription} />
-
         <MenuItem onClick={handleChangeDisplayName}>
           <ListItemIcon>
             <Edit fontSize="small" />
@@ -198,7 +200,6 @@ export const SubscriptionPopup = (props) => {
             <ListItemIcon>
               <EnhancedEncryption fontSize="small" />
             </ListItemIcon>
-
             {t("action_bar_reservation_edit")}
           </MenuItem>
         )}
@@ -207,7 +208,6 @@ export const SubscriptionPopup = (props) => {
             <ListItemIcon>
               <LockOpen fontSize="small" />
             </ListItemIcon>
-
             {t("action_bar_reservation_delete")}
           </MenuItem>
         )}
@@ -215,21 +215,34 @@ export const SubscriptionPopup = (props) => {
           <ListItemIcon>
             <Send fontSize="small" />
           </ListItemIcon>
-
           {t("action_bar_send_test_notification")}
         </MenuItem>
         <MenuItem onClick={handleClearAll}>
           <ListItemIcon>
             <ClearAll fontSize="small" />
           </ListItemIcon>
-
           {t("action_bar_clear_notifications")}
         </MenuItem>
+        {!!subscription.mutedUntil && (
+          <MenuItem onClick={() => handleSetMutedUntil(0)}>
+            <ListItemIcon>
+              <Notifications fontSize="small" />
+            </ListItemIcon>
+            {t("action_bar_unmute_notifications")}
+          </MenuItem>
+        )}
+        {!subscription.mutedUntil && (
+          <MenuItem onClick={() => handleSetMutedUntil(1)}>
+            <ListItemIcon>
+              <NotificationsOff fontSize="small" />
+            </ListItemIcon>
+            {t("action_bar_mute_notifications")}
+          </MenuItem>
+        )}
         <MenuItem onClick={handleUnsubscribe}>
           <ListItemIcon>
             <RemoveCircle fontSize="small" />
           </ListItemIcon>
-
           {t("action_bar_unsubscribe")}
         </MenuItem>
       </PopupMenu>
@@ -331,31 +344,6 @@ const DisplayNameDialog = (props) => {
   );
 };
 
-const NotificationToggle = ({ subscription }) => {
-  const { t } = useTranslation();
-
-  const handleToggleMute = async () => {
-    const mutedUntil = subscription.mutedUntil ? 0 : 1; // Make this a timestamp in the future
-    await subscriptionManager.setMutedUntil(subscription.id, mutedUntil);
-  };
-
-  return subscription.mutedUntil ? (
-    <MenuItem onClick={handleToggleMute}>
-      <ListItemIcon>
-        <Notifications />
-      </ListItemIcon>
-      {t("notification_toggle_unmute")}
-    </MenuItem>
-  ) : (
-    <MenuItem onClick={handleToggleMute}>
-      <ListItemIcon>
-        <NotificationsOff />
-      </ListItemIcon>
-      {t("notification_toggle_mute")}
-    </MenuItem>
-  );
-};
-
 export const ReserveLimitChip = () => {
   const { account } = useContext(AccountContext);
   if (account?.role === Role.ADMIN || account?.stats.reservations_remaining > 0) {