From 8237691d9afd3db7121a60d3aaa41b15ba65c213 Mon Sep 17 00:00:00 2001
From: Thor Galle <thorgalle@gmail.com>
Date: Wed, 11 Oct 2023 15:23:55 +0300
Subject: [PATCH] copy: notfication copy improvements

---
 src/locales/en.json                           |  4 +-
 src/locales/fr.json                           |  4 +-
 src/locales/nl.json                           |  4 +-
 src/routes/account/NotificationSection.svelte | 50 +++++++++++++------
 4 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 8b29363d..935ab7ce 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1025,7 +1025,7 @@
       }
     },
     "notifications": {
-      "manage": "You can manage your mobile notifications here.",
+      "manage": "Manage your active mobile notifications",
       "title": "Mobile Notifications",
       "delete": "Delete",
       "turn-on": "Turn on notifications",
@@ -1499,7 +1499,7 @@
       "garden-enable": "Would you also like to receive <strong>mobile notifications</strong> for new chat messages?",
       "garden-ios-home": "To turn on just <strong>add</strong> the <strong>WTMG</strong> website to your <strong>home screen</strong> in a few easy steps.",
       "ios-installed": "Never miss a message by turning on mobile notifications!",
-      "ios-installed-title": "New: mobile notifications!",
+      "ios-installed-title": "Mobile notifications",
       "btn-show-me": "Show me how",
       "btn-turn-on": "Turn on notifications",
       "follow-up-desktop": "Would yo like to receive <strong>mobile notifications</strong> for new chat messages?",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 4ff3b7ee..fd3efb96 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1027,7 +1027,7 @@
       "current": "Cet appareil",
       "turn-on": "Activez les notifications",
       "title": "Notifications mobiles",
-      "manage": "Vous pouvez gérer vos notifications mobiles ici.",
+      "manage": "Vous pouvez gérer vos notifications mobiles ici",
       "unsupported-ios": "<p>Oups ! Votre version iOS ne prend pas en charge les notifications mobiles. Pour les activer, <strong>mettez à jour votre</strong> version iOS (Réglages > Général > Mise à jour logicielle).</p><p>Si vous ne pouvez pas la mettre à jour vers la version <strong>16.4 ou plus</strong>, votre appareil ne prend alors pas en charge nos notifications mobiles.</p>",
       "unsupported-android": "Oups ! Votre navigateur ne prend pas en charge les notifications mobiles. Ouvrez WTMG dans un <strong>autre navigateur</strong> pour les activer."
     }
@@ -1505,7 +1505,7 @@
       "btn-show-me": "Montrez-moi comment",
       "btn-turn-on": "Activez les notifications",
       "ios-installed": "Ne ratez jamais un message en activant maintenant vos notifications mobiles !",
-      "ios-installed-title": "Nouveau : notifications mobiles",
+      "ios-installed-title": "Notifications mobiles",
       "title": "Recevez une notification mobile pour vos nouveaux messages.",
       "helpcenter-url": "https://aide.welcometomygarden.org/master/1.-notifications-mobiles"
     }
diff --git a/src/locales/nl.json b/src/locales/nl.json
index 1a76899c..b23b5036 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -643,7 +643,7 @@
       "ios16-check": "of je kan updaten",
       "current": "Dit apparaat",
       "title": "Mobiele meldingen",
-      "manage": "Je kan hier je mobiele meldingen beheren.",
+      "manage": "Beheer jouw actieve mobile meldingen",
       "turn-on": "Zet meldingen aan",
       "unsupported-ios": "<p>Oeps! Je huidige iOS-versie ondersteunt geen mobiele meldingen. Om ze aan te zetten, <strong>update je iOS-versie</strong> (Instellingen > Algemeen > Software-update).</p><p>Als je niet kan updaten naar versie <strong>16.4 of hoger</strong>, betekent dit helaas dat je toestel onze mobiele meldingen niet ondersteunt.</p>",
       "unsupported-android": "Oeps! Deze browser ondersteunt geen mobiele meldingen. Open WTMG in een <strong>andere browser</strong> om ze aan te zetten."
