bdf9cupe3: Add expert text search and category browse to the left column

src/app/api/experts/search/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import { browseCategory, searchExperts } from "@/lib/experts-search";
+
+// GET /api/experts/search?q=<text>  or  ?category=<name>
+// Same-origin proxy for Minnect's PUBLIC expert list. EXPERTS ONLY: it never
+// calls a user-search endpoint. Public fields only. No session needed.
+// Upstream failure -> 502 { error: "experts_unavailable" }.
+
+export const runtime = "nodejs";
+
+export async function GET(req: Request) {
+  const url = new URL(req.url);
+  const q = (url.searchParams.get("q") ?? "").trim().slice(0, 80);
+  const category = (url.searchParams.get("category") ?? "").trim().slice(0, 80);
+  if (!q && !category) return NextResponse.json({ experts: [] });
+  const result = q ? await searchExperts(q) : await browseCategory(category);
+  if (!result.ok) {
+    return NextResponse.json({ error: result.error }, { status: result.status });
+  }
+  return NextResponse.json({ experts: result.experts });
+}

src/app/globals.css

@@ -83,7 +83,7 @@ button:disabled { opacity: .5; cursor: not-allowed; }
 /* 3-column signed-in layout: nav | feed | rails. Wraps on narrow widths. */
 .columns { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
 .col-left { flex: 0 0 180px; position: sticky; top: 72px; padding-top: 16px; }
-.col-left ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.col-left > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
 .col-left a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
 .col-left a[aria-current="page"] { background: var(--ink); color: #fff; }
 .col-center { flex: 1 1 400px; min-width: 0; }
@@ -105,9 +105,23 @@ button:disabled { opacity: .5; cursor: not-allowed; }
 .minnect-audio { width: 100%; height: 36px; }
 @media (max-width: 959px) {
   .col-left { flex: 1 1 100%; position: static; padding-top: 8px; }
-  .col-left ul { flex-direction: row; }
+  .col-left > ul { flex-direction: row; }
   .col-center { flex: 1 1 100%; order: 3; }
   .col-right { flex: 1 1 100%; order: 2; position: static; max-height: none; overflow: visible; padding-top: 0; }
   .col-right .rail-list { flex-direction: row; overflow-x: auto; padding-bottom: 8px; }
   .col-right .rail-card { flex: 0 0 260px; }
 }
+
+/* Expert search + category chips (left column). Squared corners, monochrome + red. */
+.expert-search { margin-top: 16px; }
+.expert-search summary { font-weight: 700; font-size: 16px; cursor: pointer; padding: 4px 0; }
+.expert-search form { display: flex; flex-direction: column; }
+.expert-search input { border-radius: 0; width: 100%; }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
+.chip { margin: 0; padding: 6px 10px; border-radius: 0; background: #fff; color: var(--ink); border: 1px solid var(--ink); font-size: 13px; }
+.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
+.search-results { margin-top: 12px; }
+.search-note { margin: 0; font-size: 14px; color: var(--grey); }
+@media (max-width: 959px) {
+  .col-left .expert-search { flex-basis: 100%; }
+}

src/components/App.tsx

@@ -7,6 +7,7 @@ import { SignInForm } from "./SignInForm";
 import { Logo } from "./Logo";
 import { Feed } from "./Feed";
 import { DiscoverRails } from "./DiscoverRails";
+import { ExpertSearch } from "./ExpertSearch";
 
 type State = { kind: "loading" } | { kind: "out" } | { kind: "in"; person: Person };
 
@@ -53,6 +54,7 @@ export function App() {
           <ul>
             <li><Link href="/" aria-current="page">Feed</Link></li>
           </ul>
+          <ExpertSearch />
         </nav>
         <div className="col-center">
           <Feed feedUserId={state.person.feedUserId} onSignedOut={() => setState({ kind: "out" })} />

src/components/ExpertSearch.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { DiscoverCategory } from "@/lib/discover";
+import { fetchDiscover } from "@/lib/discover-client";
+import type { ExpertResult } from "@/lib/experts-search";
+import { fetchExperts } from "@/lib/experts-search-client";
+import { initials } from "@/lib/feed-model";
+
+export type SearchStatus = "idle" | "loading" | "ready" | "error";
+
+export interface ExpertSearchViewProps {
+  query: string;
+  onQuery: (q: string) => void;
+  categories: DiscoverCategory[];
+  activeCategory: string | null;
+  onCategory: (name: string | null) => void;
+  status: SearchStatus;
+  results: ExpertResult[];
+  defaultOpen?: boolean;
+}
+
+export function ExpertSearchView(p: ExpertSearchViewProps) {
+  return (
+    <details className="expert-search" open={p.defaultOpen}>
+      <summary>Find experts</summary>
+      <form role="search" onSubmit={(e) => e.preventDefault()}>
+        <label htmlFor="expert-q">Search experts</label>
+        <input
+          id="expert-q"
+          type="search"
+          value={p.query}
+          placeholder="Name or topic"
+          autoComplete="off"
+          maxLength={80}
+          onChange={(e) => p.onQuery(e.target.value)}
+        />
+      </form>
+      {p.categories.length > 0 ? (
+        <div role="group" aria-label="Browse experts by category" className="chips">
+          {p.categories.map((c) => (
+            <button
+              key={String(c.id)}
+              type="button"
+              className="chip"
+              aria-pressed={p.activeCategory === c.name}
+              onClick={() => p.onCategory(p.activeCategory === c.name ? null : c.name)}
+            >
+              {c.name}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      <div aria-live="polite" className="search-results">
+        {p.status === "loading" ? <p className="search-note">Searching...</p> : null}
+        {p.status === "error" ? <p className="search-note" role="alert">Search is unavailable. Try again.</p> : null}
+        {p.status === "ready" && p.results.length === 0 ? (
+          <p className="search-note">No experts found.</p>
+        ) : null}
+        {p.status === "ready" && p.results.length > 0 ? (
+          <ul className="rail-list">
+            {p.results.map((e) => (
+              <li key={String(e.id)} className="rail-card expert-card" data-testid="search-result">
+                {e.pictureUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img className="avatar" src={e.pictureUrl} alt="" width={40} height={40} />
+                ) : (
+                  <span className="avatar avatar-initials" aria-hidden="true">{initials(e.displayName)}</span>
+                )}
+                <div className="rail-text">
+                  <strong className="rail-name">{e.displayName || "Expert"}</strong>
+                  {e.byline ? <span className="rail-byline">{e.byline}</span> : null}
+                  {e.rating !== null ? <span className="rail-meta">★ {e.rating.toFixed(1)}</span> : null}
+                </div>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </details>
+  );
+}
+
+const DEBOUNCE_MS = 300;
+
+export function ExpertSearch() {
+  const [query, setQuery] = useState("");
+  const [category, setCategory] = useState<string | null>(null);
+  const [categories, setCategories] = useState<DiscoverCategory[]>([]);
+  const [status, setStatus] = useState<SearchStatus>("idle");
+  const [results, setResults] = useState<ExpertResult[]>([]);
+  const [open, setOpen] = useState(true);
+  const seq = useRef(0);
+
+  useEffect(() => {
+    setOpen(window.matchMedia("(min-width: 960px)").matches);
+    let live = true;
+    fetchDiscover().then(
+      (d) => { if (live) setCategories(d.categories); },
+      () => {},
+    );
+    return () => { live = false; };
+  }, []);
+
+  useEffect(() => {
+    const q = query.trim();
+    const mine = ++seq.current;
+    if (!q && !category) {
+      setStatus("idle");
+      setResults([]);
+      return;
+    }
+    setStatus("loading");
+    const t = setTimeout(() => {
+      fetchExperts(q ? { q } : { category: category ?? undefined }).then(
+        (r) => { if (seq.current === mine) { setResults(r); setStatus("ready"); } },
+        () => { if (seq.current === mine) { setResults([]); setStatus("error"); } },
+      );
+    }, q ? DEBOUNCE_MS : 0);
+    return () => clearTimeout(t);
+  }, [query, category]);
+
+  return (
+    <ExpertSearchView
+      key={open ? "open" : "closed"}
+      defaultOpen={open}
+      query={query}
+      onQuery={setQuery}
+      categories={categories}
+      activeCategory={category}
+      onCategory={setCategory}
+      status={status}
+      results={results}
+    />
+  );
+}

src/lib/experts-search-client.ts

@@ -0,0 +1,30 @@
+// Browser-side reader for the same-origin GET /api/experts/search route.
+import type { ExpertResult } from "./experts-search";
+
+export class ExpertSearchError extends Error {
+  constructor() {
+    super("experts_unavailable");
+  }
+}
+
+export async function fetchExperts(
+  query: { q?: string; category?: string },
+  fetchImpl: typeof fetch = fetch,
+): Promise<ExpertResult[]> {
+  const params = new URLSearchParams();
+  if (query.q) params.set("q", query.q);
+  else if (query.category) params.set("category", query.category);
+  let res: Response;
+  try {
+    res = await fetchImpl(`/api/experts/search?${params}`, { credentials: "same-origin" });
+  } catch {
+    throw new ExpertSearchError();
+  }
+  if (!res.ok) throw new ExpertSearchError();
+  try {
+    const body = (await res.json()) as Record<string, unknown>;
+    return Array.isArray(body.experts) ? (body.experts as ExpertResult[]) : [];
+  } catch {
+    throw new ExpertSearchError();
+  }
+}

src/lib/experts-search.ts

@@ -0,0 +1,144 @@
+import { DISCOVER_BASE_URL } from "./env";
+
+// Expert-only search and category browse over Minnect's PUBLIC expert list
+// (GET /api/v3/experts). Never touches /api/v4/users or any user search.
+//
+// Upstream findings (probed 2026-10-19, unauthenticated):
+// - /api/v1/individual/experts/search?query= ignores `query` (returns all
+//   experts) and its payload carries KYC/payment/rate fields. NOT used.
+// - /api/v3/experts?search=<text>&limit=N filters by name/byline and returns a
+//   lean public payload (id, names, slug, byline, picture, categories). Used.
+// - /api/v3/experts has no category filter and ignores `page`. Category browse
+//   therefore filters the first CATEGORY_POOL experts of the public list by
+//   category name (documented limitation, cached in memory for a few minutes).
+
+export interface ExpertCategory {
+  id: string | number;
+  name: string;
+}
+
+export interface ExpertResult {
+  id: string | number;
+  slug: string | null;
+  displayName: string;
+  pictureUrl: string | null;
+  byline: string | null;
+  rating: number | null;
+  categories: ExpertCategory[];
+}
+
+export type ExpertSearchResult =
+  | { ok: true; experts: ExpertResult[] }
+  | { ok: false; status: 502; error: "experts_unavailable" };
+
+export const SEARCH_LIMIT = 20;
+export const CATEGORY_POOL = 300;
+const CACHE_MS = 5 * 60 * 1000;
+
+type Rec = Record<string, unknown>;
+const rec = (v: unknown): Rec =>
+  v && typeof v === "object" && !Array.isArray(v) ? (v as Rec) : {};
+const str = (v: unknown): string | null =>
+  typeof v === "string" && v.trim() ? v : null;
+const num = (v: unknown): number | null =>
+  typeof v === "number" && Number.isFinite(v) ? v : null;
+const id = (v: unknown): string | number | null =>
+  typeof v === "string" && v ? v : typeof v === "number" ? v : null;
+
+/** Explicit allow-list: nothing outside these fields can reach the browser. */
+export function mapExpertResult(raw: unknown): ExpertResult | null {
+  const r = rec(raw);
+  const eid = id(r.id);
+  if (eid === null) return null;
+  const categories: ExpertCategory[] = [];
+  if (Array.isArray(r.categories)) {
+    for (const c of r.categories) {
+      const cr = rec(c);
+      const cid = id(cr.id);
+      const name = str(cr.name)?.trim();
+      if (cid !== null && name) categories.push({ id: cid, name });
+    }
+  }
+  return {
+    id: eid,
+    slug: str(r.slug),
+    displayName: [str(r.first_name), str(r.last_name)].filter(Boolean).join(" "),
+    pictureUrl: str(r.url_picture),
+    byline: str(r.byline),
+    rating: num(r.rating),
+    categories,
+  };
+}
+
+export function mapExpertList(body: unknown): ExpertResult[] {
+  const data = rec(body).data;
+  if (!Array.isArray(data)) return [];
+  const out: ExpertResult[] = [];
+  for (const e of data) {
+    const m = mapExpertResult(e);
+    if (m) out.push(m);
+  }
+  return out;
+}
+
+const UNAVAILABLE: ExpertSearchResult = {
+  ok: false,
+  status: 502,
+  error: "experts_unavailable",
+};
+
+async function fetchList(
+  params: Record<string, string>,
+  fetchImpl: typeof fetch,
+): Promise<ExpertResult[] | null> {
+  try {
+    const qs = new URLSearchParams(params).toString();
+    const res = await fetchImpl(`${DISCOVER_BASE_URL}/api/v3/experts?${qs}`, {
+      headers: { Accept: "application/json" },
+      cache: "no-store",
+    });
+    if (!res.ok) return null;
+    return mapExpertList(await res.json());
+  } catch {
+    return null;
+  }
+}
+
+/** Free-text expert search by name/byline. Never throws. */
+export async function searchExperts(
+  q: string,
+  fetchImpl: typeof fetch = fetch,
+): Promise<ExpertSearchResult> {
+  const list = await fetchList(
+    { search: q, limit: String(SEARCH_LIMIT), page: "1" },
+    fetchImpl,
+  );
+  return list ? { ok: true, experts: list.slice(0, SEARCH_LIMIT) } : UNAVAILABLE;
+}
+
+let pool: { at: number; experts: ExpertResult[] } | null = null;
+
+/** Test hook: forget the cached pool. */
+export function resetCategoryPool(): void {
+  pool = null;
+}
+
+const norm = (s: string) => s.trim().toLowerCase();
+
+/** Experts (from the first CATEGORY_POOL of the public list) in a category, by name. */
+export async function browseCategory(
+  category: string,
+  fetchImpl: typeof fetch = fetch,
+  now: number = Date.now(),
+): Promise<ExpertSearchResult> {
+  if (!pool || now - pool.at > CACHE_MS) {
+    const list = await fetchList({ limit: String(CATEGORY_POOL), page: "1" }, fetchImpl);
+    if (!list) return UNAVAILABLE;
+    pool = { at: now, experts: list };
+  }
+  const want = norm(category);
+  const experts = pool.experts
+    .filter((e) => e.categories.some((c) => norm(c.name) === want))
+    .slice(0, SEARCH_LIMIT);
+  return { ok: true, experts };
+}