fix(mobile): transparent system navbar when trash bottom bar is visible

[putuprema]

Description

When user selects one or more items in the Trash page, the bottom action bar to Delete/Restore the item is shown as expected. However, I can see the trash timeline through the system navigation bar (both on android and ios) which does not look good. Normally when there is a bottom bar or a bottom sheet, user cannot see the main page content underneath the system nav bar.

The fix is by disabling the SafeArea bottom inset, so that the TrashBottomBar widget is rendered underneath the system navigation bar, and then I extended the bottom bar height and padding to include viewPadding.bottom, filling the area behind the system nav bar and thus avoid the Delete/Restore buttons from overlapping with the nav bar.

How Has This Been Tested?

Tested on both Android real device and iOS simulator by going to the Trash page and then selecting one or more items. You should no longer be able to see the trash timeline underneath the system nav bar while the trash bottom bar is visible. See the test result below.

Screenshots

Checklist:

• I have carefully read CONTRIBUTING.md
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation if applicable
• I have no unrelated changes in the PR.
• I have confirmed that any new dependencies are strictly necessary.
• I have written tests for new code (if applicable)
• I have followed naming conventions/patterns in the surrounding code
• All code in src/services/ uses repositories implementations for database calls, filesystem operations, etc.
• All code in src/repositories/ is pretty basic/simple and does not have any immich specific logic (that belongs in src/services/)

Please describe to which degree, if any, an LLM was used in creating this pull request.

No LLM is used in creating this pull request

[uhthomas]

Could we just move the container up the tree? Then we don't need to do any manual padding calculations.

diff --git a/mobile/lib/presentation/widgets/bottom_sheet/trash_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/bottom_sheet/trash_bottom_sheet.widget.dart
index 9f8216c4e..c31b7afd9 100644
--- a/mobile/lib/presentation/widgets/bottom_sheet/trash_bottom_sheet.widget.dart
+++ b/mobile/lib/presentation/widgets/bottom_sheet/trash_bottom_sheet.widget.dart
@@ -10,20 +10,18 @@ class TrashBottomBar extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return SafeArea(
-      child: Align(
-        alignment: Alignment.bottomCenter,
-        child: SizedBox(
-          height: 64,
-          child: Container(
-            color: context.themeData.canvasColor,
-            child: const Row(
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-              children: [
-                DeleteTrashActionButton(source: ActionSource.timeline),
-                RestoreTrashActionButton(source: ActionSource.timeline),
-              ],
-            ),
+    return Align(
+      alignment: Alignment.bottomCenter,
+      child: ColoredBox(
+        color: context.themeData.canvasColor,
+        child: const SafeArea(
+          top: false,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              DeleteTrashActionButton(source: ActionSource.timeline),
+              RestoreTrashActionButton(source: ActionSource.timeline),
+            ],
           ),
         ),
       ),

[uhthomas]

Looks good, thanks!

[putuprema]

Hi @alextran1502 @uhthomas Thank you for taking a look on my first contribution for this great project. Just wondering if there is anything else I need to do to get this PR merged ? No pressure, of course 🙂

[uhthomas]

Should be all good. Alex will take another look when he has some time.