rnxcmkidd: Add the viewport-fit bento shell and a dev feed preview with fixtures

src/components/ExpertSearch.tsx

@@ -17,14 +17,15 @@ export interface ExpertSearchViewProps {
   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()}>
+    <section className="tile panel expert-search" aria-labelledby="h-find">
+      <div className="panel-head">
+        <h2 id="h-find" className="type-title type-title-strong">Find experts</h2>
+      </div>
+      <form role="search" className="search-form" onSubmit={(e) => e.preventDefault()}>
         <label htmlFor="expert-q">Search experts</label>
         <input
           id="expert-q"
@@ -51,7 +52,7 @@ export function ExpertSearchView(p: ExpertSearchViewProps) {
           ))}
         </div>
       ) : null}
-      <div aria-live="polite" className="search-results">
+      <div aria-live="polite" className="search-results panel-scroll fade-edges">
         {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 ? (
@@ -72,7 +73,7 @@ export function ExpertSearchView(p: ExpertSearchViewProps) {
           </ul>
         ) : null}
       </div>
-    </details>
+    </section>
   );
 }
 
@@ -84,11 +85,9 @@ export function ExpertSearch() {
   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); },
@@ -117,8 +116,6 @@ export function ExpertSearch() {
 
   return (
     <ExpertSearchView
-      key={open ? "open" : "closed"}
-      defaultOpen={open}
       query={query}
       onQuery={setQuery}
       categories={categories}