2023-07-27 14:31:52 +09:00
|
|
|
<!--
|
|
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
2020-10-17 20:12:00 +09:00
|
|
|
<template>
|
2023-01-06 13:40:17 +09:00
|
|
|
<div class="_gaps_m">
|
2023-10-04 20:03:52 +09:00
|
|
|
<MkFolder>
|
|
|
|
<template #icon><i class="ti ti-message-off"></i></template>
|
|
|
|
<template #label>{{ i18n.ts.wordMute }}</template>
|
|
|
|
|
2023-11-23 18:56:20 +09:00
|
|
|
<XWordMute :muted="$i!.mutedWords" @save="saveMutedWords"/>
|
|
|
|
</MkFolder>
|
|
|
|
|
|
|
|
<MkFolder>
|
|
|
|
<template #icon><i class="ti ti-message-off"></i></template>
|
|
|
|
<template #label>{{ i18n.ts.hardWordMute }}</template>
|
|
|
|
|
|
|
|
<XWordMute :muted="$i!.hardMutedWords" @save="saveHardMutedWords"/>
|
2023-10-04 20:03:52 +09:00
|
|
|
</MkFolder>
|
|
|
|
|
|
|
|
<MkFolder>
|
|
|
|
<template #icon><i class="ti ti-planet-off"></i></template>
|
|
|
|
<template #label>{{ i18n.ts.instanceMute }}</template>
|
|
|
|
|
|
|
|
<XInstanceMute/>
|
|
|
|
</MkFolder>
|
|
|
|
|
2023-10-03 18:33:22 +09:00
|
|
|
<MkFolder>
|
|
|
|
<template #icon><i class="ti ti-repeat-off"></i></template>
|
|
|
|
<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
|
2023-03-08 08:56:09 +09:00
|
|
|
|
|
|
|
<MkPagination :pagination="renoteMutingPagination">
|
|
|
|
<template #empty>
|
|
|
|
<div class="_fullinfo">
|
2023-06-09 14:00:53 +09:00
|
|
|
<img :src="infoImageUrl" class="_ghost"/>
|
2023-03-08 08:56:09 +09:00
|
|
|
<div>{{ i18n.ts.noUsers }}</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #default="{ items }">
|
|
|
|
<div class="_gaps_s">
|
|
|
|
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
|
|
|
|
<div :class="$style.userItemMain">
|
2023-08-13 21:02:25 +09:00
|
|
|
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
|
2023-03-08 08:56:09 +09:00
|
|
|
<MkUserCardMini :user="item.mutee"/>
|
|
|
|
</MkA>
|
|
|
|
<button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
|
|
|
|
<button class="_button" :class="$style.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button>
|
|
|
|
</div>
|
|
|
|
<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
|
|
|
|
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</MkPagination>
|
2023-10-03 18:33:22 +09:00
|
|
|
</MkFolder>
|
|
|
|
|
|
|
|
<MkFolder>
|
|
|
|
<template #icon><i class="ti ti-eye-off"></i></template>
|
|
|
|
<template #label>{{ i18n.ts.mutedUsers }}</template>
|
2023-03-08 08:56:09 +09:00
|
|
|
|
2023-03-07 09:37:02 +09:00
|
|
|
<MkPagination :pagination="mutingPagination">
|
|
|
|
<template #empty>
|
|
|
|
<div class="_fullinfo">
|
2023-06-09 14:00:53 +09:00
|
|
|
<img :src="infoImageUrl" class="_ghost"/>
|
2023-03-07 09:37:02 +09:00
|
|
|
<div>{{ i18n.ts.noUsers }}</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #default="{ items }">
|
|
|
|
<div class="_gaps_s">
|
|
|
|
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
|
|
|
|
<div :class="$style.userItemMain">
|
2023-08-13 21:02:25 +09:00
|
|
|
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
|
2023-03-07 09:37:02 +09:00
|
|
|
<MkUserCardMini :user="item.mutee"/>
|
|
|
|
</MkA>
|
|
|
|
<button class="_button" :class="$style.userToggle" @click="toggleMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
|
|
|
|
<button class="_button" :class="$style.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button>
|
|
|
|
</div>
|
|
|
|
<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
|
|
|
|
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
|
2023-07-20 10:54:41 +09:00
|
|
|
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
|
2023-03-07 09:37:02 +09:00
|
|
|
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-17 20:12:00 +09:00
|
|
|
</template>
|
|
|
|
</MkPagination>
|
2023-10-03 18:33:22 +09:00
|
|
|
</MkFolder>
|
|
|
|
|
|
|
|
<MkFolder>
|
|
|
|
<template #icon><i class="ti ti-ban"></i></template>
|
|
|
|
<template #label>{{ i18n.ts.blockedUsers }}</template>
|
2023-03-08 08:56:09 +09:00
|
|
|
|
2023-03-07 09:37:02 +09:00
|
|
|
<MkPagination :pagination="blockingPagination">
|
|
|
|
<template #empty>
|
|
|
|
<div class="_fullinfo">
|
2023-06-09 14:00:53 +09:00
|
|
|
<img :src="infoImageUrl" class="_ghost"/>
|
2023-03-07 09:37:02 +09:00
|
|
|
<div>{{ i18n.ts.noUsers }}</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #default="{ items }">
|
|
|
|
<div class="_gaps_s">
|
|
|
|
<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
|
|
|
|
<div :class="$style.userItemMain">
|
2023-08-13 21:02:25 +09:00
|
|
|
<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
|
2023-03-07 09:37:02 +09:00
|
|
|
<MkUserCardMini :user="item.blockee"/>
|
|
|
|
</MkA>
|
|
|
|
<button class="_button" :class="$style.userToggle" @click="toggleBlockItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
|
|
|
|
<button class="_button" :class="$style.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button>
|
|
|
|
</div>
|
|
|
|
<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
|
|
|
|
<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
|
2023-07-20 10:54:41 +09:00
|
|
|
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
|
2023-03-07 09:37:02 +09:00
|
|
|
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-17 20:12:00 +09:00
|
|
|
</template>
|
|
|
|
</MkPagination>
|
2023-10-03 18:33:22 +09:00
|
|
|
</MkFolder>
|
2022-01-04 17:58:53 +09:00
|
|
|
</div>
|
2020-10-17 20:12:00 +09:00
|
|
|
</template>
|
|
|
|
|
2022-01-15 17:58:35 +09:00
|
|
|
<script lang="ts" setup>
|
2023-12-07 14:42:09 +09:00
|
|
|
import { ref, computed } from 'vue';
|
2023-10-04 20:03:52 +09:00
|
|
|
import XInstanceMute from './mute-block.instance-mute.vue';
|
|
|
|
import XWordMute from './mute-block.word-mute.vue';
|
2023-12-27 15:55:09 +09:00
|
|
|
import MkPagination from '@/components/MkPagination.vue';
|
2023-09-19 16:37:43 +09:00
|
|
|
import { userPage } from '@/filters/user.js';
|
|
|
|
import { i18n } from '@/i18n.js';
|
|
|
|
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
2023-03-07 09:37:02 +09:00
|
|
|
import MkUserCardMini from '@/components/MkUserCardMini.vue';
|
2023-09-19 16:37:43 +09:00
|
|
|
import * as os from '@/os.js';
|
|
|
|
import { infoImageUrl } from '@/instance.js';
|
2023-11-23 18:56:20 +09:00
|
|
|
import { $i } from '@/account.js';
|
2023-10-03 18:33:22 +09:00
|
|
|
import MkFolder from '@/components/MkFolder.vue';
|
2023-03-08 08:56:09 +09:00
|
|
|
|
|
|
|
const renoteMutingPagination = {
|
|
|
|
endpoint: 'renote-mute/list' as const,
|
|
|
|
limit: 10,
|
2023-12-27 15:55:09 +09:00
|
|
|
};
|
2020-10-17 20:12:00 +09:00
|
|
|
|
2022-01-15 17:58:35 +09:00
|
|
|
const mutingPagination = {
|
|
|
|
endpoint: 'mute/list' as const,
|
|
|
|
limit: 10,
|
2023-12-27 15:55:09 +09:00
|
|
|
};
|
2020-10-17 20:12:00 +09:00
|
|
|
|
2022-01-15 17:58:35 +09:00
|
|
|
const blockingPagination = {
|
|
|
|
endpoint: 'blocking/list' as const,
|
|
|
|
limit: 10,
|
2023-12-27 15:55:09 +09:00
|
|
|
};
|
2020-10-17 20:12:00 +09:00
|
|
|
|
2023-12-07 14:42:09 +09:00
|
|
|
const expandedRenoteMuteItems = ref([]);
|
|
|
|
const expandedMuteItems = ref([]);
|
|
|
|
const expandedBlockItems = ref([]);
|
2023-03-07 09:37:02 +09:00
|
|
|
|
2023-03-08 08:56:09 +09:00
|
|
|
async function unrenoteMute(user, ev) {
|
|
|
|
os.popupMenu([{
|
|
|
|
text: i18n.ts.renoteUnmute,
|
|
|
|
icon: 'ti ti-x',
|
|
|
|
action: async () => {
|
|
|
|
await os.apiWithDialog('renote-mute/delete', { userId: user.id });
|
|
|
|
//role.users = role.users.filter(u => u.id !== user.id);
|
|
|
|
},
|
|
|
|
}], ev.currentTarget ?? ev.target);
|
|
|
|
}
|
|
|
|
|
2023-03-07 09:37:02 +09:00
|
|
|
async function unmute(user, ev) {
|
|
|
|
os.popupMenu([{
|
|
|
|
text: i18n.ts.unmute,
|
|
|
|
icon: 'ti ti-x',
|
|
|
|
action: async () => {
|
|
|
|
await os.apiWithDialog('mute/delete', { userId: user.id });
|
|
|
|
//role.users = role.users.filter(u => u.id !== user.id);
|
|
|
|
},
|
|
|
|
}], ev.currentTarget ?? ev.target);
|
|
|
|
}
|
|
|
|
|
|
|
|
async function unblock(user, ev) {
|
|
|
|
os.popupMenu([{
|
|
|
|
text: i18n.ts.unblock,
|
|
|
|
icon: 'ti ti-x',
|
|
|
|
action: async () => {
|
|
|
|
await os.apiWithDialog('blocking/delete', { userId: user.id });
|
|
|
|
//role.users = role.users.filter(u => u.id !== user.id);
|
|
|
|
},
|
|
|
|
}], ev.currentTarget ?? ev.target);
|
|
|
|
}
|
|
|
|
|
2023-03-08 08:56:09 +09:00
|
|
|
async function toggleRenoteMuteItem(item) {
|
2023-12-07 14:42:09 +09:00
|
|
|
if (expandedRenoteMuteItems.value.includes(item.id)) {
|
|
|
|
expandedRenoteMuteItems.value = expandedRenoteMuteItems.value.filter(x => x !== item.id);
|
2023-03-08 08:56:09 +09:00
|
|
|
} else {
|
2023-12-07 14:42:09 +09:00
|
|
|
expandedRenoteMuteItems.value.push(item.id);
|
2023-03-08 08:56:09 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-03-07 09:37:02 +09:00
|
|
|
async function toggleMuteItem(item) {
|
2023-12-07 14:42:09 +09:00
|
|
|
if (expandedMuteItems.value.includes(item.id)) {
|
|
|
|
expandedMuteItems.value = expandedMuteItems.value.filter(x => x !== item.id);
|
2023-03-07 09:37:02 +09:00
|
|
|
} else {
|
2023-12-07 14:42:09 +09:00
|
|
|
expandedMuteItems.value.push(item.id);
|
2023-03-07 09:37:02 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function toggleBlockItem(item) {
|
2023-12-07 14:42:09 +09:00
|
|
|
if (expandedBlockItems.value.includes(item.id)) {
|
|
|
|
expandedBlockItems.value = expandedBlockItems.value.filter(x => x !== item.id);
|
2023-03-07 09:37:02 +09:00
|
|
|
} else {
|
2023-12-07 14:42:09 +09:00
|
|
|
expandedBlockItems.value.push(item.id);
|
2023-03-07 09:37:02 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-23 18:56:20 +09:00
|
|
|
async function saveMutedWords(mutedWords: (string | string[])[]) {
|
|
|
|
await os.api('i/update', { mutedWords });
|
|
|
|
}
|
|
|
|
|
|
|
|
async function saveHardMutedWords(hardMutedWords: (string | string[])[]) {
|
|
|
|
await os.api('i/update', { hardMutedWords });
|
|
|
|
}
|
|
|
|
|
2023-12-07 14:42:09 +09:00
|
|
|
const headerActions = computed(() => []);
|
2022-06-20 17:38:49 +09:00
|
|
|
|
2023-12-07 14:42:09 +09:00
|
|
|
const headerTabs = computed(() => []);
|
2022-06-20 17:38:49 +09:00
|
|
|
|
|
|
|
definePageMetadata({
|
|
|
|
title: i18n.ts.muteAndBlock,
|
2022-12-19 19:01:30 +09:00
|
|
|
icon: 'ti ti-ban',
|
2020-10-17 20:12:00 +09:00
|
|
|
});
|
|
|
|
</script>
|
2023-03-07 09:37:02 +09:00
|
|
|
|
|
|
|
<style lang="scss" module>
|
|
|
|
.userItemMain {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
.userItemSub {
|
|
|
|
padding: 6px 12px;
|
|
|
|
font-size: 85%;
|
|
|
|
color: var(--fgTransparentWeak);
|
|
|
|
}
|
|
|
|
|
|
|
|
.userItemMainBody {
|
|
|
|
flex: 1;
|
|
|
|
min-width: 0;
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.userToggle,
|
|
|
|
.remove {
|
|
|
|
width: 32px;
|
|
|
|
height: 32px;
|
|
|
|
align-self: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.chevron {
|
|
|
|
display: block;
|
|
|
|
transition: transform 0.1s ease-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
.userItem.userItemOpend {
|
|
|
|
.chevron {
|
|
|
|
transform: rotateX(180deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|