@@ -1509,7 +1509,7 @@
       "btn-turn-on": "Zet meldingen aan",
       "follow-up-desktop": "Wil je <strong>mobiele meldingen</strong> ontvangen voor nieuwe chatberichten?",
       "ios-installed": "Mis geen enkel bericht door je mobiele meldingen aan te zetten!",
-      "ios-installed-title": "Nieuw: mobiele meldingen!",
+      "ios-installed-title": "Mobiele meldingen",
       "title": "Krijg een mobiele melding voor nieuwe chatberichten.",
       "helpcenter-url": "https://hulp.welcometomygarden.org/master/1.-mobiele-meldingen"
     }
diff --git a/src/routes/account/NotificationSection.svelte b/src/routes/account/NotificationSection.svelte
index c9104f09..2cffe521 100644
--- a/src/routes/account/NotificationSection.svelte
+++ b/src/routes/account/NotificationSection.svelte
@@ -42,22 +42,35 @@
   {#if !isMobileDevice && $loadedPushRegistrations && $pushRegistrations.length === 0 && $currentNativeSubStore === null}
     <!-- Show desktop suggestion banner -->
     <NotificationPrompt permanent />
-  {:else if ($loadedPushRegistrations && $pushRegistrations.length > 0) || (isMobileDevice && isNotificationEligible())}
-    <ul>
-      <!-- Show options for the current device if it supports notifications, including current sub options -->
-      {#if $loadedPushRegistrations && isMobileDevice && isNotificationEligible()}
-        <li>
-          <PushRegistrationEntry
-            pushRegistration={currentActivePushRegistration}
-            currentSub={$currentNativeSubStore}
-          />
-        </li>
-      {/if}
+  {:else if (isMobileDevice && isNotificationEligible()) || ($loadedPushRegistrations && otherSubscriptions.length > 0)}
+    <!-- Show options for the current device if it supports notifications, including current sub options -->
+
+    <!-- Show the current device on top, if it's not activated yet -->
+    {#if isMobileDevice && isNotificationEligible() && !currentActivePushRegistration}
+      <PushRegistrationEntry
+        pushRegistration={currentActivePushRegistration}
+        currentSub={$currentNativeSubStore}
+      />
+    {/if}
+    <!-- Show the title for managing active push registration, if any are active (current or not) -->
+    {#if otherSubscriptions.length > 0 || !!currentActivePushRegistration}
+      <h3>{$_('account.notifications.manage')}</h3>
       <!-- Show other push registrations if available (also on desktop)-->
-      {#each otherSubscriptions as pushRegistration (pushRegistration.id)}
-        <li><PushRegistrationEntry {pushRegistration} currentSub={$currentNativeSubStore} /></li>
-      {/each}
-    </ul>
+      <ul>
+        <!-- Show the current active push registration as part of the -->
+        {#if currentActivePushRegistration}
+          <li>
+            <PushRegistrationEntry
+              pushRegistration={currentActivePushRegistration}
+              currentSub={$currentNativeSubStore}
+            />
+          </li>
+        {/if}
+        {#each otherSubscriptions as pushRegistration (pushRegistration.id)}
+          <li><PushRegistrationEntry {pushRegistration} currentSub={$currentNativeSubStore} /></li>
+        {/each}
+      </ul>
+    {/if}
   {/if}
   {#if isMobileDevice && !isNotificationEligible()}
     {#if isIDevice}
@@ -94,12 +107,19 @@ This normally shouldn't happen, except when a database was wiped (in testing) --
   section {
     margin: 2rem 0 4rem 0;
   }
+
   h2 {
     margin-bottom: 2rem;
     font-weight: 500;
     font-size: 1.8rem;
   }
 
+  h3 {
+    font-size: 1.6rem;
+    line-height: 1.4;
+    margin: 3rem 0 1rem 0;
+  }
+
   /* dividers */
   li:not(:last-of-type)::after {
     content: '';