Phase 39 · "Nabe Pulse" Row · founder picked B-Bubble + name 2026-05-26

Nabe Pulse — stories + check-ins + recs, one row

Founder picked "Nabe Pulse" — captures liveness (real-time neighborhood activity) + brand resonance (the Living Skyline logo's pulse dot). Replaces the old "Stories" label. Component rename: NeighborhoodStoriesRow.tsx → NabePulseRow.tsx.

Founder picked Variant B-Bubble. Still considering: side-by-side layout (Variant C-Split below). Pick one or hybrid → build TSX.

📍 Current

What's there now

Existing NeighborhoodStoriesRow.tsx — Instagram-style horizontal scroll. 7 stories visible, founder feels it's too many bubbles + adds nothing the feed doesn't.

+
Your Story
Maria G.
James K.
Devocion
Priya S.
Paulie G.
Alex K.
Camille
↓ then feed posts ↓
Founder's complaint: "We don't need all those stories bubbles." 8 visible tiles → mostly the same shape, hard to scan. No surfacing of live activity (check-ins, recs) — those bury in the feed as full-width cards instead.
Variant A

Uniform bubbles · type-tagged corner badge

Keep all tiles at the same 48px circle size. Add a small corner badge to distinguish type (pin icon = check-in, star = quick rec, default = story). Stories stay first; live activity follows. Trim to 5–6 tiles max.

+
Your Story
Maria G.
James K.
Paulie Gee's
Devocion
McCarren
W'burg Fit
↓ then feed posts ↓
Pros: Minimal layout change (still bubbles). Easy to scan. Corner badges teach the type quickly. Mixed content keeps visual interest.
Cons: Check-ins / recs read like "stories about a place" — venue context not strong. Small targets for older fingers. Author identity lost in non-story tiles.
Variant B · original

Mixed-width · 80×104 cards

First take — stories stay as 48px bubbles; check-ins / recs render as compact 80×104 mini-cards. Founder picked this variant but asked to make tiles similar size to the bubbles. See Variant B-Bubble and Variant B-Stack below for the refined options.

+
Your Story
Maria G.
James K.
Live
Paulie Gee's
James K. is there
Rec
Devocion
"Cortado is the move"
Priya S.
Live
McCarren
Priya is running
↓ then feed posts ↓
Pros: Venue is the unit — taps obviously go to business. "Live" / "Rec" type labels are unambiguous.
Cons: Cards are taller than bubbles → mixed heights look busy. Founder asked to make it bubble-sized.
Variant B-Bubble ⭐ refined

Same 48px bubble · venue is the label · corner type badge

Refined Variant B per founder direction: tiles are the same dimensions as story bubbles (48px circle + ~14px label = ~62px tall total). The circle gets a corner badge (pin = live check-in, star = quick rec) and the label below is the venue name, not the person. Author identity stays in the tap target (open the tile → see the full post + author).

+
Your Story
Maria G.
James K.
PG
Paulie Gee's
DV
Devocion
Priya S.
MC
McCarren
WF
W'burg Fit
↓ then feed posts ↓
How to read the tile:
  • Story — brand-gradient ring, person's name. Same as today.
  • Live check-in — emerald-cyan ring, pin badge corner, venue name as label, venue initials inside the circle.
  • Quick rec — amber-orange ring, star badge corner, venue name as label, venue initials inside.

Ring color = type (gradient/emerald/amber) so it's distinct even before reading the badge. Tap a tile → opens the venue drawer (with the post + author surfaced inside). Tap-and-hold could preview the author chip; that's a Phase 41 polish.

Pros: Same vertical height as stories — no layout disruption. Three-color ring system reads at a glance. Venue is the unit, taps go to business drawer naturally. Trim to 5-7 tiles total works visually.
Cons: Author identity not visible until tap. Venue initials (PG, DV, MC) feel slightly abstract — could use business avatar instead. Three ring colors might be confusing without legend.
Variant B-Stack · alt

Same width · slightly taller · venue + author both visible

Alternative if losing author identity in B-Bubble feels wrong: tile width matches a bubble (48px) but height grows by ~24px to fit a two-line label (venue + "by Maria"). Slightly taller total but information density higher.

+
Your Story
Maria G.
Paulie Gee's
by James K.
Devocion
Maria G.
Priya S.
McCarren
by Priya S.
↓ then feed posts ↓
Pros: Author identity stays visible. Same width as bubbles — horizontal scroll behaves the same. Bubble row is slightly taller (~24px) but only where check-in/rec tiles appear, so it stays balanced.
Cons: Mixed heights inside the row (stories sit a few pixels above check-ins' avatar because of the longer label below). Could feel slightly off-grid. Test on iPad first.
Variant C

Two stacked rows · stories above, live activity below

Keep stories as their own row (smaller, 3–4 bubbles max). Below it, a second row labeled "Right now in your block" mixes check-ins + quick recs as compact pill-cards. Each row has its own purpose; founder still gets density without mixing the metaphors.

+
You
Maria G.
James K.
Priya S.
Alex K.
Right now in W'burg
↓ then feed posts ↓
Pros: Stories metaphor stays pure (Instagram-familiar). Live activity gets its own labeled home — readable scan with name + verb + venue. Soft warm-gradient background distinguishes it from the white stories row above.
Cons: Two horizontal-scrolling rows stacked — feels heavy at the top of the feed. More pixels consumed. If both rows are sparse, the section header reads empty.
Variant C-Split ⭐ NEW

Side-by-side · like briefing / calendar split bar

Founder direction 2026-05-26: instead of stacking the two rows, put them side-by-side like the briefing / calendar split bar below the header. Same vertical footprint as one row, but each side gets its own dedicated lane. Two sub-options below — pick one.

→ C-Split-Preview ⭐ FINAL · "Nabe Pulse" header + two unlabeled preview cards

Nabe Pulse

↓ then feed posts ↓
How it reads:
  • The pulsing dot + brand-gradient "Nabe Pulse" label tells you the whole section is live neighborhood activity
  • Left card — three overlapping story avatars + "+2 more sharing now" → photo updates from neighbors. Tap → full-screen story viewer (existing pattern).
  • Right card — venue avatar with pin badge + "James at Paulie Gee's" + secondary line → live check-ins & quick recs. Tap → drawer listing all current activity.
  • No sub-labels needed. The visual content distinguishes the two cards under one section header.

Component rename: NeighborhoodStoriesRow.tsx → NabePulseRow.tsx. "Stories" name retired everywhere.

→ C-Split-Scroll · each half has its own horizontal scroll
Stories
Maria
James
Priya
Alex
Nabe Pulse
Paulie G.
Devocion
McCarren
↓ then feed posts ↓

Each half scrolls independently. Stories scroll on the left, Nabe Pulse pills on the right. ~3-4 items visible per side. Tile pattern matches Variant B-Bubble (color-coded ring + corner badge + venue label).

Pros: Matches your briefing / calendar split pattern. Same vertical footprint as one row. Each lane has its own labeled identity ("Stories" / "Nabe Pulse"). Visual symmetry with the rest of the app's split-bar UI.
Cons: Narrower scroll widths — only 3-4 items visible per side. C-Split-Preview shows only one Pulse item at a time (relies on tap to drawer). C-Split-Scroll feels denser. Both lose the unified "scan one row to see what's happening" affordance of B-Bubble.
Claude's read: If the briefing / calendar split is the design language you want consistent across the top of the feed, C-Split-Preview is the right pick — two tappable cards, each opens a drawer. C-Split-Scroll feels like trying to cram too much into a narrow lane. B-Bubble (the unified row) is still the most-information-dense and the one I'd lean toward — but if "consistency with briefing/calendar split" is more important than density, go with C-Split-Preview.

⚖️ Quick decision matrix

Dimension A · Uniform B-Bubble ⭐ B-Stack C · Stacked C-Split-Preview C-Split-Scroll
Vertical space saved★★★★★★★★★★★★★★★★★★★★★★★★★
Pulse readable at glance★★★★★★★★★★★★★★★★★★★★
Venue cross-link native★★★★★★★★★★★★★★★★★★★★★★
Matches briefing/calendar split————★★★★★★★★★
Build complexitylowmediummediummediumlowmedium
Risk of cluttered top-of-feedlowlowlowhighlowmedium
Claude's recommendation: founder picked B-Bubble already. The question is whether to also apply the briefing/calendar split structure via C-Split-Preview. B-Bubble alone gives the highest information density; C-Split-Preview matches the app's existing split-bar design language but loses density. Final call is taste: design consistency vs. scan density.

🏗️ Architecture (whichever variant)