The AtmosphereConf talks your skyline missed
docs(plan): network attention display review round 1
- Simplify LumeCard: remove useState/onClick/tap-toggle entirely.
Mobile: detail always visible (CSS base). Desktop (sm+): hidden,
revealed on group-hover. Pure CSS, no JS state, no 'use client'.
- Fix confused responsive CSS: base classes now show the detail,
sm: classes hide it, sm:group-hover: reveals it.
- Remove the click/Link conflict (no onClick handler at all).
- Update spec §4.2 to match: flow-based expansion instead of
absolute positioning, explicit mobile/desktop behavior.
+14
-26
+11
-23
docs/superpowers/plans/2026-04-10-network-attention-display.md
+11
-23
docs/superpowers/plans/2026-04-10-network-attention-display.md
···
150
150
Replace the entire file with:
151
151
152
152
```tsx
153
-
"use client";
154
-
155
-
import { useState, type HTMLAttributes } from "react";
153
+
import { type HTMLAttributes } from "react";
156
154
import type { TalkScore } from "@/lib/scoring";
157
155
158
156
interface LumeCardProps extends HTMLAttributes<HTMLDivElement> {
···
202
200
...props
203
201
}: LumeCardProps) {
204
202
const isUnderstory = glowIntensity > 0.3;
205
-
const [tapped, setTapped] = useState(false);
206
203
const hasDetail = score && score.state !== "unknown";
207
204
208
205
return (
···
228
225
? ({ "--tile-index": tileIndex } as React.CSSProperties)
229
226
: undefined
230
227
}
231
-
onClick={() => {
232
-
if (hasDetail) setTapped((t) => !t);
233
-
}}
234
228
{...props}
235
229
>
236
230
{interestMatch && (
···
244
238
{hasDetail && (
245
239
<div
246
240
className={[
247
-
"px-5 pb-3 pt-0 transition-all duration-300",
248
-
// Desktop: show on hover via group-hover
249
-
"max-h-0 overflow-hidden opacity-0",
250
-
"group-hover:max-h-12 group-hover:opacity-100",
251
-
// Mobile: show on tap via state
252
-
tapped ? "max-h-12 opacity-100" : "",
253
-
// Always visible on small screens (no hover available)
254
-
"sm:max-h-0 sm:opacity-0 sm:group-hover:max-h-12 sm:group-hover:opacity-100",
255
-
]
256
-
.filter(Boolean)
257
-
.join(" ")}
241
+
"px-5 pb-3 pt-0",
242
+
// Mobile: always visible (no hover capability)
243
+
"max-h-12 opacity-100",
244
+
// Desktop (sm+): hidden by default, revealed on hover via group-hover
245
+
"sm:max-h-0 sm:overflow-hidden sm:opacity-0",
246
+
"sm:transition-all sm:duration-300",
247
+
"sm:group-hover:max-h-12 sm:group-hover:opacity-100",
248
+
].join(" ")}
258
249
>
259
250
<div className="border-t border-primary-fixed-dim/20 pt-2">
260
251
<ScoreDetail score={score} />
···
269
260
```
270
261
271
262
**Key changes from the original:**
272
-
- Added `"use client"` directive (needed for `useState` — the tap toggle for mobile)
273
263
- Added `score?: TalkScore | null` prop
274
264
- Added `ScoreDetail` component (renders "Your network missed this" or "X% of your network missed this")
275
-
- Added the detail strip at the bottom: hidden by default, shown on `group-hover` (desktop) or tap (mobile)
265
+
- Added detail strip: **always visible on mobile** (where there's no hover), **hidden → revealed on hover on desktop** (`sm:group-hover:`). No JavaScript state needed — pure CSS.
276
266
- Changed `transition-shadow` to `transition-all duration-500` for smoother glow transitions
277
267
- Added `group` class for group-hover targeting
278
268
- Border top opacity now varies with glow intensity for more visual gradient
279
-
- The `onClick` handler only sets tap state (for mobile detail toggle); the parent `Link` still handles navigation because the `Link` wraps the entire card
280
-
281
-
**Important interaction note:** The card is wrapped in a Next.js `Link` in the grid. The `onClick` on the card div fires before the `Link` navigation. On desktop, the detail shows on hover without clicking, so the click navigates. On mobile, the first tap shows the detail AND navigates (since the detail is just a visual overlay, not a blocking interaction). If the user wants to read the detail before navigating, they can long-press or use the back button. This is acceptable for V1.
269
+
- No `"use client"` needed — no `useState`, no event handlers. The component is rendered inside the client `ScoredTalksGrid` but doesn't need its own client boundary.
282
270
283
271
- [ ] **Step 3: Verify tsc and eslint are clean**
284
272
+3
-3
docs/superpowers/specs/2026-04-10-network-attention-display.md
+3
-3
docs/superpowers/specs/2026-04-10-network-attention-display.md
···
193
193
**Why no percentage for "missed":** The `missed` state means `uniqueFollows === 0`, so `attentionInverse` is always exactly `1.0` — the percentage would always read "100%". A static message is clearer and avoids pointless math. For `engaged` talks, the percentage IS meaningful: "83% of your network missed this" conveys the gradient between "almost nobody talked about it" and "most of your follows discussed it."
194
194
195
195
**Interaction:**
196
-
- Desktop: detail appears on `:hover` via CSS transition (opacity 0 → 1, translateY(4px) → 0). No JavaScript state needed.
197
-
- Mobile: detail is always visible when `score` is present (since there's no hover). This is acceptable because mobile cards are larger (single column) and the detail text is small.
196
+
- Desktop (`sm:` and above): detail is hidden by default, revealed on `:hover` via CSS transition (`max-height` + `opacity`). Uses Tailwind `group`/`group-hover:` — no JavaScript state needed.
197
+
- Mobile (below `sm:`): detail is always visible when `score` is present (since there's no hover). Acceptable because mobile cards are full-width and the detail text is small.
198
198
199
-
**Implementation note:** The detail strip is inside the card but below the existing content. It uses `absolute` positioning at the bottom, with a subtle gradient fade from transparent to `surface-container-low` so it doesn't clip the card content.
199
+
**Implementation note:** The detail strip uses flow-based expansion (`max-h-0`/`max-h-12` + `overflow-hidden`) rather than absolute positioning. This avoids layout complexity and works naturally with the card's existing padding. The `transition-all duration-300` on `sm:` breakpoint smoothly animates the reveal on desktop hover.
200
200
201
201
---
202
202