From 868bb274ef536496730617ddc57109ef66370583 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Sat, 25 Jul 2026 00:21:37 +0200
Subject: [PATCH] feat: standalone buttons for all plugin pages + window system
 for modals

Standalone buttons:
- Add ExternalLink button to Dms, Calendar, Mail, ContactsList toolbars
- Create standalone pages for each (no sidebar, full screen)
- Add standalone routes outside ProtectedRoute

Window system for modals:
- AppointmentModal -> AppointmentEditForm + openWindow()
- ComposeModal -> MailComposeForm + openWindow()
- FilePreviewModal -> FilePreviewContent + openWindow()
- Calendar, Mail, Dms use openWindow() instead of modal state
---
 .../calendar/AppointmentEditForm.tsx          | 370 +++++++++++++++
 .../src/components/dms/FilePreviewContent.tsx | 109 +++++
 .../src/components/mail/MailComposeForm.tsx   | 440 ++++++++++++++++++
 frontend/src/pages/Calendar.tsx               | 129 +++--
 frontend/src/pages/CalendarStandalone.tsx     |  10 +
 frontend/src/pages/ContactsList.tsx           |  13 +-
 frontend/src/pages/ContactsStandalone.tsx     |  10 +
 frontend/src/pages/Dms.tsx                    |  47 +-
 frontend/src/pages/DmsStandalone.tsx          |  10 +
 frontend/src/pages/Mail.tsx                   | 176 ++++---
 frontend/src/pages/MailStandalone.tsx         |  10 +
 frontend/src/routes/index.tsx                 |  20 +
 12 files changed, 1220 insertions(+), 124 deletions(-)
 create mode 100644 frontend/src/components/calendar/AppointmentEditForm.tsx
 create mode 100644 frontend/src/components/dms/FilePreviewContent.tsx
 create mode 100644 frontend/src/components/mail/MailComposeForm.tsx
 create mode 100644 frontend/src/pages/CalendarStandalone.tsx
 create mode 100644 frontend/src/pages/ContactsStandalone.tsx
 create mode 100644 frontend/src/pages/DmsStandalone.tsx
 create mode 100644 frontend/src/pages/MailStandalone.tsx

