feat(mobile): self-update dialog with verified APK download and install (M5)

Checks the server for a newer release at most every 6 hours and on
demand in Profile, shows release notes, downloads the APK with progress,
verifies SHA-256 in 1 MB chunks and hands it to the system installer.
Updates below min_supported cannot be dismissed.

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

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

@@ -1,43 +1,55 @@
-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 { 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 { 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"),
   };
   return (
-    <Tabs
-      screenOptions={{ headerShown: false, sceneStyle: { backgroundColor: colors.bg } }}
-      tabBar={({ state, navigation }) => (
-        <View>
-          <MiniPlayer />
-          <TabBar
-            routes={state.routes.map((r) => r.name)}
-            active={state.index}
-            labels={labels}
-            onPress={(name) => navigation.navigate(name)}
-          />
-        </View>
-      )}
-    >
-      <Tabs.Screen name="index" />
-      <Tabs.Screen name="search" />
-      <Tabs.Screen name="collection" />
-      <Tabs.Screen name="profile" />
-    </Tabs>
+    <>
+      <Tabs
+        screenOptions={{
+          headerShown: false,
+          sceneStyle: { backgroundColor: colors.bg },
+        }}
+        tabBar={({ state, navigation }) => (
+          <View>
+            <MiniPlayer />
+            <TabBar
+              routes={state.routes.map((r) => r.name)}
+              active={state.index}
+              labels={labels}
+              onPress={(name) => navigation.navigate(name)}
+            />
+          </View>
+        )}
+      >
+        <Tabs.Screen name="index" />
+        <Tabs.Screen name="search" />
+        <Tabs.Screen name="collection" />
+        <Tabs.Screen name="profile" />
+      </Tabs>
+      <UpdateDialog />
+    </>
   );
 }
 
