feat: Add single note sync functionality with overwrite warnings and UI integration

Author: nihiluis

frontend/apps/app/components/navigation/AppDrawer.tsx

@@ -6,19 +6,30 @@ import {
 } from "@gorhom/bottom-sheet"
 import type { Note } from "@memoneo/shared"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { useAtom } from "jotai"
+import { useAtom, useAtomValue } from "jotai"
 import type React from "react"
 import { useCallback, useRef, useState } from "react"
 import { Alert, Dimensions, StyleSheet } from "react-native"
 import { Drawer } from "react-native-drawer-layout"
 
+import { authAtom, tokenAtom } from "@/lib/auth/state"
 import { loadNoteCache } from "@/lib/notes/cache"
 import { deleteLocalNote } from "@/lib/notes/local"
-import { NOTES_CACHE_QUERY_KEY, NOTES_LOCAL_QUERY_KEY } from "@/lib/notes/query"
+import {
+  NOTES_CACHE_QUERY_KEY,
+  NOTES_FOLDERS_QUERY_KEY,
+  NOTES_LOCAL_QUERY_KEY,
+} from "@/lib/notes/query"
 import {
   selectedNoteIdAtom,
   useNotesState,
 } from "@/lib/notes/state"
+import {
+  syncLocalNote,
+  uploadLocalNote,
+  type SingleNoteOverwriteWarning,
+  type SingleNoteSyncAction,
+} from "@/lib/notes/sync"
 
 import { AppDrawerContext } from "./appDrawerContext"
 import { DrawerContent } from "./DrawerContent"
@@ -31,6 +42,8 @@ const DRAWER_WIDTH = Math.min(340, WINDOW_WIDTH * 0.86)
 
 export function AppDrawer({ children }: { children: React.ReactNode }) {
   const queryClient = useQueryClient()
+  const auth = useAtomValue(authAtom)
+  const token = useAtomValue(tokenAtom)
   const [drawerOpen, setDrawerOpen] = useState(false)
   const [optionsNote, setOptionsNote] = useState<Note | null>(null)
   const [selectedNoteId, setSelectedNoteId] = useAtom(selectedNoteIdAtom)
@@ -85,6 +98,57 @@ export function AppDrawer({ children }: { children: React.ReactNode }) {
     },
   })
 
