Basit Anlatım (Herkes İçin)
Ne Bulundu: Muzibu sitesinde 8 adet hazır "şablon parça" (component) var. Bunlar şarkı kartları, albüm kartları, playlist kartları gibi tekrar tekrar kullanılan parçalar.
Sorun: Bu şablonların bazıları kullanılmıyor! Onun yerine aynı kodlar tekrar tekrar yazılmış. Bu hem karmaşıklık yaratıyor, hem de bir değişiklik yapınca her yeri tek tek düzeltmek gerekiyor.
Çözüm: Hazır şablonları kullanmak. Böylece kod daha temiz olur, bir yerde değişiklik yapınca her yere yansır.
Fayda: ~175 satır kod azalır, bakım kolaylaşır, tutarlılık artar.
Mevcut Component'ler (8 Adet)
Şarkı liste satırı
Albüm grid kartı
Playlist grid kartı
Tür gradient kartı
Sektör kartı
Radyo kartı
3-dot menü
Playlist oluşturma
Inline HTML Sorunları (Kritik!)
Ana Sayfa: Quick Access Cards
Mevcut Durum
resources/views/themes/muzibu/index.blade.php- Satır 63-114: ~50 satır inline HTML
- Context menu, touch handling, preview modu inline yazılmış
- Component yok:
playlist-quick-card
Önerilen Çözüm
{{-- YENİ: playlist-quick-card.blade.php --}}
@props(['playlist', 'index' => 0])
<!-- Yatay kart (h-16, flex) -->
<div class="playlist-card group flex items-center..."
x-on:contextmenu.prevent.stop="..."
x-on:touchstart="...">
...
</div>50 satır → 1 satır component çağrısı
artists/show: Album Kartları
Mevcut Durum
resources/views/themes/muzibu/artists/show.blade.php- Satır 56-84: ~28 satır inline HTML
- album-card component'i VAR ama kullanılmıyor!
- Context menu YOK
- Favorite button YOK
- Touch handling YOK
Önerilen Çözüm
{{-- ÖNCE (28 satır) --}}
@foreach($albums as $album)
<a href="..." class="album-card group...">
<div class="relative mb-3">
@if($album->media_id...)
...
</div>
</a>
@endforeach
{{-- SONRA (3 satır) --}}
@foreach($albums as $album)
<x-muzibu.album-card :album="$album" />
@endforeach28 satır → 1 satır component
favorites/index: Tüm Kartlar
Mevcut Durum
Modules/Muzibu/.../favorites/index.blade.php- Satır 44-158: ~114 satır inline HTML!
- Song kartı: inline (song-row/song-card YOK)
- Album kartı: inline (album-card VAR ama kullanılmıyor)
- Playlist kartı: inline (playlist-card VAR ama kullanılmıyor)
Önemli: Favoriler sayfasındaki kartlarda context menu ve touch handling YOK!
Önerilen Çözüm
@foreach($favorites as $favorite)
@php $item = $favorite->favoritable; @endphp
@if($item instanceof Song)
<x-muzibu.song-card :song="$item" />
@elseif($item instanceof Album)
<x-muzibu.album-card :album="$item" />
@elseif($item instanceof Playlist)
<x-muzibu.playlist-card :playlist="$item" />
@endif
@endforeach114 satır → 10 satır (song-card oluşturulmalı)
Oluşturulması Gereken Component'ler
playlist-quick-card
YENİAna sayfa Quick Access bölümü için yatay playlist kartı
Kullanım: Ana sayfa Quick Access (8 adet)
song-card
YENİFavoriler ve grid görünüm için şarkı kartı
Kullanım: favorites/index, search results
artist-card
ÖNERİSanatçı listesi ve arama için yuvarlak kart
Kullanım: artists/index (gelecekte), search results
empty-state
ÖNERİBoş içerik durumu için merkezi component
Kullanım: Tüm liste sayfaları (albums, playlists, favorites, etc.)
Sayfa Bazlı Component Kullanım Durumu
| Sayfa | song-row | album-card | playlist-card | genre-card | Durum |
|---|---|---|---|---|---|
| index.blade.php (Ana Sayfa) | Quick Access inline | ||||
| albums/index.blade.php | OK | ||||
| albums/show.blade.php | OK | ||||
| playlists/index.blade.php | OK | ||||
| playlists/show.blade.php | OK | ||||
| genres/index.blade.php | OK | ||||
| genres/show.blade.php | OK | ||||
| sectors/index.blade.php | OK (sector-card) | ||||
| sectors/show.blade.php | OK | ||||
| artists/show.blade.php | INLINE! | ||||
| favorites/index.blade.php | INLINE! |
Tasarımsal Sorunlar ve Simetri
Quick Access vs Playlist Card Tutarsızlığı
Quick Access (Inline)
- • Yatay layout (h-16)
- • 64x64 cover
- • Sadece title gösteriyor
- • Hover: Favorite + Menu buttons
Playlist Card (Component)
- • Dikey layout (aspect-square cover)
- • 300x300 cover
- • Title + şarkı sayısı
- • Play button + Favorite + Menu
Öneri: Quick Access için ayrı playlist-quick-card component oluştur.
Favorites Kartları Eksik Özellikler
Favorites sayfasındaki inline kartlarda eksik olanlar:
- Context menu (sağ tık) yok
- Touch handling (long-press) yok
- Playing badge yok
- Data attributes (infinite queue) yok
Öneri: Mevcut component'leri kullan - tüm özellikler hazır!
artists/show Album Kartları Küçük
Mevcut (Inline)
- • p-3 padding (küçük)
- • mb-3 margin
- • 200x200 cover
- • Sadece play button
album-card Component
- • p-4 padding (standart)
- • mb-4 margin
- • 300x300 cover
- • Play + Favorite + Menu
Öneri: album-card component kullan - tutarlılık sağlanır.
Önerilen Düzeltme Sırası
artists/show → album-card Kullan
En kolay düzeltme. Component zaten hazır, sadece değiştir.
<x-muzibu.album-card :album="$album" />
Kazanç: 28 satır → 1 satır
favorites/index → Mevcut Component'leri Kullan
album-card ve playlist-card hazır. song-card oluşturulmalı.
<x-muzibu.album-card />, <x-muzibu.playlist-card />
Kazanç: 114 satır → ~15 satır
song-card Component Oluştur
Favoriler ve arama sonuçları için grid şarkı kartı.
resources/views/components/muzibu/song-card.blade.php
Gerekli: favorites/index için
playlist-quick-card Component Oluştur
Ana sayfa Quick Access için yatay kart.
resources/views/components/muzibu/playlist-quick-card.blade.php
Kazanç: 50 satır inline → 1 satır component
Beklenen Kazanımlar
Teknik Faydalar
- Tek yerden değişiklik = her yere yansır
- Daha kolay bakım ve debug
- Tutarlı context menu ve touch handling
- Infinite queue data attributes her yerde
UX Faydaları
- Tüm sayfalarda aynı deneyim
- Favoriler sayfasında context menu çalışır
- Mobilde long-press her yerde çalışır
- Playing badge tutarlı gösterim