feat(mobile): Transparent bottom Android navigation bar (#1953)

* transparent system overlay

* immersive view to gallery viewer, as well

* comments

mobile/lib/main.dart

@@ -211,6 +211,9 @@ class ImmichAppState extends ConsumerState<ImmichApp>
     ref.watch(releaseInfoProvider.notifier).checkGithubReleaseInfo();
 
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+    SystemChrome.setSystemUIOverlayStyle(
+      const SystemUiOverlayStyle(systemNavigationBarColor: Colors.transparent),
+    );
 
     return MaterialApp(
       localizationsDelegates: context.localizationDelegates,

mobile/lib/modules/asset_viewer/views/gallery_viewer.dart

@@ -247,6 +247,13 @@ class GalleryViewerPage extends HookConsumerWidget {
               (showAppBar.value && !isZoomed.value)) &&
           !isPlayingVideo.value;
 
+      // Change to and from immersive mode, hiding navigation and app bar
+      if (show) {
+        SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+      } else {
+        SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
+      }
+
       return AnimatedOpacity(
         duration: const Duration(milliseconds: 100),
         opacity: show ? 1.0 : 0.0,
@@ -291,7 +298,13 @@ class GalleryViewerPage extends HookConsumerWidget {
 
     return Scaffold(
       backgroundColor: Colors.black,
-      body: Stack(
+      body: WillPopScope(
+        onWillPop: () async {
+          // Change immersive mode back to normal "edgeToEdge" mode
+          await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+          return true;
+        },
+        child: Stack(
           children: [
             PhotoViewGallery.builder(
               scaleStateChangedCallback: (state) {
@@ -431,6 +444,7 @@ class GalleryViewerPage extends HookConsumerWidget {
             ),
           ],
         ),
+      ),
     );
   }
 }