enhance: Forward report (#8001)

* implement sending AP Flag object

Optionally allow a user to select to forward a report about a remote
user to the other instance. This is added in a backwards-compatible way.

* add locale string

* forward report only for moderators

* add switch to moderator UI to forward report

* fix report note url

* return forwarded status from API

apparently forgot to carry this over from my testing environment

* object in Flag activity has to be an array

For correct interoperability with Pleroma the "object" property of the Flag
activity has to be an array.

This array will in the future also hold the link to respective notes, so it
makes sense to correct this on our side.

* Update get-note-menu.ts

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

1 files changed, 102 insertions, 0 deletions

diff --git a/packages/client/src/components/abuse-report.vue b/packages/client/src/components/abuse-report.vue
new file mode 100644
index 0000000000..b67cef209b
--- /dev/null
+++ b/packages/client/src/components/abuse-report.vue
@@ -0,0 +1,102 @@
+<template>
+<div class="bcekxzvu _card _gap">
+	<div class="_content target">
+		<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
+		<MkA class="info" :to="userPage(report.targetUser)" v-user-preview="report.targetUserId">
+			<MkUserName class="name" :user="report.targetUser"/>
+			<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+		</MkA>
+	</div>
+	<div class="_content">
+		<div>
+			<Mfm :text="report.comment"/>
+		</div>
+		<hr/>
+		<div>{{ $ts.reporter }}: <MkAcct :user="report.reporter"/></div>
+		<div v-if="report.assignee">
+			{{ $ts.moderator }}:
+			<MkAcct :user="report.assignee"/>
+		</div>
+		<div><MkTime :time="report.createdAt"/></div>
+	</div>
+	<div class="_footer">
+		<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
+			{{ $ts.forwardReport }}
+			<template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
+		</MkSwitch>
+		<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import MkButton from '@/components/ui/button.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import { acct, userPage } from '@/filters/user';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MkSwitch,
+	},
+
+	emits: ['resolved'],
+
+	props: {
+		report: {
+			type: Object,
+			required: true,
+		}
+	}
+
+	data() {
+		return {
+			forward: this.report.forwarded,
+		};
+	}
+
+	methods: {
+		acct,
+		userPage,
+
+		resolve() {
+			os.apiWithDialog('admin/resolve-abuse-user-report', {
+				forward: this.forward,
+				reportId: this.report.id,
+			}).then(() => {
+				this.$emit('resolved', this.report.id);
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.bcekxzvu {
+	> .target {
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		text-align: left;
+		align-items: center;
+
+		> .avatar {
+			width: 42px;
+			height: 42px;
+		}
+
+		> .info {
+			margin-left: 0.3em;
+			padding: 0 8px;
+			flex: 1;
+
+			> .name {
+				font-weight: bold;
+			}
+		}
+	}
+}
+</style>