feat(workspace): move connection status indicator to top tabs header

frontend/src/features/workspace/DocumentEditor.tsx

@@ -5,7 +5,6 @@ import {
   Trash2,
   Download,
   FileText,
-  Radio,
   Loader2,
   ArrowLeft,
   Hash,
@@ -18,7 +17,7 @@ import {
 } from 'lucide-react';
 import { Document, DocumentBlock, User } from '../../lib/types';
 import { api } from '../../lib/api';
-import { useDocumentSync, DocSyncEvent, RemoteCursor } from '../../lib/useDocumentSync';
+import { useDocumentSync, DocSyncEvent, RemoteCursor, DocSyncStatus } from '../../lib/useDocumentSync';
 import { OutlinerTree } from './OutlinerTree';
 
 export interface DocumentEditorProps {
@@ -34,6 +33,7 @@ export interface DocumentEditorProps {
   onSelectTag: (tag: string) => void;
   onWikiLinkClick?: (pageTitle: string) => void;
   onBackMobile?: () => void;
+  onSyncStatusChange?: (status: DocSyncStatus) => void;
 }
 
 const EMOJI_PALETTE = ['📝', '📄', '💡', '🚀', '📌', '📂', '🧠', '⚡', '🎯', '🛠️', '📊', '🔒'];
@@ -153,6 +153,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   onSelectTag,
   onWikiLinkClick,
   onBackMobile,
+  onSyncStatusChange,
 }) => {
   const [doc, setDoc] = useState<Document | null>(initialDoc || null);
   const [title, setTitle] = useState<string>(initialDoc?.title || '');
@@ -344,6 +345,10 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
     sendTitleUpdated,
   } = useDocumentSync(docId, handleRemoteEvent, canEdit, currentUser);
 
+  useEffect(() => {
+    onSyncStatusChange?.(syncStatus);
+  }, [syncStatus, onSyncStatusChange]);
+
   // Fetch isolated document state on mount
   useEffect(() => {
     let isCancelled = false;
@@ -750,34 +755,6 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             );
           })()}
 
-          {/* Live Sync Status (1:1 styling from SharedListsView) */}
-          <div
-            className={`h-8 w-8 flex items-center justify-center rounded-btn border transition-colors ${
-              syncStatus === 'connected'
-                ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
-                : syncStatus === 'connecting' || syncStatus === 'reconnecting'
-                ? 'bg-amber-500/10 border-amber-500/30 text-amber-500'
-                : 'bg-canvas border-border text-muted'
-            }`}
-            title={
-              syncStatus === 'connected'
-                ? 'Live synchronisiert (WebSocket online)'
-                : syncStatus === 'connecting' || syncStatus === 'reconnecting'
-                ? 'Verbindung wird aufgebaut…'
-                : 'Offline'
-            }
-          >
-            <Radio
-              className={`w-3.5 h-3.5 ${
-                syncStatus === 'connected'
-                  ? 'animate-pulse'
-                  : syncStatus === 'connecting' || syncStatus === 'reconnecting'
-                  ? 'animate-spin'
-                  : ''
-              }`}
-            />
-          </div>
-
           <button
             type="button"
             onClick={handleTogglePin}