chore: handle client uncaught exceptions and show error message (#1389)

apps/readest-app/public/locales/ar/translation.json

@@ -363,5 +363,13 @@
   "{{engine}}: {{count}} voices_two": "{{engine}}: صوتان",
   "{{engine}}: {{count}} voices_few": "{{engine}}: {{count}} أصوات",
   "{{engine}}: {{count}} voices_many": "{{engine}}: {{count}} صوتاً",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} صوت"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} صوت",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "حدث خطأ ما. لا تقلق، لقد تم إبلاغ فريقنا ونحن نعمل على إصلاحه.",
+  "Error Details:": "تفاصيل الخطأ:",
+  "Try Again": "حاول مرة أخرى",
+  "Need help?": "تحتاج مساعدة؟",
+  "Contact Support": "اتصل بالدعم الفني",
+  "Code Highlighting": "تمييز الكود",
+  "Enable Highlighting": "تمكين التمييز",
+  "Code Language": "لغة الكود"
 }

apps/readest-app/public/locales/de/translation.json

@@ -351,5 +351,13 @@
   "Translation Characters": "Übersetzungszeichen",
   "Daily translation quota reached. Select another translate service to proceed.": "Das tägliche Übersetzungslimit wurde erreicht. Wählen Sie einen anderen Übersetzungsdienst, um fortzufahren.",
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} Stimme",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} Stimmen"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} Stimmen",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Etwas ist schief gelaufen. Keine Sorge, unser Team wurde benachrichtigt und arbeitet an einer Lösung.",
+  "Error Details:": "Fehlerdetails:",
+  "Try Again": "Erneut versuchen",
+  "Need help?": "Brauchen Sie Hilfe?",
+  "Contact Support": "Support kontaktieren",
+  "Code Highlighting": "Code-Hervorhebung",
+  "Enable Highlighting": "Code-Hervorhebung aktivieren",
+  "Code Language": "Programmiersprache"
 }

apps/readest-app/public/locales/el/translation.json

@@ -351,5 +351,13 @@
   "Translation Characters": "Χαρακτήρες μετάφρασης",
   "Daily translation quota reached. Select another translate service to proceed.": "Έχετε φτάσει το ημερήσιο όριο χαρακτήρων μετάφρασης. Επιλέξτε άλλη υπηρεσία μετάφρασης για να συνεχίσετε.",
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} φωνή",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} φωνές"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} φωνές",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Κάτι πήγε στραβά. Μην ανησυχείτε, η ομάδα μας έχει ενημερωθεί και εργαζόμαστε για μια λύση.",
+  "Error Details:": "Λεπτομέρειες σφάλματος:",
+  "Try Again": "Δοκιμάστε ξανά",
+  "Need help?": "Χρειάζεστε βοήθεια;",
+  "Contact Support": "Επικοινωνήστε με την υποστήριξη",
+  "Code Highlighting": "Επισήμανση κώδικα",
+  "Enable Highlighting": "Ενεργοποίηση επισήμανσης",
+  "Code Language": "Γλώσσα κώδικα"
 }

apps/readest-app/public/locales/es/translation.json

@@ -354,5 +354,13 @@
   "Daily translation quota reached. Select another translate service to proceed.": "Cuota diaria de traducción alcanzada. Selecciona otro servicio de traducción para continuar.",
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} voz",
   "{{engine}}: {{count}} voices_many": "{{engine}}: {{count}} voces",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} voces"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} voces",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Algo salió mal. No te preocupes, nuestro equipo ha sido notificado y estamos trabajando en una solución.",
+  "Error Details:": "Detalles del error:",
+  "Try Again": "Intentar de nuevo",
+  "Need help?": "¿Necesitas ayuda?",
+  "Contact Support": "Contactar con soporte",
+  "Code Highlighting": "Resaltado de código",
+  "Enable Highlighting": "Activar resaltado",
+  "Code Language": "Lenguaje de código"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -354,5 +354,13 @@
   "Daily translation quota reached. Select another translate service to proceed.": "Quota de traduction quotidien atteint. Sélectionnez un autre service de traduction pour continuer.",
   "{{engine}}: {{count}} voices_one": "{{engine}} : {{count}} voix",
   "{{engine}}: {{count}} voices_many": "{{engine}} : {{count}} voix",
