Added rounting mechanism

mobile/lib/pages/collections/albums/albums_collection.page.dart

@@ -7,6 +7,13 @@ class AlbumsCollectionPage extends HookConsumerWidget {
   const AlbumsCollectionPage({super.key});
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return Container();
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('albums_collection_page_title'),
+      ),
+      body: const Center(
+        child: Text('albums_collection_page_content'),
+      ),
+    );
   }
 }

mobile/lib/pages/collections/albums/local_albums_collection.page.dart

@@ -7,6 +7,13 @@ class LocalAlbumsCollectionPage extends HookConsumerWidget {
   const LocalAlbumsCollectionPage({super.key});
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return Container();
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('on_this_device'),
+      ),
+      body: const Center(
+        child: Text('on_this_device_content'),
+      ),
+    );
   }
 }

mobile/lib/pages/collections/albums/people_collection.page.dart

@@ -7,6 +7,13 @@ class PeopleCollectionPage extends HookConsumerWidget {
   const PeopleCollectionPage({super.key});
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return Container();
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('people'),
+      ),
+      body: const Center(
+        child: Text('people'),
+      ),
+    );
   }
 }

mobile/lib/pages/collections/albums/places_collection.part.dart

@@ -7,6 +7,13 @@ class PlacesCollectionPage extends HookConsumerWidget {
   const PlacesCollectionPage({super.key});
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return Container();
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('places'),
+      ),
+      body: const Center(
+        child: Text('places'),
+      ),
+    );
   }
 }

mobile/lib/pages/collections/collections.page.dart

@@ -87,41 +87,44 @@ class PeopleCollectionCard extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final people = ref.watch(getAllPeopleProvider);
     final size = MediaQuery.of(context).size.width * 0.5 - 20;
-    return Column(
+    return GestureDetector(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      onTap: () => context.pushRoute(const PeopleCollectionRoute()),
-      children: [
+      child: Column(
-        Container(
+        crossAxisAlignment: CrossAxisAlignment.start,
-          height: size,
+        children: [
-          width: size,
+          Container(
-          decoration: BoxDecoration(
+            height: size,
-            borderRadius: BorderRadius.circular(20),
+            width: size,
-            color: context.colorScheme.secondaryContainer.withAlpha(100),
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(20),
+              color: context.colorScheme.secondaryContainer.withAlpha(100),
+            ),
+            child: people.widgetWhen(
+              onData: (people) {
+                return GridView.count(
+                  crossAxisCount: 2,
+                  padding: const EdgeInsets.all(12),
+                  crossAxisSpacing: 8,
+                  mainAxisSpacing: 8,
+                  physics: const NeverScrollableScrollPhysics(),
+                  children: people.take(4).map((person) {
+                    return CircleAvatar(
+                      backgroundImage: NetworkImage(
+                        getFaceThumbnailUrl(person.id),
+                        headers: ApiService.getRequestHeaders(),
+                      ),
+                    );
+                  }).toList(),
+                );
+              },
+            ),
           ),
-          child: people.widgetWhen(
+          Padding(
-            onData: (people) {
+            padding: const EdgeInsets.all(8.0),
-              return GridView.count(
+            child: Text('People', style: context.textTheme.labelLarge),
-                crossAxisCount: 2,
-                padding: const EdgeInsets.all(12),
-                crossAxisSpacing: 8,
-                mainAxisSpacing: 8,
-                physics: const NeverScrollableScrollPhysics(),
-                children: people.take(4).map((person) {
-                  return CircleAvatar(
-                    backgroundImage: NetworkImage(
-                      getFaceThumbnailUrl(person.id),
-                      headers: ApiService.getRequestHeaders(),
-                    ),
-                  );
-                }).toList(),
-              );
-            },
           ),
-        ),
+        ],
-        Padding(
+      ),
-          padding: const EdgeInsets.all(8.0),
-          child: Text('People', style: context.textTheme.labelLarge),
-        ),
-      ],
     );
   }
 }
