Resolve #6087

src/client/components/abuse-report-window.vue

@@ -0,0 +1,85 @@
+<template>
+<XWindow ref="window" :initial-width="400" :initial-height="500" :can-resize="true" @closed="$emit('closed')">
+	<template #header>
+		<Fa :icon="faExclamationCircle" style="margin-right: 0.5em;"/>
+		<i18n-t keypath="reportAbuseOf" tag="span">
+			<template #name>
+				<b><MkAcct :user="user"/></b>
+			</template>
+		</i18n-t>
+	</template>
+	<div class="dpvffvvy">
+		<div class="_section">
+			<div class="_content">
+				<MkTextarea v-model:value="comment">
+					<span>{{ $t('details') }}</span>
+					<template #desc>{{ $t('fillAbuseReportDescription') }}</template>
+				</MkTextarea>
+			</div>
+		</div>
+		<div class="_section">
+			<div class="_content">
+				<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $t('send') }}</MkButton>
+			</div>
+		</div>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw } from 'vue';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import XWindow from '@/components/ui/window.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XWindow,
+		MkTextarea,
+		MkButton,
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true,
+		},
+		initialComment: {
+			type: String,
+			required: false,
+		},
+	},
+
+	emits: ['closed'],
+
+	data() {
+		return {
+			comment: this.initialComment || '',
+			faExclamationCircle,
+		};
+	},
+
+	methods: {
+		send() {
+			os.apiWithDialog('users/report-abuse', {
+				userId: this.user.id,
+				comment: this.comment,
+			}, undefined, res => {
+				os.dialog({
+					type: 'success',
+					text: this.$t('abuseReported')
+				});
+				this.$refs.window.close();
+			});
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.dpvffvvy {
+	--section-padding: 16px;
+}
+</style>

src/client/components/note.vue

@@ -101,7 +101,7 @@
 
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent, markRaw, ref } from 'vue';
-import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
+import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
 import { sum, unique } from '../../prelude/array';
@@ -637,6 +637,21 @@ export default defineComponent({
 					}]
 					: []
 				),
+				...(this.appearNote.userId != this.$store.state.i.id ? [
+					null,
+					{
+						icon: faExclamationCircle,
+						text: this.$t('reportAbuse'),
+						action: () => {
+							const u = `${url}/notes/${this.appearNote.id}`;
+							os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), {
+								user: this.appearNote.user,
+								initialComment: `Note: ${u}\n-----\n`
+							}, {}, 'closed');
+						}
+					}]
+					: []
+				),
 				...(this.appearNote.userId == this.$store.state.i.id || this.$store.state.i.isModerator || this.$store.state.i.isAdmin ? [
 					null,
 					this.appearNote.userId == this.$store.state.i.id ? {

src/client/components/page-window.vue

@@ -7,7 +7,7 @@
 		<button class="_button" @click="expand" v-tooltip="$t('showInPage')"><Fa :icon="faExpandAlt"/></button>
 		<button class="_button" @click="popout" v-tooltip="$t('popout')"><Fa :icon="faExternalLinkAlt"/></button>
 	</template>
-	<div style="min-height: 100%; background: var(--bg);">
+	<div class="yrolvcoq" style="min-height: 100%; background: var(--bg);">
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </XWindow>
@@ -84,3 +84,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.yrolvcoq {
+	--section-padding: 16px;
+}
+</style>

src/client/components/sidebar.vue

@@ -46,7 +46,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream } from '@fortawesome/free-solid-svg-icons';
+import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { host, instanceName } from '@/config';
 import { search } from '@/scripts/search';
@@ -217,6 +217,11 @@ export default defineComponent({
 				text: this.$t('announcements'),
 				to: '/instance/announcements',
 				icon: faBroadcastTower,
+			}, {
+				type: 'link',
+				text: this.$t('abuseReports'),
+				to: '/instance/abuses',
+				icon: faExclamationCircle,
 			}, {
 				type: 'link',
 				text: this.$t('logs'),

src/client/components/ui/window.vue

@@ -7,7 +7,9 @@
 				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
 					<slot name="header"></slot>
 				</span>
-				<slot name="buttons"></slot>
+				<slot name="buttons">
+					<button class="_button" style="pointer-events: none;"></button>
+				</slot>
 			</div>
 			<div class="body" v-if="padding">
 				<div class="_section">
@@ -371,8 +373,6 @@ export default defineComponent({
 		width: 100%;
     height: 100%;
 
-		--section-padding: 16px;
-
 		> .header {
 			$height: 50px;
 			display: flex;
@@ -380,7 +380,6 @@ export default defineComponent({
 			z-index: 1;
 			flex-shrink: 0;
 			box-shadow: 0px 1px var(--divider);
-			cursor: move;
 			user-select: none;
 			height: $height;
 
@@ -400,6 +399,8 @@ export default defineComponent({
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
+				text-align: center;
+				cursor: move;
 			}
 		}