Sistem Analizi

Muzibu Card Sistemi Analizi

Component vs Inline Card Kullanım Karşılaştırması

7 Ocak 2026 Versiyon 1 muzibu.com

Basit Anlatım (Herkes İçin)

Ne Bulduk? Muzibu'da kartları (şarkı, albüm, playlist vb.) göstermek için iki farklı sistem kullanılmış. Bu durum karışıklığa ve tutarsızlığa yol açıyor.

Component Sistemi

Lego parçası gibi düşünün. Bir kez yaparsınız, her yerde kullanırsınız. Değişiklik yapınca tüm sitede güncellenir.

Inline Sistem

Her sayfaya ayrı ayrı yazılmış kodlar. Değişiklik yapınca her yeri tek tek güncellemek gerekir.

Sorun Ne?

  • Aynı kartın iki farklı görünümü var (tutarsız tasarım)
  • Bir yerde düzeltme yapınca diğeri eski kalıyor
  • Play butonu bazı yerlerde sağ altta, bazı yerlerde ortada
  • Favori ikonu bazı yerlerde hep görünüyor, bazılarında sadece üzerine gelince

Teknik Özet

10
Component Card
components/muzibu/
3
Inline Card
themes/muzibu/components/
6
Kritik Tutarsızlık
Düzeltilmesi gereken

Component Card'lar (Doğru Yaklaşım)

10 Adet

resources/views/components/muzibu/

Component Dosya Preview Compact Kullanım
x-muzibu.song-card song-card.blade.php true false Şarkı listeleri, sidebar
x-muzibu.album-card album-card.blade.php true false Albüm grid, favoriler
x-muzibu.playlist-card playlist-card.blade.php true false Playlist listeleri
x-muzibu.artist-card artist-card.blade.php - false Sanatçı grid
x-muzibu.genre-card genre-card.blade.php false false Tür listeleri
x-muzibu.radio-card radio-card.blade.php false false Radyo listeleri
x-muzibu.sector-card sector-card.blade.php false false Sektör listeleri
x-muzibu.my-playlist-card my-playlist-card.blade.php true false Kullanıcı playlistleri
x-muzibu.genre-quick-card genre-quick-card.blade.php - - Ana sayfa yatay tür
x-muzibu.playlist-quick-card playlist-quick-card.blade.php - - Ana sayfa yatay playlist

Inline Card'lar (Tutarsızlık Kaynağı)

3 Adet

resources/views/themes/muzibu/components/

Bu kartlar horizontal-scroll-section içinde kullanılıyor. Aynı işlevi gören component card'lar zaten mevcut!

album-card.blade.php

  • preview: false (default)
  • size: small/normal/large
  • Container: div (a değil)

playlist-card.blade.php

  • preview: false (default)
  • size: small/normal/large
  • Play: ortada overlay

radio-card.blade.php

  • preview: desteklenmiyor
  • size: small/normal/large
  • Farklı hover efekti

Tutarsızlık Karşılaştırma Matrisi

Özellik Component Card Inline Card Durum
Preview Default true false TUTARSIZ
Size Sistemi compact: true/false size: small/normal/large TUTARSIZ
Container Element <a> tag (tıklanabilir) <div> tag TUTARSIZ
Play Button Pozisyon Sağ alt köşe Ortada overlay TUTARSIZ
Favori İkonu Her zaman görünür Sadece hover'da TUTARSIZ
Genişlik Sistemi w-[190px] (compact) w-40 sm:w-44 (responsive) TUTARSIZ

Kullanım Haritası

Component Card Kullanan Sayfalar

  • albums/index.blade.php
  • playlists/index.blade.php
  • genres/index.blade.php
  • genres/show.blade.php
  • sectors/index.blade.php
  • radios/index.blade.php
  • artists/index.blade.php
  • favorites/index.blade.php
  • listening-history.blade.php
  • songs/index.blade.php
  • sidebar-right.blade.php
  • Tüm grid partials

Inline Card Kullanan Sayfalar

  • home.blade.php horizontal-scroll-section içinde
  • dashboard.blade.php horizontal-scroll-section içinde

Öneri: horizontal-scroll-section component'ı, inline card yerine component card'ları kullanacak şekilde güncellenebilir.

Dosya Yapısı

Component Cards 

resources/views/components/muzibu/
├── song-card.blade.php
├── album-card.blade.php
├── playlist-card.blade.php
├── artist-card.blade.php
├── genre-card.blade.php
├── radio-card.blade.php
├── sector-card.blade.php
├── my-playlist-card.blade.php
├── genre-quick-card.blade.php
└── playlist-quick-card.blade.php

Inline Cards (Gereksiz) 

resources/views/themes/muzibu/components/
├── album-card.blade.php      ← Duplicate!
├── playlist-card.blade.php   ← Duplicate!
└── radio-card.blade.php      ← Duplicate!

Öneriler

1

Inline Card'ları Kaldır

themes/muzibu/components/ altındaki 3 inline card dosyasını sil. Bunların yerine component card'ları kullan.

2

horizontal-scroll-section'ı Güncelle

Bu component içinde @include() yerine <x-muzibu.album-card> gibi component syntax'ı kullan.

3

Size Sistemini Standardize Et

Component card'lara size prop'u ekle veya compact prop'unu genişlet (small/normal/large desteği).

4

Tek Kaynak Prensibi (Single Source of Truth)

Her card tipi için TEK dosya olsun. Değişiklik yapınca tüm site güncellenir.