fix(conn-status): remove unused connection status inside user avatar stack (#1800)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/user-avatar-stack/components/connection-status/connection-status.tsx

@@ -1,65 +0,0 @@
-'use client'
-
-import { AlertTriangle, RefreshCw } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-
-interface ConnectionStatusProps {
-  isConnected: boolean
-  hasOperationError?: boolean
-}
-
-export function ConnectionStatus({ isConnected, hasOperationError }: ConnectionStatusProps) {
-  const userPermissions = useUserPermissionsContext()
-
-  const handleRefresh = () => {
-    window.location.reload()
-  }
-
-  // Show error if either offline mode OR operation error
-  const shouldShowError = userPermissions.isOfflineMode || hasOperationError
-
-  // Don't render anything if no errors
-  if (!shouldShowError) {
-    return null
-  }
-
-  return (
-    <div className='flex items-center gap-2 rounded-md border border-red-200 bg-red-50 px-3 py-2'>
-      <div className='flex items-center gap-2 text-red-700'>
-        <div className='relative flex items-center justify-center'>
-          {!isConnected && (
-            <div className='absolute h-4 w-4 animate-ping rounded-full bg-red-500/20' />
-          )}
-          <AlertTriangle className='relative h-4 w-4' />
-        </div>
-        <div className='flex flex-col'>
-          <span className='font-medium text-xs leading-tight'>
-            {hasOperationError
-              ? 'Workflow Edit Failed'
-              : isConnected
-                ? 'Reconnected'
-                : 'Connection lost - please refresh'}
-          </span>
-          <span className='text-red-600 text-xs leading-tight'>
-            Please refresh to continue editing
-          </span>
-        </div>
-      </div>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            onClick={handleRefresh}
-            variant='ghost'
-            size='sm'
-            className='h-7 w-7 p-0 text-red-700 hover:bg-red-100 hover:text-red-800'
-          >
-            <RefreshCw className='h-4 w-4' />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent className='z-[9999]'>Refresh page to continue editing</TooltipContent>
-      </Tooltip>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/user-avatar-stack/user-avatar-stack.tsx

@@ -2,10 +2,8 @@
 
 import { useMemo } from 'react'
 import { cn } from '@/lib/utils'
-import { ConnectionStatus } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/user-avatar-stack/components/connection-status/connection-status'
 import { UserAvatar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/user-avatar-stack/components/user-avatar/user-avatar'
 import { usePresence } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-presence'
-import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 
 interface User {
   connectionId: string | number
@@ -29,12 +27,10 @@ export function UserAvatarStack({
   className = '',
 }: UserAvatarStackProps) {
   // Use presence data if no users are provided via props
-  const { users: presenceUsers, isConnected } = usePresence()
+  const { users: presenceUsers } = usePresence()
   const users = propUsers || presenceUsers
 
   // Get operation error state from collaborative workflow
-  const { hasOperationError } = useCollaborativeWorkflow()
-
   // Memoize the processed users to avoid unnecessary re-renders
   const { visibleUsers, overflowCount } = useMemo(() => {
     if (users.length === 0) {
@@ -60,7 +56,7 @@ export function UserAvatarStack({
   const shouldShowAvatars = visibleUsers.length > 0
 
   return (
-    <div className={`flex flex-col items-start gap-2 ${className}`}>
+    <div className={`flex flex-col items-start ${className}`}>
       {shouldShowAvatars && (
         <div className={cn('flex items-center px-2 py-1', spacingClass)}>
           {visibleUsers.map((user, index) => (
@@ -105,8 +101,6 @@ export function UserAvatarStack({
           )}
         </div>
       )}
-
-      <ConnectionStatus isConnected={isConnected} hasOperationError={hasOperationError} />
     </div>
   )
 }