Feat: Scheduled send and send delay #322

* ADD DOC

* Scheduld Send

* add new shortcuts

* fix

* fix

* fix bugs

* rework

* fix draft duplicating

* fix err

* some fixes

* fixes from review

* fixes from review

* fixes from review

* disable password managers for recipients

* fix email store lazy load

* add translations

* fix styling

* fixes

---------

Co-authored-by: Linus Rath <139418639+rathlinus@users.noreply.github.com>

components/settings/composing-settings.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSettingsStore } from '@/stores/settings-store';
+import type { SendDelaySeconds } from '@/stores/settings-store';
+import { useAuthStore } from '@/stores/auth-store';
 import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
 import { X } from 'lucide-react';
 import {
@@ -22,11 +24,14 @@ export function ComposingSettings() {
     autoSelectReplyIdentity,
     attachmentReminderEnabled,
     attachmentReminderKeywords,
+    sendDelaySeconds,
     subAddressDelimiter,
     signaturePosition,
     signatureSeparatorEnabled,
     updateSetting,
   } = useSettingsStore();
+  const { client } = useAuthStore();
+  const delayedSendSupported = client?.hasDelayedSend() ?? false;
 
   return (
     <SettingsSection title={t('title')} description={t('description')}>
@@ -37,6 +42,24 @@ export function ComposingSettings() {
         />
       </SettingItem>
 
+      <SettingItem label={t('send_delay.label')} description={t('send_delay.description')}>
+        <div className="flex flex-col items-end gap-1">
+          <Select
+            value={String(sendDelaySeconds)}
+            onChange={(value) => updateSetting('sendDelaySeconds', Number(value) as SendDelaySeconds)}
+            options={[
+              { value: '0', label: t('send_delay.off') },
+              { value: '10', label: t('send_delay.seconds', { seconds: 10 }) },
+              { value: '30', label: t('send_delay.seconds', { seconds: 30 }) },
+              { value: '60', label: t('send_delay.seconds', { seconds: 60 }) },
+            ]}
+          />
+          {sendDelaySeconds > 0 && !delayedSendSupported && (
+            <p className="max-w-64 text-right text-xs text-amber-600 dark:text-amber-400">{t('send_delay.unsupported')}</p>
+          )}
+        </div>
+      </SettingItem>
+
       <SettingItem label={t('signature_position.label')} description={t('signature_position.description')}>
         <Select
           value={signaturePosition}