Add files via upload

2026-05-08 02:54:57 +05:00 · 2026-05-08 02:54:57 +05:00 · 73ed266994
commit 73ed266994
parent 235427ce97
21 changed files with 17879 additions and 1046 deletions
--- a/app.json
+++ b/app.json
@ -1,7 +1,7 @@
 {
  "expo": {
-    "name": "Burmalda Music",
-    "slug": "burmalda-music",
+    "name": "NodeShiftMusic",
+    "slug": "nodeshiftmusic",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
@ -14,7 +14,7 @@
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": false,
-      "bundleIdentifier": "space.nodeshift.burmalda",
+      "bundleIdentifier": "com.nodeshiftmusic",
      "buildNumber": "1",
      "infoPlist": {
        "UIBackgroundModes": ["audio"],
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, ActivityIndicator, Linking } from 'react-native';
 import { Tabs, router } from 'expo-router';
 import { BlurView } from 'expo-blur';
 import Svg, { Path, Circle, Line, Polyline } from 'react-native-svg';
 import { Colors, TAB_BAR_HEIGHT } from '../../constants/theme';
-import { useAuth, usePlayer, useLikes } from '../../store';
+import { useAuth, usePlayer, useLikes, useHidden, usePlaylists } from '../../store';
 import { useAudio } from '../../hooks/useAudio';
 import MiniPlayer from '../../components/MiniPlayer';
 import Player from '../../components/Player';
@ -13,6 +13,8 @@ export default function TabsLayout() {
  const { user, ready } = useAuth();
  const { expanded }    = usePlayer();
  const { loadLikes }   = useLikes();
+  const { loadHidden }  = useHidden();
+  const { loadPlaylists } = usePlaylists();
  useAudio(); // single audio controller for the whole app

  useEffect(() => {
@ -20,9 +22,33 @@ export default function TabsLayout() {
  }, [user, ready]);

  useEffect(() => {
-    if (user) loadLikes();
+    if (user) { loadLikes(); loadHidden(); loadPlaylists(); }
  }, [user]);

+  // Handle deep link: burmalda://listen?tid=123&ts=45
+  useEffect(() => {
+    const handleUrl = (event: { url: string }) => {
+      try {
+        const url = new URL(event.url);
+        if (url.pathname === '//listen' || url.host === 'listen') {
+          const tid = Number(url.searchParams.get('tid'));
+          const ts  = Number(url.searchParams.get('ts') ?? '0');
+          if (!tid) return;
+          const { queue } = usePlayer.getState();
+          const trackIdx = queue.findIndex(t => t.id === tid);
+          if (trackIdx >= 0) {
+            usePlayer.getState().setIndex(trackIdx);
+            usePlayer.getState().setExpanded(true);
+            setTimeout(() => { import('../../hooks/useAudio').then(m => m.seekTo(ts)); }, 500);
+          }
+        }
+      } catch {}
+    };
+    const sub = Linking.addEventListener('url', handleUrl);
+    Linking.getInitialURL().then(url => { if (url) handleUrl({ url }); });
+    return () => sub.remove();
+  }, []);
+
  if (!ready) return (
    <View style={{ flex: 1, backgroundColor: Colors.bg, alignItems: 'center', justifyContent: 'center' }}>
      <ActivityIndicator color={Colors.accent} />
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@ -11,7 +11,7 @@ import { getTracks, getAlbums, Track, Album, coverUrl } from '../../services/api
 import { downloadTrack, deleteTrack, isTrackDownloaded, DownloadProgress, cacheTracksAndAlbums, getCachedTracks, getCachedAlbums, initOfflineStorage } from '../../services/offline';
 import { usePlayer, useLikes, useOffline } from '../../store';
 import CoverImage from '../../components/CoverImage';
-import DownloadButton from '../../components/DownloadButton';
+import TrackDownloadButton from '../../components/DownloadButton';

 const { width } = Dimensions.get('window');
 const CARD_W    = (width - Spacing.md * 3) / 2;
@ -196,35 +196,9 @@ function TrackRow({ track, index, liked, onPress, onLike }: {
  track: Track; index: number; liked: boolean; onPress: () => void; onLike: () => void;
 }) {
  const { queue, index: qi } = usePlayer();
-  const { downloadedTracks, downloading, addDownloadedTrack, removeDownloadedTrack, setDownloading } = useOffline();
-  const [isDownloaded, setIsDownloaded] = useState(false);
  const active = queue[qi]?.id === track.id;
  const cover  = coverUrl(track.cover_url);
-  const downloadProgress = downloading.get(track.id) || 0;
-
-  useEffect(() => {
-    setIsDownloaded(downloadedTracks.has(track.id));
-  }, [downloadedTracks, track.id]);
-
-  const handleDownload = async () => {
-    if (isDownloaded) {
-      await deleteTrack(track.id);
-      removeDownloadedTrack(track.id);
-      setIsDownloaded(false);
-    } else {
-      try {
-        const success = await downloadTrack(track, (prog) => {
-          setDownloading(track.id, prog.progress);
-        });
-        if (success) {
-          addDownloadedTrack(track.id);
-          setIsDownloaded(true);
-        }
-      } catch (err) {
-        console.warn('Download failed:', err);
-      }
-    }
-  };
+  const ext    = (track.filename?.split('.').pop() || 'MP3').toUpperCase();

  return (
    <Pressable onPress={onPress} style={[styles.trackRow, active && styles.trackRowActive]}>
@ -232,21 +206,17 @@ function TrackRow({ track, index, liked, onPress, onLike }: {
      <CoverImage uri={cover} title={track.title} size={44} radius={Radius.sm} />
      <View style={styles.trackInfo}>
        <Text style={[styles.trackTitle, active && { color: Colors.accent }]} numberOfLines={1}>{track.title}</Text>
-        <Text style={styles.trackArtist} numberOfLines={1}>{track.artist}</Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 2 }}>
+          <Text style={styles.trackArtist} numberOfLines={1}>{track.artist}</Text>
+          <View style={styles.extBadge}><Text style={styles.extText}>{ext}</Text></View>
+        </View>
      </View>
      <Pressable onPress={onLike} hitSlop={12}>
        <Svg width={16} height={16} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
          <Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={liked ? Colors.pink : Colors.text3} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
        </Svg>
      </Pressable>
-      <DownloadButton
-        trackId={track.id}
-        isDownloaded={isDownloaded}
-        downloadProgress={downloadProgress}
-        onDownload={handleDownload}
-        onDelete={handleDownload}
-        size="sm"
-      />
+      <TrackDownloadButton track={track} size={18} />
      <Text style={styles.trackDur}>{fmt(track.duration)}</Text>
    </Pressable>
  );
@ -276,6 +246,8 @@ const styles = StyleSheet.create({
  trackTitle:     { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
  trackArtist:    { color: Colors.text2, fontSize: Font.sm, marginTop: 2 },
  trackDur:       { color: Colors.text3, fontSize: Font.xs, width: 36, textAlign: 'right' },
+  extBadge:       { backgroundColor: 'rgba(255,255,255,0.07)', paddingHorizontal: 5, paddingVertical: 1, borderRadius: 4 },
+  extText:        { color: Colors.text3, fontSize: 9, fontWeight: '700', letterSpacing: 0.5 },
  // Now playing strip
  npStrip:        { borderRadius: Radius.lg, overflow: 'hidden', marginBottom: Spacing.xl, height: 80 },
  npDim:          { backgroundColor: 'rgba(0,0,0,0.5)' },
--- a/app/(tabs)/library.tsx
+++ b/app/(tabs)/library.tsx
@ -1,140 +1,422 @@
-import { useEffect, useState, useCallback } from 'react';
-import { View, Text, FlatList, StyleSheet, TextInput, Pressable } from 'react-native';
-import Animated, { FadeInDown, useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Image } from 'expo-image';
-import Svg, { Circle, Line, Path } from 'react-native-svg';
-import * as Haptics from 'expo-haptics';
-import { Colors, Font, Spacing, Radius, TAB_BAR_HEIGHT, MINI_PLAYER_HEIGHT } from '../../constants/theme';
-import { getTracks, Track, coverUrl } from '../../services/api';
-import { usePlayer, useLikes } from '../../store';
-
-export default function LibraryScreen() {
-  const [all, setAll]         = useState<Track[]>([]);
-  const [filtered, setFiltered] = useState<Track[]>([]);
-  const [query, setQuery]     = useState('');
-  const insets = useSafeAreaInsets();
-  const { setQueue } = usePlayer();
-  const { toggleLike, isLiked } = useLikes();
-
-  useEffect(() => {
-    getTracks().then(t => { setAll(t); setFiltered(t); });
-  }, []);
-
-  useEffect(() => {
-    const q = query.toLowerCase();
-    setFiltered(q ? all.filter(t =>
-      t.title.toLowerCase().includes(q) || t.artist.toLowerCase().includes(q)
-    ) : all);
-  }, [query, all]);
-
-  const playTrack = (idx: number) => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    setQueue(filtered, idx);
-    usePlayer.getState().setExpanded(true);
-  };
-
-  return (
-    <View style={[styles.container, { paddingTop: insets.top }]}>
-      {/* Header */}
-      <View style={styles.header}>
-        <Text style={styles.title}>Библиотека</Text>
-        <Text style={styles.count}>{all.length} треков</Text>
-      </View>
-
-      {/* Search */}
-      <View style={styles.searchWrap}>
-        <Svg width={14} height={14} viewBox="0 0 24 24" fill="none" style={{ marginLeft: 12 }}>
-          <Circle cx={11} cy={11} r={8} stroke={Colors.text3} strokeWidth={1.8} />
-          <Line x1="21" y1="21" x2="16.65" y2="16.65" stroke={Colors.text3} strokeWidth={1.8} strokeLinecap="round" />
-        </Svg>
-        <TextInput
-          style={styles.searchInput}
-          placeholder="Поиск треков..."
-          placeholderTextColor={Colors.text3}
-          value={query}
-          onChangeText={setQuery}
-          returnKeyType="search"
-          autoCorrect={false}
-        />
-        {!!query && (
-          <Pressable onPress={() => setQuery('')} hitSlop={12} style={{ paddingRight: 12 }}>
-            <Text style={{ color: Colors.text3, fontSize: 12 }}>✕</Text>
-          </Pressable>
-        )}
-      </View>
-
-      <FlatList
-        data={filtered}
-        keyExtractor={t => String(t.id)}
-        contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
-        showsVerticalScrollIndicator={false}
-        renderItem={({ item, index }) => (
-          <TrackItem
-            track={item}
-            index={index}
-            liked={isLiked(item.id)}
-            onPress={() => playTrack(index)}
-            onLike={() => toggleLike(item.id)}
-          />
-        )}
-      />
-    </View>
-  );
-}
-
-function TrackItem({ track, index, liked, onPress, onLike }: {
-  track: Track; index: number; liked: boolean; onPress: () => void; onLike: () => void;
-}) {
-  const { queue, index: qi } = usePlayer();
-  const active = queue[qi]?.id === track.id;
-  const cover  = coverUrl(track.cover_url);
-
-  return (
-    <Animated.View entering={FadeInDown.delay(Math.min(index * 25, 300)).duration(300)}>
-      <Pressable
-        onPress={onPress}
-        style={[styles.row, active && styles.rowActive]}
-      >
-        <Text style={styles.num}>{index + 1}</Text>
-        <Image
-          source={cover ? { uri: cover } : require('../../assets/placeholder.png')}
-          style={styles.cover}
-          contentFit="cover"
-          transition={200}
-        />
-        <View style={{ flex: 1 }}>
-          <Text style={[styles.trackTitle, active && { color: Colors.accent }]} numberOfLines={1}>{track.title}</Text>
-          <Text style={styles.artist} numberOfLines={1}>{track.artist}</Text>
-        </View>
-        <Pressable onPress={onLike} hitSlop={12}>
-          <Svg width={16} height={16} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
-            <Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={liked ? Colors.pink : Colors.text3} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
-          </Svg>
-        </Pressable>
-        <Text style={styles.dur}>{fmt(track.duration)}</Text>
-      </Pressable>
-    </Animated.View>
-  );
-}
-
-function fmt(s: number) {
-  const m = Math.floor(s / 60), sec = Math.floor(s % 60);
-  return `${m}:${sec < 10 ? '0' : ''}${sec}`;
-}
-
-const styles = StyleSheet.create({
-  container:  { flex: 1, backgroundColor: Colors.bg },
-  header:     { flexDirection: 'row', alignItems: 'baseline', gap: Spacing.sm, paddingHorizontal: Spacing.md, paddingTop: Spacing.md, paddingBottom: Spacing.sm },
-  title:      { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, flex: 1 },
-  count:      { color: Colors.text3, fontSize: Font.sm },
-  searchWrap: { flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.surface, borderRadius: Radius.md, marginHorizontal: Spacing.md, marginBottom: Spacing.md, gap: 8 },
-  searchInput:{ flex: 1, color: Colors.text, fontSize: Font.md, paddingVertical: 11, paddingRight: Spacing.md },
-  row:        { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, gap: Spacing.sm, borderRadius: Radius.sm, paddingHorizontal: 4 },
-  rowActive:  { backgroundColor: Colors.surface },
-  num:        { width: 22, color: Colors.text3, fontSize: Font.sm, textAlign: 'center' },
-  cover:      { width: 44, height: 44, borderRadius: Radius.sm, backgroundColor: Colors.elevated },
-  trackTitle: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
-  artist:     { color: Colors.text2, fontSize: Font.sm, marginTop: 2 },
-  dur:        { color: Colors.text3, fontSize: Font.xs },
-});
+import { useEffect, useState, useCallback } from 'react';
+import {
+  View, Text, FlatList, StyleSheet, Pressable, Alert, TextInput, Modal,
+  ActionSheetIOS, Platform,
+} from 'react-native';
+import Animated, { FadeInDown, useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Image } from 'expo-image';
+import Svg, { Path, Circle, Line, Rect } from 'react-native-svg';
+import * as Haptics from 'expo-haptics';
+import { Colors, Font, Spacing, Radius, TAB_BAR_HEIGHT, MINI_PLAYER_HEIGHT } from '../../constants/theme';
+import { getTracks, Track, coverUrl } from '../../services/api';
+import { usePlayer, useLikes, useHidden, usePlaylists, Playlist } from '../../store';
+import { getMyWaveTracks } from '../../services/mywave';
+import TrackDownloadButton from '../../components/DownloadButton';
+import WaveAnimation from '../../components/WaveAnimation';
+
+type Tab = 'tracks' | 'playlists' | 'wave';
+
+export default function LibraryScreen() {
+  const [all, setAll]           = useState<Track[]>([]);
+  const [query, setQuery]       = useState('');
+  const [tab, setTab]           = useState<Tab>('tracks');
+  const [wave, setWave]         = useState<Track[]>([]);
+  const [waveLoading, setWaveLoading] = useState(false);
+  const [newPlName, setNewPlName] = useState('');
+  const [showNewPl, setShowNewPl]   = useState(false);
+  const insets = useSafeAreaInsets();
+  const { setQueue } = usePlayer();
+  const { toggleLike, isLiked } = useLikes();
+  const { isHidden, toggleHide } = useHidden();
+  const { playlists, createPlaylist, deletePlaylist, renamePlaylist } = usePlaylists();
+
+  useEffect(() => {
+    getTracks().then(t => setAll(t));
+  }, []);
+
+  const visible = all.filter(t => {
+    if (isHidden(t.id)) return false;
+    if (!query) return true;
+    const q = query.toLowerCase();
+    return t.title.toLowerCase().includes(q) || t.artist.toLowerCase().includes(q);
+  });
+
+  const loadWave = useCallback(async () => {
+    if (wave.length > 0) { setTab('wave'); return; }
+    setWaveLoading(true);
+    const tracks = await getMyWaveTracks(all);
+    setWave(tracks);
+    setWaveLoading(false);
+    setTab('wave');
+  }, [all, wave.length]);
+
+  const playTrack = (list: Track[], idx: number) => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    setQueue(list, idx);
+    usePlayer.getState().setExpanded(true);
+  };
+
+  const handleLongPress = (track: Track) => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    const hidden = isHidden(track.id);
+    const options = [
+      hidden ? 'Показать трек' : 'Скрыть из библиотеки',
+      isLiked(track.id) ? 'Убрать из избранного' : 'В избранное',
+      'Отмена',
+    ];
+    if (Platform.OS === 'ios') {
+      ActionSheetIOS.showActionSheetWithOptions(
+        { options, cancelButtonIndex: 2, destructiveButtonIndex: 0 },
+        (i) => {
+          if (i === 0) toggleHide(track.id);
+          if (i === 1) toggleLike(track.id);
+        }
+      );
+    } else {
+      Alert.alert(track.title, undefined, [
+        { text: hidden ? 'Показать' : 'Скрыть', onPress: () => toggleHide(track.id), style: 'destructive' },
+        { text: isLiked(track.id) ? 'Убрать из избранного' : 'В избранное', onPress: () => toggleLike(track.id) },
+        { text: 'Отмена', style: 'cancel' },
+      ]);
+    }
+  };
+
+  const handlePlaylistLongPress = (pl: Playlist) => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    const options = ['Переименовать', 'Удалить', 'Отмена'];
+    if (Platform.OS === 'ios') {
+      ActionSheetIOS.showActionSheetWithOptions(
+        { options, cancelButtonIndex: 2, destructiveButtonIndex: 1 },
+        (i) => {
+          if (i === 0) {
+            Alert.prompt('Переименовать', undefined, (name) => {
+              if (name?.trim()) renamePlaylist(pl.id, name.trim());
+            }, undefined, pl.name);
+          }
+          if (i === 1) deletePlaylist(pl.id);
+        }
+      );
+    } else {
+      Alert.alert(pl.name, undefined, [
+        { text: 'Удалить', onPress: () => deletePlaylist(pl.id), style: 'destructive' },
+        { text: 'Отмена', style: 'cancel' },
+      ]);
+    }
+  };
+
+  return (
+    <View style={[s.root, { paddingTop: insets.top }]}>
+      {/* Header */}
+      <View style={s.header}>
+        <Text style={s.title}>Библиотека</Text>
+        <Pressable onPress={() => setShowNewPl(true)} style={s.addBtn} hitSlop={12}>
+          <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+            <Path d="M12 5v14M5 12h14" stroke={Colors.accent} strokeWidth={2.2} strokeLinecap="round" />
+          </Svg>
+        </Pressable>
+      </View>
+
+      {/* Tabs */}
+      <View style={s.tabRow}>
+        {(['tracks', 'playlists', 'wave'] as Tab[]).map(t => (
+          <Pressable
+            key={t}
+            style={[s.tabBtn, tab === t && s.tabBtnActive]}
+            onPress={() => t === 'wave' ? loadWave() : setTab(t)}
+          >
+            <Text style={[s.tabText, tab === t && s.tabTextActive]}>
+              {t === 'tracks' ? 'Треки' : t === 'playlists' ? 'Плейлисты' : 'Моя волна'}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+
+      {/* Search (only on tracks tab) */}
+      {tab === 'tracks' && (
+        <View style={s.searchWrap}>
+          <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+            <Circle cx={11} cy={11} r={8} stroke={Colors.text3} strokeWidth={1.8} />
+            <Line x1="21" y1="21" x2="16.65" y2="16.65" stroke={Colors.text3} strokeWidth={1.8} strokeLinecap="round" />
+          </Svg>
+          <TextInput
+            style={s.searchInput}
+            placeholder="Поиск..."
+            placeholderTextColor={Colors.text3}
+            value={query}
+            onChangeText={setQuery}
+            returnKeyType="search"
+            autoCorrect={false}
+          />
+          {!!query && (
+            <Pressable onPress={() => setQuery('')} hitSlop={12} style={{ paddingRight: 12 }}>
+              <Text style={{ color: Colors.text3, fontSize: 13 }}>x</Text>
+            </Pressable>
+          )}
+        </View>
+      )}
+
+      {/* Content */}
+      {tab === 'tracks' && (
+        <FlatList
+          data={visible}
+          keyExtractor={t => String(t.id)}
+          contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item, index }) => (
+            <TrackRow
+              track={item}
+              index={index}
+              liked={isLiked(item.id)}
+              onPress={() => playTrack(visible, index)}
+              onLike={() => toggleLike(item.id)}
+              onLongPress={() => handleLongPress(item)}
+            />
+          )}
+        />
+      )}
+
+      {tab === 'playlists' && (
+        <FlatList
+          data={playlists}
+          keyExtractor={p => p.id}
+          contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
+          showsVerticalScrollIndicator={false}
+          onScrollBeginDrag={() => Haptics.selectionAsync()}
+          ListEmptyComponent={<EmptyState text="Нет плейлистов. Нажмите + чтобы создать." />}
+          renderItem={({ item }) => (
+            <PlaylistRow
+              playlist={item}
+              tracks={all}
+              onPress={() => {
+                const tracks = all.filter(t => item.trackIds.includes(t.id));
+                if (tracks.length) playTrack(tracks, 0);
+              }}
+              onLongPress={() => handlePlaylistLongPress(item)}
+            />
+          )}
+        />
+      )}
+
+      {tab === 'wave' && (
+        <FlatList
+          data={wave}
+          keyExtractor={t => String(t.id)}
+          contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
+          showsVerticalScrollIndicator={false}
+          ListHeaderComponent={
+            <View style={s.waveHeader}>
+              {/* Animated wave */}
+              <View style={s.waveViz}>
+                <WaveAnimation active={!waveLoading} barCount={50} height={64} />
+              </View>
+              <View style={s.waveGradientOverlay} pointerEvents="none" />
+              <Text style={s.waveTitle}>Моя волна</Text>
+              <Text style={s.waveSub}>
+                {waveLoading ? 'DeepSeek подбирает треки...' : `${wave.length} треков на основе ваших лайков`}
+              </Text>
+              {wave.length > 0 && (
+                <Pressable
+                  style={s.playAllBtn}
+                  onPress={() => {
+                    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+                    playTrack(wave, 0);
+                  }}
+                >
+                  <Svg width={16} height={16} viewBox="0 0 24 24" fill={Colors.bg}>
+                    <Path d="M8 5v14l11-7z" />
+                  </Svg>
+                  <Text style={s.playAllText}>Слушать волну</Text>
+                </Pressable>
+              )}
+            </View>
+          }
+          ListEmptyComponent={
+            waveLoading
+              ? <EmptyState text="Подбираем треки..." />
+              : <EmptyState text="Лайкните треки, чтобы получить рекомендации" />
+          }
+          renderItem={({ item, index }) => (
+            <TrackRow
+              track={item}
+              index={index}
+              liked={isLiked(item.id)}
+              onPress={() => playTrack(wave, index)}
+              onLike={() => toggleLike(item.id)}
+              onLongPress={() => handleLongPress(item)}
+            />
+          )}
+        />
+      )}
+
+      {/* New playlist modal */}
+      <Modal visible={showNewPl} transparent animationType="slide">
+        <Pressable style={s.modalBg} onPress={() => setShowNewPl(false)} />
+        <View style={s.modalSheet}>
+          <Text style={s.modalTitle}>Новый плейлист</Text>
+          <TextInput
+            style={s.modalInput}
+            placeholder="Название..."
+            placeholderTextColor={Colors.text3}
+            value={newPlName}
+            onChangeText={setNewPlName}
+            autoFocus
+            returnKeyType="done"
+          />
+          <View style={s.modalBtns}>
+            <Pressable style={s.modalCancel} onPress={() => { setShowNewPl(false); setNewPlName(''); }}>
+              <Text style={s.modalCancelText}>Отмена</Text>
+            </Pressable>
+            <Pressable
+              style={[s.modalCreate, !newPlName.trim() && { opacity: 0.4 }]}
+              onPress={() => {
+                if (!newPlName.trim()) return;
+                createPlaylist(newPlName.trim());
+                setNewPlName('');
+                setShowNewPl(false);
+                setTab('playlists');
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+              }}
+            >
+              <Text style={s.modalCreateText}>Создать</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+function TrackRow({ track, index, liked, onPress, onLike, onLongPress }: {
+  track: Track; index: number; liked: boolean;
+  onPress: () => void; onLike: () => void; onLongPress: () => void;
+}) {
+  const { queue, index: qi } = usePlayer();
+  const active = queue[qi]?.id === track.id;
+  const cover  = coverUrl(track.cover_url);
+  const ext    = (track.filename?.split('.').pop() || 'MP3').toUpperCase();
+
+  return (
+    <Animated.View entering={FadeInDown.delay(Math.min(index * 20, 300)).duration(250)}>
+      <Pressable
+        onPress={onPress}
+        onLongPress={onLongPress}
+        delayLongPress={350}
+        style={[s.row, active && s.rowActive]}
+      >
+        <Image
+          source={cover ? { uri: cover } : require('../../assets/placeholder.png')}
+          style={s.cover}
+          contentFit="cover"
+          transition={200}
+        />
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <Text style={[s.trackTitle, active && { color: Colors.accent }]} numberOfLines={1}>{track.title}</Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 }}>
+            <Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
+            <View style={s.extBadge}><Text style={s.extText}>{ext}</Text></View>
+          </View>
+        </View>
+        <TrackDownloadButton track={track} size={18} />
+        <Pressable onPress={onLike} hitSlop={12}>
+          <Svg width={16} height={16} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
+            <Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={liked ? Colors.pink : Colors.text3} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
+          </Svg>
+        </Pressable>
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+function PlaylistRow({ playlist, tracks, onPress, onLongPress }: {
+  playlist: Playlist; tracks: Track[]; onPress: () => void; onLongPress: () => void;
+}) {
+  const scale = useSharedValue(1);
+  const aStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+  const count = playlist.trackIds.length;
+  const cover = tracks.find(t => playlist.trackIds.includes(t.id))?.cover_url;
+  const coverUri = cover ? coverUrl(cover) : null;
+
+  return (
+    <Animated.View style={aStyle}>
+      <Pressable
+        onPress={onPress}
+        onLongPress={onLongPress}
+        delayLongPress={350}
+        onPressIn={() => { scale.value = withSpring(0.97, { damping: 15 }); }}
+        onPressOut={() => { scale.value = withSpring(1, { damping: 15 }); }}
+        style={s.plRow}
+      >
+        <View style={s.plCover}>
+          {coverUri
+            ? <Image source={{ uri: coverUri }} style={{ width: 52, height: 52, borderRadius: Radius.sm }} contentFit="cover" />
+            : <View style={[s.plCoverFallback]}>
+                <Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
+                  <Path d="M9 18V5l12-2v13" stroke={Colors.text3} strokeWidth={1.8} strokeLinecap="round" />
+                  <Circle cx={6} cy={18} r={3} stroke={Colors.text3} strokeWidth={1.8} />
+                  <Circle cx={18} cy={16} r={3} stroke={Colors.text3} strokeWidth={1.8} />
+                </Svg>
+              </View>
+          }
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text style={s.plName} numberOfLines={1}>{playlist.name}</Text>
+          <Text style={s.plCount}>{count} {count === 1 ? 'трек' : count < 5 ? 'трека' : 'треков'}</Text>
+        </View>
+        <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+          <Path d="M9 18l6-6-6-6" stroke={Colors.text3} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+        </Svg>
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+function EmptyState({ text }: { text: string }) {
+  return (
+    <View style={{ alignItems: 'center', marginTop: 80, paddingHorizontal: 32 }}>
+      <Text style={{ color: Colors.text3, fontSize: Font.sm, textAlign: 'center', lineHeight: 22 }}>{text}</Text>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  root:         { flex: 1, backgroundColor: Colors.bg },
+  header:       { flexDirection: 'row', alignItems: 'center', paddingHorizontal: Spacing.md, paddingTop: Spacing.md, paddingBottom: 8 },
+  title:        { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, flex: 1 },
+  addBtn:       { width: 36, height: 36, borderRadius: 18, backgroundColor: Colors.surface, alignItems: 'center', justifyContent: 'center' },
+  tabRow:       { flexDirection: 'row', paddingHorizontal: Spacing.md, gap: 8, marginBottom: 12 },
+  tabBtn:       { paddingHorizontal: 16, paddingVertical: 8, borderRadius: Radius.full, backgroundColor: Colors.surface },
+  tabBtnActive: { backgroundColor: Colors.accent },
+  tabText:      { color: Colors.text2, fontSize: Font.sm, fontWeight: '600' },
+  tabTextActive:{ color: '#fff', fontSize: Font.sm, fontWeight: '700' },
+  searchWrap:   { flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.surface, borderRadius: Radius.md, marginHorizontal: Spacing.md, marginBottom: Spacing.md, gap: 8, paddingLeft: 12 },
+  searchInput:  { flex: 1, color: Colors.text, fontSize: Font.md, paddingVertical: 11 },
+  row:          { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, gap: 10, borderRadius: Radius.sm, paddingHorizontal: 4 },
+  rowActive:    { backgroundColor: Colors.surface },
+  cover:        { width: 46, height: 46, borderRadius: Radius.sm, backgroundColor: Colors.elevated, flexShrink: 0 },
+  trackTitle:   { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
+  artist:       { color: Colors.text2, fontSize: Font.sm, flex: 1 },
+  extBadge:     { backgroundColor: 'rgba(255,255,255,0.08)', paddingHorizontal: 5, paddingVertical: 1, borderRadius: 4 },
+  extText:      { color: Colors.text3, fontSize: 9, fontWeight: '700', letterSpacing: 0.5 },
+  plRow:        { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, gap: 14, paddingHorizontal: 4 },
+  plCover:      { width: 52, height: 52, borderRadius: Radius.sm, overflow: 'hidden', flexShrink: 0 },
+  plCoverFallback: { width: 52, height: 52, backgroundColor: Colors.elevated, borderRadius: Radius.sm, alignItems: 'center', justifyContent: 'center' },
+  plName:       { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
+  plCount:      { color: Colors.text2, fontSize: Font.sm, marginTop: 2 },
+  waveHeader:        { paddingBottom: 20, alignItems: 'center', overflow: 'hidden', borderRadius: 20, marginBottom: 8, backgroundColor: Colors.surface },
+  waveViz:           { width: '100%', height: 80, overflow: 'hidden', marginBottom: 0 },
+  waveGradientOverlay: { position: 'absolute', top: 0, left: 0, right: 0, height: 80, backgroundColor: 'transparent' },
+  waveTitle:         { color: Colors.text, fontSize: Font.xl, fontWeight: '800', letterSpacing: -0.3, marginTop: 16 },
+  waveSub:           { color: Colors.text2, fontSize: Font.sm, marginTop: 4, marginBottom: 16 },
+  playAllBtn:        { flexDirection: 'row', alignItems: 'center', gap: 8, backgroundColor: Colors.accent, paddingHorizontal: 28, paddingVertical: 13, borderRadius: Radius.full },
+  playAllText:       { color: Colors.bg, fontSize: Font.md, fontWeight: '700' },
+  modalBg:      { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' },
+  modalSheet:   { backgroundColor: Colors.surface, borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 24, paddingBottom: 40 },
+  modalTitle:   { color: Colors.text, fontSize: Font.lg, fontWeight: '700', marginBottom: 16 },
+  modalInput:   { backgroundColor: Colors.elevated, color: Colors.text, borderRadius: Radius.md, paddingHorizontal: 14, paddingVertical: 12, fontSize: Font.md, marginBottom: 16 },
+  modalBtns:    { flexDirection: 'row', gap: 12 },
+  modalCancel:  { flex: 1, paddingVertical: 14, borderRadius: Radius.md, backgroundColor: Colors.elevated, alignItems: 'center' },
+  modalCancelText: { color: Colors.text2, fontWeight: '600' },
+  modalCreate:  { flex: 1, paddingVertical: 14, borderRadius: Radius.md, backgroundColor: Colors.accent, alignItems: 'center' },
+  modalCreateText: { color: '#fff', fontWeight: '700' },
+});
--- a/components/DownloadButton.tsx
+++ b/components/DownloadButton.tsx
@ -1,102 +1,133 @@
-import { View, StyleSheet, Pressable, Text, ActivityIndicator } from 'react-native';
-import Animated, { FadeIn, useAnimatedStyle, withSpring } from 'react-native-reanimated';
-import { useMemo } from 'react';
-import Svg, { Path } from 'react-native-svg';
-import * as Haptics from 'expo-haptics';
-import { Colors, Font } from '../constants/theme';
-
-export interface DownloadButtonProps {
-  trackId: number;
-  isDownloaded?: boolean;
-  downloadProgress?: number; // 0-1
-  onDownload?: () => void;
-  onDelete?: () => void;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export default function DownloadButton({
-  trackId,
-  isDownloaded = false,
-  downloadProgress = 0,
-  onDownload,
-  onDelete,
-  size = 'md',
-}: DownloadButtonProps) {
-  const sizing = useMemo(() => {
-    const map = { sm: 20, md: 24, lg: 32 };
-    return map[size];
-  }, [size]);
-
-  const handlePress = async () => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
-    if (isDownloaded) {
-      onDelete?.();
-    } else {
-      onDownload?.();
-    }
-  };
-
-  const isLoading = downloadProgress > 0 && downloadProgress < 1;
-
-  if (isLoading) {
-    return (
-      <Animated.View entering={FadeIn}>
-        <View style={[styles.container, { width: sizing, height: sizing }]}>
-          <ActivityIndicator color={Colors.accent} size={sizing * 0.6} />
-          {downloadProgress > 0.2 && (
-            <Text style={[styles.progress, { fontSize: sizing * 0.3 }]}>
-              {Math.round(downloadProgress * 100)}%
-            </Text>
-          )}
-        </View>
-      </Animated.View>
-    );
-  }
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      style={({ pressed }) => [
-        styles.button,
-        {
-          width: sizing,
-          height: sizing,
-          opacity: pressed ? 0.6 : 1,
-        },
-      ]}
-    >
-      {isDownloaded ? (
-        <Svg width={sizing} height={sizing} viewBox="0 0 24 24" fill="none">
-          <Path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
-            fill={Colors.accent}
-          />
-        </Svg>
-      ) : (
-        <Svg width={sizing} height={sizing} viewBox="0 0 24 24" fill="none">
-          <Path
-            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-            fill={Colors.text2}
-          />
-        </Svg>
-      )}
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  progress: {
-    color: Colors.accent,
-    fontFamily: 'System',
-    fontWeight: '600',
-    marginTop: 2,
-  },
-});
+import { useState, useCallback } from 'react';
+import { View, Text, StyleSheet, Pressable, Alert } from 'react-native';
+import Animated, {
+  useSharedValue, useAnimatedStyle, withTiming, withSpring,
+} from 'react-native-reanimated';
+import Svg, { Path, Circle } from 'react-native-svg';
+import * as Haptics from 'expo-haptics';
+import * as FileSystem from 'expo-file-system';
+import { Colors, Radius } from '../constants/theme';
+import { useOffline } from '../store';
+import { Track, coverUrl } from '../services/api';
+
+interface Props {
+  track: Track;
+  size?: number;
+  showLabel?: boolean;
+}
+
+const DL_DIR = FileSystem.documentDirectory + 'tracks/';
+
+async function ensureDir() {
+  const info = await FileSystem.getInfoAsync(DL_DIR);
+  if (!info.exists) await FileSystem.makeDirectoryAsync(DL_DIR, { intermediates: true });
+}
+
+function getLocalPath(trackId: number, filename: string) {
+  const ext = filename.split('.').pop() || 'mp3';
+  return `${DL_DIR}${trackId}.${ext}`;
+}
+
+export default function TrackDownloadButton({ track, size = 22, showLabel = false }: Props) {
+  const { downloadedTracks, downloading, setDownloading, addDownloadedTrack } = useOffline();
+  const isDownloaded = downloadedTracks.has(track.id);
+  const dlProgress = downloading.get(track.id);
+  const isDownloading = dlProgress !== undefined;
+
+  const scale = useSharedValue(1);
+  const scaleStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+
+  const progressWidth = useAnimatedStyle(() => ({
+    width: withTiming(`${(dlProgress ?? 0) * 100}%` as any, { duration: 150 }),
+  }));
+
+  const startDownload = useCallback(async () => {
+    if (isDownloaded || isDownloading) return;
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    scale.value = withSpring(0.85, { damping: 8 }, () => { scale.value = withSpring(1); });
+
+    try {
+      await ensureDir();
+      const url = track.cdn_url || track.cdn_url2;
+      if (!url) { Alert.alert('Ошибка', 'URL трека недоступен'); return; }
+
+      const localPath = getLocalPath(track.id, track.filename || `${track.id}.mp3`);
+      setDownloading(track.id, 0.01);
+
+      const callback = (dp: FileSystem.DownloadProgressData) => {
+        const pct = dp.totalBytesExpectedToWrite > 0
+          ? dp.totalBytesWritten / dp.totalBytesExpectedToWrite
+          : 0;
+        setDownloading(track.id, pct);
+      };
+
+      const downloadResumable = FileSystem.createDownloadResumable(url, localPath, {}, callback);
+      const result = await downloadResumable.downloadAsync();
+
+      if (result?.uri) {
+        addDownloadedTrack(track.id);
+        setDownloading(track.id, 1);
+        // Save metadata locally
+        const metaPath = `${DL_DIR}${track.id}.json`;
+        await FileSystem.writeAsStringAsync(metaPath, JSON.stringify({
+          id: track.id, title: track.title, artist: track.artist,
+          filename: track.filename, cover_url: track.cover_url,
+          localPath: result.uri,
+        }));
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      }
+    } catch (e: any) {
+      setDownloading(track.id, 1);
+      Alert.alert('Ошибка загрузки', e?.message || 'Попробуйте снова');
+    }
+  }, [track, isDownloaded, isDownloading]);
+
+  const iconColor = isDownloaded
+    ? Colors.accent
+    : isDownloading
+      ? 'rgba(255,255,255,0.4)'
+      : 'rgba(255,255,255,0.7)';
+
+  return (
+    <Animated.View style={scaleStyle}>
+      <Pressable onPress={startDownload} style={s.btn} hitSlop={12}>
+        {isDownloading ? (
+          <View style={s.progressWrap}>
+            <View style={s.progressBg}>
+              <Animated.View style={[s.progressFill, progressWidth]} />
+            </View>
+            <Text style={s.pctText}>{Math.round((dlProgress ?? 0) * 100)}%</Text>
+          </View>
+        ) : (
+          <View style={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>
+            {isDownloaded ? (
+              <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                <Circle cx={12} cy={12} r={10} stroke={Colors.accent} strokeWidth={1.5} />
+                <Path d="M8 12l3 3 5-5" stroke={Colors.accent} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+              </Svg>
+            ) : (
+              <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                <Path d="M12 3v13M7 11l5 5 5-5" stroke={iconColor} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+                <Path d="M5 20h14" stroke={iconColor} strokeWidth={2} strokeLinecap="round" />
+              </Svg>
+            )}
+            {showLabel && (
+              <Text style={[s.label, { color: iconColor }]}>
+                {isDownloaded ? 'Скачано' : 'Скачать'}
+              </Text>
+            )}
+          </View>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const s = StyleSheet.create({
+  btn: { alignItems: 'center', justifyContent: 'center' },
+  progressWrap: { alignItems: 'center', gap: 4 },
+  progressBg: { width: 48, height: 3, borderRadius: 2, backgroundColor: 'rgba(255,255,255,0.12)', overflow: 'hidden' },
+  progressFill: { height: 3, backgroundColor: Colors.accent, borderRadius: 2 },
+  pctText: { color: Colors.accent, fontSize: 9, fontWeight: '700' },
+  label: { fontSize: 12, fontWeight: '600' },
+});
--- a/components/MiniPlayer.tsx
+++ b/components/MiniPlayer.tsx
@ -1,129 +1,162 @@
-import { useCallback } from 'react';
-import { View, Text, StyleSheet, Pressable } from 'react-native';
-import Animated, {
-  useSharedValue, useAnimatedStyle, withSpring,
-  FadeInDown, FadeOutDown, useAnimatedGestureHandler, runOnJS,
-} from 'react-native-reanimated';
-import { PanGestureHandler } from 'react-native-gesture-handler';
-import { BlurView } from 'expo-blur';
-import { Image } from 'expo-image';
-import * as Haptics from 'expo-haptics';
-import Svg, { Path } from 'react-native-svg';
-import { Colors, Font, MINI_PLAYER_HEIGHT, TAB_BAR_HEIGHT } from '../constants/theme';
-import { usePlayer, useLikes } from '../store';
-import { togglePlay, seekTo } from '../hooks/useAudio';
-import { coverUrl } from '../services/api';
-
-export default function MiniPlayer() {
-  const { queue, index, playing, expanded, setExpanded, progress, duration } = usePlayer();
-  const { toggleLike, isLiked } = useLikes();
-  const track = queue[index];
-
-  const translateY = useSharedValue(0);
-  const opacity    = useSharedValue(1);
-
-  const gestureHandler = useAnimatedGestureHandler({
-    onActive: (e) => {
-      if (e.translationY < 0) {
-        translateY.value = Math.max(e.translationY, -80);
-        opacity.value    = 1 + e.translationY / 80;
-      }
-    },
-    onEnd: (e) => {
-      if (e.translationY < -40 || e.velocityY < -400) runOnJS(openPlayer)();
-      translateY.value = withSpring(0);
-      opacity.value    = withSpring(1);
-    },
-  });
-
-  const animStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateY.value }],
-    opacity:   opacity.value,
-  }));
-
-  const openPlayer = useCallback(() => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    setExpanded(true);
-  }, [setExpanded]);
-
-  const onNext = useCallback(() => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    const ni = usePlayer.getState().nextTrack();
-    usePlayer.getState().setIndex(ni);
-  }, []);
-
-  const onPrev = useCallback(() => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    const pi = usePlayer.getState().prevTrack();
-    usePlayer.getState().setIndex(pi);
-  }, []);
-
-  if (!track || expanded) return null;
-
-  const cover = coverUrl(track.cover_url);
-  const liked = isLiked(track.id);
-  const pct   = duration > 0 ? (progress / duration) * 100 : 0;
-
-  return (
-    <PanGestureHandler onGestureEvent={gestureHandler}>
-      <Animated.View
-        style={[s.wrap, animStyle, { bottom: TAB_BAR_HEIGHT }]}
-        entering={FadeInDown.springify()}
-        exiting={FadeOutDown.springify()}
-      >
-        <BlurView intensity={30} tint="dark" style={StyleSheet.absoluteFill} />
-        <View style={[StyleSheet.absoluteFill, s.bgTint]} />
-
-        {/* Progress line */}
-        <View style={s.progressBg}>
-          <View style={[s.progressFill, { width: `${pct}%` as any }]} />
-        </View>
-
-        <Pressable style={s.row} onPress={openPlayer} android_ripple={null}>
-          <Image
-            source={cover ? { uri: cover } : require('../assets/placeholder.png')}
-            style={s.cover}
-            contentFit="cover"
-            transition={200}
-          />
-          <View style={s.info}>
-            <Text style={s.title} numberOfLines={1}>{track.title}</Text>
-            <Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
-          </View>
-          <View style={s.controls}>
-            <Pressable onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleLike(track.id); }} hitSlop={10} style={s.ctlBtn}>
-              <Svg width={18} height={18} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
-                <Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={liked ? Colors.pink : Colors.text2} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
-              </Svg>
-            </Pressable>
-            <Pressable onPress={(e) => { e.stopPropagation(); onPrev(); }} hitSlop={10} style={s.ctlBtn}>
-              <Svg width={18} height={18} fill={Colors.text} viewBox="0 0 24 24"><Path d="M6 6h2v12H6zm3.5 6 8.5 6V6z" /></Svg>
-            </Pressable>
-            <Pressable onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); togglePlay(); }} hitSlop={10} style={s.ctlBtn}>
-              {playing
-                ? <Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.text}><Path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></Svg>
-                : <Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.text}><Path d="M8 5v14l11-7z" /></Svg>}
-            </Pressable>
-            <Pressable onPress={(e) => { e.stopPropagation(); onNext(); }} hitSlop={10} style={s.ctlBtn}>
-              <Svg width={18} height={18} fill={Colors.text} viewBox="0 0 24 24"><Path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z" /></Svg>
-            </Pressable>
-          </View>
-        </Pressable>
-      </Animated.View>
-    </PanGestureHandler>
-  );
-}
-
-const s = StyleSheet.create({
-  wrap:        { position: 'absolute', left: 0, right: 0, height: MINI_PLAYER_HEIGHT, overflow: 'hidden', borderTopLeftRadius: 14, borderTopRightRadius: 14 },
-  bgTint:      { backgroundColor: 'rgba(10,10,10,0.4)' },
-  progressBg:  { position: 'absolute', top: 0, left: 0, right: 0, height: 2, backgroundColor: 'rgba(255,255,255,0.07)', zIndex: 2 },
-  progressFill:{ height: 2, backgroundColor: Colors.accent },
-  row:         { flex: 1, flexDirection: 'row', alignItems: 'center', paddingLeft: 14, paddingRight: 4, gap: 12 },
-  cover:       { width: 44, height: 44, borderRadius: 9, backgroundColor: Colors.elevated, flexShrink: 0 },
-  info:        { flex: 1, minWidth: 0 },
-  title:       { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
-  artist:      { color: Colors.text2, fontSize: Font.xs, marginTop: 2 },
-  controls:    { flexDirection: 'row', alignItems: 'center' },
-  ctlBtn:      { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' },
-});
+import { useCallback } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import Animated, {
+  useSharedValue, useAnimatedStyle, withSpring, withTiming,
+  useAnimatedGestureHandler, runOnJS, interpolate, Extrapolate, Easing,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import { BlurView } from 'expo-blur';
+import { Image } from 'expo-image';
+import * as Haptics from 'expo-haptics';
+import Svg, { Path, Rect } from 'react-native-svg';
+import { Colors, Font, MINI_PLAYER_HEIGHT, TAB_BAR_HEIGHT } from '../constants/theme';
+import { usePlayer, useLikes } from '../store';
+import { togglePlay } from '../hooks/useAudio';
+import { coverUrl } from '../services/api';
+import SpectrumBars from './SpectrumBars';
+
+export default function MiniPlayer() {
+  const { queue, index, playing, expanded, setExpanded, progress, duration } = usePlayer();
+  const { toggleLike, isLiked } = useLikes();
+  const track = queue[index];
+
+  const translateY = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  const openPlayer = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    setExpanded(true);
+    translateY.value = withSpring(0, { damping: 20, stiffness: 200 });
+    opacity.value = withSpring(1);
+  }, [setExpanded]);
+
+  const gestureHandler = useAnimatedGestureHandler<any, { start: number }>({
+    onStart: (_, ctx) => {
+      cancelAnimation(translateY);
+      ctx.start = translateY.value;
+    },
+    onActive: (e) => {
+      if (e.translationY > 0) return; // block downward
+      const dy = Math.max(e.translationY, -100);
+      translateY.value = dy;
+      opacity.value = interpolate(dy, [-100, 0], [0.6, 1], Extrapolate.CLAMP);
+    },
+    onEnd: (e) => {
+      const shouldOpen = e.translationY < -40 || e.velocityY < -600;
+      if (shouldOpen) {
+        translateY.value = withTiming(-MINI_PLAYER_HEIGHT, {
+          duration: 200, easing: Easing.out(Easing.cubic),
+        }, () => runOnJS(openPlayer)());
+      } else {
+        translateY.value = withSpring(0, { damping: 22, stiffness: 250 });
+        opacity.value = withSpring(1);
+      }
+    },
+    onFail: () => {
+      translateY.value = withSpring(0, { damping: 22, stiffness: 250 });
+      opacity.value = withSpring(1);
+    },
+    onCancel: () => {
+      translateY.value = withSpring(0, { damping: 22, stiffness: 250 });
+      opacity.value = withSpring(1);
+    },
+  });
+
+  const animStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+    opacity: opacity.value,
+  }));
+
+  const onNext = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    const ni = usePlayer.getState().nextTrack();
+    usePlayer.getState().setIndex(ni);
+  }, []);
+
+  if (!track || expanded) return null;
+
+  const cover = coverUrl(track.cover_url);
+  const pct = duration > 0 ? (progress / duration) * 100 : 0;
+  const liked = isLiked(track.id);
+
+  return (
+    <PanGestureHandler
+      onGestureEvent={gestureHandler}
+      activeOffsetY={[-8, 8]}
+      failOffsetX={[-20, 20]}
+    >
+      <Animated.View style={[s.wrap, animStyle, { bottom: TAB_BAR_HEIGHT }]}>
+        <BlurView intensity={40} tint="dark" style={StyleSheet.absoluteFill} />
+        <View style={[StyleSheet.absoluteFill, s.bgTint]} />
+
+        {/* Progress bar */}
+        <View style={s.progressBg}>
+          <View style={[s.progressFill, { width: `${pct}%` as any }]} />
+        </View>
+
+        <Pressable style={s.row} onPress={openPlayer}>
+          <Image
+            source={cover ? { uri: cover } : require('../assets/placeholder.png')}
+            style={s.cover}
+            contentFit="cover"
+            transition={200}
+          />
+          <View style={s.info}>
+            <Text style={s.title} numberOfLines={1}>{track.title}</Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              {playing && <SpectrumBars playing={playing} color={Colors.accent} barCount={4} height={14} />}
+              <Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
+            </View>
+          </View>
+          <View style={s.controls}>
+            <Pressable
+              onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleLike(track.id); }}
+              hitSlop={12} style={s.ctlBtn}
+            >
+              <Svg width={20} height={20} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
+                <Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={liked ? Colors.pink : Colors.text} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
+              </Svg>
+            </Pressable>
+            <Pressable
+              onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); togglePlay(); }}
+              hitSlop={12} style={s.ctlBtn}
+            >
+              {playing
+                ? <Svg width={22} height={22} viewBox="0 0 24 24" fill={Colors.text}>
+                    <Rect x={5} y={4} width={4} height={16} rx={1.5} fill={Colors.text} />
+                    <Rect x={15} y={4} width={4} height={16} rx={1.5} fill={Colors.text} />
+                  </Svg>
+                : <Svg width={22} height={22} viewBox="0 0 24 24" fill={Colors.text}>
+                    <Path d="M8 5v14l11-7z" />
+                  </Svg>
+              }
+            </Pressable>
+            <Pressable
+              onPress={(e) => { e.stopPropagation(); onNext(); }}
+              hitSlop={12} style={s.ctlBtn}
+            >
+              <Svg width={22} height={22} viewBox="0 0 24 24" fill={Colors.text}>
+                <Path d="M5 4l10 8-10 8V4zM19 4h-2v16h2z" />
+              </Svg>
+            </Pressable>
+          </View>
+        </Pressable>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+}
+
+const s = StyleSheet.create({
+  wrap:         { position: 'absolute', left: 8, right: 8, height: MINI_PLAYER_HEIGHT, overflow: 'hidden', borderRadius: 16 },
+  bgTint:       { backgroundColor: 'rgba(18,18,20,0.5)' },
+  progressBg:   { position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, backgroundColor: 'rgba(255,255,255,0.06)', zIndex: 2 },
+  progressFill: { height: 2, backgroundColor: Colors.accent },
+  row:          { flex: 1, flexDirection: 'row', alignItems: 'center', paddingLeft: 12, paddingRight: 2, gap: 10 },
+  cover:        { width: 46, height: 46, borderRadius: 10, backgroundColor: Colors.elevated },
+  info:         { flex: 1, minWidth: 0 },
+  title:        { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
+  artist:       { color: 'rgba(255,255,255,0.5)', fontSize: Font.xs, marginTop: 2 },
+  controls:     { flexDirection: 'row', alignItems: 'center' },
+  ctlBtn:       { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' },
+});
--- a/components/Player.tsx
+++ b/components/Player.tsx
--- a/components/ShareTrackModal.tsx
+++ b/components/ShareTrackModal.tsx
@ -0,0 +1,163 @@
+/**
+ * ShareTrackModal — share sheet + QR for co-listening (deep link, no backend)
+ * Co-listening: generates a deep link burmalda://listen?tid=123&ts=456
+ * Friend opens it → app seeks to same position and plays same track
+ */
+import { useState } from 'react';
+import { View, Text, StyleSheet, Pressable, Modal, Alert } from 'react-native';
+import * as Sharing from 'expo-sharing';
+import * as Clipboard from 'expo-clipboard';
+import * as Haptics from 'expo-haptics';
+import QRCode from 'react-native-qrcode-svg';
+import { BlurView } from 'expo-blur';
+import { Image } from 'expo-image';
+import Svg, { Path } from 'react-native-svg';
+import { Colors, Font, Radius } from '../constants/theme';
+import { Track, coverUrl } from '../services/api';
+
+interface Props {
+  track: Track;
+  progress: number;
+  visible: boolean;
+  onClose: () => void;
+}
+
+function buildDeepLink(trackId: number, position: number) {
+  return `burmalda://listen?tid=${trackId}&ts=${Math.floor(position)}`;
+}
+
+export default function ShareTrackModal({ track, progress, visible, onClose }: Props) {
+  const [showQR, setShowQR] = useState(false);
+  const cover = coverUrl(track.cover_url);
+  const deepLink = buildDeepLink(track.id, progress);
+  const shareText = `${track.artist} — ${track.title}\n${deepLink}`;
+
+  const handleShare = async () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    try {
+      if (await Sharing.isAvailableAsync()) {
+        await Sharing.shareAsync(deepLink, {
+          dialogTitle: `${track.artist} — ${track.title}`,
+        });
+      } else {
+        await Clipboard.setStringAsync(shareText);
+        Alert.alert('Скопировано', 'Ссылка скопирована в буфер');
+      }
+    } catch {}
+  };
+
+  const handleCopy = async () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    await Clipboard.setStringAsync(deepLink);
+    Alert.alert('Скопировано', 'Ссылка скопирована');
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <Pressable style={s.backdrop} onPress={onClose} />
+      <BlurView intensity={40} tint="dark" style={s.sheet}>
+        <View style={s.handle} />
+
+        {/* Track info */}
+        <View style={s.trackRow}>
+          {cover
+            ? <Image source={{ uri: cover }} style={s.cover} contentFit="cover" />
+            : <View style={[s.cover, { backgroundColor: Colors.elevated }]} />
+          }
+          <View style={{ flex: 1 }}>
+            <Text style={s.title} numberOfLines={1}>{track.title}</Text>
+            <Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
+          </View>
+        </View>
+
+        {/* QR toggle */}
+        {showQR && (
+          <View style={s.qrWrap}>
+            <QRCode
+              value={deepLink}
+              size={180}
+              backgroundColor="transparent"
+              color={Colors.text}
+            />
+            <Text style={s.qrHint}>Друг сканирует — сразу переходит к этому месту</Text>
+          </View>
+        )}
+
+        {/* Actions */}
+        <View style={s.actions}>
+          <ActionBtn
+            icon="share"
+            label="Поделиться"
+            onPress={handleShare}
+          />
+          <ActionBtn
+            icon="copy"
+            label="Скопировать ссылку"
+            onPress={handleCopy}
+          />
+          <ActionBtn
+            icon="qr"
+            label={showQR ? 'Скрыть QR' : 'QR-код'}
+            onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setShowQR(v => !v); }}
+            active={showQR}
+          />
+        </View>
+
+        <Text style={s.hint}>
+          Совместное прослушивание: друг откроет ссылку и приложение перейдёт к этому треку и позиции
+        </Text>
+
+        <Pressable style={s.closeBtn} onPress={onClose}>
+          <Text style={s.closeTxt}>Закрыть</Text>
+        </Pressable>
+      </BlurView>
+    </Modal>
+  );
+}
+
+function ActionBtn({ icon, label, onPress, active = false }: {
+  icon: 'share' | 'copy' | 'qr'; label: string; onPress: () => void; active?: boolean;
+}) {
+  return (
+    <Pressable onPress={onPress} style={[s.actionBtn, active && s.actionBtnActive]}>
+      <View style={s.actionIcon}>
+        {icon === 'share' && (
+          <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+            <Path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13" stroke={active ? Colors.accent : Colors.text} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+          </Svg>
+        )}
+        {icon === 'copy' && (
+          <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+            <Path d="M8 16H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2M16 8h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-2" stroke={active ? Colors.accent : Colors.text} strokeWidth={2} strokeLinecap="round" />
+          </Svg>
+        )}
+        {icon === 'qr' && (
+          <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+            <Path d="M3 3h6v6H3zM15 3h6v6h-6zM3 15h6v6H3zM15 15h2v2h-2zM19 15h2v2h-2zM17 17h2v2h-2zM15 19h2v2h-2zM19 19h2v2h-2z" stroke={active ? Colors.accent : Colors.text} strokeWidth={1.8} strokeLinecap="round" />
+          </Svg>
+        )}
+      </View>
+      <Text style={[s.actionLabel, active && { color: Colors.accent }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const s = StyleSheet.create({
+  backdrop:      { flex: 1 },
+  sheet:         { borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 40, overflow: 'hidden', borderTopWidth: 1, borderColor: 'rgba(255,255,255,0.08)' },
+  handle:        { width: 36, height: 4, borderRadius: 2, backgroundColor: 'rgba(255,255,255,0.3)', alignSelf: 'center', marginBottom: 20 },
+  trackRow:      { flexDirection: 'row', alignItems: 'center', gap: 14, marginBottom: 24 },
+  cover:         { width: 52, height: 52, borderRadius: Radius.sm },
+  title:         { color: Colors.text, fontSize: Font.md, fontWeight: '700' },
+  artist:        { color: 'rgba(255,255,255,0.55)', fontSize: Font.sm, marginTop: 2 },
+  qrWrap:        { alignItems: 'center', marginBottom: 24, padding: 20, backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 16 },
+  qrHint:        { color: 'rgba(255,255,255,0.45)', fontSize: 12, marginTop: 12, textAlign: 'center' },
+  actions:       { flexDirection: 'row', gap: 10, marginBottom: 16 },
+  actionBtn:     { flex: 1, alignItems: 'center', gap: 8, backgroundColor: 'rgba(255,255,255,0.08)', borderRadius: 14, paddingVertical: 14, paddingHorizontal: 8 },
+  actionBtnActive: { backgroundColor: `${Colors.accent}20`, borderWidth: 1, borderColor: `${Colors.accent}50` },
+  actionIcon:    { width: 36, height: 36, alignItems: 'center', justifyContent: 'center' },
+  actionLabel:   { color: Colors.text, fontSize: 11, fontWeight: '600', textAlign: 'center' },
+  hint:          { color: 'rgba(255,255,255,0.3)', fontSize: 11, textAlign: 'center', lineHeight: 16, marginBottom: 20 },
+  closeBtn:      { paddingVertical: 14, alignItems: 'center', backgroundColor: 'rgba(255,255,255,0.08)', borderRadius: 14 },
+  closeTxt:      { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
+});
--- a/components/SpectrumBars.tsx
+++ b/components/SpectrumBars.tsx
@ -0,0 +1,73 @@
+/**
+ * SpectrumBars — animated equalizer bars for MiniPlayer / Player
+ */
+import { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue, useAnimatedStyle, withRepeat, withSequence,
+  withTiming, Easing, cancelAnimation,
+} from 'react-native-reanimated';
+
+interface Props {
+  playing: boolean;
+  color?: string;
+  barCount?: number;
+  height?: number;
+}
+
+const DURATIONS = [420, 350, 500, 380, 460];
+const HEIGHTS   = [0.4, 0.7, 0.55, 0.85, 0.5];
+
+function Bar({ playing, color, maxH, duration, minRatio }: {
+  playing: boolean; color: string; maxH: number; duration: number; minRatio: number;
+}) {
+  const h = useSharedValue(maxH * minRatio);
+
+  useEffect(() => {
+    if (playing) {
+      h.value = withRepeat(
+        withSequence(
+          withTiming(maxH, { duration, easing: Easing.inOut(Easing.ease) }),
+          withTiming(maxH * 0.2, { duration, easing: Easing.inOut(Easing.ease) }),
+        ),
+        -1,
+        true,
+      );
+    } else {
+      cancelAnimation(h);
+      h.value = withTiming(maxH * 0.25, { duration: 300 });
+    }
+  }, [playing]);
+
+  const style = useAnimatedStyle(() => ({
+    height: h.value,
+    backgroundColor: color,
+    borderRadius: 2,
+    width: 3,
+  }));
+
+  return <Animated.View style={style} />;
+}
+
+export default function SpectrumBars({ playing, color = '#ffffff', barCount = 4, height = 18 }: Props) {
+  const bars = Array.from({ length: barCount }, (_, i) => i);
+
+  return (
+    <View style={[s.wrap, { height }]}>
+      {bars.map((i) => (
+        <Bar
+          key={i}
+          playing={playing}
+          color={color}
+          maxH={height * (HEIGHTS[i % HEIGHTS.length])}
+          duration={DURATIONS[i % DURATIONS.length]}
+          minRatio={0.2}
+        />
+      ))}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  wrap: { flexDirection: 'row', alignItems: 'flex-end', gap: 2 },
+});
--- a/components/WaveAnimation.tsx
+++ b/components/WaveAnimation.tsx
@ -0,0 +1,81 @@
+/**
+ * WaveAnimation — flowing wave bars used in "My Wave" header
+ * Simulates audio wave / signal motion with staggered sine animation
+ */
+import { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue, useAnimatedStyle, withRepeat, withSequence,
+  withTiming, Easing, cancelAnimation,
+} from 'react-native-reanimated';
+import { Colors } from '../constants/theme';
+
+interface Props {
+  active?: boolean;
+  barCount?: number;
+  height?: number;
+  color?: string;
+}
+
+const PHASES = [0, 0.4, 0.8, 0.2, 0.6, 0.1, 0.7, 0.3, 0.9, 0.5,
+                0.15, 0.55, 0.85, 0.25, 0.65];
+const BASE_DURATION = 900;
+
+function WaveBar({ active, maxH, phase, color }: {
+  active: boolean; maxH: number; phase: number; color: string;
+}) {
+  const h = useSharedValue(maxH * 0.15);
+
+  useEffect(() => {
+    if (active) {
+      const delay = Math.round(phase * BASE_DURATION);
+      h.value = withSequence(
+        withTiming(maxH * 0.15, { duration: delay }),
+        withRepeat(
+          withSequence(
+            withTiming(maxH, { duration: BASE_DURATION, easing: Easing.inOut(Easing.sin) }),
+            withTiming(maxH * 0.1, { duration: BASE_DURATION, easing: Easing.inOut(Easing.sin) }),
+          ),
+          -1,
+          false,
+        )
+      );
+    } else {
+      cancelAnimation(h);
+      h.value = withTiming(maxH * 0.12, { duration: 400 });
+    }
+  }, [active]);
+
+  const style = useAnimatedStyle(() => ({
+    height: h.value,
+    backgroundColor: color,
+    borderRadius: 3,
+    flex: 1,
+    marginHorizontal: 1.5,
+  }));
+
+  return <Animated.View style={style} />;
+}
+
+export default function WaveAnimation({ active = true, barCount = 40, height = 56, color }: Props) {
+  const bars = Array.from({ length: barCount }, (_, i) => i);
+  const barColor = color ?? Colors.accent;
+
+  return (
+    <View style={[s.wrap, { height }]}>
+      {bars.map((i) => (
+        <WaveBar
+          key={i}
+          active={active}
+          maxH={height}
+          phase={PHASES[i % PHASES.length]}
+          color={`${barColor}${Math.round(40 + (i % 5) * 24).toString(16).padStart(2, '0')}`}
+        />
+      ))}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  wrap: { flexDirection: 'row', alignItems: 'flex-end', overflow: 'hidden' },
+});
--- a/hooks/useAudio.ts
+++ b/hooks/useAudio.ts
@ -16,7 +16,14 @@ async function ensureSetup() {
  if (_setupDone) return;
  _setupDone = true;
  try {
-    await TrackPlayer.setupPlayer({ minBuffer: 15, maxBuffer: 50, playBuffer: 2.5 });
+    await TrackPlayer.setupPlayer({
+      minBuffer: 15,
+      maxBuffer: 50,
+      playBuffer: 2.5,
+      // iOS: show full artwork on lock screen
+      iosCategory: 'playback' as any,
+      iosCategoryMode: 'default' as any,
+    });
    await TrackPlayer.updateOptions({
      android: {
        appKilledPlaybackBehavior:
@ -28,11 +35,23 @@ async function ensureSetup() {
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.SeekTo,
+        Capability.Stop,
+      ],
+      compactCapabilities: [
+        Capability.Play,
+        Capability.Pause,
+        Capability.SkipToNext,
+      ],
+      // iOS lock screen: larger artwork
+      notificationCapabilities: [
+        Capability.Play,
+        Capability.Pause,
+        Capability.SkipToNext,
+        Capability.SkipToPrevious,
+        Capability.SeekTo,
      ],
-      compactCapabilities: [Capability.Play, Capability.Pause, Capability.SkipToNext],
    });
  } catch (e: any) {
-    // Player already set up on hot reload — update options only
    if (e?.message?.toLowerCase().includes('already')) {
      _setupDone = true;
      return;
@ -42,8 +61,6 @@ async function ensureSetup() {
  }
 }

-// Load a track and start playing. Mutex prevents double-load on the same ID.
-// Uses local file if downloaded, otherwise streams from CDN
 export async function loadAndPlay(track: Track) {
  if (_lastLoadedId === track.id) return;
  _lastLoadedId = track.id;
@ -55,8 +72,10 @@ export async function loadAndPlay(track: Track) {
      url:      url || (track.cdn_url2 || track.cdn_url),
      title:    track.title,
      artist:   track.artist,
+      // Pass artwork — TrackPlayer shows it on iOS lock screen & Now Playing
      artwork:  coverUrl(track.cover_url) ?? undefined,
      duration: track.duration,
+      album:    track.album ?? undefined,
    });
    await TrackPlayer.play();
  } catch (e) {
--- a/hooks/usePlayerFeatures.ts
+++ b/hooks/usePlayerFeatures.ts
@ -0,0 +1,145 @@
+/**
+ * useNextTrackPreload — preloads next track URL 30s before end
+ * useDownloadQueue    — sequential download queue (one at a time)
+ * useDynamicColor     — extracts dominant color from cover art
+ */
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { ImageColors } from 'react-native-image-colors';
+import * as FileSystem from 'expo-file-system';
+import TrackPlayer from 'react-native-track-player';
+import { usePlayer, useOffline } from '../store';
+import { coverUrl, getTrackUrl, Track } from '../services/api';
+
+// ── Dynamic color from cover ──────────────────────────────────────────────────
+
+const colorCache = new Map<string, string>();
+
+export function useDynamicColor(coverUri: string | null): string {
+  const [color, setColor] = useState('#1a1a2e');
+
+  useEffect(() => {
+    if (!coverUri) { setColor('#1a1a2e'); return; }
+    if (colorCache.has(coverUri)) { setColor(colorCache.get(coverUri)!); return; }
+
+    ImageColors.getColors(coverUri, {
+      fallback: '#1a1a2e',
+      cache: true,
+      key: coverUri,
+    }).then((result) => {
+      let picked = '#1a1a2e';
+      if (result.platform === 'ios') {
+        picked = result.primary ?? result.background ?? picked;
+      } else if (result.platform === 'android') {
+        picked = result.vibrant ?? result.dominant ?? picked;
+      }
+      // Darken slightly for UI safety
+      colorCache.set(coverUri, picked);
+      setColor(picked);
+    }).catch(() => {});
+  }, [coverUri]);
+
+  return color;
+}
+
+// ── Preload next track ────────────────────────────────────────────────────────
+
+export function useNextTrackPreload() {
+  const { queue, index, progress, duration } = usePlayer();
+  const preloadedId = useRef<number | null>(null);
+
+  useEffect(() => {
+    const next = queue[index + 1];
+    if (!next) return;
+    if (preloadedId.current === next.id) return;
+
+    const timeLeft = duration - progress;
+    if (timeLeft > 30 || timeLeft <= 0) return;
+
+    preloadedId.current = next.id;
+    // Prefetch the URL so it's in the network cache
+    getTrackUrl(next).then((url) => {
+      if (url?.startsWith('http')) {
+        fetch(url, { method: 'HEAD' }).catch(() => {});
+      }
+    }).catch(() => {});
+  }, [Math.floor(progress), index]);
+}
+
+// ── Sequential download queue ─────────────────────────────────────────────────
+
+const DL_DIR = FileSystem.documentDirectory + 'tracks/';
+
+interface QueueItem { track: Track; }
+
+const downloadQueue: QueueItem[] = [];
+let isProcessing = false;
+
+async function processQueue(
+  setDownloading: (id: number, p: number) => void,
+  addDownloaded: (id: number) => void,
+  downloadedTracks: Set<number>,
+) {
+  if (isProcessing || downloadQueue.length === 0) return;
+  isProcessing = true;
+
+  while (downloadQueue.length > 0) {
+    const item = downloadQueue[0];
+    const { track } = item;
+
+    if (downloadedTracks.has(track.id)) {
+      downloadQueue.shift();
+      continue;
+    }
+
+    try {
+      const info = await FileSystem.getInfoAsync(DL_DIR);
+      if (!info.exists) await FileSystem.makeDirectoryAsync(DL_DIR, { intermediates: true });
+
+      const url = track.cdn_url || track.cdn_url2;
+      if (!url) { downloadQueue.shift(); continue; }
+
+      const ext = (track.filename?.split('.').pop() || 'mp3');
+      const localPath = `${DL_DIR}${track.id}.${ext}`;
+      setDownloading(track.id, 0.01);
+
+      const dl = FileSystem.createDownloadResumable(url, localPath, {}, (dp) => {
+        const pct = dp.totalBytesExpectedToWrite > 0
+          ? dp.totalBytesWritten / dp.totalBytesExpectedToWrite : 0;
+        setDownloading(track.id, pct);
+      });
+
+      const result = await dl.downloadAsync();
+      if (result?.uri) {
+        addDownloaded(track.id);
+        setDownloading(track.id, 1);
+        await FileSystem.writeAsStringAsync(`${DL_DIR}${track.id}.json`, JSON.stringify({
+          id: track.id, title: track.title, artist: track.artist,
+          filename: track.filename, cover_url: track.cover_url, localPath: result.uri,
+        }));
+      }
+    } catch {
+      setDownloading(track.id, 1);
+    }
+
+    downloadQueue.shift();
+  }
+
+  isProcessing = false;
+}
+
+export function useDownloadQueue() {
+  const { setDownloading, addDownloadedTrack, downloadedTracks } = useOffline();
+
+  const enqueue = useCallback((track: Track) => {
+    if (downloadedTracks.has(track.id)) return;
+    if (downloadQueue.some(i => i.track.id === track.id)) return;
+    downloadQueue.push({ track });
+    processQueue(setDownloading, addDownloadedTrack, downloadedTracks);
+  }, [downloadedTracks, setDownloading, addDownloadedTrack]);
+
+  const enqueueAll = useCallback((tracks: Track[]) => {
+    tracks.forEach(enqueue);
+  }, [enqueue]);
+
+  return { enqueue, enqueueAll, queueLength: downloadQueue.length };
+}
--- a/hooks/useShakeToShuffle.ts
+++ b/hooks/useShakeToShuffle.ts
@ -0,0 +1,28 @@
+/**
+ * useShakeToShuffle — accelerometer-based shake detection
+ * Triggers callback when device is shaken hard enough
+ */
+import { useEffect, useRef } from 'react';
+import { Accelerometer } from 'expo-sensors';
+import * as Haptics from 'expo-haptics';
+
+const SHAKE_THRESHOLD = 2.2;
+const SHAKE_COOLDOWN  = 1500; // ms
+
+export function useShakeToShuffle(onShake: () => void) {
+  const lastShake = useRef(0);
+
+  useEffect(() => {
+    Accelerometer.setUpdateInterval(100);
+    const sub = Accelerometer.addListener(({ x, y, z }) => {
+      const acc = Math.sqrt(x * x + y * y + z * z);
+      const now = Date.now();
+      if (acc > SHAKE_THRESHOLD && now - lastShake.current > SHAKE_COOLDOWN) {
+        lastShake.current = now;
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        onShake();
+      }
+    });
+    return () => sub.remove();
+  }, [onShake]);
+}
--- a/main.yml
+++ b/main.yml
@ -1,56 +1,85 @@
-name: Build iOS IPA
-
-on:
-  push:
-    branches: [main, master]
-  workflow_dispatch:
-
-jobs:
-  build:
-    runs-on: macos-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node 20
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Expo prebuild
-        run: npx expo prebuild --platform ios --clean
-        env:
-          EXPO_NO_DOTENV: 1
-
-      - name: Build unsigned archive
-        run: |
-          xcodebuild archive \
-            -workspace "ios/Burmalda Music.xcworkspace" \
-            -scheme "Burmalda Music" \
-            -configuration Release \
-            -sdk iphoneos \
-            -archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
-            CODE_SIGNING_REQUIRED=NO \
-            CODE_SIGN_IDENTITY="" \
-            CODE_SIGNING_ALLOWED=NO \
-            ENABLE_BITCODE=NO \
-            | xcpretty || true
-
-      - name: Package IPA
-        run: |
-          mkdir -p Payload
-          cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
-          zip -qr burmalda-unsigned.ipa Payload
-          rm -rf Payload
-
-      - name: Upload IPA artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: burmalda-unsigned-ipa
-          path: burmalda-unsigned.ipa
-          retention-days: 30
+name: NodeShiftMusic iOS Build
+
+on:
+  push:
+    branches: [main, master]
+  workflow_dispatch:
+
+jobs:
+  build-ipa:
+    name: Build Unsigned IPA
+    runs-on: macos-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install CocoaPods
+        run: sudo gem install cocoapods --no-document
+
+      - name: Expo prebuild
+        env:
+          EXPO_NO_DOTENV: 1
+        run: npx expo prebuild --platform ios --clean
+
+      - name: Install Pods
+        working-directory: ios
+        run: pod install --repo-update
+
+      - name: Find workspace & scheme
+        id: xcode
+        run: |
+          WS=$(find ios -name "*.xcworkspace" -maxdepth 2 | head -1)
+          SCHEME=$(basename "$WS" .xcworkspace)
+          echo "workspace=$WS" >> $GITHUB_OUTPUT
+          echo "scheme=$SCHEME" >> $GITHUB_OUTPUT
+          echo "Workspace: $WS  |  Scheme: $SCHEME"
+
+      - name: Build unsigned archive
+        run: |
+          xcodebuild archive \
+            -workspace "${{ steps.xcode.outputs.workspace }}" \
+            -scheme "${{ steps.xcode.outputs.scheme }}" \
+            -configuration Release \
+            -sdk iphoneos \
+            -archivePath "$RUNNER_TEMP/NodeShiftMusic.xcarchive" \
+            CODE_SIGNING_REQUIRED=NO \
+            CODE_SIGN_IDENTITY="" \
+            CODE_SIGNING_ALLOWED=NO \
+            ENABLE_BITCODE=NO \
+            2>&1 | xcpretty || true
+
+      - name: Package IPA
+        run: |
+          APPS="$RUNNER_TEMP/NodeShiftMusic.xcarchive/Products/Applications"
+          mkdir -p Payload
+          cp -r "$APPS/"*.app Payload/
+          zip -qr NodeShiftMusic-unsigned.ipa Payload
+          rm -rf Payload
+          echo "IPA size: $(du -sh NodeShiftMusic-unsigned.ipa | cut -f1)"
+
+      - name: Upload IPA
+        uses: actions/upload-artifact@v4
+        with:
+          name: NodeShiftMusic-unsigned
+          path: NodeShiftMusic-unsigned.ipa
+          retention-days: 90
+
+      - name: Summary
+        run: |
+          echo "## NodeShiftMusic Build" >> $GITHUB_STEP_SUMMARY
+          echo "Branch: \`${{ github.ref_name }}\`" >> $GITHUB_STEP_SUMMARY
+          echo "Commit: \`${{ github.sha }}\`" >> $GITHUB_STEP_SUMMARY
+          if [ -f NodeShiftMusic-unsigned.ipa ]; then
+            echo "IPA: $(du -sh NodeShiftMusic-unsigned.ipa | cut -f1)" >> $GITHUB_STEP_SUMMARY
+            echo "Скачай из раздела Artifacts этого run'а" >> $GITHUB_STEP_SUMMARY
+          fi
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -34,7 +34,12 @@
    "react-native-screens": "3.31.1",
    "react-native-svg": "^15.15.4",
    "react-native-track-player": "^4.1.1",
-    "zustand": "^4.5.4"
+    "zustand": "^4.5.4",
+    "react-native-image-colors": "^2.4.0",
+    "expo-sensors": "~13.0.9",
+    "expo-sharing": "~12.0.1",
+    "expo-clipboard": "~6.0.3",
+    "react-native-qrcode-svg": "^6.3.14"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0",
--- a/services/mywave.ts
+++ b/services/mywave.ts
@ -0,0 +1,77 @@
+import { Track } from './api';
+import { useLikes } from '../store';
+
+const DEEPSEEK_API_KEY = 'REDACTED_DEEPSEEK_API_KEY';
+const DEEPSEEK_URL = 'https://api.deepseek.com/chat/completions';
+
+export async function getMyWaveTracks(allTracks: Track[]): Promise<Track[]> {
+  const likedIds = [...useLikes.getState().likes];
+
+  if (likedIds.length === 0) {
+    // No liked tracks - return random shuffle
+    return [...allTracks].sort(() => Math.random() - 0.5).slice(0, 30);
+  }
+
+  const likedTracks = allTracks.filter((t) => likedIds.includes(t.id));
+  const likedNames = likedTracks
+    .slice(0, 20)
+    .map((t) => `${t.artist} - ${t.title}`)
+    .join('\n');
+
+  const otherTracks = allTracks.filter((t) => !likedIds.includes(t.id));
+  const otherNames = otherTracks
+    .slice(0, 80)
+    .map((t, i) => `${i}. ${t.artist} - ${t.title}`)
+    .join('\n');
+
+  try {
+    const res = await fetch(DEEPSEEK_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${DEEPSEEK_API_KEY}`,
+      },
+      body: JSON.stringify({
+        model: 'deepseek-chat',
+        messages: [
+          {
+            role: 'system',
+            content: 'You are a music recommendation engine. Given liked songs, pick the most similar tracks from a list. Return ONLY a JSON array of track indices (numbers), maximum 25. No explanation.',
+          },
+          {
+            role: 'user',
+            content: `Liked songs:\n${likedNames}\n\nAvailable tracks (pick by index):\n${otherNames}`,
+          },
+        ],
+        max_tokens: 200,
+        temperature: 0.7,
+      }),
+    });
+
+    if (!res.ok) throw new Error('DeepSeek API error');
+    const data = await res.json();
+    const content = data.choices?.[0]?.message?.content || '[]';
+    const match = content.match(/\[[\d,\s]+\]/);
+    if (match) {
+      const indices: number[] = JSON.parse(match[0]);
+      const recommended = indices
+        .filter((i) => i >= 0 && i < otherTracks.length)
+        .map((i) => otherTracks[i])
+        .filter(Boolean);
+      // Mix recommended with some liked
+      const mixed = [
+        ...likedTracks.sort(() => Math.random() - 0.5).slice(0, 5),
+        ...recommended,
+      ].sort(() => Math.random() - 0.5);
+      return mixed.slice(0, 30);
+    }
+  } catch (e) {
+    console.warn('MyWave DeepSeek error:', e);
+  }
+
+  // Fallback: random mix with liked boosted
+  return [
+    ...likedTracks.sort(() => Math.random() - 0.5),
+    ...otherTracks.sort(() => Math.random() - 0.5).slice(0, 20),
+  ].slice(0, 30);
+}
--- a/setup-eas.sh
+++ b/setup-eas.sh
@ -0,0 +1,70 @@
+#!/bin/bash
+# EAS Setup for GitHub Actions
+# This script helps configure EAS_TOKEN for CI/CD
+
+set -e
+
+echo "🔐 EAS Token Setup for GitHub Actions"
+echo "===================================="
+echo ""
+
+# Check if eas-cli is installed
+if ! command -v eas &> /dev/null; then
+    echo "❌ EAS CLI not found. Installing..."
+    npm install -g eas-cli
+fi
+
+echo "📋 Step 1: Login to EAS"
+echo "Open terminal and run: eas login"
+echo "Then follow the prompts"
+echo ""
+read -p "Press Enter when done..."
+
+echo ""
+echo "📋 Step 2: Get your EAS token"
+echo ""
+
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    # macOS
+    TOKEN_FILE="$HOME/.eas-credentials"
+elif [[ "$OSTYPE" == "msys" ]]; then
+    # Windows Git Bash
+    TOKEN_FILE="$USERPROFILE\.eas-credentials"
+else
+    # Linux
+    TOKEN_FILE="$HOME/.eas-credentials"
+fi
+
+if [ -f "$TOKEN_FILE" ]; then
+    echo "✓ Found credentials at: $TOKEN_FILE"
+    echo ""
+    echo "Your EAS token:"
+    echo "================================"
+    cat "$TOKEN_FILE" | grep -o '"access_token":"[^"]*"' | head -1
+    echo "================================"
+    echo ""
+    echo "📋 Copy the access_token value (between quotes)"
+else
+    echo "❌ Credentials file not found at: $TOKEN_FILE"
+    echo "Make sure you ran: eas login"
+    exit 1
+fi
+
+echo ""
+echo "📋 Step 3: Add to GitHub Secrets"
+echo ""
+echo "1. Go to: https://github.com/YOUR_USERNAME/nodeshiftmusicburmalda/settings/secrets/actions"
+echo "2. Click 'New repository secret'"
+echo "3. Name: EAS_TOKEN"
+echo "4. Paste your token value"
+echo "5. Click 'Add secret'"
+echo ""
+
+echo "✅ Setup complete!"
+echo ""
+echo "Next steps:"
+echo "1. git add ."
+echo "2. git commit -m 'Setup GitHub Actions'"
+echo "3. git push origin main"
+echo ""
+echo "Your app will automatically build on EAS!"
--- a/store/index.ts
+++ b/store/index.ts
@ -1,170 +1,259 @@
-import { create } from 'zustand';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { Track, User } from '../services/api';
-
-// ── Offline / Downloads ───────────────────────────────────────────────────────
-
-interface OfflineState {
-  downloadedTracks:    Set<number>;
-  downloading:         Map<number, number>; // trackId -> progress 0-1
-  isOnline:            boolean;
-
-  addDownloadedTrack:  (id: number) => void;
-  removeDownloadedTrack: (id: number) => void;
-  setDownloading:      (id: number, progress: number) => void;
-  clearDownloading:    (id: number) => void;
-  loadDownloadedTracks: () => Promise<void>;
-  setOnline:           (online: boolean) => void;
-}
-
-export const useOffline = create<OfflineState>((set, get) => ({
-  downloadedTracks: new Set(),
-  downloading:      new Map(),
-  isOnline:         true,
-
-  addDownloadedTrack: (id) => {
-    const next = new Set(get().downloadedTracks);
-    next.add(id);
-    set({ downloadedTracks: next });
-  },
-
-  removeDownloadedTrack: (id) => {
-    const next = new Set(get().downloadedTracks);
-    next.delete(id);
-    set({ downloadedTracks: next });
-  },
-
-  setDownloading: (id, progress) => {
-    const next = new Map(get().downloading);
-    if (progress >= 1) {
-      next.delete(id);
-    } else {
-      next.set(id, progress);
-    }
-    set({ downloading: next });
-  },
-
-  clearDownloading: (id) => {
-    const next = new Map(get().downloading);
-    next.delete(id);
-    set({ downloading: next });
-  },
-
-  loadDownloadedTracks: async () => {
-    try {
-      const { getDownloadedTracks } = await import('../services/offline');
-      const ids = await getDownloadedTracks();
-      set({ downloadedTracks: new Set(ids) });
-    } catch (err) {
-      console.warn('Failed to load downloaded tracks:', err);
-    }
-  },
-
-  setOnline: (online) => set({ isOnline: online }),
-}));
-
-// ── Player ────────────────────────────────────────────────────────────────────
-
-interface PlayerState {
-  queue:      Track[];
-  index:      number;
-  playing:    boolean;
-  progress:   number;
-  duration:   number;
-  repeat:     0 | 1 | 2;
-  shuffle:    boolean;
-  expanded:   boolean;
-
-  setQueue:      (tracks: Track[], index?: number) => void;
-  setIndex:      (i: number) => void;
-  setPlaying:    (v: boolean) => void;
-  setProgress:   (v: number) => void;
-  setDuration:   (v: number) => void;
-  cycleRepeat:   () => void;
-  toggleShuffle: () => void;
-  setExpanded:   (v: boolean) => void;
-  nextTrack:     () => number;
-  prevTrack:     () => number;
-}
-
-export const usePlayer = create<PlayerState>((set, get) => ({
-  queue:    [],
-  index:    -1,
-  playing:  false,
-  progress: 0,
-  duration: 0,
-  repeat:   0,
-  shuffle:  false,
-  expanded: false,
-
-  setQueue:      (tracks, index = 0) => set({ queue: tracks, index }),
-  setIndex:      (index) => set({ index }),
-  setPlaying:    (playing) => set({ playing }),
-  setProgress:   (progress) => set({ progress }),
-  setDuration:   (duration) => set({ duration }),
-  cycleRepeat:   () => set((s) => ({ repeat: ((s.repeat + 1) % 3) as 0 | 1 | 2 })),
-  toggleShuffle: () => set((s) => ({ shuffle: !s.shuffle })),
-  setExpanded:   (expanded) => set({ expanded }),
-
-  nextTrack: () => {
-    const { queue, index, shuffle, repeat } = get();
-    if (repeat === 2) return index;
-    if (shuffle) return Math.floor(Math.random() * queue.length);
-    const next = index + 1;
-    if (next >= queue.length) return repeat === 1 ? 0 : index;
-    return next;
-  },
-  prevTrack: () => {
-    const { queue, index, shuffle } = get();
-    if (shuffle) return Math.floor(Math.random() * queue.length);
-    return index - 1 < 0 ? queue.length - 1 : index - 1;
-  },
-}));
-
-// ── Auth ──────────────────────────────────────────────────────────────────────
-
-interface AuthState {
-  user:     User | null;
-  ready:    boolean;
-  setUser:  (u: User | null) => void;
-  setReady: (v: boolean) => void;
-}
-
-export const useAuth = create<AuthState>((set) => ({
-  user:     null,
-  ready:    false,
-  setUser:  (user) => set({ user }),
-  setReady: (ready) => set({ ready }),
-}));
-
-// ── Likes ─────────────────────────────────────────────────────────────────────
-
-const LIKES_KEY = 'ns-music-likes';
-
-interface LikesState {
-  likes:      Set<number>;
-  loadLikes:  () => Promise<void>;
-  toggleLike: (id: number) => void;
-  isLiked:    (id: number) => boolean;
-}
-
-export const useLikes = create<LikesState>((set, get) => ({
-  likes: new Set(),
-
-  loadLikes: async () => {
-    try {
-      const raw = await AsyncStorage.getItem(LIKES_KEY);
-      const arr: number[] = raw ? JSON.parse(raw) : [];
-      set({ likes: new Set(arr) });
-    } catch {}
-  },
-
-  toggleLike: (id) => {
-    const next = new Set(get().likes);
-    if (next.has(id)) next.delete(id); else next.add(id);
-    set({ likes: next });
-    AsyncStorage.setItem(LIKES_KEY, JSON.stringify([...next])).catch(() => {});
-  },
-
-  isLiked: (id) => get().likes.has(id),
-}));
+import { create } from 'zustand';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Track, User } from '../services/api';
+
+// ── Offline / Downloads ───────────────────────────────────────────────────────
+
+interface OfflineState {
+  downloadedTracks:    Set<number>;
+  downloading:         Map<number, number>;
+  isOnline:            boolean;
+  addDownloadedTrack:  (id: number) => void;
+  removeDownloadedTrack: (id: number) => void;
+  setDownloading:      (id: number, progress: number) => void;
+  clearDownloading:    (id: number) => void;
+  loadDownloadedTracks: () => Promise<void>;
+  setOnline:           (online: boolean) => void;
+}
+
+export const useOffline = create<OfflineState>((set, get) => ({
+  downloadedTracks: new Set(),
+  downloading:      new Map(),
+  isOnline:         true,
+
+  addDownloadedTrack: (id) => {
+    const next = new Set(get().downloadedTracks);
+    next.add(id);
+    set({ downloadedTracks: next });
+  },
+  removeDownloadedTrack: (id) => {
+    const next = new Set(get().downloadedTracks);
+    next.delete(id);
+    set({ downloadedTracks: next });
+  },
+  setDownloading: (id, progress) => {
+    const next = new Map(get().downloading);
+    if (progress >= 1) next.delete(id);
+    else next.set(id, progress);
+    set({ downloading: next });
+  },
+  clearDownloading: (id) => {
+    const next = new Map(get().downloading);
+    next.delete(id);
+    set({ downloading: next });
+  },
+  loadDownloadedTracks: async () => {
+    try {
+      const { getDownloadedTracks } = await import('../services/offline');
+      const ids = await getDownloadedTracks();
+      set({ downloadedTracks: new Set(ids) });
+    } catch (err) {
+      console.warn('Failed to load downloaded tracks:', err);
+    }
+  },
+  setOnline: (online) => set({ isOnline: online }),
+}));
+
+// ── Player ────────────────────────────────────────────────────────────────────
+
+interface PlayerState {
+  queue:      Track[];
+  index:      number;
+  playing:    boolean;
+  progress:   number;
+  duration:   number;
+  repeat:     0 | 1 | 2;
+  shuffle:    boolean;
+  expanded:   boolean;
+
+  setQueue:      (tracks: Track[], index?: number) => void;
+  setIndex:      (i: number) => void;
+  setPlaying:    (v: boolean) => void;
+  setProgress:   (v: number) => void;
+  setDuration:   (v: number) => void;
+  cycleRepeat:   () => void;
+  toggleShuffle: () => void;
+  setExpanded:   (v: boolean) => void;
+  nextTrack:     () => number;
+  prevTrack:     () => number;
+}
+
+export const usePlayer = create<PlayerState>((set, get) => ({
+  queue:    [],
+  index:    -1,
+  playing:  false,
+  progress: 0,
+  duration: 0,
+  repeat:   0,
+  shuffle:  false,
+  expanded: false,
+
+  setQueue:      (tracks, index = 0) => set({ queue: tracks, index }),
+  setIndex:      (index) => set({ index }),
+  setPlaying:    (playing) => set({ playing }),
+  setProgress:   (progress) => set({ progress }),
+  setDuration:   (duration) => set({ duration }),
+  cycleRepeat:   () => set((s) => ({ repeat: ((s.repeat + 1) % 3) as 0 | 1 | 2 })),
+  toggleShuffle: () => set((s) => ({ shuffle: !s.shuffle })),
+  setExpanded:   (expanded) => set({ expanded }),
+
+  nextTrack: () => {
+    const { queue, index, shuffle, repeat } = get();
+    if (repeat === 2) return index;
+    if (shuffle) return Math.floor(Math.random() * queue.length);
+    const next = index + 1;
+    if (next >= queue.length) return repeat === 1 ? 0 : index;
+    return next;
+  },
+  prevTrack: () => {
+    const { queue, index, shuffle } = get();
+    if (shuffle) return Math.floor(Math.random() * queue.length);
+    return index - 1 < 0 ? queue.length - 1 : index - 1;
+  },
+}));
+
+// ── Auth ──────────────────────────────────────────────────────────────────────
+
+interface AuthState {
+  user:     User | null;
+  ready:    boolean;
+  setUser:  (u: User | null) => void;
+  setReady: (v: boolean) => void;
+}
+
+export const useAuth = create<AuthState>((set) => ({
+  user:     null,
+  ready:    false,
+  setUser:  (user) => set({ user }),
+  setReady: (ready) => set({ ready }),
+}));
+
+// ── Likes ─────────────────────────────────────────────────────────────────────
+
+const LIKES_KEY = 'ns-music-likes';
+
+interface LikesState {
+  likes:      Set<number>;
+  loadLikes:  () => Promise<void>;
+  toggleLike: (id: number) => void;
+  isLiked:    (id: number) => boolean;
+}
+
+export const useLikes = create<LikesState>((set, get) => ({
+  likes: new Set(),
+
+  loadLikes: async () => {
+    try {
+      const raw = await AsyncStorage.getItem(LIKES_KEY);
+      const arr: number[] = raw ? JSON.parse(raw) : [];
+      set({ likes: new Set(arr) });
+    } catch {}
+  },
+  toggleLike: (id) => {
+    const next = new Set(get().likes);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    set({ likes: next });
+    AsyncStorage.setItem(LIKES_KEY, JSON.stringify([...next])).catch(() => {});
+  },
+  isLiked: (id) => get().likes.has(id),
+}));
+
+// ── Hidden Tracks ─────────────────────────────────────────────────────────────
+
+const HIDDEN_KEY = 'ns-music-hidden';
+
+interface HiddenState {
+  hidden:      Set<number>;
+  loadHidden:  () => Promise<void>;
+  toggleHide:  (id: number) => void;
+  isHidden:    (id: number) => boolean;
+}
+
+export const useHidden = create<HiddenState>((set, get) => ({
+  hidden: new Set(),
+
+  loadHidden: async () => {
+    try {
+      const raw = await AsyncStorage.getItem(HIDDEN_KEY);
+      const arr: number[] = raw ? JSON.parse(raw) : [];
+      set({ hidden: new Set(arr) });
+    } catch {}
+  },
+  toggleHide: (id) => {
+    const next = new Set(get().hidden);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    set({ hidden: next });
+    AsyncStorage.setItem(HIDDEN_KEY, JSON.stringify([...next])).catch(() => {});
+  },
+  isHidden: (id) => get().hidden.has(id),
+}));
+
+// ── Playlists ─────────────────────────────────────────────────────────────────
+
+const PLAYLISTS_KEY = 'ns-music-playlists';
+
+export interface Playlist {
+  id:         string;
+  name:       string;
+  trackIds:   number[];
+  createdAt:  number;
+}
+
+interface PlaylistState {
+  playlists:      Playlist[];
+  loadPlaylists:  () => Promise<void>;
+  createPlaylist: (name: string) => Playlist;
+  deletePlaylist: (id: string) => void;
+  renamePlaylist: (id: string, name: string) => void;
+  addToPlaylist:  (playlistId: string, trackId: number) => void;
+  removeFromPlaylist: (playlistId: string, trackId: number) => void;
+}
+
+export const usePlaylists = create<PlaylistState>((set, get) => ({
+  playlists: [],
+
+  loadPlaylists: async () => {
+    try {
+      const raw = await AsyncStorage.getItem(PLAYLISTS_KEY);
+      const arr: Playlist[] = raw ? JSON.parse(raw) : [];
+      set({ playlists: arr });
+    } catch {}
+  },
+
+  createPlaylist: (name) => {
+    const pl: Playlist = { id: `pl_${Date.now()}`, name, trackIds: [], createdAt: Date.now() };
+    const next = [...get().playlists, pl];
+    set({ playlists: next });
+    AsyncStorage.setItem(PLAYLISTS_KEY, JSON.stringify(next)).catch(() => {});
+    return pl;
+  },
+
+  deletePlaylist: (id) => {
+    const next = get().playlists.filter((p) => p.id !== id);
+    set({ playlists: next });
+    AsyncStorage.setItem(PLAYLISTS_KEY, JSON.stringify(next)).catch(() => {});
+  },
+
+  renamePlaylist: (id, name) => {
+    const next = get().playlists.map((p) => p.id === id ? { ...p, name } : p);
+    set({ playlists: next });
+    AsyncStorage.setItem(PLAYLISTS_KEY, JSON.stringify(next)).catch(() => {});
+  },
+
+  addToPlaylist: (playlistId, trackId) => {
+    const next = get().playlists.map((p) => {
+      if (p.id !== playlistId || p.trackIds.includes(trackId)) return p;
+      return { ...p, trackIds: [...p.trackIds, trackId] };
+    });
+    set({ playlists: next });
+    AsyncStorage.setItem(PLAYLISTS_KEY, JSON.stringify(next)).catch(() => {});
+  },
+
+  removeFromPlaylist: (playlistId, trackId) => {
+    const next = get().playlists.map((p) =>
+      p.id !== playlistId ? p : { ...p, trackIds: p.trackIds.filter((id) => id !== trackId) }
+    );
+    set({ playlists: next });
+    AsyncStorage.setItem(PLAYLISTS_KEY, JSON.stringify(next)).catch(() => {});
+  },
+}));
--- a/tsconfig.json
+++ b/tsconfig.json
@ -17,6 +17,6 @@
      "@/*": ["./*"]
    }
  },
-  "include": ["app", "components", "constants", "hooks", "services", "store"],
+  "include": ["app", "components", "constants", "hooks", "services", "store", "types"],
  "exclude": ["node_modules", "dist"]
 }
--- a/types/modules.d.ts
+++ b/types/modules.d.ts
@ -0,0 +1,54 @@
+// Type stubs for packages installed at build time
+declare module 'expo-clipboard' {
+  export function setStringAsync(text: string): Promise<void>;
+  export function getStringAsync(): Promise<string>;
+}
+
+declare module 'expo-sharing' {
+  export function isAvailableAsync(): Promise<boolean>;
+  export function shareAsync(url: string, options?: { dialogTitle?: string; mimeType?: string }): Promise<void>;
+}
+
+declare module 'expo-sensors' {
+  export const Accelerometer: {
+    setUpdateInterval(ms: number): void;
+    addListener(callback: (data: { x: number; y: number; z: number }) => void): { remove(): void };
+  };
+}
+
+declare module 'react-native-image-colors' {
+  export type ImageColorsResult =
+    | { platform: 'ios'; primary?: string; secondary?: string; background?: string; detail?: string }
+    | { platform: 'android'; vibrant?: string; dominant?: string; darkVibrant?: string; lightVibrant?: string; darkMuted?: string; lightMuted?: string; muted?: string };
+
+  export const ImageColors: {
+    getColors(
+      uri: string,
+      config?: { fallback?: string; cache?: boolean; key?: string }
+    ): Promise<ImageColorsResult>;
+  };
+}
+
+declare module 'react-native-qrcode-svg' {
+  import { ComponentType } from 'react';
+  interface QRCodeProps {
+    value: string;
+    size?: number;
+    color?: string;
+    backgroundColor?: string;
+    logo?: any;
+    logoSize?: number;
+    logoBackgroundColor?: string;
+    logoMargin?: number;
+    logoBorderRadius?: number;
+    quietZone?: number;
+    enableLinearGradient?: boolean;
+    gradientDirection?: string[];
+    linearGradient?: string[];
+    ecl?: 'L' | 'M' | 'Q' | 'H';
+    getRef?: (ref: any) => void;
+    onError?: (error: Error) => void;
+  }
+  const QRCode: ComponentType<QRCodeProps>;
+  export default QRCode;
+}