-  "{{engine}}: {{count}} voices_other": "{{engine}} : {{count}} voix"
+  "{{engine}}: {{count}} voices_other": "{{engine}} : {{count}} voix",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Quelque chose s'est mal passé. Ne vous inquiétez pas, notre équipe a été informée et nous travaillons sur une solution.",
+  "Error Details:": "Erreur :",
+  "Try Again": "Réessayer",
+  "Need help?": "Besoin d'aide ?",
+  "Contact Support": "Contacter le support",
+  "Code Highlighting": "Coloration syntaxique",
+  "Enable Highlighting": "Activer la coloration syntaxique",
+  "Code Language": "Langage de programmation"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -351,5 +351,13 @@
   "Translation Characters": "अनुवाद वर्ण",
   "Daily translation quota reached. Select another translate service to proceed.": "दैनिक अनुवाद कोटा पूरा हो गया है। आगे बढ़ने के लिए कोई अन्य अनुवाद सेवा चुनें।",
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} आवाज़",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} आवाज़ें"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} आवाज़ें",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "कुछ गलत हो गया। चिंता न करें, हमारी टीम को सूचित कर दिया गया है और हम एक समाधान पर काम कर रहे हैं।",
+  "Error Details:": "त्रुटि विवरण:",
+  "Try Again": "फिर से प्रयास करें",
+  "Need help?": "मदद चाहिए?",
+  "Contact Support": "सहायता से संपर्क करें",
+  "Code Highlighting": "कोड हाइलाइटिंग",
+  "Enable Highlighting": "हाइलाइटिंग सक्षम करें",
+  "Code Language": "कोड भाषा"
 }

apps/readest-app/public/locales/id/translation.json

@@ -348,5 +348,13 @@
   "{{percentage}}% of Daily Translation Characters Used.": "{{percentage}}% dari Karakter Terjemahan Harian Digunakan.",
   "Translation Characters": "Karakter Terjemahan",
   "Daily translation quota reached. Select another translate service to proceed.": "Kuota terjemahan harian tercapai. Pilih layanan terjemahan lain untuk melanjutkan.",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} suara"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} suara",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Terjadi kesalahan. Jangan khawatir, tim kami telah diberitahu dan kami sedang bekerja untuk memperbaikinya.",
+  "Error Details:": "Rincian Kesalahan:",
+  "Try Again": "Coba Lagi",
+  "Need help?": "Butuh bantuan?",
+  "Contact Support": "Hubungi Dukungan",
+  "Code Highlighting": "Penyorotan Kode",
+  "Enable Highlighting": "Aktifkan Penyorotan",
+  "Code Language": "Bahasa Kode"
 }

apps/readest-app/public/locales/it/translation.json

@@ -354,5 +354,13 @@
   "Daily translation quota reached. Select another translate service to proceed.": "Quota di traduzione giornaliera raggiunta. Seleziona un altro servizio di traduzione per procedere.",
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} voce",
   "{{engine}}: {{count}} voices_many": "{{engine}}: {{count}} voci",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} voci"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} voci",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Qualcosa è andato storto. Non preoccuparti, il nostro team è stato avvisato e stiamo lavorando a una soluzione.",
+  "Error Details:": "Dettagli errore:",
+  "Try Again": "Riprova",
+  "Need help?": "Hai bisogno di aiuto?",
+  "Contact Support": "Contatta il supporto",
+  "Code Highlighting": "Evidenziazione codice",
+  "Enable Highlighting": "Abilita evidenziazione",
+  "Code Language": "Tipo di codice"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -348,5 +348,13 @@
   "{{percentage}}% of Daily Translation Characters Used.": "日次翻訳文字数の使用量は{{percentage}}%です。",
   "Translation Characters": "翻訳文字数",
   "Daily translation quota reached. Select another translate service to proceed.": "日次翻訳クォータに達しました。続行するには別の翻訳サービスを選択してください。",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}}音声"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}}音声",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "何か問題が発生しました。心配しないでください。私たちのチームが通知を受けており、修正に取り組んでいます。",
