feat: add podcast page with episode listing and audio player

- Implemented PodcastPage component to display a list of podcast episodes.
- Created PodcastPlayer component for audio playback functionality.
- Added podcast episode data structure and sample episode for testing.

Author: gitcoder89431

public/podcasts/weekly-atlas-2025-09-28.mp3

@@ -0,0 +1,72 @@
+import { AppSidebar } from '@/components/app-sidebar'
+import { cn, formatDateUTC } from '@/lib/utils'
+import { podcastEpisodes } from '@/data/podcasts'
+import { Calendar, Clock } from 'lucide-react'
+import { PodcastPlayer } from '@/components/podcast-player'
+
+export const metadata = {
+  title: 'Podcast | Ruixen Atlas',
+  description: 'A weekly audio signal distilling the newest Atlas dialogues, bridges, and monologues into one concise briefing.',
+}
+
+export default function PodcastPage() {
+  const episodes = [...podcastEpisodes].sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
+  )
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col md:flex-row bg-gray-100 dark:bg-neutral-800 w-full flex-1 mx-auto border border-neutral-200 dark:border-neutral-700 overflow-hidden min-h-screen',
+      )}
+    >
+      <AppSidebar />
+      <div className="flex flex-1">
+        <div className="p-4 md:p-10 rounded-tl-2xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 flex flex-col gap-6 flex-1 w-full h-full overflow-y-auto">
+          <header className="max-w-4xl">
+            <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-neutral-100 mb-4">
+              Atlas Podcast
+            </h1>
+            <p className="text-neutral-600 dark:text-neutral-400 text-base md:text-lg leading-relaxed">
+              Each episode is a fast signal—distilling new dialogues, bridge reports, and monologues into one listenable briefing so you can track how the Atlas is evolving.
+            </p>
+          </header>
+
+          <section className="space-y-6">
+            {episodes.map((episode) => (
+              <article
+                key={episode.id}
+                className="relative overflow-hidden border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white/95 dark:bg-neutral-900/90 shadow-sm hover:shadow-md transition-shadow px-6 py-6 md:px-8"
+              >
+                <span className="pointer-events-none absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-blue-500 via-purple-500 to-blue-500 opacity-80" aria-hidden="true" />
+                <div className="grid gap-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
+                  <div className="space-y-4 md:pr-6">
+                    <h2 className="text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+                      {episode.title}
+                    </h2>
+                    <div className="flex flex-wrap items-center gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                      <span className="inline-flex items-center gap-1">
+                        <Calendar className="h-4 w-4" />
+                        {formatDateUTC(episode.date)}
+                      </span>
+                      <span className="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-200">
+                        <Clock className="h-3 w-3" />
+                        {episode.duration}
+                      </span>
+                    </div>
+                    <p className="text-neutral-600 dark:text-neutral-300 leading-relaxed max-w-2xl">
+                      {episode.description}
+                    </p>
+                  </div>
+                  <div className="flex flex-col gap-3 justify-center w-full md:w-[22rem] lg:w-[24rem]">
+                    <PodcastPlayer src={episode.audioSrc} className="w-full" />
+                  </div>
+                </div>
+              </article>
+            ))}
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/podcast/page.tsx

