feat(mobile): add album description functionality (#18886)

* feat(mobile): add album description functionality

- Introduced a new optional `description` field in the `Album` entity.
- Updated `AlbumViewerPageState` to manage `editDescriptionText`.
- Created `AlbumDescription` and `AlbumViewerEditableDescription` widgets for displaying and editing album descriptions.
- Enhanced `CreateAlbumPage` to include a description input field.
- Implemented backend support for updating album descriptions in `AlbumApiRepository` and `AlbumService`.
- Updated sync logic to handle album descriptions during data synchronization.
- Adjusted UI components to accommodate the new description feature.

* fix dart analysis error

* remove comment that shouldn't be there

* Album header styling

* fix: disable edit after album creation

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

mobile/lib/widgets/album/album_action_filled_button.dart

@@ -16,7 +16,7 @@ class AlbumActionFilledButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(right: 16.0),
+      padding: const EdgeInsets.only(right: 8.0),
       child: FilledButton.icon(
         style: FilledButton.styleFrom(
           padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
@@ -32,9 +32,7 @@ class AlbumActionFilledButton extends StatelessWidget {
         ),
         label: Text(
           labelText,
-          style: context.textTheme.labelMedium?.copyWith(
-            fontWeight: FontWeight.w600,
-          ),
+          style: context.textTheme.labelLarge?.copyWith(),
         ),
         onPressed: onPressed,
       ),

mobile/lib/widgets/album/album_viewer_appbar.dart

@@ -18,6 +18,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
     super.key,
     required this.userId,
     required this.titleFocusNode,
+    required this.descriptionFocusNode,
     this.onAddPhotos,
     this.onAddUsers,
     required this.onActivities,
@@ -25,6 +26,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
 
   final String userId;
   final FocusNode titleFocusNode;
+  final FocusNode descriptionFocusNode;
   final void Function()? onAddPhotos;
   final void Function()? onAddUsers;
   final void Function() onActivities;
@@ -48,6 +50,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
 
     final albumViewer = ref.watch(albumViewerProvider);
     final newAlbumTitle = albumViewer.editTitleText;
+    final newAlbumDescription = albumViewer.editDescriptionText;
     final isEditAlbum = albumViewer.isEditAlbum;
 
     final comments = album.shared
@@ -277,20 +280,37 @@ class AlbumViewerAppbar extends HookConsumerWidget
       if (isEditAlbum) {
         return IconButton(
           onPressed: () async {
-            bool isSuccess = await ref
-                .watch(albumViewerProvider.notifier)
-                .changeAlbumTitle(album, newAlbumTitle);
-
-            if (!isSuccess) {
-              ImmichToast.show(
-                context: context,
-                msg: "album_viewer_appbar_share_err_title".tr(),
-                gravity: ToastGravity.BOTTOM,
-                toastType: ToastType.error,
-              );
+            if (newAlbumTitle.isNotEmpty) {
+              bool isSuccess = await ref
+                  .watch(albumViewerProvider.notifier)
+                  .changeAlbumTitle(album, newAlbumTitle);
+              if (!isSuccess) {
+                ImmichToast.show(
+                  context: context,
+                  msg: "album_viewer_appbar_share_err_title".tr(),
+                  gravity: ToastGravity.BOTTOM,
+                  toastType: ToastType.error,
+                );
+              }
+              titleFocusNode.unfocus();
+            } else if (newAlbumDescription.isNotEmpty) {
+              bool isSuccessDescription = await ref
+                  .watch(albumViewerProvider.notifier)
+                  .changeAlbumDescription(album, newAlbumDescription);
+              if (!isSuccessDescription) {
+                ImmichToast.show(
+                  context: context,
+                  msg: "album_viewer_appbar_share_err_description".tr(),
+                  gravity: ToastGravity.BOTTOM,
+                  toastType: ToastType.error,
+                );
+              }
+              descriptionFocusNode.unfocus();
+            } else {
+              titleFocusNode.unfocus();
+              descriptionFocusNode.unfocus();
+              ref.read(albumViewerProvider.notifier).disableEditAlbum();
             }
-
-            titleFocusNode.unfocus();
           },
           icon: const Icon(Icons.check_rounded),
           splashRadius: 25,

mobile/lib/widgets/album/album_viewer_editable_description.dart

@@ -0,0 +1,102 @@
+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';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/album/album_viewer.provider.dart';
+
+class AlbumViewerEditableDescription extends HookConsumerWidget {
+  final String albumDescription;
+  final FocusNode descriptionFocusNode;
+  const AlbumViewerEditableDescription({
+    super.key,
+    required this.albumDescription,
+    required this.descriptionFocusNode,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albumViewerState = ref.watch(albumViewerProvider);
+
+    final descriptionTextEditController = useTextEditingController(
+      text: albumViewerState.isEditAlbum &&
+              albumViewerState.editDescriptionText.isNotEmpty
+          ? albumViewerState.editDescriptionText
+          : albumDescription,
+    );
+
+    void onFocusModeChange() {
+      if (!descriptionFocusNode.hasFocus &&
+          descriptionTextEditController.text.isEmpty) {
+        ref.watch(albumViewerProvider.notifier).setEditDescriptionText("");
+        descriptionTextEditController.text = "";
+      }
+    }
+
+    useEffect(
+      () {
+        descriptionFocusNode.addListener(onFocusModeChange);
+        return () {
+          descriptionFocusNode.removeListener(onFocusModeChange);
+        };
+      },
+      [],
+    );
+
+    return Material(
+      color: Colors.transparent,
+      child: TextField(
+        onChanged: (value) {
+          if (value.isEmpty) {
+          } else {
+            ref
+                .watch(albumViewerProvider.notifier)
+                .setEditDescriptionText(value);
+          }
+        },
+        focusNode: descriptionFocusNode,
+        style: context.textTheme.bodyMedium,
+        maxLines: 3,
+        minLines: 1,
+        controller: descriptionTextEditController,
+        onTap: () {
+          context.focusScope.requestFocus(descriptionFocusNode);
+
+          ref
+              .watch(albumViewerProvider.notifier)
+              .setEditDescriptionText(albumDescription);
+          ref.watch(albumViewerProvider.notifier).enableEditAlbum();
+
+          if (descriptionTextEditController.text == '') {
+            descriptionTextEditController.clear();
+          }
+        },
+        decoration: InputDecoration(
+          contentPadding: const EdgeInsets.all(8),
+          suffixIcon: descriptionFocusNode.hasFocus
+              ? IconButton(
+                  onPressed: () {
+                    descriptionTextEditController.clear();
+                  },
+                  icon: Icon(
+                    Icons.cancel_rounded,
+                    color: context.primaryColor,
+                  ),
+                  splashRadius: 10,
+                )
+              : null,
+          enabledBorder: const OutlineInputBorder(
+            borderSide: BorderSide(color: Colors.transparent),
+          ),
+          focusedBorder: const OutlineInputBorder(
+            borderSide: BorderSide(color: Colors.transparent),
+          ),
+          focusColor: Colors.grey[300],
+          fillColor: context.scaffoldBackgroundColor,
+          filled: descriptionFocusNode.hasFocus,
+          hintText: 'add_a_description'.tr(),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/album/album_viewer_editable_title.dart

@@ -52,7 +52,9 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
           }
         },
         focusNode: titleFocusNode,
-        style: context.textTheme.headlineMedium,
+        style: context.textTheme.headlineLarge?.copyWith(
+          fontWeight: FontWeight.w700,
+        ),
         controller: titleTextEditController,
         onTap: () {
           context.focusScope.requestFocus(titleFocusNode);
@@ -65,8 +67,10 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
           }
         },
         decoration: InputDecoration(
-          contentPadding:
-              const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+          contentPadding: const EdgeInsets.symmetric(
+            horizontal: 8,
+            vertical: 0,
+          ),
           suffixIcon: titleFocusNode.hasFocus
               ? IconButton(
                   onPressed: () {