feat(workspace): move status pills to tab bar and add undo/redo and actions menu to note header

CHANGELOG.md

@@ -11,6 +11,7 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 - Aufgaben-Details: Knopf „Beobachten“ / „Nicht mehr beobachten“ (`POST/DELETE /tasks/{id}/watch`).
 
 ### Changed
+- Notizkopf aufgeräumt: Live-Status, Freigabe-Pille und Online-Avatare stehen oben in der Tab-Leiste neben „Gespeichert“; im Notizkopf gibt es Knöpfe für Rückgängig (`Strg+Z`) und Wiederholen (`Strg+Y`), „Teilen“ direkt sichtbar und ein Drei-Punkte-Menü für Anheften, Zusammenführen, Markdown-Export und Löschen.
 - `/diktat` in Notizen: schreibt live mit (mehrzeiliger Text über den Wellen mit Zeitanzeige `mm:ss`), bricht im Browser-Modus bei Sprechpausen nicht mehr ab und schickt im Server-Modus alle ~8 Sekunden bzw. nach kurzen Sprechpausen Abschnitte zur Erkennung vorab.
 
 ### Fixed

frontend/src/features/workspace/DocumentEditor.tsx

@@ -18,16 +18,26 @@ import {
   CloudOff,
   AlertTriangle,
   GitMerge,
+  Undo2,
+  Redo2,
+  MoreHorizontal,
 } from 'lucide-react';
 import { Document, DocumentBlock, User } from '../../lib/types';
 import { api } from '../../lib/api';
 import { DocSyncEngine, EngineState } from '../../lib/docSync/engine';
+import { Presence } from '../../lib/docSync/transport';
 import { OutlinerTree, OutlinerTreeHandle } from './OutlinerTree';
-import { PresenceAvatars } from './PresenceAvatars';
 import { extractHashtags } from '../../lib/hashtags';
 
 export type DocSaveStatus = 'saved' | 'saving' | 'unsaved' | 'error';
 
+export interface DocHeaderStatus {
+  showLive: boolean;
+  channel: 'ws' | 'sse' | 'longpoll' | 'interval';
+  otherPeople: Presence[];
+  avatarsById: Map<string, string>;
+}
+
 export interface DocumentEditorProps {
   docId: string;
   currentUser?: User | null;
@@ -45,6 +55,7 @@ export interface DocumentEditorProps {
   onBackMobile?: () => void;
   onOpenTask?: (taskId: string) => void;
   onSaveStatusChange?: (status: DocSaveStatus, errorMsg?: string) => void;
+  onHeaderStatusChange?: (status: DocHeaderStatus | null) => void;
   /** Opens the dialog to merge this note into another one (own notes only) */
   onRequestMerge?: (doc: Document) => void;
   /** A note was created from this one (extract) or removed again (undo); keeps the sidebar current */
@@ -196,6 +207,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   onBackMobile,
   onOpenTask,
   onSaveStatusChange,
+  onHeaderStatusChange,
   onRequestMerge,
   onDocCreated,
   onDocRemoved,
@@ -209,6 +221,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
   const [zoomedBlockId, setZoomedBlockId] = useState<string | null>(null);
+  const [showActionsMenu, setShowActionsMenu] = useState<boolean>(false);
+  const actionsMenuRef = useRef<HTMLDivElement | null>(null);
 
   // Sync engine (operation log): stores every change locally and syncs it with the server
   const engineRef = useRef<DocSyncEngine | null>(null);
@@ -384,6 +398,48 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
       .catch(() => {});
   }, [otherPeople.length]);
 
