Muzibu Sol Menu Mimarisi

Kapsamli Gelistirme Rehberi & Todo Listesi

14 Aralik 2025 v1.0

Sayfa Davranislari

Her icerik tipi icin liste ve detay davranislari

Playlistler

Sistem playlistleri ve kullanici etklesimi

Liste Sayfasi (/playlists)

  • Grid gorünümünde playlist kartlari
  • Her kartta cover, baslik, aciklama
  • Gorsele tikla → Detay sayfasina git
  • Play tusuna tikla → Playlist sarkilerini cal
  • Favori butonu (kalp ikonu)
  • Menu butonu → Context menu ac

Detay Sayfasi (/playlists/{slug})

  • Playlist hero (cover + bilgiler)
  • Sarki listesi (standart tasarim)
  • Tum playlist'i cal butonu
  • Karistir modu
  • Sarkilari kendi playlist'ine ekle
  • Playlist'i kopyala (kullaniciya)

Albumler

Album listesi ve sarki icerikleri

Liste Sayfasi (/albums)

  • Grid görünümünde album kartlari
  • Cover, album adi, sanatci adi
  • Gorsele tikla → Detay sayfasina git
  • Play tusuna tikla → Album sarkilerini cal
  • Favori butonu
  • Menu butonu → Context menu

Detay Sayfasi (/albums/{slug})

  • Album hero (cover + sanatci + yil)
  • Sarki listesi (standart tasarim)
  • Tum albumu cal butonu
  • Sarkilari kendi playlist'ine ekle
  • Sanatci sayfasina link

Turler (Genre)

Muzik turleri ve ture bagli sarkilar

Liste Sayfasi (/genres)

  • Rengarenk gradient kartlar
  • Tur adi (Pop, Rock, Jazz vb.)
  • Karta tikla → Detay sayfasina git
  • Play tusuna tikla → Ture ait sarkilari cal
  • Favori butonu

Detay Sayfasi (/genres/{slug})

  • Tur hero (gradient + tur adi)
  • Sarki listesi (standart tasarim)
  • Tum tur sarkilerini cal
  • Sarkilari playlist'e ekle
  • Karistir modu

Sektorler

Isletme sektorleri - OZEL YAPI (2 bolum)

OZEL TASARIM

Liste Sayfasi (/sectors)

  • Grid gorunumunde sektor kartlari
  • Sektor adi, ikon, aciklama
  • Karta tikla → Detay sayfasina git
  • Favori butonu

Detay Sayfasi (/sectors/{slug}) 2 BOLUM

Bolum 1: Sektore Ait Radyolar
  • • Sektor ile iliskilendirilen radyolar
  • • Radyo kartlari (tikla = direkt cal)
Bolum 2: Sektore Ait Playlistler
  • • Sektor ile iliskilendirilen playlistler
  • • Playlist kartlari (normal davranis)

Radyolar

Canli radyo yayinlari - DIREKT CALMA

DETAY YOK

Liste Sayfasi (/radios) - TEK SAYFA

ONEMLI: Radyolarin detay sayfasi YOKTUR!

  • Grid gorunumunde radyo kartlari
  • Radyo adi, logo, sektor bilgisi
  • Gorsele VEYA Play'e tikla → DIREKT CAL
  • Radyoya atanan playlistlerden KARISIK sarkilar
  • Favori butonu
  • Menu butonu → Context menu

Calma Mantigi: Radyo tiklandiginda, radyoya atanmis tum playlistlerdeki sarkilar karistirilir ve sirasiz calinir. Kullanici bunu player'daki siraya ekleyebilir.

Context Menu Sistemi

Sag tik + menu butonu ile acilan aksiyonlar

YENI: Her icerik kartina 3 nokta menu butonu eklenecek. Sag tik + bu buton ayni context menu'yu acacak.

Sarki

  • Simdi Cal
  • Siraya Ekle
  • Siradakinin Ardindan Cal
  • Playlist'e Ekle
  • Favorilere Ekle/Cikar
  • Albume Git
  • Sanatciya Git
  • Paylas

Album

  • Albumu Cal
  • Karistirarak Cal
  • Siraya Ekle
  • Favorilere Ekle/Cikar
  • Sanatciya Git
  • Paylas

Playlist

  • Playlist'i Cal
  • Karistirarak Cal
  • Siraya Ekle
  • Playlist'i Kopyala
  • Favorilere Ekle/Cikar
  • Paylas

Tur (Genre)

  • Turu Cal
  • Karistirarak Cal
  • Siraya Ekle
  • Favorilere Ekle/Cikar
  • Paylas

Radyo

  • Radyoyu Cal
  • Siraya Ekle
  • Favorilere Ekle/Cikar
  • Paylas

Sanatci

  • Sanatciyi Cal
  • Karistirarak Cal
  • Favorilere Ekle/Cikar
  • Paylas

