Muzibu Component Plan - İç Sayfalardan Başla

Strateji: İç Sayfalardan Başla

✅ Neden İç Sayfalardan Başlamalıyız?

İç sayfalarda test ederek ilerleriz

Component çalıştığını görürüz

Hata varsa erken tespit ederiz

Component hazır olduktan sonra anasayfaya ekleriz

Anasayfa için özel component gerekmez

Aynı component'leri kullanırız

📋 Genel Akış

1

İç Sayfa Component

2

Test Et

3

Anasayfaya Uygula

YENİ ÖNCELİK SIRASI

1

FAZ 1: DETAY SAYFA COMPONENTS

2-3 gün • albums/show, playlists/show için

Yapılacak Component'ler

1. song-row ÖNCELİK 1

Şarkı liste satırı - en çok kullanılan!

2. context-menu ÖNCELİK 1

Sağ tık menü - her yerde lazım

3. empty-state ÖNCELİK 2

Boş durum mesajı

Test Edilecek Sayfalar

albums/show.blade.php

→ Şarkı listesinde <x-muzibu.song-row> kullan

playlists/show.blade.php

→ Şarkı listesinde <x-muzibu.song-row> kullan

favorites/index.blade.php

→ Şarkı listesinde <x-muzibu.song-row> kullan

Örnek Kullanım

{{-- albums/show.blade.php --}}

<!-- Şarkı listesi -->
@foreach($album->songs as $song)
    <x-muzibu.song-row
        :song="$song"
        :index="$loop->iteration"
        :showCover="true"
        :showArtist="false"
    />
@endforeach

@if($album->songs->isEmpty())
    <x-muzibu.empty-state
        icon="music"
        title="Şarkı Yok"
        message="Bu albümde henüz şarkı bulunmuyor"
    />
@endif

2

FAZ 2: LİSTE SAYFA COMPONENTS

2 gün • albums/index, playlists/index, artists/index için

Yapılacak Component'ler

4. album-card

Albüm grid kartı

5. playlist-card

Playlist grid kartı

6. artist-card

Sanatçı kartı (yuvarlak)

7. genre-card

Tür kartı (gradient)

8. sector-card

Sektör kartı

Test Edilecek Sayfalar

albums/index.blade.php

playlists/index.blade.php

artists/index.blade.php

genres/index.blade.php

sectors/index.blade.php

Örnek Kullanım

{{-- albums/index.blade.php --}}

<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
    @foreach($albums as $album)
        <x-muzibu.album-card :album="$album" />
    @endforeach
</div>

3

FAZ 3: ANASAYFA

1 gün • Hazır component'leri kullan

Önemli Not

YENİ COMPONENT YAPILMAYACAK!

Faz 1 ve 2'deki hazır component'leri kullanacağız

Sadece layout düzenleyeceğiz (grid, horizontal scroll)

Anasayfa Bölümleri

Quick Access (2x4 grid)

→ playlist-quick-card (yeni!)

Featured Playlists

→ playlist-card (hazır!)

New Albums

→ album-card (hazır!)

Popular Songs

→ song-card (yeni!)

Genres

→ genre-card (hazır!)

Ek Component'ler

9. playlist-quick-card

Yatay kart (Spotify tarzı)

10. song-card

Şarkı grid kartı

4

FAZ 4: EKSTRA COMPONENTS

2 gün • Özel component'ler, modals

Özel Components

• song-queue-item
• song-sidebar-item
• radio-card
• loading-skeleton

Modals

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

Overlays

• queue-overlay
• lyrics-overlay

TOPLAM SÜRE

17 Component • 4 Faz

7-8 GÜN

İLK ADIM: song-row Component

1. Component Dosyasını Oluştur

Dosya:

resources/views/components/muzibu/song-row.blade.php

{{-- song-row.blade.php --}}
@props(['song', 'index', 'showCover' => true, 'showArtist' => true])

<div class="flex items-center gap-3 p-2 rounded
            hover:bg-white/5 group cursor-pointer"
     @click="playSong({{ $song->id }})"
     @contextmenu.prevent="openContextMenu($event, 'song', {{ $song->id }})">

    {{-- Sıra No / Play Icon --}}
    <span class="w-6 text-center text-slate-500">
        <span class="group-hover:hidden">{{ $index }}</span>
        <i class="fas fa-play hidden group-hover:block text-white"></i>
    </span>

    {{-- Cover --}}
    @if($showCover)
    <img src="{{ $song->cover_url }}"
         class="w-10 h-10 rounded">
    @endif

    {{-- Title + Artist --}}
    <div class="flex-1 min-w-0">
        <div class="text-white truncate">{{ $song->title }}</div>
        @if($showArtist)
        <div class="text-slate-400 text-sm truncate">
            {{ $song->artist->name }}
        </div>
        @endif
    </div>

    {{-- Duration --}}
    <span class="text-slate-500 text-sm">
        {{ $song->duration_formatted }}
    </span>

    {{-- 3-dot Menu --}}
    <button class="opacity-0 group-hover:opacity-100">
        <i class="fas fa-ellipsis-v text-slate-400"></i>
    </button>
</div>

2. Test Et: albums/show.blade.php

{{-- albums/show.blade.php --}}

{{-- Şarkı Listesi --}}
<div class="mt-6">
    @foreach($album->songs as $song)
        <x-muzibu.song-row
            :song="$song"
            :index="$loop->iteration"
            :showCover="true"
            :showArtist="false"
        />
    @endforeach
</div>

Test Adımları:

1. Albüm detay sayfasına git
2. Şarkı listesini kontrol et
3. Hover efekti çalışıyor mu?
4. Sağ tık menü açılıyor mu?
5. Çalışıyorsa → Diğer sayfalara uygula

📋 Tüm Component Listesi (17 Adet)

Şarkı (4)

1. song-row
2. song-card
3. song-queue-item
4. song-sidebar-item

Kartlar (7)

5. album-card
6. playlist-card
7. playlist-quick-card
8. artist-card
9. genre-card
10. sector-card
11. radio-card

Universal (3)

12. context-menu
13. empty-state
14. loading-skeleton

Modals (3)

15. rating-modal
16. playlist-select-modal
17. create-playlist-modal