refactor: ui icon buttons implicit loading (#29263)

* refactor: icon buttons implicit loading

* chore: cleanup

* feat: ui color override (#29264)

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

---------

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/main.dart

@@ -263,6 +263,7 @@ class ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserve
       child: MaterialApp.router(
         title: 'Immich',
         debugShowCheckedModeBanner: true,
+        scaffoldMessengerKey: scaffoldMessengerKey,
         localizationsDelegates: context.localizationDelegates,
         supportedLocales: context.supportedLocales,
         locale: context.locale,

mobile/packages/ui/lib/immich_ui.dart

@@ -1,14 +1,13 @@
 export 'src/components/close_button.dart';
-export 'src/components/column_button.dart';
 export 'src/components/form.dart';
 export 'src/components/formatted_text.dart';
 export 'src/components/icon_button.dart';
-export 'src/components/menu_item.dart';
 export 'src/components/password_input.dart';
 export 'src/components/text_button.dart';
 export 'src/components/text_input.dart';
 export 'src/components/url_input.dart';
 export 'src/constants.dart';
+export 'src/snackbar.dart';
 export 'src/theme.dart';
 export 'src/translation.dart';
 export 'src/types.dart';

mobile/packages/ui/lib/src/components/column_button.dart

@@ -1,78 +0,0 @@
-import 'dart:async';
-
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/constants.dart';
-import 'package:immich_ui/src/internal.dart';
-
-class ImmichColumnButton extends StatefulWidget {
-  final IconData icon;
-  final String label;
-  final FutureOr<void> Function() onPressed;
-  final bool disabled;
-  final bool? loading;
-
-  const ImmichColumnButton({
-    super.key,
-    required this.icon,
-    required this.label,
-    required this.onPressed,
-    this.disabled = false,
-    this.loading,
-  });
-
-  @override
-  State<ImmichColumnButton> createState() => _ImmichColumnButtonState();
-}
-
-class _ImmichColumnButtonState extends State<ImmichColumnButton> {
-  bool _loading = false;
-  bool get _isLoading => widget.loading ?? _loading;
-
-  Future<void> _onPressed() async {
-    setState(() => _loading = true);
-    try {
-      await widget.onPressed();
-    } finally {
-      if (mounted) {
-        setState(() => _loading = false);
-      }
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final foreground = context.colorOverride ?? Theme.of(context).colorScheme.onSurface;
-
-    return TextButton(
-      onPressed: widget.disabled || _isLoading ? null : _onPressed,
-      style: TextButton.styleFrom(
-        foregroundColor: foreground,
-        padding: const .symmetric(horizontal: ImmichSpacing.sm, vertical: ImmichSpacing.md),
-        tapTargetSize: .shrinkWrap,
-        shape: const RoundedRectangleBorder(borderRadius: .all(.circular(ImmichRadius.xl))),
-      ),
-      child: ConstrainedBox(
-        constraints: const .new(maxWidth: 90),
-        child: Column(
-          mainAxisSize: .min,
-          children: [
-            _isLoading
-                ? const SizedBox.square(
-                    dimension: ImmichIconSize.md,
-                    child: CircularProgressIndicator(strokeWidth: ImmichBorderWidth.lg),
-                  )
-                : Icon(widget.icon, size: ImmichIconSize.md),
-            const SizedBox(height: ImmichSpacing.sm),
-            Text(
-              widget.label,
-              maxLines: 2,
-              textAlign: .center,
-              overflow: .ellipsis,
-              style: const .new(fontSize: ImmichTextSize.label, fontWeight: .w500),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}

mobile/packages/ui/lib/src/components/menu_item.dart

@@ -1,100 +0,0 @@
-import 'dart:async';
-
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/constants.dart';
-import 'package:immich_ui/src/internal.dart';
-
-class ImmichMenu extends StatefulWidget {
-  final List<Widget> children;
-  final MenuAnchorChildBuilder builder;
-  final MenuStyle? style;
-  final bool consumeOutsideTap;
-  final Widget? child;
-
-  const ImmichMenu({
-    super.key,
-    required this.children,
-    required this.builder,
-    this.style,
-    this.consumeOutsideTap = false,
-    this.child,
-  });
-
-  @override
-  State<ImmichMenu> createState() => _ImmichMenuState();
-}
-
-class _ImmichMenuState extends State<ImmichMenu> {
-  final _controller = MenuController();
-
-  @override
-  Widget build(BuildContext context) {
-    return _ImmichMenuScope(
-      controller: _controller,
-      child: MenuAnchor(
-        controller: _controller,
-        style: widget.style,
-        consumeOutsideTap: widget.consumeOutsideTap,
-        menuChildren: widget.children,
-        builder: widget.builder,
-        child: widget.child,
-      ),
-    );
-  }
-}
-
-class _ImmichMenuScope extends InheritedWidget {
-  final MenuController controller;
-
-  const _ImmichMenuScope({required this.controller, required super.child});
-
-  static MenuController? maybeOf(BuildContext context) =>
-      context.dependOnInheritedWidgetOfExactType<_ImmichMenuScope>()?.controller;
-
-  @override
-  bool updateShouldNotify(_ImmichMenuScope oldWidget) => controller != oldWidget.controller;
-}
-
-class ImmichMenuItem extends StatefulWidget {
-  final IconData icon;
-  final String label;
-  final FutureOr<void> Function() onPressed;
-  final bool disabled;
-
-  const ImmichMenuItem({
-    super.key,
-    required this.icon,
-    required this.label,
-    required this.onPressed,
-    this.disabled = false,
-  });
-
-  @override
-  State<ImmichMenuItem> createState() => _ImmichMenuItemState();
-}
-
-class _ImmichMenuItemState extends State<ImmichMenuItem> {
-  Future<void> _onPressed(MenuController? controller) async {
-    try {
-      await widget.onPressed();
-    } finally {
-      controller?.close();
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final controller = _ImmichMenuScope.maybeOf(context);
-    return MenuItemButton(
-      onPressed: widget.disabled ? null : () => _onPressed(controller),
-      closeOnActivate: controller == null,
-      style: MenuItemButton.styleFrom(
-        foregroundColor: context.colorOverride,
-        alignment: .centerLeft,
-        padding: const .symmetric(horizontal: ImmichSpacing.lg, vertical: ImmichSpacing.md),
-      ),
-      leadingIcon: Icon(widget.icon, size: ImmichIconSize.sm),
-      child: Text(widget.label, style: const .new(fontSize: ImmichTextSize.body)),
-    );
-  }
-}

mobile/packages/ui/lib/src/previews/column_button.dart

@@ -1,27 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/column_button.dart';
-import 'package:immich_ui/src/previews.dart';
-
-void _previewNoop() {}
-
-@ImmichPreview(group: 'ColumnButton', name: 'Default')
-Widget previewColumnButtonDefault() => const Wrap(
-  spacing: 12,
-  runSpacing: 12,
-  children: [
-    ImmichColumnButton(onPressed: _previewNoop, icon: Icons.favorite_border_rounded, label: 'Favorite'),
-    ImmichColumnButton(onPressed: _previewNoop, icon: Icons.archive_outlined, label: 'Archive'),
-    ImmichColumnButton(onPressed: _previewNoop, icon: Icons.delete_outline_rounded, label: 'Delete'),
-  ],
-);
-
-@ImmichPreview(group: 'ColumnButton', name: 'Loading')
-Widget previewColumnButtonLoading() => ImmichColumnButton(
-  onPressed: () => Future<void>.delayed(const .new(seconds: 2)),
-  icon: Icons.download,
-  label: 'Download',
-);
-
-@ImmichPreview(group: 'ColumnButton', name: 'Disabled')
-Widget previewColumnButtonDisabled() =>
-    const ImmichColumnButton(onPressed: _previewNoop, icon: Icons.ios_share_rounded, label: 'Share', disabled: true);

mobile/packages/ui/lib/src/previews/menu_item.dart

@@ -1,19 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/menu_item.dart';
-import 'package:immich_ui/src/previews.dart';
-
-void _previewNoop() {}
-
-@ImmichPreview(group: 'MenuItem', name: 'Default')
-Widget previewMenuItemDefault() => const Column(
-  mainAxisSize: MainAxisSize.min,
-  children: [
-    ImmichMenuItem(onPressed: _previewNoop, icon: Icons.info_outline, label: 'Info'),
-    ImmichMenuItem(onPressed: _previewNoop, icon: Icons.help_outline_rounded, label: 'Troubleshoot'),
-    ImmichMenuItem(onPressed: _previewNoop, icon: Icons.cast_rounded, label: 'Cast'),
-  ],
-);
-
-@ImmichPreview(group: 'MenuItem', name: 'Disabled')
-Widget previewMenuItemDisabled() =>
-    const ImmichMenuItem(onPressed: _previewNoop, icon: Icons.delete_outline_rounded, label: 'Delete', disabled: true);

mobile/packages/ui/lib/src/previews/snackbar.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/src/constants.dart';
+import 'package:immich_ui/src/previews.dart';
+import 'package:immich_ui/src/snackbar.dart';
+
+@ImmichPreview(group: 'Snackbar', name: 'Types')
+Widget previewSnackbarTypes() => const _SnackbarDemo();
+
+class _SnackbarDemo extends StatelessWidget {
+  const _SnackbarDemo();
+
+  @override
+  Widget build(BuildContext context) {
+    return ScaffoldMessenger(
+      key: scaffoldMessengerKey,
+      child: Scaffold(
+        backgroundColor: Colors.transparent,
+        body: Center(
+          child: Wrap(
+            spacing: ImmichSpacing.md,
+            runSpacing: ImmichSpacing.md,
+            children: [
+              ElevatedButton(onPressed: () => snackbar.info('Info message'), child: const Text('Info')),
+              ElevatedButton(onPressed: () => snackbar.success('Saved'), child: const Text('Success')),
+              ElevatedButton(onPressed: () => snackbar.error('Something failed'), child: const Text('Error')),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/lib/src/snackbar.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+final scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();
+
+class SnackbarManager {
+  const SnackbarManager();
+
+  ScaffoldFeatureController<SnackBar, SnackBarClosedReason>? show(String message, SnackbarType type) {
+    final messenger = scaffoldMessengerKey.currentState;
+    final context = scaffoldMessengerKey.currentContext;
+    if (messenger == null || context == null) {
+      return null;
+    }
+
+    messenger.hideCurrentSnackBar();
+    return messenger.showSnackBar(_build(context, message, type));
+  }
+
+  SnackBar _build(BuildContext context, String message, SnackbarType type) {
+    final theme = Theme.of(context);
+    final colors = theme.extension<ImmichColors>() ?? ImmichColors.harmonized(theme.colorScheme);
+    final (IconData icon, Color background, Color foreground) = switch (type) {
+      .info => (Icons.info_rounded, colors.info, colors.onInfo),
+      .success => (Icons.check_circle_rounded, colors.success, colors.onSuccess),
+      .error => (Icons.warning_rounded, colors.error, colors.onError),
+    };
+
+    return SnackBar(
+      behavior: .floating,
+      backgroundColor: background,
+      duration: const .new(seconds: 4),
+      shape: const RoundedRectangleBorder(borderRadius: .all(.circular(ImmichRadius.sm))),
+      content: Row(
+        children: [
+          Icon(icon, color: foreground, size: ImmichIconSize.sm),
+          const SizedBox(width: ImmichSpacing.md),
+          Expanded(
+            child: Text(
+              message,
+              maxLines: 2,
+              overflow: .ellipsis,
+              style: .new(color: foreground, fontWeight: .w600, fontSize: ImmichTextSize.body),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  ScaffoldFeatureController<SnackBar, SnackBarClosedReason>? info(String message) => show(message, .info);
+
+  ScaffoldFeatureController<SnackBar, SnackBarClosedReason>? success(String message) => show(message, .success);
+
+  ScaffoldFeatureController<SnackBar, SnackBarClosedReason>? error(String message) => show(message, .error);
+}
+
+const snackbar = SnackbarManager();

mobile/packages/ui/lib/src/theme.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:immich_ui/src/constants.dart';
+import 'package:material_color_utilities/blend/blend.dart';
+import 'package:material_color_utilities/hct/hct.dart';
+import 'package:material_color_utilities/palettes/tonal_palette.dart';
 
 class ImmichThemeProvider extends StatelessWidget {
   final ColorScheme colorScheme;
@@ -11,6 +14,7 @@ class ImmichThemeProvider extends StatelessWidget {
   Widget build(BuildContext context) {
     return Theme(
       data: Theme.of(context).copyWith(
+        extensions: [ImmichColors.harmonized(colorScheme)],
         colorScheme: colorScheme,
         brightness: colorScheme.brightness,
         inputDecorationTheme: InputDecorationTheme(
@@ -19,8 +23,8 @@ class ImmichThemeProvider extends StatelessWidget {
             final color = states.contains(WidgetState.error)
                 ? colorScheme.error
                 : states.contains(WidgetState.focused)
-                    ? colorScheme.primary
-                    : colorScheme.outline;
+                ? colorScheme.primary
+                : colorScheme.outline;
             return OutlineInputBorder(
               borderSide: BorderSide(color: color),
               borderRadius: const BorderRadius.all(Radius.circular(ImmichRadius.md)),
@@ -38,3 +42,71 @@ class ImmichThemeProvider extends StatelessWidget {
     );
   }
 }
+
+class ImmichColors extends ThemeExtension<ImmichColors> {
+  final Color info;
+  final Color onInfo;
+  final Color success;
+  final Color onSuccess;
+  final Color error;
+  final Color onError;
+
+  const ImmichColors({
+    required this.info,
+    required this.onInfo,
+    required this.success,
+    required this.onSuccess,
+    required this.error,
+    required this.onError,
+  });
+
+  factory ImmichColors.harmonized(ColorScheme scheme) {
+    final (info, onInfo) = scheme.harmonized(const Color(0xFF1984E9));
+    final (success, onSuccess) = scheme.harmonized(const Color(0xFF10C14D));
+    final (error, onError) = scheme.harmonized(const Color(0xFFFA2921));
+    return ImmichColors(
+      info: info,
+      onInfo: onInfo,
+      success: success,
+      onSuccess: onSuccess,
+      error: error,
+      onError: onError,
+    );
+  }
+
+  @override
+  ImmichColors copyWith({Color? info, Color? onInfo, Color? success, Color? onSuccess, Color? error, Color? onError}) {
+    return ImmichColors(
+      info: info ?? this.info,
+      onInfo: onInfo ?? this.onInfo,
+      success: success ?? this.success,
+      onSuccess: onSuccess ?? this.onSuccess,
+      error: error ?? this.error,
+      onError: onError ?? this.onError,
+    );
+  }
+
+  @override
+  ImmichColors lerp(ImmichColors? other, double t) {
+    if (other == null) {
+      return this;
+    }
+    return ImmichColors(
+      info: Color.lerp(info, other.info, t)!,
+      onInfo: Color.lerp(onInfo, other.onInfo, t)!,
+      success: Color.lerp(success, other.success, t)!,
+      onSuccess: Color.lerp(onSuccess, other.onSuccess, t)!,
+      error: Color.lerp(error, other.error, t)!,
+      onError: Color.lerp(onError, other.onError, t)!,
+    );
+  }
+}
+
+extension on ColorScheme {
+  (Color container, Color onContainer) harmonized(Color seed) {
+    final hct = Hct.fromInt(Blend.harmonize(seed.toARGB32(), primary.toARGB32()));
+    final tones = TonalPalette.of(hct.hue, hct.chroma);
+    final isDark = brightness == Brightness.dark;
+    return (Color(tones.get(isDark ? 30 : 90)), Color(tones.get(isDark ? 90 : 10)));
+  }
+}

mobile/packages/ui/lib/src/types.dart

@@ -1,9 +1,5 @@
-enum ImmichVariant {
-  filled,
-  ghost,
-}
+enum ImmichVariant { filled, ghost }
 
-enum ImmichColor {
-  primary,
-  secondary,
-}
+enum ImmichColor { primary, secondary }
+
+enum SnackbarType { info, success, error }

mobile/packages/ui/pubspec.lock

@@ -92,7 +92,7 @@ packages:
     source: hosted
     version: "0.12.19"
   material_color_utilities:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: material_color_utilities
       sha256: "9c337007e82b1889149c82ed242ed1cb24a66044e30979c44912381e9be4c48b"

mobile/packages/ui/pubspec.yaml

@@ -7,6 +7,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  material_color_utilities: any
 
 dev_dependencies:
   flutter_test:

mobile/packages/ui/test/snackbar_test.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:immich_ui/src/snackbar.dart';
+
+import 'test_utils.dart';
+
+void main() {
+  group('SnackbarManager', () {
+    testWidgets('shows the message', (tester) async {
+      await tester.pumpTestWidget(const SizedBox());
+
+      snackbar.success('hello');
+      await tester.pump();
+
+      expect(find.text('hello'), findsOneWidget);
+      expect(find.byType(SnackBar), findsOneWidget);
+    });
+
+    testWidgets('replaces the current snackbar', (tester) async {
+      await tester.pumpTestWidget(const SizedBox());
+
+      snackbar.info('first');
+      await tester.pump();
+      snackbar.error('second');
+      await tester.pump();
+
+      expect(find.text('first'), findsNothing);
+      expect(find.text('second'), findsOneWidget);
+    });
+
+    testWidgets('no-ops when the messenger is unmounted', (tester) async {
+      expect(snackbar.show('x', .info), isNull);
+    });
+  });
+}

mobile/packages/ui/test/test_utils.dart

@@ -1,9 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:immich_ui/src/snackbar.dart';
 
 extension WidgetTesterExtension on WidgetTester {
-  /// Pumps a widget wrapped in MaterialApp and Scaffold for testing.
   Future<void> pumpTestWidget(Widget widget) {
-    return pumpWidget(MaterialApp(home: Scaffold(body: widget)));
+    return pumpWidget(
+      MaterialApp(
+        scaffoldMessengerKey: scaffoldMessengerKey,
+        home: Scaffold(body: widget),
+      ),
+    );
   }
 }

server/src/queries/sync.repository.sql

@@ -88,7 +88,7 @@ from
 where
   "album_asset"."updateId" < $3
   and "album_asset"."updateId" <= $4
-  and "album_asset"."updateId" >= $5
+  and "album_asset"."updateId" > $5
   and "album_asset"."albumId" = $6
 order by
   "album_asset"."updateId" asc
@@ -202,7 +202,7 @@ from
 where
   "album_asset"."updateId" < $1
   and "album_asset"."updateId" <= $2
-  and "album_asset"."updateId" >= $3
+  and "album_asset"."updateId" > $3
   and "album_asset"."albumId" = $4
 order by
   "album_asset"."updateId" asc
@@ -297,7 +297,7 @@ from
 where
   "album_asset"."updateId" < $1
   and "album_asset"."updateId" <= $2
-  and "album_asset"."updateId" >= $3
+  and "album_asset"."updateId" > $3
   and "album_asset"."albumId" = $4
 order by
   "album_asset"."updateId" asc
@@ -349,7 +349,7 @@ from
 where
   "album_user"."updateId" < $1
   and "album_user"."updateId" <= $2
-  and "album_user"."updateId" >= $3
+  and "album_user"."updateId" > $3
   and "albumId" = $4
 order by
   "album_user"."updateId" asc
@@ -810,7 +810,7 @@ from
 where
   "asset"."updateId" < $2
   and "asset"."updateId" <= $3
-  and "asset"."updateId" >= $4
+  and "asset"."updateId" > $4
   and "ownerId" = $5
 order by
   "asset"."updateId" asc
@@ -908,7 +908,7 @@ from
 where
   "asset_exif"."updateId" < $1
   and "asset_exif"."updateId" <= $2
-  and "asset_exif"."updateId" >= $3
+  and "asset_exif"."updateId" > $3
   and "asset"."ownerId" = $4
 order by
   "asset_exif"."updateId" asc
@@ -997,7 +997,7 @@ from
 where
   "stack"."updateId" < $1
   and "stack"."updateId" <= $2
-  and "stack"."updateId" >= $3
+  and "stack"."updateId" > $3
   and "ownerId" = $4
 order by
   "stack"."updateId" asc

server/src/repositories/sync.repository.ts

@@ -106,7 +106,7 @@ export class BaseSync {
       .selectFrom(table(t).as(t))
       .where(updateIdRef, '<', nowId)
       .where(updateIdRef, '<=', beforeUpdateId)
-      .$if(!!afterUpdateId, (qb) => qb.where(updateIdRef, '>=', afterUpdateId!))
+      .$if(!!afterUpdateId, (qb) => qb.where(updateIdRef, '>', afterUpdateId!))
       .orderBy(updateIdRef, 'asc');
   }
 

server/test/medium/specs/sync/sync-album-to-asset.spec.ts

@@ -155,6 +155,57 @@ describe(SyncRequestType.AlbumToAssetsV1, () => {
     await ctx.assertSyncIsComplete(auth, [SyncRequestType.AlbumToAssetsV1]);
   });
 
+  it('should not resend an already-acked item when backfill resumes', async () => {
+    const { auth, ctx } = await setup();
+    const { user: user2 } = await ctx.newUser();
+
+    // backfill needs assets with an older updateId
+    const { asset: sharedAsset1 } = await ctx.newAsset({ ownerId: user2.id });
+    const { asset: sharedAsset2 } = await ctx.newAsset({ ownerId: user2.id });
+
+    await wait(2);
+
+    const { album: sharedAlbum } = await ctx.newAlbum({ ownerId: user2.id });
+    await ctx.newAlbumAsset({ albumId: sharedAlbum.id, assetId: sharedAsset1.id });
+    await ctx.newAlbumAsset({ albumId: sharedAlbum.id, assetId: sharedAsset2.id });
+
+    await wait(2);
+
+    // backfill needs an initial ack, otherwise it syncs everything
+    const { asset: ownedAsset } = await ctx.newAsset({ ownerId: auth.user.id });
+    const { album: ownedAlbum } = await ctx.newAlbum({ ownerId: auth.user.id });
+    await ctx.newAlbumAsset({ albumId: ownedAlbum.id, assetId: ownedAsset.id });
+
+    const setupResponse = await ctx.syncStream(auth, [SyncRequestType.AlbumToAssetsV1]);
+    await ctx.syncAckAll(auth, setupResponse);
+
+    // share album to trigger backfill
+    await ctx.newAlbumUser({ albumId: sharedAlbum.id, userId: auth.user.id, role: AlbumUserRole.Editor });
+
+    const response1 = await ctx.syncStream(auth, [SyncRequestType.AlbumToAssetsV1]);
+    expect(response1).toEqual([
+      // receive both
+      expect.objectContaining({ data: { albumId: sharedAlbum.id, assetId: sharedAsset1.id } }),
+      expect.objectContaining({ data: { albumId: sharedAlbum.id, assetId: sharedAsset2.id } }),
+      expect.objectContaining({ type: SyncEntityType.SyncAckV1 }),
+      expect.objectContaining({ type: SyncEntityType.SyncCompleteV1 }),
+    ]);
+
+    // ack 1st
+    await ctx.sut.setAcks(auth, { acks: [response1[0].ack] });
+
+    const response2 = await ctx.syncStream(auth, [SyncRequestType.AlbumToAssetsV1]);
+    expect(response2).toEqual([
+      // receive 2nd
+      expect.objectContaining({ data: { albumId: sharedAlbum.id, assetId: sharedAsset2.id } }),
+      expect.objectContaining({ type: SyncEntityType.SyncAckV1 }),
+      expect.objectContaining({ type: SyncEntityType.SyncCompleteV1 }),
+    ]);
+
+    await ctx.syncAckAll(auth, response2);
+    await ctx.assertSyncIsComplete(auth, [SyncRequestType.AlbumToAssetsV1]);
+  });
+
   it('should detect and sync a deleted album to asset relation', async () => {
     const { auth, ctx } = await setup();
     const albumRepo = ctx.get(AlbumRepository);

server/test/medium/specs/sync/sync-partner-asset.spec.ts

@@ -279,6 +279,68 @@ describe(SyncRequestType.PartnerAssetsV2, () => {
     await ctx.assertSyncIsComplete(auth, [SyncRequestType.PartnerAssetsV2]);
   });
 
+  it('should not resend an already-acked item when backfill resumes', async () => {
+    const { auth, ctx } = await setup();
+    const { user: user2 } = await ctx.newUser();
+    const { user: user3 } = await ctx.newUser();
+
+    // backfill needs assets with an older updateId
+    const { asset: partnerAsset1 } = await ctx.newAsset({ ownerId: user3.id });
+    await wait(2);
+    const { asset: partnerAsset2 } = await ctx.newAsset({ ownerId: user3.id });
+
+    await wait(2);
+
+    // backfill needs an initial ack, otherwise it syncs everything
+    const { asset: initialAsset } = await ctx.newAsset({ ownerId: user2.id });
+    await ctx.newPartner({ sharedById: user2.id, sharedWithId: auth.user.id });
+
+    const setupResponse = await ctx.syncStream(auth, [SyncRequestType.PartnerAssetsV2]);
+    expect(setupResponse).toEqual([
+      expect.objectContaining({
+        data: expect.objectContaining({ id: initialAsset.id }),
+        type: SyncEntityType.PartnerAssetV2,
+      }),
+      expect.objectContaining({ type: SyncEntityType.SyncCompleteV1 }),
+    ]);
+    await ctx.syncAckAll(auth, setupResponse);
+
+    // partner share to trigger backfill
+    await ctx.newPartner({ sharedById: user3.id, sharedWithId: auth.user.id });
+
+    const response1 = await ctx.syncStream(auth, [SyncRequestType.PartnerAssetsV2]);
+    expect(response1).toEqual([
+      // receive both
+      expect.objectContaining({
+        data: expect.objectContaining({ id: partnerAsset1.id }),
+        type: SyncEntityType.PartnerAssetBackfillV2,
+      }),
+      expect.objectContaining({
+        data: expect.objectContaining({ id: partnerAsset2.id }),
+        type: SyncEntityType.PartnerAssetBackfillV2,
+      }),
+      expect.objectContaining({ type: SyncEntityType.SyncAckV1 }),
+      expect.objectContaining({ type: SyncEntityType.SyncCompleteV1 }),
+    ]);
+
+    // ack 1st
+    await ctx.sut.setAcks(auth, { acks: [response1[0].ack] });
+
+    const response2 = await ctx.syncStream(auth, [SyncRequestType.PartnerAssetsV2]);
+    expect(response2).toEqual([
+      // receive 2nd
+      expect.objectContaining({
+        data: expect.objectContaining({ id: partnerAsset2.id }),
+        type: SyncEntityType.PartnerAssetBackfillV2,
+      }),
+      expect.objectContaining({ type: SyncEntityType.SyncAckV1 }),
+      expect.objectContaining({ type: SyncEntityType.SyncCompleteV1 }),
+    ]);
+
+    await ctx.syncAckAll(auth, response2);
+    await ctx.assertSyncIsComplete(auth, [SyncRequestType.PartnerAssetsV2]);
+  });
+
   it('should hide isFavorite for partner assets', async () => {
     const { auth, ctx } = await setup();
     const { user: user2 } = await ctx.newUser();