merge: Instance admin UX improvements (!1059)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1059

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
Hazelnoot 2025-06-01 17:59:16 +00:00
commit 8894578b2a
13 changed files with 649 additions and 237 deletions

48
locales/index.d.ts vendored
View file

@ -13137,6 +13137,54 @@ export interface Locale extends ILocale {
* Timeout in milliseconds for translation API requests.
*/
"translationTimeoutCaption": string;
/**
* Following (Pub)
*/
"followingPub": string;
/**
* Followers (Sub)
*/
"followersSub": string;
/**
* Well-known resources
*/
"wellKnownResources": string;
/**
* Last posted: {at}
*/
"lastPosted": ParameterizedString<"at">;
/**
* NSFW
*/
"nsfw": string;
/**
* Raw
*/
"raw": string;
/**
* CW
*/
"cw": string;
/**
* Media Silenced
*/
"mediaSilenced": string;
/**
* Bubble
*/
"bubble": string;
/**
* Verified
*/
"verified": string;
/**
* Not Verified
*/
"notVerified": string;
/**
* Hibernated
*/
"hibernated": string;
}
declare const locales: {
[lang: string]: Locale;

View file

@ -94,6 +94,15 @@ export class UtilityService {
return this.meta.bubbleInstances.some(x => `.${host.toLowerCase()}`.endsWith(`.${x}`));
}
@bindThis
public isBubbledHost(host: string | null): boolean {
if (host == null) return false;
// TODO remove null conditional after merging lab/persisted-instance-blocks
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
return this.meta.bubbleInstances?.includes(host);
}
@bindThis
public concatNoteContentsForKeyWordCheck(content: {
cw?: string | null;

View file

@ -62,6 +62,7 @@ export class InstanceEntityService {
rejectReports: instance.rejectReports,
rejectQuotes: instance.rejectQuotes,
moderationNote: iAmModerator ? instance.moderationNote : null,
isBubbled: this.utilityService.isBubbledHost(instance.host),
};
}

View file

@ -135,5 +135,9 @@ export const packedFederationInstanceSchema = {
type: 'string',
optional: true, nullable: true,
},
isBubbled: {
type: 'boolean',
optional: false, nullable: false,
},
},
} as const;

View file

@ -122,6 +122,10 @@ export const meta = {
type: 'boolean',
optional: false, nullable: false,
},
isAdministrator: {
type: 'boolean',
optional: false, nullable: false,
},
isSystem: {
type: 'boolean',
optional: false, nullable: false,
@ -257,6 +261,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
}
const isModerator = await this.roleService.isModerator(user);
const isAdministrator = await this.roleService.isAdministrator(user);
const isSilenced = user.isSilenced || !(await this.roleService.getUserPolicies(user.id)).canPublicNote;
const _me = await this.usersRepository.findOneByOrFail({ id: me.id });
@ -289,6 +294,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
mutedInstances: profile.mutedInstances,
notificationRecieveConfig: profile.notificationRecieveConfig,
isModerator: isModerator,
isAdministrator: isAdministrator,
isSystem: isSystemAccount(user),
isSilenced: isSilenced,
isSuspended: user.isSuspended,

View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened">
<MkStickyContainer>
<MkStickyContainer :sticky="sticky">
<template #header>
<button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
<div :class="$style.headerIcon"><slot name="icon"></slot></div>
@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<KeepAlive>
<div v-show="opened">
<MkStickyContainer>
<MkStickyContainer :sticky="sticky">
<template #header>
<div v-if="$slots.header" :class="$style.inBodyHeader">
<slot name="header"></slot>
@ -73,12 +73,14 @@ const props = withDefaults(defineProps<{
withSpacer?: boolean;
spacerMin?: number;
spacerMax?: number;
sticky?: boolean;
}>(), {
defaultOpen: false,
maxHeight: null,
withSpacer: true,
spacerMin: 14,
spacerMax: 22,
sticky: true,
});
const rootEl = useTemplateRef('rootEl');

View file

@ -0,0 +1,84 @@
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.badges">
<div
v-for="badge of badges"
:key="badge.key"
:class="[$style.badge, semanticClass(badge)]"
>
{{ badge.label }}
</div>
</div>
</template>
<script lang="ts">
export interface Badge {
/**
* ID/key of this badge, must be unique within the strip.
*/
key: string;
/**
* Label text to display.
* Should already be translated.
*/
label: string;
/**
* Semantic style of the badge.
* Defaults to "neutral" if unset.
*/
style?: 'success' | 'neutral' | 'warning' | 'error';
}
</script>
<script setup lang="ts">
import { useCssModule } from 'vue';
const $style = useCssModule();
defineProps<{
badges: Badge[],
}>();
function semanticClass(badge: Badge): string {
const style = badge.style ?? 'neutral';
return $style[`semantic_${style}`];
}
</script>
<style module lang="scss">
.badges {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--MI-margin);
}
.badge {
display: inline-block;
border: solid 1px;
border-radius: var(--MI-radius-sm);
padding: 2px 6px;
font-size: 85%;
}
.semantic_error {
color: var(--MI_THEME-error);
border-color: var(--MI_THEME-error);
}
.semantic_warning {
color: var(--MI_THEME-warn);
border-color: var(--MI_THEME-warn);
}
.semantic_success {
color: var(--MI_THEME-success);
border-color: var(--MI_THEME-success);
}
</style>

