Make sync result message more verbose and explicit.

Author: myieye

frontend/viewer/src/project/SyncDialog.svelte

@@ -57,16 +57,20 @@
     latestSyncedCommitDate = undefined;
   }
 
-  async function syncLexboxToFlex() {
+  async function syncLexboxToFlex(flexToLexboxCount: number, lexboxToFlexCount: number) {
     let safeToCloseDialog = false;
 
     const syncPromise = service.triggerFwHeadlessSync();
     AppNotification.promise(syncPromise, {
       loading: $t`Synchronizing FieldWorks Lite and FieldWorks...`,
       success: (result) => {
+        const fwdataCommitsText = $plural(lexboxToFlexCount ?? 0, {one: '# commit', other: '# commits'});
+        const crdtCommitsText = $plural(flexToLexboxCount ?? 0, {one: '# commit', other: '# commits'});
         const fwdataChangesText = $plural(result.syncResult?.fwdataChanges ?? 0, {one: '# change', other: '# changes'});
         const crdtChangesText = $plural(result.syncResult?.crdtChanges ?? 0, {one: '# change', other: '# changes'});
-        return $t`${fwdataChangesText} synced to FieldWorks. ${crdtChangesText} synced to FieldWorks Lite.`;
+        return $t`Synced ${fwdataCommitsText} to FieldWorks, which resulted in ${fwdataChangesText} `
+          + $t`and ${crdtCommitsText} to FieldWorks Lite, which resulted in ${crdtChangesText}. `
+          + $t`(Changes to FieldWorks Lite can be caused by new releases that include more fields/data from FieldWorks).`;
       },
       error: (error) => $t`Failed to synchronize.` + '\n' + (error as Error).message,
       // TODO: Custom component that can expand or collapse the stacktrace

frontend/viewer/src/project/sync/FwLiteToFwMergeDetails.svelte

@@ -30,17 +30,17 @@
     loadingSyncLexboxToFlex: boolean,
     loadingSyncLexboxToLocal: boolean,
     canSyncLexboxToFlex?: boolean,
-    syncLexboxToFlex?: () => Promise<void>
+    syncLexboxToFlex?: (flexToLexboxCount: number, lexboxToFlexCount: number) => Promise<void>
       onLoginStatusChange?: (status: 'logged-in' | 'logged-out') => void;
   } = $props();
   const lastFlexSyncDate = $derived(remoteStatus?.lastMercurialCommitDate ? new Date(remoteStatus.lastMercurialCommitDate) : undefined);
   const lastFwLiteSyncDate = $derived(remoteStatus?.lastCrdtCommitDate ? new Date(remoteStatus.lastCrdtCommitDate) : undefined);
   let lexboxToFlexCount = $derived(remoteStatus?.pendingCrdtChanges ?? '?');
   let flexToLexboxCount = $derived(remoteStatus?.pendingMercurialChanges ?? '?');
 
-  function onSyncLexboxToFlex() {
+  function onSyncLexboxToFlex(flexToLexboxCount: number, lexboxToFlexCount: number) {
     loadingSyncLexboxToFlex = true;
-    void syncLexboxToFlex().finally(() => {
+    void syncLexboxToFlex(flexToLexboxCount, lexboxToFlexCount).finally(() => {
       loadingSyncLexboxToFlex = false;
     });
   }
@@ -72,8 +72,9 @@
         <SyncArrow dir="left" tailLength={120} size={1.25}/>
         <Button
           loading={loadingSyncLexboxToFlex}
-          disabled={loadingSyncLexboxToLocal || !canSyncLexboxToFlex || !remoteStatus}
-          onclick={onSyncLexboxToFlex}
+          disabled={loadingSyncLexboxToLocal || !canSyncLexboxToFlex || !remoteStatus
+            || (typeof flexToLexboxCount !== 'number' || typeof lexboxToFlexCount !== 'number')}
+          onclick={() => onSyncLexboxToFlex(flexToLexboxCount as number, lexboxToFlexCount as number)}
           icon="i-mdi-sync"
           iconProps={{ class: 'size-5' }}>
           {$t`Sync`}

frontend/viewer/src/project/sync/SyncStatusPrimitive.svelte

@@ -22,7 +22,7 @@
     projectCode?: string;
     latestSyncedCommitDate?: string;
     canSyncLexboxToFlex?: boolean;
-    syncLexboxToFlex?: () => Promise<void>;
+    syncLexboxToFlex?: (flexToLexboxCount: number, lexboxToFlexCount: number) => Promise<void>;
     syncLexboxToLocal?: () => Promise<void>;
     onLoginStatusChange?: (status: 'logged-in' | 'logged-out') => void;
   }