fix(web): show a clearer confirmation message when deleting an unnamed album (#11988)

* fix(web): show a different confirmation message when deleting an unnamed album

* Rename the function

* Fix formatting

web/src/lib/components/album-page/albums-list.svelte

@@ -17,7 +17,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { downloadAlbum } from '$lib/utils/asset-utils';
   import { normalizeSearchString } from '$lib/utils/string-utils';
-  import { getSelectedAlbumGroupOption, type AlbumGroup } from '$lib/utils/album-utils';
+  import { getSelectedAlbumGroupOption, type AlbumGroup, confirmAlbumDelete } from '$lib/utils/album-utils';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
   import { user } from '$lib/stores/user.store';
   import {
@@ -31,7 +31,6 @@
   } from '$lib/stores/preferences.store';
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
 
   export let ownedAlbums: AlbumResponseDto[] = [];
@@ -302,9 +301,7 @@
       return;
     }
 
-    const isConfirmed = await dialogController.show({
+    const isConfirmed = await confirmAlbumDelete(albumToDelete);
-      prompt: $t('album_delete_confirmation', { values: { album: albumToDelete.albumName } }),
-    });
 
     if (!isConfirmed) {
       return;

web/src/lib/i18n/en.json

@@ -335,7 +335,8 @@
   "album_added": "Album added",
   "album_added_notification_setting_description": "Receive an email notification when you are added to a shared album",
   "album_cover_updated": "Album cover updated",
-  "album_delete_confirmation": "Are you sure you want to delete the album {album}?\nIf this album is shared, other users will not be able to access it anymore.",
+  "album_delete_confirmation": "Are you sure you want to delete the album {album}?",
+  "album_delete_confirmation_description": "If this album is shared, other users will not be able to access it anymore.",
   "album_info_updated": "Album info updated",
   "album_leave": "Leave album?",
   "album_leave_confirmation": "Are you sure you want to leave {album}?",
@@ -1189,6 +1190,7 @@
   "unlink_oauth": "Unlink OAuth",
   "unlinked_oauth_account": "Unlinked OAuth account",
   "unnamed_album": "Unnamed Album",
+  "unnamed_album_delete_confirmation": "Are you sure you want to delete this album?",
   "unnamed_share": "Unnamed Share",
   "unsaved_change": "Unsaved change",
   "unselect_all": "Unselect all",

web/src/lib/utils/album-utils.ts

@@ -1,4 +1,5 @@
 import { goto } from '$app/navigation';
+import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 import { AppRoute } from '$lib/constants';
 import {
   AlbumFilter,
@@ -199,3 +200,16 @@ export const collapseAllAlbumGroups = (groupIds: string[]) => {
 export const expandAllAlbumGroups = () => {
   collapseAllAlbumGroups([]);
 };
+
+export const confirmAlbumDelete = async (album: AlbumResponseDto) => {
+  const $t = get(t);
+  const confirmation =
+    album.albumName.length > 0
+      ? $t('album_delete_confirmation', { values: { album: album.albumName } })
+      : $t('unnamed_album_delete_confirmation');
+
+  const description = $t('album_delete_confirmation_description');
+  const prompt = `${confirmation} ${description}`;
+
+  return dialogController.show({ prompt });
+};

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -82,9 +82,9 @@
   } from '@mdi/js';
   import { fly } from 'svelte/transition';
   import type { PageData } from './$types';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
   import { onDestroy } from 'svelte';
+  import { confirmAlbumDelete } from '$lib/utils/album-utils';
 
   export let data: PageData;
 
@@ -365,9 +365,7 @@
   };
 
   const handleRemoveAlbum = async () => {
-    const isConfirmed = await dialogController.show({
+    const isConfirmed = await confirmAlbumDelete(album);
-      prompt: $t('album_delete_confirmation', { values: { album: album.albumName } }),
-    });
 
     if (!isConfirmed) {
       viewMode = ViewMode.VIEW;