From d7c29b7bec5019258f85719dcc7e37473909b9f7 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Fri, 1 May 2026 21:00:34 +0200
Subject: [PATCH] refactor: rework mobile mail viewer toolbar

---
 components/email/email-viewer.tsx | 85 +++++++++----------------------
 locales/cs/common.json            |  5 ++
 locales/de/common.json            |  5 ++
 locales/en/common.json            |  5 ++
 locales/es/common.json            |  5 ++
 locales/fr/common.json            |  5 ++
 locales/it/common.json            |  5 ++
 locales/ja/common.json            |  5 ++
 locales/ko/common.json            |  5 ++
 locales/lv/common.json            |  5 ++
 locales/nl/common.json            |  5 ++
 locales/pl/common.json            |  5 ++
 locales/pt/common.json            |  5 ++
 locales/ru/common.json            |  5 ++
 locales/tr/common.json            |  5 ++
 locales/uk/common.json            |  5 ++
 locales/zh/common.json            |  5 ++
 17 files changed, 104 insertions(+), 61 deletions(-)

diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 9d6b2bfb..5726b6f5 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -3095,7 +3095,7 @@ export function EmailViewer({
         <PluginSlot name="toolbar-actions" />
       </div>
 
-      {/* Right: Organize actions - order: archive, delete, move, star, tag, spam, read state, print, view source */}
+      {/* Right: Organize actions - order: archive, delete, move, tag, spam, read state, print, view source */}
       <div className="flex items-center gap-0 sm:gap-0.5">
         {/* Archive */}
         <Button
@@ -3104,11 +3104,11 @@ export function EmailViewer({
           onClick={onArchive}
           data-overflow-item
           data-overflow-priority="4"
-          className="hidden sm:inline-flex h-8 gap-1.5"
+          className="flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0"
           title={t('tooltips.archive')}
         >
           <Archive className="w-4 h-4" />
-          {showToolbarLabels && <span className="hidden sm:inline text-sm">{t('archive')}</span>}
+          {showToolbarLabels && <span className="text-[10px] leading-tight sm:text-sm">{t('archive')}</span>}
         </Button>
         {/* Delete */}
         <Button
@@ -3123,16 +3123,16 @@ export function EmailViewer({
         </Button>
         {/* Move to folder */}
         {moveTree.length > 0 && onMoveToMailbox && (
-          <div ref={moveMenuRef} data-overflow-item data-overflow-priority="5" className="relative hidden sm:block">
+          <div ref={moveMenuRef} data-overflow-item data-overflow-priority="5" className="relative">
             <Button
               variant="ghost"
               size="sm"
               onClick={() => { setMoveMenuOpen(!moveMenuOpen); setMoreMenuOpen(false); setTagMenuOpen(false); }}
-              className="h-8 gap-1.5"
+              className="flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0"
               title={t('move_to')}
             >
               <FolderInput className="w-4 h-4" />
-              {showToolbarLabels && <span className="text-sm">{t('move_to')}</span>}
+              {showToolbarLabels && <span className="text-[10px] leading-tight sm:text-sm">{t('move')}</span>}
             </Button>
             {moveMenuOpen && (
               <div className="absolute right-0 top-full mt-1 py-1 w-48 max-h-72 overflow-y-auto bg-background rounded-lg shadow-lg border border-border z-10">
@@ -3172,21 +3172,6 @@ export function EmailViewer({
             )}
           </div>
         )}
-        {/* Star/Flag toggle */}
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onToggleStar}
-          className="flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:w-auto sm:gap-1.5 sm:py-0 sm:px-2"
-          title={isStarred ? t('tooltips.unstar') : t('tooltips.star')}
-        >
-          <Star className={cn(
-            "w-4 h-4 transition-colors",
-            isStarred ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
-          )} />
-          <span className="text-[10px] leading-tight sm:hidden">{isStarred ? t('tooltips.unstar') : t('tooltips.star')}</span>
-        </Button>
-
         {/* Tag Picker - hidden on mobile, overflows to More menu */}
         <div data-overflow-item data-overflow-priority="6" className="hidden sm:flex items-center">
         <div className="w-px h-5 bg-border mx-0.5" />
@@ -3256,7 +3241,7 @@ export function EmailViewer({
         </div>
         </div>
 
-        {/* Spam - hidden on mobile, overflows to More menu */}
+        {/* Spam */}
         {(onMarkAsSpam || onUndoSpam) && (
           <Button
             variant="ghost"
@@ -3265,7 +3250,7 @@ export function EmailViewer({
             data-overflow-item
             data-overflow-priority="7"
             className={cn(
-              "hidden sm:inline-flex h-8 gap-1.5",
+              "flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0",
               isInJunkFolder ? "hover:bg-green-50 dark:hover:bg-green-950/30" : "hover:bg-red-50 dark:hover:bg-red-950/30"
             )}
             title={isInJunkFolder ? t('spam.not_spam_title') : t('spam.button_title')}
@@ -3275,20 +3260,22 @@ export function EmailViewer({
             ) : (
               <ShieldAlert className="h-4 w-4 text-red-600 dark:text-red-400" />
             )}
+            {showToolbarLabels && <span className="text-[10px] leading-tight sm:text-sm">{isInJunkFolder ? t('not_spam_short') : t('spam_short')}</span>}
           </Button>
         )}
 
-        {/* Toggle read state - hidden on mobile, overflows to More menu */}
+        {/* Toggle read state */}
         <Button
           variant="ghost"
           size="sm"
           onClick={() => onMarkAsRead?.(email.id, isUnread)}
           data-overflow-item
           data-overflow-priority="8"
-          className="hidden sm:inline-flex h-8 gap-1.5"
+          className="flex-col items-center gap-0.5 h-auto py-1.5 px-2 sm:flex-row sm:h-8 sm:gap-1.5 sm:py-0"
           title={isUnread ? t('mark_read') : t('mark_unread')}
         >
           {isUnread ? <MailOpen className="w-4 h-4" /> : <Mail className="w-4 h-4" />}
+          {showToolbarLabels && <span className="text-[10px] leading-tight sm:text-sm">{isUnread ? t('read') : t('unread')}</span>}
         </Button>
 
         {/* Print - hidden on mobile, overflows to More menu */}
@@ -3347,6 +3334,14 @@ export function EmailViewer({
           </Button>
           {moreMenuOpen && !isMobile && (
             <div className="absolute right-0 top-full mt-1 w-48 bg-background rounded-md shadow-lg border border-border z-10 py-1">
+              {/* Star toggle */}
+              <button
+                onClick={() => { onToggleStar?.(); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+                className="w-full px-3 py-1.5 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+              >
+                <Star className={cn("w-4 h-4", isStarred && "fill-yellow-400 text-yellow-400")} />
+                {isStarred ? t('tooltips.unstar') : t('tooltips.star')}
+              </button>
               {/* Overflow: reply */}
               <button
                 onClick={() => { onReply?.(); setMoreMenuOpen(false); setMoreMenuSub(null); }}
@@ -3600,24 +3595,14 @@ export function EmailViewer({
         <div className="flex-1 overflow-y-auto py-2">
           {moreMenuSub === null && (
             <>
+              {/* Star toggle */}
               <button
-                onClick={() => { onArchive?.(); setMoreMenuOpen(false); }}
+                onClick={() => { onToggleStar?.(); setMoreMenuOpen(false); }}
                 className="w-full px-4 py-3 min-h-[44px] text-sm text-left hover:bg-muted text-foreground flex items-center gap-3"
               >
-                <Archive className="w-5 h-5" />
-                {t('archive')}
+                <Star className={cn("w-5 h-5", isStarred && "fill-yellow-400 text-yellow-400")} />
+                {isStarred ? t('tooltips.unstar') : t('tooltips.star')}
               </button>
-              {/* Move to folder (opens sub-view) */}
-              {moveTree.length > 0 && onMoveToMailbox && (
-                <button
-                  onClick={() => setMoreMenuSub('move')}
-                  className="w-full px-4 py-3 min-h-[44px] text-sm text-left hover:bg-muted text-foreground flex items-center gap-3"
-                >
-                  <FolderInput className="w-5 h-5" />
-                  <span className="flex-1">{t('move_to')}</span>
-                  <ChevronRight className="w-4 h-4 text-muted-foreground" />
-                </button>
-              )}
               {/* Tag (opens sub-view) */}
               {colorOptions.length > 0 && (
                 <button
@@ -3637,28 +3622,6 @@ export function EmailViewer({
                   <ChevronRight className="w-4 h-4 text-muted-foreground" />
                 </button>
               )}
-              {/* Spam */}
-              {(onMarkAsSpam || onUndoSpam) && (
-                <button
-                  onClick={() => { (isInJunkFolder ? onUndoSpam : onMarkAsSpam)?.(); setMoreMenuOpen(false); }}
-                  className="w-full px-4 py-3 min-h-[44px] text-sm text-left hover:bg-muted text-foreground flex items-center gap-3"
-                >
-                  {isInJunkFolder ? (
-                    <ShieldCheck className="h-5 w-5 text-green-600 dark:text-green-400" />
-                  ) : (
-                    <ShieldAlert className="h-5 w-5 text-red-600 dark:text-red-400" />
-                  )}
-                  {isInJunkFolder ? t('spam.not_spam_title') : t('spam.button_title')}
-                </button>
-              )}
-              {/* Toggle read state */}
-              <button
-                onClick={() => { onMarkAsRead?.(email.id, isUnread); setMoreMenuOpen(false); }}
-                className="w-full px-4 py-3 min-h-[44px] text-sm text-left hover:bg-muted text-foreground flex items-center gap-3"
-              >
-                {isUnread ? <MailOpen className="w-5 h-5" /> : <Mail className="w-5 h-5" />}
-                {isUnread ? t('mark_read') : t('mark_unread')}
-              </button>
               <button
                 onClick={() => { handlePrint(); setMoreMenuOpen(false); }}
                 className="w-full px-4 py-3 min-h-[44px] text-sm text-left hover:bg-muted text-foreground flex items-center gap-3"
diff --git a/locales/cs/common.json b/locales/cs/common.json
index a638136f..e6c0b6b4 100644
--- a/locales/cs/common.json
+++ b/locales/cs/common.json
@@ -223,6 +223,11 @@
     "unstar": "Odebrat hvězdičku",
     "mark_unread": "Označit jako nepřečtené",
     "mark_read": "Označit jako přečtené",
+    "unread": "Nepřečtené",
+    "read": "Přečtené",
+    "spam_short": "Spam",
+    "not_spam_short": "Není spam",
+    "move": "Přesunout",
     "print": "Tisk",
     "view_source": "Zobrazit zdrojový kód",
     "export_email": "Exportovat jako .eml",
diff --git a/locales/de/common.json b/locales/de/common.json
index 897ec395..5c938227 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -223,6 +223,11 @@
     "unstar": "Stern entfernen",
     "mark_unread": "Als ungelesen markieren",
     "mark_read": "Als gelesen markieren",
+    "unread": "Ungelesen",
+    "read": "Gelesen",
+    "spam_short": "Spam",
+    "not_spam_short": "Kein Spam",
+    "move": "Verschieben",
     "print": "Drucken",
     "view_source": "Quelltext anzeigen",
     "export_email": "Als .eml exportieren",
diff --git a/locales/en/common.json b/locales/en/common.json
index b3020ed8..47d1fa68 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -223,6 +223,11 @@
     "unstar": "Unstar",
     "mark_unread": "Mark as unread",
     "mark_read": "Mark as read",
+    "unread": "Unread",
+    "read": "Read",
+    "spam_short": "Spam",
+    "not_spam_short": "Not spam",
+    "move": "Move",
     "print": "Print",
     "view_source": "View source",
     "export_email": "Export as .eml",
diff --git a/locales/es/common.json b/locales/es/common.json
index 7208d4c6..10cbdd07 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -223,6 +223,11 @@
     "unstar": "Quitar destacado",
     "mark_unread": "Marcar como no leído",
     "mark_read": "Marcar como leído",
+    "unread": "No leído",
+    "read": "Leído",
+    "spam_short": "Spam",
+    "not_spam_short": "No spam",
+    "move": "Mover",
     "print": "Imprimir",
     "view_source": "Ver código fuente",
     "export_email": "Exportar como .eml",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 8578b50f..c4857487 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -223,6 +223,11 @@
     "unstar": "Retirer des favoris",
     "mark_unread": "Marquer comme non lu",
     "mark_read": "Marquer comme lu",
+    "unread": "Non lu",
+    "read": "Lu",
+    "spam_short": "Spam",
+    "not_spam_short": "Non spam",
+    "move": "Déplacer",
     "print": "Imprimer",
     "view_source": "Voir la source",
     "export_email": "Exporter en .eml",
diff --git a/locales/it/common.json b/locales/it/common.json
index ee0c273d..dc1f082c 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -223,6 +223,11 @@
     "unstar": "Rimuovi stella",
     "mark_unread": "Segna come non letto",
     "mark_read": "Segna come letto",
+    "unread": "Non letto",
+    "read": "Letto",
+    "spam_short": "Spam",
+    "not_spam_short": "Non spam",
+    "move": "Sposta",
     "print": "Stampa",
     "view_source": "Visualizza sorgente",
     "export_email": "Esporta come .eml",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index 5bcd2395..e67fa936 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -223,6 +223,11 @@
     "unstar": "スターを外す",
     "mark_unread": "未読にする",
     "mark_read": "既読にする",
+    "unread": "未読",
+    "read": "既読",
+    "spam_short": "迷惑メール",
+    "not_spam_short": "迷惑メールでない",
+    "move": "移動",
     "print": "印刷",
     "view_source": "ソースを表示",
     "export_email": ".emlとしてエクスポート",
diff --git a/locales/ko/common.json b/locales/ko/common.json
index 7e3cff7a..7c00e835 100644
--- a/locales/ko/common.json
+++ b/locales/ko/common.json
@@ -223,6 +223,11 @@
     "unstar": "별표 해제",
     "mark_unread": "읽지 않은 상태로 표시",
     "mark_read": "읽은 상태로 표시",
+    "unread": "안 읽음",
+    "read": "읽음",
+    "spam_short": "스팸",
+    "not_spam_short": "스팸 아님",
+    "move": "이동",
     "print": "인쇄",
     "view_source": "원본 보기",
     "export_email": ".eml 파일로 내보내기",
diff --git a/locales/lv/common.json b/locales/lv/common.json
index d3b5c770..7abb64d6 100644
--- a/locales/lv/common.json
+++ b/locales/lv/common.json
@@ -223,6 +223,11 @@
     "unstar": "Noņemt zvaigznīti",
     "mark_unread": "Atzīmēt kā nelasītu",
     "mark_read": "Atzīmēt kā izlasītu",
+    "unread": "Nelasīts",
+    "read": "Lasīts",
+    "spam_short": "Spams",
+    "not_spam_short": "Nav spams",
+    "move": "Pārvietot",
     "print": "Drukāt",
     "view_source": "Skatīt avota kodu",
     "export_email": "Eksportēt kā .eml",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index 8b012985..d752be42 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -223,6 +223,11 @@
     "unstar": "Ster verwijderen",
     "mark_unread": "Markeren als ongelezen",
     "mark_read": "Markeren als gelezen",
+    "unread": "Ongelezen",
+    "read": "Gelezen",
+    "spam_short": "Spam",
+    "not_spam_short": "Geen spam",
+    "move": "Verplaatsen",
     "print": "Afdrukken",
     "view_source": "Bron bekijken",
     "export_email": "Exporteren als .eml",
diff --git a/locales/pl/common.json b/locales/pl/common.json
index fb57eabc..b8245b42 100644
--- a/locales/pl/common.json
+++ b/locales/pl/common.json
@@ -223,6 +223,11 @@
     "unstar": "Usuń gwiazdkę",
     "mark_unread": "Oznacz jako nieprzeczytane",
     "mark_read": "Oznacz jako przeczytane",
+    "unread": "Nieprzeczytane",
+    "read": "Przeczytane",
+    "spam_short": "Spam",
+    "not_spam_short": "Nie spam",
+    "move": "Przenieś",
     "print": "Drukuj",
     "view_source": "Pokaż źródło",
     "export_email": "Eksportuj jako .eml",
diff --git a/locales/pt/common.json b/locales/pt/common.json
index 05d72752..df87b588 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -223,6 +223,11 @@
     "unstar": "Remover Estrela",
     "mark_unread": "Marcar como não lido",
     "mark_read": "Marcar como lido",
+    "unread": "Não lido",
+    "read": "Lido",
+    "spam_short": "Spam",
+    "not_spam_short": "Não spam",
+    "move": "Mover",
     "print": "Imprimir",
     "view_source": "Ver código-fonte",
     "export_email": "Exportar como .eml",
diff --git a/locales/ru/common.json b/locales/ru/common.json
index 37be56ae..609af525 100644
--- a/locales/ru/common.json
+++ b/locales/ru/common.json
@@ -223,6 +223,11 @@
     "unstar": "Снять пометку",
     "mark_unread": "Отметить непрочитанным",
     "mark_read": "Отметить прочитанным",
+    "unread": "Не прочитано",
+    "read": "Прочитано",
+    "spam_short": "Спам",
+    "not_spam_short": "Не спам",
+    "move": "Переместить",
     "print": "Распечатать",
     "view_source": "Просмотреть исходный код",
     "export_email": "Экспортировать как .eml",
diff --git a/locales/tr/common.json b/locales/tr/common.json
index 045c5945..5d8baa16 100644
--- a/locales/tr/common.json
+++ b/locales/tr/common.json
@@ -223,6 +223,11 @@
     "unstar": "Yıldızı Kaldır",
     "mark_unread": "Okunmadı olarak işaretle",
     "mark_read": "Okundu olarak işaretle",
+    "unread": "Okunmadı",
+    "read": "Okundu",
+    "spam_short": "Spam",
+    "not_spam_short": "Spam değil",
+    "move": "Taşı",
     "print": "Yazdır",
     "view_source": "Kaynağı görüntüle",
     "export_email": ".eml olarak dışa aktar",
diff --git a/locales/uk/common.json b/locales/uk/common.json
index 3702630a..20d15cc1 100644
--- a/locales/uk/common.json
+++ b/locales/uk/common.json
@@ -223,6 +223,11 @@
     "unstar": "Зняти зірочку",
     "mark_unread": "Позначити як непрочитане",
     "mark_read": "Позначити як прочитане",
+    "unread": "Непрочитане",
+    "read": "Прочитане",
+    "spam_short": "Спам",
+    "not_spam_short": "Не спам",
+    "move": "Перенести",
     "print": "Роздрукувати",
     "view_source": "Переглянути джерело",
     "export_email": "Експортувати як .eml",
diff --git a/locales/zh/common.json b/locales/zh/common.json
index b6d00b09..28432a26 100644
--- a/locales/zh/common.json
+++ b/locales/zh/common.json
@@ -223,6 +223,11 @@
     "unstar": "取消星标",
     "mark_unread": "标记为未读",
     "mark_read": "标记为已读",
+    "unread": "未读",
+    "read": "已读",
+    "spam_short": "垃圾邮件",
+    "not_spam_short": "非垃圾邮件",
+    "move": "移动",
     "print": "打印",
     "view_source": "查看源码",
     "export_email": "导出为 .eml",