feat(thoughts): add terminal filter; extract .terminal-filter to global.css

- Promote cursor/filter styles from index.astro <style> block to
  .terminal-filter component class in global.css
- thoughts/index: filter rows by title/tag with up/down nav and
  Enter-to-navigate, matching the index page pattern

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Stivaros

src/pages/index.astro

@@ -76,36 +76,11 @@ function fmtDate(d: Date) {
       spellcheck="false"
       data-placeholder="filter..."
       aria-label="Filter sections"
-      class="font-mono text-sm text-zinc-100 light:text-zinc-900 ml-1 outline-none inline-block"
+      class="terminal-filter font-mono text-sm text-zinc-100 light:text-zinc-900 ml-1 outline-none inline-block"
     ></span>
   </div>
 </BaseLayout>
 
-<style>
-  #terminal-filter {
-    caret-color: transparent;
-    min-width: 1ch;
-  }
-  #terminal-filter:focus-visible {
-    box-shadow: none;
-  }
-  #terminal-filter::after {
-    content: '';
-    display: inline-block;
-    width: 0.5em;
-    height: 1.5em;
-    background-color: #34d399; /* emerald-400 */
-    vertical-align: bottom;
-    animation: blink 1s steps(2) infinite;
-  }
-  :global(.light) #terminal-filter::after {
-    background-color: #059669; /* emerald-600 */
-  }
-  #terminal-filter:empty::before {
-    content: attr(data-placeholder);
-    color: #52525b; /* zinc-600 */
-  }
-</style>
 
 <script>
   const input = document.getElementById('terminal-filter') as HTMLElement;

src/pages/thoughts/index.astro

@@ -29,7 +29,10 @@ entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
           const date = entry.data.date.toISOString().slice(0, 10);
           const tag = entry.data.tags?.[0] ?? '';
           return (
-            <div class="grid grid-cols-[100px_1fr_80px] sm:grid-cols-[100px_60px_1fr_80px] gap-4 py-2.5 items-baseline border-b border-dashed border-zinc-800 light:border-zinc-200 min-w-[360px]">
+            <div
+              class="thought-row grid grid-cols-[100px_1fr_80px] sm:grid-cols-[100px_60px_1fr_80px] gap-4 py-2.5 items-baseline border-b border-dashed border-zinc-800 light:border-zinc-200 min-w-[360px] transition-colors duration-100"
+              data-name={`${entry.data.title} ${tag}`}
+            >
               <span class="text-zinc-500 text-xs">{date}</span>
               <span class="hidden sm:block text-zinc-600 text-xs text-right">—</span>
               <a href={`/thoughts/${entry.id}`} class="text-sm font-medium truncate">
@@ -45,8 +48,69 @@ entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
     )
   }
 
-  <div class="term-prompt mt-6">
+  <div class="term-prompt border border-accent/40 px-3 py-1.5 inline-flex items-center mt-6">
     <span class="text-accent">$</span>
-    <span class="ml-1">_</span>
+    <span
+      id="thought-filter"
+      role="textbox"
+      contenteditable="plaintext-only"
+      spellcheck="false"
+      data-placeholder="filter..."
+      aria-label="Filter thoughts"
+      class="terminal-filter font-mono text-sm text-zinc-100 light:text-zinc-900 ml-1 outline-none inline-block"
+    ></span>
   </div>
 </BaseLayout>
+
+<script>
+  const input = document.getElementById('thought-filter') as HTMLElement;
+  const rows = Array.from(document.querySelectorAll<HTMLElement>('.thought-row'));
+
+  let focusedIndex = -1;
+
+  const visibleRows = () => rows.filter(r => r.style.display !== 'none');
+
+  function setFocus(index: number) {
+    focusedIndex = index;
+    rows.forEach(r => r.classList.remove('ls-row-focused'));
+    const visible = visibleRows();
+    if (focusedIndex >= 0 && focusedIndex < visible.length) {
+      visible[focusedIndex].classList.add('ls-row-focused');
+    }
+  }
+
+  input.focus();
+
+  input.addEventListener('input', () => {
+    if (input.innerHTML === '<br>') input.innerHTML = '';
+    const q = (input.textContent ?? '').toLowerCase();
+    rows.forEach(r => {
+      r.style.display = !q || r.dataset.name!.toLowerCase().includes(q) ? '' : 'none';
+    });
+    setFocus(-1);
+  });
+
+  input.addEventListener('keydown', (e: KeyboardEvent) => {
+    const visible = visibleRows();
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setFocus(Math.min(focusedIndex + 1, visible.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setFocus(Math.max(focusedIndex - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const target = focusedIndex >= 0 ? visible[focusedIndex] : visible[0];
+      if (target) {
+        const link = target.querySelector('a');
+        if (link) window.location.href = link.href;
+      }
+    }
+  });
+
+  input.addEventListener('paste', (e: ClipboardEvent) => {
+    e.preventDefault();
+    const text = e.clipboardData?.getData('text/plain') ?? '';
+    document.execCommand('insertText', false, text);
+  });
+</script>

src/styles/global.css

@@ -175,6 +175,34 @@
   .ls-row-focused {
     background-color: rgba(52, 211, 153, 0.08);
   }
+
+  .terminal-filter {
+    caret-color: transparent;
+    min-width: 1ch;
+
+    &:focus-visible {
+      box-shadow: none;
+    }
+
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 0.5em;
+      height: 1.5em;
+      background-color: #34d399; /* emerald-400 */
+      vertical-align: bottom;
+      animation: blink 1s steps(2) infinite;
+    }
+
+    &:empty::before {
+      content: attr(data-placeholder);
+      color: #52525b; /* zinc-600 */
+    }
+  }
+
+  html.light .terminal-filter::after {
+    background-color: #059669; /* emerald-600 */
+  }
 }
 
 @layer base {