View file

@ -5,17 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="rootEl">
<div ref="headerEl" :class="$style.header">
<div ref="headerEl" :class="{ [$style.header]: sticky }">
<slot name="header"></slot>
</div>
<div
:class="$style.body"
:class="{ [$style.body]: sticky }"
:data-sticky-container-header-height="headerHeight"
:data-sticky-container-footer-height="footerHeight"
>
<slot></slot>
</div>
<div ref="footerEl" :class="$style.footer">
<div ref="footerEl" :class="{ [$style.footer]: sticky }">
<slot name="footer"></slot>
</div>
</div>
@ -25,6 +25,12 @@ SPDX-License-Identifier: AGPL-3.0-only
import { onMounted, onUnmounted, provide, inject, ref, watch, useTemplateRef } from 'vue';
import { DI } from '@/di.js';
withDefaults(defineProps<{
sticky?: boolean,
}>(), {
sticky: true,
});
const rootEl = useTemplateRef('rootEl');
const headerEl = useTemplateRef('headerEl');
const footerEl = useTemplateRef('footerEl');

View file

@ -101,7 +101,7 @@ export const apiWithDialog = (<
});
export function promiseDialog<T extends Promise<any>>(
promise: T,
promise: T | (() => T),
onSuccess?: ((res: Awaited<T>) => void) | null,
onFailure?: ((err: Misskey.api.APIError) => void) | null,
text?: string,
@ -109,6 +109,10 @@ export function promiseDialog<T extends Promise<any>>(
const showing = ref(true);
const success = ref(false);
if (typeof(promise) === 'function') {
promise = promise();
}
promise.then(res => {
if (onSuccess) {
showing.value = false;

View file

@ -20,19 +20,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<span class="_monospace">{{ user.id }}</span>
<button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(user.id)"><i class="ti ti-copy"></i></button>
</span>
<span class="state">
<span v-if="!approved" class="silenced">{{ i18n.ts.notApproved }}</span>
<span v-if="approved && !user.host" class="moderator">{{ i18n.ts.approved }}</span>
<span v-if="suspended" class="suspended">{{ i18n.ts.suspended }}</span>
<span v-if="silenced" class="silenced">{{ i18n.ts.silenced }}</span>
<span v-if="moderator" class="moderator">{{ i18n.ts.moderator }}</span>
</span>
</div>
</div>
<SkBadgeStrip v-if="badges.length > 0" :badges="badges"></SkBadgeStrip>
<MkInfo v-if="isSystem">{{ i18n.ts.isSystemAccount }}</MkInfo>
<MkFolder v-if="!isSystem">
<MkFolder v-if="!isSystem" :sticky="false">
<template #icon><i class="ph-list-bullets ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.details }}</template>
<div style="display: flex; flex-direction: column; gap: 1em;">
@ -89,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkFolder>
<MkFolder v-if="info">
<MkFolder v-if="info" :sticky="false">
<template #icon><i class="ph-scroll ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts._role.policies }}</template>
<div class="_gaps">
@ -99,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkFolder>
<MkFolder v-if="iAmAdmin && ips && ips.length > 0">
<MkFolder v-if="iAmAdmin && ips && ips.length > 0" :sticky="false">
<template #icon><i class="ph-network ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.ip }}</template>
<MkInfo>{{ i18n.ts.ipTip }}</MkInfo>
@ -109,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkFolder>
<MkFolder v-if="iAmModerator" :defaultOpen="moderationNote.length > 0">
<MkFolder v-if="iAmModerator" :defaultOpen="moderationNote.length > 0" :sticky="false">
<template #icon><i class="ph-stamp ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.moderationNote }}</template>
<MkTextarea v-model="moderationNote" manualSave @update:modelValue="onModerationNoteChanged">
@ -248,6 +243,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { computed, defineAsyncComponent, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { url } from '@@/js/config.js';
import type { Badge } from '@/components/SkBadgeStrip.vue';
import MkChart from '@/components/MkChart.vue';
import MkObjectView from '@/components/MkObjectView.vue';
import MkTextarea from '@/components/MkTextarea.vue';
@ -272,6 +268,7 @@ import MkPagination from '@/components/MkPagination.vue';
import MkInput from '@/components/MkInput.vue';
import MkNumber from '@/components/MkNumber.vue';
import { copyToClipboard } from '@/utility/copy-to-clipboard';
import SkBadgeStrip from '@/components/SkBadgeStrip.vue';
const props = withDefaults(defineProps<{
userId: string;
@ -304,6 +301,98 @@ const filesPagination = {
})),
};
const badges = computed(() => {
const arr: Badge[] = [];
if (info.value && user.value) {
if (info.value.isSuspended) {
arr.push({
key: 'suspended',
label: i18n.ts.suspended,
style: 'error',
});
}
if (info.value.isSilenced) {
arr.push({
key: 'silenced',
label: i18n.ts.silenced,
style: 'warning',
});
}
if (info.value.alwaysMarkNsfw) {
arr.push({
key: 'nsfw',
label: i18n.ts.nsfw,
style: 'warning',
});
}
if (user.value.mandatoryCW) {
arr.push({
key: 'cw',
label: i18n.ts.cw,
style: 'warning',
});
}
if (info.value.isHibernated) {
arr.push({
key: 'hibernated',
label: i18n.ts.hibernated,
style: 'neutral',
});
}
if (info.value.isAdministrator) {
arr.push({
key: 'admin',
label: i18n.ts.administrator,
style: 'success',
});
} else if (info.value.isModerator) {
arr.push({
key: 'mod',
label: i18n.ts.moderator,
style: 'success',
});
}
if (user.value.host == null) {
if (info.value.email) {
if (info.value.emailVerified) {
arr.push({
key: 'verified',
label: i18n.ts.verified,
style: 'success',
});
} else {
arr.push({
key: 'not_verified',
label: i18n.ts.notVerified,
style: 'success',
});
}
}
if (info.value.approved) {
arr.push({
key: 'approved',
label: i18n.ts.approved,
style: 'success',
});
} else {
arr.push({
key: 'not_approved',
label: i18n.ts.notApproved,
style: 'warning',
});
}
}
}
return arr;
});
const announcementsStatus = ref<'active' | 'archived'>('active');
const announcementsPagination = {
@ -323,10 +412,13 @@ function createFetcher() {
userId: props.userId,
}), iAmAdmin ? misskeyApi('admin/get-user-ips', {
userId: props.userId,
}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
}) : Promise.resolve(null), iAmAdmin ? misskeyApi('ap/get', {
uri: `${url}/users/${props.userId}`,
}).catch(() => null) : null]).then(([_user, _info, _ips, _ap]) => {
user.value = _user;
info.value = _info;
ips.value = _ips;
ap.value = _ap;
moderator.value = info.value.isModerator;
silenced.value = info.value.isSilenced;
approved.value = info.value.approved;
@ -338,23 +430,30 @@ function createFetcher() {
});
}
function refreshUser() {
init.value = createFetcher();
async function refreshUser() {
// Not a typo - createFetcher() returns a function()
await createFetcher()();
}
async function onMandatoryCWChanged(value: string) {
await os.apiWithDialog('admin/cw-user', { userId: props.userId, cw: value });
refreshUser();
await os.promiseDialog(async () => {
await misskeyApi('admin/cw-user', { userId: props.userId, cw: value });
await refreshUser();
});
}
async function onModerationNoteChanged(value: string) {
await os.promiseDialog(async () => {
await misskeyApi('admin/update-user-note', { userId: props.userId, text: value });
refreshUser();
});
}
async function updateRemoteUser() {
await os.apiWithDialog('federation/update-remote-user', { userId: user.value.id });
await os.promiseDialog(async () => {
await misskeyApi('federation/update-remote-user', { userId: props.userId });
refreshUser();
});
}
async function resetPassword() {
@ -368,7 +467,7 @@ async function resetPassword() {
const { password } = await misskeyApi('admin/reset-password', {
userId: user.value.id,
});
os.alert({
await os.alert({
type: 'success',
text: i18n.tsx.newPasswordIs({ password }),
});
@ -383,7 +482,7 @@ async function toggleNSFW(v) {
if (confirm.canceled) {
markedAsNSFW.value = !v;
} else {
await misskeyApi(v ? 'admin/nsfw-user' : 'admin/unnsfw-user', { userId: user.value.id });
await misskeyApi(v ? 'admin/nsfw-user' : 'admin/unnsfw-user', { userId: props.userId });
await refreshUser();
}
}
@ -396,8 +495,10 @@ async function toggleSilence(v) {
if (confirm.canceled) {
silenced.value = !v;
} else {
await misskeyApi(v ? 'admin/silence-user' : 'admin/unsilence-user', { userId: user.value.id });
await os.promiseDialog(async () => {
await misskeyApi(v ? 'admin/silence-user' : 'admin/unsilence-user', { userId: props.userId });
await refreshUser();
});
}
}
@ -409,8 +510,10 @@ async function toggleSuspend(v) {
if (confirm.canceled) {
suspended.value = !v;
} else {
await misskeyApi(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: user.value.id });
await os.promiseDialog(async () => {
await misskeyApi(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: props.userId });
await refreshUser();
});
}
}
@ -422,11 +525,13 @@ async function toggleRejectQuotes(v: boolean): Promise<void> {
if (confirm.canceled) {
rejectQuotes.value = !v;
} else {
await os.promiseDialog(async () => {
await misskeyApi('admin/reject-quotes', {
userId: props.userId,
rejectQuotes: v,
});
await refreshUser();
});
}
}
@ -436,17 +541,10 @@ async function unsetUserAvatar() {
text: i18n.ts.unsetUserAvatarConfirm,
});
if (confirm.canceled) return;
const process = async () => {
await misskeyApi('admin/unset-user-avatar', { userId: user.value.id });
os.success();
};
await process().catch(err => {
os.alert({
type: 'error',
text: err.toString(),
await os.promiseDialog(async () => {
await misskeyApi('admin/unset-user-avatar', { userId: props.userId });
await refreshUser();
});
});
refreshUser();
}
async function unsetUserBanner() {
@ -455,17 +553,10 @@ async function unsetUserBanner() {
text: i18n.ts.unsetUserBannerConfirm,
});
if (confirm.canceled) return;
const process = async () => {
await misskeyApi('admin/unset-user-banner', { userId: user.value.id });
os.success();
};
await process().catch(err => {
os.alert({
type: 'error',
text: err.toString(),
await os.promiseDialog(async () => {
await misskeyApi('admin/unset-user-banner', { userId: props.userId });
await refreshUser();
});
});
refreshUser();
}
async function deleteAllFiles() {
@ -474,17 +565,10 @@ async function deleteAllFiles() {
text: i18n.ts.deleteAllFilesConfirm,
});
if (confirm.canceled) return;
const process = async () => {
await misskeyApi('admin/delete-all-files-of-a-user', { userId: user.value.id });
os.success();
};
await process().catch(err => {
os.alert({
type: 'error',
text: err.toString(),
});
});
await os.promiseDialog(async () => {
await misskeyApi('admin/delete-all-files-of-a-user', { userId: props.userId });
await refreshUser();
});
}
async function deleteAccount() {
@ -504,7 +588,7 @@ async function deleteAccount() {
userId: user.value.id,
});
} else {
os.alert({
await os.alert({
type: 'error',
text: 'input not match',
});
@ -544,18 +628,22 @@ async function assignRole() {
: period === 'oneMonth' ? Date.now() + (1000 * 60 * 60 * 24 * 30)
: null;
await os.apiWithDialog('admin/roles/assign', { roleId, userId: user.value.id, expiresAt });
refreshUser();
await os.promiseDialog(async () => {
await misskeyApi('admin/roles/assign', { roleId, userId: props.userId, expiresAt });
await refreshUser();
});
}
async function unassignRole(role, ev) {
os.popupMenu([{
await os.popupMenu([{
text: i18n.ts.unassign,
icon: 'ti ti-x',
danger: true,
action: async () => {
await os.apiWithDialog('admin/roles/unassign', { roleId: role.id, userId: user.value.id });
refreshUser();
await os.promiseDialog(async () => {
await misskeyApi('admin/roles/unassign', { roleId: role.id, userId: props.userId });
await refreshUser();
});
},
}], ev.currentTarget ?? ev.target);
}
@ -591,14 +679,6 @@ watch(() => props.userId, () => {
immediate: true,
});
watch(user, () => {
misskeyApi('ap/get', {
uri: user.value.uri ?? `${url}/users/${user.value.id}`,
}).then(res => {
ap.value = res;
});
});
const headerActions = computed(() => []);
const headerTabs = computed(() => isSystem.value ? [{
@ -782,6 +862,7 @@ definePage(() => ({
cursor: pointer;
}
// Sync with instance-info.vue
.buttonStrip {
margin: calc(var(--MI-margin) / 2 * -1);

View file

@ -6,97 +6,129 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<div v-if="instance" class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<MkSwiper v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'overview'" class="_gaps_m">
<!-- This empty div is preserved to avoid merge conflicts -->
<div>
<div v-if="tab === 'overview'" class="_gaps">
<div class="fnfelxur">
<img :src="faviconUrl" alt="" class="icon"/>
<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
<!-- TODO copy the alt text stuff from reports UI PR -->
<img v-if="faviconUrl" :src="faviconUrl" alt="" class="icon"/>
<div :class="$style.headerData">
<span class="name">{{ instance.name || instance.host }}</span>
<span>
<span class="_monospace">{{ instance.host }}</span>
<button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(instance.host)"><i class="ti ti-copy"></i></button>
</span>
<span>
<span class="_monospace">{{ instance.id }}</span>
<button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(instance.id)"><i class="ti ti-copy"></i></button>
</span>
</div>
</div>
<SkBadgeStrip v-if="badges.length > 0" :badges="badges"></SkBadgeStrip>
<MkFolder :sticky="false">
<template #icon><i class="ph-list-bullets ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.details }}</template>
<div style="display: flex; flex-direction: column; gap: 1em;">
<MkKeyValue :copy="instance.id" oneline>
<template #key>{{ i18n.ts.id }}</template>
<template #value><span class="_monospace">{{ instance.id }}</span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.name" oneline>
<template #key>{{ i18n.ts.name }}</template>
<template #value><span class="_monospace">{{ instance.name || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue>
<MkKeyValue :copy="host" oneline>
<template #key>Host</template>
<template #key>{{ i18n.ts.host }}</template>
<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
</MkKeyValue>
<MkKeyValue oneline>
<MkKeyValue :copy="instance.firstRetrievedAt" oneline>
<template #key>{{ i18n.ts.createdAt }}</template>
<template #value><span class="_monospace"><MkTime :time="instance.firstRetrievedAt" :mode="'detail'"/></span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.infoUpdatedAt" oneline>
<template #key>{{ i18n.ts.updatedAt }}</template>
<template #value><span class="_monospace"><MkTime :time="instance.infoUpdatedAt" :mode="'detail'"/></span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.latestRequestReceivedAt" oneline>
<template #key>{{ i18n.ts.lastActiveDate }}</template>
<template #value><span class="_monospace"><MkTime :time="instance.latestRequestReceivedAt" :mode="'detail'"/></span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.softwareName" oneline>
<template #key>{{ i18n.ts.software }}</template>
<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue>
<MkKeyValue oneline>
<MkKeyValue :copy="instance.maintainerName" oneline>
<template #key>{{ i18n.ts.administrator }}</template>
<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
<template #value><span class="_monospace">{{ instance.maintainerName || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.maintainerEmail" oneline>
<template #key>{{ i18n.ts.email }}</template>
<template #value><span class="_monospace">{{ instance.maintainerEmail || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.followingPub }}</template>
<template #value><span class="_monospace"><MkNumber :value="instance.followingCount"/></span></template>
</MkKeyValue>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.followersSub }}</template>
<template #value><span class="_monospace"><MkNumber :value="instance.followersCount"/></span></template>
</MkKeyValue>
<MkKeyValue oneline>
<template #key>{{ i18n.ts._delivery.status }}</template>
<template #value><span class="_monospace">{{ i18n.ts._delivery._type[suspensionState] }}</span></template>
</MkKeyValue>
</div>
<MkKeyValue>
<template #key>{{ i18n.ts.description }}</template>
<template #value>{{ instance.description }}</template>
</MkKeyValue>
</MkFolder>
<FormSection v-if="iAmModerator">
<template #label>Moderation</template>
<div class="_gaps_s">
<MkKeyValue>
<template #key>
{{ i18n.ts._delivery.status }}
</template>
<template #value>
{{ i18n.ts._delivery._type[suspensionState] }}
</template>
</MkKeyValue>
<div class="_buttons">
<MkButton inline :disabled="!instance" danger @click="deleteAllFiles">{{ i18n.ts.deleteAllFiles }}</MkButton>
<MkButton inline :disabled="!instance" danger @click="severAllFollowRelations">{{ i18n.ts.severAllFollowRelations }}</MkButton>
</div>
<MkSwitch v-model="isSuspended" :disabled="!instance" @update:modelValue="toggleSuspended">{{ i18n.ts._delivery.stop }}</MkSwitch>
<MkInfo v-if="isBaseBlocked" warn>{{ i18n.ts.blockedByBase }}</MkInfo>
<MkSwitch v-model="isBlocked" :disabled="!meta || !instance || isBaseBlocked" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
<MkInfo v-if="isBaseSilenced" warn>{{ i18n.ts.silencedByBase }}</MkInfo>
<MkSwitch v-model="isSilenced" :disabled="!meta || !instance || isBaseSilenced" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
<MkSwitch v-model="isNSFW" :disabled="!instance" @update:modelValue="toggleNSFW">{{ i18n.ts.markInstanceAsNSFW }}</MkSwitch>
<MkSwitch v-model="rejectQuotes" :disabled="!instance" @update:modelValue="toggleRejectQuotes">{{ i18n.ts.rejectQuotesInstance }}</MkSwitch>
<MkSwitch v-model="rejectReports" :disabled="!instance" @update:modelValue="toggleRejectReports">{{ i18n.ts.rejectReports }}</MkSwitch>
<MkInfo v-if="isBaseMediaSilenced" warn>{{ i18n.ts.mediaSilencedByBase }}</MkInfo>
<MkSwitch v-model="isMediaSilenced" :disabled="!meta || !instance || isBaseMediaSilenced" @update:modelValue="toggleMediaSilenced">{{ i18n.ts.mediaSilenceThisInstance }}</MkSwitch>
<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
<MkTextarea v-model="moderationNote" manualSave>
<MkFolder :sticky="false">
<template #label>{{ i18n.ts.wellKnownResources }}</template>
<template #icon><i class="ph-network ph-bold ph-lg"></i></template>
<ul :class="$style.linksList" class="_gaps_s">
<!-- TODO more links here -->
<li><MkLink :url="`https://${host}/.well-known/host-meta`" class="_monospace">/.well-known/host-meta</MkLink></li>
<li><MkLink :url="`https://${host}/.well-known/host-meta.json`" class="_monospace">/.well-known/host-meta.json</MkLink></li>
<li><MkLink :url="`https://${host}/.well-known/nodeinfo`" class="_monospace">/.well-known/nodeinfo</MkLink></li>
<li><MkLink :url="`https://${host}/robots.txt`" class="_monospace">/robots.txt</MkLink></li>
<li><MkLink :url="`https://${host}/manifest.json`" class="_monospace">/manifest.json</MkLink></li>
</ul>
</MkFolder>
<MkFolder v-if="iAmModerator" :defaultOpen="moderationNote.length > 0" :sticky="false">
<template #icon><i class="ph-stamp ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.moderationNote }}</template>
<MkTextarea v-model="moderationNote" manualSave @update:modelValue="saveModerationNote">
<template #label>{{ i18n.ts.moderationNote }}</template>
<template #caption>{{ i18n.ts.moderationNoteDescription }}</template>
</MkTextarea>
</MkFolder>
<FormSection v-if="instance.description">
<template #label>{{ i18n.ts.description }}</template>
{{ instance.description }}
</FormSection>
<FormSection v-if="iAmModerator">
<template #label>{{ i18n.ts.moderation }}</template>
<div class="_gaps">
<MkInfo v-if="isBaseSilenced" warn>{{ i18n.ts.silencedByBase }}</MkInfo>
<MkSwitch v-model="isSilenced" :disabled="!meta || !instance || isBaseSilenced" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
<MkSwitch v-model="isSuspended" :disabled="!instance" @update:modelValue="toggleSuspended">{{ i18n.ts._delivery.stop }}</MkSwitch>
<MkInfo v-if="isBaseBlocked" warn>{{ i18n.ts.blockedByBase }}</MkInfo>
<MkSwitch v-model="isBlocked" :disabled="!meta || !instance || isBaseBlocked" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
<MkSwitch v-model="rejectQuotes" :disabled="!instance" @update:modelValue="toggleRejectQuotes">{{ i18n.ts.rejectQuotesInstance }}</MkSwitch>
<MkSwitch v-model="isNSFW" :disabled="!instance" @update:modelValue="toggleNSFW">{{ i18n.ts.markInstanceAsNSFW }}</MkSwitch>
<MkSwitch v-model="rejectReports" :disabled="!instance" @update:modelValue="toggleRejectReports">{{ i18n.ts.rejectReports }}</MkSwitch>
<MkInfo v-if="isBaseMediaSilenced" warn>{{ i18n.ts.mediaSilencedByBase }}</MkInfo>
<MkSwitch v-model="isMediaSilenced" :disabled="!meta || !instance || isBaseMediaSilenced" @update:modelValue="toggleMediaSilenced">{{ i18n.ts.mediaSilenceThisInstance }}</MkSwitch>
<div :class="$style.buttonStrip">
<MkButton inline :disabled="!instance" @click="refreshMetadata"><i class="ph-cloud-arrow-down ph-bold ph-lg"></i> {{ i18n.ts.updateRemoteUser }}</MkButton>
<MkButton inline :disabled="!instance" danger @click="deleteAllFiles"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.deleteAllFiles }}</MkButton>
<MkButton inline :disabled="!instance" danger @click="severAllFollowRelations"><i class="ph-link-break ph-bold ph-lg"></i> {{ i18n.ts.severAllFollowRelations }}</MkButton>
</div>
</div>
</FormSection>
<FormSection>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.registeredAt }}</template>
<template #value><MkTime mode="detail" :time="instance.firstRetrievedAt"/></template>
</MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.updatedAt }}</template>
<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
</MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
</MkKeyValue>
</FormSection>
<FormSection>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>Following (Pub)</template>
<template #value>{{ number(instance.followingCount) }}</template>
</MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>Followers (Sub)</template>
<template #value>{{ number(instance.followersCount) }}</template>
</MkKeyValue>
</FormSection>
<FormSection>
<template #label>Well-known resources</template>
<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
</FormSection>
</div>
<div v-else-if="tab === 'chart'" class="_gaps_m">
@ -126,7 +158,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-else-if="tab === 'users'" class="_gaps_m">
<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(user.updatedAt) })" class="user" :to="`/admin/user/${user.id}`">
<MkUserCardMini :user="user"/>
</MkA>
</MkPagination>
@ -135,11 +167,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination v-slot="{items}" :pagination="followingPagination">
<div class="follow-relations-list">
<div v-for="followRelationship in items" :key="followRelationship.id" class="follow-relation">
<MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.followee.updatedAt)}`" :to="`/admin/user/${followRelationship.followee.id}`" class="user">
<MkA v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(followRelationship.followee.updatedAt) })" :to="`/admin/user/${followRelationship.followee.id}`" class="user">
<MkUserCardMini :user="followRelationship.followee" :withChart="false"/>
</MkA>
<span class="arrow"></span>
<MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.follower.updatedAt)}`" :to="`/admin/user/${followRelationship.follower.id}`" class="user">
<MkA v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(followRelationship.follower.updatedAt) })" :to="`/admin/user/${followRelationship.follower.id}`" class="user">
<MkUserCardMini :user="followRelationship.follower" :withChart="false"/>
</MkA>
</div>
@ -150,11 +182,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination v-slot="{items}" :pagination="followersPagination">
<div class="follow-relations-list">
<div v-for="followRelationship in items" :key="followRelationship.id" class="follow-relation">
<MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.followee.updatedAt)}`" :to="`/admin/user/${followRelationship.followee.id}`" class="user">
<MkA v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(followRelationship.followee.updatedAt) })" :to="`/admin/user/${followRelationship.followee.id}`" class="user">
<MkUserCardMini :user="followRelationship.followee" :withChart="false"/>
</MkA>
<span class="arrow"></span>
<MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.follower.updatedAt)}`" :to="`/admin/user/${followRelationship.follower.id}`" class="user">
<MkA v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(followRelationship.follower.updatedAt) })" :to="`/admin/user/${followRelationship.follower.id}`" class="user">
<MkUserCardMini :user="followRelationship.follower" :withChart="false"/>
</MkA>
</div>
@ -165,16 +197,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkObjectView tall :value="instance">
</MkObjectView>
</div>
</MkSwiper>
</div>
</div>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { ref, computed, watch, useCssModule } from 'vue';
import * as Misskey from 'misskey-js';
import type { ChartSrc } from '@/components/MkChart.vue';
import type { Paging } from '@/components/MkPagination.vue';
import type { Badge } from '@/components/SkBadgeStrip.vue';
import MkChart from '@/components/MkChart.vue';
import MkObjectView from '@/components/MkObjectView.vue';
import FormLink from '@/components/form/link.vue';
@ -197,6 +230,13 @@ import { dateString } from '@/filters/date.js';
import MkTextarea from '@/components/MkTextarea.vue';
import MkInfo from '@/components/MkInfo.vue';
import { $i } from '@/i.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard';
import { acct } from '@/filters/user';
import MkFolder from '@/components/MkFolder.vue';
import MkNumber from '@/components/MkNumber.vue';
import SkBadgeStrip from '@/components/SkBadgeStrip.vue';
const $style = useCssModule();
const props = defineProps<{
host: string;
@ -233,6 +273,55 @@ const isBaseBlocked = computed(() => meta.value && baseDomains.value.some(d => m
const isBaseSilenced = computed(() => meta.value && baseDomains.value.some(d => meta.value?.silencedHosts.includes(d)));
const isBaseMediaSilenced = computed(() => meta.value && baseDomains.value.some(d => meta.value?.mediaSilencedHosts.includes(d)));
const badges = computed(() => {
const arr: Badge[] = [];
if (instance.value) {
if (instance.value.isBlocked) {
arr.push({
key: 'blocked',
label: i18n.ts.blocked,
style: 'error',
});
}
if (instance.value.isSuspended) {
arr.push({
key: 'suspended',
label: i18n.ts.suspended,
style: 'error',
});
}
if (instance.value.isSilenced) {
arr.push({
key: 'silenced',
label: i18n.ts.silenced,
style: 'warning',
});
}
if (instance.value.isMediaSilenced) {
arr.push({
key: 'media_silenced',
label: i18n.ts.mediaSilenced,
style: 'warning',
});
}
if (instance.value.isNSFW) {
arr.push({
key: 'nsfw',
label: i18n.ts.nsfw,
style: 'warning',
});
}
if (instance.value.isBubbled) {
arr.push({
key: 'bubbled',
label: i18n.ts.bubble,
style: 'success',
});
}
}
return arr;
});
const usersPagination = {
endpoint: iAmModerator ? 'admin/show-users' : 'users',
limit: 10,
@ -264,20 +353,26 @@ const followersPagination = {
offsetMode: false,
};
if (iAmModerator) {
watch(moderationNote, async () => {
async function saveModerationNote() {
if (iAmModerator) {
await os.promiseDialog(async () => {
if (instance.value == null) return;
await misskeyApi('admin/federation/update-instance', { host: instance.value.host, moderationNote: moderationNote.value });
await os.apiWithDialog('admin/federation/update-instance', { host: instance.value.host, moderationNote: moderationNote.value });
await fetch();
});
}
}
async function fetch(): Promise<void> {
if (iAmAdmin) {
meta.value = await misskeyApi('admin/meta');
}
instance.value = await misskeyApi('federation/show-instance', {
const [m, i] = await Promise.all([
iAmAdmin ? misskeyApi('admin/meta') : null,
misskeyApi('federation/show-instance', {
host: props.host,
});
}),
]);
meta.value = m;
instance.value = i;
suspensionState.value = instance.value?.suspensionState ?? 'none';
isSuspended.value = suspensionState.value !== 'none';
isBlocked.value = instance.value?.isBlocked ?? false;
@ -292,27 +387,36 @@ async function fetch(): Promise<void> {
async function toggleBlock(): Promise<void> {
if (!iAmAdmin) return;
await os.promiseDialog(async () => {
if (!meta.value) throw new Error('No meta?');
if (!instance.value) throw new Error('No instance?');
const { host } = instance.value;
await misskeyApi('admin/update-meta', {
await os.apiWithDialog('admin/update-meta', {
blockedHosts: isBlocked.value ? meta.value.blockedHosts.concat([host]) : meta.value.blockedHosts.filter(x => x !== host),
});
await fetch();
});
}
async function toggleSilenced(): Promise<void> {
if (!iAmAdmin) return;
await os.promiseDialog(async () => {
if (!meta.value) throw new Error('No meta?');
if (!instance.value) throw new Error('No instance?');
const { host } = instance.value;
const silencedHosts = meta.value.silencedHosts ?? [];
await os.promiseDialog(async () => {
await misskeyApi('admin/update-meta', {
silencedHosts: isSilenced.value ? silencedHosts.concat([host]) : silencedHosts.filter(x => x !== host),
});
await fetch();
});
});
}
async function toggleMediaSilenced(): Promise<void> {
if (!iAmAdmin) return;
await os.promiseDialog(async () => {
if (!meta.value) throw new Error('No meta?');
if (!instance.value) throw new Error('No instance?');
const { host } = instance.value;
@ -320,52 +424,69 @@ async function toggleMediaSilenced(): Promise<void> {
await misskeyApi('admin/update-meta', {
mediaSilencedHosts: isMediaSilenced.value ? mediaSilencedHosts.concat([host]) : mediaSilencedHosts.filter(x => x !== host),
});
await fetch();
});
}
async function toggleSuspended(): Promise<void> {
if (!iAmModerator) return;
await os.promiseDialog(async () => {
if (!instance.value) throw new Error('No instance?');
suspensionState.value = isSuspended.value ? 'manuallySuspended' : 'none';
await misskeyApi('admin/federation/update-instance', {
host: instance.value.host,
isSuspended: isSuspended.value,
});
await fetch();
});
}
async function toggleNSFW(): Promise<void> {
if (!iAmModerator) return;
await os.promiseDialog(async () => {
if (!instance.value) throw new Error('No instance?');
await misskeyApi('admin/federation/update-instance', {
host: instance.value.host,
isNSFW: isNSFW.value,
});
await fetch();
});
}
async function toggleRejectReports(): Promise<void> {
if (!iAmModerator) return;
await os.promiseDialog(async () => {
if (!instance.value) throw new Error('No instance?');
await misskeyApi('admin/federation/update-instance', {
host: instance.value.host,
rejectReports: rejectReports.value,
});
await fetch();
});
}
async function toggleRejectQuotes(): Promise<void> {
if (!iAmModerator) return;
await os.promiseDialog(async () => {
if (!instance.value) throw new Error('No instance?');
await misskeyApi('admin/federation/update-instance', {
host: instance.value.host,
rejectQuotes: rejectQuotes.value,
});
await fetch();
});
}
function refreshMetadata(): void {
async function refreshMetadata(): Promise<void> {
if (!iAmModerator) return;
await os.promiseDialog(async () => {
if (!instance.value) throw new Error('No instance?');
misskeyApi('admin/federation/refresh-remote-instance-metadata', {
await misskeyApi('admin/federation/refresh-remote-instance-metadata', {
host: instance.value.host,
});
os.alert({
await fetch();
});
await os.alert({
text: 'Refresh requested',
});
}
@ -380,14 +501,12 @@ async function deleteAllFiles(): Promise<void> {
});
if (confirm.canceled) return;
await Promise.all([
misskeyApi('admin/federation/delete-all-files', {
await os.apiWithDialog('admin/federation/delete-all-files', {
host: instance.value.host,
}),
os.alert({
});
await os.alert({
text: i18n.ts.deleteAllFilesQueued,
}),
]);
});
}
async function severAllFollowRelations(): Promise<void> {
@ -404,14 +523,12 @@ async function severAllFollowRelations(): Promise<void> {
});
if (confirm.canceled) return;
await Promise.all([
misskeyApi('admin/federation/remove-all-following', {
await os.apiWithDialog('admin/federation/remove-all-following', {
host: instance.value.host,
}),
os.alert({
});
await os.alert({
text: i18n.tsx.severAllFollowRelationsQueued({ host: instance.value.host }),
}),
]);
});
}
fetch();
@ -428,17 +545,17 @@ const headerTabs = computed(() => [{
key: 'overview',
title: i18n.ts.overview,
icon: 'ti ti-info-circle',
}, {
key: 'chart',
title: i18n.ts.charts,
icon: 'ti ti-chart-line',
}, {
key: 'users',
title: i18n.ts.users,
icon: 'ti ti-users',
}, ...getFollowingTabs(), {
key: 'chart',
title: i18n.ts.charts,
icon: 'ti ti-chart-line',
}, {
key: 'raw',
title: 'Raw',
title: i18n.ts.raw,
icon: 'ti ti-code',
}]);
@ -522,3 +639,38 @@ definePage(() => ({
}
}
</style>
<style lang="scss" module>
.headerData {
display: flex;
flex-direction: column;
> * {
overflow: hidden;
text-overflow: ellipsis;
font-size: 85%;
opacity: 0.7;
}
> :first-child {
text-overflow: initial;
word-break: break-all;
font-size: 100%;
opacity: 1.0;
}
}
.linksList {
margin: 0;
padding-left: 1.5em;
}
// Sync with admin-user.vue
.buttonStrip {
margin: calc(var(--MI-margin) / 2 * -1);
>* {
margin: calc(var(--MI-margin) / 2);
}
}
</style>

View file

@ -5294,6 +5294,7 @@ export type components = {
rejectReports: boolean;
rejectQuotes: boolean;
moderationNote?: string | null;
isBubbled: boolean;
};
GalleryPost: {
/**
@ -11209,6 +11210,7 @@ export type operations = {
}]>;
};
isModerator: boolean;
isAdministrator: boolean;
isSystem: boolean;
isSilenced: boolean;
isSuspended: boolean;

View file

@ -591,3 +591,16 @@ roleAutomatic: "automatic"
translationTimeoutLabel: "Translation timeout"
translationTimeoutCaption: "Timeout in milliseconds for translation API requests."
followingPub: "Following (Pub)"
followersSub: "Followers (Sub)"
wellKnownResources: "Well-known resources"
lastPosted: "Last posted: {at}"
nsfw: "NSFW"
raw: "Raw"
cw: "CW"
mediaSilenced: "Media Silenced"
bubble: "Bubble"
verified: "Verified"
notVerified: "Not Verified"
hibernated: "Hibernated"