Scheduld Send

components/settings/composing-settings.tsx

@@ -4,6 +4,8 @@ import { useState, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
 import { useConfig } from '@/hooks/use-config';
 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 { Mail, X } from 'lucide-react';
 import { getPathPrefix } from '@/lib/browser-navigation';
@@ -26,9 +28,12 @@ export function ComposingSettings() {
     autoSelectReplyIdentity,
     attachmentReminderEnabled,
     attachmentReminderKeywords,
+    sendDelaySeconds,
     subAddressDelimiter,
     updateSetting,
   } = useSettingsStore();
+  const { client } = useAuthStore();
+  const delayedSendSupported = client?.hasDelayedSend() ?? false;
 
   const handleSetDefaultMailProgram = useCallback(() => {
     try {
@@ -50,6 +55,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('sub_address_delimiter.label')}
         description={t('sub_address_delimiter.description', { delimiter: subAddressDelimiter })}