From d7dc22d0c89ab8389072281a095323c26a257ad6 Mon Sep 17 00:00:00 2001
From: Josh Bairstow <joshbairstow@gmail.com>
Date: Tue, 2 Jun 2026 01:10:27 +1000
Subject: [PATCH] feat(blog): render search input, empty-state, hidden utility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/molecules/BlogSearch.astro | 81 ++++++++++++++++++++++-
 src/pages/blog/index.astro                | 18 +++++
 2 files changed, 98 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/BlogSearch.astro b/src/components/molecules/BlogSearch.astro
index e39a11d..c694e11 100644
--- a/src/components/molecules/BlogSearch.astro
+++ b/src/components/molecules/BlogSearch.astro
@@ -1,3 +1,82 @@
 ---
-// Stub — real implementation lands in Task 4.
+// Light client-side filter for the blog archive.
+// Reads [data-search] attributes on rows + the featured article, hides
+// non-matches, collapses empty year heads, toggles a no-results message.
+// Filter script is added in Task 5; this file ships markup + styles only.
 ---
+
+<div class="bsearch">
+  <input
+    type="search"
+    class="bsearch__input"
+    aria-label="Search posts"
+    placeholder="Search the journal…"
+    autocomplete="off"
+    spellcheck="false"
+  />
+  <span class="bsearch__hint" aria-hidden="true">Esc to clear</span>
+</div>
+
+<style>
+  .bsearch {
+    display: flex;
+    align-items: baseline;
+    gap: 14px;
+    padding: clamp(14px, 2.4vh, 22px) 0;
+    border-top: 1px solid var(--hairline-on-dark);
+    border-bottom: 1px solid var(--hairline-on-dark);
+  }
+  :global(body:not(.dark)) .bsearch {
+    border-top-color: var(--hairline);
+    border-bottom-color: var(--hairline);
+  }
+  .bsearch__input {
+    flex: 1;
+    max-width: 28ch;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid transparent;
+    padding: 6px 0;
+    font-family: var(--font-mono);
+    font-size: 13px;
+    color: var(--fg-on-dark-1);
+    letter-spacing: 0.02em;
+    outline: none;
+    transition: border-color var(--dur-base) var(--ease-out);
+  }
+  :global(body:not(.dark)) .bsearch__input {
+    color: var(--fg-1);
+  }
+  .bsearch__input::placeholder {
+    color: var(--fg-on-dark-3);
+  }
+  :global(body:not(.dark)) .bsearch__input::placeholder {
+    color: var(--fg-3);
+  }
+  .bsearch__input:focus {
+    border-bottom-color: var(--accent);
+  }
+  .bsearch__hint {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--fg-on-dark-3);
+    letter-spacing: 0.06em;
+    opacity: 0;
+    transition: opacity var(--dur-base) var(--ease-out);
+  }
+  :global(body:not(.dark)) .bsearch__hint {
+    color: var(--fg-3);
+  }
+  .bsearch:focus-within .bsearch__hint {
+    opacity: 1;
+  }
+
+  @media (max-width: 800px) {
+    .bsearch__input {
+      max-width: none;
+    }
+    .bsearch__hint {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 9fa00a2..14329fc 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -78,6 +78,8 @@ for (const post of posts) {
     </p>
   </header>
 
+  <BlogSearch />
+
   {
     featured && (
       <article class="feature" data-featured data-search={searchTextById.get(featured.id) ?? ""}>
@@ -125,6 +127,10 @@ for (const post of posts) {
       ))
     }
   </section>
+
+  <p class="empty" data-empty hidden aria-live="polite">
+    No entries match "<span data-empty-query></span>".
+  </p>
 </BaseLayout>
 
 <style>
@@ -258,4 +264,16 @@ for (const post of posts) {
     .feature { grid-template-columns: 1fr; }
     .feature .img { order: -1; aspect-ratio: 16 / 9; }
   }
+
+  .is-hidden { display: none !important; }
+
+  .empty {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    color: var(--fg-on-dark-3);
+    margin: clamp(28px, 5vh, 52px) 0 0;
+    font-feature-settings: "onum" 1;
+  }
+  :global(body:not(.dark)) .empty { color: var(--fg-3); }
 </style>