chore: fixed review comments

Author: adithyaakrishna

apps/sim/app/(landing)/blog/[slug]/animated-blocks.tsx

@@ -12,7 +12,6 @@ const EXIT_DURATION_MS = 500
 
 const RE_ENTER_OPACITIES = [1, 0.8, 0.6, 0.9] as const
 
-
 function setBlockOpacity(el: HTMLSpanElement | null, opacity: number, animate: boolean) {
   if (!el) return
   el.style.transition = animate ? `opacity ${ENTER_DURATION_MS}ms ease-out` : 'none'
@@ -37,7 +36,11 @@ export function AnimatedColorBlocks() {
 
     if (prefersReducedMotion) {
       blockRefs.current.forEach((el) => setBlockOpacity(el, 1, false))
-      return
+      return () => {
+        mounted.current = false
+        timers.current.forEach(clearTimeout)
+        timers.current = []
+      }
     }
 
     blockRefs.current.forEach((el) => setBlockOpacity(el, 0, false))
@@ -97,7 +100,7 @@ export function AnimatedColorBlocks() {
             blockRefs.current[i] = el
           }}
           className='inline-block h-3 w-3'
-          style={{ backgroundColor: color, opacity: 0 }}
+          style={{ backgroundColor: color, opacity: prefersReducedMotion ? 1 : 0 }}
         />
       ))}
     </div>
@@ -112,28 +115,37 @@ export function AnimatedColorBlocksVertical() {
 
   const verticalColors = [COLORS[0], COLORS[1], COLORS[2]] as const
 
+  function schedule(fn: () => void, ms: number) {
+    const id = setTimeout(fn, ms)
+    timers.current.push(id)
+    return id
+  }
+
   useEffect(() => {
     mounted.current = true
     timers.current = []
 
     if (prefersReducedMotion) {
       blockRefs.current.forEach((el) => setBlockOpacity(el, 1, false))
-      return
+      return () => {
+        mounted.current = false
+        timers.current.forEach(clearTimeout)
+        timers.current = []
+      }
     }
 
     blockRefs.current.forEach((el) => setBlockOpacity(el, 0, false))
 
     const baseDelay = COLORS.length * ENTER_STAGGER_MS + 100
 
     verticalColors.forEach((_, i) => {
-      const id = setTimeout(
+      schedule(
         () => {
           if (!mounted.current) return
           setBlockOpacity(blockRefs.current[i], 1, true)
         },
         baseDelay + i * ENTER_STAGGER_MS
       )
-      timers.current.push(id)
     })
 
     return () => {
@@ -152,7 +164,7 @@ export function AnimatedColorBlocksVertical() {
             blockRefs.current[i] = el
           }}
           className='inline-block h-3 w-3'
-          style={{ backgroundColor: color, opacity: 0 }}
+          style={{ backgroundColor: color, opacity: prefersReducedMotion ? 1 : 0 }}
         />
       ))}
     </div>

apps/sim/app/(landing)/blog/studio-content.tsx

@@ -109,10 +109,12 @@ export function StudioContent({ posts, initialTag, initialQuery }: StudioContent
   const lowerQ = query.trim().toLowerCase()
 
   const { sorted, activeCategory } = useMemo(() => {
+    const validTag = activeTag && CATEGORIES.some((c) => c.id === activeTag) ? activeTag : null
+
     let filtered = posts
 
-    if (activeTag) {
-      filtered = posts.filter((p) => getPrimaryCategory(p.tags).id === activeTag)
+    if (validTag) {
+      filtered = posts.filter((p) => getPrimaryCategory(p.tags).id === validTag)
     }
 
     if (lowerQ) {
@@ -130,7 +132,7 @@ export function StudioContent({ posts, initialTag, initialQuery }: StudioContent
       })
     }
 
-    const cat = activeTag ? getCategoryById(activeTag) : null
+    const cat = validTag ? getCategoryById(validTag) : null
     const s = [...filtered].sort((a, b) => {
       if (a.featured && !b.featured) return -1
       if (!a.featured && b.featured) return 1
@@ -438,7 +440,9 @@ function SidebarCategories({ items, activeId, onSelect }: SidebarCategoriesProps
                 style={{
                   transform: isActive ? 'translate(4px, -4px)' : 'translate(0px, 0px)',
                   backgroundColor: isActive ? '#242424' : 'transparent',
-                  boxShadow: isActive ? 'inset 0 0 0 1.5px #3E3E3E' : 'inset 0 0 0 1.5px transparent',
+                  boxShadow: isActive
+                    ? 'inset 0 0 0 1.5px #3E3E3E'
+                    : 'inset 0 0 0 1.5px transparent',
                   transition: shouldReduceMotion
                     ? 'none'
                     : isActive