chore: update search input and add search

Author: adithyaakrishna

apps/sim/app/(landing)/studio/page.tsx

@@ -16,11 +16,12 @@ export const revalidate = 3600
 export default async function StudioIndex({
   searchParams,
 }: {
-  searchParams: Promise<{ page?: string; tag?: string }>
+  searchParams: Promise<{ page?: string; tag?: string; q?: string }>
 }) {
-  const { page, tag } = await searchParams
+  const { page, tag, q } = await searchParams
   const pageNum = Math.max(1, Number(page || 1))
   const perPage = 20
+  const query = q?.trim().toLowerCase() ?? ''
 
   const all = await getAllPostMeta()
 
@@ -38,6 +39,22 @@ export default async function StudioIndex({
       }
     }
   }
+
+  if (query) {
+    filtered = filtered.filter((p) => {
+      const haystack = [
+        p.title,
+        p.description,
+        ...p.tags,
+        p.author.name,
+        ...(p.authors?.map((a) => a.name) ?? []),
+      ]
+        .join(' ')
+        .toLowerCase()
+      return haystack.includes(query)
+    })
+  }
+
   const activeCategory = resolvedTag ? getCategoryById(resolvedTag) : null
 
   const sorted = filtered.sort((a, b) => {
@@ -68,9 +85,28 @@ export default async function StudioIndex({
           type='application/ld+json'
           dangerouslySetInnerHTML={{ __html: JSON.stringify(studioJsonLd) }}
         />
-        {pageNum === 1 && !tag && <StudioHero />}
+        {pageNum === 1 && !tag && !query && <StudioHero />}
         <div className='mx-auto w-full max-w-5xl py-12'>
-          {activeCategory && (
+          {query && (
+            <div className='mb-8 flex items-center gap-3'>
+              <span className='font-season text-[10px] uppercase tracking-widest text-[#666]'>
+                Results for:
+              </span>
+              <span
+                className='px-2 py-0.5 font-season text-[10px] uppercase tracking-wider text-[#ECECEC]'
+                style={{ border: '1px solid #3d3d3d' }}
+              >
+                {q}
+              </span>
+              <Link
+                href='/studio'
+                className='font-mono text-[10px] uppercase tracking-wider text-[#999] transition-colors hover:text-[#ECECEC]'
+              >
+                Clear
+              </Link>
+            </div>
+          )}
+          {activeCategory && !query && (
             <div className='mb-8 flex items-center gap-3'>
               <span className='font-mono text-[10px] uppercase tracking-widest text-[#666]'>
                 Filtered by:
@@ -105,14 +141,16 @@ export default async function StudioIndex({
             <section>
               <h2 className='mb-8 flex items-center gap-2 font-mono text-[11px] uppercase tracking-widest text-[#666]'>
                 <span className='inline-block h-2 w-2 bg-[#00F701]' aria-hidden='true' />
-                {activeCategory ? activeCategory.label : 'All Posts'}
+                {query ? 'Search Results' : activeCategory ? activeCategory.label : 'All Posts'}
               </h2>
               <PostGrid posts={feed} />
             </section>
           )}
           {pagePosts.length === 0 && (
             <div className='py-20 text-center'>
-              <p className='text-[14px] text-[#666]'>No posts found.</p>
+              <p className='text-[14px] text-[#666]'>
+                {query ? `No posts matching "${q}".` : 'No posts found.'}
+              </p>
               <Link
                 href='/studio'
                 className='mt-4 inline-block font-mono text-[12px] uppercase tracking-wider text-[#999] transition-colors hover:text-[#ECECEC]'

apps/sim/app/(landing)/studio/search-input.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useCallback, useRef } from 'react'
+import { Search } from 'lucide-react'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+/**
+ * Blog search input for the Studio sidebar.
+ *
+ * Reads the current `?q=` param as the default value.
+ * On Enter, navigates to `/studio?q=<query>` which triggers
+ * server-side filtering of posts by title, description, and tags.
+ */
+export function SearchInput() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const currentQuery = searchParams.get('q') ?? ''
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault()
+      const value = inputRef.current?.value.trim() ?? ''
+      if (value) {
+        router.push(`/studio?q=${encodeURIComponent(value)}`)
+      } else {
+        router.push('/studio')
+      }
+    },
+    [router]
+  )
+
+  return (
+    <form onSubmit={handleSubmit} className='relative'>
+      <input
+        ref={inputRef}
+        type='text'
+        defaultValue={currentQuery}
+        placeholder='SEARCH POSTS...'
+        className='w-full border border-[#2A2A2A] bg-[#232323] px-4 py-2 pr-9 font-season text-[11px] text-[#ECECEC] placeholder:text-[#666] transition-colors focus:border-[#00F701] focus:outline-none'
+        style={{ borderRadius: '5px' }}
+        aria-label='Search blog posts'
+      />
+      <button
+        type='submit'
+        className='absolute right-0 top-0 flex h-full items-center px-3 text-[#666] transition-colors hover:text-[#999]'
+        aria-label='Search'
+      >
+        <Search className='h-3.5 w-3.5' aria-hidden='true' />
+      </button>
+    </form>
+  )
+}

apps/sim/app/(landing)/studio/sidebar.tsx

@@ -1,6 +1,6 @@
-import { Search } from 'lucide-react'
 import { getAllPostMeta } from '@/lib/blog/registry'
 import { CategoryList } from '@/app/(landing)/studio/category-list'
+import { SearchInput } from '@/app/(landing)/studio/search-input'
 import { CATEGORIES, getPrimaryCategory } from '@/app/(landing)/studio/tag-colors'
 
 interface StudioSidebarProps {
@@ -45,22 +45,9 @@ export async function StudioSidebar({ activeTag }: StudioSidebarProps) {
           <h2 className='mb-4 font-season text-[10px] uppercase tracking-widest text-[#666]'>
             Find Insights
           </h2>
-          <div className='relative'>
-            <input
-              type='text'
-              placeholder='SEARCH COMING SOON...'
-              disabled
-              className='w-full cursor-not-allowed border border-[#2A2A2A] bg-[#232323] px-4 py-2 font-season text-[11px] text-[#ECECEC] opacity-50 placeholder:text-[#666]'
-              style={{ borderRadius: '5px' }}
-              aria-label='Search blog posts (coming soon)'
-            />
-            <Search
-              className='absolute right-3 top-2.5 h-3.5 w-3.5 text-[#666]'
-              aria-hidden='true'
-            />
-          </div>
+          <SearchInput />
         </div>
-        <div className='flex flex-col'>
+        <div className='flex flex-col pt-6'>
           <h2 className='mb-3 font-season text-[10px] uppercase tracking-widest text-[#ECECEC]'>
             Categories
           </h2>