refactor(mobile): backup info box (#14171)

split up backup info box into separate widgets

mobile/lib/constants/immich_colors.dart

@@ -21,6 +21,7 @@ const Color immichBrandColorLight = Color(0xFF4150AF);
 const Color immichBrandColorDark = Color(0xFFACCBFA);
 const Color whiteOpacity75 = Color.fromARGB((0.75 * 255) ~/ 1, 255, 255, 255);
 const Color blackOpacity90 = Color.fromARGB((0.90 * 255) ~/ 1, 0, 0, 0);
+const Color red400 = Color(0xFFEF5350);
 
 final Map<ImmichColorPreset, ImmichTheme> _themePresetsMap = {
   ImmichColorPreset.indigo: ImmichTheme(

mobile/lib/models/backup/current_upload_asset.model.dart

@@ -18,6 +18,9 @@ class CurrentUploadAsset {
     this.iCloudAsset,
   });
 
+  @pragma('vm:prefer-inline')
+  bool get isIcloudAsset => iCloudAsset != null && iCloudAsset!;
+
   CurrentUploadAsset copyWith({
     String? id,
     DateTime? fileCreatedAt,

mobile/lib/widgets/backup/asset_info_table.dart

@@ -0,0 +1,102 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/models/backup/backup_state.model.dart';
+import 'package:immich_mobile/models/backup/current_upload_asset.model.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+
+class BackupAssetInfoTable extends ConsumerWidget {
+  const BackupAssetInfoTable({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isManualUpload = ref.watch(
+      backupProvider.select(
+        (value) => value.backupProgress == BackUpProgressEnum.manualInProgress,
+      ),
+    );
+
+    final asset = isManualUpload
+        ? ref.watch(
+            manualUploadProvider.select((value) => value.currentUploadAsset),
+          )
+        : ref.watch(backupProvider.select((value) => value.currentUploadAsset));
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 8.0),
+      child: Table(
+        border: TableBorder.all(
+          color: context.colorScheme.outlineVariant,
+          width: 1,
+        ),
+        children: [
+          TableRow(
+            children: [
+              TableCell(
+                verticalAlignment: TableCellVerticalAlignment.middle,
+                child: Padding(
+                  padding: const EdgeInsets.all(6.0),
+                  child: Text(
+                    'backup_controller_page_filename',
+                    style: TextStyle(
+                      color: context.colorScheme.onSurfaceSecondary,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 10.0,
+                    ),
+                  ).tr(
+                    args: [asset.fileName, asset.fileType.toLowerCase()],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          TableRow(
+            children: [
+              TableCell(
+                verticalAlignment: TableCellVerticalAlignment.middle,
+                child: Padding(
+                  padding: const EdgeInsets.all(6.0),
+                  child: Text(
+                    "backup_controller_page_created",
+                    style: TextStyle(
+                      color: context.colorScheme.onSurfaceSecondary,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 10.0,
+                    ),
+                  ).tr(
+                    args: [_getAssetCreationDate(asset)],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          TableRow(
+            children: [
+              TableCell(
+                child: Padding(
+                  padding: const EdgeInsets.all(6.0),
+                  child: Text(
+                    "backup_controller_page_id",
+                    style: TextStyle(
+                      color: context.colorScheme.onSurfaceSecondary,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 10.0,
+                    ),
+                  ).tr(args: [asset.id]),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  @pragma('vm:prefer-inline')
+  String _getAssetCreationDate(CurrentUploadAsset asset) {
+    return DateFormat.yMMMMd().format(asset.fileCreatedAt.toLocal());
+  }
+}