Favori Sistemi

Tum icerik tipleri icin favori yonetimi

Favori Eklenebilir Icerikler

Sarki Mevcut
Album Mevcut
Playlist Mevcut
Tur Eklenecek
Radyo Eklenecek
Sanatci Eklenecek

Favorilerim Sayfasi (/favorites)

Tum favori tipleri tek sayfada, tab'lar ile filtrelenebilir sekilde gosterilecek.

Tumu Sarkilar Albumler Playlistler Turler Radyolar Sanatcilar

Teknik: HasFavorites trait zaten mevcut. Genre, Radio, Artist modellerine trait eklenecek.

Kullanici Playlist Sistemi

Kullanicilarin kendi playlistlerini olusturmasi ve yonetmesi

Playlist Olusturma

  • Sol menude "Playlist Olustur" butonu
  • Modal acilir (ad, aciklama, kapak)
  • is_system = false olarak kaydedilir
  • user_id = auth user

Sarki Ekleme

  • Context menu → "Playlist'e Ekle"
  • Kullanici playlistleri listelenir
  • "Yeni Playlist Olustur" secenegi
  • Sarki pivot tabloya eklenir

Playlist Duzenleme

  • Playlistlerim sayfasindan erisim
  • Sarki siralama (drag & drop)
  • Sarki silme
  • Playlist bilgilerini guncelleme

Sistem Playlist'i Kopyalama

Kullanicilar sistem playlistlerini kendi hesaplarina kopyalayabilir:

  • Context menu → "Playlist'i Kopyala"
  • Yeni isim girilir (varsayilan: "Kopya - [orijinal]")
  • Tum sarkilar ile birlikte kopyalanir
  • is_system = false, user_id = auth user

Teknik Akis:

1. Yeni Playlist olustur (user_id, is_system=false)
2. Orijinal playlist sarkilarini cek
3. Pivot tabloya yeni playlist_id ile ekle
4. Kullaniciya basarili mesaji goster

Gelistirme Todo Listesi

Tamamlanacak gorevler (AI tarafindan guncellenecek)

1 Faze 1: Temel Altyapi

2 Faze 2: Sol Menu Guncellemeleri

3 Faze 3: Kart Componentleri (3 Nokta Menu)

4 Faze 4: Context Menu JavaScript

5 Faze 5: Sektor Detay Sayfasi (2 Bolum)

6 Faze 6: Radyo Calma Mantigi

7 Faze 7: Kullanici Playlist Sistemi

8 Faze 8: Favorilerim Sayfasi

9 Faze 9: Test & QA

Draft Tasarimlar

Muzibu tasarimina uygun ornek componentler

Draft 1: Playlist Karti

✓ SECILDI

Spotify Tarzi: Cover Sag Ust

Jazz Classics

28 sarki

Spotify Tarzi Secildi: 3 nokta menu cover uzerinde sag ust kosede. Play butonu sag altta. Yazilar sola dayali.

Favori Butonu Yok! Tum aksiyonlar (favori dahil) 3 nokta menu icerisinden erisiliyor. Sistem tutarli.

Draft 2: Radyo Karti (Direkt Calma)

CANLI

Cafe Radyo

Cafe & Restaurant

Not: Radyo kartina herhangi bir yere tiklandiginda direkt calma baslar. Detay sayfasi yok.

Draft 3: Sarki Satiri (Favori + Playlist Disarida)

1

Hayal Kahvesi

Sezen Aksu

3:45
2

Gibi Gibi

Tarkan

4:12

Simdi Caliniyor

Sanatci Adi

2:18

