Muzibu Component Plan

Yapılması Gereken Component'ler • 11 Entity • ~25 Component

Action Plan 20 Aralık 2025 Blade Components

Plan Özeti

Ne yapılacak? Neden gerekli?

🎯 Hedef

Muzibu'daki 11 entity için yeniden kullanılabilir, tutarlı component'ler oluşturmak. Her entity'nin tasarımı ve sağ tıklama (context menu) davranışı kodlanacak.

11

Entity

~25

Component

1

Universal Context Menu

Entity Listesi (11 adet)

Song (Şarkı)
Album (Albüm)
Artist (Şarkıcı)
Playlist
Genre (Tür)
Sector (Sektör)
Radio (Radyo)
Favorite (Favori)
Queue (Sıra)
Recent Played
Search Results

Component Kategorileri

Grid/List Card Components ~12
Hero/Detail Components ~7
Special View Components ~3
Modals & Overlays ~7
TOPLAM ~29

Entity Component Matrix

Her entity için yapılması gereken component'ler

Song (Şarkı)

En fazla varyasyon - 5 farklı component

5 Component

song-row

Liste görünümü - Album/Playlist detail

• Props: $song, $index, $showCover, $showArtist
• Grid: Index | Cover | Title+Artist | Duration | Menu
• Hover: Play icon (index yerine)

song-card

Grid card - Favorites, Homepage

• Props: $song, $size (normal|large)
• Square cover + title + artist
• Play button bottom-right (hover)

song-queue-item

Queue overlay item - Drag & drop

• Props: $song, $isPlaying, $isDraggable
• Compact: 56x56 thumbnail
• Drag handle + now playing indicator

song-sidebar-item

Sağ sidebar preview track

• Props: $song, $showIndex, $isActive
• 40x40 thumbnail + title + artist
• Play icon on hover

song-detail

Tek şarkı detay sayfası (optional)

• Props: $song
• Large cover + lyrics + metadata
• Share, favorite, rating buttons

Context Menu Actions

• Play Next
• Add to Queue
• Add to Playlist
• Go to Album
• Go to Artist
• Add to Favorites
• Share Song
• Rate Song (modal)

Album (Albüm)

Grid card + Detail hero

2 Component

album-card

Universal card - Grid/Homepage/Favorites

• Props: $album, $variant ('grid'|'horizontal'|'compact')
• Square cover (aspect-square)
• Play button bottom-right (hover opacity-0 → 100)
• 3-dot menu top-right (hover)
• Title + artist below

album-hero

Detail page header

• Props: $album
• Large cover (256x256+) with gradient overlay
• Album name, artist, year, song count
• Action buttons: Play all, Favorite, Share
• Below: song-row list

Context Menu Actions

• Play Album
• Add to Favorites
• Go to Artist
• Share Album

Artist (Şarkıcı)

Circular photo pattern

2 Component

artist-card

Grid card - Circular photo

• Props: $artist, $size
• Circular photo (aspect-square rounded-full)
• Play button bottom-right (hover)
• Name below center

artist-hero

Detail page header

• Props: $artist
• Large circular photo (200x200+)
• Bio section
• Albums count, songs count
• Below: Top songs + Albums grid

Context Menu Actions

• Play All Songs
• Add to Favorites
• Share Artist

Playlist

3 varyasyon - Quick access, Grid, Hero

3 Component

playlist-quick-card

Homepage 2x4 quick access

• Horizontal layout
• 64x64 cover + title
• Play button sağ alt (hover)

playlist-card

Grid card

• Square cover
• Play button + 3-dot hover
• Edit button (if mine)

playlist-hero

Detail page

• Large cover + gradient
• Song count, duration
• Below: song-row list

Context Menu Actions

• Play Playlist
• Edit Playlist (if mine)
• Add to Favorites
• Share Playlist

Genre / Sector / Radio

Benzer pattern - Her biri için 2 component

6 Component

Genre (Tür)

genre-card

Gradient bg + emoji overlay

genre-hero

Detail page header

Sector (Sektör)

sector-card

Icon + gradient bg

sector-hero

Detail page header

Radio

EKSİK!
radio-card

Grid card ✅

radio-hero ❌

Detail page YOK - YAPILMALI!

Özel Component'ler

Favorites, Queue, Search gibi özel durumlar

4 Component

favorites-grid

Tab-based favorites page

• Tabs: All / Songs / Albums / Playlists
• Mixed entity grid (polymorphic)
• Empty state per tab

search-results

Search results page

• Section per entity type
• "View all" link per section
• Empty state

