fix(mobile): resolve master password stuck button and improve editor toolbar

- Add strikethrough and highlighter buttons to editor toolbar
- Install lucide-react-native for consistent icons across platforms
- Fix master password button stuck after logout/login by:
- Adding key prop to force component remount on userId change
- Awaiting handleSubmit in onPress handler
- Resetting loading state on component mount
- Change decryption error logging from console.error to console.log

Author: batalabs

apps/mobile/v1/package-lock.json

@@ -36,6 +36,7 @@
     "expo-symbols": "~1.0.7",
     "expo-system-ui": "~6.0.7",
     "expo-web-browser": "~15.0.7",
+    "lucide-react-native": "^0.545.0",
     "newrelic-react-native-agent": "^1.5.10",
     "node-forge": "^1.3.1",
     "react": "19.1.0",

apps/mobile/v1/package.json

@@ -83,6 +83,7 @@ export const AppWrapper: React.FC<AppWrapperProps> = ({ children }) => {
   if (needsUnlock) {
     return (
       <MasterPasswordScreen
+        key={userId} // Force remount when userId changes to reset all state
         userId={userId || ''}
         isNewSetup={isNewSetup}
         onSuccess={onPasswordSuccess}

apps/mobile/v1/src/components/AppWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
   View,
   Text,
@@ -43,6 +43,12 @@ export function MasterPasswordForm({
     setPasswordError,
   } = usePasswordValidation();
 
+  // Reset loading state when component mounts
+  // This fixes the stuck button issue after logout/login
+  useEffect(() => {
+    setIsLoading(false);
+  }, []);
+
   const handleSubmit = async () => {
     // Validate passwords
     const validation = validatePasswords(password, confirmPassword, isNewSetup);
@@ -199,7 +205,7 @@ export function MasterPasswordForm({
             // Small delay to allow UI to render the loading state before blocking computation
             await new Promise((resolve) => setTimeout(resolve, 100));
 
-            handleSubmit();
+            await handleSubmit();
           }}
           disabled={isLoading}
           activeOpacity={0.7}

apps/mobile/v1/src/components/MasterPasswordDialog/MasterPasswordForm.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { Highlighter } from 'lucide-react-native';
 import type { EditorBridge } from '@10play/tentap-editor';
 
 interface EditorToolbarProps {
@@ -52,6 +53,20 @@ export function EditorToolbar({ editor, keyboardHeight, theme }: EditorToolbarPr
           <Text style={[styles.toolbarButtonText, { color: theme.colors.foreground, textDecorationLine: 'underline' }]}>U</Text>
         </TouchableOpacity>
 
+        <TouchableOpacity
+          onPress={() => editor.toggleStrike()}
+          style={styles.toolbarButton}
+        >
+          <Text style={[styles.toolbarButtonText, { color: theme.colors.foreground, textDecorationLine: 'line-through' }]}>S</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => editor.toggleHighlight('#FFFF00')}
+          style={styles.toolbarButton}
+        >
+          <Highlighter size={18} color={theme.colors.foreground} />
+        </TouchableOpacity>
+
         <View style={[styles.toolbarDivider, { backgroundColor: theme.colors.border }]} />
 
         <TouchableOpacity
@@ -125,14 +140,14 @@ const styles = StyleSheet.create({
   toolbarButtons: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    flex: 1,
+    gap: 4,
+    paddingHorizontal: 4,
   },
   toolbarButton: {
-    paddingHorizontal: 6,
+    paddingHorizontal: 12,
     paddingVertical: 8,
     borderRadius: 4,
-    flex: 1,
+    minWidth: 40,
     alignItems: 'center',
     justifyContent: 'center',
   },

apps/mobile/v1/src/screens/EditNote/EditorToolbar.tsx

@@ -36,7 +36,7 @@ export async function decryptNote(note: Note, userId: string): Promise<Note> {
     };
   } catch (error) {
     if (__DEV__) {
-      console.error('Failed to decrypt note:', note.id, error);
+      console.log('Failed to decrypt note (likely wrong master password):', note.id);
     }
     // Return note with placeholder content if decryption fails
     return {