From 95cfe16676976e10f52d5afbc3410a5e86562dd9 Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Wed, 28 Jun 2023 08:57:57 +0200
Subject: [PATCH] Add background notif text to subscribe dialog

only when web push is enabled
---
 web/public/static/langs/en.json        |  1 +
 web/src/components/SubscribeDialog.jsx | 23 +++++++++++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json
index 296124de..45ea629a 100644
--- a/web/public/static/langs/en.json
+++ b/web/public/static/langs/en.json
@@ -171,6 +171,7 @@
   "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_use_another_background_info": "Note: Background notifications are not supported on other servers",
   "subscribe_dialog_subscribe_base_url_label": "Service URL",
   "subscribe_dialog_subscribe_button_generate_topic_name": "Generate name",
   "subscribe_dialog_subscribe_button_cancel": "Cancel",
diff --git a/web/src/components/SubscribeDialog.jsx b/web/src/components/SubscribeDialog.jsx
index e777d873..09879e33 100644
--- a/web/src/components/SubscribeDialog.jsx
+++ b/web/src/components/SubscribeDialog.jsx
@@ -14,6 +14,7 @@ import {
   Switch,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { useLiveQuery } from "dexie-react-hooks";
 import theme from "./theme";
 import api from "../app/Api";
 import { randomAlphanumericString, topicUrl, validTopic, validUrl } from "../app/utils";
@@ -28,6 +29,7 @@ import ReserveTopicSelect from "./ReserveTopicSelect";
 import { AccountContext } from "./App";
 import { TopicReservedError, UnauthorizedError } from "../app/errors";
 import { ReserveLimitChip } from "./SubscriptionPopup";
+import prefs from "../app/Prefs";
 
 const publicBaseUrl = "https://ntfy.sh";
 
@@ -96,6 +98,8 @@ const SubscribePage = (props) => {
   const reserveTopicEnabled =
     session.exists() && (account?.role === Role.ADMIN || (account?.role === Role.USER && (account?.stats.reservations_remaining || 0) > 0));
 
+  const webPushEnabled = useLiveQuery(() => prefs.webPushEnabled());
+
   const handleSubscribe = async () => {
     const user = await userManager.get(baseUrl); // May be undefined
     const username = user ? user.username : t("subscribe_dialog_error_user_anonymous");
@@ -233,12 +237,19 @@ const SubscribePage = (props) => {
                 inputValue={props.baseUrl}
                 onInputChange={updateBaseUrl}
                 renderInput={(params) => (
-                  <TextField
-                    {...params}
-                    placeholder={config.base_url}
-                    variant="standard"
-                    aria-label={t("subscribe_dialog_subscribe_base_url_label")}
-                  />
+                  <>
+                    <TextField
+                      {...params}
+                      placeholder={config.base_url}
+                      variant="standard"
+                      aria-label={t("subscribe_dialog_subscribe_base_url_label")}
+                    />
+                    {webPushEnabled && (
+                      <div style={{ width: "100%", color: "#aaa", fontSize: "0.75rem", marginTop: "0.5rem" }}>
+                        {t("subscribe_dialog_subscribe_use_another_background_info")}
+                      </div>
+                    )}
+                  </>
                 )}
               />
             )}