@@ -57,7 +69,7 @@ function TabBar({
     <View
       accessibilityRole="tablist"
       style={{
-        flexDirection: 'row',
+        flexDirection: "row",
         paddingBottom: insets.bottom,
         backgroundColor: colors.bg2,
         borderTopWidth: 1,
@@ -73,10 +85,24 @@ 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>
@@ -93,31 +119,68 @@ 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>

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

@@ -1,26 +1,33 @@
-import { unwrap } from '@pipu/core';
-import { SUPPORTED_LOCALES, type Locale } from '@pipu/i18n';
-import Constants from 'expo-constants';
-import * as Linking from 'expo-linking';
-import { useTranslation } from 'react-i18next';
-import { Pressable, ScrollView, Text, View } from 'react-native';
+import { unwrap } from "@pipu/core";
+import { SUPPORTED_LOCALES, type Locale } from "@pipu/i18n";
+import Constants from "expo-constants";
+import * as Linking from "expo-linking";
+import { useTranslation } from "react-i18next";
+import { Pressable, ScrollView, Text, View } from "react-native";
 
-import { useSession, useSessionCtx, useUser } from '../../lib/session';
-import { player } from '../../player/controller';
-import { colors, radius } from '../../theme';
-import { Button, H1, Icon, Muted, Screen, Segmented } from '../../ui/kit';
+import { useSession, useSessionCtx, useUser } from "../../lib/session";
+import { updater } from "../../lib/update";
+import { player } from "../../player/controller";
+import { colors, radius } from "../../theme";
+import { Button, H1, Icon, Muted, Screen, Segmented } from "../../ui/kit";
+import { useUpdateState } from "../../ui/UpdateDialog";
 
 export default function ProfileScreen() {
   const { t, i18n } = useTranslation();
   const session = useSession();
   const user = useUser();
   const { server, disconnect } = useSessionCtx();
-  const staff = user.role !== 'user';
+  const staff = user.role !== "user";
+  const update = useUpdateState();
 
   const setLocale = async (l: Locale) => {
     await i18n.changeLanguage(l);
     try {
-      session.setUser(unwrap(await session.client.PATCH('/api/v1/me', { body: { locale: l } })));
+      session.setUser(
+        unwrap(
+          await session.client.PATCH("/api/v1/me", { body: { locale: l } }),
+        ),
+      );
     } catch {
       // язык уже сменился локально
     }
@@ -40,33 +47,79 @@ export default function ProfileScreen() {
         </Muted>
 
         <Section>
-          <Row label={t('language.label')}>
+          <Row label={t("language.label")}>
             <Segmented<Locale>
-              value={(SUPPORTED_LOCALES as readonly string[]).includes(i18n.language) ? (i18n.language as Locale) : 'en'}
-              options={SUPPORTED_LOCALES.map((l) => ({ value: l, label: l.toUpperCase() }))}
+              value={
+                (SUPPORTED_LOCALES as readonly string[]).includes(i18n.language)
+                  ? (i18n.language as Locale)
+                  : "en"
+              }
+              options={SUPPORTED_LOCALES.map((l) => ({
+                value: l,
+                label: l.toUpperCase(),
+              }))}
               onChange={(l) => void setLocale(l)}
             />
           </Row>
         </Section>
 
         <Section>
-          <Row label={t('mobile.server')}>
+          <Row label={t("mobile.server")}>
             <Text style={{ color: colors.text2 }} numberOfLines={1}>
-              {server?.replace(/^https?:\/\//, '')}
+              {server?.replace(/^https?:\/\//, "")}
             </Text>
           </Row>
           {staff && server && (
-            <Pressable onPress={() => void Linking.openURL(`${server}/admin/users`)} accessibilityRole="link" style={{ flexDirection: 'row', alignItems: 'center', gap: 10, paddingVertical: 12 }}>
+            <Pressable
+              onPress={() => void Linking.openURL(`${server}/admin/users`)}
+              accessibilityRole="link"
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 10,
+                paddingVertical: 12,
+              }}
+            >
               <Icon name="open-in-new" size={20} color={colors.accent2} />
-              <Text style={{ color: colors.accent2, fontWeight: '500' }}>{t('mobile.open_admin')}</Text>
+              <Text style={{ color: colors.accent2, fontWeight: "500" }}>
+                {t("mobile.open_admin")}
+              </Text>
             </Pressable>
           )}
         </Section>
 
-        <Button title={t('profile.logout')} variant="danger" icon="logout" onPress={() => void logout()} />
-        <Button title={t('mobile.change_server')} variant="ghost" onPress={() => void logout().then(disconnect)} />
-        <Text style={{ color: colors.text3, textAlign: 'center', fontSize: 12 }}>
-          {t('mobile.version', { version: Constants.expoConfig?.version ?? '0.0.0' })}
+        <Button
+          title={t(
+            update.status === "checking"
+              ? "mobile.update_checking"
+              : "mobile.update_check",
+          )}
+          variant="secondary"
+          icon="system-update"
+          busy={update.status === "checking"}
+          onPress={() => void updater.check(session, true)}
+        />
+        {update.status === "latest" && (
+          <Muted>{t("mobile.update_latest")}</Muted>
+        )}
+
+        <Button
+          title={t("profile.logout")}
+          variant="danger"
+          icon="logout"
+          onPress={() => void logout()}
+        />
+        <Button
+          title={t("mobile.change_server")}
+          variant="ghost"
+          onPress={() => void logout().then(disconnect)}
+        />
+        <Text
+          style={{ color: colors.text3, textAlign: "center", fontSize: 12 }}
+        >
+          {t("mobile.version", {
+            version: Constants.expoConfig?.version ?? "0.0.0",
+          })}
         </Text>
       </ScrollView>
     </Screen>
@@ -74,12 +127,36 @@ export default function ProfileScreen() {
 }
 
 function Section({ children }: { children: React.ReactNode }) {
-  return <View style={{ padding: 16, borderRadius: radius.lg, backgroundColor: colors.surface, gap: 8 }}>{children}</View>;
+  return (
+    <View
+      style={{
+        padding: 16,
+        borderRadius: radius.lg,
+        backgroundColor: colors.surface,
+        gap: 8,
+      }}
+    >
+      {children}
+    </View>
+  );
 }
 
-function Row({ label, children }: { label: string; children: React.ReactNode }) {
+function Row({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
   return (
-    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
       <Text style={{ color: colors.text }}>{label}</Text>
       <View style={{ flexShrink: 1 }}>{children}</View>
     </View>