chore(mobile): proper new UI layout for tablet (#13650)

* chore(mobile): better tablet UI

* fix spacing when trash is disable

* better layout for library page

* Removed navigation rail

* removed navigation rail reference

* correct padding

* fixed people page

mobile/lib/pages/common/tab_controller.page.dart

@@ -61,53 +61,6 @@ class TabControllerPage extends HookConsumerWidget {
       ref.read(tabProvider.notifier).state = TabEnum.values[index];
     }
 
-    navigationRail(TabsRouter tabsRouter) {
-      return NavigationRail(
-        labelType: NavigationRailLabelType.all,
-        selectedIndex: tabsRouter.activeIndex,
-        onDestinationSelected: (index) =>
-            onNavigationSelected(tabsRouter, index),
-        selectedIconTheme: IconThemeData(
-          color: context.primaryColor,
-        ),
-        selectedLabelTextStyle: TextStyle(
-          color: context.primaryColor,
-        ),
-        useIndicator: false,
-        destinations: [
-          NavigationRailDestination(
-            padding: EdgeInsets.only(
-              top: MediaQuery.of(context).padding.top + 4,
-              left: 4,
-              right: 4,
-              bottom: 4,
-            ),
-            icon: const Icon(Icons.photo_library_outlined),
-            selectedIcon: const Icon(Icons.photo_library),
-            label: const Text('tab_controller_nav_photos').tr(),
-          ),
-          NavigationRailDestination(
-            padding: const EdgeInsets.all(4),
-            icon: const Icon(Icons.search_rounded),
-            selectedIcon: const Icon(Icons.search),
-            label: const Text('tab_controller_nav_search').tr(),
-          ),
-          NavigationRailDestination(
-            padding: const EdgeInsets.all(4),
-            icon: const Icon(Icons.photo_album_outlined),
-            selectedIcon: const Icon(Icons.photo_album),
-            label: const Text('albums').tr(),
-          ),
-          NavigationRailDestination(
-            padding: const EdgeInsets.all(4),
-            icon: const Icon(Icons.space_dashboard_outlined),
-            selectedIcon: const Icon(Icons.space_dashboard_rounded),
-            label: const Text('library').tr(),
-          ),
-        ],
-      );
-    }
-
     bottomNavigationBar(TabsRouter tabsRouter) {
       return NavigationBar(
         selectedIndex: tabsRouter.activeIndex,
@@ -186,33 +139,13 @@ class TabControllerPage extends HookConsumerWidget {
           canPop: tabsRouter.activeIndex == 0,
           onPopInvokedWithResult: (didPop, _) =>
               !didPop ? tabsRouter.setActiveIndex(0) : null,
-          child: LayoutBuilder(
-            builder: (context, constraints) {
-              const medium = 600;
-              final Widget? bottom;
-              final Widget body;
-              if (constraints.maxWidth < medium) {
-                // Normal phone width
-                bottom = bottomNavigationBar(tabsRouter);
-                body = child;
-              } else {
-                // Medium tablet width
-                bottom = null;
-                body = Row(
-                  children: [
-                    navigationRail(tabsRouter),
-                    Expanded(child: child),
-                  ],
-                );
-              }
-              return Scaffold(
+          child: Scaffold(
             body: HeroControllerScope(
               controller: HeroController(),
-                  child: body,
+              child: child,
             ),
-                bottomNavigationBar: multiselectEnabled ? null : bottom,
-              );
-            },
+            bottomNavigationBar:
+                multiselectEnabled ? null : bottomNavigationBar(tabsRouter),
           ),
         );
       },

mobile/lib/pages/library/library.page.dart

@@ -59,7 +59,7 @@ class LibraryPage extends ConsumerWidget {
                   icon: Icons.link_outlined,
                   label: 'shared_links'.tr(),
                 ),
-                const SizedBox(width: 8),
+                SizedBox(width: trashEnabled ? 8 : 0),
                 trashEnabled
                     ? ActionButton(
                         onPressed: () => context.pushRoute(const TrashRoute()),
@@ -197,7 +197,12 @@ class PeopleCollectionCard extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final people = ref.watch(getAllPeopleProvider);
-    final size = MediaQuery.of(context).size.width * 0.5 - 20;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isTablet = constraints.maxWidth > 600;
+        final widthFactor = isTablet ? 0.25 : 0.5;
+        final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
+
         return GestureDetector(
           onTap: () => context.pushRoute(const PeopleCollectionRoute()),
           child: Column(
@@ -250,6 +255,8 @@ class PeopleCollectionCard extends ConsumerWidget {
             ],
           ),
         );
+      },
+    );
   }
 }
 
