T08c: Frontend Mail UI + Global Search UI — 44 tests, tsc clean, vite build pass

- Mail page: 3-pane layout (folder tree + mail list + reading pane) - Compose modal: rich text editor (bold/italic/link), template picker, reply/forward pre-fill - Mail settings: accounts, signatures, rules, labels, vacation, PGP (6 tabs) - Shared mailbox selector: switch between personal + shared accounts - Mail search bar + attachment download + create-event-from-mail - Global search: tabs for companies/contacts/mails/files/events - Search autocomplete in TopBar (existing SearchDropdown) - API client: mail.ts (all endpoints) - Routes: /mail, /mail/settings - i18n: de.json + en.json mail + search translations - 44 new tests (4 test files), full regression 318/318 pass - tsc --noEmit: 0 errors, vite build: 267 modules
2026-07-01 20:43:49 +02:00
parent 0962f3a961
commit 0070fb3aea
30 changed files with 4312 additions and 191 deletions
@@ -0,0 +1,99 @@
+/**
+ * Vacation responder — toggle + date range + auto-reply text.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Card } from '@/components/ui/Card';
+import { useToast } from '@/components/ui/Toast';
+import { configureVacation, type VacationPayload } from '@/api/mail';
+
+export function VacationResponder({ accountId }: { accountId: string }) {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [enabled, setEnabled] = useState(false);
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [subject, setSubject] = useState('');
+  const [body, setBody] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    try {
+      const payload: VacationPayload = {
+        enabled,
+        start_date: startDate || null,
+        end_date: endDate || null,
+        subject,
+        body,
+      };
+      await configureVacation(payload);
+      toast.success(t('mail.vacationSaved'));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }, [enabled, startDate, endDate, subject, body, toast, t]);
+
+  return (
+    <div data-testid="vacation-responder">
+      <Card title={t('mail.vacationResponder')}>
+        <div className="space-y-4">
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={enabled}
+              onChange={(e) => setEnabled(e.target.checked)}
+              className="w-5 h-5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
+              data-testid="vacation-toggle"
+            />
+            <span className="text-sm font-medium text-secondary-700">{t('mail.enableVacation')}</span>
+          </label>
+
+          {enabled && (
+            <div className="space-y-3" data-testid="vacation-settings">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <Input
+                  label={t('mail.vacationStart')}
+                  type="date"
+                  value={startDate}
+                  onChange={(e) => setStartDate(e.target.value)}
+                />
+                <Input
+                  label={t('mail.vacationEnd')}
+                  type="date"
+                  value={endDate}
+                  onChange={(e) => setEndDate(e.target.value)}
+                />
+              </div>
+              <Input
+                label={t('mail.vacationSubject')}
+                value={subject}
+                onChange={(e) => setSubject(e.target.value)}
+                placeholder={t('mail.vacationSubjectPlaceholder')}
+              />
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.vacationBody')}</label>
+                <textarea
+                  value={body}
+                  onChange={(e) => setBody(e.target.value)}
+                  className="w-full min-h-32 border border-secondary-300 rounded-md p-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  placeholder={t('mail.vacationBodyPlaceholder')}
+                  data-testid="vacation-body"
+                />
+              </div>
+            </div>
+          )}
+
+          <Button onClick={handleSave} isLoading={saving} size="sm" data-testid="vacation-save">
+            {t('common.save')}
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}