feat(mobile): offline downloads, persistent event queue and offline start (M5)

- Downloads queue (2 parallel, Wi-Fi only by default) stores files under
  the app's document directory and track metadata in SQLite; Collection
  gets a Downloads tab, album and player screens get download buttons.
- Player plays downloaded files and local covers; My Wave falls back to
  a shuffle of downloaded tracks when the server is unreachable.
- Playback events that fail on the network are kept in SQLite and sent
  when the connection returns.
- AuthSession can open offline with the cached user and fetches an
  access token before the first request once online.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/mobile/src/app/(tabs)/_layout.tsx

@@ -1,36 +1,31 @@
-import { Tabs, useRouter } from "expo-router";
-import { useTranslation } from "react-i18next";
-import { Pressable, Text, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useNetInfo } from '@react-native-community/netinfo';
+import { Tabs, useRouter } from 'expo-router';
+import { useTranslation } from 'react-i18next';
+import { Pressable, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { player } from "../../player/controller";
-import { usePlayerState } from "../../player/hooks";
-import { colors } from "../../theme";
-import { Cover, Icon, type IconName } from "../../ui/kit";
-import { UpdateDialog } from "../../ui/UpdateDialog";
+import { player } from '../../player/controller';
+import { usePlayerState } from '../../player/hooks';
+import { colors } from '../../theme';
+import { Cover, Icon, type IconName } from '../../ui/kit';
+import { UpdateDialog } from '../../ui/UpdateDialog';
 
-const ICONS: Record<string, IconName> = {
-  index: "home",
-  search: "search",
-  collection: "library-music",
-  profile: "person",
-};
+const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', profile: 'person' };
 
 export default function TabsLayout() {
   const { t } = useTranslation();
   const labels: Record<string, string> = {
-    index: t("nav.home"),
-    search: t("mobile.search"),
-    collection: t("nav.collection"),
-    profile: t("mobile.profile"),
+    index: t('nav.home'),
+    search: t('mobile.search'),
+    collection: t('nav.collection'),
+    profile: t('mobile.profile'),
   };
+  const net = useNetInfo();
   return (
     <>
+      {net.isConnected === false && <OfflineBanner text={t('mobile.offline')} />}
       <Tabs
-        screenOptions={{
-          headerShown: false,
-          sceneStyle: { backgroundColor: colors.bg },
-        }}
+        screenOptions={{ headerShown: false, sceneStyle: { backgroundColor: colors.bg } }}
         tabBar={({ state, navigation }) => (
           <View>
             <MiniPlayer />
@@ -69,7 +64,7 @@ function TabBar({
     <View
       accessibilityRole="tablist"
       style={{
-        flexDirection: "row",
+        flexDirection: 'row',
         paddingBottom: insets.bottom,
         backgroundColor: colors.bg2,
         borderTopWidth: 1,
@@ -85,24 +80,10 @@ function TabBar({
             accessibilityRole="tab"
             accessibilityState={{ selected: on }}
             accessibilityLabel={labels[name]}
-            style={{
-              flex: 1,
-              alignItems: "center",
-              paddingVertical: 8,
-              gap: 2,
-            }}
+            style={{ flex: 1, alignItems: 'center', paddingVertical: 8, gap: 2 }}
           >
-            <Icon
-              name={ICONS[name] ?? "circle"}
-              color={on ? colors.accent2 : colors.text3}
-            />
-            <Text
-              style={{
-                fontSize: 11,
-                color: on ? colors.text : colors.text3,
-                fontWeight: on ? "600" : "400",
-              }}
-            >
+            <Icon name={ICONS[name] ?? 'circle'} color={on ? colors.accent2 : colors.text3} />
+            <Text style={{ fontSize: 11, color: on ? colors.text : colors.text3, fontWeight: on ? '600' : '400' }}>
               {labels[name]}
             </Text>
           </Pressable>
@@ -119,71 +100,45 @@ function MiniPlayer() {
   const st = usePlayerState();
   const track = st.track;
   if (!track) return null;
-  const progress = st.durationMs
-    ? Math.min(st.positionMs / st.durationMs, 1)
-    : 0;
+  const progress = st.durationMs ? Math.min(st.positionMs / st.durationMs, 1) : 0;
   return (
     <Pressable
-      onPress={() => router.push("/player")}
+      onPress={() => router.push('/player')}
       accessibilityRole="button"
-      accessibilityLabel={t("mobile.open_player")}
-      style={{
-        backgroundColor: colors.surface,
-        borderTopWidth: 1,
-        borderTopColor: colors.line,
-      }}
+      accessibilityLabel={t('mobile.open_player')}
+      style={{ backgroundColor: colors.surface, borderTopWidth: 1, borderTopColor: colors.line }}
     >
       <View style={{ height: 2, backgroundColor: colors.surface3 }}>
-        <View
-          style={{
-            height: 2,
-            width: `${progress * 100}%`,
-            backgroundColor: colors.accent2,
-          }}
-        />
+        <View style={{ height: 2, width: `${progress * 100}%`, backgroundColor: colors.accent2 }} />
       </View>
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          gap: 12,
-          paddingHorizontal: 12,
-          paddingVertical: 8,
-        }}
-      >
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 12, paddingVertical: 8 }}>
         <Cover album={track.album} size={42} />
         <View style={{ flex: 1, minWidth: 0 }}>
-          <Text
-            numberOfLines={1}
-            style={{ color: colors.text, fontWeight: "600" }}
-          >
+          <Text numberOfLines={1} style={{ color: colors.text, fontWeight: '600' }}>
             {track.title}
           </Text>
           <Text numberOfLines={1} style={{ color: colors.text2, fontSize: 12 }}>
-            {track.artists.map((a) => a.name).join(", ")}
+            {track.artists.map((a) => a.name).join(', ')}
           </Text>
         </View>
-        <Pressable
-          onPress={() => player.toggle()}
-          hitSlop={10}
-          accessibilityRole="button"
-          accessibilityLabel={t(st.playing ? "player.pause" : "player.play")}
-        >
-          <Icon
-            name={st.playing ? "pause" : "play-arrow"}
-            size={32}
-            color={colors.text}
-          />
+        <Pressable onPress={() => player.toggle()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t(st.playing ? 'player.pause' : 'player.play')}>
+          <Icon name={st.playing ? 'pause' : 'play-arrow'} size={32} color={colors.text} />
         </Pressable>
-        <Pressable
-          onPress={() => player.next()}
-          hitSlop={10}
-          accessibilityRole="button"
-          accessibilityLabel={t("player.next")}
-        >
+        <Pressable onPress={() => player.next()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.next')}>
           <Icon name="skip-next" size={28} color={colors.text2} />
         </Pressable>
       </View>
     </Pressable>
   );
 }
+
+/** Нет сети: доступны «Скачанное» и офлайн-волна. */
+function OfflineBanner({ text }: { text: string }) {
+  const insets = useSafeAreaInsets();
+  return (
+    <View accessibilityRole="alert" style={{ paddingTop: insets.top + 6, paddingBottom: 6, paddingHorizontal: 16, backgroundColor: colors.surface3, flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+      <Icon name="cloud-off" size={16} color={colors.text2} />
+      <Text style={{ color: colors.text2, fontSize: 12 }}>{text}</Text>
+    </View>
+  );
+}