feat: allow to set mute duration and notifications mute option (#2665)

components/account/AccountMoreButton.vue

@@ -25,13 +25,16 @@ function shareAccount() {
 }
 
 async function toggleReblogs() {
-  if (!relationship.value!.showingReblogs && await openConfirmDialog({
-    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')
-    return
+  if (!relationship.value!.showingReblogs) {
+    const dialogChoice = await openConfirmDialog({
+      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'),
+    })
+    if (dialogChoice.choice !== 'confirm')
+      return
+  }
 
   const showingReblogs = !relationship.value?.showingReblogs
   relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })

components/common/CommonCheckbox.vue

@@ -4,6 +4,8 @@ defineProps<{
   hover?: boolean
   iconChecked?: string
   iconUnchecked?: string
+  checkedIconColor?: string
+  prependCheckbox?: boolean
 }>()
 const modelValue = defineModel<boolean | null>()
 </script>
@@ -15,9 +17,12 @@ const modelValue = defineModel<boolean | null>()
     v-bind="$attrs"
     @click.prevent="modelValue = !modelValue"
   >
-    <span v-if="label" flex-1 ms-2 pointer-events-none>{{ label }}</span>
+    <span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
     <span
-      :class="modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line')"
+      :class="[
+        modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
+        modelValue && checkedIconColor,
+      ]"
       text-lg
       aria-hidden="true"
     />
@@ -26,6 +31,7 @@ const modelValue = defineModel<boolean | null>()
       type="checkbox"
       sr-only
     >
+    <span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
   </label>
 </template>
 

components/list/ListEntry.vue

@@ -68,7 +68,7 @@ async function removeList() {
   actionError.value = undefined
   await nextTick()
 
-  if (confirmDelete === 'confirm') {
+  if (confirmDelete.choice === 'confirm') {
     await nextTick()
     try {
       await client.v1.lists.$select(list.value.id).remove()

components/modal/DurationPicker.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const model = defineModel<number>()
+const isValid = defineModel<boolean>('isValid')
+
+const days = ref<number | ''>(0)
+const hours = ref<number | ''>(1)
+const minutes = ref<number | ''>(0)
+
+watchEffect(() => {
+  if (days.value === '' || hours.value === '' || minutes.value === '') {
+    isValid.value = false
+    return
+  }
+
+  const duration
+      = days.value * 24 * 60 * 60
+      + hours.value * 60 * 60
+      + minutes.value * 60
+
+  if (duration <= 0) {
+    isValid.value = false
+    return
+  }
+
+  isValid.value = true
+  model.value = duration
+})
+</script>
+
+<template>
+  <div flex flex-grow-0 gap-2>
+    <label flex items-center gap-2>
+      <input v-model="days" type="number" min="0" max="1999" input-base :class="!isValid ? 'input-error' : null">
+      {{ $t('confirm.mute_account.days', days === '' ? 0 : days) }}
+    </label>
+    <label flex items-center gap-2>
+      <input v-model="hours" type="number" min="0" max="24" input-base :class="!isValid ? 'input-error' : null">
+      {{ $t('confirm.mute_account.hours', hours === '' ? 0 : hours) }}
+    </label>
+    <label flex items-center gap-2>
+      <input v-model="minutes" type="number" min="0" max="59" step="5" input-base :class="!isValid ? 'input-error' : null">
+      {{ $t('confirm.mute_account.minute', minutes === '' ? 0 : minutes) }}
+    </label>
+  </div>
+</template>

components/modal/ModalConfirm.vue

@@ -1,11 +1,34 @@
 <script setup lang="ts">
-import type { ConfirmDialogChoice, ConfirmDialogLabel } from '~/types'
+import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
+import DurationPicker from '~/components/modal/DurationPicker.vue'
 
-defineProps<ConfirmDialogLabel>()
+const props = defineProps<ConfirmDialogOptions>()
 
 const emit = defineEmits<{
   (evt: 'choice', choice: ConfirmDialogChoice): void
 }>()
+
+const hasDuration = ref(false)
+const isValidDuration = ref(true)
+const duration = ref(60 * 60) // default to 1 hour
+const shouldMuteNotifications = ref(true)
+const isMute = computed(() => props.extraOptionType === 'mute')
+
+function handleChoice(choice: ConfirmDialogChoice['choice']) {
+  const dialogChoice = {
+    choice,
+    ...isMute && {
+      extraOptions: {
+        mute: {
+          duration: hasDuration.value ? duration.value : 0,
+          notifications: shouldMuteNotifications.value,
+        },
+      },
+    },
+  }
+
+  emit('choice', dialogChoice)
+}
 </script>
 
 <template>
@@ -16,11 +39,17 @@ const emit = defineEmits<{
     <div v-if="description">
       {{ description }}
     </div>
+    <div v-if="isMute" flex-col flex gap-4>
+      <CommonCheckbox v-model="hasDuration" :label="$t('confirm.mute_account.specify_duration')" prepend-checkbox checked-icon-color="text-primary" />
+      <DurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
+      <CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
+    </div>
+
     <div flex justify-end gap-2>
-      <button btn-text @click="emit('choice', 'cancel')">
+      <button btn-text @click="handleChoice('cancel')">
         {{ cancel || $t('confirm.common.cancel') }}
       </button>
-      <button btn-solid @click="emit('choice', 'confirm')">
+      <button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
         {{ confirm || $t('confirm.common.confirm') }}
       </button>
     </div>

components/status/StatusActionsMore.vue

@@ -62,12 +62,13 @@ async function shareLink(status: mastodon.v1.Status) {
 }
 
 async function deleteStatus() {
-  if (await openConfirmDialog({
+  const confirmDelete = 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')
+  })
+  if (confirmDelete.choice !== 'confirm')
     return
 
   removeCachedStatus(status.value.id)
@@ -80,12 +81,13 @@ async function deleteStatus() {
 }
 
 async function deleteAndRedraft() {
-  if (await openConfirmDialog({
+  const confirmDelete = 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')
+  })
+  if (confirmDelete.choice !== 'confirm')
     return
 
   if (import.meta.dev) {

composables/dialog.ts

@@ -1,9 +1,9 @@
 import type { mastodon } from 'masto'
-import type { ConfirmDialogChoice, ConfirmDialogLabel, Draft, ErrorDialogData } from '~/types'
+import type { ConfirmDialogChoice, ConfirmDialogOptions, Draft, ErrorDialogData } from '~/types'
 import { STORAGE_KEY_FIRST_VISIT } from '~/constants'
 
 export const confirmDialogChoice = ref<ConfirmDialogChoice>()
-export const confirmDialogLabel = ref<ConfirmDialogLabel>()
+export const confirmDialogLabel = ref<ConfirmDialogOptions>()
 export const errorDialogData = ref<ErrorDialogData>()
 
 export const mediaPreviewList = ref<mastodon.v1.MediaAttachment[]>([])
@@ -39,7 +39,7 @@ export function openSigninDialog() {
   isSigninDialogOpen.value = true
 }
 
-export async function openConfirmDialog(label: ConfirmDialogLabel | string): Promise<ConfirmDialogChoice> {
+export async function openConfirmDialog(label: ConfirmDialogOptions | string): Promise<ConfirmDialogChoice> {
   confirmDialogLabel.value = typeof label === 'string' ? { title: label } : label
   confirmDialogChoice.value = undefined
   isConfirmDialogOpen.value = true

composables/masto/relationship.ts

@@ -39,12 +39,13 @@ export async function toggleFollowAccount(relationship: mastodon.v1.Relationship
   const unfollow = relationship!.following || relationship!.requested
 
   if (unfollow) {
-    if (await openConfirmDialog({
+    const confirmUnfollow = 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')
+    })
+    if (confirmUnfollow.choice !== 'confirm')
       return
   }
 
@@ -66,18 +67,28 @@ export async function toggleMuteAccount(relationship: mastodon.v1.Relationship,
   const { client } = useMasto()
   const i18n = useNuxtApp().$i18n
 
-  if (!relationship!.muting && await openConfirmDialog({
-    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')
-    return
+  let duration = 0 // default 0 == indefinite
+  let notifications = true // default true = mute notifications
+  if (!relationship!.muting) {
+    const confirmMute = await openConfirmDialog({
+      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'),
+      extraOptionType: 'mute',
+    })
+    if (confirmMute.choice !== 'confirm')
+      return
+
+    duration = confirmMute.extraOptions!.mute.duration
+    notifications = confirmMute.extraOptions!.mute.notifications
+  }
 
   relationship!.muting = !relationship!.muting
   relationship = relationship!.muting
     ? await client.value.v1.accounts.$select(account.id).mute({
-      // TODO support more options
+      duration,
+      notifications,
     })
     : await client.value.v1.accounts.$select(account.id).unmute()
 }
@@ -86,13 +97,16 @@ export async function toggleBlockAccount(relationship: mastodon.v1.Relationship,
   const { client } = useMasto()
   const i18n = useNuxtApp().$i18n
 
-  if (!relationship!.blocking && await openConfirmDialog({
-    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')
-    return
+  if (!relationship!.blocking) {
+    const confirmBlock = await openConfirmDialog({
+      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'),
+    })
+    if (confirmBlock.choice !== 'confirm')
+      return
+  }
 
   relationship!.blocking = !relationship!.blocking
   relationship = await client.value.v1.accounts.$select(account.id)[relationship!.blocking ? 'block' : 'unblock']()
@@ -102,13 +116,16 @@ export async function toggleBlockDomain(relationship: mastodon.v1.Relationship,
   const { client } = useMasto()
   const i18n = useNuxtApp().$i18n
 
-  if (!relationship!.domainBlocking && await openConfirmDialog({
-    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')
-    return
+  if (!relationship!.domainBlocking) {
+    const confirmDomainBlock = await openConfirmDialog({
+      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'),
+    })
+    if (confirmDomainBlock.choice !== 'confirm')
+      return
+  }
 
   relationship!.domainBlocking = !relationship!.domainBlocking
   await client.value.v1.domainBlocks[relationship!.domainBlocking ? 'create' : 'remove']({ domain: getServerName(account) })

locales/en.json

@@ -149,7 +149,12 @@
     "mute_account": {
       "cancel": "Cancel",
       "confirm": "Mute",
+      "days": "days|day|days",
       "description": "Are you sure you want to mute {0}?",
+      "hours": "hours|hour|hours",
+      "minute": "minutes|minute|minutes",
+      "notifications": "Mute notifications",
+      "specify_duration": "Specify mute duration",
       "title": "Mute account"
     },
     "show_reblogs": {

types/index.ts

@@ -56,13 +56,22 @@ export interface Draft {
 
 export type DraftMap = Record<string, Draft>
 
-export interface ConfirmDialogLabel {
+export interface ConfirmDialogOptions {
   title: string
   description?: string
   confirm?: string
   cancel?: string
+  extraOptionType?: 'mute'
+}
+export interface ConfirmDialogChoice {
+  choice: 'confirm' | 'cancel'
+  extraOptions?: {
+    mute: {
+      duration: number
+      notifications: boolean
+    }
+  }
 }
-export type ConfirmDialogChoice = 'confirm' | 'cancel'
 
 export interface CommonRouteTabOption {
   to: RouteLocationRaw