fix(decrypt): consolidated /decrypt page UX fixes

src/lib/components/fallback/Decrypt.svelte

@@ -14,6 +14,7 @@
 
     import YiviQRCode from '$lib/components/filesharing/YiviQRCode.svelte'
     import Chip from '$lib/components/Chip.svelte'
+    import { isMobile } from '$lib/browser-detect'
 
     const STATES = {
         Uninit: 'Uninit',
@@ -26,6 +27,7 @@
     }
 
     let decryptState = $state(STATES.Uninit)
+    const isMobileDevice = isMobile()
 
     let policies = $state()
     let keylist = $state()
@@ -295,16 +297,28 @@
     {:else if decryptState === STATES.Qr}
         <div class="decrypt-card">
             <h3>
-                {$_('fallback.decrypt.scanQr', { default: 'Scan QR code' })}
+                {$_('fallback.decrypt.scanQr', {
+                    default: 'Scan QR code with Yivi',
+                })}
             </h3>
+            <p class="card-subtitle">
+                {$_('fallback.decrypt.scanQrDesc', {
+                    default:
+                        'Verify your identity by scanning this QR code with the free Yivi app on your phone.',
+                })}
+            </p>
             {#if showHints}
                 <div class="hints">
                     {#each hints as hint (hint)}
                         <span class="hint-chip">{hint}</span>
                     {/each}
                 </div>
             {/if}
-            <YiviQRCode id="yivi-fallback" responsive />
+            <YiviQRCode
+                id="yivi-fallback"
+                responsive
+                mode={isMobileDevice ? 'deeplink' : 'qr'}
+            />
         </div>
     {:else if decryptState === STATES.Decrypting}
         <div class="spinner-wrapper">

src/lib/components/filesharing/SendButton.svelte

@@ -449,6 +449,13 @@
                 <div class="qr-code-wrapper">
                     <YiviQRCode />
                 </div>
+
+                <HelpToggle
+                    title={$_('filesharing.encryptPanel.yiviInfo')}
+                    content={$_('filesharing.encryptPanel.yiviInfoText')}
+                    linkText={$_('filesharing.encryptPanel.yiviInfoLink')}
+                    linkUrl="https://yivi.app"
+                />
             </div>
             <div class="popup-arrow"></div>
         </div>
@@ -476,6 +483,12 @@
                         {$_('filesharing.sign.scanQR')}
                     </p>
                     <div class="qr-code-wrapper"><YiviQRCode /></div>
+                    <HelpToggle
+                        title={$_('filesharing.encryptPanel.yiviInfo')}
+                        content={$_('filesharing.encryptPanel.yiviInfoText')}
+                        linkText={$_('filesharing.encryptPanel.yiviInfoLink')}
+                        linkUrl="https://yivi.app"
+                    />
                     <Chip
                         text={$_('filesharing.sign.close')}
                         onclick={() => {

src/lib/locales/en.json

@@ -138,7 +138,7 @@
         "tryAgain": "Try again",
         "cancel": "Cancel",
         "sign": {
-            "scanQR": "Scan this QR code with your Yivi app.",
+            "scanQR": "Verify your identity by scanning this QR code with the free Yivi app on your phone.",
             "close": "Close",
             "signOtherDevice": "Sign with Yivi on another device",
             "followSteps": "Follow the steps in the Yivi app",
@@ -148,9 +148,9 @@
             "header": "Download your files",
             "pageDescription": "To download the files, you need to decrypt them. You do this by proving who you are with Yivi.",
             "downloadDecrypt": "Downloading & Decrypting...",
-            "irmaInstructionHeaderQr": "Decrypt",
+            "irmaInstructionHeaderQr": "Decrypt with Yivi",
             "irmaInstructionHeaderMobile": "Prove your identity with Yivi",
-            "irmaInstructionQr": "Scan this QR code with your Yivi app.",
+            "irmaInstructionQr": "Decrypt the files by verifying your e-mail address. Scan the QR code below with the free Yivi app on your phone.",
             "irmaInstructionMobile": "Decrypt the files by verifying your e-mail address. Please click the button below to open the Yivi-app.",
             "noIrma": "Don't have the Yivi-app yet?",
             "decrypting": "Your files are being downloaded and decrypted afterwards.",

src/lib/locales/nl.json

@@ -138,7 +138,7 @@
         "tryAgain": "Probeer opnieuw",
         "cancel": "Annuleer",
         "sign": {
-            "scanQR": "Scan deze QR-code met je Yivi app.",
+            "scanQR": "Bewijs wie je bent door deze QR-code te scannen met de gratis Yivi-app op je telefoon.",
             "close": "Sluit",
             "signOtherDevice": "Onderteken met Yivi op een ander apparaat",
             "followSteps": "Volg de stappen in de Yivi app",
@@ -148,9 +148,9 @@
             "header": "Download je bestanden",
             "pageDescription": "Om de bestanden te downloaden, moet je ze ontsleutelen. Dit doe je door te bewijzen wie je bent met Yivi.",
             "downloadDecrypt": "Downloading & ontsleutelen...",
-            "irmaInstructionHeaderQr": "Ontsleutel",
+            "irmaInstructionHeaderQr": "Ontsleutel met Yivi",
             "irmaInstructionHeaderMobile": "Bewijs identiteit met Yivi",
-            "irmaInstructionQr": "Scan deze QR code met je Yivi app.",
+            "irmaInstructionQr": "Ontsleutel de bestanden door je e-mailadres te verifiëren. Scan de onderstaande QR-code met de gratis Yivi-app op je telefoon.",
             "irmaInstructionMobile": "Ontsleutel het bestand door je e-mailadres te tonen. Click daarvoor op de onderstaande knop om naar de identificatie app Yivi te gaan.",
             "noIrma": "Nog geen Yivi-app?",
             "decrypting": "Jouw bestand wordt gedownload en vervolgens ontsleuteld.",

src/routes/(app)/decrypt/+page.svelte

@@ -131,15 +131,21 @@
     </div>
     <div class="fallback-container">
         <div class="left-panel">
-            <label class="upload-area">
-                <Icon icon="mdi:upload-lock" width="28px" aria-hidden="true" />
-                <span>{$_('fallback.drop')}</span>
-                <input
-                    type="file"
-                    onchange={onFile}
-                    aria-label={$_('fallback.drop')}
-                />
-            </label>
+            {#if !hashMode}
+                <label class="upload-area">
+                    <Icon
+                        icon="mdi:upload-lock"
+                        width="28px"
+                        aria-hidden="true"
+                    />
+                    <span>{$_('fallback.drop')}</span>
+                    <input
+                        type="file"
+                        onchange={onFile}
+                        aria-label={$_('fallback.drop')}
+                    />
+                </label>
+            {/if}
 
             <div class="search-bar">
                 <div class="search-input-wrapper">