Move save button to app bar in collage creator (#8631)

## Description

Collage creator wasn't responsive and wasn't consistent in design, this
makes it look similar to video/image editor.
<img width="400" alt="collage"
src="https://github.com/user-attachments/assets/333a6324-22cd-433b-8a11-2c73b18fec8c"
/>

## Tests

- [x] Tested on iOS

Author: ua741

mobile/apps/photos/lib/ui/tools/collage/collage_app_bar.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import "package:photos/generated/l10n.dart";
+import "package:photos/theme/ente_theme.dart";
+
+class CollageAppBar extends StatelessWidget implements PreferredSizeWidget {
+  const CollageAppBar({
+    super.key,
+    required this.onSave,
+    this.isSaveEnabled = true,
+  });
+
+  final VoidCallback onSave;
+  final bool isSaveEnabled;
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = getEnteColorScheme(context);
+    final textTheme = getEnteTextTheme(context);
+    return AppBar(
+      elevation: 0,
+      automaticallyImplyLeading: false,
+      titleSpacing: 0,
+      title: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(),
+            child: Text(
+              AppLocalizations.of(context).cancel,
+              style: textTheme.body,
+            ),
+          ),
+          TextButton(
+            onPressed: isSaveEnabled ? onSave : null,
+            child: Text(
+              AppLocalizations.of(context).saveCollage,
+              style: textTheme.body.copyWith(
+                color: isSaveEnabled
+                    ? colorScheme.primary500
+                    : colorScheme.textMuted,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/apps/photos/lib/ui/tools/collage/collage_creator_page.dart

@@ -1,14 +1,23 @@
 import "package:flutter/material.dart";
+import "package:flutter_image_compress/flutter_image_compress.dart";
+import "package:logging/logging.dart";
+import "package:photo_manager/photo_manager.dart";
 import "package:photos/generated/l10n.dart";
 import 'package:photos/models/file/file.dart';
+import "package:photos/services/sync/sync_service.dart";
+import "package:photos/ui/notification/toast.dart";
+import "package:photos/ui/tools/collage/collage_app_bar.dart";
 import "package:photos/ui/tools/collage/collage_test_grid.dart";
 import "package:photos/ui/tools/collage/collage_with_five_items.dart";
 import "package:photos/ui/tools/collage/collage_with_four_items.dart";
 import "package:photos/ui/tools/collage/collage_with_six_items.dart";
 import "package:photos/ui/tools/collage/collage_with_three_items.dart";
 import "package:photos/ui/tools/collage/collage_with_two_items.dart";
+import "package:photos/ui/viewer/file/detail_page.dart";
+import "package:photos/utils/navigation_util.dart";
+import "package:widgets_to_image/widgets_to_image.dart";
 
-class CollageCreatorPage extends StatelessWidget {
+class CollageCreatorPage extends StatefulWidget {
   static const int _collageItemsMin = 2;
   static const int _collageItemsMax = 6;
   static bool isValidCount(int count) {
@@ -19,66 +28,141 @@ class CollageCreatorPage extends StatelessWidget {
 
   const CollageCreatorPage(this.files, {super.key});
 
+  @override
+  State<CollageCreatorPage> createState() => _CollageCreatorPageState();
+}
+
+class _CollageCreatorPageState extends State<CollageCreatorPage> {
+  final _logger = Logger("CollageCreatorPage");
+  WidgetsToImageController? _controller;
+  bool _isSaving = false;
+
+  void _onControllerReady(WidgetsToImageController controller) {
+    setState(() {
+      _controller = controller;
+    });
+  }
+
+  Future<void> _saveCollage() async {
+    if (_controller == null || _isSaving) return;
+
+    setState(() {
+      _isSaving = true;
+    });
+
+    try {
+      final bytes = await _controller!.capture();
+      _logger.info('Size before compression = ${bytes!.length}');
+      final compressedBytes = await FlutterImageCompress.compressWithList(
+        bytes,
+        quality: 80,
+      );
+      _logger.info('Size after compression = ${compressedBytes.length}');
+      final fileName = "ente_collage_" +
+          DateTime.now().microsecondsSinceEpoch.toString() +
+          ".jpeg";
+      final newAsset = await (PhotoManager.editor
+          .saveImage(
+        compressedBytes,
+        filename: fileName,
+        relativePath: "ente Collages",
+      )
+          .onError((err, st) async {
+        return await (PhotoManager.editor.saveImage(
+          compressedBytes,
+          filename: fileName,
+        ));
+      }));
+      final newFile = await EnteFile.fromAsset("ente Collages", newAsset);
+      SyncService.instance.sync().ignore();
+      showShortToast(context, AppLocalizations.of(context).collageSaved);
+      replacePage(
+        context,
+        DetailPage(
+          DetailPageConfiguration([newFile], 0, "collage"),
+        ),
+        result: true,
+      );
+    } catch (e, s) {
+      _logger.severe(e, s);
+      showShortToast(
+        context,
+        AppLocalizations.of(context).somethingWentWrong,
+      );
+    } finally {
+      if (mounted) {
+        setState(() {
+          _isSaving = false;
+        });
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        elevation: 0,
-        title: Text(AppLocalizations.of(context).createCollage),
+      appBar: CollageAppBar(
+        onSave: _saveCollage,
+        isSaveEnabled: _controller != null && !_isSaving,
       ),
       body: _getBody(context),
     );
   }
 
   Widget _getBody(BuildContext context) {
-    final count = files.length;
+    final count = widget.files.length;
     Widget collage;
     switch (count) {
       case 2:
         collage = CollageWithTwoItems(
-          files[0],
-          files[1],
+          widget.files[0],
+          widget.files[1],
+          onControllerReady: _onControllerReady,
         );
         break;
       case 3:
         collage = CollageWithThreeItems(
-          files[0],
-          files[1],
-          files[2],
+          widget.files[0],
+          widget.files[1],
+          widget.files[2],
+          onControllerReady: _onControllerReady,
         );
         break;
       case 4:
         collage = CollageWithFourItems(
-          files[0],
-          files[1],
-          files[2],
-          files[3],
+          widget.files[0],
+          widget.files[1],
+          widget.files[2],
+          widget.files[3],
+          onControllerReady: _onControllerReady,
         );
         break;
       case 5:
         collage = CollageWithFiveItems(
-          files[0],
-          files[1],
-          files[2],
-          files[3],
-          files[4],
+          widget.files[0],
+          widget.files[1],
+          widget.files[2],
+          widget.files[3],
+          widget.files[4],
+          onControllerReady: _onControllerReady,
         );
         break;
       case 6:
         collage = CollageWithSixItems(
-          files[0],
-          files[1],
-          files[2],
-          files[3],
-          files[4],
-          files[5],
+          widget.files[0],
+          widget.files[1],
+          widget.files[2],
+          widget.files[3],
+          widget.files[4],
+          widget.files[5],
+          onControllerReady: _onControllerReady,
         );
         break;
       default:
         collage = const TestGrid();
     }
     return Padding(
-      padding: const EdgeInsets.all(12),
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
       child: collage,
     );
   }