feat: improve title and layout of the confirm dialog (#2307)

Author: shuuji3

components/account/AccountMoreButton.vue

@@ -26,7 +26,8 @@ function shareAccount() {
 
 async function toggleReblogs() {
   if (!relationship!.showingReblogs && await openConfirmDialog({
-    title: t('confirm.show_reblogs.title', [account.acct]),
+    title: t('confirm.show_reblogs.title'),
+    description: t('confirm.show_reblogs.description', [account.acct]),
     confirm: t('confirm.show_reblogs.confirm'),
     cancel: t('confirm.show_reblogs.cancel'),
   }) !== 'confirm')

components/list/ListEntry.vue

@@ -58,7 +58,8 @@ async function removeList() {
     return
 
   const confirmDelete = await openConfirmDialog({
-    title: t('confirm.delete_list.title', [list.value.title]),
+    title: t('confirm.delete_list.title'),
+    description: t('confirm.delete_list.description', [list.value.title]),
     confirm: t('confirm.delete_list.confirm'),
     cancel: t('confirm.delete_list.cancel'),
   })

components/modal/ModalConfirm.vue

@@ -10,7 +10,7 @@ const emit = defineEmits<{
 
 <template>
   <div flex="~ col" gap-6>
-    <div font-bold text-lg text-center>
+    <div font-bold text-lg>
       {{ title }}
     </div>
     <div v-if="description">

components/status/StatusActionsMore.vue

@@ -66,6 +66,7 @@ async function shareLink(status: mastodon.v1.Status) {
 async function deleteStatus() {
   if (await openConfirmDialog({
     title: t('confirm.delete_posts.title'),
+    description: t('confirm.delete_posts.description'),
     confirm: t('confirm.delete_posts.confirm'),
     cancel: t('confirm.delete_posts.cancel'),
   }) !== 'confirm')
@@ -83,6 +84,7 @@ async function deleteStatus() {
 async function deleteAndRedraft() {
   if (await openConfirmDialog({
     title: t('confirm.delete_posts.title'),
+    description: t('confirm.delete_posts.description'),
     confirm: t('confirm.delete_posts.confirm'),
     cancel: t('confirm.delete_posts.cancel'),
   }) !== 'confirm')

composables/masto/relationship.ts

@@ -41,6 +41,7 @@ export async function toggleFollowAccount(relationship: mastodon.v1.Relationship
   if (unfollow) {
     if (await openConfirmDialog({
       title: i18n.t('confirm.unfollow.title'),
+      description: i18n.t('confirm.unfollow.description', [`@${account.acct}`]),
       confirm: i18n.t('confirm.unfollow.confirm'),
       cancel: i18n.t('confirm.unfollow.cancel'),
     }) !== 'confirm')
@@ -66,7 +67,8 @@ export async function toggleMuteAccount(relationship: mastodon.v1.Relationship,
   const i18n = useNuxtApp().$i18n
 
   if (!relationship!.muting && await openConfirmDialog({
-    title: i18n.t('confirm.mute_account.title', [account.acct]),
+    title: i18n.t('confirm.mute_account.title'),
+    description: i18n.t('confirm.mute_account.description', [account.acct]),
     confirm: i18n.t('confirm.mute_account.confirm'),
     cancel: i18n.t('confirm.mute_account.cancel'),
   }) !== 'confirm')
@@ -85,7 +87,8 @@ export async function toggleBlockAccount(relationship: mastodon.v1.Relationship,
   const i18n = useNuxtApp().$i18n
 
   if (!relationship!.blocking && await openConfirmDialog({
-    title: i18n.t('confirm.block_account.title', [account.acct]),
+    title: i18n.t('confirm.block_account.title'),
+    description: i18n.t('confirm.block_account.description', [account.acct]),
     confirm: i18n.t('confirm.block_account.confirm'),
     cancel: i18n.t('confirm.block_account.cancel'),
   }) !== 'confirm')
@@ -100,7 +103,8 @@ export async function toggleBlockDomain(relationship: mastodon.v1.Relationship,
   const i18n = useNuxtApp().$i18n
 
   if (!relationship!.domainBlocking && await openConfirmDialog({
-    title: i18n.t('confirm.block_domain.title', [getServerName(account)]),
+    title: i18n.t('confirm.block_domain.title'),
+    description: i18n.t('confirm.block_domain.description', [getServerName(account)]),
     confirm: i18n.t('confirm.block_domain.confirm'),
     cancel: i18n.t('confirm.block_domain.cancel'),
   }) !== 'confirm')

locales/ar.json

@@ -120,12 +120,12 @@
     "block_account": {
       "cancel": "إلغاء",
       "confirm": "حظر",
-      "title": "هل أنت متأكد أنك تريد حظر {0}؟"
+      "description": "هل أنت متأكد أنك تريد حظر {0}؟"
     },
     "block_domain": {
       "cancel": "إلغاء",
       "confirm": "حظر",
-      "title": "هل أنت متأكد أنك تريد حظر {0}؟"
+      "description": "هل أنت متأكد أنك تريد حظر {0}؟"
     },
     "common": {
       "cancel": "لا",
@@ -134,27 +134,27 @@
     "delete_list": {
       "cancel": "إلغاء",
       "confirm": "حذف",
-      "title": "هل أنت متأكد أنك تريد حذف القائمة \"{0}\"؟"
+      "description": "هل أنت متأكد أنك تريد حذف القائمة \"{0}\"؟"
     },
     "delete_posts": {
       "cancel": "إلغاء",
       "confirm": "حذف",
-      "title": "هل أنت متأكد أنك تريد حذف هذا المنشور؟"
+      "description": "هل أنت متأكد أنك تريد حذف هذا المنشور؟"
     },
     "mute_account": {
       "cancel": "إلغاء",
       "confirm": "كتم",
-      "title": "هل أنت متأكد أنك تريد كتم {0}؟"
+      "description": "هل أنت متأكد أنك تريد كتم {0}؟"
     },
     "show_reblogs": {
       "cancel": "إلغاء",
       "confirm": "اعرض",
-      "title": "هل أنت متأكد أنك تريد إظهار إعادة المدونات من {0}؟"
+      "description": "هل أنت متأكد أنك تريد إظهار إعادة المدونات من {0}؟"
     },
     "unfollow": {
       "cancel": "إلغاء",
       "confirm": "إلغاء المتابعة",
-      "title": "هل أنت متأكد أنك تريد إلغاء المتابعة؟"
+      "description": "هل أنت متأكد أنك تريد إلغاء المتابعة؟"
     }
   },
   "conversation": {

locales/ca-valencia.json

@@ -58,36 +58,36 @@
     "block_account": {
       "cancel": "Cancel·la",
       "confirm": "Bloqueja",
-      "title": "Segur que vols bloquejar {0}?"
+      "description": "Segur que vols bloquejar {0}?"
     },
     "block_domain": {
       "cancel": "Cancel·la",
       "confirm": "Bloqueja",
-      "title": "Segur que vols bloquejar {0}?"
+      "description": "Segur que vols bloquejar {0}?"
     },
     "delete_list": {
       "cancel": "Cancel·la",
       "confirm": "Elimina",
-      "title": "Segur que vols eliminar la llista «{0}»?"
+      "description": "Segur que vols eliminar la llista «{0}»?"
     },
     "delete_posts": {
       "cancel": "Cancel·la",
       "confirm": "Elimina",
-      "title": "Segur que vols eliminar la publicació?"
+      "description": "Segur que vols eliminar la publicació?"
     },
     "mute_account": {
       "cancel": "Cancel·la",
       "confirm": "Silencia",
-      "title": "Segur que vols silenciar {0}?"
+      "description": "Segur que vols silenciar {0}?"
     },
     "show_reblogs": {
       "cancel": "Cancel·la",
       "confirm": "Mostra",
-      "title": "Segur que vols mostrar els impulsos de: {0}?"
+      "description": "Segur que vols mostrar els impulsos de: {0}?"
     },
     "unfollow": {
       "cancel": "Cancel·la",
-      "title": "Segur que vols deixar de seguir-lo?"
+      "description": "Segur que vols deixar de seguir-lo?"
     }
   },
   "custom_cards": {

locales/ca.json

@@ -109,12 +109,12 @@
     "block_account": {
       "cancel": "Cancel·lar",
       "confirm": "Bloc",
-      "title": "Confirmes que vols bloquejar {0}?"
+      "description": "Confirmes que vols bloquejar {0}?"
     },
     "block_domain": {
       "cancel": "Cancel·lar",
       "confirm": "Bloc",
-      "title": "Confirmes que vols bloquejar {0}?"
+      "description": "Confirmes que vols bloquejar {0}?"
     },
     "common": {
       "cancel": "No",
@@ -123,27 +123,27 @@
     "delete_list": {
       "cancel": "Cancel·lar",
       "confirm": "Suprimeix",
-      "title": "Esteu segur que voleu suprimir la llista \"{0}\"?"
+      "description": "Esteu segur que voleu suprimir la llista \"{0}\"?"
     },
     "delete_posts": {
       "cancel": "Cancel·lar",
       "confirm": "Suprimeix",
-      "title": "Esteu segur que voleu suprimir aquesta publicació?"
+      "description": "Esteu segur que voleu suprimir aquesta publicació?"
     },
     "mute_account": {
       "cancel": "Cancel·lar",
       "confirm": "Silenciar",
-      "title": "Confirmes que vols silenciar {0}?"
+      "description": "Confirmes que vols silenciar {0}?"
     },
     "show_reblogs": {
       "cancel": "Cancel·lar",
       "confirm": "Espectacle",
-      "title": "Confirmes que vols mostrar els augments de {0}?"
+      "description": "Confirmes que vols mostrar els augments de {0}?"
     },
     "unfollow": {
       "cancel": "Cancel·lar",
       "confirm": "Deixa de seguir",
-      "title": "Estàs segur que vols deixar de seguir?"
+      "description": "Estàs segur que vols deixar de seguir?"
     }
   },
   "conversation": {

locales/de-DE.json

@@ -113,12 +113,12 @@
     "block_account": {
       "cancel": "Abbrechen",
       "confirm": "Blockieren",
-      "title": "Bist du sicher, dass du {0} blockieren möchtest?"
+      "description": "Bist du sicher, dass du {0} blockieren möchtest?"
     },
     "block_domain": {
       "cancel": "Abbrechen",
       "confirm": "Blockieren",
-      "title": "Bist du sicher, dass du {0} blockieren möchtest?"
+      "description": "Bist du sicher, dass du {0} blockieren möchtest?"
     },
     "common": {
       "cancel": "Abbrechen",
@@ -127,27 +127,27 @@
     "delete_list": {
       "cancel": "Abbrechen",
       "confirm": "Löschen",
-      "title": "Bist du sicher, dass du die Liste \"{0}\" löschen möchtest?"
+      "description": "Bist du sicher, dass du die Liste \"{0}\" löschen möchtest?"
     },
     "delete_posts": {
       "cancel": "Abbrechen",
       "confirm": "Löschen",
-      "title": "Möchtest du diesen Beitrag wirklich löschen?"
+      "description": "Möchtest du diesen Beitrag wirklich löschen?"
     },
     "mute_account": {
       "cancel": "Abbrechen",
       "confirm": "Stummschalten",
-      "title": "Bist du sicher, dass du {0} stummschalten möchtest?"
+      "description": "Bist du sicher, dass du {0} stummschalten möchtest?"
     },
     "show_reblogs": {
       "cancel": "Abbrechen",
       "confirm": "Anzeigen",
-      "title": "Bist du sicher, dass du Weiterleitungen von {0} anzeigen möchtest?"
+      "description": "Bist du sicher, dass du Weiterleitungen von {0} anzeigen möchtest?"
     },
     "unfollow": {
       "cancel": "Abbrechen",
       "confirm": "Entfolgen",
-      "title": "Bist du sicher, dass du entfolgen möchtest?"
+      "description": "Bist du sicher, dass du entfolgen möchtest?"
     }
   },
   "conversation": {

locales/en.json

@@ -120,12 +120,14 @@
     "block_account": {
       "cancel": "Cancel",
       "confirm": "Block",
-      "title": "Are you sure you want to block {0}?"
+      "description": "Are you sure you want to block {0}?",
+      "title": "Block account"
     },
     "block_domain": {
       "cancel": "Cancel",
       "confirm": "Block",
-      "title": "Are you sure you want to block {0}?"
+      "description": "Are you sure you want to block {0}?",
+      "title": "Block domain"
     },
     "common": {
       "cancel": "No",
@@ -134,27 +136,32 @@
     "delete_list": {
       "cancel": "Cancel",
       "confirm": "Delete",
-      "title": "Are you sure you want to delete the \"{0}\" list?"
+      "description": "Are you sure you want to delete the \"{0}\" list?",
+      "title": "Delete list"
     },
     "delete_posts": {
       "cancel": "Cancel",
       "confirm": "Delete",
-      "title": "Are you sure you want to delete this post?"
+      "description": "Are you sure you want to delete this post?",
+      "title": "Delete post"
     },
     "mute_account": {
       "cancel": "Cancel",
       "confirm": "Mute",
-      "title": "Are you sure you want to mute {0}?"
+      "description": "Are you sure you want to mute {0}?",
+      "title": "Mute account"
     },
     "show_reblogs": {
       "cancel": "Cancel",
       "confirm": "Show",
-      "title": "Are you sure you want to show boosts from {0}?"
+      "description": "Are you sure you want to show boosts from {0}?",
+      "title": "Show boosts"
     },
     "unfollow": {
       "cancel": "Cancel",
       "confirm": "Unfollow",
-      "title": "Are you sure you want to unfollow?"
+      "description": "Are you sure you want to unfollow {0}?",
+      "title": "Unfollow"
     }
   },
   "conversation": {