From a0d03925e09d479dc9d405f1793e2bd9bae3c582 Mon Sep 17 00:00:00 2001
From: Conner Hnatiuk <46903591+ConnerWithAnE@users.noreply.github.com>
Date: Thu, 25 Apr 2024 08:36:35 -0600
Subject: [PATCH] fix(mobile): appBar on home screen animates out and doesnt
 alter asset grid position (#9026)

---
 .../disable_multi_select_button.dart          |  2 +-
 .../ui/asset_grid/immich_asset_grid_view.dart | 21 ++++++++-
 mobile/lib/modules/home/views/home_page.dart  | 46 +++++++++++++------
 3 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart b/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart
index 3c97f54cfc..9d26745b16 100644
--- a/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart
@@ -17,7 +17,7 @@ class DisableMultiSelectButton extends ConsumerWidget {
     return Align(
       alignment: Alignment.topLeft,
       child: Padding(
-        padding: const EdgeInsets.only(left: 16.0, top: 16.0),
+        padding: const EdgeInsets.only(left: 16.0, top: 8.0),
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 4.0),
           child: ElevatedButton.icon(
diff --git a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
index 2ab9db56be..9392a244bf 100644
--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
@@ -16,9 +16,11 @@ import 'package:immich_mobile/modules/home/ui/asset_grid/thumbnail_placeholder.d
 import 'package:immich_mobile/shared/ui/immich_toast.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:immich_mobile/modules/home/ui/control_bottom_app_bar.dart';
+import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/scroll_to_date_notifier.provider.dart';
 import 'package:immich_mobile/shared/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/shared/providers/tab.provider.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 
 import 'asset_grid_data_structure.dart';
@@ -235,8 +237,14 @@ class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> {
       }
     }
 
+    bool appBarOffset() {
+      return ref.watch(tabProvider).index == 0 &&
+          ModalRoute.of(context)?.settings.name == TabControllerRoute.name;
+    }
+
     final listWidget = ScrollablePositionedList.builder(
-      padding: const EdgeInsets.only(
+      padding: EdgeInsets.only(
+        top: appBarOffset() ? 60 : 0,
         bottom: 220,
       ),
       itemBuilder: _itemBuilder,
@@ -256,6 +264,9 @@ class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> {
             controller: _itemScrollController,
             backgroundColor: context.themeData.hintColor,
             labelTextBuilder: _labelBuilder,
+            padding: appBarOffset()
+                ? const EdgeInsets.only(top: 60)
+                : const EdgeInsets.only(),
             labelConstraints: const BoxConstraints(maxHeight: 28),
             scrollbarAnimationDuration: const Duration(milliseconds: 300),
             scrollbarTimeToFade: const Duration(milliseconds: 1000),
@@ -264,7 +275,13 @@ class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> {
         : listWidget;
     return widget.onRefresh == null
         ? child
-        : RefreshIndicator(onRefresh: widget.onRefresh!, child: child);
+        : appBarOffset()
+            ? RefreshIndicator(
+                onRefresh: widget.onRefresh!,
+                edgeOffset: 30,
+                child: child,
+              )
+            : RefreshIndicator(onRefresh: widget.onRefresh!, child: child);
   }
 
   void _scrollToDate() {
diff --git a/mobile/lib/modules/home/views/home_page.dart b/mobile/lib/modules/home/views/home_page.dart
index 86788b8296..687355c000 100644
--- a/mobile/lib/modules/home/views/home_page.dart
+++ b/mobile/lib/modules/home/views/home_page.dart
@@ -98,21 +98,37 @@ class HomePage extends HookConsumerWidget {
       }
     }
 
-    return Scaffold(
-      appBar: ref.watch(multiselectProvider) ? null : const ImmichAppBar(),
-      body: MultiselectGrid(
-        topWidget: (currentUser != null && currentUser.memoryEnabled)
-            ? const MemoryLane()
-            : const SizedBox(),
-        renderListProvider: timelineUsers.length > 1
-            ? multiUserAssetsProvider(timelineUsers)
-            : assetsProvider(currentUser?.isarId),
-        buildLoadingIndicator: buildLoadingIndicator,
-        onRefresh: refreshAssets,
-        stackEnabled: true,
-        archiveEnabled: true,
-        editEnabled: true,
-      ),
+    return Stack(
+      children: [
+        MultiselectGrid(
+          topWidget: (currentUser != null && currentUser.memoryEnabled)
+              ? const MemoryLane()
+              : const SizedBox(),
+          renderListProvider: timelineUsers.length > 1
+              ? multiUserAssetsProvider(timelineUsers)
+              : assetsProvider(currentUser?.isarId),
+          buildLoadingIndicator: buildLoadingIndicator,
+          onRefresh: refreshAssets,
+          stackEnabled: true,
+          archiveEnabled: true,
+          editEnabled: true,
+        ),
+        AnimatedPositioned(
+          duration: const Duration(milliseconds: 300),
+          top: ref.watch(multiselectProvider)
+              ? -(kToolbarHeight + MediaQuery.of(context).padding.top)
+              : 0,
+          left: 0,
+          right: 0,
+          child: Container(
+            height: kToolbarHeight + MediaQuery.of(context).padding.top,
+            color: context.themeData.appBarTheme.backgroundColor,
+            child: const SafeArea(
+              child: ImmichAppBar(),
+            ),
+          ),
+        ),
+      ],
     );
   }
 }