Favori butonu her zaman gorunur (hover'da daha belirgin)

Playlist'e ekle - hizli erisim

Diger aksiyonlar (siraya ekle, albume git vb.)

Draft 4: Context Menu Tasarimi

Sarki
Hayal Kahvesi - Sezen Aksu

Sag Sidebar Analizi

"Sizin Icin" alani - Kullanmak mi, Kaldirmak mi?

KARAR GEREKLI

Mevcut Durum Analizi

Teknik Yapi

  • x-show="isHomepage" ile kontrol ediliyor
  • Sadece XL+ ekranlarda gorunur (xl:block)
  • Sadece anasayfada aktif
  • Server-side rendered (Blade)

Mevcut Icerik

  • Sizin Icin (Featured Playlists)
  • Populer Sarkilar (Statik/Dummy)
  • Yeni Eklenenler (Statik/Dummy)
  • Turler (Statik Liste)

Bug Detayi: Tutarsizlik Neden Olusuyor?

Kullanici Senaryosu

1. Anasayfa
Sag sidebar GORUNUR
✓ Dogru
2. Uyelik Uzat
Sag sidebar KALIYOR
✗ Yanlis (kaybolmali)
3. Album Tikla
Sag sidebar KAYBOLUYOR
✓ Dogru
4. Uyelik Uzat
Sag sidebar GELMIYOR
? Tutarsiz

Teknik Sebep: isHomepage State Senkronizasyonu

// app.blade.php - Satir 155-164
$initialIsHomepage = empty(trim(request()->path(), '/'));
// JavaScript checkIsHomepage()
const currentPath = window.location.pathname.replace(/^\/+|\/+$/g, '');
this.isHomepage = (currentPath === '' || currentPath === '/');

Problem: wire:navigate (Livewire SPA) ile sayfa gecisinde livewire:navigated event'i gecikmeyle fire ediliyor.

Race Condition: Alpine state (isHomepage) ile DOM guncellemesi (x-show, :class) arasinda zamanlama uyusmazligi.

Grid Kaymasi: 3-kolon → 2-kolon gecisinde grid class'i (grid-cols-[220px_1fr_360px]) ve sidebar visibility (x-show) ayni anda guncellenmiyor.

Event Dinleyicileri (Mevcut)

route-changed
Custom event (bazi durumlarda fire edilmiyor)
popstate
Browser geri/ileri (OK)
livewire:navigated
SPA navigation (gecikme sorunu)

Tespit Edilen Sorunlar (Ozet)

1

SPA State Sync Sorunu

livewire:navigated event'i ile Alpine state guncellemesi arasinda race condition var.

2

isHomepage Kontrolu Yetersiz

window.location.pathname bazli kontrol SPA navigation'da gecikme yasiyor.

3

Grid Layout Kaymasi

3 kolonlu grid (sol + ana + sag) vs 2 kolonlu grid (sol + ana) gecislerinde layout kayiyor.

4

Dinamik Kullanim Zorluğu

Album/Playlist detaylarini sag sidebar'da gostermek SPA mimarisinde karmasik state yonetimi gerektirir.

Spotify Referans - Sag Sidebar KULLANILIYOR!

REFERANS MODEL

Spotify Sag Sidebar Icerigi

  • Sanatci hakkinda: Bio, foto, dinleyici sayisi
  • Katkida bulunanlar: Ana sanatci, besteci, soz yazari
  • Turnede: Konser bilgileri
  • Begenilen Sarkilar: Kullanici listesi

Onemli Farklar

Sidebar HER ZAMAN gorunur (sadece anasayfa degil)

Icerik KONTEKSTE GORE degisir (calan sarkiya/secili iceriklere gore)

Desktop'ta sabit, mobilde slide-panel

SECILEN: Dinamik Sidebar (Pratik Yaklasim)

PC'de hizli onizleme / sarki listesine kolay erisim

✓ ONAYLANDI

Sidebar Icerigi (Sayfaya Gore)

Anasayfa Featured playlistler
Album/Playlist Detay Sarki listesi
Tur/Sektor Detay Sarki listesi
Mobil Sidebar YOK

Faydalar

Hizli album/playlist goruntuleme
Sarki listesine aninda erisim
Sayfa degistirmeden dinlemeye baslama
Mobilde gereksiz karmasiklik yok

Uygulama Fazlari

1

FAZ 1: Temel Dinamik Sidebar

~4-6 saat

ONCELIKLI

Yapilacaklar:

  • isHomepage kontrolunu kaldir
  • Sidebar'i her sayfada goster (xl+)
  • Detay sayfalarinda sarki listesi
  • Anasayfada featured icerik

Sonuc:

  • Tutarli layout (her sayfada)
  • Hizli sarki listesi erisimi
  • Mobil etkilenmez
2

FAZ 2: Liste Sayfasi Onizleme (Opsiyonel)

Sonra yapilabilir

SONRA
  • Liste sayfasinda oge secimi
  • Secilen ogenin sidebar'da onizlemesi
  • Tikla → SPA ic sayfa navigasyonu

Sonuc & Oneri (Guncel)

ONERILEN: Spotify Tarzi Dinamik Sidebar

Spotify sag sidebar'i aktif olarak kullaniyor. Muzibu da ayni standardi hedeflemeli.

Uygulama Plani

  1. 1 isHomepage kontrolunu kaldir → her sayfada goster
  2. 2 Alpine store ile kontekst-bazli icerik yonetimi
  3. 3 Sayfa tipine gore sidebar icerigi degistir
  4. 4 Mobilde slide-panel/drawer olarak goster

Beklenen Sonuc

Spotify standartinda profesyonel UX
Tutarli davranis - her sayfada ayni layout
Zengin kontekst bilgisi (sanatci, sarki listesi, vb.)
Mobil-desktop uyumlu responsive tasarim

Alternatif (Hizli Cozum): Eger zaman kisitliysa, sidebar tamamen kaldirilabilir ve 2 kolonlu layout kullanilabilir. Ancak bu, Spotify tarzi zengin deneyimden vazgecmek demektir.