Media Manager - Kritik Sorunlar & Yeniden Tasarım

Tarih: 2025-11-21 | Tenant: ixtif.com | Sayfa: /admin/mediamanagement

Tespit Edilen Kritik Sorunlar

1. Shift ile Toplu Seçim Tutarsızlığı Kritik

media-library-manager.blade.php:268-280

  • Sorun: handleCheckboxClick fonksiyonu checkbox'ın mevcut durumunu (checked/unchecked) kontrol etmiyor
  • Shift+click yapıldığında sadece seçim yapılıyor, seçim kaldırma (deselection) mantığı yok
  • $wire.get('selectedItems') async çağrı - race condition riski var
  • Kullanıcı beklenmedik seçimlerle karşılaşıyor

2. Silme Sonrası Lightbox Index Kayması Kritik

media-library-manager.blade.php:240-248, 399-448

  • Sorun: mediaList Alpine state'i silme sonrası güncellenmiyor
  • currentIndex eski array'e işaret ediyor - yanlış medya gösteriliyor
  • Silinen item'ın lightbox'ta hayalet olarak kalması
  • Navigation (ileri/geri) tutarsız çalışıyor

3. Küçük Dosyaların Gereksiz Büyütülmesi Yüksek

media-library-manager.blade.php:287-307, 314

  • Sorun: ratio ratio-1x1 tüm dosyaları kare yapıyor
  • object-fit-cover küçük görselleri stretch ediyor, kalite kaybı
  • 100x100 piksel ikon 200x200 alana zorla sığdırılıyor - bulanıklaşıyor
  • Gerçek boyut/oran bilgisi görünmüyor

4. FileManager Standartlarına Uymayan UX Yüksek

  • List View Yok: Sadece grid mevcut - detaylı bilgi görmek zor
  • Sidebar Yok: Collection/klasör navigasyonu için sol panel yok
  • Breadcrumb Yok: Nerede olduğunu anlamak güç
  • Context Menu Yok: Sağ tık menüsü yok
  • Drag & Drop Reorder Yok: Sıralama değiştirilemez
  • Keyboard Shortcuts Yetersiz: Ctrl+A, Delete, F2 gibi

Modern FileManager Standartları

En iyi file manager'lardan (elFinder, Dropzone, VS Code Explorer) alınması gereken özellikler:

Dual View Mode Grid (thumbnail) ve List (detaylı) görünümü arasında geçiş
Sidebar Navigation Sol panelde collection/folder tree yapısı
Quick Actions Toolbar Upload, New Folder, Delete, Download butonları
Context Menu Sağ tık ile hızlı işlemler (rename, delete, copy URL)
Keyboard Shortcuts Ctrl+A, Delete, F2, Enter, Escape
Status Bar Seçili item sayısı, toplam boyut, görünüm bilgisi
Preview Panel Sağ tarafta seçili dosyanın detayları ve büyük önizleme
Infinite Scroll / Lazy Load Performanslı yükleme, pagination yerine

Yapılacaklar - Yeniden Tasarım Planı

1. Shift Selection Mantığını Düzelt Kritik

Strateji: Checkbox'ın mevcut durumunu kontrol et, hem seçim hem kaldırma işlemini destekle

  • lastCheckedIndex ile birlikte lastCheckedState (true/false) tut
  • Shift+click yapıldığında aralıktaki tüm item'ları aynı state'e getir
  • Async yerine sync state yönetimi kullan
  • Visual feedback ekle (selection highlight)

Beklenen Sonuç: Windows Explorer gibi tutarlı çoklu seçim

2. Lightbox State Senkronizasyonu Kritik

Strateji: Silme işlemi sonrası lightbox state'ini Livewire event ile güncelle

  • deleteMedia sonrası mediaList'i yeniden hesapla
  • currentIndex'i boundary check ile güncelle
  • Silinen ID'yi mediaList'ten çıkar ve index'leri kaydır
  • Livewire dispatch ile Alpine state'e bildir

Beklenen Sonuç: Silme sonrası lightbox doğru medyayı gösterir

3. Akıllı Thumbnail Sistemi Yüksek

Strateji: Gerçek boyuta göre uyarlanabilir görüntüleme

  • object-fit: contain kullan (cover yerine)
  • Küçük dosyalar için maksimum boyut sınırı koy
  • Boyut badge'i ekle (800x600, 64KB)
  • Hover'da gerçek boyutta preview

Beklenen Sonuç: Küçük ikonlar bulanıklaşmaz, boyut bilgisi görünür

4. View Mode Switcher (Grid/List) Yüksek

Strateji: İki görünüm modu arasında geçiş butonu

  • Grid View: Mevcut thumbnail card görünümü
  • List View: Tablo formatında detaylı bilgi (isim, boyut, tarih, collection, model)
  • Kullanıcı tercihini localStorage'da sakla
  • List view'da sortable columns

Beklenen Sonuç: Kullanıcı ihtiyacına göre görünüm seçebilir

5. Sidebar Collection Navigator Orta

Strateji: Sol panelde collection tree yapısı

  • Tüm collection'ları listele (folder gibi)
  • Her collection'ın yanında item sayısı
  • Tıklayınca o collection'ı filtrele
  • Collapse/expand destekli

Beklenen Sonuç: Hızlı collection navigasyonu

6. Context Menu (Sağ Tık) Orta

Strateji: Custom right-click menu

  • Open / Preview
  • Copy URL
  • Rename (F2)
  • Delete
  • Download
  • Properties / Details

Beklenen Sonuç: Hızlı erişim, daha az tıklama

7. Keyboard Shortcuts Orta

Strateji: Standart file manager kısayolları

  • Ctrl+A: Tümünü seç
  • Delete: Seçilileri sil
  • F2: Yeniden adlandır
  • Enter: Önizleme aç
  • Escape: Seçimi temizle / Modal kapat
  • Ctrl+C: URL kopyala

Beklenen Sonuç: Power user için hızlı kullanım

8. Status Bar Orta

Strateji: Alt kısımda bilgi çubuğu

  • Toplam item sayısı
  • Seçili item sayısı ve toplam boyutu
  • Aktif filtreler
  • Görünüm modu ikonu

Beklenen Sonuç: Anlık durum bilgisi

Mevcut vs Hedef Karşılaştırma

Mevcut Durum
  • Tek görünüm modu (grid)
  • Shift seçim bozuk
  • Küçük dosyalar büyük görünüyor
  • Sidebar yok
  • Sağ tık menüsü yok
  • Kısayol tuşları yetersiz
  • Silme sonrası lightbox kayıyor
Hedef
  • Grid + List view
  • Tutarlı çoklu seçim
  • Akıllı thumbnail boyutlama
  • Collection sidebar
  • Context menu
  • Tam keyboard support
  • Senkronize lightbox state

Uygulama Öncelik Sırası

Kritik bug'lar önce, UX geliştirmeleri sonra:

Faz 1 - Bug Fixes

  1. Shift selection düzeltmesi
  2. Lightbox state sync
  3. Thumbnail boyutlama

Faz 2 - Core Features

  1. View mode switcher (Grid/List)
  2. Keyboard shortcuts
  3. Status bar

Faz 3 - Advanced Features

  1. Sidebar navigator
  2. Context menu
  3. Drag & drop reorder