chore: fix imports and review changes

adithyaakrishna · adithyaakrishna · commit efb87af54f4f · 2026-03-17T22:11:08.000+05:30
diff --git a/apps/sim/app/(home)/components/collaboration/collaboration.tsx b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
@@ -303,7 +303,7 @@ export default function Collaboration() {
         </div>
 
         <Link
-          href='/studio/multiplayer'
+          href='/blog/multiplayer'
           target='_blank'
           rel='noopener noreferrer'
           className='relative mx-4 mb-6 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:mx-8 md:absolute md:bottom-10 md:left-[80px] md:z-20 md:mx-0 md:mb-0'
diff --git a/apps/sim/app/(landing)/blog/[slug]/animated-blocks.tsx b/apps/sim/app/(landing)/blog/[slug]/animated-blocks.tsx
@@ -32,7 +32,10 @@ export function AnimatedColorBlocks() {
   useEffect(() => {
     mounted.current = true
     timers.current = []
-    if (prefersReducedMotion) return
+    if (prefersReducedMotion) {
+      setBlocks(COLORS.map(() => ({ opacity: 1, transitioning: false })))
+      return
+    }
 
     COLORS.forEach((_, i) => {
       schedule(() => {
@@ -119,7 +122,10 @@ export function AnimatedColorBlocksVertical() {
   useEffect(() => {
     mounted.current = true
     timers.current = []
-    if (prefersReducedMotion) return
+    if (prefersReducedMotion) {
+      setBlocks(COLORS.slice(0, 3).map(() => ({ opacity: 1, transitioning: false })))
+      return
+    }
 
     const baseDelay = COLORS.length * ENTER_STAGGER_MS + 100
 
diff --git a/apps/sim/app/(landing)/blog/[slug]/article-sidebar.tsx b/apps/sim/app/(landing)/blog/[slug]/article-sidebar.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import type { Author, BlogMeta } from '@/lib/blog/schema'
-import { TableOfContents } from '@/app/(landing)/studio/[slug]/table-of-contents'
-import { getTagColor } from '@/app/(landing)/studio/tag-colors'
+import { TableOfContents } from '@/app/(landing)/blog/[slug]/table-of-contents'
+import { getTagColor } from '@/app/(landing)/blog/tag-colors'
 
 interface ArticleSidebarProps {
   author: Author
@@ -81,7 +81,7 @@ export function ArticleSidebar({ author, authors, headings, related }: ArticleSi
             {related.map((p) => {
               const color = getTagColor(p.tags[0]) || '#999'
               return (
-                <Link key={p.slug} href={`/studio/${p.slug}`} className='group block'>
+                <Link key={p.slug} href={`/blog/${p.slug}`} className='group block'>
                   <div
                     className='mb-1 font-season text-[9px] uppercase tracking-widest'
                     style={{ color }}
diff --git a/apps/sim/app/(landing)/blog/[slug]/page.tsx b/apps/sim/app/(landing)/blog/[slug]/page.tsx
@@ -2,18 +2,15 @@ import { ArrowLeft } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { FAQ } from '@/lib/blog/faq'
-import '@/app/(landing)/studio/[slug]/prose-studio.css'
+import '@/app/(landing)/blog/[slug]/prose-studio.css'
 import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/blog/registry'
 import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import {
   AnimatedColorBlocks,
   AnimatedColorBlocksVertical,
 } from '@/app/(landing)/blog/[slug]/animated-blocks'
-import {
-  ArticleHeaderItem,
-  ArticleHeaderMotion,
-} from '@/app/(landing)/blog/[slug]/article-header'
+import { ArticleHeaderItem, ArticleHeaderMotion } from '@/app/(landing)/blog/[slug]/article-header'
 import { ArticleSidebar } from '@/app/(landing)/blog/[slug]/article-sidebar'
 import { ShareButtons } from '@/app/(landing)/blog/[slug]/share-button'
 import { getPrimaryCategory, getTagCategory } from '@/app/(landing)/blog/tag-colors'
@@ -59,7 +56,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       <div className='mx-auto flex w-full max-w-[1400px] flex-col items-start gap-8 px-6 pb-24 pt-16 xl:flex-row'>
         <div className='max-w-4xl flex-grow xl:mx-auto'>
           <Link
-            href='/studio'
+            href='/blog'
             className='group mb-8 inline-flex items-center gap-2 border border-[#2A2A2A] bg-[#232323] px-4 py-2 font-season text-[11px] uppercase tracking-widest text-[#999] transition-colors hover:text-[#ECECEC]'
             style={{ borderRadius: '5px' }}
           >
@@ -115,7 +112,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                     {post.tags.map((tag, i) => (
                       <span key={tag}>
                         <Link
-                          href={`/studio?tag=${encodeURIComponent(getTagCategory(tag))}`}
+                          href={`/blog?tag=${encodeURIComponent(getTagCategory(tag))}`}
                           className='transition-colors hover:text-[#999]'
                         >
                           {tag}
diff --git a/apps/sim/app/(landing)/blog/authors/[id]/page.tsx b/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
@@ -36,7 +36,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
       <div className='mx-auto max-w-5xl px-8 py-16 lg:px-12'>
         <h1 className='font-[500] text-[32px] text-[#ECECEC]'>Author not found</h1>
         <Link
-          href='/studio'
+          href='/blog'
           className='mt-4 inline-block font-season text-[12px] uppercase tracking-wider text-[#999] transition-colors hover:text-[#ECECEC]'
         >
           Back to all posts
diff --git a/apps/sim/app/(landing)/blog/layout.tsx b/apps/sim/app/(landing)/blog/layout.tsx
@@ -3,7 +3,7 @@ import { martianMono } from '@/app/_styles/fonts/martian-mono/martian-mono'
 import { season } from '@/app/_styles/fonts/season/season'
 import Footer from '@/app/(home)/components/footer/footer'
 import Navbar from '@/app/(home)/components/navbar/navbar'
-import '@/app/(landing)/studio/studio-scrollbar.css'
+import '@/app/(landing)/blog/studio-scrollbar.css'
 
 export const metadata: Metadata = {
   title: {
diff --git a/apps/sim/app/(landing)/blog/og/route.tsx b/apps/sim/app/(landing)/blog/og/route.tsx
@@ -3,7 +3,7 @@ import path from 'path'
 import { ImageResponse } from 'next/og'
 import type { NextRequest } from 'next/server'
 import { getPostBySlug } from '@/lib/blog/registry'
-import { getPrimaryCategory } from '@/app/(landing)/studio/tag-colors'
+import { getPrimaryCategory } from '@/app/(landing)/blog/tag-colors'
 
 function getTitleFontSize(title: string): number {
   if (title.length > 80) return 36
@@ -220,7 +220,7 @@ export async function GET(request: NextRequest) {
             letterSpacing: '0.05em',
           }}
         >
-          sim.ai/studio
+          sim.ai/blog
         </span>
       </div>
     </div>,
diff --git a/apps/sim/app/(landing)/blog/post-grid.tsx b/apps/sim/app/(landing)/blog/post-grid.tsx
@@ -72,7 +72,7 @@ function PostCard({ post, priority = false }: { post: Post; priority?: boolean }
 
   return (
     <motion.div variants={cardVariants} className='h-full'>
-      <Link href={`/studio/${post.slug}`} className='group flex h-full flex-col'>
+      <Link href={`/blog/${post.slug}`} className='group flex h-full flex-col'>
         <article className='flex h-full flex-col overflow-hidden border border-[#2A2A2A] bg-[#232323] transition-[border-color,background-color,transform] duration-200 ease-out active:scale-[0.99] [@media(hover:hover)]:group-hover:border-[#3d3d3d] [@media(hover:hover)]:group-hover:bg-[#282828] [@media(hover:hover)]:group-hover:-translate-y-0.5'>
           <div className='relative aspect-video w-full overflow-hidden bg-[#1C1C1C]'>
             <Image
@@ -143,7 +143,7 @@ function FeaturedLeadCard({ post }: { post: Post }) {
   return (
     <motion.div variants={leadVariants} className='col-span-full'>
       <Link
-        href={`/studio/${post.slug}`}
+        href={`/blog/${post.slug}`}
         className='group relative flex min-h-[400px] flex-col justify-end overflow-hidden border border-[#2A2A2A] bg-[#232323] transition-[border-color,transform] duration-200 ease-out [@media(hover:hover)]:hover:border-[#00F701] [@media(hover:hover)]:hover:-translate-y-0.5'
       >
         <div className='absolute inset-0'>
diff --git a/apps/sim/app/(landing)/blog/search-input.tsx b/apps/sim/app/(landing)/blog/search-input.tsx
@@ -15,9 +15,9 @@ export function SearchInput() {
       e.preventDefault()
       const value = inputRef.current?.value.trim() ?? ''
       if (value) {
-        router.push(`/studio?q=${encodeURIComponent(value)}`)
+        router.push(`/blog?q=${encodeURIComponent(value)}`)
       } else {
-        router.push('/studio')
+        router.push('/blog')
       }
     },
     [router]
diff --git a/apps/sim/app/(landing)/blog/sidebar.tsx b/apps/sim/app/(landing)/blog/sidebar.tsx
@@ -27,14 +27,14 @@ export async function StudioSidebar({ activeTag }: StudioSidebarProps) {
       id: null,
       label: 'All Posts',
       count: totalCount,
-      href: '/studio',
+      href: '/blog',
       color: '#00F701',
     },
     ...CATEGORIES.map((cat) => ({
       id: cat.id,
       label: cat.label,
       count: categoryCounts[cat.id] ?? 0,
-      href: `/studio?tag=${encodeURIComponent(cat.id)}`,
+      href: `/blog?tag=${encodeURIComponent(cat.id)}`,
       color: cat.color,
     })),
   ]
diff --git a/apps/sim/app/(landing)/blog/studio-content.tsx b/apps/sim/app/(landing)/blog/studio-content.tsx
@@ -3,9 +3,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { motion, useReducedMotion } from 'framer-motion'
 import { Search } from 'lucide-react'
-import { StudioHero } from '@/app/(landing)/studio/hero'
-import { FeaturedGrid, PostGrid } from '@/app/(landing)/studio/post-grid'
-import { CATEGORIES, getCategoryById, getPrimaryCategory } from '@/app/(landing)/studio/tag-colors'
+import { StudioHero } from '@/app/(landing)/blog/hero'
+import { FeaturedGrid, PostGrid } from '@/app/(landing)/blog/post-grid'
+import { CATEGORIES, getCategoryById, getPrimaryCategory } from '@/app/(landing)/blog/tag-colors'
 
 interface SerializedPost {
   slug: string
@@ -39,7 +39,7 @@ export function StudioContent({ posts, initialTag, initialQuery }: StudioContent
     if (tag) params.set('tag', tag)
     if (q) params.set('q', q)
     const search = params.toString()
-    window.history.replaceState(null, '', search ? `/studio?${search}` : '/studio')
+    window.history.replaceState(null, '', search ? `/blog?${search}` : '/blog')
   }, [])
 
   /** Handle browser back / forward. */
diff --git a/apps/sim/app/(landing)/blog/studio-scrollbar.css b/apps/sim/app/(landing)/blog/studio-scrollbar.css
@@ -1,28 +1,29 @@
-/* Firefox */
-html {
+/* Firefox — scoped to studio layout root */
+.studio-scroll {
   scrollbar-width: thin;
   scrollbar-color: #2a2a2a #1c1c1c;
 }
 
-/* WebKit (Chrome, Safari, Edge) */
-html::-webkit-scrollbar {
+/* WebKit (Chrome, Safari, Edge) — scoped to studio layout root */
+.studio-scroll::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
 
-html::-webkit-scrollbar-track {
+.studio-scroll::-webkit-scrollbar-track {
   background: #1c1c1c;
 }
 
-html::-webkit-scrollbar-thumb {
+.studio-scroll::-webkit-scrollbar-thumb {
   background: #2a2a2a;
   border-radius: 3px;
 }
 
-html::-webkit-scrollbar-thumb:hover {
+.studio-scroll::-webkit-scrollbar-thumb:hover {
   background: #3d3d3d;
 }
 
+/* Descendant scrollbars */
 .studio-scroll *::-webkit-scrollbar {
   width: 4px;
   height: 4px;
diff --git a/apps/sim/app/(landing)/blog/tags/page.tsx b/apps/sim/app/(landing)/blog/tags/page.tsx
@@ -34,7 +34,7 @@ export default async function TagsIndex() {
       </p>
       <div className='flex flex-wrap gap-3'>
         <Link
-          href='/studio'
+          href='/blog'
           className='border border-[#3d3d3d] bg-[#232323] px-4 py-2 font-season text-[11px] uppercase tracking-wider text-[#ECECEC] transition-colors hover:border-[#ECECEC]'
           style={{ borderRadius: '5px' }}
           prefetch
@@ -46,7 +46,7 @@ export default async function TagsIndex() {
           return (
             <Link
               key={cat.id}
-              href={`/studio?tag=${encodeURIComponent(cat.id)}`}
+              href={`/blog?tag=${encodeURIComponent(cat.id)}`}
               className='flex items-center gap-2 px-4 py-2 font-season text-[11px] uppercase tracking-wider transition-colors hover:opacity-80'
               style={{
                 borderRadius: '5px',
diff --git a/apps/sim/lib/blog/seo.ts b/apps/sim/lib/blog/seo.ts
@@ -33,7 +33,7 @@ export function buildPostMetadata(post: BlogMeta): Metadata {
       tags: post.tags,
       images: [
         {
-          url: `${baseUrl}/studio/og?slug=${encodeURIComponent(post.slug)}`,
+          url: `${baseUrl}/blog/og?slug=${encodeURIComponent(post.slug)}`,
           width: 1200,
           height: 630,
           alt: post.ogAlt || post.title,
@@ -44,7 +44,7 @@ export function buildPostMetadata(post: BlogMeta): Metadata {
       card: 'summary_large_image',
       title: post.title,
       description: post.description,
-      images: [`${baseUrl}/studio/og?slug=${encodeURIComponent(post.slug)}`],
+      images: [`${baseUrl}/blog/og?slug=${encodeURIComponent(post.slug)}`],
       creator: post.author.url?.includes('x.com') ? `@${post.author.xHandle || ''}` : undefined,
       site: '@simdotai',
     },

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str`
`36`	`36`	`<div className='mx-auto max-w-5xl px-8 py-16 lg:px-12'>`
`37`	`37`	`<h1 className='font-[500] text-[32px] text-[#ECECEC]'>Author not found</h1>`
`38`	`38`	`<Link`
`39`		`- href='/studio'`
	`39`	`+ href='/blog'`
`40`	`40`	`className='mt-4 inline-block font-season text-[12px] uppercase tracking-wider text-[#999] transition-colors hover:text-[#ECECEC]'`
`41`	`41`	`>`
`42`	`42`	`Back to all posts`