@@ -137,38 +140,43 @@ class AlbumsCollectionCard extends ConsumerWidget {
         ? ref.watch(albumProvider).where((album) => album.isLocal)
         : ref.watch(albumProvider).where((album) => album.isRemote);
     final size = MediaQuery.of(context).size.width * 0.5 - 20;
-    return Column(
+    return GestureDetector(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      onTap: () => context.pushRoute(isLocal
-      children: [
+          ? const LocalAlbumsCollectionRoute()
-        Container(
+          : const AlbumsCollectionRoute()),
-          height: size,
+      child: Column(
-          width: size,
+        crossAxisAlignment: CrossAxisAlignment.start,
-          decoration: BoxDecoration(
+        children: [
-            borderRadius: BorderRadius.circular(20),
+          Container(
-            color: context.colorScheme.secondaryContainer.withAlpha(100),
+            height: size,
+            width: size,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(20),
+              color: context.colorScheme.secondaryContainer.withAlpha(100),
+            ),
+            child: GridView.count(
+              crossAxisCount: 2,
+              padding: const EdgeInsets.all(12),
+              crossAxisSpacing: 8,
+              mainAxisSpacing: 8,
+              physics: const NeverScrollableScrollPhysics(),
+              children: albums.take(4).map((album) {
+                return AlbumThumbnailCard(
+                  album: album,
+                  showTitle: false,
+                );
+              }).toList(),
+            ),
           ),
-          child: GridView.count(
+          Padding(
-            crossAxisCount: 2,
+            padding: const EdgeInsets.all(8.0),
-            padding: const EdgeInsets.all(12),
+            child: Text(
-            crossAxisSpacing: 8,
+              isLocal ? 'On this device' : 'Albums',
-            mainAxisSpacing: 8,
+              style: context.textTheme.labelLarge,
-            physics: const NeverScrollableScrollPhysics(),
+            ),
-            children: albums.take(4).map((album) {
-              return AlbumThumbnailCard(
-                album: album,
-                showTitle: false,
-              );
-            }).toList(),
           ),
-        ),
+        ],
-        Padding(
+      ),
-          padding: const EdgeInsets.all(8.0),
-          child: Text(
-            isLocal ? 'On this device' : 'Albums',
-            style: context.textTheme.labelLarge,
-          ),
-        ),
-      ],
     );
   }
 }
@@ -178,33 +186,37 @@ class PlacesCollectionCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size.width * 0.5 - 20;
-    return Column(
+    return GestureDetector(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      onTap: () => context.pushRoute(const PlacesCollectionRoute()),
-      children: [
+      child: Column(
-        Container(
+        crossAxisAlignment: CrossAxisAlignment.start,
-          height: size,
+        children: [
-          width: size,
+          Container(
-          decoration: BoxDecoration(
+            height: size,
-            borderRadius: BorderRadius.circular(20),
+            width: size,
-            color: context.colorScheme.secondaryContainer.withAlpha(100),
+            decoration: BoxDecoration(
-          ),
+              borderRadius: BorderRadius.circular(20),
-          child: IgnorePointer(
+              color: context.colorScheme.secondaryContainer.withAlpha(100),
-            child: MapThumbnail(
+            ),
-              zoom: 8,
+            child: IgnorePointer(
-              centre: const LatLng(
+              child: MapThumbnail(
-                21.44950,
+                zoom: 8,
-                -157.91959,
+                centre: const LatLng(
+                  21.44950,
+                  -157.91959,
+                ),
+                showAttribution: false,
+                themeMode:
+                    context.isDarkTheme ? ThemeMode.dark : ThemeMode.light,
               ),
-              showAttribution: false,
-              themeMode: context.isDarkTheme ? ThemeMode.dark : ThemeMode.light,
             ),
           ),
-        ),
+          Padding(
-        Padding(
+            padding: const EdgeInsets.all(8.0),
-          padding: const EdgeInsets.all(8.0),
+            child: Text('Places', style: context.textTheme.labelLarge),
-          child: Text('Places', style: context.textTheme.labelLarge),
+          ),
-        ),
+        ],
-      ],
+      ),
     );
   }
 }

mobile/lib/routing/router.dart

@@ -240,21 +240,25 @@ class AppRouter extends RootStackRouter {
       page: HeaderSettingsRoute.page,
       guards: [_duplicateGuard],
     ),
-    AutoRoute(
+    CustomRoute(
       page: PeopleCollectionRoute.page,
       guards: [_authGuard, _duplicateGuard],
+      transitionsBuilder: TransitionsBuilders.slideLeft,
     ),
-    AutoRoute(
+    CustomRoute(
       page: AlbumsCollectionRoute.page,
       guards: [_authGuard, _duplicateGuard],
+      transitionsBuilder: TransitionsBuilders.slideLeft,
     ),
-    AutoRoute(
+    CustomRoute(
       page: LocalAlbumsCollectionRoute.page,
       guards: [_authGuard, _duplicateGuard],
+      transitionsBuilder: TransitionsBuilders.slideLeft,
     ),
-    AutoRoute(
+    CustomRoute(
       page: PlacesCollectionRoute.page,
       guards: [_authGuard, _duplicateGuard],
+      transitionsBuilder: TransitionsBuilders.slideLeft,
     ),
   ];
 }