Show vault upgrade description in popup (#957)

apps/mobile-app/app/(tabs)/settings/index.tsx

@@ -135,14 +135,6 @@ export default function SettingsScreen() : React.ReactNode {
   };
 
   const styles = StyleSheet.create({
-    connectionStatus: {
-      alignItems: 'center',
-    },
-    connectionStatusText: {
-      color: colors.textMuted,
-      fontSize: 14,
-      textAlign: 'center',
-    },
     scrollContent: {
       paddingBottom: 40,
       paddingTop: Platform.OS === 'ios' ? 42 : 16,

apps/mobile-app/app/upgrade.tsx

@@ -91,8 +91,6 @@ export default function UpgradeScreen() : React.ReactNode {
       setUpgradeStatus('Applying database migrations...');
       for (let i = 0; i < upgradeResult.sqlCommands.length; i++) {
         const sqlCommand = upgradeResult.sqlCommands[i];
-        console.log('update sql command', i);
-        console.log('Executing SQL command:', sqlCommand);
         setUpgradeStatus(`Applying migration ${i + 1} of ${upgradeResult.sqlCommands.length}...`);
 
         try {
@@ -234,6 +232,19 @@ export default function UpgradeScreen() : React.ReactNode {
     router.replace('/login');
   };
 
+  /**
+   * Show native dialog with version description.
+   */
+  const showVersionDialog = (): void => {
+    Alert.alert(
+      "What's New",
+      `An upgrade is required to support the following changes:\n\n${latestVersion?.description ?? 'No description available for this version.'}`,
+      [
+        { text: 'Okay', style: 'default' }
+      ]
+    );
+  };
+
   const styles = StyleSheet.create({
     appName: {
       color: colors.text,
@@ -270,16 +281,8 @@ export default function UpgradeScreen() : React.ReactNode {
       padding: 20,
       width: '100%',
     },
-    faceIdButton: {
-      alignItems: 'center',
-      height: 50,
-      justifyContent: 'center',
-      width: '100%',
-    },
-    faceIdButtonText: {
+    currentVersionValue: {
       color: colors.primary,
-      fontSize: 16,
-      fontWeight: '600',
     },
     gradientContainer: {
       height: Dimensions.get('window').height * 0.4,
@@ -293,30 +296,26 @@ export default function UpgradeScreen() : React.ReactNode {
       paddingHorizontal: 16,
       paddingTop: 24,
     },
-    input: {
-      backgroundColor: colors.background,
-      borderRadius: 8,
-      color: colors.text,
-      flex: 1,
-      fontSize: 16,
-      height: 50,
-      paddingHorizontal: 16,
-    },
-    inputContainer: {
+    helpButton: {
       alignItems: 'center',
-      backgroundColor: colors.background,
-      borderColor: colors.accentBorder,
-      borderRadius: 8,
-      borderWidth: 1,
-      flexDirection: 'row',
-      marginBottom: 16,
+      backgroundColor: colors.accentBackground,
+      borderRadius: 20,
+      height: 24,
+      justifyContent: 'center',
+      marginLeft: 8,
+      width: 24,
     },
-    inputIcon: {
-      padding: 12,
+    helpButtonText: {
+      color: colors.text,
+      fontSize: 14,
+      fontWeight: 'bold',
     },
     keyboardAvoidingView: {
       flex: 1,
     },
+    latestVersionValue: {
+      color: colors.greenBackground,
+    },
     loadingContainer: {
       alignItems: 'center',
       flex: 1,
@@ -341,18 +340,12 @@ export default function UpgradeScreen() : React.ReactNode {
       paddingBottom: 40,
       paddingHorizontal: 20,
     },
-    currentVersionValue: {
-      color: colors.primary,
-    },
-    latestVersionValue: {
-      color: '#10B981',
-    },
     scrollContent: {
       flexGrow: 1,
     },
     subtitle: {
       color: colors.text,
-      fontSize: 16,
+      fontSize: 14,
       marginBottom: 24,
       opacity: 0.7,
       textAlign: 'center',
@@ -369,6 +362,12 @@ export default function UpgradeScreen() : React.ReactNode {
       marginBottom: 16,
       padding: 16,
     },
+    versionHeader: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginBottom: 12,
+    },
     versionLabel: {
       color: colors.text,
       fontSize: 14,
@@ -385,7 +384,6 @@ export default function UpgradeScreen() : React.ReactNode {
       color: colors.text,
       fontSize: 18,
       fontWeight: '600',
-      marginBottom: 12,
       textAlign: 'center',
     },
     versionValue: {
@@ -427,10 +425,18 @@ export default function UpgradeScreen() : React.ReactNode {
                     <Avatar />
                     <ThemedText style={styles.username}>{username}</ThemedText>
                   </View>
-                  <ThemedText style={styles.subtitle}>AliasVault has updated and your vault needs to be upgraded.</ThemedText>
+                  <ThemedText style={styles.subtitle}>AliasVault has updated and your vault needs to be upgraded. Normally this only takes a few seconds.</ThemedText>
 
                   <View style={styles.versionContainer}>
-                    <ThemedText style={styles.versionTitle}>Version Information</ThemedText>
+                    <View style={styles.versionHeader}>
+                      <ThemedText style={styles.versionTitle}>Version Information</ThemedText>
+                      <TouchableOpacity
+                        style={styles.helpButton}
+                        onPress={showVersionDialog}
+                      >
+                        <ThemedText style={styles.helpButtonText}>?</ThemedText>
+                      </TouchableOpacity>
+                    </View>
                     <View style={styles.versionRow}>
                       <ThemedText style={styles.versionLabel}>Your vault:</ThemedText>
                       <ThemedText style={[styles.versionValue, styles.currentVersionValue]}>

apps/mobile-app/hooks/useVaultSync.ts

@@ -1,4 +1,3 @@
-import { useRouter } from 'expo-router';
 import { useCallback } from 'react';
 
 import { AppInfo } from '@/utils/AppInfo';
@@ -116,9 +115,7 @@ export const useVaultSync = () : {
           await dbContext.initializeDatabase(vaultResponseJson as VaultResponse);
 
           // Check if the vault is up to date, if not, redirect to the upgrade page.
-          console.log('Checking for pending migrations');
           if (await dbContext.hasPendingMigrations()) {
-            console.log('Pending migrations, redirecting to upgrade page');
             onUpgradeRequired?.();
             return false;
           }
@@ -132,9 +129,7 @@ export const useVaultSync = () : {
       }
 
       // Check if the vault is up to date, if not, redirect to the upgrade page.
-      console.log('Checking for pending migrations');
       if (await dbContext.hasPendingMigrations()) {
-        console.log('Pending migrations, redirecting to upgrade page');
         onUpgradeRequired?.();
         return false;
       }