Evidence Wall — masonry feed of mixed culture (tweets, lyrics, reels, TikToks, YouTube) with type filters

[holden]

Summary

Build the "Evidence from the Culture" wall — the standout from the definition-page design (#66). It's a masonry/grid feed that meshes every media type together into one beautiful chaos: tweets, song lyrics, Instagram reels, TikToks, and YouTube videos all jostling in the same wall. It sits under the three tiers of definitions and stays put while the definitions argue — the culture talking back to the dictionary.

This is the feature that makes it a 21st-century encyclopedia instead of just a reprinted book. Splitting it into its own issue so the design + behavior don't get lost.

Mockup that nailed it (performative · adj), as ASCII (full-fidelity screenshot lives locally — can attach via the web UI):

🔥 Evidence from the Culture ──────── STAYS PUT WHILE THE DEFINITIONS ARGUE   [ ＋ Add ]

┌──────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│TIKTOK 0:31│ │🐦 TWEET       │ │🎵 SONG LYRIC  │ │ IG · CAROUSEL│
│ [video]   │ │"he reads      │ │"lived rent-   │ │  [image]     │
│           │ │ feminist      │ │ free since    │ │              │
│🎬 TIKTOK   │ │ theory to     │ │ 2019"         │ │📸 INSTAGRAM   │
│"Perf. Male│ │ text back     │ │ Clairo—"Bags" │ │"wired phones │
│ Contest"  │ │ slower"       │ │ @itgirl ▲201  │ │ + Sally R."  │
│@dtboys     │ │@theorygf ❤15k │ └──────────────┘ │@beigecat ▲640│
│   ▲ 3.4M  │ └──────────────┘ ┌──────────────┐ ├──────────────┤
└──────────┘ ┌──────────────┐ │ (lyric card   │ │  ┌ ＋ ──────┐ │
              │YOUTUBE 9:48   │ │  is tall)     │ │  │Caught one│ │
              │ [thumb]       │ └──────────────┘ │  │in the    │ │
              │📺 "How to spot │                   │  │wild?     │ │
              │ a perf. male" │                   │  │paste link│ │
              │ ▲ 920k        │                   │  └──────────┘ │
              └──────────────┘                   └──────────────┘

---

Why it's good (keep these qualities)

• One chaotic amalgamation by default. Mixed media, mixed heights, masonry — the variety is the point. A tweet next to a TikTok next to a lyric card.
• Card type telegraphs itself via a labeled pill (🎬 TIKTOK / 🐦 TWEET / 🎵 SONG LYRIC / 📺 YOUTUBE / 📸 INSTAGRAM), with duration on video cards (TIKTOK · 0:31).
• Native metric per source shown faithfully — ❤ 15k for a tweet, ▲ 3.4M likes for a TikTok, ▲ 201 agree-votes for a lyric, ▲ 920k views for YouTube.
• "Stays put while the definitions argue" — the wall is the stable ground; the tiered definitions above are the noise.
• Inviting empty/add card — dashed "Caught one in the wild? paste a link →" living inline with the real cards.

---

Core behavior: amalgamate by default, filter on demand

"By default it's all of them amalgamated together. People could also categorize them so people could see only specific ones."

• Default = ALL. Everything meshed, no type grouping.
• Filter chips above the wall to narrow to one (or a few) types:

[ All ]  [ 🎬 TikTok ]  [ 📺 YouTube ]  [ 🎵 Lyrics ]  [ 📸 Instagram ]  [ 🐦 Tweets ]
  ▲ selected by default

• Filtering is a smooth re-layout of the masonry (no full reload — LiveView phx-click / client hook).
• Stretch: a sort toggle — Top (by agree-votes) vs Chaos (the default mixed shuffle) vs Newest.
• Show counts per type so the variety is legible (e.g. 🎵 Lyrics (3)).

---

Card anatomy by type

Each card type renders a small, consistent kit but leans into its source's look:

Type	Pill	Visual	Body	Metric
🎬 TikTok	TIKTOK · 0:31	vertical video thumb	caption	▲ likes (3.4M)
📺 YouTube	YOUTUBE · 9:48	16:9 thumb	title + channel/"video essay"	▲ views (920k)
🎵 Song lyric	SONG LYRIC	tinted card, no image, italic	lyric excerpt + artist — "song"	▲ agree (201)
📸 Instagram	INSTAGRAM · CAROUSEL	square/portrait image	caption	▲ agree (640)
🐦 Tweet	TWEET	text-forward, no image	the post	❤ likes (15k)
(future) news headline · movie scene · meme image

Every card also carries: who submitted it (@handle), and an agree/upvote affordance ("does this really capture the word?").

---

Add flow

＋ Add (header) and the inline dashed card both open the same path:

1. Paste a link → detect platform from URL.
2. Auto-unfurl preview (oEmbed / OG tags) → fill thumbnail, title, handle, metric.
3. Optional: pick/confirm type, add a note, choose which definition/word it backs.
4. Submit → card drops into the wall (optimistic insert).

Design the empty state ("Be the first to prove this word exists in the wild") and the populated wall. The dashed inline add-card should always be the last tile.

---

Relationship to "See also" / linking definitions

The mockup's footer chips (performative male · virtue signaling · pick-me · aesthetic · authenticity) are the cross-link layer — how definitions connect to each other. Worth its own design pass (and backed by the existing TopicRelationship schema: :synonym, :related, :word_form, :see_also...). Tracking separately so this issue stays focused on the wall, but the wall and the see-also chips share the same footer region.

• Follow-up issue: "See also" cross-linking UX (chip styling, relationship types, bidirectional links).

---

Open question: where does evidence come from?

The definitions themselves pull from external sources by tier — 📱 Plebs ≈ Urban Dictionary, 📚 Middle ≈ Oxford / Merriam-Webster, 👑 Aristocracy ≈ curated dead-author corpus. Evidence, by contrast, is user-submitted (paste-a-link). The UX for API-sourced definitions hasn't been designed yet and is out of scope here — flagging the distinction so we don't conflate the two pipelines.

• Follow-up issue: API ingestion UX for definitions (Urban Dictionary / Oxford pulls, tier mapping, attribution).

---

Deliverables

• Masonry/grid wall component, mixed media, mixed card heights — meshed by default.
• Per-type card variants (🎬 / 📺 / 🎵 / 📸 / 🐦) with pill, preview, submitter, native metric.
• Filter chips (All default + per-type), smooth re-layout, per-type counts.
• Inline dashed "add" card + header ＋ Add, both opening the paste-a-link flow.
• Empty state and populated state.
• Mobile layout — wall should feel native on a phone (single/two-column masonry).

Acceptance criteria

• Default view amalgamates all types with no grouping; filtering narrows to a type.
• Each card's type is unmistakable from its pill + treatment.
• Native metrics render faithfully per source (likes vs views vs agree-votes).
• Submitter handle + agree affordance on every card.
• Add flow reachable from header and inline card.
• Ports to Phoenix LiveView + Tailwind v4 — utility classes, no daisyUI, no JS framework.

Out of scope (separate issues)

• Backend: evidence schema, oEmbed/OG unfurling, Oban jobs, vote storage + rate limiting.
• "See also" cross-linking UX (tracked above).
• API ingestion UX for definitions (tracked above).

Parent: #66