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/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