Merge pull request #237 from Coffey-Labs/feat/headers-show-original

Make "Show original" in the headers dialog the action, not a description

web/src/locales/de.ts

@@ -225,7 +225,7 @@ export const catalog: Catalog = {
     "Never send one": "Nie senden",
     "Not this time": "Diesmal nicht",
     "It would go to {address}, which is not where the message came from.": "Sie ginge an {address} — nicht dorthin, woher die Nachricht kam.",
-    "Use “Show original” for the complete raw message.": "Nutzen Sie „Original anzeigen“ für die vollständige Rohnachricht.",
+    "Use {action} for the complete raw message.": "{action} für die vollständige Rohnachricht.",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "Ordner",

web/src/locales/es.ts

@@ -217,7 +217,7 @@ export const catalog: Catalog = {
     "Never send one": "No enviar nunca",
     "Not this time": "Esta vez no",
     "It would go to {address}, which is not where the message came from.": "Iría a {address}, que no es de donde vino el mensaje.",
-    "Use “Show original” for the complete raw message.": "Use «Mostrar el original» para ver el mensaje sin procesar completo.",
+    "Use {action} for the complete raw message.": "{action} para ver el mensaje sin procesar completo.",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "Carpeta",

web/src/locales/fr.ts

@@ -222,7 +222,7 @@ export const catalog: Catalog = {
     "Never send one": "Ne jamais en envoyer",
     "Not this time": "Pas cette fois",
     "It would go to {address}, which is not where the message came from.": "Il irait à {address}, qui n'est pas l'origine du message.",
-    "Use “Show original” for the complete raw message.": "Utilisez « Afficher l'original » pour le message brut complet.",
+    "Use {action} for the complete raw message.": "{action} pour le message brut complet.",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "Dossier",

web/src/locales/ja.ts

@@ -216,7 +216,7 @@ export const catalog: Catalog = {
     "Never send one": "送信しない",
     "Not this time": "今回は送信しない",
     "It would go to {address}, which is not where the message came from.": "送信先は {address} で、メールの送信元とは異なります。",
-    "Use “Show original” for the complete raw message.": "完全な原文は「元のメールを表示」でご覧いただけます。",
+    "Use {action} for the complete raw message.": "完全な生メッセージは {action} から。",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "フォルダー",

web/src/locales/nl.ts

@@ -213,7 +213,7 @@ export const catalog: Catalog = {
     "Never send one": "Nooit versturen",
     "Not this time": "Deze keer niet",
     "It would go to {address}, which is not where the message came from.": "Die zou naar {address} gaan, en daar kwam het bericht niet vandaan.",
-    "Use “Show original” for the complete raw message.": "Gebruik “Origineel tonen” voor het volledige ruwe bericht.",
+    "Use {action} for the complete raw message.": "{action} voor het volledige onbewerkte bericht.",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "Map",

web/src/locales/pt-BR.ts

@@ -220,7 +220,7 @@ export const catalog: Catalog = {
     "Never send one": "Nunca enviar",
     "Not this time": "Desta vez não",
     "It would go to {address}, which is not where the message came from.": "Ela iria para {address}, que não é de onde a mensagem veio.",
-    "Use “Show original” for the complete raw message.": "Use “Mostrar o original” para ver a mensagem bruta completa.",
+    "Use {action} for the complete raw message.": "{action} para a mensagem bruta completa.",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "Pasta",

web/src/locales/ru.ts

@@ -219,7 +219,7 @@ export const catalog: Catalog = {
     "Never send one": "Никогда не отправлять",
     "Not this time": "Не в этот раз",
     "It would go to {address}, which is not where the message came from.": "Оно ушло бы на {address}, а письмо пришло не оттуда.",
-    "Use “Show original” for the complete raw message.": "Нажмите «Показать исходник», чтобы увидеть письмо целиком.",
+    "Use {action} for the complete raw message.": "{action} — полное исходное сообщение.",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "Папка",

web/src/locales/uk.ts

@@ -213,7 +213,7 @@ export const catalog: Catalog = {
     "Never send one": "Ніколи не надсилати",
     "Not this time": "Не цього разу",
     "It would go to {address}, which is not where the message came from.": "Воно пішло б на {address}, а лист надійшов не звідти.",
-    "Use “Show original” for the complete raw message.": "Натисніть «Показати оригінал», щоб побачити лист повністю.",
+    "Use {action} for the complete raw message.": "{action} — повне вихідне повідомлення.",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "Тека",

web/src/locales/zh-Hans.ts

@@ -215,7 +215,7 @@ export const catalog: Catalog = {
     "Never send one": "从不发送",
     "Not this time": "这次不发送",
     "It would go to {address}, which is not where the message came from.": "回执会发往 {address}，而邮件并非来自该地址。",
-    "Use “Show original” for the complete raw message.": "使用「显示原始邮件」查看完整原文。",
+    "Use {action} for the complete raw message.": "{action} 可查看完整原始邮件。",
 
     // ── Folders, calendar, contacts, files ─────────────────────────────
     "Folder": "文件夹",

web/src/styles/app.css

@@ -1743,9 +1743,15 @@ button.dp-open:disabled { cursor: default; opacity: .5; }
 @media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
 
 /* The composer's To label doubles as the way into the address books. */
-.composer-field label .link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
+/* A button that reads as part of a sentence.
-.composer-field label .link-btn:hover { color: var(--accent); }
+   Unscoped: it was written for the composer's To/Cc labels and scoped to them,
-.composer-field label .link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+   which left every other caller -- the trusted-domain list in Privacy, and the
+   "Show original" link in the headers dialog -- rendering as default button
+   chrome in the middle of a line. `font` and `color` inherit, so it takes the
+   voice of whatever sentence it sits in. */
+.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
+.link-btn:hover { color: var(--accent); }
+.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
 
 /* The spam filter's own working, in the message details. */
 .spam-summary { display: flex; flex-direction: column; gap: 6px; }

web/src/views/mail/MessageView.tsx

@@ -436,7 +436,28 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
           {e.inReplyTo?.length ? <><dt>{translate("In-Reply-To")}</dt><dd className="mono small">{e.inReplyTo.join(" ")}</dd></> : null}
           {e.references?.length ? <><dt>{translate("References")}</dt><dd className="mono small">{e.references.join(" ")}</dd></> : null}
         </dl>
-        <p className="hint">{translate("Use “Show original” for the complete raw message.")}</p>
+        {/*
+          * The action, not a description of where to find it. Telling somebody
+          * an action exists and leaving them to hunt for it is half a job
+          * (#236) -- and one dialog replaces the other, so it reads as going
+          * deeper rather than as opening a second window.
+          *
+          * `tNode` rather than two `translate` calls around a button: the
+          * sentence stays whole for whoever translates it, and languages that
+          * put the verb elsewhere can move the hole.
+          */}
+        <p className="hint">
+          {tNode("Use {action} for the complete raw message.", {
+            action: (
+              <button
+                className="link-btn"
+                onClick={() => { setShowHeaders(false); void openSource(); }}
+              >
+                {translate("Show original")}
+              </button>
+            ),
+          })}
+        </p>
       </Dialog>
     </article>
   );