@@ -260,7 +267,11 @@ class LocalAlbumsCollectionCard extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final albums = ref.watch(localAlbumsProvider);
 
-    final size = MediaQuery.of(context).size.width * 0.5 - 20;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isTablet = constraints.maxWidth > 600;
+        final widthFactor = isTablet ? 0.25 : 0.5;
+        final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
 
         return GestureDetector(
           onTap: () => context.pushRoute(
@@ -310,6 +321,8 @@ class LocalAlbumsCollectionCard extends HookConsumerWidget {
             ],
           ),
         );
+      },
+    );
   }
 }
 
@@ -317,7 +330,12 @@ class PlacesCollectionCard extends StatelessWidget {
   const PlacesCollectionCard({super.key});
   @override
   Widget build(BuildContext context) {
-    final size = MediaQuery.of(context).size.width * 0.5 - 20;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isTablet = constraints.maxWidth > 600;
+        final widthFactor = isTablet ? 0.25 : 0.5;
+        final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
+
         return GestureDetector(
           onTap: () => context.pushRoute(const PlacesCollectionRoute()),
           child: Column(
@@ -356,6 +374,8 @@ class PlacesCollectionCard extends StatelessWidget {
             ],
           ),
         );
+      },
+    );
   }
 }
 

mobile/lib/pages/library/people/people_collection.page.dart

@@ -29,6 +29,12 @@ class PeopleCollectionPage extends HookConsumerWidget {
       );
     }
 
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isTablet = constraints.maxWidth > 600;
+        final isPortrait =
+            MediaQuery.of(context).orientation == Orientation.portrait;
+
         return Scaffold(
           appBar: AppBar(
             title: Text('people'.tr()),
@@ -36,9 +42,10 @@ class PeopleCollectionPage extends HookConsumerWidget {
           body: people.when(
             data: (people) {
               return GridView.builder(
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 3,
+                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: isTablet ? 6 : 3,
                   childAspectRatio: 0.85,
+                  mainAxisSpacing: isPortrait && isTablet ? 36 : 0,
                 ),
                 padding: const EdgeInsets.symmetric(vertical: 32),
                 itemCount: people.length,
@@ -60,7 +67,7 @@ class PeopleCollectionPage extends HookConsumerWidget {
                           shape: const CircleBorder(side: BorderSide.none),
                           elevation: 3,
                           child: CircleAvatar(
-                        maxRadius: 96 / 2,
+                            maxRadius: isTablet ? 120 / 2 : 96 / 2,
                             backgroundImage: NetworkImage(
                               getFaceThumbnailUrl(person.id),
                               headers: headers,
@@ -80,8 +87,9 @@ class PeopleCollectionPage extends HookConsumerWidget {
                                 ),
                               )
                             : Padding(
-                            padding:
-                                const EdgeInsets.symmetric(horizontal: 16.0),
+                                padding: const EdgeInsets.symmetric(
+                                  horizontal: 16.0,
+                                ),
                                 child: Text(
                                   person.name,
                                   overflow: TextOverflow.ellipsis,
@@ -100,5 +108,7 @@ class PeopleCollectionPage extends HookConsumerWidget {
             loading: () => const CircularProgressIndicator(),
           ),
         );
+      },
+    );
   }
 }