Fix/album title (#440)

* Fix album title overflow

* i18n

* More i18n

mobile/assets/i18n/en-US.json

@@ -104,5 +104,11 @@
   "version_announcement_overlay_text_1": "Hi friend, there is a new release of",
   "version_announcement_overlay_text_2": "please take your time to visit the ",
   "version_announcement_overlay_text_3": " and ensure your docker-compose and .env setup is up-to-date to prevent any misconfigurations, especially if you use WatchTower or any mechanism that handles updating your server application automatically.",
-  "version_announcement_overlay_title": "New Server Version Available \uD83C\uDF89"
+  "version_announcement_overlay_title": "New Server Version Available \uD83C\uDF89",
+  "album_thumbnail_card_item": "1 item",
+  "album_thumbnail_card_items": "{} items",
+  "album_thumbnail_card_shared": " · Shared",
+  "library_page_albums": "Albums",
+  "library_page_new_album": "New album",
+  "create_album_page_untitled": "Untitled"
 }

mobile/lib/modules/album/ui/album_thumbnail_card.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:hive/hive.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
@@ -15,6 +16,8 @@ class AlbumThumbnailCard extends StatelessWidget {
   Widget build(BuildContext context) {
     var box = Hive.box(userInfoBox);
 
+    final cardSize = MediaQuery.of(context).size.width / 2 - 18;
+
     return GestureDetector(
       onTap: () {
         AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
@@ -27,8 +30,8 @@ class AlbumThumbnailCard extends StatelessWidget {
             ClipRRect(
               borderRadius: BorderRadius.circular(8),
               child: FadeInImage(
-                width: MediaQuery.of(context).size.width / 2 - 18,
+                width: cardSize,
-                height: MediaQuery.of(context).size.width / 2 - 18,
+                height: cardSize,
                 fit: BoxFit.cover,
                 placeholder: MemoryImage(kTransparentImage),
                 image: NetworkImage(
@@ -43,11 +46,14 @@ class AlbumThumbnailCard extends StatelessWidget {
             ),
             Padding(
               padding: const EdgeInsets.only(top: 8.0),
-              child: Text(
+              child: SizedBox(
-                album.albumName,
+                width: cardSize,
-                style: const TextStyle(
+                child: Text(
-                  fontWeight: FontWeight.bold,
+                  album.albumName,
-                  fontSize: 12,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 12,
+                  ),
                 ),
               ),
             ),
@@ -55,18 +61,20 @@ class AlbumThumbnailCard extends StatelessWidget {
               mainAxisSize: MainAxisSize.min,
               children: [
                 Text(
-                  '${album.assets.length} item${album.assets.length > 1 ? 's' : ''}',
+                  album.assets.length == 1
+                      ? 'album_thumbnail_card_item'
+                      : 'album_thumbnail_card_items',
                   style: const TextStyle(
                     fontSize: 10,
                   ),
-                ),
+                ).tr(args: ['${album.assets.length }']),
                 if (album.shared)
                   const Text(
-                    ' · Shared',
+                    'album_thumbnail_card_shared',
                     style: TextStyle(
                       fontSize: 10,
                     ),
-                  )
+                  ).tr()
               ],
             )
           ],

mobile/lib/modules/album/views/create_album_page.dart

@@ -37,8 +37,10 @@ class CreateAlbumPage extends HookConsumerWidget {
       isAlbumTitleTextFieldFocus.value = false;
 
       if (albumTitleController.text.isEmpty) {
-        albumTitleController.text = 'Untitled';
+        albumTitleController.text = 'create_album_page_untitled'.tr();
-        ref.watch(albumTitleProvider.notifier).setAlbumTitle('Untitled');
+        ref
+            .watch(albumTitleProvider.notifier)
+            .setAlbumTitle('create_album_page_untitled'.tr());
       }
     }
 

mobile/lib/modules/album/views/library_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:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -66,15 +67,15 @@ class LibraryPage extends HookConsumerWidget {
                 ),
               ),
             ),
-            const Padding(
+            Padding(
-              padding: EdgeInsets.only(top: 8.0),
+              padding: const EdgeInsets.only(top: 8.0),
-              child: Text(
+              child: const Text(
-                "New album",
+                'library_page_new_album',
                 style: TextStyle(
                   fontSize: 12,
                   fontWeight: FontWeight.bold,
                 ),
-              ),
+              ).tr(),
             )
           ],
         ),
@@ -85,13 +86,13 @@ class LibraryPage extends HookConsumerWidget {
       body: CustomScrollView(
         slivers: [
           _buildAppBar(),
-          const SliverToBoxAdapter(
+          SliverToBoxAdapter(
             child: Padding(
-              padding: EdgeInsets.all(12.0),
+              padding: const EdgeInsets.all(12.0),
-              child: Text(
+              child: const Text(
-                "Albums",
+                'library_page_albums',
                 style: TextStyle(fontWeight: FontWeight.bold),
-              ),
+              ).tr(),
             ),
           ),
           SliverPadding(