Tamamlandı

Swipe-to-Dismiss Implementasyonu

Muzibu Mobile - Tutarlı Kapatma Deneyimi

29 Aralık 2025

Basit Anlatim (Herkes Icin)

iPhone'larda alisik oldugunuz "asagi kaydirarak kapatma" ozelligini Muzibu'nun tum acilir panellerine ekledik. Artik kullanicilar X butonuna basmadan, parmaginizi asagi (veya yana) kaydirarak modal ve panelleri kapatabilir. Her yerde ayni hareket = kolay ogrenme.

Kullanici deneyimi: Tek elle telefon kullanirken X butonuna uzanmak zor olabilir. Swipe ile kapatma daha dogal ve hizli bir deneyim sunuyor.

Sonuc Ozeti

5
Component Guncellendi
1
Component Beklemede

Tamamlanan Componentler

🎵

Playlist Select Modal

Sarkiyi playlist'e ekleme paneli

TAMAMLANDI
Yon: Asagi Threshold: 80px Handle: Ust cizgi
📋

Queue Panel (Siradakiler)

Calma sirasindaki sarkilar listesi

TAMAMLANDI
Yon: Saga (panel sagdan aciliyor) Threshold: 100px Handle: Ust cizgi
🎛️

Player Dropdown Menu

3 nokta menusu (favoriler, siradakiler vs.)

TAMAMLANDI
Yon: Asagi Threshold: 60px Handle: Ust cizgi

Create Playlist Modal

Yeni playlist olusturma formu

TAMAMLANDI
Yon: Asagi (bottom sheet) Threshold: 80px Handle: Ust cizgi

Song Context Menu

Sarki kartindaki 3 nokta menusu

TAMAMLANDI
Yon: Asagi (bottom sheet) Threshold: 80px Mobilde tamamen yeniden tasarlandi

Beklemede

Mobile Header Menu (Sidebar)

Hamburger menusu

BEKLEMEDE
Sebep: Sidebar mevcut CSS transition sistemi kullaniyor. Alpine.js x-data eklendiginde animasyonlar cakisti ve sidebar bozuldu. Backdrop'a tiklama veya hamburger butonuyla kapatma calisiyor.

Teknik Detaylar (Gelistiriciler Icin)

Kullanilan Pattern:

x-data="{ startY: 0, currentY: 0, isDragging: false }"
:style="isDragging && currentY > 0 ?
    `transform: translateY(${currentY}px);
     opacity: ${Math.max(0.5, 1 - currentY/200)}` : ''"

@touchstart="startY = $event.touches[0].clientY; isDragging = true; currentY = 0"
@touchmove.prevent="if(isDragging) { currentY = Math.max(0, $event.touches[0].clientY - startY); }"
@touchend="if(currentY > 80) { closeModal(); } isDragging = false; currentY = 0;"

Handle Bar Stili:

w-12 h-1.5 bg-zinc-600 rounded-full

Pull-to-Refresh Engelleme:

touch-none class + overscroll-behavior: contain

Desktop Koruma:

Swipe handle'lar sm:hidden veya lg:hidden ile gizleniyor

Degisen Dosyalar

M resources/views/themes/muzibu/components/player.blade.php
M resources/views/themes/muzibu/components/queue-overlay.blade.php
M resources/views/themes/muzibu/components/playlist-select-modal.blade.php
M resources/views/themes/muzibu/components/create-playlist-modal.blade.php
M resources/views/themes/muzibu/components/context-menu.blade.php

Ilgili Dokumanlar

Swipe-to-Dismiss Plan Dokumani