+  "Error Details:": "エラーの詳細：",
+  "Try Again": "再試行",
+  "Need help?": "ヘルプが必要ですか？",
+  "Contact Support": "サポートに連絡",
+  "Code Highlighting": "コードハイライト",
+  "Enable Highlighting": "ハイライトを有効にする",
+  "Code Language": "コード言語"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -348,5 +348,13 @@
   "{{percentage}}% of Daily Translation Characters Used.": "일일 번역 문자 사용량 {{percentage}}%.",
   "Translation Characters": "번역 문자",
   "Daily translation quota reached. Select another translate service to proceed.": "일일 번역 할당량에 도달했습니다. 계속 진행하려면 다른 번역 서비스를 선택하세요.",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}}개의 음성"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}}개의 음성",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "문제가 발생했습니다. 걱정하지 마세요, 저희 팀이 이미 알림을 받았으며 해결 작업을 진행 중입니다.",
+  "Error Details:": "오류 세부사항:",
+  "Try Again": "다시 시도",
+  "Need help?": "도움이 필요하신가요?",
+  "Contact Support": "지원팀에 문의",
+  "Code Highlighting": "코드 하이라이팅",
+  "Enable Highlighting": "하이라이팅 활성화",
+  "Code Language": "코드 언어"
 }

apps/readest-app/public/locales/nl/translation.json

@@ -351,5 +351,13 @@
   "Translation Characters": "Vertaaltekens",
   "Daily translation quota reached. Select another translate service to proceed.": "Dagelijkse vertaalquotum bereikt. Selecteer een andere vertaalservice om door te gaan.",
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} stem",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} stemmen"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} stemmen",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Er is iets misgegaan. Maak je geen zorgen, ons team is op de hoogte gebracht en we werken aan een oplossing.",
+  "Error Details:": "Foutdetails:",
+  "Try Again": "Probeer opnieuw",
+  "Need help?": "Heb je hulp nodig?",
+  "Contact Support": "Neem contact op met ondersteuning",
+  "Code Highlighting": "Code markering",
+  "Enable Highlighting": "Markering inschakelen",
+  "Code Language": "Code taal"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -357,5 +357,13 @@
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} głos",
   "{{engine}}: {{count}} voices_few": "{{engine}}: {{count}} głosy",
   "{{engine}}: {{count}} voices_many": "{{engine}}: {{count}} głosów",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} głosu"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} głosu",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Coś poszło nie tak. Nie martw się, nasz zespół został powiadomiony i pracujemy nad naprawą.",
+  "Error Details:": "Informacje o błędzie:",
+  "Try Again": "Spróbuj ponownie",
+  "Need help?": "Potrzebujesz pomocy?",
+  "Contact Support": "Skontaktuj się z pomocą techniczną",
+  "Code Highlighting": "Podświetlanie kodu",
+  "Enable Highlighting": "Zezwól na podświetlanie",
+  "Code Language": "Język kodu"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -354,5 +354,13 @@
   "Daily translation quota reached. Select another translate service to proceed.": "Quota diária de tradução atingida. Selecione outro serviço de tradução para continuar.",
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} voz",
   "{{engine}}: {{count}} voices_many": "{{engine}}: {{count}} vozes",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} vozes"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} vozes",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Algo deu errado. Não se preocupe, nossa equipe foi notificada e estamos trabalhando em uma correção.",
+  "Error Details:": "Detalhes do Erro:",
+  "Try Again": "Tentar Novamente",
+  "Need help?": "Precisa de ajuda?",
+  "Contact Support": "Contato com Suporte",
+  "Code Highlighting": "Realce de Código",
+  "Enable Highlighting": "Ativar Realce",
+  "Code Language": "Idioma do Código"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -357,5 +357,13 @@
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} голос",
   "{{engine}}: {{count}} voices_few": "{{engine}}: {{count}} голоса",
   "{{engine}}: {{count}} voices_many": "{{engine}}: {{count}} голосов",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} голоса"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} голоса",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Что-то пошло не так. Не волнуйтесь, наша команда уведомлена и работает над исправлением.",
