feat: plugin ribbon toolbar + mail response fixes
- Add pluginToolbarStore for plugin toolbar item registration - Add PluginToolbar component (slim ribbon bar under TopBar) - Update AppShell to render PluginToolbar between TopBar and content - Mail page registers toolbar items (account select, search, compose, sync, settings) - Remove old mail top bar, use plugin toolbar instead - Fix mail response: arrays for addresses, add from_name/body_html/sanitized_html/date
This commit is contained in:
+52
-23
@@ -15,6 +15,7 @@ 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,
|
||||
@@ -280,6 +281,57 @@ export function MailPage() {
|
||||
setSearchQuery('');
|
||||
}, []);
|
||||
|
||||
// Register toolbar items
|
||||
const { registerItems, unregisterPlugin } = usePluginToolbarStore();
|
||||
useEffect(() => {
|
||||
registerItems('mail', [
|
||||
{
|
||||
id: 'account-select',
|
||||
plugin: 'mail',
|
||||
label: 'Account',
|
||||
type: 'select',
|
||||
group: 'account',
|
||||
selectValue: selectedAccountId,
|
||||
selectOptions: accounts.map((a) => ({ value: a.id, label: a.email })),
|
||||
onSelect: handleAccountSwitch,
|
||||
},
|
||||
{
|
||||
id: 'search',
|
||||
plugin: 'mail',
|
||||
label: 'Suchen',
|
||||
type: 'search',
|
||||
group: 'search',
|
||||
searchPlaceholder: 'E-Mails durchsuchen...',
|
||||
onSearch: handleSearch,
|
||||
},
|
||||
{
|
||||
id: 'compose',
|
||||
plugin: 'mail',
|
||||
label: 'Verfassen',
|
||||
group: '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="M12 4v16m8-8H4" /></svg>,
|
||||
onClick: handleCompose,
|
||||
},
|
||||
{
|
||||
id: 'sync',
|
||||
plugin: 'mail',
|
||||
label: 'Sync',
|
||||
group: '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="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 */ },
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
plugin: 'mail',
|
||||
label: 'Einstellungen',
|
||||
group: '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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>,
|
||||
onClick: () => window.location.href = '/mail/settings',
|
||||
},
|
||||
]);
|
||||
return () => unregisterPlugin('mail');
|
||||
}, [registerItems, unregisterPlugin, accounts, selectedAccountId, handleAccountSwitch, handleSearch, handleCompose]);
|
||||
|
||||
if (loadingAccounts) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12" data-testid="mail-page-loading">
|
||||
@@ -306,29 +358,6 @@ export function MailPage() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full" data-testid="mail-page">
|
||||
{/* Top bar */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-secondary-200 bg-white">
|
||||
<SharedMailboxSelector
|
||||
accounts={accounts}
|
||||
selectedAccountId={selectedAccountId}
|
||||
onSelect={handleAccountSwitch}
|
||||
/>
|
||||
<div className="flex-1 max-w-md">
|
||||
<MailSearchBar onSearch={handleSearch} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="sm" onClick={handleCompose} data-testid="compose-btn">
|
||||
<svg className="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
{t('mail.compose')}
|
||||
</Button>
|
||||
<Link to="/mail/settings" className="text-sm text-primary-600 hover:text-primary-700">
|
||||
{t('mail.settings')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{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>
|
||||
|
||||
Reference in New Issue
Block a user