+  useEffect(() => {
+    onHeaderStatusChange?.({
+      showLive: Boolean(engineState && (engineState.shared || engineState.sessions > 1)),
+      channel: engineState?.channel || 'ws',
+      otherPeople,
+      avatarsById,
+    });
+  }, [
+    engineState?.shared,
+    engineState?.sessions,
+    engineState?.channel,
+    otherPeople,
+    avatarsById,
+    onHeaderStatusChange,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      onHeaderStatusChange?.(null);
+    };
+  }, [onHeaderStatusChange]);
+
+  useEffect(() => {
+    if (!showActionsMenu) return;
+    const handleMouseDown = (e: MouseEvent) => {
+      if (actionsMenuRef.current && !actionsMenuRef.current.contains(e.target as Node)) {
+        setShowActionsMenu(false);
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setShowActionsMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [showActionsMenu]);
+
   // Short hint at the bottom of the editor (blocked actions, skipped undo), optionally with one action
   const [notice, setNotice] = useState<string | null>(null);
   const [noticeActions, setNoticeActions] = useState<{ label: string; run: () => void }[]>([]);
@@ -715,7 +771,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             <button
               type="button"
               onClick={onBackMobile}
-              className="lg:hidden btn-icon"
+              className="lg:hidden btn-icon h-11 w-11 sm:h-7 sm:w-7"
               title="Zurück zur Seitenleiste"
             >
               <ArrowLeft className="w-3.5 h-3.5" />
@@ -813,118 +869,128 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
 
         {/* Right Action Buttons */}
         <div className="flex items-center gap-1.5">
-          {/* How changes of others arrive (only relevant for shared notes) */}
+          {!inTrash && (
-          {engineState && (engineState.shared || engineState.sessions > 1) && (
+            <>
-            <span
+              <button
-              className="hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-btn text-[11px] text-muted bg-panel border border-border"
+                type="button"
-              title={
+                onClick={handleUndo}
-                engineState.channel === 'ws'
+                disabled={!canEdit || !engineState?.canUndo}
-                  ? 'Live-Verbindung über WebSocket'
+                className="btn-icon h-11 w-11 sm:h-7 sm:w-7 disabled:opacity-40 disabled:cursor-not-allowed"
-                  : engineState.channel === 'sse'
+                title="Rückgängig (Strg+Z)"
-                  ? 'Live-Verbindung über Server-Sent Events (WebSocket wird blockiert)'
+                aria-label="Rückgängig (Strg+Z)"
-                  : engineState.channel === 'longpoll'
+              >
-                  ? 'Live über Long-Polling (WebSocket und SSE werden blockiert)'
+                <Undo2 className="w-3.5 h-3.5" />
-                  : 'Keine Live-Verbindung möglich – Änderungen werden alle 3 Sekunden abgefragt'
+              </button>
-              }
+              <button
-            >
+                type="button"
-              <span
+                onClick={handleRedo}
-                className={`w-1.5 h-1.5 rounded-full ${
+                disabled={!canEdit || !engineState?.canRedo}
-                  engineState.channel === 'interval' ? 'bg-status-warn' : 'bg-status-ok'
+                className="btn-icon h-11 w-11 sm:h-7 sm:w-7 disabled:opacity-40 disabled:cursor-not-allowed"
-                }`}
+                title="Wiederholen (Strg+Y)"
-              />
+                aria-label="Wiederholen (Strg+Y)"
-              {engineState.channel === 'longpoll' ? 'Live (Long-Polling)' : engineState.channel === 'interval' ? 'Abgleich alle 3 s' : 'Live'}
+              >
-            </span>
+                <Redo2 className="w-3.5 h-3.5" />
+              </button>
+            </>
           )}
 
-          {/* Who else has this note open */}
+          {doc && !inTrash && (
-          <PresenceAvatars people={otherPeople} avatars={avatarsById} />
+            <button
-          {/* Sharing Section */}
+              type="button"
-          {doc && !inTrash && (() => {
+              onClick={() => onOpenShareModal(doc)}
-            const isOwner = doc.isOwner !== false && (doc.userId === currentUser?.id || !doc.userId || currentUser?.role === 'admin');
+              className="btn-icon h-11 w-11 sm:h-7 sm:w-7"
-            const sharesCount = doc.sharedWith?.length || 0;
+              title="Notiz teilen und Berechtigungen"
-            const isShared = sharesCount > 0 || !isOwner || Boolean(doc.sharedFolderId);
+              aria-label="Notiz teilen und Berechtigungen"
-            const ownerDisplayName = doc.ownerName || 'Eigentümer';
+            >
+              <Users className="w-3.5 h-3.5" />
+            </button>
+          )}
 
-            return (
+          <div className="relative" ref={actionsMenuRef}>
-              <div className="flex items-center gap-1.5">
+            <button
-                {isShared && (
+              type="button"
-                  isOwner ? (
+              onClick={() => setShowActionsMenu((prev) => !prev)}
-                    <button
+              aria-expanded={showActionsMenu}
-                      type="button"
+              aria-haspopup="menu"
-                      onClick={() => onOpenShareModal(doc)}
+              aria-label="Weitere Aktionen"
-                      className="px-2 py-0.5 rounded text-[10px] font-semibold bg-accent/15 text-accent border border-accent/30 flex items-center gap-1 hover:bg-accent/25 hover:border-accent/50 transition-colors cursor-pointer"
+              title="Weitere Aktionen"
-                      title="Teilen-Menü öffnen: Geteilt mit Nutzern/Gruppen anzeigen & verwalten"
+              className="btn-icon h-11 w-11 sm:h-7 sm:w-7"
-                    >
+            >
-                      <Users className="w-2.5 h-2.5" />
+              <MoreHorizontal className="w-3.5 h-3.5" />
-                      <span>Geteilt{sharesCount > 0 ? ` (${sharesCount})` : ''}</span>
+            </button>
-                    </button>
+
-                  ) : (
+            {showActionsMenu && (
-                    <button
+              <div
-                      type="button"
+                role="menu"
-                      onClick={() => onOpenShareModal(doc)}
+                className="absolute right-0 top-full mt-1.5 w-60 rounded-card bg-panel border border-border shadow-lg p-1 z-30 text-xs"
-                      className="px-2 py-0.5 rounded text-[10px] font-medium border border-border text-muted flex items-center gap-1 bg-surface-subtle hover:bg-panel-elevated hover:text-main transition-colors cursor-pointer"
+              >
-                      title="Teilen & Berechtigungen öffnen"
+                {!inTrash && (
-                    >
+                  <button
-                      <Users className="w-2.5 h-2.5" />
+                    type="button"
-                      <span>Geteilt von {ownerDisplayName}</span>
+                    role="menuitem"
-                    </button>
+                    onClick={() => {
-                  )
+                      setShowActionsMenu(false);
+                      void handleTogglePin();
+                    }}
+                    className="w-full min-h-[44px] sm:min-h-0 px-2.5 py-2 sm:py-1.5 rounded-btn hover:bg-panel-elevated text-left text-main font-medium flex items-center gap-2 transition-colors cursor-pointer"
+                  >
+                    <Pin
+                      className={`w-3.5 h-3.5 shrink-0 ${
+                        doc?.isPinned ? 'text-status-warn' : 'text-accent'
+                      }`}
+                    />
+                    <span>{doc?.isPinned ? 'Anheftung lösen' : 'Notiz anheften'}</span>
+                  </button>
+                )}
+
+                {onRequestMerge && doc?.isOwner && !inTrash && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      setShowActionsMenu(false);
+                      onRequestMerge(doc);
+                    }}
+                    className="w-full min-h-[44px] sm:min-h-0 px-2.5 py-2 sm:py-1.5 rounded-btn hover:bg-panel-elevated text-left text-main font-medium flex items-center gap-2 transition-colors cursor-pointer"
+                  >
+                    <GitMerge className="w-3.5 h-3.5 text-accent shrink-0" />
+                    <span>Mit anderer Notiz zusammenführen…</span>
+                  </button>
                 )}
 
                 <button
                   type="button"
-                  onClick={() => onOpenShareModal(doc)}
+                  role="menuitem"
-                  className="btn-icon"
+                  onClick={() => {
-                  title="Notiz teilen und Berechtigungen"
+                    setShowActionsMenu(false);
+                    handleExportMarkdown();
+                  }}
+                  className="w-full min-h-[44px] sm:min-h-0 px-2.5 py-2 sm:py-1.5 rounded-btn hover:bg-panel-elevated text-left text-main font-medium flex items-center gap-2 transition-colors cursor-pointer"
                 >
-                  <Users className="w-3.5 h-3.5" />
+                  <Download className="w-3.5 h-3.5 text-accent shrink-0" />
+                  <span>Als Markdown (.md) exportieren</span>
                 </button>
-                {onRequestMerge && doc.isOwner && !inTrash && (
+
-                  <button
+                {canEdit && (doc?.isOwner || doc?.permission === 'owner') && (
-                    type="button"
+                  <>
-                    onClick={() => onRequestMerge(doc)}
+                    <div className="my-1 border-t border-border" />
-                    className="btn-icon"
+                    <button
-                    title="Mit anderer Notiz zusammenführen…"
+                      type="button"
-                  >
+                      role="menuitem"
-                    <GitMerge className="w-3.5 h-3.5" />
+                      onClick={() => {
-                  </button>
+                        setShowActionsMenu(false);
+                        onDeleteDoc(docId);
+                      }}
+                      className="w-full min-h-[44px] sm:min-h-0 px-2.5 py-2 sm:py-1.5 rounded-btn hover:bg-status-err/10 text-left text-status-err font-medium flex items-center gap-2 transition-colors cursor-pointer"
+                    >
+                      <Trash2 className="w-3.5 h-3.5 text-status-err shrink-0" />
+                      <span>Notiz löschen</span>
+                    </button>
+                  </>
                 )}
               </div>
-            );
+            )}
-          })()}
+          </div>
-
-          {!inTrash && <button
-            type="button"
-            onClick={handleTogglePin}
-            className={`btn-icon ${
-              doc?.isPinned
-                ? 'text-status-warn bg-status-warn/10 border-status-warn/30'
-                : ''
-            }`}
-            title={doc?.isPinned ? 'Anheftung lösen' : 'Notiz anheften'}
-          >
-            <Pin className="w-3.5 h-3.5" />
-          </button>}
-
-          <button
-            type="button"
-            onClick={handleExportMarkdown}
-            className="btn-icon"
-            title="Als Markdown (.md) exportieren"
-          >
-            <Download className="w-3.5 h-3.5" />
-          </button>
-
-          {canEdit && (doc?.isOwner || doc?.permission === 'owner') && (
-            <button
-              type="button"
-              onClick={() => onDeleteDoc(docId)}
-              className="btn-icon-danger"
-              title="Notiz löschen"
-            >
-              <Trash2 className="w-3.5 h-3.5" />
-            </button>
-          )}
         </div>
       </div>
 

frontend/src/features/workspace/WorkspaceView.tsx

@@ -46,7 +46,8 @@ import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { FormSheet } from '../../components/FormSheet';
 import { sendDocOps } from '../../lib/docSync/oneoff';
 import { useMobileActions } from '../../context/MobileActionContext';
-import { DocumentEditor, DocSaveStatus } from './DocumentEditor';
+import { DocumentEditor, DocSaveStatus, DocHeaderStatus } from './DocumentEditor';
+import { PresenceAvatars } from './PresenceAvatars';
 import { TrashView } from './TrashView';
 import { MergeDialog } from './MergeDialog';
 import { CountBadge } from '../../components/CountBadge';
@@ -386,6 +387,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
   const [docSaveStatus, setDocSaveStatus] = useState<DocSaveStatus>('saved');
   const [docSaveError, setDocSaveError] = useState<string | null>(null);
+  const [docHeaderStatus, setDocHeaderStatus] = useState<DocHeaderStatus | null>(null);
 
 
   // Drag and Drop state
@@ -1306,55 +1308,129 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           </button>
         </div>
 
-        {/* Right Header Section: Save Status (on phones it sits compactly in the note's own header) */}
+        {/* Right Header Section: Live/Share Status, Avatars & Save Status (on phones it sits compactly in the note's own header) */}
         <div className="hidden sm:flex items-center gap-2">
           {subView === 'editor' && selectedDocId ? (
-            /* Save Status Pill */
+            <>
-            <div
+              {/* Live connection pill */}
-              className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-btn text-xs font-medium border transition-colors ${
+              {docHeaderStatus?.showLive && (
-                docSaveStatus === 'saved'
+                <span
-                  ? 'bg-canvas border-border text-muted'
+                  className="inline-flex items-center gap-1 px-2 py-0.5 rounded-btn text-[11px] text-muted bg-panel border border-border"
-                  : docSaveStatus === 'saving'
+                  title={
-                  ? 'bg-panel border-accent/40 text-accent animate-pulse'
+                    docHeaderStatus.channel === 'ws'
-                  : docSaveStatus === 'unsaved'
+                      ? 'Live-Verbindung über WebSocket'
-                  ? 'bg-status-warn/10 border-status-warn/30 text-status-warn'
+                      : docHeaderStatus.channel === 'sse'
-                  : 'bg-status-err/10 border-status-err/30 text-status-err'
+                      ? 'Live-Verbindung über Server-Sent Events (WebSocket wird blockiert)'
-              }`}
+                      : docHeaderStatus.channel === 'longpoll'
-              title={
+                      ? 'Live über Long-Polling (WebSocket und SSE werden blockiert)'
-                docSaveStatus === 'saved'
+                      : 'Keine Live-Verbindung möglich – Änderungen werden alle 3 Sekunden abgefragt'
-                  ? 'Alle Änderungen per HTTPS gesichert'
+                  }
-                  : docSaveStatus === 'saving'
+                >
-                  ? 'Änderungen werden per HTTPS gespeichert…'
+                  <span
-                  : docSaveStatus === 'unsaved'
+                    className={`w-1.5 h-1.5 rounded-full ${
-                  ? 'Ungespeicherte Änderungen (Auto-Save aktiv)'
+                      docHeaderStatus.channel === 'interval' ? 'bg-status-warn' : 'bg-status-ok'
-                  : docSaveError || 'Fehler beim Speichern'
+                    }`}
-              }
+                  />
-            >
+                  {docHeaderStatus.channel === 'longpoll'
-              {docSaveStatus === 'saved' && (
+                    ? 'Live (Long-Polling)'
-                <>
+                    : docHeaderStatus.channel === 'interval'
-                  <Check className="w-3.5 h-3.5 text-status-ok" />
+                    ? 'Abgleich alle 3 s'
-                  <span>Gespeichert</span>
+                    : 'Live'}
-                </>
+                </span>
               )}
-              {docSaveStatus === 'saving' && (
+
-                <>
+              {/* Who else has this note open */}
-                  <Loader2 className="w-3.5 h-3.5 animate-spin text-accent" />
+              {docHeaderStatus && (
-                  <span>Speichert…</span>
+                <PresenceAvatars
-                </>
+                  people={docHeaderStatus.otherPeople}
+                  avatars={docHeaderStatus.avatarsById}
+                />
               )}
-              {docSaveStatus === 'unsaved' && (
+
-                <>
+              {/* Share pill */}
-                  <Clock className="w-3.5 h-3.5 text-status-warn" />
+              {selectedDocObj &&
-                  <span>Ungespeichert</span>
+                !selectedDocObj.isArchived &&
-                </>
+                (() => {
-              )}
+                  const isOwner =
-              {docSaveStatus === 'error' && (
+                    selectedDocObj.isOwner !== false &&
-                <>
+                    (selectedDocObj.userId === currentUser?.id ||
-                  <AlertTriangle className="w-3.5 h-3.5 text-status-err" />
+                      !selectedDocObj.userId ||
-                  <span>Fehler</span>
+                      currentUser?.role === 'admin');
-                </>
+                  const sharesCount = selectedDocObj.sharedWith?.length || 0;
-              )}
+                  const isShared =
-            </div>
+                    sharesCount > 0 || !isOwner || Boolean(selectedDocObj.sharedFolderId);
+                  const ownerDisplayName = selectedDocObj.ownerName || 'Eigentümer';
+                  if (!isShared) return null;
+                  return isOwner ? (
+                    <button
+                      type="button"
+                      onClick={() => openDocShareModal(selectedDocObj)}
+                      className="px-2 py-0.5 rounded text-[10px] font-semibold bg-accent/15 text-accent border border-accent/30 flex items-center gap-1 hover:bg-accent/25 hover:border-accent/50 transition-colors cursor-pointer"
+                      title="Teilen-Menü öffnen: Geteilt mit Nutzern/Gruppen anzeigen & verwalten"
+                    >
+                      <Users className="w-2.5 h-2.5" />
+                      <span>Geteilt{sharesCount > 0 ? ` (${sharesCount})` : ''}</span>
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={() => openDocShareModal(selectedDocObj)}
+                      className="px-2 py-0.5 rounded text-[10px] font-medium border border-border text-muted flex items-center gap-1 bg-surface-subtle hover:bg-panel-elevated hover:text-main transition-colors cursor-pointer"
+                      title="Teilen & Berechtigungen öffnen"
+                    >
+                      <Users className="w-2.5 h-2.5" />
+                      <span>Geteilt von {ownerDisplayName}</span>
+                    </button>
+                  );
+                })()}
+
+              {/* Save Status Pill */}
+              <div
+                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-btn text-xs font-medium border transition-colors ${
+                  docSaveStatus === 'saved'
+                    ? 'bg-canvas border-border text-muted'
+                    : docSaveStatus === 'saving'
+                    ? 'bg-panel border-accent/40 text-accent animate-pulse'
+                    : docSaveStatus === 'unsaved'
+                    ? 'bg-status-warn/10 border-status-warn/30 text-status-warn'
+                    : 'bg-status-err/10 border-status-err/30 text-status-err'
+                }`}
+                title={
+                  docSaveStatus === 'saved'
+                    ? 'Alle Änderungen per HTTPS gesichert'
+                    : docSaveStatus === 'saving'
+                    ? 'Änderungen werden per HTTPS gespeichert…'
+                    : docSaveStatus === 'unsaved'
+                    ? 'Ungespeicherte Änderungen (Auto-Save aktiv)'
+                    : docSaveError || 'Fehler beim Speichern'
+                }
+              >
+                {docSaveStatus === 'saved' && (
+                  <>
+                    <Check className="w-3.5 h-3.5 text-status-ok" />
+                    <span>Gespeichert</span>
+                  </>
+                )}
+                {docSaveStatus === 'saving' && (
+                  <>
+                    <Loader2 className="w-3.5 h-3.5 animate-spin text-accent" />
+                    <span>Speichert…</span>
+                  </>
+                )}
+                {docSaveStatus === 'unsaved' && (
+                  <>
+                    <Clock className="w-3.5 h-3.5 text-status-warn" />
+                    <span>Ungespeichert</span>
+                  </>
+                )}
+                {docSaveStatus === 'error' && (
+                  <>
+                    <AlertTriangle className="w-3.5 h-3.5 text-status-err" />
+                    <span>Fehler</span>
+                  </>
+                )}
+              </div>
+            </>
           ) : null}
         </div>
       </div>
@@ -1645,6 +1721,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               setDocSaveStatus(status);
               setDocSaveError(err || null);
             }}
+            onHeaderStatusChange={setDocHeaderStatus}
           />
         ) : subView === 'tags' ? (
           /* =========================================================================

frontend/src/features/workspace/__tests__/DocumentEditor.header.test.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { DocumentEditor } from '../DocumentEditor';
+import { api } from '../../../lib/api';
+import { Document } from '../../../lib/types';
+import { EngineState } from '../../../lib/docSync/engine';
+
+let currentListener: ((state: EngineState) => void) | null = null;
+const mockUndo = vi.fn(() => ({ ok: true }));
+const mockRedo = vi.fn(() => ({ ok: true }));
+
+const baseEngineState: EngineState = {
+  ready: true,
+  status: 'saved',
+  role: 'owner',
+  title: 'Test Notiz',
+  blocks: [{ id: 'b1', documentId: 'doc_1', type: 'text', content: 'Hallo', level: 0, position: 1000 }],
+  pendingCount: 0,
+  shared: true,
+  sessions: 2,
+  presence: [{ userId: 'u2', name: 'Bob' }],
+  lockedByOthers: [],
+  conflicts: [],
+  canUndo: false,
+  canRedo: false,
+  channel: 'ws',
+};
+
+vi.mock('../../../lib/docSync/engine', () => {
+  return {
+    DocSyncEngine: class {
+      subscribe(fn: (state: EngineState) => void) {
+        currentListener = fn;
+        fn(baseEngineState);
+        return () => {
+          currentListener = null;
+        };
+      }
+      start() {
+        return Promise.resolve();
+      }
+      stop() {}
+      getState() {
+        return baseEngineState;
+      }
+      setTaskLinks() {}
+      focusBlock() {}
+      applyFlat() {}
+      setTitle() {}
+      undo() {
+        return mockUndo();
+      }
+      redo() {
+        return mockRedo();
+      }
+    },
+  };
+});
+
+vi.mock('../../../lib/api', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../lib/api')>();
+  return {
+    ...actual,
+    api: {
+      ...actual.api,
+      getDocument: vi.fn(),
+      getUsersDirectory: vi.fn(() => Promise.resolve([])),
+      getDocumentBacklinks: vi.fn(() => Promise.resolve({ backlinks: [] })),
+    },
+  };
+});
+
+const makeDoc = (overrides: Partial<Document> = {}): Document => ({
+  id: 'doc_1',
+  userId: 'u1',
+  title: 'Test Notiz',
+  icon: '📝',
+  folderPath: '',
+  content: '',
+  blocks: [{ id: 'b1', documentId: 'doc_1', type: 'text', content: 'Hallo', level: 0, position: 1000 }],
+  tags: [],
+  isPinned: false,
+  isArchived: false,
+  isOwner: true,
+  createdAt: '2026-10-30T08:00:00Z',
+  updatedAt: '2026-10-30T08:00:00Z',
+  ...overrides,
+});
+
+describe('DocumentEditor header actions & status callback (Teil D)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    const doc = makeDoc();
+    vi.mocked(api.getDocument).mockResolvedValue(doc);
+  });
+
+  it('reports live/presence status upward via onHeaderStatusChange and renders Undo/Redo + Three-Dots menu', async () => {
+    const doc = makeDoc({ isOwner: true });
+    const onHeaderStatusChange = vi.fn();
+    const onRequestMerge = vi.fn();
+    const onDeleteDoc = vi.fn();
+    const onOpenShareModal = vi.fn();
+
+    render(
+      <DocumentEditor
+        docId="doc_1"
+        initialDoc={doc}
+        availableFolders={[]}
+        onDocMetadataChange={vi.fn()}
+        onDeleteDoc={onDeleteDoc}
+        onOpenShareModal={onOpenShareModal}
+        onSelectTag={vi.fn()}
+        onRequestMerge={onRequestMerge}
+        onHeaderStatusChange={onHeaderStatusChange}
+      />
+    );
+
+    await waitFor(() => {
+      expect(onHeaderStatusChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          showLive: true,
+          channel: 'ws',
+        })
+      );
+    });
+
+    // Undo / Redo buttons disabled initially
+    const undoBtn = screen.getByTitle('Rückgängig (Strg+Z)') as HTMLButtonElement;
+    const redoBtn = screen.getByTitle('Wiederholen (Strg+Y)') as HTMLButtonElement;
+    expect(undoBtn.disabled).toBe(true);
+    expect(redoBtn.disabled).toBe(true);
+
+    // Enable Undo & Redo via engine state update
+    currentListener?.({ ...baseEngineState, canUndo: true, canRedo: true });
+    await waitFor(() => {
+      expect(undoBtn.disabled).toBe(false);
+      expect(redoBtn.disabled).toBe(false);
+    });
+
+    fireEvent.click(undoBtn);
+    expect(mockUndo).toHaveBeenCalledTimes(1);
+    fireEvent.click(redoBtn);
+    expect(mockRedo).toHaveBeenCalledTimes(1);
+
+    // Share button is directly visible
+    const shareBtn = screen.getByTitle('Notiz teilen und Berechtigungen');
+    fireEvent.click(shareBtn);
+    expect(onOpenShareModal).toHaveBeenCalledWith(doc);
+
+    // Three-dots menu opens on click, shows secondary actions, and closes on Escape
+    const moreBtn = screen.getByTitle('Weitere Aktionen');
+    fireEvent.click(moreBtn);
+
+    expect(screen.getByText('Notiz anheften')).toBeTruthy();
+    expect(screen.getByText('Mit anderer Notiz zusammenführen…')).toBeTruthy();
+    expect(screen.getByText('Als Markdown (.md) exportieren')).toBeTruthy();
+    expect(screen.getByText('Notiz löschen')).toBeTruthy();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByText('Notiz anheften')).toBeNull();
+  });
+});