improvement(lint): fix react-doctor errors and warnings (#3232)

* improvement(lint): fix react-doctor errors and warnings

* remove separators

Author: waleedlatif1

apps/docs/app/global.css

@@ -59,12 +59,6 @@ body {
   --content-gap: 1.75rem;
 }
 
-/* Remove custom layout variable overrides to fallback to fumadocs defaults */
-
-/* ============================================
-   Navbar Light Mode Styling
-   ============================================ */
-
 /* Light mode navbar and search styling */
 :root:not(.dark) nav {
   background-color: hsla(0, 0%, 96%, 0.85) !important;
@@ -88,10 +82,6 @@ body {
   -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(0.6) !important;
 }
 
-/* ============================================
-   Custom Sidebar Styling (Turborepo-inspired)
-   ============================================ */
-
 /* Floating sidebar appearance - remove background */
 [data-sidebar-container],
 #nd-sidebar {
@@ -468,10 +458,6 @@ aside[data-sidebar],
   writing-mode: horizontal-tb !important;
 }
 
-/* ============================================
-   Code Block Styling (Improved)
-   ============================================ */
-
 /* Apply Geist Mono to code elements */
 code,
 pre,
@@ -532,10 +518,6 @@ pre code .line {
   color: var(--color-fd-primary);
 }
 
-/* ============================================
-   TOC (Table of Contents) Styling
-   ============================================ */
-
 /* Remove the thin border-left on nested TOC items (keeps main indicator only) */
 #nd-toc a[style*="padding-inline-start"] {
   border-left: none !important;
@@ -554,10 +536,6 @@ main article,
   padding-bottom: 4rem;
 }
 
