Modüler Dosya Yapısı ile Organizasyon
Sorun: Şu anda tüm sağ tık menüleri (context menu) tek bir JavaScript dosyasında yazılı. Şarkı menüsü, albüm menüsü, playlist menüsü - hepsi karmaşık bir kod yığını içinde gömülü durumda.
Çözüm: Her içerik türü için ayrı dosyalar oluşturacağız. Şarkı menüsü kendi dosyasında, albüm menüsü kendi dosyasında olacak. Bu sayede:
Benzetme: Şu anki durum tüm kıyafetlerin tek bir dolaba tıkılmış hali. Refactor sonrası her kıyafet türü için ayrı çekmeceler olacak - gömlekler ayrı, pantolonlar ayrı, ayakkabılar ayrı.
// actions/song.js
import { commonActions } from '../utils/actionBuilder.js';
export default function getSongActions(data) {
return [
// Çal
{ icon: 'fa-play', label: 'Çal', action: 'play' },
// Sıraya Ekle
{ icon: 'fa-plus-circle', label: 'Sıraya Ekle', action: 'addToQueue' },
{ divider: true },
// Favorilerime Ekle (dinamik label)
{
icon: 'fa-heart',
label: data.is_favorite ? 'Favorilerimden Çıkar' : 'Favorilerime Ekle',
action: 'toggleFavorite'
},
{ divider: true },
// Puan Ver
{ icon: 'fa-star', label: 'Puan Ver', action: 'rate' },
// Playliste Ekle
{
icon: 'fa-list',
label: 'Playliste Ekle',
action: 'addToPlaylist',
submenu: true
},
// Albüme Git
{
icon: 'fa-compact-disc',
label: 'Albüme Git',
action: 'goToAlbum',
visible: !!data.album_id
}
].filter(item => item.visible !== false);
}
// handlers/play.js
export function handlePlay(type, data) {
if (window.playContent) {
window.playContent(type, data.id);
}
Alpine.store('toast').show(
`▶️ Çalıyor: ${data.title}`,
'success'
);
}
// context-menus/index.js
import getSongActions from './actions/song.js';
import getAlbumActions from './actions/album.js';
import getPlaylistActions from './actions/playlist.js';
import getGenreActions from './actions/genre.js';
import getSectorActions from './actions/sector.js';
import getRadioActions from './actions/radio.js';
import getArtistActions from './actions/artist.js';
import { handlePlay } from './handlers/play.js';
import { handleAddToQueue } from './handlers/addToQueue.js';
import { handleToggleFavorite } from './handlers/toggleFavorite.js';
import { handleRate } from './handlers/rate.js';
// ... diğer handler'lar
const actionMap = {
song: getSongActions,
album: getAlbumActions,
playlist: getPlaylistActions,
genre: getGenreActions,
sector: getSectorActions,
radio: getRadioActions,
artist: getArtistActions
};
const handlerMap = {
play: handlePlay,
addToQueue: handleAddToQueue,
toggleFavorite: handleToggleFavorite,
rate: handleRate,
// ... diğer handler'lar
};
export function registerContextMenuStore() {
Alpine.store('contextMenu', {
// ... store implementation
getActionsForType(type, data) {
const getActions = actionMap[type];
return getActions ? getActions(data) : [];
},
executeAction(action) {
const handler = handlerMap[action];
if (handler) {
handler(this.type, this.data);
}
}
});
}
Yeni modüler klasörleri oluştur:
Her content type için action dosyası yarat:
executeAction() içindeki switch-case'leri ayrı handler dosyalarına taşı:
Ortak kullanılan fonksiyonları utils'e taşı:
muzibu-store.js içindeki contextMenu store'u yeniden yaz:
Değişiklikleri test et ve build al:
Tüm content type'lar için context menu'leri test et:
Refactor tamamlandıktan sonra:
Hybrid JavaScript yaklaşımı ile modüler context menu sistemi kurulması şiddetle tavsiye edilir.
Bu refactor kısa vadede biraz efor gerektirecek (~2-3 saat), ancak uzun vadede:
ROI (Return on Investment): Yüksek! İlk 1 ay içinde kendini amorti eder.