elk/components/report/ReportModal.vue

<script setup lang="ts">
import type { mastodon } from 'masto'
import { toggleBlockAccount, toggleFollowAccount, toggleMuteAccount, useRelationship } from '~~/composables/masto/relationship'

const { account, status } = defineProps<{
  account: mastodon.v1.Account
  status?: mastodon.v1.Status
}>()

const emit = defineEmits<{
  (event: 'close'): void
}>()

const { client } = useMasto()

const step = ref('selectCategory')
const serverRules = ref((await client.value.v2.instance.fetch()).rules || [])
const reportReason = ref('')
const selectedRuleIds = ref([])
const availableStatuses = ref(status ? [status] : [])
const selectedStatusIds = ref(status ? [status.id] : [])
const additionalComments = ref('')
const forwardReport = ref(false)

const dismissButton = ref<HTMLDivElement>()

loadStatuses() // Load statuses asynchronously ahead of time

function categoryChosen() {
  step.value = reportReason.value === 'dontlike' ? 'furtherActions' : 'selectStatuses'
  resetModal()
}

async function loadStatuses() {
  if (status) {
    // Load the 5 statuses before and after the reported status
    const prevStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
      maxId: status.id,
      limit: 5,
    })
    const nextStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
      minId: status.id,
      limit: 5,
    })
    availableStatuses.value = availableStatuses.value.concat(prevStatuses)
    availableStatuses.value = availableStatuses.value.concat(nextStatuses)
  }
  else {
    // Reporting an account directly
    // Load the 10 most recent statuses
    const mostRecentStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
      limit: 10,
    })
    availableStatuses.value = mostRecentStatuses
  }
  availableStatuses.value.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
}

async function submitReport() {
  await client.value.v1.reports.create({
    accountId: account.id,
    statusIds: selectedStatusIds.value,
    comment: additionalComments.value,
    forward: forwardReport.value,
    category: reportReason.value === 'spam' ? 'spam' : reportReason.value === 'violation' ? 'violation' : 'other',
    ruleIds: reportReason.value === 'violation' ? selectedRuleIds.value : null,
  })
  step.value = 'furtherActions'
  resetModal()
}

function unfollow() {
  emit('close')
  toggleFollowAccount(useRelationship(account).value!, account)
}

function mute() {
  emit('close')
  toggleMuteAccount(useRelationship(account).value!, account)
}

function block() {
  emit('close')
  toggleBlockAccount(useRelationship(account).value!, account)
}

function resetModal() {
  // TODO: extract this scroll/reset logic into ModalDialog element
  dismissButton.value?.scrollIntoView() // scroll to top
}
</script>

