FİNAL PLAN v3

Context Menu & Playlist Modal

Kapsamlı Düzenleme Planı

25 Aralık 2025

Basit Anlatım

3 ana değişiklik yapılacak:

  1. Song-card kaldırılacak - Şarkılar her yerde satır (row/list) olarak görünecek
  2. Playlist Modal iyileştirilecek - Hızlı, kolay, çoklu seçim, SPA uyumlu
  3. Context menüler düzenlenecek - Gereksiz seçenekler kaldırılacak, eksikler eklenecek
1

Song-Card Kaldırılacak

Şarkılar artık sadece row/list formatında

Kaldırılacak

components/muzibu/song-card.blade.php

Grid görünümlü şarkı kartı artık kullanılmayacak

Kullanılacak

  • song-row.blade.php - Tablo satırı
  • song-list-item.blade.php - Kompakt liste

Kontrol: Song-card kullanılan tüm sayfalar tespit edilip row/list'e çevrilecek

2

Playlist Modal İyileştirmeleri

Hızlı, kolay, SPA uyumlu

Mevcut Durum Analizi:

Checkbox ile çoklu seçim VAR
x-teleport ile body'e taşınıyor (SPA uyumlu)
songExistsInPlaylists kontrolü VAR
Yeni playlist oluşturma VAR
Arama özelliği VAR (5+ playlist)
Mobile bottom sheet VAR

Yapılacak İyileştirmeler

  • Album desteği ekle

    Şu an sadece song için çalışıyor, album için de çalışmalı

  • Loading state ekle

    Playliste eklerken spinner göster

  • Başarı animasyonu

    Ekleme sonrası kısa success feedback

  • contextMenu store'dan bağımsızlaştır

    Kendi Alpine store'u olmalı (playlistModal store)

Teknik Yapı

// Yeni Alpine Store: playlistModal
Alpine.store('playlistModal', {
    open: false,
    contentType: 'song',      // 'song' | 'album'
    contentId: null,
    contentData: {},          // title, cover, artist
    userPlaylists: [],
    existsInPlaylists: [],    // Bu içerik hangi playlist'lerde var
    selectedPlaylists: [],
    loading: false,
    searchQuery: '',

    // Modal aç (herhangi bir yerden çağrılabilir)
    async show(type, id, data) {
        this.contentType = type;
        this.contentId = id;
        this.contentData = data;
        this.loading = true;
        this.open = true;
        await this.fetchPlaylists();
        await this.checkExisting();
        this.loading = false;
    },

    // Çoklu playliste ekle
    async addToSelected() { ... }
});
                    
3

Context Menu Değişiklikleri

Menü yapısı düzenlemesi

Menü Kaldırılan Eklenen
Song "Sanatçıya Git" -
Album "Sanatçıya Git" "Playliste Ekle"
Radio "Sıraya Ekle" -

Final Menu Yapısı:

Song

  1. 1. Çal
  2. 2. Sıraya Ekle
  3. 3. Favorilere Ekle
  4. 4. Puan Ver
  5. 5. Playliste Ekle
  6. 6. Albüme Git*

Album

  1. 1. Çal
  2. 2. Sıraya Ekle
  3. 3. Favorilere Ekle
  4. 4. Playliste Ekle ✨

Radio

  1. 1. Çal
  2. 2. Favorilere Ekle

*Sıraya Ekle yok - direkt çalar

Değişecek Dosyalar

Dosya İşlem Değişiklik
JavaScript Dosyaları
menu-builder.js GÜNCELLE goToArtist kaldır, album'e addToPlaylist ekle, radio'dan queue kaldır
song-actions.js GÜNCELLE goToArtist() kaldır
album-actions.js GÜNCELLE goToArtist() kaldır, addToPlaylist() ekle
radio-actions.js GÜNCELLE addToQueue() kaldır
action-executor.js GÜNCELLE goToArtist case kaldır
content-actions.js GÜNCELLE goToArtist() kaldır
muzibu-store.js EKLE playlistModal store ekle (contextMenu'dan ayır)
Blade Componentleri
song-card.blade.php KALDIR Artık kullanılmayacak
song-row.blade.php GÜNCELLE artist_id/slug kaldır
song-list-item.blade.php GÜNCELLE artist_id/slug kaldır
album-card.blade.php GÜNCELLE Responsive click kontrol, artist verisi kaldır
playlist-select-modal.blade.php GÜNCELLE playlistModal store'a geçiş, album desteği, loading
radio-card.blade.php - Değişiklik yok (özel davranış)

Uygulama Sırası

1

playlistModal store oluştur

muzibu-store.js'e yeni store ekle

2

playlist-select-modal.blade.php güncelle

Yeni store kullan, album desteği ekle

3

menu-builder.js güncelle

Menü yapılarını düzenle

4

Action dosyalarını güncelle

song-actions, album-actions, radio-actions, action-executor, content-actions

5

Blade componentleri güncelle

artist_id/slug kaldır, responsive click kontrol

6

song-card.blade.php kullanımlarını bul ve değiştir

Tüm sayfalarda song-row veya song-list-item kullan

7

Test & Cache temizle

php artisan view:clear && npm run prod

Song-Card Kullanım Yerleri (Kontrol Edilecek)

Bu sayfalar kontrol edilip song-row/list-item'a çevrilecek:

  • Favoriler sayfası
  • Arama sonuçları
  • Dashboard öneriler
  • Sidebar preview

Özet

1

Dosya kaldırılacak

song-card.blade.php

12

Dosya güncellenecek

JS + Blade

1

Store eklenecek

playlistModal

ÖNEMLİ KURALLAR

RADIO - ÖZEL DAVRANIŞ

  • Preview OLMAYACAK
  • Sidebar açılmayacak
  • Buton tıklanınca DİREKT ÇALAR
  • Card tıklanınca DİREKT ÇALAR
  • Çalma kodu = Play butonu kodu (aynı fonksiyon)

DİĞER KARTLAR (Album, Playlist, Genre, Sector, Artist)

Desktop (≥1024px)

  • Karta tıkla → Sağ sidebar'da PREVIEW açılır
  • İçerik detayları sidebar'da görünür
  • Sayfa değişmez

Mobile/Tablet (<1024px)

  • Karta tıkla → DETAY SAYFASINA gider
  • Main area'da içerik açılır
  • Normal link davranışı

PLAYLIST MODAL - GLOBAL ERİŞİM

  • Her yerden erişilebilir (context menu, butonlar, vb.)
  • SPA'dan ETKİLENMEZ (x-teleport body'e)
  • Checkbox ile ÇOKLU SEÇİM
  • HIZLI EKLEME deneyimi
  • Şarkı zaten varsa YEŞİL CHECK gösterir
  • ALBUM DESTEĞİ - Tüm albümü playliste ekle

KAPSAMLI TODO LİSTESİ

1 FAZA 1: Playlist Modal Store

2 FAZA 2: Playlist Modal Blade Güncelleme

3 FAZA 3: Menu Builder Güncelleme

4 FAZA 4: Action Dosyaları Güncelleme

5 FAZA 5: Card Component'leri Güncelleme

Desktop: Preview | Mobile: Detay sayfası

6 FAZA 6: Context Menu Data Temizliği

Tüm openContextMenu() çağrılarından artist verilerini kaldır:

7 FAZA 7: Song-Card Kaldırma

8 FAZA 8: Test & Deploy

8
Faz
~50
Todo Item
13
Dosya
1
Store