cleanup

Author: waleedlatif1

apps/docs/app/api/og/route.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react'
 import { ImageResponse } from 'next/og'
 import type { NextRequest } from 'next/server'
 
@@ -9,13 +10,47 @@ const TITLE_FONT_SIZE = {
   small: 48,
 } as const
 const FONT_CACHE_REVALIDATE_SECONDS = 60 * 60 * 24 * 30
+const OG_CONTAINER_STYLE = {
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  padding: '56px 64px',
+  background: '#121212',
+  fontFamily: 'Geist',
+} satisfies CSSProperties
+const OG_TITLE_STYLE = {
+  fontWeight: 500,
+  color: '#fafafa',
+  lineHeight: 1.2,
+  letterSpacing: '-0.02em',
+} satisfies CSSProperties
+const OG_FOOTER_STYLE = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+} satisfies CSSProperties
+const OG_DOMAIN_STYLE = {
+  fontSize: 20,
+  fontWeight: 400,
+  color: '#71717a',
+} satisfies CSSProperties
 
 function getTitleFontSize(title: string): number {
   if (title.length > 45) return TITLE_FONT_SIZE.small
   if (title.length > 30) return TITLE_FONT_SIZE.medium
   return TITLE_FONT_SIZE.large
 }
 
+function getTitleStyle(title: string): CSSProperties {
+  return {
+    ...OG_TITLE_STYLE,
+    fontSize: getTitleFontSize(title),
+  }
+}
+
 /**
  * Loads a Google Font dynamically by fetching the CSS and extracting the font URL.
  */
@@ -83,50 +118,14 @@ export async function GET(request: NextRequest) {
   const fontData = await loadGoogleFont('Geist', '400;500;600', allText)
 
   return new ImageResponse(
-    <div
-      style={{
-        height: '100%',
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        padding: '56px 64px',
-        background: '#121212', // Dark mode background matching docs (hsla 0, 0%, 7%)
-        fontFamily: 'Geist',
-      }}
-    >
+    <div style={OG_CONTAINER_STYLE}>
       {/* Title at top */}
-      <span
-        style={{
-          fontSize: getTitleFontSize(title),
-          fontWeight: 500,
-          color: '#fafafa', // Light text matching docs
-          lineHeight: 1.2,
-          letterSpacing: '-0.02em',
-        }}
-      >
-        {title}
-      </span>
+      <span style={getTitleStyle(title)}>{title}</span>
 
       {/* Footer: icon left, domain right */}
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          width: '100%',
-        }}
-      >
+      <div style={OG_FOOTER_STYLE}>
         <SimLogoFull />
-        <span
-          style={{
-            fontSize: 20,
-            fontWeight: 400,
-            color: '#71717a',
-          }}
-        >
-          docs.sim.ai
-        </span>
+        <span style={OG_DOMAIN_STYLE}>docs.sim.ai</span>
       </div>
     </div>,
     {

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type ReactNode, useEffect, useState } from 'react'
+import { type ReactNode, useState } from 'react'
 import type { Folder, Item, Separator } from 'fumadocs-core/page-tree'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
@@ -103,12 +103,10 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
   const isApiRef = isApiReferenceFolder(item)
   const isOnApiRefPage = stripLangPrefix(pathname).startsWith('/api-reference')
   const hasChildren = item.children.length > 0
