mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 19:01:08 +02:00
7a56699d45
Combines LightWrite (beat/lyrics editor) and Mukke (iOS music player) into a single web-based music workspace app. Archives the old Mukke mobile app. - Rename: @lightwrite/* → @mukke/*, all branding, configs, Dockerfiles - New DB schemas: songs, playlists, playlist_songs + songId FK on projects - New backend modules: SongModule, PlaylistModule, LibraryModule - New web: app shell with sidebar, library (songs/albums/artists/genres), web player (queue/shuffle/repeat/MediaSession), playlists, search, upload, dashboard, album/artist/genre detail pages - Auth: add forgot-password + reset-password pages, extend auth store - Tests: 40 backend unit tests (song, playlist, library services) - Config: env generation, MinIO bucket, docker-compose prod, cloudflare - Docs: update CLAUDE.md, auth guidelines with SvelteKit checklist Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import { useState } from 'react';
|
|
import { Pressable, View, Text, Modal } from 'react-native';
|
|
|
|
import type { SortField, SortDirection } from '~/types';
|
|
import { useTheme } from '~/utils/themeContext';
|
|
|
|
const SORT_OPTIONS: { field: SortField; label: string }[] = [
|
|
{ field: 'title', label: 'Titel' },
|
|
{ field: 'artist', label: 'Künstler' },
|
|
{ field: 'album', label: 'Album' },
|
|
{ field: 'addedAt', label: 'Hinzugefügt' },
|
|
{ field: 'playCount', label: 'Wiedergaben' },
|
|
];
|
|
|
|
interface SortMenuProps {
|
|
currentField: SortField;
|
|
currentDirection: SortDirection;
|
|
onSort: (field: SortField, direction: SortDirection) => void;
|
|
}
|
|
|
|
export function SortMenu({ currentField, currentDirection, onSort }: SortMenuProps) {
|
|
const { colors } = useTheme();
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Pressable onPress={() => setVisible(true)} style={{ padding: 8 }}>
|
|
<Ionicons name="swap-vertical" size={22} color={colors.primary} />
|
|
</Pressable>
|
|
|
|
<Modal visible={visible} transparent animationType="fade">
|
|
<Pressable
|
|
onPress={() => setVisible(false)}
|
|
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'flex-end' }}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: colors.card,
|
|
borderTopLeftRadius: 16,
|
|
borderTopRightRadius: 16,
|
|
padding: 20,
|
|
paddingBottom: 40,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 18, fontWeight: '700', color: colors.text, marginBottom: 16 }}>
|
|
Sortieren
|
|
</Text>
|
|
{SORT_OPTIONS.map((opt) => {
|
|
const isActive = opt.field === currentField;
|
|
return (
|
|
<Pressable
|
|
key={opt.field}
|
|
onPress={() => {
|
|
if (isActive) {
|
|
onSort(opt.field, currentDirection === 'asc' ? 'desc' : 'asc');
|
|
} else {
|
|
onSort(opt.field, 'asc');
|
|
}
|
|
setVisible(false);
|
|
}}
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 14,
|
|
borderBottomWidth: 0.5,
|
|
borderBottomColor: colors.border,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 16,
|
|
color: isActive ? colors.primary : colors.text,
|
|
fontWeight: isActive ? '600' : '400',
|
|
}}
|
|
>
|
|
{opt.label}
|
|
</Text>
|
|
{isActive && (
|
|
<Ionicons
|
|
name={currentDirection === 'asc' ? 'arrow-up' : 'arrow-down'}
|
|
size={18}
|
|
color={colors.primary}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
</Pressable>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|