<template>
  <div my-8 px-3 sm:px-8 flex="~ col gap-4" relative>
    <h2 mxa text-xl>
      <i18n-t :keypath="reportReason === 'dontlike' ? 'report.limiting' : 'report.reporting'">
        <b text-primary>@{{ account.acct }}</b>
      </i18n-t>
    </h2>
    <button ref="dismissButton" btn-action-icon absolute top--8 right-0 m1 :aria-label="$t('action.close')" @click="emit('close')">
      <div i-ri:close-line />
    </button>

    <template v-if="step === 'selectCategory'">
      <h1 mxa text-4xl mb4>
        {{ status ? $t('report.whats_wrong_post') : $t('report.whats_wrong_account') }}
      </h1>
      <p text-xl>
        {{ $t('report.select_one') }}
      </p>

      <div>
        <input id="dontlike" v-model="reportReason" type="radio" value="dontlike">
        <label pl-2 for="dontlike" font-bold>{{ $t('report.dontlike') }}</label>
        <p pl-6>
          {{ $t('report.dontlike_desc') }}
        </p>
      </div>

      <div>
        <input id="spam" v-model="reportReason" type="radio" value="spam">
        <label pl-2 for="spam" font-bold>{{ $t('report.spam') }}</label>
        <p pl-6>
          {{ $t('report.spam_desc') }}
        </p>
      </div>

      <div v-if="serverRules.length > 0">
        <input id="violation" v-model="reportReason" type="radio" value="violation">
        <label pl-2 for="violation" font-bold>{{ $t('report.violation') }}</label>
        <p v-if="reportReason === 'violation'" pl-6 pt-2 text-primary font-bold>
          {{ $t('report.select_many') }}
        </p>
        <ul pl-6>
          <li v-for="rule in serverRules" :key="rule.id" pt-2>
            <input
              :id="rule.id"
              v-model="selectedRuleIds"
              type="checkbox"
              :value="rule.id"
              :disabled="reportReason !== 'violation'"
            >
            <label pl-2 :for="rule.id">{{ rule.text }}</label>
          </li>
        </ul>
      </div>

      <div>
        <input id="other" v-model="reportReason" type="radio" value="other">
        <label pl-2 for="other" font-bold>{{ $t('report.other') }}</label>
        <p pl-6>
          {{ $t('report.other_desc') }}
        </p>
      </div>

      <div v-if="reportReason && reportReason !== 'dontlike'">
        <h3 mt-8 mb-4 font-bold>
          {{ $t('report.anything_else') }}
        </h3>
        <textarea v-model="additionalComments" w-full h-20 p-3 border :placeholder="$t('report.additional_comments')" />
        <div v-if="getServerName(account) && getServerName(account) !== currentServer">
          <h3 mt-8 mb-2 font-bold>
            {{ $t('report.another_server') }}
          </h3>
          <p pb-1>
            {{ $t('report.forward_question') }}
          </p>
          <input id="forward" v-model="forwardReport" type="checkbox" value="rule.id">
          <label pl-2 for="forward"><b>{{ $t('report.forward', [getServerName(account)]) }}</b></label>
        </div>
      </div>

      <button
        btn-solid mxa mt-10
        :disabled="!reportReason || (reportReason === 'violation' && selectedRuleIds.length < 1)"
        @click="categoryChosen()"
      >
        {{ $t('action.next') }}
      </button>
    </template>

    <template v-else-if="step === 'selectStatuses'">
      <h1 mxa text-4xl mb4>
        {{ status ? $t('report.select_posts_other') : $t('report.select_posts') }}
      </h1>
      <p text-primary font-bold>
        {{ $t('report.select_many') }}
      </p>
      <table>
        <tr v-for="availableStatus in availableStatuses" :key="availableStatus.id">
          <td>
            <input
              :id="availableStatus.id"
              v-model="selectedStatusIds"
              type="checkbox"
              :value="availableStatus.id"
            >
          </td>
          <td>
            <label :for="availableStatus.id">
              <StatusCard :status="availableStatus" :actions="false" pointer-events-none />
            </label>
          </td>
        </tr>
      </table>
      <button
        btn-solid mxa mt-5
        @click="submitReport()"
      >
        {{ $t('report.submit') }}
      </button>
    </template>

    <template v-else-if="step === 'furtherActions'">
      <h1 mxa text-4xl mb4>
        {{ reportReason === 'dontlike' ? $t('report.further_actions.limit.title') : $t('report.further_actions.report.title') }}
      </h1>
      <p text-xl>
        {{ reportReason === 'dontlike' ? $t('report.further_actions.limit.description') : $t('report.further_actions.report.description') }}
      </p>

      <div v-if="useRelationship(account).value?.following">
        <button btn-outline mxa mt-4 mb-2 @click="unfollow()">
          <i18n-t keypath="menu.unfollow_account">
            <b>@{{ account.acct }}</b>
          </i18n-t>
        </button><br>
        {{ $t('report.unfollow_desc') }}
      </div>
      <div v-if="!useRelationship(account).value?.muting">
        <button btn-outline mxa mt-4 mb-2 @click="mute()">
          <i18n-t keypath="menu.mute_account">
            <b>@{{ account.acct }}</b>
          </i18n-t>
        </button><br>
        {{ $t('report.mute_desc') }}
      </div>
      <div v-if="!useRelationship(account).value?.blocking">
        <button btn-outline mxa mt-4 mb-2 @click="block()">
          <i18n-t keypath="menu.block_account">
            <b>@{{ account.acct }}</b>
          </i18n-t>
        </button><br>
        {{ $t('report.block_desc') }}
      </div>
      <button btn-solid mxa mt-10 @click="emit('close')">
        {{ $t('action.done') }}
      </button>
    </template>
  </div>
</template>

<style>
tr {
  border-bottom-width: 1px;
}

tr:last-child {
  border: none;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>