+  const singleNoteSyncMutation = useMutation({
+    mutationFn: async ({
+      action,
+      note,
+    }: {
+      action: SingleNoteSyncAction
+      note: Note
+    }) => {
+      if (!auth.isAuthenticated || !token) {
+        throw new Error("Sign in from Settings before syncing notes.")
+      }
+
+      const syncAuth = { token, userId: auth.user.id }
+      const options = { confirmOverwrite: confirmSingleNoteOverwrite }
+
+      if (action === "upload") {
+        return uploadLocalNote(syncAuth, note, options)
+      }
+
+      return syncLocalNote(syncAuth, note, action, options)
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: NOTES_LOCAL_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: NOTES_FOLDERS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: NOTES_CACHE_QUERY_KEY }),
+      ])
+      await Promise.all([
+        queryClient.refetchQueries({
+          queryKey: NOTES_LOCAL_QUERY_KEY,
+          type: "active",
+        }),
+        queryClient.refetchQueries({
+          queryKey: NOTES_FOLDERS_QUERY_KEY,
+          type: "active",
+        }),
+        queryClient.refetchQueries({
+          queryKey: NOTES_CACHE_QUERY_KEY,
+          type: "active",
+        }),
+      ])
+      closeNoteOptions()
+    },
+    onError: error => {
+      Alert.alert(
+        "Sync failed",
+        error instanceof Error ? error.message : String(error)
+      )
+    },
+  })
+
   const confirmDeleteNote = useCallback(
     (note: Note) => {
       Alert.alert(
@@ -103,6 +167,17 @@ export function AppDrawer({ children }: { children: React.ReactNode }) {
     [deleteNoteMutation]
   )
 
+  const syncSingleNote = useCallback(
+    (note: Note, action: SingleNoteSyncAction) => {
+      if (singleNoteSyncMutation.isPending) {
+        return
+      }
+
+      singleNoteSyncMutation.mutate({ note, action })
+    },
+    [singleNoteSyncMutation]
+  )
+
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
@@ -146,14 +221,16 @@ export function AppDrawer({ children }: { children: React.ReactNode }) {
         backgroundStyle={styles.sheetBackground}
         handleIndicatorStyle={styles.sheetHandle}
         ref={noteOptionsSheetRef}
-        snapPoints={["46%"]}>
+        snapPoints={["64%"]}>
         <BottomSheetView style={styles.flex}>
           {optionsNote && (
             <NoteOptionsSheet
               isDeleting={deleteNoteMutation.isPending}
+              isSyncing={singleNoteSyncMutation.isPending}
               lastSync={lastSync}
               note={optionsNote}
               onDelete={confirmDeleteNote}
+              onSync={syncSingleNote}
             />
           )}
         </BottomSheetView>
@@ -162,6 +239,23 @@ export function AppDrawer({ children }: { children: React.ReactNode }) {
   )
 }
 
+function confirmSingleNoteOverwrite(warning: SingleNoteOverwriteWarning) {
+  return new Promise<boolean>(resolve => {
+    Alert.alert(warning.title, warning.message, [
+      {
+        text: "Cancel",
+        style: "cancel",
+        onPress: () => resolve(false),
+      },
+      {
+        text: warning.confirmText,
+        style: "destructive",
+        onPress: () => resolve(true),
+      },
+    ])
+  })
+}
+
 const styles = StyleSheet.create({
   drawer: {
     backgroundColor: "hsl(240 10% 3.9%)",

frontend/apps/app/components/navigation/NoteOptionsSheet.tsx

@@ -1,24 +1,30 @@
 import type { Note } from "@memoneo/shared"
-import { FileText, Trash2 } from "lucide-react-native"
+import { FileText, RefreshCw, Trash2, Upload } from "lucide-react-native"
 import { Pressable, View } from "react-native"
 
 import { MText } from "@/components/reusables/MText"
 import { cn } from "@/lib/reusables/utils"
+import type { SingleNoteSyncAction } from "@/lib/notes/sync"
 
 type NoteOptionsSheetProps = {
   isDeleting: boolean
+  isSyncing: boolean
   lastSync?: string
   note: Note
   onDelete: (note: Note) => void
+  onSync: (note: Note, action: SingleNoteSyncAction) => void
 }
 
 export function NoteOptionsSheet({
   isDeleting,
+  isSyncing,
   lastSync,
   note,
   onDelete,
+  onSync,
 }: NoteOptionsSheetProps) {
   const canDelete = Boolean(note.file?.title)
+  const canSync = note.id !== "unsaved" && Boolean(note.file?.title)
 
   return (
     <View className="flex-1 gap-2 px-5 pb-6 pt-2">
@@ -46,6 +52,36 @@ export function NoteOptionsSheet({
         </MText>
       </View>
 
+      <View className="gap-2">
+        <Pressable
+          accessibilityRole="button"
+          disabled={!canSync || isSyncing}
+          onPress={() => onSync(note, "upload")}
+          className={cn(
+            "min-h-12 flex-row items-center justify-center gap-2 rounded-md border border-zinc-700 px-3.5",
+            (!canSync || isSyncing) && "opacity-50"
+          )}>
+          <Upload size={18} color="#a1a1aa" />
+          <MText className="text-[15px] font-bold text-zinc-100">
+            {isSyncing ? "Syncing..." : "Upload note"}
+          </MText>
+        </Pressable>
+
+        <Pressable
+          accessibilityRole="button"
+          disabled={!canSync || isSyncing}
+          onPress={() => onSync(note, "sync")}
+          className={cn(
+            "min-h-12 flex-row items-center justify-center gap-2 rounded-md border border-zinc-700 px-3.5",
+            (!canSync || isSyncing) && "opacity-50"
+          )}>
+          <RefreshCw size={18} color="#a1a1aa" />
+          <MText className="text-[15px] font-bold text-zinc-100">
+            {isSyncing ? "Syncing..." : "Sync note"}
+          </MText>
+        </Pressable>
+      </View>
+
       <Pressable
         accessibilityRole="button"
         disabled={!canDelete || isDeleting}

frontend/apps/app/lib/notes/sync.test.ts

@@ -0,0 +1,95 @@
+import type { MarkdownFileInfo, Note } from "@memoneo/shared"
+import { describe, expect, it } from "vitest"
+
+import {
+  getDownloadOverwriteWarning,
+  getUploadOverwriteWarning,
+} from "./syncWarnings"
+
+function note(overrides: Partial<Note> = {}): Note {
+  return {
+    id: "note-1",
+    user_id: "user-1",
+    title: "Note",
+    body: "",
+    body_iv: "",
+    date: "2026-01-01T00:00:00.000Z",
+    archived: false,
+    version: 1,
+    created_at: "2026-01-01T00:00:00.000Z",
+    updated_at: "2026-01-01T00:00:00.000Z",
+    file: {
+      note_id: "note-1",
+      title: "Note",
+      path: "",
+    },
+    ...overrides,
+  }
+}
+
+function file(overrides: Partial<MarkdownFileInfo> = {}): MarkdownFileInfo {
+  return {
+    fileName: "Note",
+    path: "",
+    text: "body",
+    modifiedTime: new Date("2026-01-01T00:00:00.000Z"),
+    createdTime: new Date("2026-01-01T00:00:00.000Z"),
+    metadata: {
+      id: "note-1",
+      title: "Note",
+      date: "2026-01-01T00:00:00.000Z",
+      version: 1,
+    },
+    ...overrides,
+  }
+}
+
+describe("single note sync overwrite warnings", () => {
+  it("warns before uploading over a newer remote version", () => {
+    const warning = getUploadOverwriteWarning(
+      note({ version: 2 }),
+      file({ metadata: { id: "note-1", version: 1 } }),
+      { lastSync: "2026-01-01T00:00:00.000Z" }
+    )
+
+    expect(warning?.title).toBe("Overwrite newer remote note?")
+  })
+
+  it("warns before uploading when remote changed after the last sync", () => {
+    const warning = getUploadOverwriteWarning(note(), file(), {
+      lastSync: "2025-12-31T00:00:00.000Z",
+    })
+
+    expect(warning?.confirmText).toBe("Upload anyway")
+  })
+
+  it("does not warn for upload when local metadata has caught up", () => {
+    const warning = getUploadOverwriteWarning(
+      note({ version: 2, updated_at: "2026-01-02T00:00:00.000Z" }),
+      file({ metadata: { id: "note-1", version: 2 } }),
+      { lastSync: "2026-01-02T00:00:00.000Z" }
+    )
+
+    expect(warning).toBeNull()
+  })
+
+  it("warns before downloading over a locally modified note", () => {
+    const warning = getDownloadOverwriteWarning(
+      note(),
+      file({ modifiedTime: new Date("2026-01-03T00:00:00.000Z") }),
+      { lastSync: "2026-01-02T00:00:00.000Z" }
+    )
+
+    expect(warning?.title).toBe("Overwrite newer local note?")
+  })
+
+  it("does not warn for download when local file is older than remote and cache", () => {
+    const warning = getDownloadOverwriteWarning(
+      note({ updated_at: "2026-01-03T00:00:00.000Z" }),
+      file({ modifiedTime: new Date("2026-01-02T00:00:00.000Z") }),
+      { lastSync: "2026-01-03T00:00:00.000Z" }
+    )
+
+    expect(warning).toBeNull()
+  })
+})