From 33fe3022e09653c9563afce1991b2cd3e10bbd23 Mon Sep 17 00:00:00 2001
From: alpha <alpha5611331@gmail.com>
Date: Tue, 6 Oct 2026 14:06:20 -0400
Subject: [PATCH] feat(headphones): make the headphone notice read as a
 requirement (#139)

The notice was a small dialog with a 16px icon and muted 12px text, so it
read as a tip and was clicked through. The cost of ignoring it is a live
suggestion that silently never appears (#111).

Centre a large destructive-tinted headphone icon, state the requirement in
the title, and put the two consequence rows in a highlighted callout at
full contrast. English and Russian copy updated together.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../custom/headphone-notice-dialog.tsx        | 27 ++++++++++---------
 src/renderer/i18n/locales/en.ts               |  5 ++--
 src/renderer/i18n/locales/ru.ts               |  5 ++--
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/custom/headphone-notice-dialog.tsx b/src/renderer/components/custom/headphone-notice-dialog.tsx
index d284ee7d..d5371c35 100644
--- a/src/renderer/components/custom/headphone-notice-dialog.tsx
+++ b/src/renderer/components/custom/headphone-notice-dialog.tsx
@@ -91,26 +91,29 @@ export default function HeadphoneNoticeDialog({
 
   return (
     <Dialog open={open} onOpenChange={(next) => (next ? onOpenChange(true) : handleDismiss())}>
-      <DialogContent className="max-w-sm">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Headphones className="h-4 w-4" />
-            {t.headphoneNotice.title}
-          </DialogTitle>
-          <DialogDescription>{copy.description}</DialogDescription>
+      <DialogContent className="max-w-sm border-destructive/50">
+        <DialogHeader className="items-center text-center sm:text-center">
+          <div className="mb-1 flex h-14 w-14 items-center justify-center rounded-full bg-destructive/15 text-destructive ring-4 ring-destructive/10">
+            <Headphones className="h-7 w-7" />
+          </div>
+          <DialogTitle className="text-lg">{t.headphoneNotice.title}</DialogTitle>
+          <DialogDescription className="text-sm text-foreground">
+            {copy.description}
+          </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-3 py-1">
+        <div className="space-y-3 rounded-md border border-destructive/40 bg-destructive/10 p-3">
           {copy.rows.map((row, i) => (
             <NoticeRow key={i} icon={row.icon} text={row.text} />
           ))}
         </div>
 
         <DialogFooter>
-          <Button variant="ghost" size="sm" onClick={handleDismiss}>
+          <Button variant="ghost" onClick={handleDismiss}>
             {t.common.cancel}
           </Button>
-          <Button size="sm" onClick={handleProceed}>
+          <Button onClick={handleProceed}>
+            <Headphones className="h-4 w-4" />
             {t.headphoneNotice.proceed}
           </Button>
         </DialogFooter>
@@ -122,8 +125,8 @@ export default function HeadphoneNoticeDialog({
 function NoticeRow({ icon, text }: { icon: React.ReactNode; text: string }) {
   return (
     <div className="flex items-start gap-3">
-      <div className="mt-0.5 text-muted-foreground">{icon}</div>
-      <p className="flex-1 text-xs text-muted-foreground">{text}</p>
+      <div className="mt-0.5 text-destructive">{icon}</div>
+      <p className="flex-1 text-sm font-medium text-foreground">{text}</p>
     </div>
   );
 }
diff --git a/src/renderer/i18n/locales/en.ts b/src/renderer/i18n/locales/en.ts
index afa843f1..22ea81f1 100644
--- a/src/renderer/i18n/locales/en.ts
+++ b/src/renderer/i18n/locales/en.ts
@@ -751,8 +751,9 @@ export const en = {
   },
 
   headphoneNotice: {
-    title: 'Put your headphones on',
-    description: "This session needs the interviewer's voice going to your ears only.",
+    title: 'Headphones are required',
+    description:
+      "Put them on before you start. The interviewer's voice must reach your ears only - never your speakers.",
     liveSpeakers: 'On speakers, your microphone hears the interviewer as well as you do.',
     /** The failure is the quiet one, so it is named rather than left as "quality issues". */
     liveConsequence:
diff --git a/src/renderer/i18n/locales/ru.ts b/src/renderer/i18n/locales/ru.ts
index 1f88c036..afcb4c0c 100644
--- a/src/renderer/i18n/locales/ru.ts
+++ b/src/renderer/i18n/locales/ru.ts
@@ -762,8 +762,9 @@ export const ru: Translation = {
   },
 
   headphoneNotice: {
-    title: 'Наденьте наушники',
-    description: 'Голос интервьюера должен звучать только у вас в наушниках.',
+    title: 'Наушники обязательны',
+    description:
+      'Наденьте их до начала. Голос интервьюера должен звучать только в наушниках - не через динамики.',
     liveSpeakers: 'Через динамики ваш микрофон слышит интервьюера так же хорошо, как и вы.',
     liveConsequence:
       'Тогда приложение принимает его вопрос за ваши слова и перестаёт на него отвечать - без каких-либо сообщений об ошибке.',