Ionosphere.tv
feat: redesign tracks page — compact grid matching site style
Replace heavy bordered list with compact grid cards. Remove large
heading and description. Use small uppercase day headers, subtle
background cards, and responsive 3-column grid matching the visual
language of the talks and speakers pages.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+8
-19
+8
-19
apps/ionosphere/src/app/tracks/page.tsx
+8
-19
apps/ionosphere/src/app/tracks/page.tsx
···
28
28
}
29
29
30
30
return (
31
-
<div className="max-w-3xl mx-auto px-4 py-8">
32
-
<h1 className="text-2xl font-bold mb-6">Full-Day Streams</h1>
33
-
<p className="text-neutral-400 text-sm mb-8">
34
-
Browse complete conference recordings by room and day. Each track shows
35
-
the full stream with talk segments, speaker diarization, and transcript.
36
-
</p>
37
-
31
+
<div className="max-w-5xl mx-auto px-4 py-6">
38
32
{DAY_ORDER.filter((d) => byDay.has(d)).map((day) => (
39
-
<div key={day} className="mb-8">
40
-
<h2 className="text-lg font-semibold text-neutral-300 mb-3 border-b border-neutral-800 pb-1">
33
+
<div key={day} className="mb-6">
34
+
<h2 className="text-xs font-semibold text-neutral-500 uppercase tracking-wide mb-3">
41
35
{day}
42
36
</h2>
43
-
<div className="space-y-2">
37
+
<div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
44
38
{byDay.get(day)!.map((track) => (
45
39
<Link
46
40
key={track.slug}
47
41
href={`/tracks/${track.slug}`}
48
-
className="block p-4 rounded-lg border border-neutral-800 hover:border-neutral-600 transition-colors"
42
+
className="block p-3 rounded-lg bg-neutral-900/50 hover:bg-neutral-800/70 transition-colors"
49
43
>
50
-
<div className="flex items-baseline justify-between">
51
-
<span className="font-medium">{track.room}</span>
52
-
<span className="text-sm text-neutral-500">
53
-
{formatDuration(track.durationSeconds)}
54
-
</span>
55
-
</div>
56
-
<div className="text-sm text-neutral-400 mt-1">
57
-
{track.talkCount} talks
44
+
<div className="font-medium text-sm">{track.room}</div>
45
+
<div className="text-xs text-neutral-500 mt-1">
46
+
{track.talkCount} talks · {formatDuration(track.durationSeconds)}
58
47
</div>
59
48
</Link>
60
49
))}