frontend/src/components/upload/UploadSettingsPanel.vue

@@ -9,12 +9,20 @@
                 >
                     <input v-model="settings.mode" class="mt-0.5" type="radio" name="upload-mode" value="zk" />
                     <span class="min-w-0 flex-1">
+                        <span class="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
                             <span class="text-sm font-medium">Zero knowledge</span>
+                            <RouterLink
+                                :to="{ name: ROUTE_NAMES.About, hash: '#zero-knowledge' }"
+                                class="text-xs font-medium text-primary underline-offset-2 hover:underline"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                @click.stop
+                            >
+                                Learn more
+                            </RouterLink>
+                        </span>
                         <p class="mt-1 text-xs text-muted-foreground">
-                            Images are E2E encrypted. The server has no technical ability to decrypt them. Having the link
-                            gives permission to view the image. You can additionally password-protect the upload so the
-                            link alone is not enough. Great for private sharing, but doesn't work with BBCode, HTML,
-                            etc.
+                            E2E encrypted, for direct sharing, can't be embedded.
                         </p>
                     </span>
                 </label>
@@ -24,26 +32,24 @@
                 >
                     <input v-model="settings.mode" class="mt-0.5" type="radio" name="upload-mode" value="hotlink" />
                     <span class="min-w-0 flex-1">
+                        <span class="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
                             <span class="text-sm font-medium">Hotlink</span>
+                            <RouterLink
+                                :to="{ name: ROUTE_NAMES.About, hash: '#hotlink' }"
+                                class="text-xs font-medium text-primary underline-offset-2 hover:underline"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                @click.stop
+                            >
+                                Learn more
+                            </RouterLink>
+                        </span>
                         <p class="mt-1 text-xs text-muted-foreground">
-                            Still encrypted at rest, but the server decrypts on the fly. Works with BBCode, HTML,
-                            etc.
-                            Encryption here serves mainly as
-                            <span class="whitespace-nowrap">
-                                <span class="font-bold">crypto-shred</span
-                                ><sup class="font-bold text-[0.7em] text-muted-foreground">1</sup> </span
-                            >, because hotlink images are intended to be public.
+                            Still encrypted at rest, but support embedding, for forums, websites, etc.
                         </p>
                     </span>
                 </label>
             </div>
-
-            <p id="crypto-shred-footnote" class="text-xs italic leading-snug text-muted-foreground">
-                <sup class="mr-1 font-bold not-italic text-[0.85em]">1</sup>
-                Hard drives do not guarantee that deleted files cannot be recovered. Crypto-shred consists of storing
-                data as encrypted blobs, so recovered leftovers are useless without the decryption key, which is never
-                stored on the server.
-            </p>
         </fieldset>
 
         <div class="grid gap-4 sm:grid-cols-2">
@@ -77,9 +83,7 @@
                 <input v-model="settings.passwordEnabled" type="checkbox" class="rounded border-input" />
                 <span class="font-medium">Set password</span>
             </label>
-            <p class="text-xs text-muted-foreground">
-                Requires the link and this password to decrypt. Use when the link alone should not be enough.
-            </p>
+            <p class="text-xs text-muted-foreground">Requires the link and this password to decrypt.</p>
 
             <template v-if="settings.passwordEnabled">
                 <label class="flex flex-col gap-1.5 text-sm">
@@ -98,6 +102,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { ROUTE_NAMES } from '@/consts/routeNames';
 import { config } from '@/config';
 import type { UploadBatchSettingsForm } from '@/types/upload/UploadBatchSettingsForm';
 import type { UploadExpiryPreset } from '@/types/upload/UploadExpiryPreset';