+
+
+ {open && (
+
+ )
+}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 039fb5f..1715874 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,16 +1,22 @@
import { NavLink } from 'react-router-dom'
-import { Home, Compass, Upload, Heart, User, Settings } from 'lucide-react'
+import { Home, Compass, Upload, Heart, User, Settings, TrendingUp, Rss, Sparkles, ListMusic, Layers, BarChart3 } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useAuthStore } from '@/stores/auth'
const publicLinks = [
{ to: '/', icon: Home, label: 'Accueil' },
{ to: '/explore', icon: Compass, label: 'Explorer' },
+ { to: '/trending', icon: TrendingUp, label: 'Tendances' },
+ { to: '/for-you', icon: Sparkles, label: 'Pour toi' },
]
const authLinks = [
+ { to: '/following', icon: Rss, label: 'Abonnements' },
{ to: '/upload', icon: Upload, label: 'Publier' },
+ { to: '/playlists', icon: ListMusic, label: 'Playlists' },
{ to: '/favorites', icon: Heart, label: 'Favoris' },
+ { to: '/my-shows', icon: Layers, label: 'Mes séries' },
+ { to: '/dashboard', icon: BarChart3, label: 'Dashboard' },
{ to: '/settings', icon: Settings, label: 'Paramètres' },
]
diff --git a/src/components/playlist/AddToPlaylistModal.tsx b/src/components/playlist/AddToPlaylistModal.tsx
new file mode 100644
index 0000000..7c66afd
--- /dev/null
+++ b/src/components/playlist/AddToPlaylistModal.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react'
+import { X, Plus, Check, ListMusic } from 'lucide-react'
+import { supabase } from '@/lib/supabase'
+import { useAuthStore } from '@/stores/auth'
+import { usePlaylistModal } from '@/stores/playlist-modal'
+import { Button } from '@/components/ui/Button'
+import type { Playlist } from '@/types'
+
+export function AddToPlaylistModal() {
+ const { user } = useAuthStore()
+ const { podcastId, close } = usePlaylistModal()
+ const [playlists, setPlaylists] = useState
+
+ )}
+
+ Notifications
+
+
+ {unreadCount > 0 && user && (
+
+ )}
+
+
+
+ {notifications.length === 0 ? (
+
+ Aucune notification
+ ) : ( + notifications.slice(0, 10).map((n) => ( + + )) + )} +
+
+
+ )
+}
diff --git a/src/components/podcast/PodcastCard.tsx b/src/components/podcast/PodcastCard.tsx
index 87a9306..f9d7f25 100644
--- a/src/components/podcast/PodcastCard.tsx
+++ b/src/components/podcast/PodcastCard.tsx
@@ -1,4 +1,4 @@
-import { Play, Pause, Heart, MessageCircle, Clock, ListPlus, Download, Check, Loader2 } from 'lucide-react'
+import { Play, Pause, Heart, MessageCircle, Clock, ListPlus, Download, Check, Loader2, BookmarkPlus } from 'lucide-react'
import { Link } from 'react-router-dom'
import type { Podcast } from '@/types'
import { formatDuration, timeAgo } from '@/lib/utils'
@@ -8,6 +8,8 @@ import { Avatar } from '@/components/ui/Avatar'
import { usePlayerStore } from '@/stores/player'
import { useListeningProgress } from '@/hooks/useListeningProgress'
import { useOfflineStore } from '@/stores/offline'
+import { usePlaylistModal } from '@/stores/playlist-modal'
+import { useAuthStore } from '@/stores/auth'
import { isExternalUrl } from '@/lib/embed'
const coverGradients = [
@@ -37,6 +39,7 @@ export function PodcastCard({ podcast, progressPercent: propProgress }: PodcastC
const progressMap = useListeningProgress()
const progressPercent = propProgress ?? progressMap.get(podcast.id)?.percent
const { downloadPodcast, isDownloaded, isDownloading, getDownloadProgress } = useOfflineStore()
+ const user = useAuthStore((s) => s.user)
const downloaded = isDownloaded(podcast.id)
const downloading = isDownloading(podcast.id)
const isNative = !isExternalUrl(podcast.audio_url)
@@ -81,6 +84,15 @@ export function PodcastCard({ podcast, progressPercent: propProgress }: PodcastC
>
+
+
+
+
+ Ajouter à une playlist
+ +
+ {loading ? (
+
+
+
+
+ {[1, 2, 3].map((i) => )}
+
+ ) : playlists.length === 0 ? (
+ Aucune playlist. Créez-en une ci-dessous.
+ ) : ( + playlists.map((pl) => ( + + )) + )} +
+
+
+ {scheduled.map((podcast) => (
+
+ )}
+
{loading ? (
+
+ {scheduled.map((podcast) => (
+
+
+ ))}
+
+
+
+ {podcast.cover_url ? (
+ })
+ ) : (
+
+
+
+ )}
+
+
+
+ {podcast.title}
++ Prévu le {new Date(podcast.published_at!).toLocaleString('fr-FR')} +
+
{[1, 2, 3].map(i => (
diff --git a/src/pages/MyShows.tsx b/src/pages/MyShows.tsx
new file mode 100644
index 0000000..e4879f6
--- /dev/null
+++ b/src/pages/MyShows.tsx
@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Layers, Plus, X } from 'lucide-react'
+import { supabase } from '@/lib/supabase'
+import { useAuthStore } from '@/stores/auth'
+import { publicUrl } from '@/lib/storage'
+import { Button } from '@/components/ui/Button'
+import type { Show } from '@/types'
+
+export function MyShows() {
+ const { user, loading: authLoading } = useAuthStore()
+ const navigate = useNavigate()
+ const [shows, setShows] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [showCreate, setShowCreate] = useState(false)
+ const [newTitle, setNewTitle] = useState('')
+ const [newDesc, setNewDesc] = useState('')
+ const [creating, setCreating] = useState(false)
+
+ useEffect(() => {
+ if (authLoading) return
+ if (!user) { navigate('/auth'); return }
+ async function load() {
+ const { data } = await supabase
+ .from('shows')
+ .select('*')
+ .eq('creator_id', user!.id)
+ .order('created_at', { ascending: false })
+ if (data) setShows(data)
+ setLoading(false)
+ }
+ load()
+ }, [user, authLoading, navigate])
+
+ async function handleCreate(e: React.FormEvent) {
+ e.preventDefault()
+ if (!user || !newTitle.trim()) return
+ setCreating(true)
+ const { data } = await supabase
+ .from('shows')
+ .insert({ creator_id: user.id, title: newTitle.trim(), description: newDesc.trim() || null })
+ .select()
+ .single()
+ if (data) {
+ setShows([data, ...shows])
+ setNewTitle('')
+ setNewDesc('')
+ setShowCreate(false)
+ }
+ setCreating(false)
+ }
+
+ if (!user) return null
+
+ return (
+
+
+
+
+ {showCreate && (
+
+
+
+
+
+
+
+ {shows.length} série{shows.length !== 1 ? 's' : ''}
+