+  "Error Details:": "Подробности ошибки:",
+  "Try Again": "Попробовать снова",
+  "Need help?": "Нужна помощь?",
+  "Contact Support": "Связаться с поддержкой",
+  "Code Highlighting": "Подсветка кода",
+  "Enable Highlighting": "Включить подсветку",
+  "Code Language": "Язык кода"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -351,5 +351,13 @@
   "Translation Characters": "Çeviri Karakterleri",
   "Daily translation quota reached. Select another translate service to proceed.": "Günlük çeviri kotası aşıldı. Devam etmek için başka bir çeviri hizmeti seçin.",
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} ses",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} sesler"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} sesler",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Bir şeyler yanlış gitti. Endişelenmeyin, ekibimiz bilgilendirildi ve bir çözüm üzerinde çalışıyoruz.",
+  "Error Details:": "Error Detayları:",
+  "Try Again": "Tekrar Dene",
+  "Need help?": "Yardıma mı ihtiyacınız var?",
+  "Contact Support": "Destekle İletişime Geç",
+  "Code Highlighting": "Code Vurgulama",
+  "Enable Highlighting": "Vurgulamayı Etkinleştir",
+  "Code Language": "Code Dili"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -357,5 +357,13 @@
   "{{engine}}: {{count}} voices_one": "{{engine}}: {{count}} голос",
   "{{engine}}: {{count}} voices_few": "{{engine}}: {{count}} голоси",
   "{{engine}}: {{count}} voices_many": "{{engine}}: {{count}} голосів",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} голоси"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} голоси",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Щось пішло не так. Не хвилюйтеся, наша команда була сповіщена, і ми працюємо над виправленням.",
+  "Error Details:": "Деталі помилки:",
+  "Try Again": "Спробувати ще раз",
+  "Need help?": "Потрібна допомога?",
+  "Contact Support": "Зв'язатися з підтримкою",
+  "Code Highlighting": "Підсвічування коду",
+  "Enable Highlighting": "Увімкнути підсвічування",
+  "Code Language": "Мова коду"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -348,5 +348,13 @@
   "{{percentage}}% of Daily Translation Characters Used.": "{{percentage}}% số ký tự dịch hàng ngày đã sử dụng.",
   "Translation Characters": "Những ký tự dịch",
   "Daily translation quota reached. Select another translate service to proceed.": "Đã đạt hạn mức dịch hàng ngày. Chọn dịch vụ dịch khác để tiếp tục.",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} giọng"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} giọng",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "Đã xảy ra sự cố. Đừng lo, nhóm của chúng tôi đã được thông báo và chúng tôi đang làm việc để sửa chữa.",
+  "Error Details:": "Chi tiết lỗi:",
+  "Try Again": "Thử lại",
+  "Need help?": "Bạn cần giúp đỡ?",
+  "Contact Support": "Liên hệ hỗ trợ",
+  "Code Highlighting": "Đánh dấu mã",
+  "Enable Highlighting": "Cho phép đánh dấu",
+  "Code Language": "Ngôn ngữ mã"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -348,5 +348,13 @@
   "{{percentage}}% of Daily Translation Characters Used.": "已使用 {{percentage}}% 的每日翻译字符数",
   "Translation Characters": "翻译字数",
   "Daily translation quota reached. Select another translate service to proceed.": "已达到每日翻译配额，请选择其他翻译服务继续。",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} 种声音"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} 种声音",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "出了点问题。请不要担心，我们的团队已经收到通知并正在修复中。",
+  "Error Details:": "错误详情：",
+  "Try Again": "重试",
+  "Need help?": "需要帮助吗？",
+  "Contact Support": "联系客服",
+  "Code Highlighting": "代码高亮",
+  "Enable Highlighting": "启用高亮",
+  "Code Language": "代码语言"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -348,5 +348,13 @@
   "{{percentage}}% of Daily Translation Characters Used.": "已使用 {{percentage}}% 的每日翻譯字數",
   "Translation Characters": "翻譯字數",
   "Daily translation quota reached. Select another translate service to proceed.": "已達到每日翻譯字數限制，請選擇其他翻譯服務繼續。",