@@ -10,6 +10,7 @@ import {
   Users,
   Info,
   Search,
+  Mic,
 } from "lucide-react"
 
 const links = [
@@ -33,6 +34,11 @@ const links = [
     href: "/explore",
     icon: <Search className="h-5 w-5 flex-shrink-0" />,
   },
+  {
+    label: "PODCAST",
+    href: "/podcast",
+    icon: <Mic className="h-5 w-5 flex-shrink-0" />,
+  },
   {
     label: "ABOUT",
     href: "/about",

src/components/app-sidebar.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { useEffect, useRef, useState } from 'react'
+import { Play, Pause } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface PodcastPlayerProps {
+  src: string
+  className?: string
+}
+
+function formatTime(seconds: number) {
+  if (!Number.isFinite(seconds)) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+export function PodcastPlayer({ src, className }: PodcastPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const isLoaded = duration > 0
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+
+    const handleLoaded = () => {
+      setDuration(audio.duration || 0)
+    }
+
+    const handleTimeUpdate = () => {
+      setCurrentTime(audio.currentTime || 0)
+    }
+
+    const handleEnded = () => {
+      setIsPlaying(false)
+      setCurrentTime(audio.duration || 0)
+    }
+
+    audio.addEventListener('loadedmetadata', handleLoaded)
+    audio.addEventListener('timeupdate', handleTimeUpdate)
+    audio.addEventListener('ended', handleEnded)
+
+    return () => {
+      audio.removeEventListener('loadedmetadata', handleLoaded)
+      audio.removeEventListener('timeupdate', handleTimeUpdate)
+      audio.removeEventListener('ended', handleEnded)
+    }
+  }, [])
+
+  const togglePlay = () => {
+    const audio = audioRef.current
+    if (!audio) return
+
+    if (isPlaying) {
+      audio.pause()
+      setIsPlaying(false)
+    } else {
+      audio.play().then(() => setIsPlaying(true)).catch(() => setIsPlaying(false))
+    }
+  }
+
+  const handleSeek = (value: number) => {
+    const audio = audioRef.current
+    if (!audio) return
+    audio.currentTime = value
+    setCurrentTime(value)
+  }
+
+  return (
+    <div className={cn('w-full rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-100/70 dark:bg-neutral-800/70 backdrop-blur-sm px-4 py-3', className)}>
+      <div className="flex items-center gap-4">
+        <button
+          type="button"
+          onClick={togglePlay}
+          className={cn(
+            'flex h-12 w-12 items-center justify-center rounded-full transition-colors',
+            isPlaying
+              ? 'bg-purple-600 text-white hover:bg-purple-500'
+              : 'bg-blue-600 text-white hover:bg-blue-500',
+          )}
+          aria-label={isPlaying ? 'Pause podcast' : 'Play podcast'}
+        >
+          {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
+        </button>
+        <div className="flex-1">
+          <div className="flex items-center gap-3 text-xs text-neutral-500 dark:text-neutral-400">
+            <span>{formatTime(currentTime)}</span>
+            <input
+              type="range"
+              min={0}
+              max={isLoaded ? duration : 0}
+              step={0.1}
+              value={currentTime}
+              onChange={(event) => handleSeek(Number(event.target.value))}
+              className="flex-1 accent-neutral-900 dark:accent-neutral-100 h-1 rounded-full appearance-none bg-neutral-300 dark:bg-neutral-700"
+              aria-valuemax={duration}
+              aria-valuemin={0}
+              aria-valuenow={currentTime}
+            />
+            <span>{formatTime(duration)}</span>
+          </div>
+        </div>
+      </div>
+      <audio ref={audioRef} preload="none">
+        <source src={src} type="audio/mpeg" />
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  )
+}

src/components/podcast-player.tsx

@@ -0,0 +1,22 @@
+export interface PodcastEpisode {
+  id: string
+  title: string
+  description: string
+  date: string
+  duration: string
+  audioSrc: string
+  topics: string[]
+}
+
+export const podcastEpisodes: PodcastEpisode[] = [
+  {
+    id: '2025-week-01',
+    title: 'Weekly Atlas Signals — September 27, 2025',
+    description:
+      'Sixteen-minute signal: the week’s dialogues on modular manifolds, evolutionary meta-learning, and cybernetic governance compressed into one take—why geometric seams, aesthetic structure, and adaptive feedback still decide what survives.',
+    date: '2025-09-27',
+    duration: '16:53',
+    audioSrc: '/podcasts/weekly-atlas-2025-09-28.mp3',
+    topics: [],
+  },
+]

src/data/podcasts.ts

@@ -3,4 +3,22 @@ import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
-}
+}
+
+export function formatDateUTC(
+  dateString: string,
+  locale: string = 'en-US',
+  options: Intl.DateTimeFormatOptions = {},
+) {
+  if (!dateString) return ''
+  const safeDate = new Date(`${dateString}T00:00:00Z`)
+  if (Number.isNaN(safeDate.getTime())) return dateString
+  const formatter = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    timeZone: 'UTC',
+    ...options,
+  })
+  return formatter.format(safeDate)
+}