fix(docs): only show red connection dot after 5s disconnect

No green/syncing dots — only a red indicator appears after 5 seconds
of disconnection. Connected state shows no dot at all.

Author: Movm

apps/web/src/features/docs/DocsEditorPage.tsx

@@ -88,30 +88,24 @@ const SIDEBAR_TABS = [
 ];
 
 function EditorFAB({
-  connectionStatus,
+  showDisconnected,
   sidebarOpen,
   onToggleSidebar,
 }: {
-  connectionStatus: 'connected' | 'syncing' | 'disconnected';
+  showDisconnected: boolean;
   sidebarOpen: boolean;
   onToggleSidebar: () => void;
 }) {
-  const statusColors = {
-    connected: 'bg-emerald-500',
-    syncing: 'bg-amber-500 animate-pulse',
-    disconnected: 'bg-red-500',
-  };
-
   return (
     <button
       className={`fixed bottom-6 right-6 w-12 h-12 rounded-full flex items-center justify-center bg-white/85 dark:bg-grey-900/85 backdrop-blur-xl border border-black/8 dark:border-white/10 shadow-lg cursor-pointer z-[150] transition-all hover:bg-white/95 dark:hover:bg-grey-800/95 hover:shadow-xl active:scale-95 [&_svg]:w-[22px] [&_svg]:h-[22px] [&_svg]:text-grey-700 dark:[&_svg]:text-grey-300 ${sidebarOpen ? 'bg-secondary-100 dark:bg-secondary-600/25 border-secondary-400 dark:border-secondary-600 z-[250] [&_svg]:text-secondary-700 dark:[&_svg]:text-secondary-400' : ''}`}
       onClick={onToggleSidebar}
       aria-label="Seitenleiste ein-/ausblenden"
     >
       <FiSidebar />
-      <span
-        className={`absolute top-0.5 right-0.5 w-2 h-2 rounded-full border-[1.5px] border-white/90 dark:border-grey-900/90 ${statusColors[connectionStatus]}`}
-      />
+      {showDisconnected && (
+        <span className="absolute top-0.5 right-0.5 w-2 h-2 rounded-full border-[1.5px] border-white/90 dark:border-grey-900/90 bg-red-500" />
+      )}
     </button>
   );
 }
@@ -306,6 +300,20 @@ function EditorContent() {
 
   const initialContent = useMemo(() => docData?.content || '', [docData?.content]);
 
+  const [showDisconnected, setShowDisconnected] = useState(false);
+  useEffect(() => {
+    if (isConnected) {
+      setShowDisconnected(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowDisconnected(true), 5000);
+    return () => clearTimeout(timer);
+  }, [isConnected]);
+
+  const connectionStatus: 'disconnected' | undefined = showDisconnected
+    ? 'disconnected'
+    : undefined;
+
   if (docIsLoading) {
     return <div className="flex items-center justify-center h-full" />;
   }
@@ -325,8 +333,6 @@ function EditorContent() {
       </div>
     );
   }
-
-  const connectionStatus = !isConnected ? 'disconnected' : !isSynced ? 'syncing' : 'connected';
   const localUser = getLocalUser();
 
   return (
@@ -352,7 +358,7 @@ function EditorContent() {
 
       {isEmbedded ? (
         <EditorFAB
-          connectionStatus={connectionStatus}
+          showDisconnected={showDisconnected}
           sidebarOpen={sidebarOpen}
           onToggleSidebar={toggleSidebar}
         />

packages/shared/src/components/EditorTopBar/EditorTopBar.css

@@ -142,15 +142,6 @@
   flex-shrink: 0;
 }
 
-.status-dot.connected {
-  background: #10b981;
-}
-
-.status-dot.syncing {
-  background: #f59e0b;
-  animation: editorTopBarPulse 1.5s ease-in-out infinite;
-}
-
 .status-dot.disconnected {
   background: #ef4444;
 }