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

frontend/src/components/layout/AppShell.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Outlet } from 'react-router-dom';
 import { Sidebar } from './Sidebar';
 import { TopBar } from './TopBar';
+import { PluginToolbar } from './PluginToolbar';
 import { ToastContainer } from '@/components/ui/Toast';
 
 export function AppShell() {
@@ -10,6 +11,7 @@ export function AppShell() {
       <Sidebar />
       <div className="flex-1 flex flex-col overflow-hidden">
         <TopBar />
+        <PluginToolbar />
         <main
           className="flex-1 overflow-y-auto focus:outline-none"
           tabIndex={-1}

frontend/src/components/layout/PluginToolbar.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { usePluginToolbarStore, type ToolbarItem } from '@/store/pluginToolbarStore';
+
+function ToolbarButton({ item }: { item: ToolbarItem }) {
+  return (
+    <button
+      onClick={item.onClick}
+      disabled={item.disabled}
+      className={`
+        inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium
+        transition-colors duration-100
+        ${item.active ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}
+        ${item.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+      `}
+      title={item.label}
+    >
+      {item.icon && <span className="w-3.5 h-3.5 flex-shrink-0">{item.icon}</span>}
+      <span className="hidden sm:inline">{item.label}</span>
+    </button>
+  );
+}
+
+function ToolbarSearch({ item }: { item: ToolbarItem }) {
+  return (
+    <input
+      type="text"
+      placeholder={item.searchPlaceholder || 'Suchen...'}
+      onChange={(e) => item.onSearch?.(e.target.value)}
+      className="w-40 px-2 py-1 text-xs border border-secondary-200 rounded
+        focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300
+        placeholder:text-secondary-400"
+    />
+  );
+}
+
+function ToolbarSelect({ item }: { item: ToolbarItem }) {
+  return (
+    <select
+      value={item.selectValue || ''}
+      onChange={(e) => item.onSelect?.(e.target.value)}
+      className="px-2 py-1 text-xs border border-secondary-200 rounded
+        focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300
+        bg-white cursor-pointer"
+    >
+      {item.selectOptions?.map((opt) => (
+        <option key={opt.value} value={opt.value}>{opt.label}</option>
+      ))}
+    </select>
+  );
+}
+
+export function PluginToolbar() {
+  const { items, activePlugin } = usePluginToolbarStore();
+  const visibleItems = items.filter((i) => i.plugin === activePlugin);
+
+  if (visibleItems.length === 0) return null;
+
+  // Group items by group field
+  const groups: Record<string, ToolbarItem[]> = {};
+  for (const item of visibleItems) {
+    const g = item.group || 'default';
+    if (!groups[g]) groups[g] = [];
+    groups[g].push(item);
+  }
+  const groupNames = Object.keys(groups);
+
+  return (
+    <div
+      className="flex items-center gap-1 px-3 py-1 bg-white border-b border-secondary-200 min-h-[36px]"
+      data-testid="plugin-toolbar"
+    >
+      {groupNames.map((groupName, gi) => (
+        <React.Fragment key={groupName}>
+          {gi > 0 && <div className="w-px h-5 bg-secondary-200 mx-1" />}
+          <div className="flex items-center gap-1">
+            {groups[groupName].map((item) => {
+              if (item.type === 'search') return <ToolbarSearch key={item.id} item={item} />;
+              if (item.type === 'select') return <ToolbarSelect key={item.id} item={item} />;
+              return <ToolbarButton key={item.id} item={item} />;
+            })}
+          </div>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

frontend/src/pages/Mail.tsx

@@ -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>

frontend/src/store/pluginToolbarStore.ts

@@ -0,0 +1,49 @@
+import { create } from 'zustand';
+
+export interface ToolbarItem {
+  id: string;
+  plugin: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  group?: string;
+  disabled?: boolean;
+  active?: boolean;
+  type?: 'button' | 'search' | 'select';
+  searchPlaceholder?: string;
+  onSearch?: (query: string) => void;
+  selectOptions?: { value: string; label: string }[];
+  selectValue?: string;
+  onSelect?: (value: string) => void;
+}
+
+interface PluginToolbarState {
+  items: ToolbarItem[];
+  activePlugin: string | null;
+  registerItems: (plugin: string, items: ToolbarItem[]) => void;
+  unregisterPlugin: (plugin: string) => void;
+  setActivePlugin: (plugin: string | null) => void;
+  updateItem: (plugin: string, id: string, updates: Partial<ToolbarItem>) => void;
+}
+
+export const usePluginToolbarStore = create<PluginToolbarState>((set) => ({
+  items: [],
+  activePlugin: null,
+  registerItems: (plugin, newItems) =>
+    set((state) => ({
+      items: [...state.items.filter((i) => i.plugin !== plugin), ...newItems],
+      activePlugin: plugin,
+    })),
+  unregisterPlugin: (plugin) =>
+    set((state) => ({
+      items: state.items.filter((i) => i.plugin !== plugin),
+      activePlugin: state.activePlugin === plugin ? null : state.activePlugin,
+    })),
+  setActivePlugin: (plugin) => set({ activePlugin: plugin }),
+  updateItem: (plugin, id, updates) =>
+    set((state) => ({
+      items: state.items.map((i) =>
+        i.plugin === plugin && i.id === id ? { ...i, ...updates } : i
+      ),
+    })),
+}));