🎵 Muzibu Context Menu Sistemi

Muzibu.com.tr için sağ tık (context menu) ile gelişmiş içerik yönetimi:
Favorilere ekleme, puan verme, playliste ekleme ve daha fazlası
05 Aralık 2025 Tenant 1001: muzibu.com Alpine.js + Tailwind CSS

Mevcut Durum Analizi

Mevcut Sistemler

  • ✓
    Favorite Modülü
    Favorilere ekleme/çıkarma API çalışıyor
    POST /api/favorites/toggle
  • ✓
    ReviewSystem Modülü
    Rating (puan) + Review (yorum) backend hazır
    POST /api/reviews
  • ✓
    Playlist Sistemi
    Kullanıcı playlist oluşturma, düzenleme, silme var
    GET /api/muzibu/my-playlists
  • ✓
    Song Actions Menu (Partial)
    3-nokta dropdown var ama eksik özellikler var
    song-actions-menu.blade.php

Eksik Özellikler

  • ✗
    Context Menu (Sağ Tık)
    Tarayıcı context menu engellenmiyor, özel menü yok
  • ✗
    Playliste Ekleme UI
    Song actions menüde yok, playliste ekleyemiyorlar
  • ✗
    Puan Verme UI
    ReviewSystem backend var ama frontend UI yok
  • ✗
    İçerik Tipine Göre Menü
    Şarkı/Albüm/Playlist farklı action göstermeli ama yok

Hedef Sistem

  • 🎯
    Universal Context Menu
    Tüm içerik tiplerini destekleyen tek component
  • 🎯
    Alpine.js Store
    Global state management (reactive)
  • 🎯
    Smart Positioning
    Ekran sınırları kontrolü, otomatik hizalama
  • 🎯
    Modüler Architecture
    Her action için ayrı modal/handler

Sistem Mimarisi

📦 Component Yapısı

resources/views/components/muzibu/
├── context-menu.blade.php
Ana context menu component
├── rating-modal.blade.php
5 yıldız + yorum sistemi
├── playlist-select-modal.blade.php
Playlist seçim modal
└── create-playlist-modal.blade.php
Yeni playlist oluştur
public/themes/muzibu/js/
├── context-menu-store.js
Alpine store (global state)
└── context-menu-actions.js
Action handler functions

🗂️ Alpine Store Yapısı

Alpine.store("contextMenu")
visible: false
// Menü görünür mü?
x: 0, y: 0
// Ekran koordinatları
type: null
// song | album | playlist | genre | sector | review
data: null
// İçerik objesi (id, title, artist vb.)
actions: []
// Gösterilecek action listesi

🔄 Data Flow (Sağ Tık → Action → API → UI Update)

1
Kullanıcı sağ tık yapar
Event: contextmenu → preventDefault()
2
Alpine Store güncellenir
contextMenu.show(type, data, x, y)
3
Context Menu render olur
x-show="$store.contextMenu.visible" → transition
4
Kullanıcı action seçer
Örn: "Favorilere Ekle" → toggleFavorite()
5
API çağrısı yapılır
POST /api/favorites/toggle + CSRF token
6
UI güncellenir + Toast
Success → Kalp ikonu dolar, toast gösterilir

📄 Sayfa 1/3

Context Menu Actions, Implementation Planı ve diğer detaylar yükleniyor...

Tarayıcınızı yenileyin veya aşağı kaydırın