From 5d15afb8a1fd24cba47c507139a1327eccc72974 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 12:07:56 +0000
Subject: [PATCH 1/2] [#308] GitHub-style inline filter bar with clickable
 params

New FilterBar component replaces separate Writer/Genre/Language/Sort
controls with a single bordered box of label:value tokens. Values in
accent green, clicking opens positioned dropdown below. Only one
dropdown open at a time, outside click closes. Mobile: sort collapses
to icon only so everything fits one line.

Fixes #308

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/page.tsx             |  14 +--
 src/components/FilterBar.tsx | 230 +++++++++++++++++++++++++++++++++++
 2 files changed, 233 insertions(+), 11 deletions(-)
 create mode 100644 src/components/FilterBar.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 64d7c4c5..aa0cf9cd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,9 +2,8 @@ import { createServerClient, type Storyline } from "../../lib/supabase";
 import { STORY_FACTORY } from "../../lib/contracts/constants";
 import { getTrendingStorylines, getRisingStorylines } from "../../lib/ranking";
 import { StoryCard } from "../components/StoryCard";
-import { SortDropdown } from "../components/SortDropdown";
-import { WriterFilter, type WriterFilterValue } from "../components/WriterFilter";
-import { GenreFilter, LanguageFilter } from "../components/GenreLanguageFilter";
+import { FilterBar } from "../components/FilterBar";
+import { type WriterFilterValue } from "../components/WriterFilter";
 import { GENRES, LANGUAGES } from "../../lib/genres";
 import Link from "next/link";
 
@@ -42,8 +41,6 @@ export default async function Home({
     storylines = await queryTab(supabase, tab, writer, page, genre, lang);
   }
 
-  const extraParams = writer !== "all" ? { writer } : undefined;
-
   return (
     <div className="mx-auto max-w-5xl px-6 py-10">
       {/* Compact hero */}
@@ -57,12 +54,7 @@ export default async function Home({
       </header>
 
       {/* Filter bar */}
-      <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap sm:items-center sm:justify-between sm:gap-3">
-        <WriterFilter active={writer} tab={tab} basePath="/" />
-        <GenreFilter active={genre} tab={tab} writer={writer} lang={lang} />
-        <LanguageFilter active={lang} tab={tab} writer={writer} genre={genre} />
-        <SortDropdown active={tab} writer={writer} basePath="/" />
-      </div>
+      <FilterBar writer={writer} genre={genre} lang={lang} tab={tab} />
 
       {/* Story grid */}
       <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-3">
diff --git a/src/components/FilterBar.tsx b/src/components/FilterBar.tsx
new file mode 100644
index 00000000..e64afd84
--- /dev/null
+++ b/src/components/FilterBar.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { GENRES, LANGUAGES } from "../../lib/genres";
+
+const WRITER_OPTIONS = ["All", "Human", "AI"] as const;
+const SORT_OPTIONS = [
+  { value: "new", label: "Recent" },
+  { value: "trending", label: "Trending" },
+  { value: "rising", label: "Rising" },
+  { value: "completed", label: "Completed" },
+] as const;
+
+type FilterKey = "writer" | "genre" | "lang" | "sort";
+
+interface FilterBarProps {
+  writer: string;
+  genre: string;
+  lang: string;
+  tab: string;
+}
+
+function buildHref(params: { tab: string; writer: string; genre: string; lang: string }) {
+  const sp = new URLSearchParams({ tab: params.tab });
+  if (params.writer !== "all") sp.set("writer", params.writer);
+  if (params.genre !== "all") sp.set("genre", params.genre);
+  if (params.lang !== "all") sp.set("lang", params.lang);
+  return `/?${sp.toString()}`;
+}
+
+function writerDisplay(v: string) {
+  if (v === "agent") return "AI";
+  return v.charAt(0).toUpperCase() + v.slice(1);
+}
+
+function sortLabel(tab: string) {
+  return SORT_OPTIONS.find((o) => o.value === tab)?.label ?? "Recent";
+}
+
+export function FilterBar({ writer, genre, lang, tab }: FilterBarProps) {
+  const [open, setOpen] = useState<FilterKey | null>(null);
+  const barRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (barRef.current && !barRef.current.contains(e.target as Node)) {
+        setOpen(null);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  function toggle(key: FilterKey) {
+    setOpen(open === key ? null : key);
+  }
+
+  function navigate(params: { tab: string; writer: string; genre: string; lang: string }) {
+    setOpen(null);
+    router.push(buildHref(params));
+  }
+
+  return (
+    <div ref={barRef} className="relative">
+      <div className="border-border flex items-center gap-x-3 rounded border px-3 py-2 text-xs">
+        {/* Writer token */}
+        <Token
+          label="writer"
+          value={writerDisplay(writer)}
+          active={open === "writer"}
+          onClick={() => toggle("writer")}
+        />
+
+        {/* Genre token */}
+        <Token
+          label="genre"
+          value={genre === "all" ? "All" : genre}
+          active={open === "genre"}
+          onClick={() => toggle("genre")}
+        />
+
+        {/* Language token */}
+        <Token
+          label="lang"
+          value={lang === "all" ? "All" : lang}
+          active={open === "lang"}
+          onClick={() => toggle("lang")}
+        />
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Sort — icon on mobile, full label on sm+ */}
+        <button
+          onClick={() => toggle("sort")}
+          className={`text-muted hover:text-foreground shrink-0 transition-colors ${open === "sort" ? "text-accent" : ""}`}
+        >
+          <span className="sm:hidden">{"\u2195"}</span>
+          <span className="hidden sm:inline">
+            <span className="text-muted">sort:</span>
+            <span className="text-accent">{sortLabel(tab)}</span>
+          </span>
+        </button>
+      </div>
+
+      {/* Dropdowns */}
+      {open === "writer" && (
+        <Dropdown>
+          {WRITER_OPTIONS.map((opt) => {
+            const val = opt.toLowerCase() === "ai" ? "agent" : opt.toLowerCase();
+            return (
+              <DropdownItem
+                key={val}
+                label={opt}
+                active={writer === val}
+                onClick={() => navigate({ tab, writer: val, genre, lang })}
+              />
+            );
+          })}
+        </Dropdown>
+      )}
+
+      {open === "genre" && (
+        <Dropdown>
+          <DropdownItem
+            label="All genres"
+            active={genre === "all"}
+            onClick={() => navigate({ tab, writer, genre: "all", lang })}
+          />
+          {GENRES.map((g) => (
+            <DropdownItem
+              key={g}
+              label={g}
+              active={genre === g}
+              onClick={() => navigate({ tab, writer, genre: g, lang })}
+            />
+          ))}
+        </Dropdown>
+      )}
+
+      {open === "lang" && (
+        <Dropdown>
+          <DropdownItem
+            label="All languages"
+            active={lang === "all"}
+            onClick={() => navigate({ tab, writer, genre, lang: "all" })}
+          />
+          {LANGUAGES.map((l) => (
+            <DropdownItem
+              key={l}
+              label={l}
+              active={lang === l}
+              onClick={() => navigate({ tab, writer, genre, lang: l })}
+            />
+          ))}
+        </Dropdown>
+      )}
+
+      {open === "sort" && (
+        <Dropdown align="right">
+          {SORT_OPTIONS.map(({ value, label }) => (
+            <DropdownItem
+              key={value}
+              label={label}
+              active={tab === value}
+              onClick={() => navigate({ tab: value, writer, genre, lang })}
+            />
+          ))}
+        </Dropdown>
+      )}
+    </div>
+  );
+}
+
+function Token({
+  label,
+  value,
+  active,
+  onClick,
+}: {
+  label: string;
+  value: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`whitespace-nowrap transition-colors hover:opacity-80 ${active ? "opacity-80" : ""}`}
+    >
+      <span className="text-muted">{label}:</span>
+      <span className="text-accent">{value}</span>
+    </button>
+  );
+}
+
+function Dropdown({ children, align }: { children: React.ReactNode; align?: "right" }) {
+  return (
+    <div
+      className={`border-border bg-[var(--bg)] absolute top-full z-20 mt-1 max-h-60 overflow-y-auto rounded border py-1 shadow-lg ${
+        align === "right" ? "right-0" : "left-0"
+      }`}
+    >
+      {children}
+    </div>
+  );
+}
+
+function DropdownItem({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`block w-full whitespace-nowrap px-4 py-1.5 text-left text-xs transition-colors ${
+        active ? "text-accent bg-accent/10" : "text-muted hover:text-foreground hover:bg-[var(--border)]/30"
+      }`}
+    >
+      {label}
+    </button>
+  );
+}

From 8a8154eecf7e0bbbc40eca971bcc004da2e2839d Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 12:10:39 +0000
Subject: [PATCH 2/2] [#308] Position dropdowns below each token, not bar edges

Each token now wrapped in relative container so its dropdown
opens directly below the clicked token.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/FilterBar.tsx | 205 ++++++++++++++++++-----------------
 1 file changed, 104 insertions(+), 101 deletions(-)

diff --git a/src/components/FilterBar.tsx b/src/components/FilterBar.tsx
index e64afd84..e3d521d3 100644
--- a/src/components/FilterBar.tsx
+++ b/src/components/FilterBar.tsx
@@ -63,113 +63,116 @@ export function FilterBar({ writer, genre, lang, tab }: FilterBarProps) {
   }
 
   return (
-    <div ref={barRef} className="relative">
+    <div ref={barRef}>
       <div className="border-border flex items-center gap-x-3 rounded border px-3 py-2 text-xs">
-        {/* Writer token */}
-        <Token
-          label="writer"
-          value={writerDisplay(writer)}
-          active={open === "writer"}
-          onClick={() => toggle("writer")}
-        />
-
-        {/* Genre token */}
-        <Token
-          label="genre"
-          value={genre === "all" ? "All" : genre}
-          active={open === "genre"}
-          onClick={() => toggle("genre")}
-        />
-
-        {/* Language token */}
-        <Token
-          label="lang"
-          value={lang === "all" ? "All" : lang}
-          active={open === "lang"}
-          onClick={() => toggle("lang")}
-        />
+        {/* Writer token + dropdown */}
+        <div className="relative">
+          <Token
+            label="writer"
+            value={writerDisplay(writer)}
+            active={open === "writer"}
+            onClick={() => toggle("writer")}
+          />
+          {open === "writer" && (
+            <Dropdown>
+              {WRITER_OPTIONS.map((opt) => {
+                const val = opt.toLowerCase() === "ai" ? "agent" : opt.toLowerCase();
+                return (
+                  <DropdownItem
+                    key={val}
+                    label={opt}
+                    active={writer === val}
+                    onClick={() => navigate({ tab, writer: val, genre, lang })}
+                  />
+                );
+              })}
+            </Dropdown>
+          )}
+        </div>
+
+        {/* Genre token + dropdown */}
+        <div className="relative">
+          <Token
+            label="genre"
+            value={genre === "all" ? "All" : genre}
+            active={open === "genre"}
+            onClick={() => toggle("genre")}
+          />
+          {open === "genre" && (
+            <Dropdown>
+              <DropdownItem
+                label="All genres"
+                active={genre === "all"}
+                onClick={() => navigate({ tab, writer, genre: "all", lang })}
+              />
+              {GENRES.map((g) => (
+                <DropdownItem
+                  key={g}
+                  label={g}
+                  active={genre === g}
+                  onClick={() => navigate({ tab, writer, genre: g, lang })}
+                />
+              ))}
+            </Dropdown>
+          )}
+        </div>
+
+        {/* Language token + dropdown */}
+        <div className="relative">
+          <Token
+            label="lang"
+            value={lang === "all" ? "All" : lang}
+            active={open === "lang"}
+            onClick={() => toggle("lang")}
+          />
+          {open === "lang" && (
+            <Dropdown>
+              <DropdownItem
+                label="All languages"
+                active={lang === "all"}
+                onClick={() => navigate({ tab, writer, genre, lang: "all" })}
+              />
+              {LANGUAGES.map((l) => (
+                <DropdownItem
+                  key={l}
+                  label={l}
+                  active={lang === l}
+                  onClick={() => navigate({ tab, writer, genre, lang: l })}
+                />
+              ))}
+            </Dropdown>
+          )}
+        </div>
 
         {/* Spacer */}
         <div className="flex-1" />
 
-        {/* Sort — icon on mobile, full label on sm+ */}
-        <button
-          onClick={() => toggle("sort")}
-          className={`text-muted hover:text-foreground shrink-0 transition-colors ${open === "sort" ? "text-accent" : ""}`}
-        >
-          <span className="sm:hidden">{"\u2195"}</span>
-          <span className="hidden sm:inline">
-            <span className="text-muted">sort:</span>
-            <span className="text-accent">{sortLabel(tab)}</span>
-          </span>
-        </button>
+        {/* Sort token + dropdown */}
+        <div className="relative shrink-0">
+          <button
+            onClick={() => toggle("sort")}
+            className={`text-muted hover:text-foreground transition-colors ${open === "sort" ? "text-accent" : ""}`}
+          >
+            <span className="sm:hidden">{"\u2195"}</span>
+            <span className="hidden sm:inline">
+              <span className="text-muted">sort:</span>
+              <span className="text-accent">{sortLabel(tab)}</span>
+            </span>
+          </button>
+          {open === "sort" && (
+            <Dropdown align="right">
+              {SORT_OPTIONS.map(({ value, label }) => (
+                <DropdownItem
+                  key={value}
+                  label={label}
+                  active={tab === value}
+                  onClick={() => navigate({ tab: value, writer, genre, lang })}
+                />
+              ))}
+            </Dropdown>
+          )}
+        </div>
       </div>
-
-      {/* Dropdowns */}
-      {open === "writer" && (
-        <Dropdown>
-          {WRITER_OPTIONS.map((opt) => {
-            const val = opt.toLowerCase() === "ai" ? "agent" : opt.toLowerCase();
-            return (
-              <DropdownItem
-                key={val}
-                label={opt}
-                active={writer === val}
-                onClick={() => navigate({ tab, writer: val, genre, lang })}
-              />
-            );
-          })}
-        </Dropdown>
-      )}
-
-      {open === "genre" && (
-        <Dropdown>
-          <DropdownItem
-            label="All genres"
-            active={genre === "all"}
-            onClick={() => navigate({ tab, writer, genre: "all", lang })}
-          />
-          {GENRES.map((g) => (
-            <DropdownItem
-              key={g}
-              label={g}
-              active={genre === g}
-              onClick={() => navigate({ tab, writer, genre: g, lang })}
-            />
-          ))}
-        </Dropdown>
-      )}
-
-      {open === "lang" && (
-        <Dropdown>
-          <DropdownItem
-            label="All languages"
-            active={lang === "all"}
-            onClick={() => navigate({ tab, writer, genre, lang: "all" })}
-          />
-          {LANGUAGES.map((l) => (
-            <DropdownItem
-              key={l}
-              label={l}
-              active={lang === l}
-              onClick={() => navigate({ tab, writer, genre, lang: l })}
-            />
-          ))}
-        </Dropdown>
-      )}
-
-      {open === "sort" && (
-        <Dropdown align="right">
-          {SORT_OPTIONS.map(({ value, label }) => (
-            <DropdownItem
-              key={value}
-              label={label}
-              active={tab === value}
-              onClick={() => navigate({ tab: value, writer, genre, lang })}
-            />
-          ))}
-        </Dropdown>
-      )}
     </div>
   );
 }