fix(addons): consolidate install-doc, i18n, and UX fixes

Apply changes from PRs #190, #191, #193, #195, #196, #197, #199 on top
of #189 and #192. Specifically:
- Outlook: clarify add-in lives under Apps menu (#189)
- Outlook: NL terminology aligned with current Outlook UI (#190)
- Outlook: instruct user to restart after install (#191)
- Outlook: save manifest as manifest.xml via download attr (#193)
- Outlook: open aka.ms/olksideload in new tab (#196)
- Outlook: warn users when custom add-ins are blocked (#199)
- Thunderbird: clarify Manage Extensions cog icon (#195)
- Addons page: rerun {#key} on locale change so instructions reflect stored locale (#197)

Author: dobby-coder[bot]

src/lib/locales/en.json

@@ -81,9 +81,10 @@
         "title": "Add PostGuard to your mail client",
         "par": "Using the PostGuard addon for Thunderbird or Outlook, you can send encrypted emails in a breeze!",
         "Thunderbird": "<ol><li>Download and save the file <a href=\"/downloads/postguard-tb-addon.xpi\" download><q>postguard-tb-addon.xpi</q></a> somewhere on your computer, where you can find it again easily. </li><li><p>Within Thunderbird:</p><ul><li>under the menu <q>Tools</q>, go to <q>Add-ons and Themes</q>,</li><li> click on the cog icon next to <q>Manage Your Extensions</q> and select <q>Install Add-on From File ...</q>, </li><li> a file selection window opens; go to the folder where you stored the file <q>postguard-tb-addon.xpi</q> and select it, </li><li> Thunderbird tells you what an add-on can do; when you wish to continue, click the <q>Add</q> button. </li></ul></li><li> Now, when you compose a new mail message, a new header is shown with a button to switch PostGuard on or off. When on, it will encrypt the message for all recipients. Each recipient needs to use the Yivi app to prove that (s)he really posesses the email address that you used. </li></ol>",
-        "Outlook": "<ol><li><p>Adding the add-on:</p><ul><li><i>Note: PostGuard for Outlook only works in <q>New Outlook</q> and Outlook on the web. Classic Outlook is not supported.</i></li><li>Download the <a href=\"/downloads/postguard-outlook-manifest.xml\" download><q>manifest.xml</q></a> file and save it somewhere you can find it again.</li><li>Open <a href=\"https://aka.ms/olksideload\">aka.ms/olksideload</a> in your browser.</li><li>Click <q>My add-ins</q>.</li><li>Under <q>Custom Add-ins</q>, click <q>Add a custom add-in</q>, then <q>Add from file...</q>. <i>If you do not see this option, your organization probably does not allow custom add-ins to be installed. Please contact your administrator.</i></li><li>Select the <q>manifest.xml</q> file you just downloaded and confirm to install.</li></ul></li><li> Now, when you compose a new mail message, the PostGuard add-in is available from the <q>Apps</q> menu in the Outlook ribbon. <b>Note:</b> Outlook currently lists custom add-ins under the <q>Apps</q> menu rather than as a dedicated ribbon button — click <q>Apps</q> in the ribbon, then select <q>PostGuard Add-in</q> to open it. The add-in contains a button called <q>Send encrypted Email</q>. When clicking, it will encrypt and send the message to all recipients. Each recipient needs to use the Yivi app to prove that (s)he really possesses the email address that you used. Also, a copy of the sent mail is stored in the folder <q>PostGuard Sent Items</q> as a draft email (currently, Microsoft only allows to create messages as a draft). </li><li> After receiving a PostGuard encrypted email, the email can be decrypted by opening the message, clicking <q>Apps</q> in the Outlook ribbon, selecting <q>PostGuard Add-in</q>, and then clicking the <q>Decrypt Email</q> button. </li></ol>",
+        "Outlook": "<ol><li><p>Adding the add-on:</p><ul><li><i>Note: PostGuard for Outlook only works in <q>New Outlook</q> and Outlook on the web. Classic Outlook is not supported.</i></li><li>Download the <a href=\"/downloads/postguard-outlook-manifest.xml\" download=\"manifest.xml\"><q>manifest.xml</q></a> file and save it somewhere you can find it again.</li><li>Open <a href=\"https://aka.ms/olksideload\" target=\"_blank\" rel=\"noopener noreferrer\">aka.ms/olksideload</a> in your browser.</li><li>Click <q>My add-ins</q>.</li><li>Under <q>Custom Add-ins</q>, click <q>Add a custom add-in</q>, then <q>Add from file...</q>. <i>If you do not see this option, your organization probably does not allow custom add-ins to be installed. Please contact your administrator.</i></li><li>Select the <q>manifest.xml</q> file you just downloaded and confirm to install.</li><li>Restart Outlook (close and reopen the desktop client, or refresh the browser tab if you are using Outlook on the web) to complete the activation of the add-in.</li></ul></li><li> Now, when you compose a new mail message, the PostGuard add-in is available from the <q>Apps</q> menu in the Outlook ribbon. <b>Note:</b> Outlook currently lists custom add-ins under the <q>Apps</q> menu rather than as a dedicated ribbon button — click <q>Apps</q> in the ribbon, then select <q>PostGuard Add-in</q> to open it. The add-in contains a button called <q>Send encrypted Email</q>. When clicking, it will encrypt and send the message to all recipients. Each recipient needs to use the Yivi app to prove that (s)he really possesses the email address that you used. Also, a copy of the sent mail is stored in the folder <q>PostGuard Sent Items</q> as a draft email (currently, Microsoft only allows to create messages as a draft). </li><li> After receiving a PostGuard encrypted email, the email can be decrypted by opening the message, clicking <q>Apps</q> in the Outlook ribbon, selecting <q>PostGuard Add-in</q>, and then clicking the <q>Decrypt Email</q> button. </li></ol>",
         "instruction.header": "Install instructions",
-        "instruction.download": "Download for:"
+        "instruction.download": "Download for:",
+        "outlookWarning": "<strong>Heads up:</strong> some Outlook accounts (typically those provided by an organization) do not allow custom add-ins. If your account is one of them, the <q>Custom Add-ins</q> section described below will be missing from <a href=\"https://aka.ms/olksideload\">aka.ms/olksideload</a> and PostGuard for Outlook cannot be installed. Please contact your administrator, or use PostGuard for Thunderbird or the web app instead."
     },
     "fallback": {
         "extensionPrompt": "Want to decrypt emails directly in Thunderbird or Outlook?",

src/lib/locales/nl.json

@@ -81,9 +81,10 @@
         "title": "Voeg PostGuard toe aan uw e-mailclient",
         "par": "Met de PostGuard add-on voor Thunderbird of Outlook kunt je in een handomdraai versleutelde e-mails verzenden!",
         "Thunderbird": "<ol><li>Download en bewaar het bestand <a href=\"/downloads/postguard-tb-addon.xpi\" download><q>postguard-tb-addon.xpi</q></a> ergens op uw computer, waar je het gemakkelijk terug kunt vinden. </li><li><p>Binnen Thunderbird:</p><ul><li>ga onder het menu <q>Tools</q> naar <q>Add-ons en thema's</q>, </li><li> klik op het tandwielpictogram naast <q>Uw extensies beheren</q> en selecteer <q>Add-on installeren vanuit bestand...</q>, </li><li> een venster voor bestandsselectie wordt geopend; ga naar de map waar je het bestand <q>postguard-tb-addon.xpi</q> hebt opgeslagen en selecteer het, </li><li> Thunderbird vertelt je wat een add-on kan doen; als je wilt doorgaan, klikt je op de knop <q>Toevoegen</q>. </li></ul></li><li> Als je nu een nieuw mailbericht opstelt, wordt er een nieuwe balk getoond met een knop om PostGuard aan of uit te zetten. Indien ingeschakeld, wordt het bericht voor alle ontvangers versleuteld. Elke ontvanger moet de Yivi-app gebruiken om te bewijzen dat hij/zij echt in het bezit is van het e-mailadres dat je hebt gebruikt. </li></ol>",
-        "Outlook": "<ol><li><p>De add-on toevoegen:</p><ul><li><i>Let op: PostGuard voor Outlook werkt alleen in <q>nieuwe Outlook</q> en Outlook op het web. Klassiek Outlook wordt niet ondersteund.</i></li><li>Download het bestand <a href=\"/downloads/postguard-outlook-manifest.xml\" download><q>manifest.xml</q></a> en bewaar het ergens waar je het gemakkelijk terug kunt vinden.</li><li>Open <a href=\"https://aka.ms/olksideload\">aka.ms/olksideload</a> in je browser.</li><li>Klik op <q>Mijn add-ins</q>.</li><li>Onder <q>Aangepaste add-ins</q>, klik op <q>Een aangepaste add-in toevoegen</q> en vervolgens op <q>Toevoegen vanuit bestand...</q>. <i>Als je deze optie niet ziet, staat je organisatie waarschijnlijk niet toe dat aangepaste add-ins worden geïnstalleerd. Neem contact op met je beheerder.</i></li><li>Selecteer het <q>manifest.xml</q>-bestand dat je zojuist hebt gedownload en bevestig om te installeren.</li></ul></li><li> Als je nu een nieuw e-mailbericht opstelt, is de PostGuard-add-in beschikbaar via het menu <q>Apps</q> in het Outlook-lint. <b>Let op:</b> Outlook plaatst aangepaste add-ins momenteel onder het <q>Apps</q>-menu in plaats van als aparte knop in het lint — klik op <q>Apps</q> in het lint en selecteer vervolgens <q>PostGuard Add-in</q> om de add-in te openen. De add-in bevat een knop met de naam <q>Gecodeerde e-mail verzenden</q>. Wanneer je erop klikt, wordt het bericht gecodeerd en naar alle ontvangers verzonden. Elke ontvanger moet de Yivi-app gebruiken om te bewijzen dat hij/zij echt over het door je gebruikte e-mailadres beschikt. Ook wordt een kopie van de verzonden e-mail opgeslagen in de map <q>PostGuard Sent Items</q> als concept-e-mail (momenteel staat Microsoft alleen toe om berichten als concept te maken). </li><li>Na ontvangst van een met PostGuard versleutelde e-mail kan de e-mail worden ontsleuteld door het bericht te openen, op <q>Apps</q> in het Outlook-lint te klikken, <q>PostGuard Add-in</q> te selecteren en vervolgens op de knop <q>E-mail ontsleutelen</q> te klikken. </li></ol>",
+        "Outlook": "<ol><li><p>De add-on toevoegen:</p><ul><li><i>Let op: PostGuard voor Outlook werkt alleen in <q>nieuwe Outlook</q> en Outlook op het web. Klassiek Outlook wordt niet ondersteund.</i></li><li>Download het bestand <a href=\"/downloads/postguard-outlook-manifest.xml\" download=\"manifest.xml\"><q>manifest.xml</q></a> en bewaar het ergens waar je het gemakkelijk terug kunt vinden.</li><li>Open <a href=\"https://aka.ms/olksideload\" target=\"_blank\" rel=\"noopener noreferrer\">aka.ms/olksideload</a> in je browser.</li><li>Klik op <q>Mijn invoegtoepassingen</q>.</li><li>Onder <q>Mijn invoegtoepassingen</q>, klik op <q>Aangepaste invoegtoepassing toevoegen</q> en vervolgens op <q>Toevoegen uit bestand</q>. <i>Als je deze optie niet ziet, staat je organisatie waarschijnlijk niet toe dat aangepaste add-ins worden geïnstalleerd. Neem contact op met je beheerder.</i></li><li>Selecteer het <q>manifest.xml</q>-bestand dat je zojuist hebt gedownload en bevestig om te installeren.</li><li>Herstart Outlook (sluit en heropen de desktopclient, of vernieuw het tabblad als je Outlook op het web gebruikt) om de activatie van de add-in te voltooien.</li></ul></li><li> Als je nu een nieuw e-mailbericht opstelt, is de PostGuard-add-in beschikbaar via het menu <q>Apps</q> in het Outlook-lint. <b>Let op:</b> Outlook plaatst aangepaste add-ins momenteel onder het <q>Apps</q>-menu in plaats van als aparte knop in het lint — klik op <q>Apps</q> in het lint en selecteer vervolgens <q>PostGuard Add-in</q> om de add-in te openen. De add-in bevat een knop met de naam <q>Gecodeerde e-mail verzenden</q>. Wanneer je erop klikt, wordt het bericht gecodeerd en naar alle ontvangers verzonden. Elke ontvanger moet de Yivi-app gebruiken om te bewijzen dat hij/zij echt over het door je gebruikte e-mailadres beschikt. Ook wordt een kopie van de verzonden e-mail opgeslagen in de map <q>PostGuard Sent Items</q> als concept-e-mail (momenteel staat Microsoft alleen toe om berichten als concept te maken). </li><li>Na ontvangst van een met PostGuard versleutelde e-mail kan de e-mail worden ontsleuteld door het bericht te openen, op <q>Apps</q> in het Outlook-lint te klikken, <q>PostGuard Add-in</q> te selecteren en vervolgens op de knop <q>E-mail ontsleutelen</q> te klikken. </li></ol>",
         "instruction.header": "Installatie instructies",
-        "instruction.download": "Downloaden voor:"
+        "instruction.download": "Downloaden voor:",
+        "outlookWarning": "<strong>Let op:</strong> sommige Outlook-accounts (meestal accounts van een organisatie) staan geen aangepaste add-ins toe. Als dat voor jouw account geldt, ontbreekt het onderdeel <q>Aangepaste add-ins</q> dat hieronder wordt beschreven op <a href=\"https://aka.ms/olksideload\">aka.ms/olksideload</a> en kan PostGuard voor Outlook niet worden geïnstalleerd. Neem contact op met je beheerder, of gebruik in plaats daarvan PostGuard voor Thunderbird of de webversie."
     },
     "fallback": {
         "extensionPrompt": "Wil je e-mails direct ontsleutelen in Thunderbird of Outlook?",

src/routes/(marketing)/addons/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { _ } from 'svelte-i18n'
+    import { _, locale } from 'svelte-i18n'
     import Tabs from '$lib/components/Tabs.svelte'
     import SEO from '$lib/components/SEO.svelte'
     // import { fade } from 'svelte/transition'
@@ -117,7 +117,13 @@
             <p>{$_('addons.instruction.download')}</p>
             <Tabs {tabItems} {activeItem} on:tabChange={triggerTabChange} />
             {#if activeItem}
-                {#key activeItem}
+                {#key `${activeItem}-${$locale}`}
+                    {#if activeItem === 'Outlook'}
+                        <div class="callout" role="note">
+                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                            {@html $_('addons.outlookWarning')}
+                        </div>
+                    {/if}
                     <div id="client-instruction">
                         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                         {@html $_(`addons.${activeItem}`)}
@@ -173,4 +179,14 @@
             margin-top: 0;
         }
     }
+
+    .callout {
+        border-left: 4px solid #c9941b;
+        background: #fff7e0;
+        padding: 0.75rem 1rem;
+        margin: 0.75rem 0 1rem;
+        border-radius: 4px;
+        font-size: 0.95em;
+        line-height: 1.4;
+    }
 </style>