leocrm/frontend/src/pages/Mail.tsx

/**
 * Mail page — folder tree + mail list + reading pane + compose.
 * Uses ResizablePanel for drag-to-resize columns.
 * Account selection is integrated into the folder tree (left pane).
 */

import React, { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { useToast } from '@/components/ui/Toast';
import { EmptyState } from '@/components/ui/EmptyState';
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 { SharedMailboxSelector } from '@/components/mail/SharedMailboxSelector';
import { MailSearchBar } from '@/components/mail/MailSearchBar';
import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
import {
  fetchAccounts,
  fetchFolders,
  fetchMails,
  getMail,
  sendMail,
  replyMail,
  forwardMail,
  updateFlags,
  createEventFromMail,
  downloadAttachment,
  fetchSignatures,
  searchMails,
  type MailAccount,
  type MailFolder,
  type Mail,
  type MailSignature,
  type MailAttachment,
  type SendMailPayload,
  type ReplyPayload,
  type ForwardPayload,
  type CreateEventFromMailPayload,
} from '@/api/mail';

const PAGE_SIZE = 25;

export function MailPage() {
  const { t } = useTranslation();
  const toast = useToast();

  const [accounts, setAccounts] = useState<MailAccount[]>([]);
  const [selectedAccountId, setSelectedAccountId] = useState('');
  const [folders, setFolders] = useState<MailFolder[]>([]);
  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
  const [mails, setMails] = useState<Mail[]>([]);
  const [mailsTotal, setMailsTotal] = useState(0);
  const [mailsPage, setMailsPage] = useState(1);
  const [selectedMail, setSelectedMail] = useState<Mail | null>(null);
  const [loadingMail, setLoadingMail] = useState(false);
  const [loadingAccounts, setLoadingAccounts] = useState(true);
  const [loadingFolders, setLoadingFolders] = useState(false);
  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 [downloadingAttachmentId, setDownloadingAttachmentId] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [activeView, setActiveView] = useState<'folders' | 'list' | 'detail'>('folders');
  const [selectedMailIds, setSelectedMailIds] = useState<Set<string>>(new Set());

  // Load accounts
  const loadAccounts = useCallback(async () => {
    setLoadingAccounts(true);
    try {
      const accs = await fetchAccounts();
      setAccounts(accs);
      if (accs.length > 0 && !selectedAccountId) {
        setSelectedAccountId(accs[0].id);
      }
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      setError(msg);
    }
    setLoadingAccounts(false);
  }, [selectedAccountId]);

  // Load signatures
  const loadSignatures = useCallback(async () => {
    try {
      const sigs = await fetchSignatures();
      setSignatures(sigs);
    } catch {
      // non-critical
    }
  }, []);

  useEffect(() => {
    loadAccounts();
    loadSignatures();
  }, [loadAccounts, loadSignatures]);

  // Load folders for ALL accounts
  const loadAllFolders = useCallback(async () => {
    if (accounts.length === 0) return;
    setLoadingFolders(true);
    try {
      const allFolders: MailFolder[] = [];
      for (const acc of accounts) {
        const folderList = await fetchFolders(acc.id);
        allFolders.push(...folderList);
      }
      setFolders(allFolders);
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      setError(msg);
    }
    setLoadingFolders(false);
  }, [accounts]);

  useEffect(() => {
    loadAllFolders();
  }, [loadAllFolders]);

  // Auto-select first folder when folders are loaded
  useEffect(() => {
    if (folders.length > 0 && !selectedFolderId) {
      setSelectedFolderId(folders[0].id);
      setSelectedAccountId(folders[0].account_id);
    }
  }, [folders, selectedFolderId]);

  // Load mails when folder or page changes
  const loadMails = useCallback(async () => {
    if (!selectedFolderId) return;
    setLoadingMails(true);
    try {
      if (searchQuery.trim()) {
        const result = await searchMails(searchQuery);
        setMails(result.mails);
        setMailsTotal(result.total);
      } else {
        const result = await fetchMails(selectedFolderId, mailsPage);
        setMails(result.mails);
        setMailsTotal(result.total);
      }
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      setError(msg);
      setMails([]);
    }
    setLoadingMails(false);
  }, [selectedFolderId, mailsPage, searchQuery]);

  useEffect(() => {
    loadMails();
  }, [loadMails]);

  // Handle folder selection — derive account from folder
  const handleSelectFolder = useCallback(
    (folderId: string) => {
      setSelectedFolderId(folderId);
      const folder = folders.find((f) => f.id === folderId);
      if (folder) {
        setSelectedAccountId(folder.account_id);
      }
      setMailsPage(1);
      setSearchQuery('');
      setSelectedMail(null);
      setSelectedMailIds(new Set());
      setActiveView('list');
    },
    [folders],
  );

  // Handle mail selection
  const handleSelectMail = useCallback(
    async (mail: Mail) => {
      setActiveView('detail');
      setLoadingMail(true);
      try {
        const detail = await getMail(mail.id);
        setSelectedMail(detail);
        // Mark as seen if not seen
        if (!detail.is_seen) {
          await updateFlags(mail.id, { is_seen: true });
          setMails((prev) => prev.map((m) => (m.id === mail.id ? { ...m, is_seen: true } : m)));
        }
      } catch (err) {
        const msg = err instanceof Error ? err.message : String(err);
        toast.error(msg);
        setSelectedMail(mail);
      }
      setLoadingMail(false);
    },
    [toast],
  );

  // Handle compose
  const handleCompose = useCallback(() => {
    setComposeMode('new');
    setReplyToMail(null);
    setForwardMailState(null);
    setComposeOpen(true);
  }, []);

  // Handle reply
  const handleReply = useCallback((mail: Mail) => {
    setComposeMode('reply');
    setReplyToMail(mail);
    setForwardMailState(null);
    setComposeOpen(true);
  }, []);

  // Handle forward
  const handleForward = useCallback((mail: Mail) => {
    setComposeMode('forward');
    setForwardMailState(mail);
    setReplyToMail(null);
    setComposeOpen(true);
  }, []);

  // Handle toggle flag
  const handleToggleFlag = useCallback(
    async (mail: Mail) => {
      try {
        await updateFlags(mail.id, { is_flagged: !mail.is_flagged });
        setSelectedMail((prev) => (prev ? { ...prev, is_flagged: !mail.is_flagged } : prev));
        setMails((prev) => prev.map((m) => (m.id === mail.id ? { ...m, is_flagged: !mail.is_flagged } : m)));
      } catch (err) {
        toast.error(err instanceof Error ? err.message : String(err));
      }
    },
    [toast],
  );

  // Handle toggle select for bulk operations
  const handleToggleSelect = useCallback((mailId: string) => {
    setSelectedMailIds((prev) => {
      const next = new Set(prev);
      if (next.has(mailId)) {
        next.delete(mailId);
      } else {
        next.add(mailId);
      }
      return next;
    });
  }, []);

  // Handle select all mails on current page
  const handleSelectAll = useCallback(() => {
    setSelectedMailIds((prev) => {
      const allSelected = mails.length > 0 && mails.every((m) => prev.has(m.id));
      if (allSelected) {
        // Deselect all on current page
        const next = new Set(prev);
        for (const m of mails) {
          next.delete(m.id);
        }
        return next;
      }
      // Select all on current page
      const next = new Set(prev);
      for (const m of mails) {
        next.add(m.id);
      }
      return next;
    });
  }, [mails]);

  // Handle bulk mark as read
  const handleBulkMarkRead = useCallback(async () => {
    const ids = Array.from(selectedMailIds);
    try {
      await Promise.all(ids.map((id) => updateFlags(id, { is_seen: true })));
      setMails((prev) => prev.map((m) => (selectedMailIds.has(m.id) ? { ...m, is_seen: true } : m)));
      setSelectedMailIds(new Set());
      toast.success(t('mail.markRead'));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
    }
  }, [selectedMailIds, toast, t]);

  // Handle bulk mark as unread
  const handleBulkMarkUnread = useCallback(async () => {
    const ids = Array.from(selectedMailIds);
    try {
      await Promise.all(ids.map((id) => updateFlags(id, { is_seen: false })));
      setMails((prev) => prev.map((m) => (selectedMailIds.has(m.id) ? { ...m, is_seen: false } : m)));
      setSelectedMailIds(new Set());
      toast.success(t('mail.markUnread'));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
    }
  }, [selectedMailIds, toast, t]);

  // Handle create event from mail
  const handleCreateEvent = useCallback(
    async (mail: Mail) => {
      const title = mail.subject || t('mail.noSubject');
      const now = new Date();
      const start = now.toISOString();
      const end = new Date(now.getTime() + 60 * 60 * 1000).toISOString();
      const payload: CreateEventFromMailPayload = {
        title,
        start,
        end,
        description: mail.body_text.slice(0, 500),
      };
      try {
        await createEventFromMail(mail.id, payload);
        toast.success(t('mail.eventCreated'));
      } catch (err) {
        toast.error(err instanceof Error ? err.message : String(err));
      }
    },
    [toast, t],
  );

  // Handle attachment download
  const handleDownloadAttachment = useCallback(
    async (mailId: string, attachment: MailAttachment) => {
      setDownloadingAttachmentId(attachment.id);
      try {
        const blob = await downloadAttachment(mailId, attachment.id);
        const url = window.URL.createObjectURL(blob);
        const a = window.document.createElement('a');
        a.href = url;
        a.download = attachment.filename;
        window.document.body.appendChild(a);
        a.click();
        window.document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
      } catch (err) {
        toast.error(err instanceof Error ? err.message : String(err));
      } finally {
        setDownloadingAttachmentId(null);
      }
    },
    [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) => {
    setSearchQuery(query);
    setMailsPage(1);
  }, []);

  // Register toolbar items (account-select removed — account is now in folder tree)
  const registerItems = usePluginToolbarStore((s) => s.registerItems);
  const unregisterPlugin = usePluginToolbarStore((s) => s.unregisterPlugin);
  const selectedMailId = selectedMail?.id;
  const selectedMailFlagged = selectedMail?.is_flagged;
  useEffect(() => {
    const hasMail = !!selectedMailId;
    const hasBulkSelection = selectedMailIds.size > 0;
    const items = [
      {
        id: 'search',
        plugin: 'mail',
        label: 'Suchen',
        type: 'search' as const,
        group: 'search',
        searchPlaceholder: 'E-Mails durchsuchen...',
        onSearch: handleSearch,
        onClick: () => {},
      },
      {
        id: 'compose',
        plugin: 'mail',
        label: 'Verfassen',
        group: 'compose',
        icon: (
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
        ),
        onClick: handleCompose,
      },
      {
        id: 'reply',
        plugin: 'mail',
        label: 'Antworten',
        group: 'mail-actions',
        disabled: !hasMail,
        icon: (
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
          </svg>
        ),
        onClick: () => selectedMail && handleReply(selectedMail),
      },
      {
        id: 'forward',
        plugin: 'mail',
        label: 'Weiterleiten',
        group: 'mail-actions',
        disabled: !hasMail,
        icon: (
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 10H11a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6" />
          </svg>
        ),
        onClick: () => selectedMail && handleForward(selectedMail),
      },
      {
        id: 'flag',
        plugin: 'mail',
        label: 'Flagge',
        group: 'mail-actions',
        disabled: !hasMail,
        active: selectedMailFlagged,
        icon: (
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
          </svg>
        ),
        onClick: () => selectedMail && handleToggleFlag(selectedMail),
      },
      {
        id: 'create-event',
        plugin: 'mail',
        label: 'Termin',
        group: 'mail-actions',
        disabled: !hasMail,
        icon: (
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        ),
        onClick: () => selectedMail && handleCreateEvent(selectedMail),
      },
      {
        id: 'sync',
        plugin: 'mail',
        label: 'Sync',
        group: 'tools',
        icon: (
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
          </svg>
        ),
        onClick: () => { /* sync trigger */ },
      },
    ];
    if (hasBulkSelection) {
      items.push(
        {
          id: 'bulk-mark-read',
          plugin: 'mail',
          label: t('mail.markRead'),
          group: 'bulk-actions',
          icon: (
            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          ),
          onClick: handleBulkMarkRead,
        },
        {
          id: 'bulk-mark-unread',
          plugin: 'mail',
          label: t('mail.markUnread'),
          group: 'bulk-actions',
          icon: (
            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 19l6-6 4 4 8-8" />
            </svg>
          ),
          onClick: handleBulkMarkUnread,
        },
      );
    }
    registerItems('mail', items);
    return () => unregisterPlugin('mail');
  }, [selectedMailId, selectedMailFlagged, selectedMailIds, handleSearch, handleCompose, handleReply, handleForward, handleToggleFlag, handleCreateEvent, handleBulkMarkRead, handleBulkMarkUnread, t]);

  if (loadingAccounts) {
    return (
      <div className="flex items-center justify-center py-12" data-testid="mail-page-loading">
        <svg className="animate-spin h-6 w-6 text-secondary-400" fill="none" viewBox="0 0 24 24" aria-hidden="true">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
        </svg>
        <span className="ml-2 text-secondary-500">{t('common.loading')}</span>
      </div>
    );
  }

  if (accounts.length === 0) {
    return (
      <div className="p-6 max-w-7xl mx-auto" data-testid="mail-page">
        <EmptyState
          title={t('mail.noAccounts')}
          description={t('mail.noAccountsDesc')}
          action={<Link to="/settings/mail" className="text-primary-600 hover:text-primary-700">{t('mail.configureAccount')}</Link>}
        />
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full" data-testid="mail-page">
      {error && (
        <div className="mb-2 p-3 bg-danger-50 border border-danger-200 rounded-md" role="alert" data-testid="mail-error">
          <p className="text-sm text-danger-700">{error}</p>
        </div>
      )}

      {/* Desktop: three-pane layout with resizable panels */}
      <div className="hidden md:flex flex-1 overflow-hidden">
        {/* Folder tree — resizable */}
        <ResizablePanel
          initialWidth={224}
          minWidth={150}
          maxWidth={400}
          className="border-r border-secondary-200 bg-white"
          data-testid="mail-folder-pane"
        >
          <div className="p-3">
            <MailFolderTree
              accounts={accounts}
              folders={folders}
              selectedFolderId={selectedFolderId}
              onSelect={handleSelectFolder}
              loading={loadingFolders}
            />
          </div>
        </ResizablePanel>

        {/* Mail list — resizable */}
        <ResizablePanel
          initialWidth={320}
          minWidth={200}
          maxWidth={500}
          className="border-r border-secondary-200 bg-white"
          data-testid="mail-list-pane"
        >
          <MailList
            mails={mails}
            selectedMailId={selectedMail?.id || null}
            onSelectMail={handleSelectMail}
            loading={loadingMails}
            currentPage={mailsPage}
            total={mailsTotal}
            pageSize={PAGE_SIZE}
            onPageChange={setMailsPage}
            selectedMailIds={selectedMailIds}
            onToggleSelect={handleToggleSelect}
            onSelectAll={handleSelectAll}
          />
        </ResizablePanel>

        {/* Reading pane — flex-1, not resizable */}
        <ResizablePanel
          resizable={false}
          className="bg-white"
          data-testid="mail-detail-pane"
        >
          <MailDetail
            mail={selectedMail}
            loading={loadingMail}
            onReply={handleReply}
            onForward={handleForward}
            onCreateEvent={handleCreateEvent}
            onToggleFlag={handleToggleFlag}
            onDownloadAttachment={handleDownloadAttachment}
            downloadingAttachmentId={downloadingAttachmentId}
          />
        </ResizablePanel>
      </div>

      {/* Mobile: single-pane view switching */}
      <div className="flex md:hidden flex-1 overflow-hidden flex-col">
        {/* View 1: Folder tree */}
        {activeView === 'folders' && (
          <div className="flex-1 overflow-y-auto bg-white" data-testid="mobile-folder-pane">
            <div className="p-3">
              <MailFolderTree
                accounts={accounts}
                folders={folders}
                selectedFolderId={selectedFolderId}
                onSelect={handleSelectFolder}
                loading={loadingFolders}
              />
            </div>
          </div>
        )}

        {/* View 2: Mail list */}
        {activeView === 'list' && (
          <div className="flex-1 overflow-y-auto bg-white" data-testid="mobile-list-pane">
            <div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-200 sticky top-0 bg-white z-10">
              <button
                onClick={() => setActiveView('folders')}
                className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
                aria-label="Zurück zu Ordnern"
                data-testid="mobile-back-to-folders"
              >
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
                <span className="text-sm font-medium">Ordner</span>
              </button>
            </div>
            <MailList
              mails={mails}
              selectedMailId={selectedMail?.id || null}
              onSelectMail={handleSelectMail}
              loading={loadingMails}
              currentPage={mailsPage}
              total={mailsTotal}
              pageSize={PAGE_SIZE}
              onPageChange={setMailsPage}
              selectedMailIds={selectedMailIds}
              onToggleSelect={handleToggleSelect}
              onSelectAll={handleSelectAll}
            />
          </div>
        )}

        {/* View 3: Mail detail */}
        {activeView === 'detail' && (
          <div className="flex-1 overflow-y-auto bg-white" data-testid="mobile-detail-pane">
            <div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-200 sticky top-0 bg-white z-10">
              <button
                onClick={() => setActiveView('list')}
                className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
                aria-label="Zurück zur Liste"
                data-testid="mobile-back-to-list"
              >
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
                <span className="text-sm font-medium">Zurück</span>
              </button>
            </div>
            <MailDetail
              mail={selectedMail}
              loading={loadingMail}
              onReply={handleReply}
              onForward={handleForward}
              onCreateEvent={handleCreateEvent}
              onToggleFlag={handleToggleFlag}
              onDownloadAttachment={handleDownloadAttachment}
              downloadingAttachmentId={downloadingAttachmentId}
            />
          </div>
        )}
      </div>

      {/* Floating bulk action bar */}
      {selectedMailIds.size > 0 && (
        <div
          className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 px-4 py-2 bg-white border border-secondary-200 rounded-lg shadow-lg"
          data-testid="mail-bulk-action-bar"
        >
          <span className="text-sm text-secondary-600">
            {t('mail.selectedCount', { count: selectedMailIds.size })}
          </span>
          <div className="w-px h-5 bg-secondary-200" />
          <Button variant="secondary" size="sm" onClick={handleBulkMarkRead}>
            {t('mail.markRead')}
          </Button>
          <Button variant="secondary" size="sm" onClick={handleBulkMarkUnread}>
            {t('mail.markUnread')}
          </Button>
          <Button variant="ghost" size="sm" onClick={() => setSelectedMailIds(new Set())}>
            ✕
          </Button>
        </div>
      )}

      <ComposeModal
        open={composeOpen}
        mode={composeMode}
        accountId={selectedAccountId}
        replyToMail={replyToMail}
        forwardMail={forwardMailState}
        signatures={signatures}
        onSend={handleSend}
        onClose={() => setComposeOpen(false)}
      />
    </div>
  );
}