From cc8195209bb9c9942f42b32b7626a43e2aa8c2a8 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 11 Mar 2026 22:42:21 +0100
Subject: [PATCH] feat: add toolbar position setting and update email viewer
 layout

- Introduced a new setting for toolbar position in appearance settings, allowing users to choose between 'top' and 'below-subject'.
- Updated the EmailViewer component to conditionally render the toolbar based on the selected position.
- Enhanced the UI for the toolbar with action buttons for replying, archiving, and deleting emails.
- Added translations for the new toolbar position setting in multiple languages.
---
 components/email/email-viewer.tsx           | 761 ++++++++++++--------
 components/settings/appearance-settings.tsx |  16 +-
 locales/de/common.json                      |   6 +
 locales/en/common.json                      |   6 +
 locales/es/common.json                      |   6 +
 locales/fr/common.json                      |   6 +
 locales/it/common.json                      |   6 +
 locales/ja/common.json                      |   6 +
 locales/nl/common.json                      |   6 +
 locales/pt/common.json                      |   6 +
 stores/settings-store.ts                    |   8 +
 11 files changed, 524 insertions(+), 309 deletions(-)

diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 3ea28d0b..162f2443 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -20,7 +20,6 @@ import {
   ChevronUp,
   ChevronLeft,
   Download,
-  Paperclip,
   Mail,
   Clock,
   Loader2,
@@ -417,6 +416,7 @@ export function EmailViewer({
   const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
   const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
+  const toolbarPosition = useSettingsStore((state) => state.toolbarPosition);
 
   // Detect if current mailbox is Junk folder
   const isInJunkFolder = currentMailboxRole === 'junk';
@@ -899,15 +899,229 @@ export function EmailViewer({
           </div>
         </div>
       )}
-      {/* Subject Bar - sticky on mobile/tablet for quick actions */}
+      {/* === TOOLBAR (top position) === */}
+      {toolbarPosition === 'top' && (
+        <div className={cn(
+          "bg-background border-b border-border",
+          "max-lg:sticky max-lg:top-0 max-lg:z-10"
+        )}>
+          <div className="px-4 lg:px-6 py-2">
+            <div className="flex items-center justify-between gap-2">
+              {/* Left: Back + Reply actions */}
+              <div className="flex items-center gap-1">
+                {isTablet && !tabletListVisible && onBack && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={onBack}
+                    className="h-9 w-9 flex-shrink-0 -ml-1"
+                    aria-label={t('back_to_list')}
+                  >
+                    <ChevronLeft className="w-5 h-5" />
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onReply?.()}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.reply')}
+                >
+                  <Reply className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('reply')}</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onReplyAll}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.reply_all')}
+                >
+                  <ReplyAll className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('reply_all')}</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onForward}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.forward')}
+                >
+                  <Forward className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('forward')}</span>
+                </Button>
+              </div>
+
+              {/* Right: Organize actions */}
+              <div className="flex items-center gap-0.5">
+                {isLoading && (
+                  <div className="mr-2 flex items-center gap-1.5 text-muted-foreground">
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  </div>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onArchive}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.archive')}
+                >
+                  <Archive className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('archive')}</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onDelete}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.delete')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('delete')}</span>
+                </Button>
+                {(onMarkAsSpam || onUndoSpam) && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={isInJunkFolder ? onUndoSpam : onMarkAsSpam}
+                    className={cn(
+                      "h-8 gap-1.5",
+                      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')}
+                  >
+                    {isInJunkFolder ? (
+                      <ShieldCheck className="h-4 w-4 text-green-600 dark:text-green-400" />
+                    ) : (
+                      <ShieldAlert className="h-4 w-4 text-red-600 dark:text-red-400" />
+                    )}
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={onToggleStar}
+                  className="h-8 w-8"
+                  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"
+                  )} />
+                </Button>
+
+                <div className="w-px h-5 bg-border mx-0.5" />
+
+                {/* Tag Picker */}
+                <div className="relative group hidden sm:block">
+                  <button
+                    className={cn(
+                      "h-8 rounded hover:bg-muted flex items-center gap-1.5 px-2",
+                      currentColor && "bg-muted/50"
+                    )}
+                    title={t('set_color')}
+                  >
+                    {(() => {
+                      const kw = currentColor ? emailKeywords.find(k => k.id === currentColor) : null;
+                      const dotClass = kw ? KEYWORD_PALETTE[kw.color]?.dot : null;
+                      return dotClass ? (
+                        <>
+                          <span className={cn("w-3 h-3 rounded-full", dotClass)} />
+                          <span className="text-xs font-medium text-foreground">{kw!.label}</span>
+                        </>
+                      ) : (
+                        <>
+                          <Tag className="w-4 h-4 text-muted-foreground" />
+                          <span className="text-xs text-muted-foreground">{t('tag')}</span>
+                        </>
+                      );
+                    })()}
+                  </button>
+                  <div className="absolute right-0 top-full mt-1 py-1 w-40 bg-background rounded-lg shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10">
+                    {colorOptions.map((option) => (
+                      <button
+                        key={option.value}
+                        onClick={() => { if (email) onSetColorTag?.(email.id, option.value); }}
+                        className={cn(
+                          "w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2",
+                          currentColor === option.value && "bg-accent font-medium"
+                        )}
+                      >
+                        <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
+                        <span className="truncate">{option.name}</span>
+                        {currentColor === option.value && <Check className="w-3 h-3 ml-auto flex-shrink-0 text-foreground" />}
+                      </button>
+                    ))}
+                    {currentColor && (
+                      <>
+                        <div className="h-px bg-border my-1" />
+                        <button
+                          onClick={() => { if (email) onSetColorTag?.(email.id, null); }}
+                          className="w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2 text-muted-foreground"
+                        >
+                          <X className="w-3 h-3 flex-shrink-0" />
+                          <span>{t('remove_color')}</span>
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => window.print()}
+                  className="h-8 gap-1.5"
+                  title={t('print')}
+                >
+                  <Printer className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('print')}</span>
+                </Button>
+
+                {/* More menu */}
+                <div className="relative group">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    title={t('more_actions')}
+                  >
+                    <MoreVertical className="w-4 h-4 text-muted-foreground" />
+                  </Button>
+                  <div className="absolute right-0 top-full mt-1 w-44 bg-background rounded-md shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+                    <button
+                      onClick={() => setShowSourceModal(true)}
+                      className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                    >
+                      <Code className="w-4 h-4" />
+                      {t('view_source')}
+                    </button>
+                    {onShowShortcuts && (
+                      <button
+                        onClick={onShowShortcuts}
+                        className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                      >
+                        <Keyboard className="w-4 h-4" />
+                        {t('keyboard_shortcuts')}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* === SUBJECT BLOCK === */}
       <div className={cn(
         "bg-background border-b border-border",
-        "max-lg:sticky max-lg:top-0 max-lg:z-10"
+        toolbarPosition === 'below-subject' && "max-lg:sticky max-lg:top-0 max-lg:z-10"
       )}>
         <div className="px-4 lg:px-6 py-3 lg:py-4">
           <div className="flex items-start justify-between gap-2 lg:gap-4">
-            {/* Tablet Back Button - show when list is hidden */}
-            {isTablet && !tabletListVisible && onBack && (
+            {/* Back button (for below-subject mode on tablet) */}
+            {toolbarPosition === 'below-subject' && isTablet && !tabletListVisible && onBack && (
               <Button
                 variant="ghost"
                 size="icon"
@@ -919,10 +1133,33 @@ export function EmailViewer({
               </Button>
             )}
             <div className="flex-1 min-w-0">
-              <h1 className="text-lg lg:text-2xl font-bold text-foreground tracking-tight truncate pr-2">
-                {email.subject || t('no_subject')}
-              </h1>
-              <div className="flex items-center gap-2 lg:gap-3 mt-1.5 lg:mt-2 text-xs lg:text-sm text-muted-foreground flex-wrap lg:flex-nowrap">
+              <div className="flex items-center gap-2">
+                <h1 className="text-lg lg:text-2xl font-bold text-foreground tracking-tight truncate">
+                  {email.subject || t('no_subject')}
+                </h1>
+                {/* Star inline with subject (top toolbar mode) */}
+                {toolbarPosition === 'top' && (
+                  <button
+                    onClick={onToggleStar}
+                    className="flex-shrink-0 p-1 rounded hover:bg-muted transition-colors"
+                    title={isStarred ? t('tooltips.unstar') : t('tooltips.star')}
+                  >
+                    <Star className={cn(
+                      "w-4 h-4 lg:w-5 lg:h-5 transition-colors",
+                      isStarred ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground/40"
+                    )} />
+                  </button>
+                )}
+                {/* Color tag dot */}
+                {currentColor && (() => {
+                  const kw = emailKeywords.find(k => k.id === currentColor);
+                  const dotClass = kw ? KEYWORD_PALETTE[kw.color]?.dot : null;
+                  return dotClass ? (
+                    <span className={cn("w-2.5 h-2.5 rounded-full flex-shrink-0", dotClass)} title={kw!.label} />
+                  ) : null;
+                })()}
+              </div>
+              <div className="flex items-center gap-2 lg:gap-3 mt-1 lg:mt-1.5 text-xs lg:text-sm text-muted-foreground">
                 <span className="flex items-center gap-1 lg:gap-1.5 whitespace-nowrap">
                   <Clock className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
                   {new Date(email.receivedAt).toLocaleString('en-US', {
@@ -934,12 +1171,6 @@ export function EmailViewer({
                     minute: '2-digit'
                   })}
                 </span>
-                {email.hasAttachment && (
-                  <span className="flex items-center gap-1 lg:gap-1.5 whitespace-nowrap">
-                    <Paperclip className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
-                    <span className="hidden lg:inline">{t('attachments')}</span>
-                  </span>
-                )}
                 {isImportant && (
                   <span className="px-1.5 lg:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap">
                     {t('important')}
@@ -947,246 +1178,211 @@ export function EmailViewer({
                 )}
               </div>
             </div>
+          </div>
+        </div>
+      </div>
 
-            {/* Quick Actions */}
-            <div className="flex items-center gap-0.5 flex-shrink-0">
-              {/* Loading indicator */}
-              {isLoading && (
-                <div className="mr-2 flex items-center gap-1.5 text-muted-foreground hidden lg:flex">
-                  <Loader2 className="w-4 h-4 animate-spin" />
-                  <span className="text-xs">{t('loading')}</span>
-                </div>
-              )}
-              {/* Primary Reply Button */}
-              <Button
-                onClick={() => onReply?.()}
-                size="sm"
-                className="mr-1 h-10 lg:h-9"
-                title={t('tooltips.reply')}
-              >
-                <Reply className="w-4 h-4" />
-                <span className="ml-1.5 hidden lg:inline">Reply</span>
-              </Button>
-
-              {/* Reply Options Dropdown - hidden on mobile/tablet */}
-              <div className="relative group mr-3 hidden lg:block">
+      {/* === TOOLBAR (below-subject position) === */}
+      {toolbarPosition === 'below-subject' && (
+        <div className="bg-background border-b border-border">
+          <div className="px-4 lg:px-6 py-1.5">
+            <div className="flex items-center justify-between gap-2">
+              {/* Left: Reply actions */}
+              <div className="flex items-center gap-0.5">
                 <Button
                   variant="ghost"
-                  size="icon"
-                  className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted"
-                  title={t('more_reply_options')}
+                  size="sm"
+                  onClick={() => onReply?.()}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.reply')}
                 >
-                  <ChevronDown className="w-4 h-4 text-muted-foreground" />
+                  <Reply className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('reply')}</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onReplyAll}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.reply_all')}
+                >
+                  <ReplyAll className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('reply_all')}</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onForward}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.forward')}
+                >
+                  <Forward className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('forward')}</span>
                 </Button>
-                <div className="absolute right-0 top-full mt-1 w-40 bg-background rounded-md shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
-                  <button
-                    onClick={onReplyAll}
-                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
-                  >
-                    <ReplyAll className="w-4 h-4" />
-                    Reply all
-                  </button>
-                  <button
-                    onClick={onForward}
-                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
-                  >
-                    <Forward className="w-4 h-4" />
-                    Forward
-                  </button>
-                </div>
               </div>
 
-              <div className="w-px h-5 bg-border hidden lg:block" />
-
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={onArchive}
-                className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted hidden lg:flex"
-                title={t('tooltips.archive')}
-              >
-                <Archive className="w-4 h-4 text-muted-foreground" />
-              </Button>
-
-              {/* Spam/Not Spam Button - Desktop only, contextual based on folder */}
-              {(onMarkAsSpam || onUndoSpam) && (
+              {/* Right: Organize actions */}
+              <div className="flex items-center gap-0.5">
+                {isLoading && (
+                  <div className="mr-2 flex items-center gap-1.5 text-muted-foreground">
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  </div>
+                )}
                 <Button
                   variant="ghost"
-                  size="icon"
-                  onClick={isInJunkFolder ? onUndoSpam : onMarkAsSpam}
-                  className={cn(
-                    "hidden h-10 w-10 lg:h-8 lg:w-8 lg:flex",
-                    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')}
+                  size="sm"
+                  onClick={onArchive}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.archive')}
                 >
-                  {isInJunkFolder ? (
-                    <ShieldCheck className="h-4 w-4 text-green-600 dark:text-green-400" />
-                  ) : (
-                    <ShieldAlert className="h-4 w-4 text-red-600 dark:text-red-400" />
-                  )}
+                  <Archive className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('archive')}</span>
                 </Button>
-              )}
-
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={onDelete}
-                className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted"
-                title={t('tooltips.delete')}
-              >
-                <Trash2 className="w-4 h-4 text-muted-foreground" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={onToggleStar}
-                className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted hidden lg:flex"
-                title={isStarred ? "Unstar" : "Star"}
-              >
-                <Star className={cn(
-                  "w-4 h-4 transition-colors",
-                  isStarred ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
-                )} />
-              </Button>
-
-              <div className="w-px h-5 bg-border mx-1 hidden lg:block" />
-
-              {/* Tag Picker - hidden on mobile/tablet */}
-              <div className="relative group hidden lg:block">
-                <button
-                  className={cn(
-                    "h-8 rounded hover:bg-muted flex items-center gap-1.5 px-2",
-                    currentColor && "bg-muted/50"
-                  )}
-                  title={t('set_color')}
-                >
-                  {(() => {
-                    const kw = currentColor ? emailKeywords.find(k => k.id === currentColor) : null;
-                    const dotClass = kw ? KEYWORD_PALETTE[kw.color]?.dot : null;
-                    return dotClass ? (
-                      <>
-                        <span className={cn("w-3 h-3 rounded-full", dotClass)} />
-                        <span className="text-xs font-medium text-foreground">{kw!.label}</span>
-                      </>
+                {(onMarkAsSpam || onUndoSpam) && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={isInJunkFolder ? onUndoSpam : onMarkAsSpam}
+                    className={cn(
+                      "h-8 gap-1.5",
+                      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')}
+                  >
+                    {isInJunkFolder ? (
+                      <ShieldCheck className="h-4 w-4 text-green-600 dark:text-green-400" />
                     ) : (
-                      <>
-                        <Tag className="w-4 h-4 text-muted-foreground" />
-                        <span className="text-xs text-muted-foreground">{t('tag')}</span>
-                      </>
-                    );
-                  })()}
-                </button>
-
-                {/* Tag dropdown on hover */}
-                <div className="absolute right-0 top-full mt-1 py-1 w-40 bg-background rounded-lg shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10">
-                  {colorOptions.map((option) => (
-                    <button
-                      key={option.value}
-                      onClick={() => {
-                        if (email) {
-                          onSetColorTag?.(email.id, option.value);
-                        }
-                      }}
-                      className={cn(
-                        "w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2",
-                        currentColor === option.value && "bg-accent font-medium"
-                      )}
-                    >
-                      <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                      <span className="truncate">{option.name}</span>
-                      {currentColor === option.value && (
-                        <Check className="w-3 h-3 ml-auto flex-shrink-0 text-foreground" />
-                      )}
-                    </button>
-                  ))}
-                  {currentColor && (
-                    <>
-                      <div className="h-px bg-border my-1" />
-                      <button
-                        onClick={() => {
-                          if (email) {
-                            onSetColorTag?.(email.id, null);
-                          }
-                        }}
-                        className="w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2 text-muted-foreground"
-                      >
-                        <X className="w-3 h-3 flex-shrink-0" />
-                        <span>{t('remove_color')}</span>
-                      </button>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              {/* More Actions Dropdown */}
-              <div className="relative group">
+                      <ShieldAlert className="h-4 w-4 text-red-600 dark:text-red-400" />
+                    )}
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onDelete}
+                  className="h-8 gap-1.5"
+                  title={t('tooltips.delete')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('delete')}</span>
+                </Button>
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted"
-                  title={t('more_actions')}
+                  onClick={onToggleStar}
+                  className="h-8 w-8"
+                  title={isStarred ? t('tooltips.unstar') : t('tooltips.star')}
                 >
-                  <MoreVertical className="w-4 h-4 text-muted-foreground" />
+                  <Star className={cn(
+                    "w-4 h-4 transition-colors",
+                    isStarred ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
+                  )} />
                 </Button>
-                <div className="absolute right-0 top-full mt-1 w-44 bg-background rounded-md shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+
+                <div className="w-px h-5 bg-border mx-0.5" />
+
+                {/* Tag Picker */}
+                <div className="relative group hidden sm:block">
                   <button
-                    onClick={() => setShowSourceModal(true)}
-                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                    className={cn(
+                      "h-8 rounded hover:bg-muted flex items-center gap-1.5 px-2",
+                      currentColor && "bg-muted/50"
+                    )}
+                    title={t('set_color')}
                   >
-                    <Code className="w-4 h-4" />
-                    {t('view_source')}
-                  </button>
-                  <button
-                    onClick={() => window.print()}
-                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
-                  >
-                    <Printer className="w-4 h-4" />
-                    {t('print')}
-                  </button>
-                  {onShowShortcuts && (
-                    <button
-                      onClick={onShowShortcuts}
-                      className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
-                    >
-                      <Keyboard className="w-4 h-4" />
-                      {t('keyboard_shortcuts')}
-                    </button>
-                  )}
-                  {/* Separator */}
-                  <div className="h-px bg-border my-1" />
-                  {/* Spam action - contextual */}
-                  {(onMarkAsSpam || onUndoSpam) && (
-                    <button
-                      onClick={isInJunkFolder ? onUndoSpam : onMarkAsSpam}
-                      className={cn(
-                        "w-full px-3 py-2 text-sm text-left hover:bg-muted flex items-center gap-2",
-                        isInJunkFolder ? "text-green-700 dark:text-green-400" : "text-red-700 dark:text-red-400"
-                      )}
-                    >
-                      {isInJunkFolder ? (
+                    {(() => {
+                      const kw = currentColor ? emailKeywords.find(k => k.id === currentColor) : null;
+                      const dotClass = kw ? KEYWORD_PALETTE[kw.color]?.dot : null;
+                      return dotClass ? (
                         <>
-                          <ShieldCheck className="w-4 h-4" />
-                          {t('spam.not_spam_title')}
+                          <span className={cn("w-3 h-3 rounded-full", dotClass)} />
+                          <span className="text-xs font-medium text-foreground">{kw!.label}</span>
                         </>
                       ) : (
                         <>
-                          <ShieldAlert className="w-4 h-4" />
-                          {t('spam.button_title')}
+                          <Tag className="w-4 h-4 text-muted-foreground" />
+                          <span className="text-xs text-muted-foreground">{t('tag')}</span>
                         </>
-                      )}
+                      );
+                    })()}
+                  </button>
+                  <div className="absolute right-0 top-full mt-1 py-1 w-40 bg-background rounded-lg shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10">
+                    {colorOptions.map((option) => (
+                      <button
+                        key={option.value}
+                        onClick={() => { if (email) onSetColorTag?.(email.id, option.value); }}
+                        className={cn(
+                          "w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2",
+                          currentColor === option.value && "bg-accent font-medium"
+                        )}
+                      >
+                        <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
+                        <span className="truncate">{option.name}</span>
+                        {currentColor === option.value && <Check className="w-3 h-3 ml-auto flex-shrink-0 text-foreground" />}
+                      </button>
+                    ))}
+                    {currentColor && (
+                      <>
+                        <div className="h-px bg-border my-1" />
+                        <button
+                          onClick={() => { if (email) onSetColorTag?.(email.id, null); }}
+                          className="w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2 text-muted-foreground"
+                        >
+                          <X className="w-3 h-3 flex-shrink-0" />
+                          <span>{t('remove_color')}</span>
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => window.print()}
+                  className="h-8 gap-1.5"
+                  title={t('print')}
+                >
+                  <Printer className="w-4 h-4" />
+                  <span className="hidden sm:inline text-sm">{t('print')}</span>
+                </Button>
+
+                {/* More Actions */}
+                <div className="relative group">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    title={t('more_actions')}
+                  >
+                    <MoreVertical className="w-4 h-4 text-muted-foreground" />
+                  </Button>
+                  <div className="absolute right-0 top-full mt-1 w-44 bg-background rounded-md shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+                    <button
+                      onClick={() => setShowSourceModal(true)}
+                      className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                    >
+                      <Code className="w-4 h-4" />
+                      {t('view_source')}
                     </button>
-                  )}
+                    {onShowShortcuts && (
+                      <button
+                        onClick={onShowShortcuts}
+                        className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                      >
+                        <Keyboard className="w-4 h-4" />
+                        {t('keyboard_shortcuts')}
+                      </button>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      )}
 
-      {/* Sender Info - Desktop only (hidden on mobile/tablet, they see it in scrollable content) */}
+      {/* === SENDER INFO (Desktop) === */}
       <div className="hidden lg:block bg-background border-b border-border px-6 py-4">
           <div className="flex items-start gap-4">
             <Avatar
@@ -1537,6 +1733,40 @@ export function EmailViewer({
           </div>
       </div>
 
+      {/* === ATTACHMENTS (integrated into header) === */}
+      {email.attachments && email.attachments.length > 0 && (
+        <div className="bg-background border-b border-border px-4 lg:px-6 py-3">
+          <div className="flex items-start gap-2 flex-wrap">
+            {email.attachments.map((attachment, i) => {
+              const FileIcon = getFileIcon(attachment.name, attachment.type);
+              return (
+                <button
+                  key={i}
+                  className="inline-flex items-center gap-2 px-3 py-2 bg-muted/60 hover:bg-accent rounded-lg transition-colors group border border-border/50"
+                  title={`${t('download')} ${attachment.name} (${formatFileSize(attachment.size)})`}
+                  onClick={() => {
+                    if (attachment.blobId && onDownloadAttachment) {
+                      onDownloadAttachment(attachment.blobId, attachment.name || 'download', attachment.type);
+                    }
+                  }}
+                >
+                  <FileIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                  <div className="flex flex-col items-start min-w-0">
+                    <span className="text-sm text-foreground truncate max-w-[200px]">
+                      {attachment.name || "Unnamed"}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {formatFileSize(attachment.size)}
+                    </span>
+                  </div>
+                  <Download className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
       {/* Email Content Area */}
       <div className="flex-1 overflow-auto bg-muted/30">
         {/* Mobile/Tablet Sender Info - scrolls with content */}
@@ -1649,89 +1879,6 @@ export function EmailViewer({
 
         <div>
 
-          {/* Inline Attachments */}
-          {email.attachments && email.attachments.length > 0 && (
-            <div className="mb-4 px-6">
-              {/* Image attachments as thumbnails */}
-              {email.attachments.filter(a =>
-                a.type?.startsWith('image/') ||
-                ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(a.name?.split('.').pop()?.toLowerCase() || '')
-              ).length > 0 && (
-                <div className="mb-3">
-                  <div className="flex flex-wrap gap-2">
-                    {email.attachments
-                      .filter(a =>
-                        a.type?.startsWith('image/') ||
-                        ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(a.name?.split('.').pop()?.toLowerCase() || '')
-                      )
-                      .map((attachment, i) => (
-                        <div
-                          key={i}
-                          className="relative group cursor-pointer"
-                          title={attachment.name}
-                          onClick={() => {
-                            if (attachment.blobId && onDownloadAttachment) {
-                              onDownloadAttachment(attachment.blobId, attachment.name || 'download', attachment.type);
-                            }
-                          }}
-                        >
-                          <div className="w-32 h-32 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
-                            <div className="w-full h-full flex items-center justify-center">
-                              <FileImage className="w-12 h-12 text-gray-400 dark:text-gray-500" />
-                            </div>
-                          </div>
-                          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition-all rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100">
-                            <Download className="w-6 h-6 text-white" />
-                          </div>
-                          <div className="mt-1 text-xs text-gray-600 dark:text-gray-400 truncate max-w-[128px]">
-                            {attachment.name}
-                          </div>
-                        </div>
-                      ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Non-image attachments in a compact list */}
-              {email.attachments.filter(a =>
-                !a.type?.startsWith('image/') &&
-                !['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(a.name?.split('.').pop()?.toLowerCase() || '')
-              ).length > 0 && (
-                <div className="flex items-center gap-2 flex-wrap">
-                  <Paperclip className="w-4 h-4 text-muted-foreground" />
-                  {email.attachments
-                    .filter(a =>
-                      !a.type?.startsWith('image/') &&
-                      !['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(a.name?.split('.').pop()?.toLowerCase() || '')
-                    )
-                    .map((attachment, i) => {
-                      const FileIcon = getFileIcon(attachment.name, attachment.type);
-                      return (
-                        <button
-                          key={i}
-                          className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-muted hover:bg-accent rounded-md transition-colors group"
-                          title={`Download ${attachment.name} (${formatFileSize(attachment.size)})`}
-                          onClick={() => {
-                            if (attachment.blobId && onDownloadAttachment) {
-                              onDownloadAttachment(attachment.blobId, attachment.name || 'download', attachment.type);
-                            }
-                          }}
-                        >
-                          <FileIcon className="w-3.5 h-3.5 text-muted-foreground" />
-                          <span className="text-sm text-foreground">
-                            {attachment.name || "Unnamed"}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            ({formatFileSize(attachment.size)})
-                          </span>
-                        </button>
-                      );
-                    })}
-                </div>
-              )}
-            </div>
-          )}
-
           {/* Email Body */}
           <div className="email-content-wrapper overflow-x-auto">
             {emailContent.isHtml ? (
diff --git a/components/settings/appearance-settings.tsx b/components/settings/appearance-settings.tsx
index be32c17d..7363e9f6 100644
--- a/components/settings/appearance-settings.tsx
+++ b/components/settings/appearance-settings.tsx
@@ -2,14 +2,14 @@
 
 import { useTranslations } from 'next-intl';
 import { useThemeStore } from '@/stores/theme-store';
-import { useSettingsStore } from '@/stores/settings-store';
+import { useSettingsStore, type ToolbarPosition } from '@/stores/settings-store';
 import { LanguageSwitcher } from '@/components/ui/language-switcher';
 import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
 
 export function AppearanceSettings() {
   const t = useTranslations('settings.appearance');
   const { theme, setTheme } = useThemeStore();
-  const { fontSize, listDensity, animationsEnabled, updateSetting } = useSettingsStore();
+  const { fontSize, listDensity, animationsEnabled, toolbarPosition, updateSetting } = useSettingsStore();
 
   return (
     <SettingsSection title={t('title')} description={t('description')}>
@@ -59,6 +59,18 @@ export function AppearanceSettings() {
         />
       </SettingItem>
 
+      {/* Toolbar Position */}
+      <SettingItem label={t('toolbar_position.label')} description={t('toolbar_position.description')}>
+        <RadioGroup
+          value={toolbarPosition}
+          onChange={(value) => updateSetting('toolbarPosition', value as ToolbarPosition)}
+          options={[
+            { value: 'top', label: t('toolbar_position.top') },
+            { value: 'below-subject', label: t('toolbar_position.below_subject') },
+          ]}
+        />
+      </SettingItem>
+
       {/* Animations */}
       <SettingItem label={t('animations.label')} description={t('animations.description')}>
         <ToggleSwitch
diff --git a/locales/de/common.json b/locales/de/common.json
index 1acc9aff..66499ed7 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -487,6 +487,12 @@
       "animations": {
         "label": "Animationen aktivieren",
         "description": "Weiche Übergänge und Effekte anzeigen"
+      },
+      "toolbar_position": {
+        "label": "Symbolleistenposition",
+        "description": "Wo die E-Mail-Aktionsschaltflächen angezeigt werden (Antworten, Archivieren, Löschen usw.)",
+        "top": "Oben",
+        "below_subject": "Unter dem Betreff"
       }
     },
     "keywords": {
diff --git a/locales/en/common.json b/locales/en/common.json
index 7d6d57c4..f7f43933 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -499,6 +499,12 @@
       "animations": {
         "label": "Enable Animations",
         "description": "Show smooth transitions and effects"
+      },
+      "toolbar_position": {
+        "label": "Toolbar Position",
+        "description": "Where to show email action buttons (Reply, Archive, Delete, etc.)",
+        "top": "Top",
+        "below_subject": "Below subject"
       }
     },
     "keywords": {
diff --git a/locales/es/common.json b/locales/es/common.json
index 6a868d35..f4a8da7f 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -487,6 +487,12 @@
       "animations": {
         "label": "Habilitar Animaciones",
         "description": "Mostrar transiciones y efectos suaves"
+      },
+      "toolbar_position": {
+        "label": "Posición de la barra de herramientas",
+        "description": "Dónde mostrar los botones de acción del correo (Responder, Archivar, Eliminar, etc.)",
+        "top": "Arriba",
+        "below_subject": "Debajo del asunto"
       }
     },
     "keywords": {
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 9be8f927..afe7f7e9 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -487,6 +487,12 @@
       "animations": {
         "label": "Activer les animations",
         "description": "Afficher les transitions et effets fluides"
+      },
+      "toolbar_position": {
+        "label": "Position de la barre d'outils",
+        "description": "Où afficher les boutons d'action des e-mails (Répondre, Archiver, Supprimer, etc.)",
+        "top": "En haut",
+        "below_subject": "Sous l'objet"
       }
     },
     "keywords": {
diff --git a/locales/it/common.json b/locales/it/common.json
index 71285ccf..5edb7b47 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -487,6 +487,12 @@
       "animations": {
         "label": "Abilita animazioni",
         "description": "Mostra transizioni ed effetti fluidi"
+      },
+      "toolbar_position": {
+        "label": "Posizione barra degli strumenti",
+        "description": "Dove mostrare i pulsanti azione e-mail (Rispondi, Archivia, Elimina, ecc.)",
+        "top": "In alto",
+        "below_subject": "Sotto l'oggetto"
       }
     },
     "keywords": {
diff --git a/locales/ja/common.json b/locales/ja/common.json
index f606b10a..d4e0c939 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -487,6 +487,12 @@
       "animations": {
         "label": "アニメーションを有効にする",
         "description": "スムーズな遷移とエフェクトを表示"
+      },
+      "toolbar_position": {
+        "label": "ツールバーの位置",
+        "description": "メールアクションボタン（返信、アーカイブ、削除など）の表示位置",
+        "top": "上部",
+        "below_subject": "件名の下"
       }
     },
     "keywords": {
diff --git a/locales/nl/common.json b/locales/nl/common.json
index cab981e0..f1185981 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -487,6 +487,12 @@
       "animations": {
         "label": "Animaties inschakelen",
         "description": "Vloeiende overgangen en effecten tonen"
+      },
+      "toolbar_position": {
+        "label": "Werkbalkpositie",
+        "description": "Waar de e-mailactieknoppen worden weergegeven (Beantwoorden, Archiveren, Verwijderen, enz.)",
+        "top": "Bovenaan",
+        "below_subject": "Onder het onderwerp"
       }
     },
     "keywords": {
diff --git a/locales/pt/common.json b/locales/pt/common.json
index 7d1d3328..438ba7da 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -487,6 +487,12 @@
       "animations": {
         "label": "Habilitar Animações",
         "description": "Mostrar transições e efeitos suaves"
+      },
+      "toolbar_position": {
+        "label": "Posição da barra de ferramentas",
+        "description": "Onde mostrar os botões de ação do e-mail (Responder, Arquivar, Excluir, etc.)",
+        "top": "Topo",
+        "below_subject": "Abaixo do assunto"
       }
     },
     "keywords": {
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
index 24dcaba4..4d271fd1 100644
--- a/stores/settings-store.ts
+++ b/stores/settings-store.ts
@@ -26,6 +26,7 @@ export type DateFormat = 'regional' | 'iso' | 'custom';
 export type TimeFormat = '12h' | '24h';
 export type FirstDayOfWeek = 0 | 1; // 0 = Sunday, 1 = Monday
 export type ExternalContentPolicy = 'ask' | 'block' | 'allow';
+export type ToolbarPosition = 'top' | 'below-subject';
 
 export interface KeywordDefinition {
   id: string;     // Used as JMAP keyword suffix: $label:<id>
@@ -91,6 +92,9 @@ interface SettingsState {
   calendarNotificationsEnabled: boolean;
   calendarNotificationSound: boolean;
 
+  // Layout
+  toolbarPosition: ToolbarPosition;
+
   // Experimental
   senderFavicons: boolean;
 
@@ -166,6 +170,9 @@ const DEFAULT_SETTINGS = {
   calendarNotificationsEnabled: true,
   calendarNotificationSound: true,
 
+  // Layout
+  toolbarPosition: 'top' as ToolbarPosition,
+
   // Experimental
   senderFavicons: true,
 
@@ -232,6 +239,7 @@ export const useSettingsStore = create<SettingsState>()(
           sessionTimeout: state.sessionTimeout,
           calendarNotificationsEnabled: state.calendarNotificationsEnabled,
           calendarNotificationSound: state.calendarNotificationSound,
+          toolbarPosition: state.toolbarPosition,
           senderFavicons: state.senderFavicons,
           folderIcons: state.folderIcons,
           emailKeywords: state.emailKeywords,