local albums

mobile/assets/i18n/en-US.json

@@ -1,4 +1,14 @@
 {
+  "collections": "Collections",
+  "on_this_device": "On this device",
+  "places": "Places",
+  "albums": "Albums",
+  "people": "People",
+  "shared_links": "Shared links",
+  "trash": "Trash",
+  "archived": "Archived",
+  "favorites": "Favorites",
+  "search_albums": "Search albums",
   "action_common_back": "Back",
   "action_common_cancel": "Cancel",
   "action_common_clear": "Clear",
@@ -589,4 +599,4 @@
   "viewer_remove_from_stack": "Remove from Stack",
   "viewer_stack_use_as_main_asset": "Use as Main Asset",
   "viewer_unstack": "Un-Stack"
-}
+}

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

@@ -83,7 +83,7 @@ class AlbumsCollectionPage extends HookConsumerWidget {
               context.colorScheme.surfaceContainer,
             ),
             autoFocus: false,
-            hintText: "Search albums",
+            hintText: "search_albums".tr(),
             onChanged: onSearch,
             elevation: const WidgetStatePropertyAll(0.25),
             controller: searchController,
@@ -96,7 +96,7 @@ class AlbumsCollectionPage extends HookConsumerWidget {
                 borderRadius: BorderRadius.circular(20),
                 side: BorderSide(
                   color: context.colorScheme.onSurface.withAlpha(10),
-                  width: 1,
+                  width: 0.5,
                 ),
               ),
             ),
@@ -127,7 +127,6 @@ class AlbumsCollectionPage extends HookConsumerWidget {
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               const SortButton(),
-              const SizedBox(width: 10),
               IconButton(
                 icon: Icon(
                   isGrid.value
@@ -175,7 +174,6 @@ class AlbumsCollectionPage extends HookConsumerWidget {
                           title: Text(
                             sorted[index].name,
                             style: context.textTheme.titleSmall?.copyWith(
-                              // fontSize: 16,
                               fontWeight: FontWeight.w600,
                             ),
                           ),

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

@@ -1,18 +1,54 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/album/albumv2.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
 
 @RoutePage()
 class LocalAlbumsCollectionPage extends HookConsumerWidget {
   const LocalAlbumsCollectionPage({super.key});
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final albums = ref.watch(localAlbumsProvider);
+
     return Scaffold(
       appBar: AppBar(
-        title: const Text('on_this_device'),
+        title: Text('on_this_device'.tr()),
       ),
-      body: const Center(
+      body: ListView.builder(
-        child: Text('on_this_device_content'),
+        padding: const EdgeInsets.all(18.0),
+        itemCount: albums.length,
+        itemBuilder: (context, index) {
+          return Padding(
+            padding: const EdgeInsets.only(bottom: 8.0),
+            child: ListTile(
+              contentPadding: const EdgeInsets.all(0),
+              dense: false,
+              visualDensity: VisualDensity.comfortable,
+              leading: ClipRRect(
+                borderRadius: const BorderRadius.all(Radius.circular(15)),
+                child: ImmichThumbnail(
+                  asset: albums[index].thumbnail.value,
+                  width: 60,
+                  height: 90,
+                ),
+              ),
+              minVerticalPadding: 1,
+              title: Text(
+                albums[index].name,
+                style: context.textTheme.titleSmall?.copyWith(
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+              subtitle: Text('${albums[index].assetCount} items'),
+              onTap: () => context
+                  .pushRoute(AlbumViewerRoute(albumId: albums[index].id)),
+            ),
+          );
+        },
       ),
     );
   }

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

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
@@ -38,13 +39,13 @@ class CollectionsPage extends ConsumerWidget {
                 ActionButton(
                   onPressed: () => context.pushRoute(const FavoritesRoute()),
                   icon: Icons.favorite_outline_rounded,
-                  label: 'Favorite',
+                  label: 'favorites'.tr(),
                 ),
                 const SizedBox(width: 8),
                 ActionButton(
                   onPressed: () => context.pushRoute(const ArchiveRoute()),
                   icon: Icons.archive_outlined,
-                  label: 'Archive',
+                  label: 'archived'.tr(),
                 ),
               ],
             ),
@@ -54,14 +55,14 @@ class CollectionsPage extends ConsumerWidget {
                 ActionButton(
                   onPressed: () => context.pushRoute(const SharedLinkRoute()),
                   icon: Icons.link_outlined,
-                  label: 'Shared links',
+                  label: 'shared_links'.tr(),
                 ),
                 const SizedBox(width: 8),
                 trashEnabled
                     ? ActionButton(
                         onPressed: () => context.pushRoute(const TrashRoute()),
                         icon: Icons.delete_outline_rounded,
-                        label: 'Trash',
+                        label: 'trash'.tr(),
                       )
                     : const SizedBox.shrink(),
               ],
@@ -125,7 +126,13 @@ class PeopleCollectionCard extends ConsumerWidget {
           ),
           Padding(
             padding: const EdgeInsets.all(8.0),
-            child: Text('People', style: context.textTheme.labelLarge),
+            child: Text(
+              'people'.tr(),
+              style: context.textTheme.titleSmall?.copyWith(
+                color: context.colorScheme.onSurface,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
           ),
         ],
       ),
@@ -179,8 +186,11 @@ class AlbumsCollectionCard extends HookConsumerWidget {
           Padding(
             padding: const EdgeInsets.all(8.0),
             child: Text(
-              isLocal ? 'On this device' : 'Albums',
+              isLocal ? 'on_this_device'.tr() : 'albums'.tr(),
-              style: context.textTheme.labelLarge,
+              style: context.textTheme.titleSmall?.copyWith(
+                color: context.colorScheme.onSurface,
+                fontWeight: FontWeight.w500,
+              ),
             ),
           ),
         ],
@@ -221,7 +231,13 @@ class PlacesCollectionCard extends StatelessWidget {
           ),
           Padding(
             padding: const EdgeInsets.all(8.0),
-            child: Text('Places', style: context.textTheme.labelLarge),
+            child: Text(
+              'places'.tr(),
+              style: context.textTheme.titleSmall?.copyWith(
+                color: context.colorScheme.onSurface,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
           ),
         ],
       ),

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

@@ -98,7 +98,7 @@ class TabControllerPage extends HookConsumerWidget {
             padding: const EdgeInsets.all(4),
             icon: const Icon(Icons.photo_album_outlined),
             selectedIcon: const Icon(Icons.photo_album),
-            label: const Text('Collections').tr(),
+            label: const Text('collections').tr(),
           ),
         ],
       );
@@ -163,7 +163,7 @@ class TabControllerPage extends HookConsumerWidget {
           //   ),
           // ),
           NavigationDestination(
-            label: 'Collections'.tr(),
+            label: 'collections'.tr(),
             icon: const Icon(
               Icons.photo_album_outlined,
             ),