recent-played

Recently played section (optional)

• Backend tracking var ✅
• Frontend view yok ❌
• Homepage section veya ayrı sayfa

empty-state

Universal empty state

• Props: $icon, $title, $message, $cta
• Reusable across all entity pages

Modals & Overlays

Popup ve overlay component'leri

Modals (6 adet)

rating-modal

Şarkı puanlama - 1-5 yıldız

playlist-select-modal

"Add to playlist" action

create-playlist-modal

Yeni playlist oluştur

device-limit-modal

Cihaz limiti uyarısı

device-selection-modal

Cihaz seçimi

auth-modal

Login/Register popup

Overlays (4 adet)

queue-overlay

Sağdan açılır çalma sırası

  • • Now playing section
  • • Queue list (drag & drop)
  • • Clear queue button

lyrics-overlay

Şarkı sözleri görünümü

keyboard-shortcuts-overlay

Klavye kısayolları rehberi

loading-overlay

Full-screen loading indicator

Context Menu (Sağ Tıklama)

Universal component - Entity type'a göre dinamik action'lar

Nasıl Çalışır?

Tetikleme

Desktop: Right-click (contextmenu event)
Mobile: Long-press 500ms + vibration
Touch move: Cancel if moved >10px

Alpine.js Store

$store.contextMenu.openContextMenu(
  $event,
  'song', // type
  { id: 123, title: '...' }
)

Entity Type → Action Mapping

Entity Type Actions
song Play Next • Add to Queue • Add to Playlist • Go to Album • Go to Artist • Favorite • Share • Rate
album Play • Go to Artist • Favorite • Share
artist Play All • Favorite • Share
playlist Play • Edit (if mine) • Favorite • Share
genre Play Genre • View Genre Page
sector View Sector Page
radio Play Radio • View Radio Page

Component Kullanımı

// Her card/row component'inde:
<div
@contextmenu.prevent="$store.contextMenu.openContextMenu($event, 'song', song)"
@touchstart="handleTouchStart"
@touchend="handleTouchEnd"
@touchmove="handleTouchMove"
>
{{ $song->title }}
</div>

Öncelik Matrisi

Hangi component önce yapılmalı?

FAZ 1: KRİTİK En çok kullanılan - Önce bunlar

Core Song Components (5)

  • song-row
  • song-card
  • song-queue-item
  • song-sidebar-item
  • context-menu (song actions)

Album & Playlist (4)

  • album-card
  • album-hero
  • playlist-card
  • playlist-hero
Tahmini süre: 4-5 gün

FAZ 2: ÖNEMLİ Ana entity'ler

Artist (2)

  • • artist-card
  • • artist-hero

Genre (2)

  • • genre-card
  • • genre-hero

Sector (2)

  • • sector-card
  • • sector-hero
Tahmini süre: 2-3 gün

FAZ 3: EK ÖZELLIKLER Modals, overlays, eksik sayfalar

Radio (2)

  • • radio-card
  • • radio-hero (ŞU AN YOK!)

Modals (3)

  • • rating-modal
  • • playlist-select-modal
  • • create-playlist-modal

Overlays (2)

  • • queue-overlay
  • • lyrics-overlay

Favorites (1)

  • • favorites-grid
Tahmini süre: 2-3 gün

Toplam Süre Tahmini

8-11 gün
~29

Toplam Component

11

Entity

1

Context Menu

10

Modals + Overlays

Kodlama Checklist

Tüm component'lerin listesi - İşaretleyerek takip edin

Song Components (5)

Album Components (2)

Artist Components (2)

Playlist Components (3)

Genre / Sector / Radio (6)

Modals & Overlays (10)

Özet & Next Steps

Bu planı onayladıktan sonra yapılacaklar

11

Entity Type

~29

Component

8-11

Gün (Tahmini)

🎯 Hemen Başlanabilir

1.

Git branch oluştur: git checkout -b feature/muzibu-components

2.

Component klasörü oluştur: resources/views/components/muzibu/

3.

İlk component: song-row.blade.php (En çok kullanılan)

4.

Test sayfası: albums/show.blade.php track list'inde dene

Önemli Notlar

  • Radio Detail Page şu an yok - radio-hero component ile birlikte oluşturulmalı!
  • Context Menu universal component - tüm entity'lerde aynı component kullanılacak, sadece action'lar değişecek
  • Song component'leri öncelik - En fazla kullanılan ve en çok varyasyona sahip
  • Modals & Overlays Faz 3'te - Core component'ler tamamlandıktan sonra