diff --git a/frontend/src/components/calendar/AppointmentEditForm.tsx b/frontend/src/components/calendar/AppointmentEditForm.tsx
new file mode 100644
index 0000000..a4e8b46
--- /dev/null
+++ b/frontend/src/components/calendar/AppointmentEditForm.tsx
@@ -0,0 +1,370 @@
+/**
+ * AppointmentEditForm — form content for create/edit an appointment (or task) entry.
+ * Extracted from AppointmentModal for use with the Window system.
+ * Form validation: React Hook Form + Zod.
+ */
+
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { useWindowStore } from '@/store/windowStore';
+import {
+  createEntry,
+  updateEntry,
+  deleteEntry,
+  type Calendar,
+  type CalendarEntry,
+  type EntryCreatePayload,
+} from '@/api/calendar';
+import { formatDateTimeInput } from '@/utils/date';
+
+export interface AppointmentEditFormProps {
+  entry?: CalendarEntry | null;
+  prefillDate?: Date | null;
+  calendars: Calendar[];
+  defaultCalendarId?: string | null;
+  onSaved: (entry: CalendarEntry) => void;
+  onDeleted: (entryId: string) => void;
+  windowId?: string;
+}
+
+function toDateTimeLocalValue(d: Date | null | undefined): string {
+  if (!d) return '';
+  return formatDateTimeInput(d);
+}
+
+function fromDateTimeLocalValue(v: string): Date | null {
+  if (!v) return null;
+  const d = new Date(v);
+  if (Number.isNaN(d.getTime())) return null;
+  return d;
+}
+
+// ── Zod Schema ──
+
+const appointmentSchema = z
+  .object({
+    title: z.string().min(1, 'required'),
+    calendar_id: z.string().min(1, 'required'),
+    start_at: z.string().min(1, 'required'),
+    end_at: z.string().min(1, 'required'),
+    all_day: z.boolean().default(false),
+    priority: z.enum(['low', 'medium', 'high']).default('medium'),
+    subtype: z.enum(['normal', 'follow_up', 'private']).default('normal'),
+    location: z.string().optional().default(''),
+    description: z.string().optional().default(''),
+  })
+  .superRefine((data, ctx) => {
+    if (data.start_at && data.end_at) {
+      const start = new Date(data.start_at);
+      const end = new Date(data.end_at);
+      if (!Number.isNaN(start.getTime()) && !Number.isNaN(end.getTime())) {
+        if (end < start) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'endBeforeStart',
+            path: ['end_at'],
+          });
+        }
+      }
+    }
+  });
+
+type AppointmentFormData = z.infer<typeof appointmentSchema>;
+
+export function AppointmentEditForm({
+  entry,
+  prefillDate,
+  calendars,
+  defaultCalendarId,
+  onSaved,
+  onDeleted,
+  windowId,
+}: AppointmentEditFormProps) {
+  const { t } = useTranslation();
+  const closeWindow = useWindowStore((s) => s.closeWindow);
+  const isEdit = !!entry;
+
+  const handleClose = () => {
+    if (windowId) closeWindow(windowId);
+  };
+
+  const initialStart = useMemo(() => {
+    if (entry?.start_at) return new Date(entry.start_at);
+    if (prefillDate) {
+      const d = new Date(prefillDate);
+      d.setHours(9, 0, 0, 0);
+      return d;
+    }
+    const d = new Date();
+    d.setHours(9, 0, 0, 0);
+    return d;
+  }, [entry, prefillDate]);
+
+  const initialEnd = useMemo(() => {
+    if (entry?.end_at) return new Date(entry.end_at);
+    const d = new Date(initialStart);
+    d.setHours(d.getHours() + 1);
+    return d;
+  }, [entry, initialStart]);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<AppointmentFormData>({
+    resolver: zodResolver(appointmentSchema),
+    defaultValues: {
+      title: '',
+      calendar_id: '',
+      start_at: toDateTimeLocalValue(initialStart),
+      end_at: toDateTimeLocalValue(initialEnd),
+      all_day: false,
+      priority: 'medium',
+      subtype: 'normal',
+      location: '',
+      description: '',
+    },
+  });
+
+  // Reset form when entry / prefill changes
+  useEffect(() => {
+    const fallbackId =
+      entry?.calendar_id ?? defaultCalendarId ?? calendars[0]?.id ?? '';
+    reset({
+      title: entry?.title ?? '',
+      calendar_id: fallbackId,
+      start_at: toDateTimeLocalValue(entry?.start_at ? new Date(entry.start_at) : initialStart),
+      end_at: toDateTimeLocalValue(entry?.end_at ? new Date(entry.end_at) : initialEnd),
+      all_day: entry?.all_day ?? false,
+      priority: entry?.priority ?? 'medium',
+      subtype: entry?.subtype ?? 'normal',
+      location: entry?.location ?? '',
+      description: entry?.description ?? '',
+    });
+  }, [entry, defaultCalendarId, calendars, initialStart, initialEnd, reset]);
+
+  const onSubmit = async (data: AppointmentFormData) => {
+    const startDate = fromDateTimeLocalValue(data.start_at);
+    const endDate = fromDateTimeLocalValue(data.end_at);
+    if (isEdit && entry) {
+      const updated = await updateEntry(entry.id, {
+        title: data.title,
+        description: data.description || null,
+        location: data.location || null,
+        start_at: startDate ? startDate.toISOString() : null,
+        end_at: endDate ? endDate.toISOString() : null,
+        all_day: data.all_day,
+        priority: data.priority,
+        subtype: data.subtype,
+        calendar_id: data.calendar_id,
+      });
+      onSaved(updated);
+    } else {
+      const payload: EntryCreatePayload = {
+        calendar_id: data.calendar_id,
+        entry_type: 'appointment',
+        title: data.title,
+        description: data.description || null,
+        location: data.location || null,
+        start_at: startDate ? startDate.toISOString() : null,
+        end_at: endDate ? endDate.toISOString() : null,
+        all_day: data.all_day,
+        priority: data.priority,
+        subtype: data.subtype,
+        status: 'open',
+      };
+      const created = await createEntry(payload);
+      onSaved(created);
+    }
+    handleClose();
+  };
+
+  const handleDelete = async () => {
+    if (!entry) return;
+    if (!window.confirm(t('calendar.deleteEntryConfirm'))) return;
+    try {
+      await deleteEntry(entry.id);
+      onDeleted(entry.id);
+      handleClose();
+    } catch (e) {
+      const err = e as { message?: string };
+      console.error(err.message ?? t('calendar.errorSave'));
+    }
+  };
+
+  const calendarOptions = useMemo(
+    () => [...calendars.map((c) => ({ value: c.id, label: c.name }))],
+    [calendars]
+  );
+
+  const errorMsg = (key: string | undefined) => {
+    if (!key) return undefined;
+    if (key === 'required') return t('validation.required');
+    if (key === 'endBeforeStart') return t('calendar.endBeforeStart', 'End must be after start');
+    return key;
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 p-4" data-testid="appointment-modal">
+      <div>
+        <label className="block text-sm font-medium text-secondary-700 mb-1">
+          {t('calendar.appointmentTitle')} *
+        </label>
+        <Input
+          {...register('title')}
+          error={errorMsg(errors.title?.message)}
+          placeholder={t('calendar.appointmentTitle')}
+          data-testid="appointment-title"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-secondary-700 mb-1">
+          {t('calendar.appointmentCalendar')} *
+        </label>
+        <Select
+          {...register('calendar_id')}
+          error={errorMsg(errors.calendar_id?.message)}
+          options={calendarOptions}
+          data-testid="appointment-calendar"
+        />
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-secondary-700 mb-1">
+            {t('calendar.appointmentStart')}
+          </label>
+          <Input
+            type="datetime-local"
+            {...register('start_at')}
+            error={errorMsg(errors.start_at?.message)}
+            data-testid="appointment-start"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-secondary-700 mb-1">
+            {t('calendar.appointmentEnd')}
+          </label>
+          <Input
+            type="datetime-local"
+            {...register('end_at')}
+            error={errorMsg(errors.end_at?.message)}
+            data-testid="appointment-end"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <input
+          id="appointment-allday"
+          type="checkbox"
+          {...register('all_day')}
+          className="h-4 w-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
+          data-testid="appointment-allday"
+        />
+        <label htmlFor="appointment-allday" className="text-sm text-secondary-700">
+          {t('calendar.appointmentAllDay')}
+        </label>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-secondary-700 mb-1">
+          {t('calendar.appointmentLocation')}
+        </label>
+        <Input
+          {...register('location')}
+          placeholder={t('calendar.appointmentLocation')}
+          data-testid="appointment-location"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-secondary-700 mb-1">
+          {t('calendar.appointmentDescription')}
+        </label>
+        <textarea
+          {...register('description')}
+          rows={3}
+          className="w-full rounded-md border-secondary-300 focus:border-primary-500 focus:ring-primary-500"
+          data-testid="appointment-description"
+        />
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-secondary-700 mb-1">
+            {t('calendar.appointmentPriority')}
+          </label>
+          <Select
+            {...register('priority')}
+            options={[
+              { value: 'low', label: t('calendar.priority.low') },
+              { value: 'medium', label: t('calendar.priority.medium') },
+              { value: 'high', label: t('calendar.priority.high') },
+            ]}
+            data-testid="appointment-priority"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-secondary-700 mb-1">
+            {t('calendar.appointmentSubtype')}
+          </label>
+          <Select
+            {...register('subtype')}
+            options={[
+              { value: 'normal', label: t('calendar.subtype.normal') },
+              { value: 'follow_up', label: t('calendar.subtype.follow_up') },
+              { value: 'private', label: t('calendar.subtype.private') },
+            ]}
+            data-testid="appointment-subtype"
+          />
+        </div>
+      </div>
+
+      {(errors.title || errors.calendar_id || errors.start_at || errors.end_at) && (
+        <div className="text-sm text-danger-700 bg-danger-50 border border-danger-200 rounded-md p-2" data-testid="appointment-error">
+          {errorMsg(errors.title?.message) || errorMsg(errors.calendar_id?.message) || errorMsg(errors.start_at?.message) || errorMsg(errors.end_at?.message)}
+        </div>
+      )}
+
+      <div className="flex justify-between gap-2 pt-2">
+        <div>
+          {isEdit && (
+            <Button
+              variant="danger"
+              onClick={handleDelete}
+              disabled={isSubmitting}
+              data-testid="appointment-delete"
+              type="button"
+            >
+              {t('calendar.delete')}
+            </Button>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={handleClose} disabled={isSubmitting} type="button">
+            {t('calendar.cancel')}
+          </Button>
+          <Button
+            variant="primary"
+            type="submit"
+            isLoading={isSubmitting}
+            data-testid="appointment-save"
+          >
+            {t('calendar.save')}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default AppointmentEditForm;
diff --git a/frontend/src/components/dms/FilePreviewContent.tsx b/frontend/src/components/dms/FilePreviewContent.tsx
new file mode 100644
index 0000000..1f78fe8
--- /dev/null
+++ b/frontend/src/components/dms/FilePreviewContent.tsx
@@ -0,0 +1,109 @@
+/**
+ * FilePreviewContent — preview content for DMS files.
+ * Extracted from FilePreviewModal for use with the Window system.
+ * Renders PDF files in an iframe via the preview endpoint.
+ * Shows file metadata and download button for non-PDF files.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { formatDateShort } from '@/utils/date';
+import { Badge } from '@/components/ui/Badge';
+import { getFilePreviewUrl, type DmsFile } from '@/api/dms';
+import { useWindowStore } from '@/store/windowStore';
+import { FileText } from 'lucide-react';
+
+export interface FilePreviewContentProps {
+  file: DmsFile | null;
+  windowId?: string;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
+export function FilePreviewContent({ file, windowId }: FilePreviewContentProps) {
+  const { t } = useTranslation();
+  const closeWindow = useWindowStore((s) => s.closeWindow);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (file) {
+      setPreviewUrl(getFilePreviewUrl(file.id));
+    } else {
+      setPreviewUrl(null);
+    }
+  }, [file]);
+
+  if (!file) return null;
+
+  const isPdf = file.mime_type === 'application/pdf';
+  const isImage = file.mime_type.startsWith('image/');
+
+  const handleClose = () => {
+    if (windowId) closeWindow(windowId);
+  };
+
+  return (
+    <div className="space-y-4 p-4" data-testid="file-preview-modal">
+      <div className="flex items-center gap-4 flex-wrap">
+        <Badge variant="info">{file.mime_type.split('/')[1]?.toUpperCase() || t('dms.icon.other')}</Badge>
+        <span className="text-sm text-secondary-500">{formatFileSize(file.size_bytes ?? file.size ?? 0)}</span>
+        {file.created_at && (
+          <span className="text-sm text-secondary-500">
+            {t('dms.fileModified')}: {formatDateShort(file.created_at)}
+          </span>
+        )}
+      </div>
+
+      {isPdf && previewUrl && (
+        <div className="border border-secondary-200 rounded-lg overflow-hidden" data-testid="pdf-preview">
+          <iframe
+            src={previewUrl}
+            className="w-full h-[60vh]"
+            title={file.name}
+            aria-label={t('dms.preview')}
+          />
+        </div>
+      )}
+
+      {isImage && previewUrl && (
+        <div className="flex justify-center border border-secondary-200 rounded-lg p-4" data-testid="image-preview">
+          <img
+            src={previewUrl}
+            alt={file.name}
+            className="max-h-[60vh] object-contain"
+          />
+        </div>
+      )}
+
+      {!isPdf && !isImage && (
+        <div className="text-center py-12" data-testid="no-preview-available">
+          <FileText className="mx-auto h-12 w-12 text-secondary-300" aria-hidden="true" strokeWidth={1.5} />
+          <p className="mt-2 text-sm text-secondary-500">{t('dms.preview')}</p>
+        </div>
+      )}
+
+      <div className="flex justify-end gap-3">
+        {previewUrl && (
+          <a
+            href={previewUrl}
+            download={file.name}
+            className="inline-flex items-center px-4 py-2 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700 min-h-touch"
+          >
+            {t('dms.download')}
+          </a>
+        )}
+        <Button variant="secondary" onClick={handleClose}>
+          {t('dms.cancel')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default FilePreviewContent;
diff --git a/frontend/src/components/mail/MailComposeForm.tsx b/frontend/src/components/mail/MailComposeForm.tsx
new file mode 100644
index 0000000..aa7fe26
--- /dev/null
+++ b/frontend/src/components/mail/MailComposeForm.tsx
@@ -0,0 +1,440 @@
+/**
+ * MailComposeForm — compose form content for new mail, reply, and forward.
+ * Extracted from ComposeModal for use with the Window system.
+ * Form validation: React Hook Form + Zod.
+ */
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { TemplatePicker } from './TemplatePicker';
+import { RichTextEditor } from './RichTextEditor';
+import type { Mail, MailSignature, SendMailPayload, ReplyPayload, ForwardPayload, MailDraftPayload } from '@/api/mail';
+import { uploadAttachment, type UploadedAttachment, replaceSignatureVariables } from '@/api/mail';
+import { useAuthStore } from '@/store/authStore';
+import { useWindowStore } from '@/store/windowStore';
+import { FileText, Paperclip, X } from 'lucide-react';
+
+export type ComposeMode = 'new' | 'reply' | 'forward' | 'draft';
+
+export interface MailComposeFormProps {
+  mode: ComposeMode;
+  accountId: string;
+  replyToMail: Mail | null;
+  forwardMail: Mail | null;
+  draftMail?: Mail | null;
+  signatures: MailSignature[];
+  onSend: (payload: SendMailPayload | ReplyPayload | ForwardPayload, mode: ComposeMode) => Promise<void>;
+  onSaveDraft?: (payload: MailDraftPayload) => Promise<void>;
+  windowId?: string;
+}
+
+// ── Zod Schema ──
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function validateEmailList(val: string, ctx: z.RefinementCtx, field: string, required: boolean) {
+  const emails = val.split(',').map((s) => s.trim()).filter(Boolean);
+  if (required && emails.length === 0) {
+    ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'required', path: [field] });
+    return;
+  }
+  for (const email of emails) {
+    if (!emailRegex.test(email)) {
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'invalidEmail', path: [field] });
+      return;
+    }
+  }
+}
+
+const composeSchema = z.object({
+  to: z.string().default(''),
+  cc: z.string().optional().default(''),
+  bcc: z.string().optional().default(''),
+  subject: z.string().min(1, 'required'),
+  body: z.string().default(''),
+}).superRefine((data, ctx) => {
+  validateEmailList(data.to, ctx, 'to', true);
+  if (data.cc) validateEmailList(data.cc, ctx, 'cc', false);
+  if (data.bcc) validateEmailList(data.bcc, ctx, 'bcc', false);
+});
+
+type ComposeFormData = z.infer<typeof composeSchema>;
+
+export function MailComposeForm({
+  mode,
+  accountId,
+  replyToMail,
+  forwardMail,
+  draftMail,
+  signatures,
+  onSend,
+  onSaveDraft,
+  windowId,
+}: MailComposeFormProps) {
+  const { t } = useTranslation();
+  const authUser = useAuthStore((s) => s.user);
+  const authTenant = useAuthStore((s) => s.currentTenant);
+  const closeWindow = useWindowStore((s) => s.closeWindow);
+  const [showCc, setShowCc] = useState(false);
+  const [selectedSignatureId, setSelectedSignatureId] = useState('');
+  const [showTemplatePicker, setShowTemplatePicker] = useState(false);
+  const [attachments, setAttachments] = useState<UploadedAttachment[]>([]);
+  const [uploadingFile, setUploadingFile] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [savingDraft, setSavingDraft] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleClose = () => {
+    if (windowId) closeWindow(windowId);
+  };
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<ComposeFormData>({
+    resolver: zodResolver(composeSchema),
+    defaultValues: { to: '', cc: '', bcc: '', subject: '', body: '' },
+  });
+
+  const bodyValue = watch('body');
+
+  useEffect(() => {
+    if (mode === 'reply' && replyToMail) {
+      reset({
+        to: replyToMail.from_address,
+        cc: '',
+        bcc: '',
+        subject: replyToMail.subject.startsWith('Re: ') ? replyToMail.subject : `Re: ${replyToMail.subject}`,
+        body: `\n\n---\n${replyToMail.body_text.slice(0, 200)}`,
+      });
+    } else if (mode === 'forward' && forwardMail) {
+      reset({
+        to: '',
+        cc: '',
+        bcc: '',
+        subject: forwardMail.subject.startsWith('Fwd: ') ? forwardMail.subject : `Fwd: ${forwardMail.subject}`,
+        body: `\n\n---\n${t('mail.forwarding')}\n${t('mail.from')}: ${forwardMail.from_address}\n${t('mail.subject')}: ${forwardMail.subject}\n\n${forwardMail.body_text.slice(0, 200)}`,
+      });
+    } else if (mode === 'draft' && draftMail) {
+      reset({
+        to: draftMail.to_addresses.join(', '),
+        cc: draftMail.cc_addresses.join(', '),
+        bcc: draftMail.bcc_addresses.join(', '),
+        subject: draftMail.subject,
+        body: draftMail.body_html || draftMail.body_text || '',
+      });
+      setShowCc(draftMail.cc_addresses.length > 0 || draftMail.bcc_addresses.length > 0);
+    } else {
+      reset({ to: '', cc: '', bcc: '', subject: '', body: '' });
+      setAttachments([]);
+    }
+  }, [mode, replyToMail, forwardMail, draftMail, t, reset]);
+
+  const insertSignature = useCallback((signatureId: string) => {
+    setSelectedSignatureId(signatureId);
+    const sig = signatures.find((s) => s.id === signatureId);
+    if (sig) {
+      const processedHtml = replaceSignatureVariables(
+        sig.body_html,
+        { name: authUser ? `${authUser.first_name} ${authUser.last_name}`.trim() : undefined, email: authUser?.email, role: authUser?.role, first_name: authUser?.first_name, last_name: authUser?.last_name },
+        { name: authTenant?.name },
+      );
+      setValue('body', `${bodyValue}<br/><br/>---<br/>${processedHtml}`);
+    }
+  }, [signatures, authUser, authTenant, setValue, bodyValue]);
+
+  const handleTemplateSelect = useCallback((templateBody: string, templateSubject: string) => {
+    setValue('body', templateBody);
+    if (templateSubject) {
+      setValue('subject', templateSubject);
+    }
+    setShowTemplatePicker(false);
+  }, [setValue]);
+
+  const handleFileSelect = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    setUploadingFile(true);
+    try {
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (file.size > 25 * 1024 * 1024) {
+          alert(`${file.name} exceeds 25 MB limit`);
+          continue;
+        }
+        const uploaded = await uploadAttachment(file);
+        setAttachments((prev) => [...prev, uploaded]);
+      }
+    } catch (err) {
+      console.error('Attachment upload failed:', err);
+      alert('Failed to upload attachment');
+    } finally {
+      setUploadingFile(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  }, []);
+
+  const handleRemoveAttachment = useCallback((attId: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== attId));
+  }, []);
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const parseEmailList = (val: string): string[] =>
+    val ? val.split(',').map((s) => s.trim()).filter(Boolean) : [];
+
+  const onSendValidated = useCallback(async (data: ComposeFormData) => {
+    setSending(true);
+    try {
+      const toList = parseEmailList(data.to);
+      const ccList = data.cc ? parseEmailList(data.cc) : undefined;
+      const bccList = data.bcc ? parseEmailList(data.bcc) : undefined;
+
+      if (mode === 'reply' && replyToMail) {
+        const replyPayload: ReplyPayload = {
+          account_id: accountId,
+          body: data.body,
+          is_html: true,
+          to: toList,
+          cc: ccList,
+          signature_id: selectedSignatureId || null,
+        };
+        await onSend(replyPayload, 'reply');
+      } else if (mode === 'forward' && forwardMail) {
+        const fwdPayload: ForwardPayload = {
+          account_id: accountId,
+          to: toList,
+          body: data.body,
+          is_html: true,
+          signature_id: selectedSignatureId || null,
+        };
+        await onSend(fwdPayload, 'forward');
+      } else {
+        const sendPayload: SendMailPayload = {
+          account_id: accountId,
+          to: toList,
+          cc: ccList,
+          bcc: bccList,
+          subject: data.subject,
+          body: data.body,
+          is_html: true,
+          signature_id: selectedSignatureId || null,
+          attachments: attachments.map((a) => a.id),
+        };
+        await onSend(sendPayload, 'new');
+      }
+      setAttachments([]);
+      handleClose();
+    } finally {
+      setSending(false);
+    }
+  }, [mode, replyToMail, forwardMail, accountId, selectedSignatureId, attachments, onSend, handleClose]);
+
+  const handleSaveDraft = useCallback(async () => {
+    if (!onSaveDraft) return;
+    const data = watch();
+    setSavingDraft(true);
+    try {
+      const toList = parseEmailList(data.to);
+      const ccList = data.cc ? parseEmailList(data.cc) : [];
+      const bccList = data.bcc ? parseEmailList(data.bcc) : [];
+      const payload: MailDraftPayload = {
+        account_id: accountId,
+        to: toList,
+        cc: ccList,
+        bcc: bccList,
+        subject: data.subject,
+        body_text: data.body.replace(/<[^>]*>/g, ''),
+        body_html: data.body,
+      };
+      await onSaveDraft(payload);
+    } finally {
+      setSavingDraft(false);
+    }
+  }, [onSaveDraft, watch, accountId]);
+
+  const title = mode === 'reply' ? t('mail.reply') : mode === 'forward' ? t('mail.forward') : mode === 'draft' ? t('mail.editDraft') : t('mail.compose');
+
+  const errorMsg = (key: string | undefined) => {
+    if (!key) return undefined;
+    if (key === 'required') return t('validation.required');
+    if (key === 'invalidEmail') return t('validation.email');
+    return key;
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSendValidated)} className="space-y-4 p-4" data-testid="compose-modal">
+      {/* Template picker toggle */}
+      <div className="flex items-center gap-2" data-testid="compose-toolbar">
+        <button
+          onClick={() => setShowTemplatePicker(!showTemplatePicker)}
+          className="px-3 py-1.5 rounded hover:bg-secondary-100 text-sm"
+          aria-label={t('mail.insertTemplate')}
+          title={t('mail.insertTemplate')}
+          type="button"
+          data-testid="template-picker-toggle"
+        >
+          {t('mail.template')}
+        </button>
+      </div>
+
+      {showTemplatePicker && (
+        <TemplatePicker onSelect={handleTemplateSelect} />
+      )}
+
+      {/* Recipients */}
+      <div className="space-y-2">
+        <Input
+          label={t('mail.to')}
+          {...register('to')}
+          error={errorMsg(errors.to?.message)}
+          placeholder="recipient@example.com"
+          required
+          data-testid="compose-to"
+        />
+        <div className="flex items-center gap-2">
+          {!showCc ? (
+            <button
+              onClick={() => setShowCc(true)}
+              className="text-sm text-primary-600 hover:text-primary-700"
+              type="button"
+            >
+              {t('mail.showCcBcc')}
+            </button>
+          ) : (
+            <div className="w-full grid grid-cols-1 sm:grid-cols-2 gap-2">
+              <Input
+                label={t('mail.cc')}
+                {...register('cc')}
+                error={errorMsg(errors.cc?.message)}
+                placeholder="cc@example.com"
+              />
+              <Input
+                label={t('mail.bcc')}
+                {...register('bcc')}
+                error={errorMsg(errors.bcc?.message)}
+                placeholder="bcc@example.com"
+              />
+            </div>
+          )}
+        </div>
+        <Input
+          label={t('mail.subject')}
+          {...register('subject')}
+          error={errorMsg(errors.subject?.message)}
+          placeholder={t('mail.subjectPlaceholder')}
+          data-testid="compose-subject"
+        />
+      </div>
+
+      {/* Editor */}
+      <div>
+        <label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.body')}</label>
+        <RichTextEditor
+          content={bodyValue}
+          onChange={(html: string) => setValue('body', html)}
+          placeholder={t('mail.body')}
+        />
+      </div>
+
+      {/* Attachments */}
+      <div data-testid="compose-attachments">
+        <label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.attachments')}</label>
+        <div className="flex items-center gap-2">
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            onChange={handleFileSelect}
+            className="hidden"
+            data-testid="compose-file-input"
+          />
+          <Button
+            variant="secondary"
+            size="sm"
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            isLoading={uploadingFile}
+            icon={
+              <Paperclip className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
+            }
+          >
+            {t('mail.addAttachment')}
+          </Button>
+          <span className="text-xs text-secondary-400">Max 25 MB per file</span>
+        </div>
+        {attachments.length > 0 && (
+          <ul className="mt-2 space-y-1">
+            {attachments.map((att) => (
+              <li key={att.id} className="flex items-center gap-3 p-2 rounded-md bg-secondary-50">
+                <FileText className="w-5 h-5 text-secondary-400 flex-shrink-0" aria-hidden="true" strokeWidth={2} />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm text-secondary-800 truncate">{att.filename}</p>
+                  <p className="text-xs text-secondary-400">{formatBytes(att.size_bytes)}</p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => handleRemoveAttachment(att.id)}
+                  className="p-1 rounded hover:bg-secondary-200 text-secondary-500"
+                  aria-label={t('common.remove')}
+                >
+                  <X className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Signature */}
+      <Select
+        label={t('mail.signature')}
+        value={selectedSignatureId}
+        onChange={(e) => insertSignature(e.target.value)}
+        options={[
+          { value: '', label: t('mail.noSignature') },
+          ...signatures.map((sig) => ({ value: sig.id, label: sig.name })),
+        ]}
+      />
+
+      {/* Actions */}
+      <div className="flex justify-end gap-2 pt-2 border-t border-secondary-200 sticky bottom-0 bg-white py-3">
+        <Button variant="secondary" onClick={handleClose} type="button">
+          {t('common.cancel')}
+        </Button>
+        {onSaveDraft && (
+          <Button
+            variant="secondary"
+            onClick={handleSaveDraft}
+            isLoading={savingDraft}
+            type="button"
+            data-testid="compose-save-draft"
+          >
+            {t('mail.saveDraft')}
+          </Button>
+        )}
+        <Button type="submit" isLoading={sending} data-testid="compose-send">
+          {t('mail.send')}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default MailComposeForm;
diff --git a/frontend/src/pages/Calendar.tsx b/frontend/src/pages/Calendar.tsx
index 0ef06c0..b40a6ef 100644
--- a/frontend/src/pages/Calendar.tsx
+++ b/frontend/src/pages/Calendar.tsx
@@ -20,12 +20,13 @@ import { DayView } from '@/components/calendar/DayView';
 import { RangeView } from '@/components/calendar/RangeView';
 import { formatDateInput } from '@/utils/date';
 import { CalendarDetail } from '@/components/calendar/CalendarDetail';
-import { AppointmentModal } from '@/components/calendar/AppointmentModal';
+import { AppointmentEditForm } from '@/components/calendar/AppointmentEditForm';
+import { useWindowStore } from '@/store/windowStore';
 import { IcsControls } from '@/components/calendar/IcsControls';
 import { SharingSettings } from '@/components/calendar/SharingSettings';
 import { useCalendarStore, type CalendarViewMode } from '@/store/calendarStore';
 import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
-import { ChevronLeft, ChevronRight, Info, Plus } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ExternalLink, Info, Plus } from 'lucide-react';
 import {
   fetchCalendars,
   createCalendar,
@@ -72,9 +73,7 @@ export function CalendarPage() {
   const [loadingCalendars, setLoadingCalendars] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  const [modalOpen, setModalOpen] = useState(false);
-  const [modalEntry, setModalEntry] = useState<CalendarEntry | null>(null);
-  const [prefillDate, setPrefillDate] = useState<Date | null>(null);
+  const openWindow = useWindowStore((s) => s.openWindow);
 
   const [showSharing, setShowSharing] = useState(false);
   const [showIcs, setShowIcs] = useState(false);
@@ -176,11 +175,44 @@ export function CalendarPage() {
 
   // ??? Handlers ???????????????????????????????????????????????????????????
 
+  const handleSaved = useCallback(
+    (saved: CalendarEntry) => {
+      setEntries((cur) => {
+        const exists = cur.some((e) => e.id === saved.id);
+        return exists ? cur.map((e) => (e.id === saved.id ? saved : e)) : [...cur, saved];
+      });
+      if (selectedEntry?.id === saved.id) {
+        setSelectedEntry(saved);
+      }
+    },
+    [selectedEntry, setSelectedEntry],
+  );
+
+  const handleDeleted = useCallback(
+    (entryId: string) => {
+      setEntries((cur) => cur.filter((e) => e.id !== entryId));
+      if (selectedEntry?.id === entryId) {
+        setSelectedEntry(null);
+      }
+    },
+    [selectedEntry, setSelectedEntry],
+  );
+
   const handleCreateAt = useCallback((date: Date) => {
-    setModalEntry(null);
-    setPrefillDate(date);
-    setModalOpen(true);
-  }, []);
+    openWindow({
+      title: t('calendar.newAppointment'),
+      type: 'appointment-create',
+      component: AppointmentEditForm,
+      componentProps: {
+        entry: null,
+        prefillDate: date,
+        calendars,
+        defaultCalendarId: activeCalendarId,
+        onSaved: handleSaved,
+        onDeleted: handleDeleted,
+      },
+    });
+  }, [openWindow, t, calendars, activeCalendarId, handleSaved, handleDeleted]);
 
   const handleEditEntry = useCallback(
     (entry: CalendarEntry) => {
@@ -194,10 +226,20 @@ export function CalendarPage() {
 
   const handleOpenEditModal = useCallback(() => {
     if (!selectedEntry) return;
-    setModalEntry(selectedEntry);
-    setPrefillDate(null);
-    setModalOpen(true);
-  }, [selectedEntry]);
+    openWindow({
+      title: t('calendar.editAppointment'),
+      type: 'appointment-edit',
+      component: AppointmentEditForm,
+      componentProps: {
+        entry: selectedEntry,
+        prefillDate: null,
+        calendars,
+        defaultCalendarId: activeCalendarId,
+        onSaved: handleSaved,
+        onDeleted: handleDeleted,
+      },
+    });
+  }, [selectedEntry, openWindow, t, calendars, activeCalendarId, handleSaved, handleDeleted]);
 
   const handleMoveEntry = useCallback(
     async (entry: CalendarEntry, newStart: Date) => {
@@ -223,29 +265,6 @@ export function CalendarPage() {
     [t, loadEntries, selectedEntry, setSelectedEntry],
   );
 
-  const handleSaved = useCallback(
-    (saved: CalendarEntry) => {
-      setEntries((cur) => {
-        const exists = cur.some((e) => e.id === saved.id);
-        return exists ? cur.map((e) => (e.id === saved.id ? saved : e)) : [...cur, saved];
-      });
-      if (selectedEntry?.id === saved.id) {
-        setSelectedEntry(saved);
-      }
-    },
-    [selectedEntry, setSelectedEntry],
-  );
-
-  const handleDeleted = useCallback(
-    (entryId: string) => {
-      setEntries((cur) => cur.filter((e) => e.id !== entryId));
-      if (selectedEntry?.id === entryId) {
-        setSelectedEntry(null);
-      }
-    },
-    [selectedEntry, setSelectedEntry],
-  );
-
   const handleConfirmDelete = useCallback(async () => {
     if (!deleteTarget) return;
     try {
@@ -367,9 +386,19 @@ export function CalendarPage() {
         label: t('calendar.newAppointment'),
         group: 'actions',
         onClick: () => {
-          setModalEntry(null);
-          setPrefillDate(null);
-          setModalOpen(true);
+          openWindow({
+            title: t('calendar.newAppointment'),
+            type: 'appointment-create',
+            component: AppointmentEditForm,
+            componentProps: {
+              entry: null,
+              prefillDate: null,
+              calendars,
+              defaultCalendarId: activeCalendarId,
+              onSaved: handleSaved,
+              onDeleted: handleDeleted,
+            },
+          });
         },
         icon: (
           <Plus className="w-3.5 h-3.5" strokeWidth={2} />
@@ -401,6 +430,17 @@ export function CalendarPage() {
           <Info className="w-3.5 h-3.5" strokeWidth={2} />
         ),
       },
+      {
+        id: 'open-standalone',
+        plugin: 'calendar',
+        label: 'In neuem Fenster',
+        type: 'button' as const,
+        group: 'actions',
+        icon: (
+          <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />
+        ),
+        onClick: () => window.open('/calendar-standalone', '_blank', 'width=1200,height=800'),
+      },
     ];
 
     registerItems('calendar', items);
@@ -685,17 +725,6 @@ export function CalendarPage() {
         onCancel={() => setDeleteTarget(null)}
       />
 
-      {/* Appointment modal */}
-      <AppointmentModal
-        open={modalOpen}
-        onClose={() => setModalOpen(false)}
-        entry={modalEntry}
-        prefillDate={prefillDate}
-        calendars={calendars}
-        defaultCalendarId={activeCalendarId}
-        onSaved={handleSaved}
-        onDeleted={handleDeleted}
-      />
     </div>
   );
 }
diff --git a/frontend/src/pages/CalendarStandalone.tsx b/frontend/src/pages/CalendarStandalone.tsx
new file mode 100644
index 0000000..90b2f29
--- /dev/null
+++ b/frontend/src/pages/CalendarStandalone.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { CalendarPage } from './Calendar';
+
+export function CalendarStandalonePage() {
+  return (
+    <div className="h-screen w-screen overflow-hidden bg-white">
+      <CalendarPage />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/ContactsList.tsx b/frontend/src/pages/ContactsList.tsx
index 98a7216..b428778 100644
--- a/frontend/src/pages/ContactsList.tsx
+++ b/frontend/src/pages/ContactsList.tsx
@@ -18,7 +18,7 @@ import { ContactDetail } from '@/components/contacts/ContactDetail';
 import { ContactEditForm } from '@/components/contacts/ContactEditForm';
 import { useWindowStore } from '@/store/windowStore';
 import { SavedFilters } from '@/components/SavedFilters';
-import { ArrowDownAZ, ArrowUpZA, ChevronLeft, LayoutGrid, List, Plus } from 'lucide-react';
+import { ArrowDownAZ, ArrowUpZA, ChevronLeft, ExternalLink, LayoutGrid, List, Plus } from 'lucide-react';
 import {
   useUnifiedContacts,
   useUnifiedContact,
@@ -201,6 +201,17 @@ export function ContactsListPage() {
         ),
         onClick: handleCreate,
       },
+      {
+        id: 'open-standalone',
+        plugin: 'contacts',
+        label: 'In neuem Fenster',
+        type: 'button' as const,
+        group: 'actions',
+        icon: (
+          <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />
+        ),
+        onClick: () => window.open('/contacts-standalone', '_blank', 'width=1200,height=800'),
+      },
     ];
     registerItems('contacts', items);
     return () => unregisterPlugin('contacts');
diff --git a/frontend/src/pages/ContactsStandalone.tsx b/frontend/src/pages/ContactsStandalone.tsx
new file mode 100644
index 0000000..648b6d8
--- /dev/null
+++ b/frontend/src/pages/ContactsStandalone.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { ContactsListPage } from './ContactsList';
+
+export function ContactsStandalonePage() {
+  return (
+    <div className="h-screen w-screen overflow-hidden bg-white">
+      <ContactsListPage />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Dms.tsx b/frontend/src/pages/Dms.tsx
index 2c004e0..a6bdeb0 100644
--- a/frontend/src/pages/Dms.tsx
+++ b/frontend/src/pages/Dms.tsx
@@ -20,11 +20,12 @@ import { SourceTree } from '@/components/dms/SourceTree';
 import { FileExplorer, type ViewMode, type SortBy, type SortOrder } from '@/components/dms/FileExplorer';
 import { FileDetails } from '@/components/dms/FileDetails';
 import { UploadDropzone } from '@/components/dms/UploadDropzone';
-import { FilePreviewModal } from '@/components/dms/FilePreviewModal';
+import { FilePreviewContent } from '@/components/dms/FilePreviewContent';
+import { useWindowStore } from '@/store/windowStore';
 import { ShareDialog } from '@/components/dms/ShareDialog';
 import { BulkActions } from '@/components/dms/BulkActions';
 import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
-import { ArrowRight, ChevronLeft, ChevronRight, Info, Plus, Trash2, Upload } from 'lucide-react';
+import { ArrowRight, ChevronLeft, ChevronRight, ExternalLink, Info, Plus, Trash2, Upload } from 'lucide-react';
 import {
   fetchFolders,
   createFolder,
@@ -72,7 +73,7 @@ export function DmsPage() {
   // Modal state
   const [showUpload, setShowUpload] = useState(false);
   const [showNewFolder, setShowNewFolder] = useState(false);
-  const [previewFile, setPreviewFile] = useState<DmsFile | null>(null);
+  const openWindow = useWindowStore((s) => s.openWindow);
   const [shareFile, setShareFile] = useState<DmsFile | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<DmsFile | null>(null);
   const [submittingFolder, setSubmittingFolder] = useState(false);
@@ -195,8 +196,15 @@ export function DmsPage() {
 
   // Handle file double click (open preview)
   const handleFileDoubleClick = useCallback((file: DmsFile) => {
-    setPreviewFile(file);
-  }, []);
+    openWindow({
+      title: file.name,
+      type: 'file-preview',
+      component: FilePreviewContent,
+      componentProps: {
+        file,
+      },
+    });
+  }, [openWindow]);
 
   // Handle file share
   const handleFileShare = useCallback((file: DmsFile) => {
@@ -210,8 +218,15 @@ export function DmsPage() {
 
   // Handle file preview
   const handleFilePreview = useCallback((file: DmsFile) => {
-    setPreviewFile(file);
-  }, []);
+    openWindow({
+      title: file.name,
+      type: 'file-preview',
+      component: FilePreviewContent,
+      componentProps: {
+        file,
+      },
+    });
+  }, [openWindow]);
 
   // Handle toggle select
   const handleToggleSelect = useCallback((fileId: string) => {
@@ -439,6 +454,17 @@ export function DmsPage() {
         ),
         onClick: () => setShowDetails((v) => !v),
       },
+      {
+        id: 'open-standalone',
+        plugin: 'dms',
+        label: 'In neuem Fenster',
+        type: 'button' as const,
+        group: 'actions',
+        icon: (
+          <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />
+        ),
+        onClick: () => window.open('/dms-standalone', '_blank', 'width=1200,height=800'),
+      },
     ];
 
     // Add bulk actions when files are selected
@@ -706,13 +732,6 @@ export function DmsPage() {
         onCancel={() => setDeleteTarget(null)}
       />
 
-      {/* File preview modal */}
-      <FilePreviewModal
-        open={!!previewFile}
-        file={previewFile}
-        onClose={() => setPreviewFile(null)}
-      />
-
       {/* Share dialog */}
       <ShareDialog
         open={!!shareFile}
diff --git a/frontend/src/pages/DmsStandalone.tsx b/frontend/src/pages/DmsStandalone.tsx
new file mode 100644
index 0000000..3797f21
--- /dev/null
+++ b/frontend/src/pages/DmsStandalone.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { DmsPage } from './Dms';
+
+export function DmsStandalonePage() {
+  return (
+    <div className="h-screen w-screen overflow-hidden bg-white">
+      <DmsPage />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Mail.tsx b/frontend/src/pages/Mail.tsx
index 4305426..b799db0 100644
--- a/frontend/src/pages/Mail.tsx
+++ b/frontend/src/pages/Mail.tsx
@@ -15,9 +15,10 @@ import { ResizablePanel } from '@/components/ui/ResizablePanel';
 import { MailFolderTree } from '@/components/mail/MailFolderTree';
 import { MailList } from '@/components/mail/MailList';
 import { MailDetail } from '@/components/mail/MailDetail';
-import { ComposeModal, type ComposeMode } from '@/components/mail/ComposeModal';
+import { MailComposeForm, type ComposeMode } from '@/components/mail/MailComposeForm';
+import { useWindowStore } from '@/store/windowStore';
 import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
-import { ArrowRight, Check, ChevronLeft, Loader2, Plus, Redo2, Trash2, TrendingUp, Undo2 } from 'lucide-react';
+import { ArrowRight, Check, ChevronLeft, ExternalLink, Loader2, Plus, Redo2, Trash2, TrendingUp, Undo2 } from 'lucide-react';
 import {
   fetchAccounts,
   fetchFolders,
@@ -69,11 +70,11 @@ export function MailPage() {
   const [loadingMails, setLoadingMails] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [signatures, setSignatures] = useState<MailSignature[]>([]);
-  const [composeOpen, setComposeOpen] = useState(false);
   const [composeMode, setComposeMode] = useState<ComposeMode>('new');
   const [replyToMail, setReplyToMail] = useState<Mail | null>(null);
   const [forwardMailState, setForwardMailState] = useState<Mail | null>(null);
   const [draftMailState, setDraftMailState] = useState<Mail | null>(null);
+  const openWindow = useWindowStore((s) => s.openWindow);
   const [downloadingAttachmentId, setDownloadingAttachmentId] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [activeView, setActiveView] = useState<'folders' | 'list' | 'detail'>('folders');
@@ -233,14 +234,66 @@ export function MailPage() {
     [toast],
   );
 
+  // Handle send (compose)
+  const handleSend = useCallback(
+    async (payload: SendMailPayload | ReplyPayload | ForwardPayload, mode: ComposeMode) => {
+      try {
+        if (mode === 'reply' && replyToMail) {
+          await replyMail(replyToMail.id, payload as ReplyPayload);
+        } else if (mode === 'forward' && forwardMailState) {
+          await forwardMail(forwardMailState.id, payload as ForwardPayload);
+        } else {
+          await sendMail(payload as SendMailPayload);
+        }
+        toast.success(t('mail.sent'));
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : String(err));
+        throw err;
+      }
+    },
+    [replyToMail, forwardMailState, toast, t],
+  );
+
+  // Handle save draft (new or existing)
+  const handleSaveDraft = useCallback(
+    async (payload: MailDraftPayload) => {
+      try {
+        if (composeMode === 'draft' && draftMailState) {
+          await updateDraft(draftMailState.id, payload);
+        } else {
+          await saveDraft(payload);
+        }
+        toast.success(t('mail.draftSaved'));
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : String(err));
+        throw err;
+      }
+    },
+    [composeMode, draftMailState, toast, t],
+  );
+
   // Handle compose
   const handleCompose = useCallback(() => {
     setComposeMode('new');
     setReplyToMail(null);
     setForwardMailState(null);
     setDraftMailState(null);
-    setComposeOpen(true);
-  }, []);
+    openWindow({
+      title: t('mail.compose'),
+      type: 'mail-compose',
+      component: MailComposeForm,
+      componentProps: {
+        mode: 'new',
+        accountId: selectedAccountId,
+        replyToMail: null,
+        forwardMail: null,
+        draftMail: null,
+        signatures,
+        onSend: handleSend,
+        onSaveDraft: handleSaveDraft,
+      },
+    });
+  }, [openWindow, t, selectedAccountId, signatures, handleSend, handleSaveDraft]);
 
   // Handle reply
   const handleReply = useCallback((mail: Mail) => {
@@ -248,8 +301,22 @@ export function MailPage() {
     setReplyToMail(mail);
     setForwardMailState(null);
     setDraftMailState(null);
-    setComposeOpen(true);
-  }, []);
+    openWindow({
+      title: t('mail.reply'),
+      type: 'mail-compose',
+      component: MailComposeForm,
+      componentProps: {
+        mode: 'reply',
+        accountId: selectedAccountId,
+        replyToMail: mail,
+        forwardMail: null,
+        draftMail: null,
+        signatures,
+        onSend: handleSend,
+        onSaveDraft: handleSaveDraft,
+      },
+    });
+  }, [openWindow, t, selectedAccountId, signatures, handleSend, handleSaveDraft]);
 
   // Handle forward
   const handleForward = useCallback((mail: Mail) => {
@@ -257,8 +324,22 @@ export function MailPage() {
     setForwardMailState(mail);
     setReplyToMail(null);
     setDraftMailState(null);
-    setComposeOpen(true);
-  }, []);
+    openWindow({
+      title: t('mail.forward'),
+      type: 'mail-compose',
+      component: MailComposeForm,
+      componentProps: {
+        mode: 'forward',
+        accountId: selectedAccountId,
+        replyToMail: null,
+        forwardMail: mail,
+        draftMail: null,
+        signatures,
+        onSend: handleSend,
+        onSaveDraft: handleSaveDraft,
+      },
+    });
+  }, [openWindow, t, selectedAccountId, signatures, handleSend, handleSaveDraft]);
 
   // Handle delete single mail
   const handleDeleteMail = useCallback(
@@ -324,23 +405,6 @@ export function MailPage() {
     [selectedMailIds, toast, t],
   );
 
-  // Handle save draft (new or existing)
-  const handleSaveDraft = useCallback(
-    async (payload: MailDraftPayload) => {
-      try {
-        if (composeMode === 'draft' && draftMailState) {
-          await updateDraft(draftMailState.id, payload);
-        } else {
-          await saveDraft(payload);
-        }
-        toast.success(t('mail.draftSaved'));
-      } catch (err) {
-        toast.error(err instanceof Error ? err.message : String(err));
-        throw err;
-      }
-    },
-    [composeMode, draftMailState, toast, t],
-  );
 
   // Handle edit draft
   const handleEditDraft = useCallback((mail: Mail) => {
@@ -348,8 +412,22 @@ export function MailPage() {
     setDraftMailState(mail);
     setReplyToMail(null);
     setForwardMailState(null);
-    setComposeOpen(true);
-  }, []);
+    openWindow({
+      title: t('mail.editDraft'),
+      type: 'mail-compose',
+      component: MailComposeForm,
+      componentProps: {
+        mode: 'draft',
+        accountId: selectedAccountId,
+        replyToMail: null,
+        forwardMail: null,
+        draftMail: mail,
+        signatures,
+        onSend: handleSend,
+        onSaveDraft: handleSaveDraft,
+      },
+    });
+  }, [openWindow, t, selectedAccountId, signatures, handleSend, handleSaveDraft]);
 
   // Handle toggle flag
   const handleToggleFlag = useCallback(
@@ -486,25 +564,6 @@ export function MailPage() {
     [toast],
   );
 
-  // Handle send (compose)
-  const handleSend = useCallback(
-    async (payload: SendMailPayload | ReplyPayload | ForwardPayload, mode: ComposeMode) => {
-      try {
-        if (mode === 'reply' && replyToMail) {
-          await replyMail(replyToMail.id, payload as ReplyPayload);
-        } else if (mode === 'forward' && forwardMailState) {
-          await forwardMail(forwardMailState.id, payload as ForwardPayload);
-        } else {
-          await sendMail(payload as SendMailPayload);
-        }
-        toast.success(t('mail.sent'));
-      } catch (err) {
-        toast.error(err instanceof Error ? err.message : String(err));
-        throw err;
-      }
-    },
-    [replyToMail, forwardMailState, toast, t],
-  );
 
   // Handle search
   const handleSearch = useCallback((query: string) => {
@@ -632,6 +691,17 @@ export function MailPage() {
           }
         },
       },
+      {
+        id: 'open-standalone',
+        plugin: 'mail',
+        label: 'In neuem Fenster',
+        type: 'button' as const,
+        group: 'tools',
+        icon: (
+          <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />
+        ),
+        onClick: () => window.open('/mail-standalone', '_blank', 'width=1200,height=800'),
+      },
     ];
     if (hasBulkSelection) {
       items.push(
@@ -935,18 +1005,6 @@ export function MailPage() {
         </div>
       )}
 
-      <ComposeModal
-        open={composeOpen}
-        mode={composeMode}
-        accountId={selectedAccountId}
-        replyToMail={replyToMail}
-        forwardMail={forwardMailState}
-        draftMail={draftMailState}
-        signatures={signatures}
-        onSend={handleSend}
-        onSaveDraft={handleSaveDraft}
-        onClose={() => setComposeOpen(false)}
-      />
     </div>
   );
 }
diff --git a/frontend/src/pages/MailStandalone.tsx b/frontend/src/pages/MailStandalone.tsx
new file mode 100644
index 0000000..c5d7bd2
--- /dev/null
+++ b/frontend/src/pages/MailStandalone.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { MailPage } from './Mail';
+
+export function MailStandalonePage() {
+  return (
+    <div className="h-screen w-screen overflow-hidden bg-white">
+      <MailPage />
+    </div>
+  );
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index b65dc53..9b79d67 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -37,6 +37,10 @@ const ProactiveAISettings = React.lazy(() => import('@/pages/ProactiveAISettings
 const SettingsThemePage = React.lazy(() => import('@/pages/SettingsTheme').then(m => ({ default: m.SettingsThemePage })));
 const SettingsMcpPage = React.lazy(() => import('@/pages/SettingsMcp').then(m => ({ default: m.SettingsMcpPage })));
 const AIAssistantStandalonePage = React.lazy(() => import('@/pages/AIAssistantStandalone').then(m => ({ default: m.AIAssistantStandalonePage })));
+const DmsStandalonePage = React.lazy(() => import('@/pages/DmsStandalone').then(m => ({ default: m.DmsStandalonePage })));
+const CalendarStandalonePage = React.lazy(() => import('@/pages/CalendarStandalone').then(m => ({ default: m.CalendarStandalonePage })));
+const MailStandalonePage = React.lazy(() => import('@/pages/MailStandalone').then(m => ({ default: m.MailStandalonePage })));
+const ContactsStandalonePage = React.lazy(() => import('@/pages/ContactsStandalone').then(m => ({ default: m.ContactsStandalonePage })));
 const SettingsAIPage = React.lazy(() => import('@/pages/SettingsAI').then(m => ({ default: m.SettingsAIPage })));
 const SettingsMenuOrderPage = React.lazy(() => import('@/pages/SettingsMenuOrder').then(m => ({ default: m.SettingsMenuOrderPage })));
 const SettingsStammdatenPage = React.lazy(() => import('@/pages/SettingsStammdaten').then(m => ({ default: m.SettingsStammdatenPage })));
@@ -70,6 +74,22 @@ const router = createBrowserRouter([
     path: '/ai-assistant-standalone',
     element: withSuspense(<AIAssistantStandalonePage />),
   },
+  {
+    path: '/dms-standalone',
+    element: withSuspense(<DmsStandalonePage />),
+  },
+  {
+    path: '/calendar-standalone',
+    element: withSuspense(<CalendarStandalonePage />),
+  },
+  {
+    path: '/mail-standalone',
+    element: withSuspense(<MailStandalonePage />),
+  },
+  {
+    path: '/contacts-standalone',
+    element: withSuspense(<ContactsStandalonePage />),
+  },
   {
     path: '/password-reset',
     element: <PasswordResetRequestPage />,