-  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} 種語音"
+  "{{engine}}: {{count}} voices_other": "{{engine}}: {{count}} 種語音",
+  "Something went wrong. Don't worry, our team has been notified and we're working on a fix.": "出了點問題。別擔心，我們的團隊已經收到通知，正在努力修復。",
+  "Error Details:": "錯誤詳情：",
+  "Try Again": "再試一次",
+  "Need help?": "需要幫助嗎？",
+  "Contact Support": "聯繫支援",
+  "Code Highlighting": "程式碼高亮",
+  "Enable Highlighting": "啟用高亮",
+  "Code Language": "程式語言"
 }

apps/readest-app/src/app/error.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useEffect } from 'react';
+import posthog from 'posthog-js';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface ErrorPageProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function Error({ error, reset }: ErrorPageProps) {
+  const _ = useTranslation();
+
+  useEffect(() => {
+    posthog.captureException(error);
+  }, [error]);
+
+  const handleGoHome = () => {
+    window.location.href = '/library';
+  };
+
+  const handleGoBack = () => {
+    if (window.history.length > 1) {
+      window.history.back();
+    } else {
+      handleGoHome();
+    }
+  };
+
+  return (
+    <div className='hero bg-base-200 min-h-screen'>
+      <div className='hero-content text-center'>
+        <div className='max-w-2xl'>
+          <div className='mb-8'>
+            <div className='text-error animate-pulse text-8xl'>⚠️</div>
+          </div>
+
+          <h1 className='text-base-content mb-4 text-5xl font-bold'>Oops!</h1>
+
+          <p className='text-base-content/70 mb-8 text-lg'>
+            {_(
+              "Something went wrong. Don't worry, our team has been notified and we're working on a fix.",
+            )}
+          </p>
+
+          <div className='alert alert-error mb-8'>
+            <div className='flex-col items-start text-left'>
+              <h3 className='mb-2 font-bold'>{_('Error Details:')}</h3>
+              <p className='break-words font-mono text-sm'>{error.message}</p>
+              {error.stack && (
+                <p className='mt-2 break-words font-mono text-sm'>
+                  {error.stack.split('\n').slice(0, 5).join('\n')}
+                </p>
+              )}
+              {error.digest && <p className='mt-2 text-xs opacity-70'>Error ID: {error.digest}</p>}
+            </div>
+          </div>
+
+          <div className='flex flex-col gap-4'>
+            <button onClick={reset} className='btn btn-primary btn-lg'>
+              <svg className='mr-2 h-5 w-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth={2}
+                  d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'
+                />
+              </svg>
+              {_('Try Again')}
+            </button>
+
+            <div className='flex gap-3'>
+              <button onClick={handleGoBack} className='btn btn-outline flex-1'>
+                <svg className='mr-2 h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth={2}
+                    d='M10 19l-7-7m0 0l7-7m-7 7h18'
+                  />
+                </svg>
+                {_('Go Back')}
+              </button>
+
+              <button onClick={handleGoHome} className='btn btn-outline flex-1'>
+                <svg className='mr-2 h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth={2}
+                    d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'
+                  />
+                </svg>
+                Home
+              </button>
+            </div>
+          </div>
+
+          <div className='border-base-300 mt-8 border-t pt-6'>
+            <p className='text-base-content/60 text-sm'>
+              {_('Need help?')}{' '}
+              <a href='mailto:support@readest.com' className='link link-primary'>
+                {_('Contact Support')}
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx

@@ -228,7 +228,7 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             <div className='card border-base-200 bg-base-100 border shadow'>
               <div className='divide-base-200'>
                 <div className='config-item'>
-                  <span className=''>{_('Enable Code Highlighting')}</span>
+                  <span className=''>{_('Enable Highlighting')}</span>
                   <input
                     type='checkbox'
                     className='toggle'
@@ -238,7 +238,7 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 </div>
 
                 <div className='config-item'>
-                  <span className=''>{_('Language Selection')}</span>
+                  <span className=''>{_('Code Language')}</span>
                   <Select
                     value={codeLanguage}
                     onChange={(event) => setCodeLanguage(event.target.value as CodeLanguage)}