From 0c529b7a5cb8a6693d167aea2ac41530ff1777ac Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 17 Mar 2026 16:31:20 +0000
Subject: [PATCH] [#272] Custom styled dropdown for genre and language filters

- Add DropdownSelect component: dark bg, monospace, custom arrow,
  click-outside close, keyboard nav (arrows/Enter/Escape), scrollable
- Replace native <select> in GenreLanguageFilter (discovery page)
- Replace native <select> in create page genre/language form
- Reusable with sm/md size variants

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/create/page.tsx                |  33 +++---
 src/components/DropdownSelect.tsx      | 140 +++++++++++++++++++++++++
 src/components/GenreLanguageFilter.tsx |  49 +++++----
 3 files changed, 183 insertions(+), 39 deletions(-)
 create mode 100644 src/components/DropdownSelect.tsx

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index e84868ce..144af1ed 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -13,8 +13,15 @@ import { STORY_FACTORY } from "../../../lib/contracts/constants";
 import { decodeEventLog, encodeEventTopics } from "viem";
 import Link from "next/link";
 import { ConnectWallet } from "../../components/ConnectWallet";
+import { DropdownSelect } from "../../components/DropdownSelect";
 import { GENRES, LANGUAGES } from "../../../lib/genres";
 
+const genreOptions = [
+  { value: "", label: "Select genre..." },
+  ...GENRES.map((g) => ({ value: g, label: g })),
+];
+const languageOptions = LANGUAGES.map((l) => ({ value: l, label: l }));
+
 const STORYLINE_CREATED_TOPIC = encodeEventTopics({
   abi: [storylineCreatedEvent],
   eventName: "StorylineCreated",
@@ -145,30 +152,22 @@ export default function CreateStorylinePage() {
         <div className="grid grid-cols-2 gap-4">
           <div>
             <label className="text-foreground mb-2 block text-sm">Genre</label>
-            <select
+            <DropdownSelect
               value={genre}
-              onChange={(e) => setGenre(e.target.value)}
+              onChange={setGenre}
+              options={genreOptions}
+              placeholder="Select genre..."
               disabled={busy}
-              className="border-border bg-surface text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
-            >
-              <option value="">Select genre...</option>
-              {GENRES.map((g) => (
-                <option key={g} value={g}>{g}</option>
-              ))}
-            </select>
+            />
           </div>
           <div>
             <label className="text-foreground mb-2 block text-sm">Language</label>
-            <select
+            <DropdownSelect
               value={language}
-              onChange={(e) => setLanguage(e.target.value)}
+              onChange={setLanguage}
+              options={languageOptions}
               disabled={busy}
-              className="border-border bg-surface text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
-            >
-              {LANGUAGES.map((l) => (
-                <option key={l} value={l}>{l}</option>
-              ))}
-            </select>
+            />
           </div>
         </div>
 
diff --git a/src/components/DropdownSelect.tsx b/src/components/DropdownSelect.tsx
new file mode 100644
index 00000000..c83cc0b2
--- /dev/null
+++ b/src/components/DropdownSelect.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+
+interface DropdownSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: readonly { value: string; label: string }[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  size?: "sm" | "md";
+}
+
+export function DropdownSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  className,
+  size = "md",
+}: DropdownSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [focusIdx, setFocusIdx] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  const selected = options.find((o) => o.value === value);
+  const label = selected?.label ?? placeholder ?? "Select...";
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  // Scroll focused item into view
+  useEffect(() => {
+    if (!open || focusIdx < 0 || !listRef.current) return;
+    const items = listRef.current.children;
+    if (items[focusIdx]) {
+      (items[focusIdx] as HTMLElement).scrollIntoView({ block: "nearest" });
+    }
+  }, [focusIdx, open]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (disabled) return;
+      if (!open) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          e.preventDefault();
+          setOpen(true);
+          setFocusIdx(options.findIndex((o) => o.value === value));
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusIdx((i) => Math.min(i + 1, options.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusIdx((i) => Math.max(i - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (focusIdx >= 0 && focusIdx < options.length) {
+            onChange(options[focusIdx].value);
+            setOpen(false);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setOpen(false);
+          break;
+      }
+    },
+    [open, focusIdx, options, value, onChange, disabled],
+  );
+
+  const sizeClasses =
+    size === "sm"
+      ? "px-2 py-1 text-xs"
+      : "px-3 py-2 text-sm";
+
+  return (
+    <div ref={containerRef} className={`relative ${className ?? ""}`}>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => !disabled && setOpen((v) => !v)}
+        onKeyDown={handleKeyDown}
+        className={`border-border bg-surface flex w-full items-center justify-between rounded border ${sizeClasses} transition-colors focus:border-accent focus:outline-none disabled:opacity-50 ${
+          selected ? "text-foreground" : "text-muted"
+        }`}
+      >
+        <span className="truncate">{label}</span>
+        <span className="text-muted ml-2 text-[10px]">{open ? "\u25B2" : "\u25BC"}</span>
+      </button>
+
+      {open && (
+        <ul
+          ref={listRef}
+          role="listbox"
+          className="border-border bg-surface absolute z-50 mt-1 max-h-48 w-full overflow-y-auto rounded border shadow-lg"
+        >
+          {options.map((opt, i) => (
+            <li
+              key={opt.value}
+              role="option"
+              aria-selected={opt.value === value}
+              onMouseEnter={() => setFocusIdx(i)}
+              onClick={() => {
+                onChange(opt.value);
+                setOpen(false);
+              }}
+              className={`cursor-pointer ${sizeClasses} transition-colors ${
+                opt.value === value
+                  ? "text-accent font-medium"
+                  : focusIdx === i
+                    ? "bg-accent/10 text-foreground"
+                    : "text-muted hover:text-foreground"
+              }`}
+            >
+              {opt.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/GenreLanguageFilter.tsx b/src/components/GenreLanguageFilter.tsx
index bb533f70..eb4fac0b 100644
--- a/src/components/GenreLanguageFilter.tsx
+++ b/src/components/GenreLanguageFilter.tsx
@@ -1,45 +1,50 @@
 "use client";
 
 import { GENRES, LANGUAGES } from "../../lib/genres";
+import { DropdownSelect } from "./DropdownSelect";
+
+const genreOptions = [
+  { value: "all", label: "All genres" },
+  ...GENRES.map((g) => ({ value: g, label: g })),
+];
+
+const languageOptions = [
+  { value: "all", label: "All languages" },
+  ...LANGUAGES.map((l) => ({ value: l, label: l })),
+];
 
 export function GenreFilter({ active, tab, writer, lang }: { active: string; tab: string; writer: string; lang: string }) {
   return (
-    <select
-      defaultValue={active}
-      onChange={(e) => {
+    <DropdownSelect
+      value={active}
+      onChange={(value) => {
         const params = new URLSearchParams({ tab });
         if (writer !== "all") params.set("writer", writer);
-        if (e.target.value !== "all") params.set("genre", e.target.value);
+        if (value !== "all") params.set("genre", value);
         if (lang !== "all") params.set("lang", lang);
         window.location.href = `/?${params.toString()}`;
       }}
-      className="border-border bg-surface text-muted rounded border px-2 py-1 text-xs"
-    >
-      <option value="all">All genres</option>
-      {GENRES.map((g) => (
-        <option key={g} value={g}>{g}</option>
-      ))}
-    </select>
+      options={genreOptions}
+      size="sm"
+      className="w-32"
+    />
   );
 }
 
 export function LanguageFilter({ active, tab, writer, genre }: { active: string; tab: string; writer: string; genre: string }) {
   return (
-    <select
-      defaultValue={active}
-      onChange={(e) => {
+    <DropdownSelect
+      value={active}
+      onChange={(value) => {
         const params = new URLSearchParams({ tab });
         if (writer !== "all") params.set("writer", writer);
         if (genre !== "all") params.set("genre", genre);
-        if (e.target.value !== "all") params.set("lang", e.target.value);
+        if (value !== "all") params.set("lang", value);
         window.location.href = `/?${params.toString()}`;
       }}
-      className="border-border bg-surface text-muted rounded border px-2 py-1 text-xs"
-    >
-      <option value="all">All languages</option>
-      {LANGUAGES.map((l) => (
-        <option key={l} value={l}>{l}</option>
-      ))}
-    </select>
+      options={languageOptions}
+      size="sm"
+      className="w-36"
+    />
   );
 }