feat(mobile): add attachment support for new notes and UI improvements

- Add attachment button to new note editor header
- Implement save-first workflow for new note attachments
- Prompt user to save note before uploading files
- Keep editor open after save when attachments section is visible
- Replace checkmark icon with Lucide Check icon in editor header
- Reduce bottom padding on notes list screen (100px → 40px)
- Add 2px margin below divider in view note screen for better spacing

Author: typelets

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

@@ -13,17 +13,19 @@ import { useTheme } from '../theme';
 import { useApiService, type FileAttachment } from '../services/api';
 
 interface FileUploadProps {
-  noteId: string;
+  noteId?: string;
   attachments?: FileAttachment[];
   onUploadComplete?: (attachments: FileAttachment[]) => void;
   onDeleteComplete?: () => void;
+  onBeforeUpload?: () => Promise<string | null>;
 }
 
 export function FileUpload({
-  noteId,
+  noteId: initialNoteId,
   attachments = [],
   onUploadComplete,
   onDeleteComplete,
+  onBeforeUpload,
 }: FileUploadProps) {
   const theme = useTheme();
   const api = useApiService();
@@ -34,6 +36,22 @@ export function FileUpload({
   const handlePickFiles = async () => {
     try {
       await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+      // If no noteId, get it from onBeforeUpload callback
+      let noteId = initialNoteId;
+      if (!noteId && onBeforeUpload) {
+        noteId = await onBeforeUpload();
+        if (!noteId) {
+          // Upload was cancelled or failed to create note
+          return;
+        }
+      }
+
+      if (!noteId) {
+        Alert.alert('Error', 'Note must be saved before adding attachments');
+        return;
+      }
+
       const files = await api.pickFiles();
 
       if (files.length === 0) {

apps/mobile/v1/src/components/MasterPasswordDialog/styles.ts

@@ -58,7 +58,7 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     right: 12,
     top: 0,
-    height: '100%',
+    height: 48,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 4,

apps/mobile/v1/src/components/ui/Input.tsx

@@ -25,8 +25,8 @@ export const Input = forwardRef<TextInput, InputProps>(({ style, ...props }, ref
           minHeight: 40,
           // iOS-specific fix for centered placeholder text
           ...(Platform.OS === 'ios' && {
-            paddingTop: 10,
-            paddingBottom: 10,
+            paddingTop: 12,
+            paddingBottom: 12,
           }),
         },
         style,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ActivityIndicator, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { Check } from 'lucide-react-native';
 
 interface EditorHeaderProps {
   isEditing: boolean;
@@ -48,7 +49,7 @@ export function EditorHeader({
       <View style={styles.titleSpacer} />
 
       <View style={styles.headerActions}>
-        {isEditing && onToggleAttachments && (
+        {onToggleAttachments && (
           <TouchableOpacity
             style={[styles.actionButton, { backgroundColor: showAttachments ? 'rgba(59, 130, 246, 0.15)' : theme.colors.muted }]}
             onPress={onToggleAttachments}
@@ -89,7 +90,7 @@ export function EditorHeader({
           {isSaving ? (
             <ActivityIndicator size="small" color={theme.colors.mutedForeground} />
           ) : (
-            <Ionicons name="checkmark" size={20} color={theme.colors.mutedForeground} />
+            <Check size={20} color={theme.colors.mutedForeground} strokeWidth={2.5} />
           )}
         </TouchableOpacity>
       </View>

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

@@ -29,6 +29,7 @@ export function EditorToolbar({ editor, keyboardHeight, bottomInset, theme }: Ed
         styles.toolbarContainer,
         {
           backgroundColor: theme.colors.background,
+          borderTopColor: theme.colors.border,
           bottom: keyboardHeight,
           paddingBottom,
         },
@@ -155,8 +156,8 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    borderTopWidth: 0,
-    paddingTop: 8,
+    borderTopWidth: Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0,
+    paddingTop: Platform.OS === 'ios' ? 4 : 8,
     paddingHorizontal: 8,
     alignItems: 'center',
     justifyContent: 'center',

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

@@ -29,9 +29,10 @@ export default function EditNoteScreen() {
   const [noteData, setNoteData] = useState<Note | null>(null);
   const [attachments, setAttachments] = useState<FileAttachment[]>([]);
   const [showAttachments, setShowAttachments] = useState(false);
+  const [createdNoteId, setCreatedNoteId] = useState<string | null>(null);
 
   const keyboardHeight = useKeyboardHeight();
-  const { editor, handleEditorLoad, loadNote } = useNoteEditor(noteId as string);
+  const { editor, handleEditorLoad, loadNote } = useNoteEditor(noteId as string || createdNoteId || undefined);
 
   // Calculate toolbar height (toolbar itself + padding + keyboard)
   // iOS: 60px toolbar + keyboard height + minimal padding for curved keyboard
@@ -62,21 +63,19 @@ export default function EditNoteScreen() {
   }, [noteId, isEditing]);
 
   const refreshAttachments = async () => {
-    if (isEditing && noteId) {
+    const currentNoteId = (noteId as string) || createdNoteId;
+    if (currentNoteId) {
       try {
-        const noteAttachments = await api.getAttachments(noteId as string);
+        const noteAttachments = await api.getAttachments(currentNoteId);
         setAttachments(noteAttachments);
       } catch (error) {
         console.error('Failed to refresh attachments:', error);
       }
     }
   };
 
-  const handleSave = async () => {
-    if (!title.trim()) {
-      Alert.alert('Error', 'Please enter a title for your note');
-      return;
-    }
+  const handleSave = async (options?: { skipNavigation?: boolean }) => {
+    const titleToUse = title.trim() || 'Untitled';
 
     setIsSaving(true);
 
@@ -86,36 +85,74 @@ export default function EditNoteScreen() {
         console.log('Content to save:', content);
       }
 
-      if (isEditing && noteId) {
-        await api.updateNote(noteId as string, {
-          title: title.trim(),
+      let savedNote: Note;
+
+      if ((isEditing && noteId) || createdNoteId) {
+        savedNote = await api.updateNote((noteId as string) || createdNoteId!, {
+          title: titleToUse,
           content,
         });
       } else {
-        await api.createNote({
-          title: title.trim(),
+        savedNote = await api.createNote({
+          title: titleToUse,
           content,
           folderId: folderId as string | undefined,
           starred: false,
           archived: false,
           deleted: false,
           hidden: false,
         });
+        setCreatedNoteId(savedNote.id);
+        setTitle(titleToUse);
       }
 
       await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
 
-      setTimeout(() => {
-        router.back();
-      }, NAVIGATION_DELAY);
+      if (!options?.skipNavigation) {
+        setTimeout(() => {
+          router.back();
+        }, NAVIGATION_DELAY);
+      } else {
+        setIsSaving(false);
+        // Refresh attachments if we just created the note and staying on the page
+        if (!noteId && savedNote.id) {
+          try {
+            const noteAttachments = await api.getAttachments(savedNote.id);
+            setAttachments(noteAttachments);
+          } catch (error) {
+            console.error('Failed to refresh attachments:', error);
+          }
+        }
+      }
+
+      return savedNote;
     } catch (error) {
       if (__DEV__) console.error('Failed to save note:', error);
-      Alert.alert('Error', `Failed to ${isEditing ? 'update' : 'create'} note`);
+      Alert.alert('Error', `Failed to ${isEditing || createdNoteId ? 'update' : 'create'} note`);
       await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
       setIsSaving(false);
+      return null;
     }
   };
 
+  const handleToggleAttachments = () => {
+    setShowAttachments(!showAttachments);
+  };
+
+  const handleBeforeUpload = async (): Promise<string | null> => {
+    // If it's a new note (no noteId and no createdNoteId), prompt to save first
+    if (!noteId && !createdNoteId) {
+      Alert.alert(
+        'Save Note First',
+        'Please save your note before adding attachments.',
+        [{ text: 'OK' }]
+      );
+      return null;
+    }
+
+    return (noteId as string) || createdNoteId;
+  };
+
   const handleDelete = async () => {
     if (!noteData || !noteId) return;
 
@@ -179,8 +216,8 @@ export default function EditNoteScreen() {
         showAttachments={showAttachments}
         onBack={() => router.back()}
         onDelete={handleDelete}
-        onSave={handleSave}
-        onToggleAttachments={() => setShowAttachments(!showAttachments)}
+        onSave={() => handleSave({ skipNavigation: showAttachments && !noteId && !createdNoteId })}
+        onToggleAttachments={handleToggleAttachments}
         theme={theme}
       />
 
@@ -203,13 +240,14 @@ export default function EditNoteScreen() {
           </View>
         )}
 
-        {isEditing && noteId && showAttachments && (
+        {showAttachments && (
           <View style={styles.attachmentsSection}>
             <FileUpload
-              noteId={noteId as string}
+              noteId={(noteId as string) || createdNoteId || undefined}
               attachments={attachments}
               onUploadComplete={refreshAttachments}
               onDeleteComplete={refreshAttachments}
+              onBeforeUpload={handleBeforeUpload}
             />
           </View>
         )}
@@ -223,7 +261,7 @@ export default function EditNoteScreen() {
         Platform.OS === 'android' && keyboardHeight > 0 && { marginBottom: keyboardHeight + 60 }
       ]}>
         <RichText
-          key={noteId as string || 'new-note'}
+          key={(noteId as string) || createdNoteId || 'new-note'}
           editor={editor}
           style={{ flex: 1, backgroundColor: theme.colors.background }}
           onLoad={handleEditorLoad}

apps/mobile/v1/src/screens/NotesListScreen.tsx

@@ -601,7 +601,7 @@ export default function NotesListScreen({ navigation, route, renderHeader, scrol
             </View>
 
             {/* Spacer to ensure content fills screen */}
-            <View style={{ flex: 1, minHeight: 100 }} />
+            <View style={{ flex: 1, minHeight: 40 }} />
           </Pressable>
           )}
         </ScrollView>

apps/mobile/v1/src/screens/SettingsScreen.tsx

@@ -117,6 +117,17 @@ export default function SettingsScreen({ onLogout }: Props) {
   };
 
   const settingsItems = [
+    {
+      section: 'ACCOUNT',
+      items: [
+        {
+          title: user?.fullName || user?.emailAddresses?.[0]?.emailAddress || 'User',
+          subtitle: user?.emailAddresses?.[0]?.emailAddress || '',
+          icon: 'person-circle-outline',
+          onPress: undefined,
+        },
+      ],
+    },
     {
       section: 'SECURITY',
       items: [
@@ -243,7 +254,7 @@ export default function SettingsScreen({ onLogout }: Props) {
   });
 
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: theme.colors.background }]}>
+    <SafeAreaView style={[styles.container, { backgroundColor: theme.colors.background }]} edges={['top', 'left', 'right']}>
       {/* Header with back button */}
       <View>
         <View style={styles.headerBar}>
@@ -681,7 +692,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollContent: {
-    paddingBottom: 16,
   },
   sectionsContainer: {
     paddingHorizontal: 16,

apps/mobile/v1/src/screens/ViewNote/index.tsx

@@ -253,6 +253,7 @@ const styles = StyleSheet.create({
   divider: {
     height: StyleSheet.hairlineWidth,
     marginHorizontal: 0,
+    marginBottom: 2,
   },
   attachmentsContainer: {
     borderBottomWidth: StyleSheet.hairlineWidth,