-  const [open, setOpen] = useState(hasActiveChild || (isApiRef && isOnApiRefPage))
-
-  useEffect(() => {
-    setOpen(hasActiveChild || (isApiRef && isOnApiRefPage))
-  }, [hasActiveChild, isApiRef, isOnApiRefPage])
-
+  const defaultOpen = hasActiveChild || (isApiRef && isOnApiRefPage)
+  const [manualOpen, setManualOpen] = useState<{ pathname: string; open: boolean } | null>(null)
+  const open = manualOpen?.pathname === pathname ? manualOpen.open : defaultOpen
+  const toggleOpen = () => setManualOpen({ pathname, open: !open })
   const active = item.index ? isActive(item.index.url, pathname, false) : false
 
   if (item.index && !hasChildren) {
@@ -152,7 +150,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
             </Link>
             {hasChildren && (
               <button
-                onClick={() => setOpen(!open)}
+                onClick={toggleOpen}
                 className={cn(
                   'rounded p-1 hover:bg-fd-accent/50',
                   'lg:cursor-pointer lg:rounded lg:p-1 lg:transition-colors lg:hover:bg-[#f2f2f2] lg:dark:hover:bg-[#262626]'
@@ -165,7 +163,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
           </>
         ) : (
           <button
-            onClick={() => setOpen(!open)}
+            onClick={toggleOpen}
             className={cn(
               'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
               'text-fd-muted-foreground hover:bg-fd-accent/50',

apps/sim/app/(auth)/components/social-login-buttons.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type ReactNode, useEffect, useState } from 'react'
+import { type ReactNode, useState } from 'react'
 import { Button } from '@/components/emcn'
 import { GithubIcon, GoogleIcon } from '@/components/icons'
 import { client } from '@/lib/auth/auth-client'
@@ -22,15 +22,6 @@ export function SocialLoginButtons({
 }: SocialLoginButtonsProps) {
   const [isGithubLoading, setIsGithubLoading] = useState(false)
   const [isGoogleLoading, setIsGoogleLoading] = useState(false)
-  const [mounted, setMounted] = useState(false)
-
-  // Set mounted state to true on client-side
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  // Only render on the client side to avoid hydration errors
-  if (!mounted) return null
 
   async function signInWithGithub() {
     if (!githubAvailable) return

apps/sim/app/(landing)/components/navbar/navbar.tsx

@@ -43,6 +43,8 @@ const LOGO_CELL = 'flex items-center pl-5 lg:pl-16 pr-5'
 const LINK_CELL = 'flex items-center px-3.5'
 
 const emptySubscribe = () => () => {}
+const getLocationSearch = () => window.location.search
+const getServerLocationSearch = () => ''
 
 interface NavbarProps {
   logoOnly?: boolean
@@ -55,10 +57,12 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
   const session = sessionCtx?.data ?? null
   const isSessionPending = sessionCtx?.isPending ?? true
   const isAuthenticated = Boolean(session?.user?.id)
-  const [isBrowsingHome, setIsBrowsingHome] = useState(false)
-  useEffect(() => {
-    setIsBrowsingHome(new URLSearchParams(window.location.search).has('home'))
-  }, [])
+  const locationSearch = useSyncExternalStore(
+    emptySubscribe,
+    getLocationSearch,
+    getServerLocationSearch
+  )
+  const isBrowsingHome = new URLSearchParams(locationSearch).has('home')
   const useHomeLinks = isAuthenticated || isBrowsingHome
   const logoHref = useHomeLinks ? '/?home' : '/'
   const mounted = useSyncExternalStore(

apps/sim/app/academy/(catalog)/[courseSlug]/components/course-progress.tsx

@@ -1,10 +1,15 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useMemo, useSyncExternalStore } from 'react'
 import { CheckCircle2, Circle, ExternalLink, GraduationCap } from 'lucide-react'
 import Link from 'next/link'
 import { Loader } from '@/components/emcn'
-import { getCompletedLessons } from '@/lib/academy/local-progress'
+import {
+  getCompletedLessonsFromSnapshot,
+  getCompletedLessonsSnapshot,
+  getServerCompletedLessonsSnapshot,
+  subscribeToCompletedLessons,
+} from '@/lib/academy/local-progress'
 import type { Course } from '@/lib/academy/types'
 import { useSession } from '@/lib/auth/auth-client'
 import { useCourseCertificate, useIssueCertificate } from '@/hooks/queries/academy'
@@ -15,11 +20,15 @@ interface CourseProgressProps {
 }
 
 export function CourseProgress({ course, courseSlug }: CourseProgressProps) {
-  // Start with an empty set so SSR and initial client render match, then hydrate from localStorage.
-  const [completedIds, setCompletedIds] = useState<Set<string>>(() => new Set())
-  useEffect(() => {
-    setCompletedIds(getCompletedLessons())
-  }, [])
+  const completedIdsSnapshot = useSyncExternalStore(
+    subscribeToCompletedLessons,
+    getCompletedLessonsSnapshot,
+    getServerCompletedLessonsSnapshot
+  )
+  const completedIds = useMemo(
+    () => getCompletedLessonsFromSnapshot(completedIdsSnapshot),
+    [completedIdsSnapshot]
+  )
   const { data: session } = useSession()
   const { data: fetchedCert } = useCourseCertificate(session ? course.id : undefined)
   const { mutate: issueCertificate, isPending, data: issuedCert, error } = useIssueCertificate()

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

@@ -57,9 +57,7 @@ export function VoiceInterface({
   const [isInitialized, setIsInitialized] = useState(false)
   const [isMuted, setIsMuted] = useState(false)
   const [audioLevels, setAudioLevels] = useState<number[]>(() => new Array(200).fill(0))
-  const [permissionStatus, setPermissionStatus] = useState<'prompt' | 'granted' | 'denied'>(
-    'prompt'
-  )
+  const permissionStatusRef = useRef<'prompt' | 'granted' | 'denied'>('prompt')
   const [currentTranscript, setCurrentTranscript] = useState('')
 
   const currentStateRef = useRef<'idle' | 'listening' | 'agent_speaking'>('idle')
@@ -251,7 +249,7 @@ export function VoiceInterface({
         },
       })
 
-      setPermissionStatus('granted')
+      permissionStatusRef.current = 'granted'
       mediaStreamRef.current = stream
 
       const ac = new AudioContext({ sampleRate: SAMPLE_RATE })
@@ -300,7 +298,7 @@ export function VoiceInterface({
       return true
     } catch (error) {
       logger.error('Error setting up audio pipeline:', error)
-      setPermissionStatus('denied')
+      permissionStatusRef.current = 'denied'
       return false
     }
   }, [])

apps/sim/app/playground/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState, useSyncExternalStore } from 'react'
 import { ArrowLeft, Bell, Folder, Key, Moon, Settings, Sun, User } from 'lucide-react'
 import { notFound, useRouter } from 'next/navigation'
 import {
@@ -135,6 +135,16 @@ const COMBOBOX_OPTIONS = [
   { label: 'Option 3', value: 'opt3' },
 ]
 
+const DARK_MODE_EVENT = 'playground:dark-mode-change'
+
+const subscribeToDarkMode = (onStoreChange: () => void) => {
+  window.addEventListener(DARK_MODE_EVENT, onStoreChange)
+  return () => window.removeEventListener(DARK_MODE_EVENT, onStoreChange)
+}
+
+const getDarkModeSnapshot = () => document.documentElement.classList.contains('dark')
+const getServerDarkModeSnapshot = () => false
+
 export default function PlaygroundPage() {
   const router = useRouter()
   const [comboboxValue, setComboboxValue] = useState('')
@@ -143,7 +153,11 @@ export default function PlaygroundPage() {
   const [sliderValue, setSliderValue] = useState([50])
   const [timeValue, setTimeValue] = useState('09:30')
   const [activeTab, setActiveTab] = useState('profile')
-  const [isDarkMode, setIsDarkMode] = useState(false)
+  const isDarkMode = useSyncExternalStore(
+    subscribeToDarkMode,
+    getDarkModeSnapshot,
+    getServerDarkModeSnapshot
+  )
   const [buttonGroupValue, setButtonGroupValue] = useState('curl')
   const [dateValue, setDateValue] = useState('')
   const [dateRangeStart, setDateRangeStart] = useState('')
@@ -154,14 +168,10 @@ export default function PlaygroundPage() {
   ])
 
   const toggleDarkMode = () => {
-    setIsDarkMode(!isDarkMode)
     document.documentElement.classList.toggle('dark')
+    window.dispatchEvent(new Event(DARK_MODE_EVENT))
   }
 
-  useEffect(() => {
-    setIsDarkMode(document.documentElement.classList.contains('dark'))
-  }, [])
-
   if (!isTruthy(env.NEXT_PUBLIC_ENABLE_PLAYGROUND)) {
     notFound()
   }