-/* ============================================
-   Center and Constrain Main Content Width
-   ============================================ */
-
 /* Main content area - center and constrain like turborepo/raindrop */
 /* Note: --sidebar-offset and --toc-offset are now applied at #nd-docs-layout level */
 main[data-main] {

apps/sim/app/(auth)/components/oauth-provider-checker.tsx

@@ -1,5 +1,3 @@
-'use server'
-
 import { env } from '@/lib/core/config/env'
 import { isProd } from '@/lib/core/config/feature-flags'
 

apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-node.tsx

@@ -85,7 +85,7 @@ export const LandingNode = React.memo(function LandingNode({ data }: { data: Lan
           transform: isAnimated ? 'translateY(0) scale(1)' : 'translateY(8px) scale(0.98)',
           transition:
             'opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)',
-          willChange: 'transform, opacity',
+          willChange: isAnimated ? 'auto' : 'transform, opacity',
         }}
       >
         <LandingBlock icon={data.icon} color={data.color} name={data.name} tags={data.tags} />

apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-edge/landing-edge.tsx

@@ -67,7 +67,6 @@ export const LandingEdge = React.memo(function LandingEdge(props: EdgeProps) {
           strokeLinejoin: 'round',
           pointerEvents: 'none',
           animation: `landing-edge-dash-${id} 1s linear infinite`,
-          willChange: 'stroke-dashoffset',
           ...style,
         }}
       />

apps/sim/app/_styles/globals.css

@@ -754,3 +754,100 @@ input[type="search"]::-ms-clear {
   text-decoration: none !important;
   color: inherit !important;
 }
+
+/**
+ * Respect user's prefers-reduced-motion setting (WCAG 2.3.3)
+ * Disables animations and transitions for users who prefer reduced motion.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* WandPromptBar status indicator */
+@keyframes smoke-pulse {
+  0%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.4;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+
+.status-indicator {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: hsl(var(--muted-foreground) / 0.5);
+  transition: background-color 0.3s ease;
+}
+
+.status-indicator.streaming {
+  background-color: transparent;
+}
+
+.status-indicator.streaming::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    hsl(var(--primary) / 0.9) 0%,
+    hsl(var(--primary) / 0.4) 60%,
+    transparent 80%
+  );
+  animation: smoke-pulse 1.8s ease-in-out infinite;
+  opacity: 0.9;
+}
+
+.dark .status-indicator.streaming::before {
+  background: #6b7280;
+  opacity: 0.9;
+  animation: smoke-pulse 1.8s ease-in-out infinite;
+}
+
+/* MessageContainer loading dot */
+@keyframes growShrink {
+  0%,
+  100% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+.loading-dot {
+  animation: growShrink 1.5s infinite ease-in-out;
+}
+
+/* Subflow node z-index and drag-over styles */
+.workflow-container .react-flow__node-subflowNode {
+  z-index: -1 !important;
+}
+
+.workflow-container .react-flow__node-subflowNode:has([data-subflow-selected="true"]) {
+  z-index: 10 !important;
+}
+
+.loop-node-drag-over,
+.parallel-node-drag-over {
+  box-shadow: 0 0 0 1.75px var(--brand-secondary) !important;
+  border-radius: 8px !important;
+}
+
+.react-flow__node[data-parent-node-id] .react-flow__handle {
+  z-index: 30;
+}

apps/sim/app/chat/components/message-container/message-container.tsx

@@ -30,21 +30,6 @@ export const ChatMessageContainer = memo(function ChatMessageContainer({
 }: ChatMessageContainerProps) {
   return (
     <div className='relative flex flex-1 flex-col overflow-hidden bg-white'>
-      <style jsx>{`
-        @keyframes growShrink {
-          0%,
-          100% {
-            transform: scale(0.9);
-          }
-          50% {
-            transform: scale(1.1);
-          }
-        }
-        .loading-dot {
-          animation: growShrink 1.5s infinite ease-in-out;
-        }
-      `}</style>
-
       {/* Scrollable Messages Area */}
       <div
         ref={messagesContainerRef}

apps/sim/app/chat/components/voice-interface/voice-interface.tsx

@@ -71,7 +71,7 @@ export function VoiceInterface({
   const [state, setState] = useState<'idle' | 'listening' | 'agent_speaking'>('idle')
   const [isInitialized, setIsInitialized] = useState(false)
   const [isMuted, setIsMuted] = useState(false)
-  const [audioLevels, setAudioLevels] = useState<number[]>(new Array(200).fill(0))
+  const [audioLevels, setAudioLevels] = useState<number[]>(() => new Array(200).fill(0))
   const [permissionStatus, setPermissionStatus] = useState<'prompt' | 'granted' | 'denied'>(
     'prompt'
   )

apps/sim/app/workspace/[workspaceId]/files/[fileId]/view/page.tsx

@@ -1,4 +1,4 @@
-import { redirect } from 'next/navigation'
+import { redirect, unstable_rethrow } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getWorkspaceFile } from '@/lib/uploads/contexts/workspace'
 import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
@@ -14,24 +14,27 @@ interface FileViewerPageProps {
 export default async function FileViewerPage({ params }: FileViewerPageProps) {
   const { workspaceId, fileId } = await params
 
-  try {
-    const session = await getSession()
-    if (!session?.user?.id) {
-      redirect('/')
-    }
-
-    const hasPermission = await verifyWorkspaceMembership(session.user.id, workspaceId)
-    if (!hasPermission) {
-      redirect(`/workspace/${workspaceId}`)
-    }
+  const session = await getSession()
+  if (!session?.user?.id) {
+    redirect('/')
+  }
 
-    const fileRecord = await getWorkspaceFile(workspaceId, fileId)
-    if (!fileRecord) {
-      redirect(`/workspace/${workspaceId}`)
-    }
+  const hasPermission = await verifyWorkspaceMembership(session.user.id, workspaceId)
+  if (!hasPermission) {
+    redirect(`/workspace/${workspaceId}`)
+  }
 
-    return <FileViewer file={fileRecord} />
+  let fileRecord: Awaited<ReturnType<typeof getWorkspaceFile>>
+  try {
+    fileRecord = await getWorkspaceFile(workspaceId, fileId)
   } catch (error) {
+    unstable_rethrow(error)
     redirect(`/workspace/${workspaceId}`)
   }
+
+  if (!fileRecord) {
+    redirect(`/workspace/${workspaceId}`)
+  }
+
+  return <FileViewer file={fileRecord} />
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { isEqual } from 'lodash'
+import isEqual from 'lodash/isEqual'
 import { useReactFlow } from 'reactflow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { Combobox, type ComboboxOption } from '@/components/emcn/components'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { isEqual } from 'lodash'
+import isEqual from 'lodash/isEqual'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { Badge } from '@/components/emcn'
 import { Combobox, type ComboboxOption } from '@/components/emcn/components'