8iz120vqu: Restyle the Trending minnects and Find experts panels

src/app/globals.css

@@ -114,7 +114,8 @@
   .btn-sweep::before,
   .account-dot,
   .featured-cf::before,
-  .featured-cap { animation: none !important; }
+  .featured-cap,
+  .minnect-card { animation: none !important; }
   .featured-item,
   .featured-ring,
   .featured-dot { transition: none !important; }

src/app/layout.tsx

@@ -12,6 +12,8 @@ import "../styles/post.css";
 import "../styles/composer.css";
 import "../styles/featured.css";
 import "../styles/feed.css";
+import "../styles/trending.css";
+import "../styles/search.css";
 import "../styles/legacy.css";
 
 const manrope = Manrope({

src/components/ExpertSearch.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SweepButton } from "@/components/Buttons";
 import { HexAvatar } from "@/components/HexAvatar";
 import { useEffect, useRef, useState } from "react";
 import type { DiscoverCategory } from "@/lib/discover";
@@ -27,28 +28,30 @@ export function ExpertSearchView(p: ExpertSearchViewProps) {
       </div>
       <form role="search" className="search-form" onSubmit={(e) => e.preventDefault()}>
         <label htmlFor="expert-q">Search experts</label>
-        <input
+        <div className="search-field">
-          id="expert-q"
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
-          type="search"
+            <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />
-          value={p.query}
+          </svg>
-          placeholder="Name or topic"
+          <input
-          autoComplete="off"
+            id="expert-q"
-          maxLength={80}
+            type="search"
-          onChange={(e) => p.onQuery(e.target.value)}
+            value={p.query}
-        />
+            placeholder="Name or topic"
+            autoComplete="off"
+            maxLength={80}
+            onChange={(e) => p.onQuery(e.target.value)}
+          />
+        </div>
       </form>
       {p.categories.length > 0 ? (
         <div role="group" aria-label="Browse experts by category" className="chips">
           {p.categories.map((c) => (
-            <button
+            <SweepButton
               key={String(c.id)}
-              type="button"
+              label={c.name}
-              className="chip"
+              selected={p.activeCategory === c.name}
-              aria-pressed={p.activeCategory === c.name}
               onClick={() => p.onCategory(p.activeCategory === c.name ? null : c.name)}
-            >
+            />
-              {c.name}
-            </button>
           ))}
         </div>
       ) : null}
@@ -59,15 +62,20 @@ export function ExpertSearchView(p: ExpertSearchViewProps) {
           <p className="search-note">No experts found.</p>
         ) : null}
         {p.status === "ready" && p.results.length > 0 ? (
-          <ul className="rail-list">
+          <ul className="rail-list search-rows">
             {p.results.map((e) => (
-              <li key={String(e.id)} className="rail-card expert-card" data-testid="search-result">
+              <li key={String(e.id)} className="expert-row" data-testid="search-result">
                 <HexAvatar name={e.displayName} pictureUrl={e.pictureUrl} size="md" />
-                <div className="rail-text">
+                <div className="expert-text">
-                  <strong className="rail-name">{e.displayName || "Expert"}</strong>
+                  <strong>{e.displayName || "Expert"}</strong>
-                  {e.byline ? <span className="rail-byline">{e.byline}</span> : null}
+                  {e.byline ? <span>{e.byline}</span> : null}
-                  {e.rating !== null ? <span className="rail-meta">★ {e.rating.toFixed(1)}</span> : null}
                 </div>
+                {e.rating !== null ? (
+                  <span className="expert-rate" aria-label={`Rating ${e.rating.toFixed(1)}`}>
+                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.6l-5.8 3.1 1.1-6.5L2.6 9.6l6.5-.9L12 2.8Z" /></svg>
+                    {e.rating.toFixed(1)}
+                  </span>
+                ) : null}
               </li>
             ))}
           </ul>

src/components/MinnectMedia.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { HexAvatar } from "@/components/HexAvatar";
 import type { DiscoverMedia } from "@/lib/discover";
 
 interface Props {
@@ -8,36 +9,75 @@ interface Props {
   thumbnailUrl: string | null;
   question: string | null;
   who: string;
+  pictureUrl?: string | null;
+  views?: number | null;
 }
 
-/** Video answers play inline; audio keeps the audio control; no url shows the thumbnail only. */
+/**
-export function MinnectMedia({ media, thumbnailUrl, question, who }: Props) {
+ * The trending card's 16:9 frame. Video answers play inline as a <video> with a
+ * poster; audio keeps its <audio> control under the frame; no url shows the
+ * thumbnail only. The glass chip, play button, views and kind label sit over
+ * the thumbnail and step aside while a video plays.
+ */
+export function MinnectMedia({ media, thumbnailUrl, question, who, pictureUrl, views = null }: Props) {
   const [videoFailed, setVideoFailed] = useState(false);
+  const [playing, setPlaying] = useState(false);
+  const video = useRef<HTMLVideoElement | null>(null);
+  const audio = useRef<HTMLAudioElement | null>(null);
 
-  const thumb = thumbnailUrl ? (
+  const isVideo = media?.kind === "video" && !videoFailed;
-    // eslint-disable-next-line @next/next/no-img-element
+  const isAudio = media?.kind === "audio";
-    <img className="minnect-thumb" src={thumbnailUrl} alt={question ? `Thumbnail for: ${question}` : "Minnect thumbnail"} />
+  const playable = isVideo || isAudio;
-  ) : null;
+
+  const play = () => {
+    const el = isVideo ? video.current : audio.current;
+    void el?.play().catch(() => {});
+  };
 
-  if (media?.kind === "video" && !videoFailed) {
-    return (
-      <video
-        className="minnect-thumb minnect-video"
-        controls
-        playsInline
-        preload="none"
-        src={media.url}
-        poster={thumbnailUrl ?? undefined}
-        aria-label={`Play answer from ${who}`}
-        onError={() => setVideoFailed(true)}
-      />
-    );
-  }
   return (
     <>
-      {thumb}
+      <div className={`trend-media${playing ? " trend-media-playing" : ""}`}>
-      {media?.kind === "audio" ? (
+        {isVideo ? (
-        <audio className="minnect-audio" controls preload="none" src={media.url} aria-label={`Play answer from ${who}`} />
+          <video
+            ref={video}
+            className="minnect-thumb minnect-video"
+            controls
+            playsInline
+            preload="none"
+            src={media.url}
+            poster={thumbnailUrl ?? undefined}
+            aria-label={`Play answer from ${who}`}
+            onPlay={() => setPlaying(true)}
+            onPause={() => setPlaying(false)}
+            onEnded={() => setPlaying(false)}
+            onError={() => setVideoFailed(true)}
+          />
+        ) : thumbnailUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img className="minnect-thumb" src={thumbnailUrl} alt={question ? `Thumbnail for: ${question}` : "Minnect thumbnail"} />
+        ) : null}
+        <span className="trend-scrim" aria-hidden="true" />
+        <span className="trend-who">
+          <HexAvatar name={who} pictureUrl={pictureUrl} size="sm" />
+          <strong>{who}</strong>
+        </span>
+        {playable ? (
+          <button type="button" className="trend-play" aria-label={`Play answer from ${who}`} onClick={play}>
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" /></svg>
+          </button>
+        ) : null}
+        {views !== null ? (
+          <span className="trend-views">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" />
+            </svg>
+            {views.toLocaleString("en-US")} {views === 1 ? "view" : "views"}
+          </span>
+        ) : null}
+        {playable ? <span className="trend-kind">{isVideo ? "Video" : "Audio"}</span> : null}
+      </div>
+      {isAudio ? (
+        <audio ref={audio} className="minnect-audio" controls preload="none" src={media.url} aria-label={`Play answer from ${who}`} />
       ) : null}
     </>
   );

src/components/TrendingMinnectsRail.tsx

@@ -1,4 +1,3 @@
-import { HexAvatar } from "@/components/HexAvatar";
 import type { DiscoverMinnect } from "@/lib/discover";
 import { MinnectMedia } from "./MinnectMedia";
 
@@ -9,20 +8,20 @@ export function TrendingMinnectsRail({ minnects }: { minnects: DiscoverMinnect[]
       <div className="panel-head">
         <h2 id="rail-trending" className="type-title type-title-strong">Trending minnects</h2>
       </div>
-      <ul className="rail-list panel-scroll fade-edges">
+      <ul className="rail-list trend-list panel-scroll fade-edges">
         {minnects.map((m) => {
           const who = m.expert.displayName || "Expert";
           return (
-            <li key={String(m.id)} className="rail-card minnect-card" data-testid="minnect-card">
+            <li key={String(m.id)} className="minnect-card" data-testid="minnect-card">
-              <div className="minnect-who">
+              <MinnectMedia
-                <HexAvatar name={who} pictureUrl={m.expert.pictureUrl} size="sm" />
+                media={m.media}
-                <strong className="rail-name">{who}</strong>
+                thumbnailUrl={m.thumbnailUrl}
-              </div>
+                question={m.question}
-              <MinnectMedia media={m.media} thumbnailUrl={m.thumbnailUrl} question={m.question} who={who} />
+                who={who}
-              {m.question ? <p className="minnect-question">{m.question}</p> : null}
+                pictureUrl={m.expert.pictureUrl}
-              {m.views !== null ? (
+                views={m.views}
-                <span className="rail-meta">{m.views.toLocaleString("en-US")} {m.views === 1 ? "view" : "views"}</span>
+              />
-              ) : null}
+              {m.question ? <p className="trend-q">{m.question}</p> : null}
             </li>
           );
         })}

src/dev/fixtures.ts

@@ -164,7 +164,7 @@ const minnect = (id: string, who: DiscoverExpert, question: string, views: numbe
   question,
   views,
   thumbnailUrl: placeholderImage(hue),
-  media: null,
+  media: id === "m2" ? { kind: "video", url: "/fixtures/answer.mp4", duration: 42, waveform: null } : id === "m1" || id === "m4" ? { kind: "audio", url: "/fixtures/answer.mp3", duration: 31, waveform: null } : null,
   expert: { slug: who.slug, displayName: who.displayName, pictureUrl: null, byline: who.byline, rating: who.rating },
 });
 

src/styles/legacy.css

@@ -12,22 +12,4 @@ button { font: inherit; font-weight: 500; margin-top: 16px; padding: 12px; borde
 
 
 
-.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
-.rail-card { background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; gap: 10px; }
-.expert-card { align-items: center; }
-.minnect-card { flex-direction: column; }
-.rail-text { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
-.rail-name { font-size: 14px; }
-.rail-byline { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.rail-meta { color: var(--ink-3); font-size: 13px; }
-.minnect-who { display: flex; align-items: center; gap: 8px; }
-.minnect-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--line); }
-.minnect-question { margin: 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-.minnect-video { background: black; border-radius: 0; }
-.minnect-audio { width: 100%; height: 36px; }
 
-/* Category chips (Find experts panel). Squared corners, monochrome + red. */
-.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
-.chip { margin: 0; padding: 6px 10px; border-radius: 0; background: transparent; color: var(--ink); border: 1px solid var(--ink); font-size: 13px; }
-.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: white; }
-.search-note { margin: 0; font-size: 14px; color: var(--ink-3); }

src/styles/search.css

@@ -0,0 +1,74 @@
+/* Find experts panel (ADR 0001, section 6; spec "Find experts"). Ported from
+   the mockup's .field, .chips, .rows and .rate rules; tokens only. The
+   category chips are SweepButton (buttons.css). */
+
+.search-form label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.search-field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 44px;
+  padding: 0 14px;
+  border-radius: 12px;
+  background: var(--tile-2);
+  color: var(--ink-3);
+  box-shadow: inset 0 0 0 1px var(--line);
+  transition: box-shadow .25s, background-color .25s;
+}
+.search-field svg { width: 18px; height: 18px; flex: none; }
+.search-field:focus-within {
+  background: var(--tile);
+  box-shadow: inset 0 0 0 1px var(--ink-3), 0 0 0 4px var(--line);
+}
+.search-field input,
+.search-field input:focus-visible {
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  color: var(--ink);
+}
+.search-field input::placeholder { color: var(--ink-3); }
+
+.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
+
+.search-note { margin: 0; font-size: 14px; color: var(--ink-3); }
+.search-rows { gap: 2px; }
+.expert-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 10px;
+  border-radius: 14px;
+  transition: background-color .2s;
+}
+.expert-row:hover { background: var(--tile-2); }
+.expert-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
+.expert-text strong { font-size: 13.5px; color: var(--ink); }
+.expert-text span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.expert-rate {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+.expert-rate svg { width: 13px; height: 13px; color: var(--accent); }

src/styles/trending.css

@@ -0,0 +1,131 @@
+/* Trending minnects panel (ADR 0001, section 6; spec "Trending minnects").
+   Ported from the mockup's .tr rules; tokens only. The white inside the media
+   frame is text and glass over the photo, which is dark in both themes. */
+
+.trend-list { gap: 16px; }
+.minnect-card { display: flex; flex-direction: column; gap: 9px; animation: trend-rise .55s var(--ease) both; }
+@keyframes trend-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
+
+.trend-media {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border-radius: 12px;
+  overflow: hidden;
+  isolation: isolate;
+  background: var(--tile-3);
+  box-shadow: inset 0 0 0 1px var(--line);
+}
+.trend-media .minnect-thumb {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 1s var(--ease);
+}
+.minnect-card:hover .trend-media:not(.trend-media-playing) .minnect-thumb { transform: scale(1.035); }
+.minnect-video { background: black; }
+
+.trend-scrim {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 62%;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(180deg, transparent, color-mix(in srgb, black 62%, transparent));
+}
+.trend-who {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  z-index: 2;
+  max-width: calc(100% - 20px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 10px 3px 4px;
+  border-radius: 12px;
+  font-size: 12px;
+  color: var(--on-accent);
+  background: color-mix(in srgb, black 34%, transparent);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  pointer-events: none;
+}
+.trend-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
+.trend-play {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  z-index: 2;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  color: var(--on-accent);
+  background: color-mix(in srgb, var(--on-accent) calc(100% - 84%), transparent);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) calc(100% - 60%), transparent), 0 12px 30px color-mix(in srgb, black 28%, transparent);
+  transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), background-color .3s;
+}
+.trend-play svg { width: 18px; height: 18px; margin-left: 2px; }
+.trend-play:hover { transform: scale(1.1); background: color-mix(in srgb, var(--on-accent) calc(100% - 72%), transparent); }
+.trend-play:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
+.trend-views {
+  position: absolute;
+  left: 12px;
+  bottom: 10px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--on-accent);
+  pointer-events: none;
+}
+.trend-views svg { width: 15px; height: 15px; }
+.trend-kind {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  z-index: 2;
+  font-size: 10.5px;
+  font-weight: 800;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--on-accent);
+  opacity: .85;
+  pointer-events: none;
+}
+/* While a video plays its own controls take over the frame. */
+.trend-media-playing .trend-scrim,
+.trend-media-playing .trend-who,
+.trend-media-playing .trend-play,
+.trend-media-playing .trend-views,
+.trend-media-playing .trend-kind { opacity: 0; visibility: hidden; }
+
+.trend-q {
+  margin: 0;
+  font-size: 13.5px;
+  line-height: 1.45;
+  font-weight: 600;
+  color: var(--ink);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.minnect-audio { width: 100%; height: 36px; }
+
+.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+/* A video keeps its native control bar, so the labels ride above it. */
+.trend-media:has(video) .trend-views,
+.trend-media:has(video) .trend-kind { bottom: 46px; }