misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

merge upstream again

Browse source
This commit is contained in:
Hazelnoot 2025-04-24 14:23:45 -04:00
commit a4dd19fdd4
167 changed files with 6779 additions and 3952 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/backend/migration/1745378064470-composite-note-index.js Normal file
View file

@ -0,0 +1,21 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
export class CompositeNoteIndex1745378064470 {
name = 'CompositeNoteIndex1745378064470';
async up(queryRunner) {
await queryRunner.query(`CREATE INDEX "IDX_724b311e6f883751f261ebe378" ON "note" ("userId", "id" DESC)`);
await queryRunner.query(`DROP INDEX IF EXISTS "IDX_5b87d9d19127bd5d92026017a7"`);
// Flush all cached Linear Scan Plans and redo statistics for composite index
// this is important for Postgres to learn that even in highly complex queries, using this index first can reduce the result set significantly
await queryRunner.query(`ANALYZE "user", "note"`);
}
async down(queryRunner) {
await queryRunner.query(`DROP INDEX IF EXISTS "IDX_724b311e6f883751f261ebe378"`);
await queryRunner.query(`CREATE INDEX "IDX_5b87d9d19127bd5d92026017a7" ON "note" ("userId")`);
}
}

66
packages/backend/package.json
View file

@ -37,17 +37,17 @@
},
"optionalDependencies": {
"@swc/core-android-arm64": "1.3.11",
"@swc/core-darwin-arm64": "1.11.11",
"@swc/core-darwin-x64": "1.11.11",
"@swc/core-darwin-arm64": "1.11.18",
"@swc/core-darwin-x64": "1.11.18",
"@swc/core-freebsd-x64": "1.3.11",
"@swc/core-linux-arm-gnueabihf": "1.11.11",
"@swc/core-linux-arm64-gnu": "1.11.11",
"@swc/core-linux-arm64-musl": "1.11.11",
"@swc/core-linux-x64-gnu": "1.11.11",
"@swc/core-linux-x64-musl": "1.11.11",
"@swc/core-win32-arm64-msvc": "1.11.11",
"@swc/core-win32-ia32-msvc": "1.11.11",
"@swc/core-win32-x64-msvc": "1.11.11",
"@swc/core-linux-arm-gnueabihf": "1.11.18",
"@swc/core-linux-arm64-gnu": "1.11.18",
"@swc/core-linux-arm64-musl": "1.11.18",
"@swc/core-linux-x64-gnu": "1.11.18",
"@swc/core-linux-x64-musl": "1.11.18",
"@swc/core-win32-arm64-msvc": "1.11.18",
"@swc/core-win32-ia32-msvc": "1.11.18",
"@swc/core-win32-x64-msvc": "1.11.18",
"bufferutil": "4.0.9",
"slacc-android-arm-eabi": "0.0.10",
"slacc-android-arm64": "0.0.10",
@ -65,8 +65,8 @@
"utf-8-validate": "6.0.5"
},
"dependencies": {
"@aws-sdk/client-s3": "3.772.0",
"@aws-sdk/lib-storage": "3.772.0",
"@aws-sdk/client-s3": "3.782.0",
"@aws-sdk/lib-storage": "3.782.0",
"@discordapp/twemoji": "15.1.0",
"@fastify/accepts": "5.0.2",
"@fastify/cookie": "11.0.2",
@ -76,11 +76,11 @@
"@fastify/multipart": "9.0.3",
"@fastify/static": "8.1.1",
"@fastify/view": "10.0.2",
"@misskey-dev/sharp-read-bmp": "1.2.0",
"@misskey-dev/sharp-read-bmp": "1.3.0",
"@misskey-dev/summaly": "5.2.0",
"@nestjs/common": "11.0.12",
"@nestjs/core": "11.0.12",
"@nestjs/testing": "11.0.12",
"@nestjs/common": "11.0.16",
"@nestjs/core": "11.0.15",
"@nestjs/testing": "11.0.15",
"@peertube/http-signature": "1.7.0",
"@sentry/node": "8.55.0",
"@sentry/profiling-node": "8.55.0",
@ -88,9 +88,10 @@
"@sinonjs/fake-timers": "11.3.1",
"@smithy/node-http-handler": "2.5.0",
"@swc/cli": "0.6.0",
"@swc/core": "1.11.11",
"@swc/core": "1.11.18",
"@transfem-org/sfm-js": "0.24.6",
"@twemoji/parser": "15.1.1",
"@types/redis-info": "3.0.3",
"@types/psl": "^1.1.3",
"accepts": "1.3.8",
"ajv": "8.17.1",
@ -100,7 +101,7 @@
"bcryptjs": "2.4.3",
"blurhash": "2.0.5",
"body-parser": "1.20.3",
"bullmq": "5.44.1",
"bullmq": "5.48.1",
"cacheable-lookup": "7.0.0",
"canvas": "^3.1.0",
"cbor": "9.0.2",
@ -113,7 +114,7 @@
"date-fns": "2.30.0",
"deep-email-validator": "0.1.21",
"fast-xml-parser": "4.4.1",
"fastify": "5.2.1",
"fastify": "5.3.2",
"fastify-multer": "^2.0.3",
"fastify-raw-body": "5.0.0",
"feed": "4.2.2",
@ -121,7 +122,7 @@
"fluent-ffmpeg": "2.1.3",
"form-data": "4.0.2",
"glob": "11.0.0",
"got": "14.4.6",
"got": "14.4.7",
"happy-dom": "16.8.1",
"hpagent": "1.2.0",
"htmlescape": "1.1.1",
@ -152,7 +153,7 @@
"oauth2orize": "1.12.0",
"oauth2orize-pkce": "0.1.2",
"os-utils": "0.0.14",
"otpauth": "9.3.6",
"otpauth": "9.4.0",
"parse5": "7.2.1",
"pg": "8.14.1",
"pkce-challenge": "4.1.0",
@ -165,6 +166,7 @@
"random-seed": "0.3.0",
"ratelimiter": "3.4.1",
"re2": "1.21.4",
"redis-info": "3.1.0",
"redis-lock": "0.1.4",
"reflect-metadata": "0.2.2",
"rename": "1.0.4",
@ -172,17 +174,17 @@
"rxjs": "7.8.2",
"sanitize-html": "2.15.0",
"secure-json-parse": "3.0.2",
"sharp": "0.33.5",
"sharp": "0.34.1",
"slacc": "0.0.10",
"strict-event-emitter-types": "2.0.0",
"stringz": "2.1.0",
"systeminformation": "5.25.11",
"tinycolor2": "1.6.0",
"tmp": "0.2.3",
"tsc-alias": "1.8.11",
"tsc-alias": "1.8.15",
"tsconfig-paths": "4.2.0",
"typeorm": "0.3.21",
"typescript": "5.8.2",
"typeorm": "0.3.22",
"typescript": "5.8.3",
"ulid": "2.4.0",
"uuid": "^9.0.1",
"vary": "1.1.2",
@ -193,7 +195,7 @@
"devDependencies": {
"@jest/globals": "29.7.0",
"@nestjs/platform-express": "10.4.15",
"@sentry/vue": "9.8.0",
"@sentry/vue": "9.12.0",
"@simplewebauthn/types": "12.0.0",
"@swc/jest": "0.2.37",
"@types/accepts": "1.3.7",
@ -212,7 +214,7 @@
"@types/jsrsasign": "10.5.15",
"@types/mime-types": "2.1.4",
"@types/ms": "0.7.34",
"@types/node": "22.13.10",
"@types/node": "22.14.0",
"@types/nodemailer": "6.4.17",
"@types/oauth": "0.9.6",
"@types/oauth2orize": "1.11.5",
@ -224,8 +226,8 @@
"@types/random-seed": "0.3.5",
"@types/ratelimiter": "3.4.6",
"@types/rename": "1.0.7",
"@types/sanitize-html": "2.13.0",
"@types/semver": "7.5.8",
"@types/sanitize-html": "2.15.0",
"@types/semver": "7.7.0",
"@types/simple-oauth2": "5.0.7",
"@types/sinonjs__fake-timers": "8.1.5",
"@types/tinycolor2": "1.4.6",
@ -233,9 +235,9 @@
"@types/uuid": "^9.0.4",
"@types/vary": "1.1.3",
"@types/web-push": "3.6.4",
"@types/ws": "8.18.0",
"@typescript-eslint/eslint-plugin": "8.27.0",
"@typescript-eslint/parser": "8.27.0",
"@types/ws": "8.18.1",
"@typescript-eslint/eslint-plugin": "8.29.1",
"@typescript-eslint/parser": "8.29.1",
"aws-sdk-client-mock": "4.1.0",
"cross-env": "7.0.3",
"eslint-plugin-import": "2.31.0",

3
packages/backend/src/core/AccountMoveService.ts
View file

@ -25,6 +25,7 @@ import InstanceChart from '@/core/chart/charts/instance.js';
import PerUserFollowingChart from '@/core/chart/charts/per-user-following.js';
import { SystemAccountService } from '@/core/SystemAccountService.js';
import { RoleService } from '@/core/RoleService.js';
import { AntennaService } from '@/core/AntennaService.js';
@Injectable()
export class AccountMoveService {
@ -66,6 +67,7 @@ export class AccountMoveService {
private queueService: QueueService,
private systemAccountService: SystemAccountService,
private roleService: RoleService,
private antennaService: AntennaService,
) {
}
@ -127,6 +129,7 @@ export class AccountMoveService {
this.deleteScheduledNotes(src),
this.copyRoles(src, dst),
this.updateLists(src, dst),
this.antennaService.onMoveAccount(src, dst),
]);
} catch {
/* skip if any error happens */

71
packages/backend/src/core/AntennaService.ts
View file

@ -5,18 +5,20 @@
import { Inject, Injectable } from '@nestjs/common';
import * as Redis from 'ioredis';
import { In } from 'typeorm';
import { FanoutTimelineService } from '@/core/FanoutTimelineService.js';
import type { GlobalEvents } from '@/core/GlobalEventService.js';
import { GlobalEventService } from '@/core/GlobalEventService.js';
import { UtilityService } from '@/core/UtilityService.js';
import { bindThis } from '@/decorators.js';
import { DI } from '@/di-symbols.js';
import * as Acct from '@/misc/acct.js';
import type { Packed } from '@/misc/json-schema.js';
import type { AntennasRepository, UserListMembershipsRepository } from '@/models/_.js';
import type { MiAntenna } from '@/models/Antenna.js';
import type { MiNote } from '@/models/Note.js';
import type { MiUser } from '@/models/User.js';
import { GlobalEventService } from '@/core/GlobalEventService.js';
import * as Acct from '@/misc/acct.js';
import type { Packed } from '@/misc/json-schema.js';
import { DI } from '@/di-symbols.js';
import type { AntennasRepository, UserListMembershipsRepository } from '@/models/_.js';
import { UtilityService } from '@/core/UtilityService.js';
import { bindThis } from '@/decorators.js';
import type { GlobalEvents } from '@/core/GlobalEventService.js';
import { FanoutTimelineService } from '@/core/FanoutTimelineService.js';
import { CacheService } from './CacheService.js';
import type { OnApplicationShutdown } from '@nestjs/common';
@Injectable()
@ -37,6 +39,7 @@ export class AntennaService implements OnApplicationShutdown {
@Inject(DI.userListMembershipsRepository)
private userListMembershipsRepository: UserListMembershipsRepository,
private cacheService: CacheService,
private utilityService: UtilityService,
private globalEventService: GlobalEventService,
private fanoutTimelineService: FanoutTimelineService,
@ -111,9 +114,6 @@ export class AntennaService implements OnApplicationShutdown {
@bindThis
public async checkHitAntenna(antenna: MiAntenna, note: (MiNote | Packed<'Note'>), noteUser: { id: MiUser['id']; username: string; host: string | null; isBot: boolean; }): Promise<boolean> {
if (note.visibility === 'specified') return false;
if (note.visibility === 'followers') return false;
if (antenna.excludeNotesInSensitiveChannel && note.channel?.isSensitive) return false;
if (antenna.excludeBots && noteUser.isBot) return false;
@ -122,6 +122,18 @@ export class AntennaService implements OnApplicationShutdown {
if (!antenna.withReplies && note.replyId != null) return false;
if (note.visibility === 'specified') {
if (note.userId !== antenna.userId) {
if (note.visibleUserIds == null) return false;
if (!note.visibleUserIds.includes(antenna.userId)) return false;
}
}
if (note.visibility === 'followers') {
const isFollowing = Object.hasOwn(await this.cacheService.userFollowingsCache.fetch(antenna.userId), note.userId);
if (!isFollowing && antenna.userId !== note.userId) return false;
}
if (antenna.src === 'home') {
// TODO
} else if (antenna.src === 'list') {
@ -212,6 +224,41 @@ export class AntennaService implements OnApplicationShutdown {
return this.antennas;
}
@bindThis
public async onMoveAccount(src: MiUser, dst: MiUser): Promise<void> {
// There is a possibility for users to add the srcUser to their antennas, but it's low, so we don't check it.
// Get MiAntenna[] from cache and filter to select antennas with the src user is in the users list
const srcUserAcct = this.utilityService.getFullApAccount(src.username, src.host).toLowerCase();
const antennasToMigrate = (await this.getAntennas()).filter(antenna => {
return antenna.users.some(user => {
const { username, host } = Acct.parse(user);
return this.utilityService.getFullApAccount(username, host).toLowerCase() === srcUserAcct;
});
});
if (antennasToMigrate.length === 0) return;
const antennaIds = antennasToMigrate.map(x => x.id);
// Update the antennas by appending dst users acct to the users list
const dstUserAcct = '@' + Acct.toString({ username: dst.username, host: dst.host });
await this.antennasRepository.createQueryBuilder('antenna')
.update()
.set({
users: () => 'array_append(antenna.users, :dstUserAcct)',
})
.where('antenna.id IN (:...antennaIds)', { antennaIds })
.setParameters({ dstUserAcct })
.execute();
// announce update to event
for (const newAntenna of await this.antennasRepository.findBy({ id: In(antennaIds) })) {
this.globalEventService.publishInternalEvent('antennaUpdated', newAntenna);
}
}
@bindThis
public dispose(): void {
this.redisForSub.off('message', this.onRedisMessage);

4
packages/backend/src/core/ChatService.ts
View file

@ -232,7 +232,7 @@ export class ChatService {
const packedMessageForTo = await this.chatEntityService.packMessageDetailed(inserted, toUser);
this.globalEventService.publishMainStream(toUser.id, 'newChatMessage', packedMessageForTo);
//this.pushNotificationService.pushNotification(toUser.id, 'newChatMessage', packedMessageForTo);
this.pushNotificationService.pushNotification(toUser.id, 'newChatMessage', packedMessageForTo);
}, 3000);
}
@ -302,7 +302,7 @@ export class ChatService {
if (marker == null) continue;
this.globalEventService.publishMainStream(membershipsOtherThanMe[i].userId, 'newChatMessage', packedMessageForTo);
//this.pushNotificationService.pushNotification(membershipsOtherThanMe[i].userId, 'newChatMessage', packedMessageForTo);
this.pushNotificationService.pushNotification(membershipsOtherThanMe[i].userId, 'newChatMessage', packedMessageForTo);
}
}, 3000);

2
packages/backend/src/core/FanoutTimelineEndpointService.ts
View file

@ -55,7 +55,7 @@ export class FanoutTimelineEndpointService {
}
@bindThis
private async getMiNotes(ps: TimelineOptions): Promise<MiNote[]> {
async getMiNotes(ps: TimelineOptions): Promise<MiNote[]> {
// 呼び出し元と以下の処理をシンプルにするためにdbFallbackを置き換える
if (!ps.useDbFallback) ps.dbFallback = () => Promise.resolve([]);

10
packages/backend/src/core/MfmService.ts
View file

@ -6,7 +6,7 @@
import { URL } from 'node:url';
import { Inject, Injectable } from '@nestjs/common';
import * as parse5 from 'parse5';
import { Window } from 'happy-dom';
import { type Document, type HTMLParagraphElement, Window } from 'happy-dom';
import { DI } from '@/di-symbols.js';
import type { Config } from '@/config.js';
import { intersperse } from '@/misc/prelude/array.js';
@ -23,6 +23,8 @@ type ChildNode = DefaultTreeAdapterMap['childNode'];
const urlRegex = /^https?:\/\/[\w\/:%#@$&?!()\[\]~.,=+\-]+/;
const urlRegexFull = /^https?:\/\/[\w\/:%#@$&?!()\[\]~.,=+\-]+$/;
export type Appender = (document: Document, body: HTMLParagraphElement) => void;
@Injectable()
export class MfmService {
constructor(
@ -343,7 +345,7 @@ export class MfmService {
}
@bindThis
public toHtml(nodes: mfm.MfmNode[] | null, mentionedRemoteUsers: IMentionedRemoteUsers = []) {
public toHtml(nodes: mfm.MfmNode[] | null, mentionedRemoteUsers: IMentionedRemoteUsers = [], additionalAppenders: Appender[] = []) {
if (nodes == null) {
return null;
}
@ -576,6 +578,10 @@ export class MfmService {
appendChildren(nodes, body);
for (const additionalAppender of additionalAppenders) {
additionalAppender(doc, body);
}
const serialized = body.outerHTML;
happyDOM.close().catch(err => {});

9
packages/backend/src/core/NoteCreateService.ts
View file

@ -640,7 +640,14 @@ export class NoteCreateService implements OnApplicationShutdown {
}, {
jobId: `pollEnd:${note.id}`,
delay,
removeOnComplete: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}

1
packages/backend/src/core/PushNotificationService.ts
View file

@ -22,6 +22,7 @@ type PushNotificationsTypes = {
note: Packed<'Note'>;
};
'readAllNotifications': undefined;
newChatMessage: Packed<'ChatMessage'>;
};
// Reduce length because push message servers have character limits

498
packages/backend/src/core/QueueService.ts
View file

@ -5,6 +5,8 @@
import { randomUUID } from 'node:crypto';
import { Inject, Injectable } from '@nestjs/common';
import { MetricsTime, type JobType } from 'bullmq';
import { parse as parseRedisInfo } from 'redis-info';
import type { IActivity } from '@/core/activitypub/type.js';
import type { MiDriveFile } from '@/models/DriveFile.js';
import type { MiWebhook, WebhookEventTypes } from '@/models/Webhook.js';
@ -40,6 +42,18 @@ import type httpSignature from '@peertube/http-signature';
import type * as Bull from 'bullmq';
import { MiNote } from '@/models/Note.js';
export const QUEUE_TYPES = [
'system',
'endedPollNotification',
'deliver',
'inbox',
'db',
'relationship',
'objectStorage',
'userWebhookDeliver',
'systemWebhookDeliver',
] as const;
@Injectable()
export class QueueService {
constructor(
@ -60,50 +74,58 @@ export class QueueService {
this.systemQueue.add('tickCharts', {
}, {
repeat: { pattern: '55 * * * *' },
removeOnComplete: true,
removeOnComplete: 10,
removeOnFail: 30,
});
this.systemQueue.add('resyncCharts', {
}, {
repeat: { pattern: '0 0 * * *' },
removeOnComplete: true,
removeOnComplete: 10,
removeOnFail: 30,
});
this.systemQueue.add('cleanCharts', {
}, {
repeat: { pattern: '0 0 * * *' },
removeOnComplete: true,
removeOnComplete: 10,
removeOnFail: 30,
});
this.systemQueue.add('aggregateRetention', {
}, {
repeat: { pattern: '0 0 * * *' },
removeOnComplete: true,
removeOnComplete: 10,
removeOnFail: 30,
});
this.systemQueue.add('clean', {
}, {
repeat: { pattern: '0 0 * * *' },
removeOnComplete: true,
removeOnComplete: 10,
removeOnFail: 30,
});
this.systemQueue.add('checkExpiredMutings', {
}, {
repeat: { pattern: '*/5 * * * *' },
removeOnComplete: true,
removeOnComplete: 10,
removeOnFail: 30,
});
this.systemQueue.add('bakeBufferedReactions', {
}, {
repeat: { pattern: '0 0 * * *' },
removeOnComplete: true,
removeOnComplete: 10,
removeOnFail: 30,
});
this.systemQueue.add('checkModeratorsActivity', {
}, {
// 毎時30分に起動
repeat: { pattern: '30 * * * *' },
removeOnComplete: true,
removeOnComplete: 10,
removeOnFail: 30,
});
}
@ -125,13 +147,21 @@ export class QueueService {
isSharedInbox,
};
return this.deliverQueue.add(to, data, {
const label = to.replace('https://', '').replace('/inbox', '');
return this.deliverQueue.add(label, data, {
attempts: this.config.deliverJobMaxAttempts ?? 12,
backoff: {
type: 'custom',
},
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -153,12 +183,18 @@ export class QueueService {
backoff: {
type: 'custom',
},
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
};
await this.deliverQueue.addBulk(Array.from(inboxes.entries(), d => ({
name: d[0],
name: d[0].replace('https://', '').replace('/inbox', ''),
data: {
user,
content: contentBody,
@ -179,13 +215,21 @@ export class QueueService {
signature,
};
return this.inboxQueue.add('', data, {
const label = (activity.id ?? '').replace('https://', '').replace('/activity', '');
return this.inboxQueue.add(label, data, {
attempts: this.config.inboxJobMaxAttempts ?? 8,
backoff: {
type: 'custom',
},
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -194,8 +238,14 @@ export class QueueService {
return this.dbQueue.add('deleteDriveFiles', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -204,8 +254,14 @@ export class QueueService {
return this.dbQueue.add('exportCustomEmojis', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -224,8 +280,14 @@ export class QueueService {
return this.dbQueue.add('exportNotes', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -234,8 +296,14 @@ export class QueueService {
return this.dbQueue.add('exportClips', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -244,8 +312,14 @@ export class QueueService {
return this.dbQueue.add('exportFavorites', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -256,8 +330,14 @@ export class QueueService {
excludeMuting,
excludeInactive,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -266,8 +346,14 @@ export class QueueService {
return this.dbQueue.add('exportMuting', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -276,8 +362,14 @@ export class QueueService {
return this.dbQueue.add('exportBlocking', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -286,8 +378,14 @@ export class QueueService {
return this.dbQueue.add('exportUserLists', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -296,8 +394,14 @@ export class QueueService {
return this.dbQueue.add('exportAntennas', {
user: { id: user.id },
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -308,8 +412,14 @@ export class QueueService {
fileId: fileId,
withReplies,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -373,8 +483,14 @@ export class QueueService {
user: { id: user.id },
fileId: fileId,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -384,8 +500,14 @@ export class QueueService {
user: { id: user.id },
fileId: fileId,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -405,8 +527,14 @@ export class QueueService {
name,
data,
opts: {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
},
};
}
@ -417,8 +545,14 @@ export class QueueService {
user: { id: user.id },
fileId: fileId,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -428,8 +562,14 @@ export class QueueService {
user: { id: user.id },
fileId: fileId,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -439,8 +579,14 @@ export class QueueService {
user: { id: user.id },
antenna,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -450,8 +596,14 @@ export class QueueService {
user: { id: user.id },
soft: opts.soft,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -501,8 +653,14 @@ export class QueueService {
withReplies: data.withReplies,
},
opts: {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
...opts,
},
};
@ -513,16 +671,28 @@ export class QueueService {
return this.objectStorageQueue.add('deleteFile', {
key: key,
}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@bindThis
public createCleanRemoteFilesJob() {
return this.objectStorageQueue.add('cleanRemoteFiles', {}, {
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -553,8 +723,14 @@ export class QueueService {
backoff: {
type: 'custom',
},
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@ -584,21 +760,201 @@ export class QueueService {
backoff: {
type: 'custom',
},
removeOnComplete: true,
removeOnFail: true,
removeOnComplete: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 30,
},
removeOnFail: {
age: 3600 * 24 * 7, // keep up to 7 days
count: 100,
},
});
}
@bindThis
public destroy() {
this.deliverQueue.once('cleaned', (jobs, status) => {
//deliverLogger.succ(`Cleaned ${jobs.length} ${status} jobs`);
});
this.deliverQueue.clean(0, 0, 'delayed');
private getQueue(type: typeof QUEUE_TYPES[number]): Bull.Queue {
switch (type) {
case 'system': return this.systemQueue;
case 'endedPollNotification': return this.endedPollNotificationQueue;
case 'deliver': return this.deliverQueue;
case 'inbox': return this.inboxQueue;
case 'db': return this.dbQueue;
case 'relationship': return this.relationshipQueue;
case 'objectStorage': return this.objectStorageQueue;
case 'userWebhookDeliver': return this.userWebhookDeliverQueue;
case 'systemWebhookDeliver': return this.systemWebhookDeliverQueue;
default: throw new Error(`Unrecognized queue type: ${type}`);
}
}
this.inboxQueue.once('cleaned', (jobs, status) => {
//inboxLogger.succ(`Cleaned ${jobs.length} ${status} jobs`);
@bindThis
public async queueClear(queueType: typeof QUEUE_TYPES[number], state: '*' | 'completed' | 'wait' | 'active' | 'paused' | 'prioritized' | 'delayed' | 'failed') {
const queue = this.getQueue(queueType);
if (state === '*') {
await Promise.all([
queue.clean(0, 0, 'completed'),
queue.clean(0, 0, 'wait'),
queue.clean(0, 0, 'active'),
queue.clean(0, 0, 'paused'),
queue.clean(0, 0, 'prioritized'),
queue.clean(0, 0, 'delayed'),
queue.clean(0, 0, 'failed'),
]);
} else {
await queue.clean(0, 0, state);
}
}
@bindThis
public async queuePromoteJobs(queueType: typeof QUEUE_TYPES[number]) {
const queue = this.getQueue(queueType);
await queue.promoteJobs();
}
@bindThis
public async queueRetryJob(queueType: typeof QUEUE_TYPES[number], jobId: string) {
const queue = this.getQueue(queueType);
const job: Bull.Job | null = await queue.getJob(jobId);
if (job) {
if (job.finishedOn != null) {
await job.retry();
} else {
await job.promote();
}
}
}
@bindThis
public async queueRemoveJob(queueType: typeof QUEUE_TYPES[number], jobId: string) {
const queue = this.getQueue(queueType);
const job: Bull.Job | null = await queue.getJob(jobId);
if (job) {
await job.remove();
}
}
@bindThis
private packJobData(job: Bull.Job) {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
const stacktrace = job.stacktrace ? job.stacktrace.filter(Boolean) : [];
stacktrace.reverse();
return {
id: job.id,
name: job.name,
data: job.data,
opts: job.opts,
timestamp: job.timestamp,
processedOn: job.processedOn,
processedBy: job.processedBy,
finishedOn: job.finishedOn,
progress: job.progress,
attempts: job.attemptsMade,
delay: job.delay,
failedReason: job.failedReason,
stacktrace: stacktrace,
returnValue: job.returnvalue,
isFailed: !!job.failedReason || (Array.isArray(stacktrace) && stacktrace.length > 0),
};
}
@bindThis
public async queueGetJob(queueType: typeof QUEUE_TYPES[number], jobId: string) {
const queue = this.getQueue(queueType);
const job: Bull.Job | null = await queue.getJob(jobId);
if (job) {
return this.packJobData(job);
} else {
throw new Error(`Job not found: ${jobId}`);
}
}
@bindThis
public async queueGetJobs(queueType: typeof QUEUE_TYPES[number], jobTypes: JobType[], search?: string) {
const RETURN_LIMIT = 100;
const queue = this.getQueue(queueType);
let jobs: Bull.Job[];
if (search) {
jobs = await queue.getJobs(jobTypes, 0, 1000);
jobs = jobs.filter(job => {
const jobString = JSON.stringify(job).toLowerCase();
return search.toLowerCase().split(' ').every(term => {
return jobString.includes(term);
});
});
jobs = jobs.slice(0, RETURN_LIMIT);
} else {
jobs = await queue.getJobs(jobTypes, 0, RETURN_LIMIT);
}
return jobs.map(job => this.packJobData(job));
}
@bindThis
public async queueGetQueues() {
const fetchings = QUEUE_TYPES.map(async type => {
const queue = this.getQueue(type);
const counts = await queue.getJobCounts();
const isPaused = await queue.isPaused();
const metrics_completed = await queue.getMetrics('completed', 0, MetricsTime.ONE_WEEK);
const metrics_failed = await queue.getMetrics('failed', 0, MetricsTime.ONE_WEEK);
return {
name: type,
counts: counts,
isPaused,
metrics: {
completed: metrics_completed,
failed: metrics_failed,
},
};
});
this.inboxQueue.clean(0, 0, 'delayed');
return await Promise.all(fetchings);
}
@bindThis
public async queueGetQueue(queueType: typeof QUEUE_TYPES[number]) {
const queue = this.getQueue(queueType);
const counts = await queue.getJobCounts();
const isPaused = await queue.isPaused();
const metrics_completed = await queue.getMetrics('completed', 0, MetricsTime.ONE_WEEK);
const metrics_failed = await queue.getMetrics('failed', 0, MetricsTime.ONE_WEEK);
const db = parseRedisInfo(await (await queue.client).info());
return {
name: queueType,
qualifiedName: queue.qualifiedName,
counts: counts,
isPaused,
metrics: {
completed: metrics_completed,
failed: metrics_failed,
},
db: {
version: db.redis_version,
mode: db.redis_mode,
runId: db.run_id,
processId: db.process_id,
port: parseInt(db.tcp_port),
os: db.os,
uptime: parseInt(db.uptime_in_seconds),
memory: {
total: parseInt(db.total_system_memory) || parseInt(db.maxmemory),
used: parseInt(db.used_memory),
fragmentationRatio: parseInt(db.mem_fragmentation_ratio),
peak: parseInt(db.used_memory_peak),
},
clients: {
connected: parseInt(db.connected_clients),
blocked: parseInt(db.blocked_clients),
},
},
};
}
}

46
packages/backend/src/core/SystemAccountService.ts
View file

@ -5,11 +5,14 @@
import { randomUUID } from 'node:crypto';
import { Inject, Injectable } from '@nestjs/common';
import type { OnApplicationShutdown } from '@nestjs/common';
import { DataSource, IsNull } from 'typeorm';
import * as Redis from 'ioredis';
import bcrypt from 'bcryptjs';
import { MiLocalUser, MiUser } from '@/models/User.js';
import { MiSystemAccount, MiUsedUsername, MiUserKeypair, MiUserProfile, type UsersRepository, type SystemAccountsRepository } from '@/models/_.js';
import type { MiMeta, UserProfilesRepository } from '@/models/_.js';
import type { GlobalEvents } from '@/core/GlobalEventService.js';
import { MemoryKVCache } from '@/misc/cache.js';
import { DI } from '@/di-symbols.js';
import { bindThis } from '@/decorators.js';
@ -20,10 +23,13 @@ import { genRsaKeyPair } from '@/misc/gen-key-pair.js';
export const SYSTEM_ACCOUNT_TYPES = ['actor', 'relay', 'proxy'] as const;
@Injectable()
export class SystemAccountService {
export class SystemAccountService implements OnApplicationShutdown {
private cache: MemoryKVCache<MiLocalUser>;
constructor(
@Inject(DI.redisForSub)
private redisForSub: Redis.Redis,
@Inject(DI.db)
private db: DataSource,
@ -42,6 +48,31 @@ export class SystemAccountService {
private idService: IdService,
) {
this.cache = new MemoryKVCache<MiLocalUser>(1000 * 60 * 10); // 10m
this.redisForSub.on('message', this.onMessage);
}
@bindThis
private async onMessage(_: string, data: string): Promise<void> {
const obj = JSON.parse(data);
if (obj.channel === 'internal') {
const { type, body } = obj.message as GlobalEvents['internal']['payload'];
switch (type) {
case 'metaUpdated': {
if (body.before != null && body.before.name !== body.after.name) {
for (const account of SYSTEM_ACCOUNT_TYPES) {
await this.updateCorrespondingUserProfile(account, {
name: body.after.name,
});
}
}
break;
}
default:
break;
}
}
}
@bindThis
@ -151,7 +182,7 @@ export class SystemAccountService {
@bindThis
public async updateCorrespondingUserProfile(type: typeof SYSTEM_ACCOUNT_TYPES[number], extra: {
name?: string;
name?: string | null;
description?: MiUserProfile['description'];
}): Promise<MiLocalUser> {
const user = await this.fetch(type);
@ -187,4 +218,15 @@ export class SystemAccountService {
public async getProxyActor() {
return await this.fetch('proxy');
}
@bindThis
public dispose(): void {
this.redisForSub.off('message', this.onMessage);
this.cache.dispose();
}
@bindThis
public onApplicationShutdown(signal?: string): void {
this.dispose();
}
}

12
packages/backend/src/core/WebhookTestService.ts
View file

@ -431,8 +431,8 @@ export class WebhookTestService {
name: user.name,
username: user.username,
host: user.host,
avatarUrl: user.avatarUrl,
avatarBlurhash: user.avatarBlurhash,
avatarUrl: user.avatarId == null ? null : user.avatarUrl,
avatarBlurhash: user.avatarId == null ? null : user.avatarBlurhash,
avatarDecorations: user.avatarDecorations.map(it => ({
id: it.id,
angle: it.angle,
@ -464,10 +464,10 @@ export class WebhookTestService {
createdAt: new Date().toISOString(),
updatedAt: user.updatedAt?.toISOString() ?? null,
lastFetchedAt: user.lastFetchedAt?.toISOString() ?? null,
bannerUrl: user.bannerUrl,
bannerBlurhash: user.bannerBlurhash,
backgroundUrl: user.backgroundUrl,
backgroundBlurhash: user.backgroundBlurhash,
bannerUrl: user.bannerId == null ? null : user.bannerUrl,
bannerBlurhash: user.bannerId == null ? null : user.bannerBlurhash,
backgroundUrl: user.backgroundId == null ? null : user.backgroundUrl,
backgroundBlurhash: user.backgroundId == null ? null : user.backgroundBlurhash,
listenbrainz: null,
isLocked: user.isLocked,
isSilenced: false,

10
packages/backend/src/core/activitypub/ApMfmService.ts
View file

@ -5,7 +5,7 @@
import { Injectable } from '@nestjs/common';
import * as mfm from '@transfem-org/sfm-js';
import { MfmService } from '@/core/MfmService.js';
import { MfmService, Appender } from '@/core/MfmService.js';
import type { MiNote } from '@/models/Note.js';
import { bindThis } from '@/decorators.js';
import { extractApHashtagObjects } from './models/tag.js';
@ -25,17 +25,17 @@ export class ApMfmService {
}
@bindThis
public getNoteHtml(note: Pick<MiNote, 'text' | 'mentionedRemoteUsers'>, apAppend?: string) {
public getNoteHtml(note: Pick<MiNote, 'text' | 'mentionedRemoteUsers'>, additionalAppender: Appender[] = []) {
let noMisskeyContent = false;
const srcMfm = (note.text ?? '') + (apAppend ?? '');
const srcMfm = (note.text ?? '');
const parsed = mfm.parse(srcMfm);
if (!apAppend && parsed?.every(n => ['text', 'unicodeEmoji', 'emojiCode', 'mention', 'hashtag', 'url'].includes(n.type))) {
if (!additionalAppender.length && parsed.every(n => ['text', 'unicodeEmoji', 'emojiCode', 'mention', 'hashtag', 'url'].includes(n.type))) {
noMisskeyContent = true;
}
const content = this.mfmService.toHtml(parsed, note.mentionedRemoteUsers ? JSON.parse(note.mentionedRemoteUsers) : []);
const content = this.mfmService.toHtml(parsed, note.mentionedRemoteUsers ? JSON.parse(note.mentionedRemoteUsers) : [], additionalAppender);
return {
content,

20
packages/backend/src/core/activitypub/ApRendererService.ts
View file

@ -20,7 +20,7 @@ import type { MiEmoji } from '@/models/Emoji.js';
import type { MiPoll } from '@/models/Poll.js';
import type { MiPollVote } from '@/models/PollVote.js';
import { UserKeypairService } from '@/core/UserKeypairService.js';
import { MfmService } from '@/core/MfmService.js';
import { MfmService, type Appender } from '@/core/MfmService.js';
import { UserEntityService } from '@/core/entities/UserEntityService.js';
import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
import type { MiUserKeypair } from '@/models/UserKeypair.js';
@ -468,10 +468,24 @@ export class ApRendererService {
poll = await this.pollsRepository.findOneBy({ noteId: note.id });
}
let apAppend = '';
const apAppend: Appender[] = [];
if (quote) {
apAppend += `\n\nRE: ${quote}`;
// Append quote link as `<br><br><span class="quote-inline">RE: <a href="...">...</a></span>`
// the claas name `quote-inline` is used in non-misskey clients for styling quote notes.
// For compatibility, the span part should be kept as possible.
apAppend.push((doc, body) => {
body.appendChild(doc.createElement('br'));
body.appendChild(doc.createElement('br'));
const span = doc.createElement('span');
span.className = 'quote-inline';
span.appendChild(doc.createTextNode('RE: '));
const link = doc.createElement('a');
link.setAttribute('href', quote);
link.textContent = quote;
span.appendChild(link);
body.appendChild(span);
});
}
let summary = note.cw === '' ? String.fromCharCode(0x200B) : note.cw;

12
packages/backend/src/core/entities/UserEntityService.ts
View file

@ -584,8 +584,8 @@ export class UserEntityService implements OnModuleInit {
name: user.name,
username: user.username,
host: user.host,
avatarUrl: user.avatarUrl ?? this.getIdenticonUrl(user),
avatarBlurhash: user.avatarBlurhash,
avatarUrl: (user.avatarId == null ? null : user.avatarUrl) ?? this.getIdenticonUrl(user),
avatarBlurhash: (user.avatarId == null ? null : user.avatarBlurhash),
description: mastoapi ? mastoapi.description : profile ? profile.description : '',
createdAt: this.idService.parse(user.id).date.toISOString(),
avatarDecorations: user.avatarDecorations.length > 0 ? this.avatarDecorationService.getAll().then(decorations => user.avatarDecorations.filter(ud => decorations.some(d => d.id === ud.id)).map(ud => ({
@ -643,10 +643,10 @@ export class UserEntityService implements OnModuleInit {
: null,
updatedAt: user.updatedAt ? user.updatedAt.toISOString() : null,
lastFetchedAt: user.lastFetchedAt ? user.lastFetchedAt.toISOString() : null,
bannerUrl: user.bannerUrl,
bannerBlurhash: user.bannerBlurhash,
backgroundUrl: user.backgroundUrl,
backgroundBlurhash: user.backgroundBlurhash,
bannerUrl: user.bannerId == null ? null : user.bannerUrl,
bannerBlurhash: user.bannerId == null ? null : user.bannerBlurhash,
backgroundUrl: user.backgroundUrl == null ? null : user.backgroundUrl,
backgroundBlurhash: user.backgroundBlurhash == null ? null : user.backgroundBlurhash,
isLocked: user.isLocked,
isSuspended: user.isSuspended,
location: profile!.location,

2
packages/backend/src/models/Note.ts
View file

@ -10,6 +10,7 @@ import { MiUser } from './User.js';
import { MiChannel } from './Channel.js';
import type { MiDriveFile } from './DriveFile.js';
@Index(['userId', 'id'])
@Entity('note')
export class MiNote {
@PrimaryColumn(id())
@ -71,7 +72,6 @@ export class MiNote {
})
public cw: string | null;
@Index()
@Column({
...id(),
comment: 'The ID of author.',

4
packages/backend/src/models/User.ts
View file

@ -132,11 +132,13 @@ export class MiUser {
@JoinColumn()
public background: MiDriveFile | null;
// avatarId が null になったとしてもこれが null でない可能性があるため、このフィールドを使うときは avatarId の non-null チェックをすること
@Column('varchar', {
length: 512, nullable: true,
})
public avatarUrl: string | null;
// bannerId が null になったとしてもこれが null でない可能性があるため、このフィールドを使うときは bannerId の non-null チェックをすること
@Column('varchar', {
length: 512, nullable: true,
})
@ -147,11 +149,13 @@ export class MiUser {
})
public backgroundUrl: string | null;
// avatarId が null になったとしてもこれが null でない可能性があるため、このフィールドを使うときは avatarId の non-null チェックをすること
@Column('varchar', {
length: 128, nullable: true,
})
public avatarBlurhash: string | null;
// bannerId が null になったとしてもこれが null でない可能性があるため、このフィールドを使うときは bannerId の non-null チェックをすること
@Column('varchar', {
length: 128, nullable: true,
})

89
packages/backend/src/models/_.ts
View file

@ -3,30 +3,48 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { FindOneOptions, InsertQueryBuilder, ObjectLiteral, Repository, SelectQueryBuilder } from 'typeorm';
import {
FindOneOptions,
InsertQueryBuilder,
ObjectLiteral,
QueryRunner,
Repository,
SelectQueryBuilder,
} from 'typeorm';
import { PostgresConnectionOptions } from 'typeorm/driver/postgres/PostgresConnectionOptions.js';
import { RelationCountLoader } from 'typeorm/query-builder/relation-count/RelationCountLoader.js';
import { RelationIdLoader } from 'typeorm/query-builder/relation-id/RelationIdLoader.js';
import { RawSqlResultsToEntityTransformer } from 'typeorm/query-builder/transformer/RawSqlResultsToEntityTransformer.js';
import { SkLatestNote } from '@/models/LatestNote.js';
import { MiAbuseUserReport } from '@/models/AbuseUserReport.js';
import {
RawSqlResultsToEntityTransformer,
} from 'typeorm/query-builder/transformer/RawSqlResultsToEntityTransformer.js';
import { MiAbuseReportNotificationRecipient } from '@/models/AbuseReportNotificationRecipient.js';
import { MiAbuseUserReport } from '@/models/AbuseUserReport.js';
import { MiAccessToken } from '@/models/AccessToken.js';
import { MiAd } from '@/models/Ad.js';
import { MiAnnouncement } from '@/models/Announcement.js';
import { MiAnnouncementRead } from '@/models/AnnouncementRead.js';
import { MiAntenna } from '@/models/Antenna.js';
import { MiApp } from '@/models/App.js';
import { MiAvatarDecoration } from '@/models/AvatarDecoration.js';
import { MiAuthSession } from '@/models/AuthSession.js';
import { MiAvatarDecoration } from '@/models/AvatarDecoration.js';
import { MiBlocking } from '@/models/Blocking.js';
import { MiChannelFollowing } from '@/models/ChannelFollowing.js';
import { MiBubbleGameRecord } from '@/models/BubbleGameRecord.js';
import { MiChannel } from '@/models/Channel.js';
import { MiChannelFavorite } from '@/models/ChannelFavorite.js';
import { MiChannelFollowing } from '@/models/ChannelFollowing.js';
import { MiChatApproval } from '@/models/ChatApproval.js';
import { MiChatMessage } from '@/models/ChatMessage.js';
import { MiChatRoom } from '@/models/ChatRoom.js';
import { MiChatRoomInvitation } from '@/models/ChatRoomInvitation.js';
import { MiChatRoomMembership } from '@/models/ChatRoomMembership.js';
import { MiClip } from '@/models/Clip.js';
import { MiClipNote } from '@/models/ClipNote.js';
import { MiClipFavorite } from '@/models/ClipFavorite.js';
import { MiClipNote } from '@/models/ClipNote.js';
import { MiDriveFile } from '@/models/DriveFile.js';
import { MiDriveFolder } from '@/models/DriveFolder.js';
import { MiEmoji } from '@/models/Emoji.js';
import { MiFlash } from '@/models/Flash.js';
import { MiFlashLike } from '@/models/FlashLike.js';
import { MiFollowing } from '@/models/Following.js';
import { MiFollowRequest } from '@/models/FollowRequest.js';
import { MiGalleryLike } from '@/models/GalleryLike.js';
@ -36,10 +54,10 @@ import { MiInstance } from '@/models/Instance.js';
import { MiMeta } from '@/models/Meta.js';
import { MiModerationLog } from '@/models/ModerationLog.js';
import { MiMuting } from '@/models/Muting.js';
import { MiRenoteMuting } from '@/models/RenoteMuting.js';
import { MiNote } from '@/models/Note.js';
import { MiNoteFavorite } from '@/models/NoteFavorite.js';
import { MiNoteReaction } from '@/models/NoteReaction.js';
import { MiNoteSchedule } from '@/models/NoteSchedule.js';
import { MiNoteThreadMuting } from '@/models/NoteThreadMuting.js';
import { MiPage } from '@/models/Page.js';
import { MiPageLike } from '@/models/PageLike.js';
@ -51,47 +69,43 @@ import { MiPromoRead } from '@/models/PromoRead.js';
import { MiRegistrationTicket } from '@/models/RegistrationTicket.js';
import { MiRegistryItem } from '@/models/RegistryItem.js';
import { MiRelay } from '@/models/Relay.js';
import { MiRenoteMuting } from '@/models/RenoteMuting.js';
import { MiRetentionAggregation } from '@/models/RetentionAggregation.js';
import { MiReversiGame } from '@/models/ReversiGame.js';
import { MiRole } from '@/models/Role.js';
import { MiRoleAssignment } from '@/models/RoleAssignment.js';
import { MiSignin } from '@/models/Signin.js';
import { MiSwSubscription } from '@/models/SwSubscription.js';
import { MiSystemAccount } from '@/models/SystemAccount.js';
import { MiSystemWebhook } from '@/models/SystemWebhook.js';
import { MiUsedUsername } from '@/models/UsedUsername.js';
import { MiUser } from '@/models/User.js';
import { MiUserIp } from '@/models/UserIp.js';
import { MiUserKeypair } from '@/models/UserKeypair.js';
import { MiUserList } from '@/models/UserList.js';
import { MiUserListFavorite } from '@/models/UserListFavorite.js';
import { MiUserListMembership } from '@/models/UserListMembership.js';
import { MiUserMemo } from '@/models/UserMemo.js';
import { MiUserNotePining } from '@/models/UserNotePining.js';
import { MiUserPending } from '@/models/UserPending.js';
import { MiUserProfile } from '@/models/UserProfile.js';
import { MiUserPublickey } from '@/models/UserPublickey.js';
import { MiUserSecurityKey } from '@/models/UserSecurityKey.js';
import { MiUserMemo } from '@/models/UserMemo.js';
import { MiWebhook } from '@/models/Webhook.js';
import { MiSystemWebhook } from '@/models/SystemWebhook.js';
import { MiChannel } from '@/models/Channel.js';
import { MiRetentionAggregation } from '@/models/RetentionAggregation.js';
import { MiRole } from '@/models/Role.js';
import { MiRoleAssignment } from '@/models/RoleAssignment.js';
import { MiFlash } from '@/models/Flash.js';
import { MiFlashLike } from '@/models/FlashLike.js';
import { MiUserListFavorite } from '@/models/UserListFavorite.js';
import type { QueryDeepPartialEntity } from 'typeorm/query-builder/QueryPartialEntity.js';
import { NoteEdit } from '@/models/NoteEdit.js';
import { MiChatMessage } from '@/models/ChatMessage.js';
import { MiChatRoom } from '@/models/ChatRoom.js';
import { MiChatRoomMembership } from '@/models/ChatRoomMembership.js';
import { MiChatRoomInvitation } from '@/models/ChatRoomInvitation.js';
import { MiChatApproval } from '@/models/ChatApproval.js';
import { MiBubbleGameRecord } from '@/models/BubbleGameRecord.js';
import { MiReversiGame } from '@/models/ReversiGame.js';
import { MiNoteSchedule } from '@/models/NoteSchedule.js';
import { SkApInboxLog } from '@/models/SkApInboxLog.js';
import { SkApFetchLog } from '@/models/SkApFetchLog.js';
import { SkApContext } from '@/models/SkApContext.js';
import type { QueryDeepPartialEntity } from 'typeorm/query-builder/QueryPartialEntity.js';
import { SkLatestNote } from '@/models/LatestNote.js';
export interface MiRepository<T extends ObjectLiteral> {
createTableColumnNames(this: Repository<T> & MiRepository<T>): string[];
insertOne(this: Repository<T> & MiRepository<T>, entity: QueryDeepPartialEntity<T>, findOptions?: Pick<FindOneOptions<T>, 'relations'>): Promise<T>;
insertOneImpl(this: Repository<T> & MiRepository<T>, entity: QueryDeepPartialEntity<T>, findOptions?: Pick<FindOneOptions<T>, 'relations'>, queryRunner?: QueryRunner): Promise<T>;
selectAliasColumnNames(this: Repository<T> & MiRepository<T>, queryBuilder: InsertQueryBuilder<T>, builder: SelectQueryBuilder<T>): void;
}
@ -100,6 +114,21 @@ export const miRepository = {
return this.metadata.columns.filter(column => column.isSelect && !column.isVirtual).map(column => column.databaseName);
},
async insertOne(entity, findOptions?) {
const opt = this.manager.connection.options as PostgresConnectionOptions;
if (opt.replication) {
const queryRunner = this.manager.connection.createQueryRunner('master');
try {
return this.insertOneImpl(entity, findOptions, queryRunner);
} finally {
await queryRunner.release();
}
} else {
return this.insertOneImpl(entity, findOptions);
}
},
async insertOneImpl(entity, findOptions?, queryRunner?) {
// ---- insert + returningの結果を共通テーブル式(CTE)に保持するクエリを生成 ----
const queryBuilder = this.createQueryBuilder().insert().values(entity);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const mainAlias = queryBuilder.expressionMap.mainAlias!;
@ -107,7 +136,9 @@ export const miRepository = {
mainAlias.name = 't';
const columnNames = this.createTableColumnNames();
queryBuilder.returning(columnNames.reduce((a, c) => `${a}, ${queryBuilder.escape(c)}`, '').slice(2));
const builder = this.createQueryBuilder().addCommonTableExpression(queryBuilder, 'cte', { columnNames });
// ---- 共通テーブル式(CTE)から結果を取得 ----
const builder = this.createQueryBuilder(undefined, queryRunner).addCommonTableExpression(queryBuilder, 'cte', { columnNames });
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
builder.expressionMap.mainAlias!.tablePath = 'cte';
this.selectAliasColumnNames(queryBuilder, builder);
@ -216,7 +247,9 @@ export {
};
export type AbuseUserReportsRepository = Repository<MiAbuseUserReport> & MiRepository<MiAbuseUserReport>;
export type AbuseReportNotificationRecipientRepository = Repository<MiAbuseReportNotificationRecipient> & MiRepository<MiAbuseReportNotificationRecipient>;
export type AbuseReportNotificationRecipientRepository =
Repository<MiAbuseReportNotificationRecipient>
& MiRepository<MiAbuseReportNotificationRecipient>;
export type AccessTokensRepository = Repository<MiAccessToken> & MiRepository<MiAccessToken>;
export type AdsRepository = Repository<MiAd> & MiRepository<MiAd>;
export type AnnouncementsRepository = Repository<MiAnnouncement> & MiRepository<MiAnnouncement>;

31
packages/backend/src/postgres.ts
View file

@ -5,7 +5,7 @@
// https://github.com/typeorm/typeorm/issues/2400
import pg from 'pg';
import { DataSource, Logger } from 'typeorm';
import { DataSource, Logger, type QueryRunner } from 'typeorm';
import * as highlight from 'cli-highlight';
import { entities as charts } from '@/core/chart/entities.js';
import { Config } from '@/config.js';
@ -102,6 +102,7 @@ const sqlLogger = dbLogger.createSubLogger('sql', 'gray');
export type LoggerProps = {
disableQueryTruncation?: boolean;
enableQueryParamLogging?: boolean;
printReplicationMode?: boolean,
};
function highlightSql(sql: string) {
@ -127,8 +128,10 @@ class MyCustomLogger implements Logger {
}
@bindThis
private transformQueryLog(sql: string) {
let modded = sql;
private transformQueryLog(sql: string, opts?: {
prefix?: string;
}) {
let modded = opts?.prefix ? opts.prefix + sql : sql;
if (!this.props.disableQueryTruncation) {
modded = truncateSql(modded);
}
@ -146,18 +149,27 @@ class MyCustomLogger implements Logger {
}
@bindThis
public logQuery(query: string, parameters?: any[]) {
sqlLogger.info(this.transformQueryLog(query), this.transformParameters(parameters));
public logQuery(query: string, parameters?: any[], queryRunner?: QueryRunner) {
const prefix = (this.props.printReplicationMode && queryRunner)
? `[${queryRunner.getReplicationMode()}] `
: undefined;
sqlLogger.info(this.transformQueryLog(query, { prefix }), this.transformParameters(parameters));
}
@bindThis
public logQueryError(error: string, query: string, parameters?: any[]) {
sqlLogger.error(this.transformQueryLog(query), this.transformParameters(parameters));
public logQueryError(error: string, query: string, parameters?: any[], queryRunner?: QueryRunner) {
const prefix = (this.props.printReplicationMode && queryRunner)
? `[${queryRunner.getReplicationMode()}] `
: undefined;
sqlLogger.error(this.transformQueryLog(query, { prefix }), this.transformParameters(parameters));
}
@bindThis
public logQuerySlow(time: number, query: string, parameters?: any[]) {
sqlLogger.warn(this.transformQueryLog(query), this.transformParameters(parameters));
public logQuerySlow(time: number, query: string, parameters?: any[], queryRunner?: QueryRunner) {
const prefix = (this.props.printReplicationMode && queryRunner)
? `[${queryRunner.getReplicationMode()}] `
: undefined;
sqlLogger.warn(this.transformQueryLog(query, { prefix }), this.transformParameters(parameters));
}
@bindThis
@ -306,6 +318,7 @@ export function createPostgresDataSource(config: Config) {
? new MyCustomLogger({
disableQueryTruncation: config.logging?.sql?.disableQueryTruncation,
enableQueryParamLogging: config.logging?.sql?.enableQueryParamLogging,
printReplicationMode: !!config.dbReplications,
})
: undefined,
maxQueryExecutionTime: 300,

20
packages/backend/src/queue/QueueProcessorService.ts
View file

@ -47,7 +47,7 @@ import { CleanProcessorService } from './processors/CleanProcessorService.js';
import { AggregateRetentionProcessorService } from './processors/AggregateRetentionProcessorService.js';
import { ScheduleNotePostProcessorService } from './processors/ScheduleNotePostProcessorService.js';
import { QueueLoggerService } from './QueueLoggerService.js';
import { QUEUE, baseQueueOptions } from './const.js';
import { QUEUE, baseWorkerOptions } from './const.js';
import { ImportNotesProcessorService } from './processors/ImportNotesProcessorService.js';
// ref. https://github.com/misskey-dev/misskey/pull/7635#issue-971097019
@ -186,7 +186,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return processer(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.SYSTEM),
...baseWorkerOptions(this.config, QUEUE.SYSTEM),
autorun: false,
});
@ -251,7 +251,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return processer(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.DB),
...baseWorkerOptions(this.config, QUEUE.DB),
autorun: false,
});
@ -283,7 +283,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return this.deliverProcessorService.process(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.DELIVER),
...baseWorkerOptions(this.config, QUEUE.DELIVER),
autorun: false,
concurrency: this.config.deliverJobConcurrency ?? 128,
limiter: {
@ -323,7 +323,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return this.inboxProcessorService.process(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.INBOX),
...baseWorkerOptions(this.config, QUEUE.INBOX),
autorun: false,
concurrency: this.config.inboxJobConcurrency ?? 16,
limiter: {
@ -363,7 +363,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return this.userWebhookDeliverProcessorService.process(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.USER_WEBHOOK_DELIVER),
...baseWorkerOptions(this.config, QUEUE.USER_WEBHOOK_DELIVER),
autorun: false,
concurrency: 64,
limiter: {
@ -403,7 +403,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return this.systemWebhookDeliverProcessorService.process(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.SYSTEM_WEBHOOK_DELIVER),
...baseWorkerOptions(this.config, QUEUE.SYSTEM_WEBHOOK_DELIVER),
autorun: false,
concurrency: 16,
limiter: {
@ -453,7 +453,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return processer(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.RELATIONSHIP),
...baseWorkerOptions(this.config, QUEUE.RELATIONSHIP),
autorun: false,
concurrency: this.config.relationshipJobConcurrency ?? 16,
limiter: {
@ -498,7 +498,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return processer(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.OBJECT_STORAGE),
...baseWorkerOptions(this.config, QUEUE.OBJECT_STORAGE),
autorun: false,
concurrency: 16,
});
@ -531,7 +531,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
return this.endedPollNotificationProcessorService.process(job);
}
}, {
...baseQueueOptions(this.config, QUEUE.ENDED_POLL_NOTIFICATION),
...baseWorkerOptions(this.config, QUEUE.ENDED_POLL_NOTIFICATION),
autorun: false,
});
}

10
packages/backend/src/queue/const.ts
View file

@ -3,6 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { MetricsTime } from 'bullmq';
import { Config } from '@/config.js';
import type * as Bull from 'bullmq';
@ -28,3 +29,12 @@ export function baseQueueOptions(config: Config, queueName: typeof QUEUE[keyof t
prefix: config.redisForJobQueue.prefix ? `${config.redisForJobQueue.prefix}:queue:${queueName}` : `queue:${queueName}`,
};
}
export function baseWorkerOptions(config: Config, queueName: typeof QUEUE[keyof typeof QUEUE]): Bull.WorkerOptions {
return {
...baseQueueOptions(config, queueName),
metrics: {
maxDataPoints: MetricsTime.ONE_WEEK,
},
};
}

48
packages/backend/src/server/ActivityPubServerService.ts
View file

@ -38,6 +38,7 @@ import * as Acct from '@/misc/acct.js';
import { CacheService } from '@/core/CacheService.js';
import type { FastifyInstance, FastifyRequest, FastifyReply, FastifyPluginOptions, FastifyBodyParser } from 'fastify';
import type { FindOptionsWhere } from 'typeorm';
import { FanoutTimelineEndpointService } from '@/core/FanoutTimelineEndpointService.js';
const ACTIVITY_JSON = 'application/activity+json; charset=utf-8';
const LD_JSON = 'application/ld+json; profile="https://www.w3.org/ns/activitystreams"; charset=utf-8';
@ -85,6 +86,7 @@ export class ActivityPubServerService {
private queueService: QueueService,
private userKeypairService: UserKeypairService,
private queryService: QueryService,
private fanoutTimelineEndpointService: FanoutTimelineEndpointService,
private loggerService: LoggerService,
private readonly cacheService: CacheService,
) {
@ -613,16 +615,28 @@ export class ActivityPubServerService {
const partOf = `${this.config.url}/users/${userId}/outbox`;
if (page) {
const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), sinceId, untilId)
.andWhere('note.userId = :userId', { userId: user.id })
.andWhere(new Brackets(qb => {
qb
.where('note.visibility = \'public\'')
.orWhere('note.visibility = \'home\'');
}))
.andWhere('note.localOnly = FALSE');
const notes = await query.limit(limit).getMany();
const notes = this.meta.enableFanoutTimeline ? await this.fanoutTimelineEndpointService.getMiNotes({
sinceId: sinceId ?? null,
untilId: untilId ?? null,
limit: limit,
allowPartial: false, // Possibly true? IDK it's OK for ordered collection.
me: null,
redisTimelines: [
`userTimeline:${user.id}`,
`userTimelineWithReplies:${user.id}`,
],
useDbFallback: true,
ignoreAuthorFromMute: true,
excludePureRenotes: false,
noteFilter: (note) => {
if (note.visibility !== 'home' && note.visibility !== 'public') return false;
if (note.localOnly) return false;
return true;
},
dbFallback: async (untilId, sinceId, limit) => {
return await this.getUserNotesFromDb(sinceId, untilId, limit, user.id);
},
}) : await this.getUserNotesFromDb(sinceId ?? null, untilId ?? null, limit, user.id);
if (sinceId) notes.reverse();
@ -659,6 +673,20 @@ export class ActivityPubServerService {
}
}
@bindThis
private async getUserNotesFromDb(untilId: string | null, sinceId: string | null, limit: number, userId: MiUser['id']) {
return await this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), sinceId, untilId)
.andWhere('note.userId = :userId', { userId })
.andWhere(new Brackets(qb => {
qb
.where('note.visibility = \'public\'')
.orWhere('note.visibility = \'home\'');
}))
.andWhere('note.localOnly = FALSE')
.limit(limit)
.getMany();
}
@bindThis
private async userInfo(request: FastifyRequest, reply: FastifyReply, user: MiUser | null, redact = false) {
if (this.meta.federation === 'none') {

2
packages/backend/src/server/ServerService.ts
View file

@ -223,7 +223,7 @@ export class ServerService implements OnApplicationShutdown {
reply.header('Cache-Control', 'public, max-age=86400');
if (user) {
reply.redirect(user.avatarUrl ?? this.userEntityService.getIdenticonUrl(user));
reply.redirect((user.avatarId == null ? null : user.avatarUrl) ?? this.userEntityService.getIdenticonUrl(user));
} else {
reply.redirect('/static-assets/user-unknown.png');
}

2
packages/backend/src/server/WellKnownServerService.ts
View file

@ -138,7 +138,7 @@ fastify.get('/.well-known/change-password', async (request, reply) => {
const fromAcct = (acct: Acct.Acct): FindOptionsWhere<MiUser> | number =>
!acct.host || acct.host === this.config.host.toLowerCase() ? {
usernameLower: acct.username,
usernameLower: acct.username.toLowerCase(),
host: IsNull(),
isSuspended: false,
} : 422;

8
packages/backend/src/server/api/endpoint-list.ts
View file

@ -72,8 +72,14 @@ export * as 'admin/promo/create' from './endpoints/admin/promo/create.js';
export * as 'admin/queue/clear' from './endpoints/admin/queue/clear.js';
export * as 'admin/queue/deliver-delayed' from './endpoints/admin/queue/deliver-delayed.js';
export * as 'admin/queue/inbox-delayed' from './endpoints/admin/queue/inbox-delayed.js';
export * as 'admin/queue/promote' from './endpoints/admin/queue/promote.js';
export * as 'admin/queue/retry-job' from './endpoints/admin/queue/retry-job.js';
export * as 'admin/queue/remove-job' from './endpoints/admin/queue/remove-job.js';
export * as 'admin/queue/show-job' from './endpoints/admin/queue/show-job.js';
export * as 'admin/queue/promote-jobs' from './endpoints/admin/queue/promote-jobs.js';
export * as 'admin/queue/jobs' from './endpoints/admin/queue/jobs.js';
export * as 'admin/queue/stats' from './endpoints/admin/queue/stats.js';
export * as 'admin/queue/queues' from './endpoints/admin/queue/queues.js';
export * as 'admin/queue/queue-stats' from './endpoints/admin/queue/queue-stats.js';
export * as 'admin/reject-quotes' from './endpoints/admin/reject-quotes.js';
export * as 'admin/relays/add' from './endpoints/admin/relays/add.js';
export * as 'admin/relays/list' from './endpoints/admin/relays/list.js';

11
packages/backend/src/server/api/endpoints/admin/queue/clear.ts
View file

@ -6,7 +6,7 @@
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QueueService } from '@/core/QueueService.js';
import { QUEUE_TYPES, QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
@ -18,8 +18,11 @@ export const meta = {
export const paramDef = {
type: 'object',
properties: {},
required: [],
properties: {
queue: { type: 'string', enum: QUEUE_TYPES },
state: { type: 'string', enum: ['*', 'completed', 'wait', 'active', 'paused', 'prioritized', 'delayed', 'failed'] },
},
required: ['queue', 'state'],
} as const;
@Injectable()
@ -29,7 +32,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
this.queueService.destroy();
this.queueService.queueClear(ps.queue, ps.state);
this.moderationLogService.log(me, 'clearQueue');
});

38
packages/backend/src/server/api/endpoints/admin/queue/jobs.ts Normal file
View file

@ -0,0 +1,38 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QUEUE_TYPES, QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
kind: 'read:admin:queue',
} as const;
export const paramDef = {
type: 'object',
properties: {
queue: { type: 'string', enum: QUEUE_TYPES },
state: { type: 'array', items: { type: 'string', enum: ['active', 'wait', 'delayed', 'completed', 'failed'] } },
search: { type: 'string' },
},
required: ['queue', 'state'],
} as const;
@Injectable()
export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
constructor(
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
return this.queueService.queueGetJobs(ps.queue, ps.state, ps.search);
});
}
}

39
packages/backend/src/server/api/endpoints/admin/queue/promote-jobs.ts Normal file
View file

@ -0,0 +1,39 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QUEUE_TYPES, QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
kind: 'write:admin:queue',
} as const;
export const paramDef = {
type: 'object',
properties: {
queue: { type: 'string', enum: QUEUE_TYPES },
},
required: ['queue'],
} as const;
@Injectable()
export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
constructor(
private moderationLogService: ModerationLogService,
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
this.queueService.queuePromoteJobs(ps.queue);
this.moderationLogService.log(me, 'promoteQueue');
});
}
}

77
packages/backend/src/server/api/endpoints/admin/queue/promote.ts
View file

@ -1,77 +0,0 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
kind: 'write:admin:queue',
} as const;
export const paramDef = {
type: 'object',
properties: {
type: { type: 'string', enum: ['deliver', 'inbox'] },
},
required: ['type'],
} as const;
@Injectable()
export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
constructor(
private moderationLogService: ModerationLogService,
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
let delayedQueues;
switch (ps.type) {
case 'deliver':
delayedQueues = await this.queueService.deliverQueue.getDelayed();
for (let queueIndex = 0; queueIndex < delayedQueues.length; queueIndex++) {
const queue = delayedQueues[queueIndex];
try {
await queue.promote();
} catch (e) {
if (e instanceof Error) {
if (e.message.indexOf('not in a delayed state') !== -1) {
throw e;
}
} else {
throw e;
}
}
}
break;
case 'inbox':
delayedQueues = await this.queueService.inboxQueue.getDelayed();
for (let queueIndex = 0; queueIndex < delayedQueues.length; queueIndex++) {
const queue = delayedQueues[queueIndex];
try {
await queue.promote();
} catch (e) {
if (e instanceof Error) {
if (e.message.indexOf('not in a delayed state') !== -1) {
throw e;
}
} else {
throw e;
}
}
}
break;
}
this.moderationLogService.log(me, 'promoteQueue');
});
}
}

36
packages/backend/src/server/api/endpoints/admin/queue/queue-stats.ts Normal file
View file

@ -0,0 +1,36 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QUEUE_TYPES, QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
kind: 'read:admin:queue',
} as const;
export const paramDef = {
type: 'object',
properties: {
queue: { type: 'string', enum: QUEUE_TYPES },
},
required: ['queue'],
} as const;
@Injectable()
export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
constructor(
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
return this.queueService.queueGetQueue(ps.queue);
});
}
}

35
packages/backend/src/server/api/endpoints/admin/queue/queues.ts Normal file
View file

@ -0,0 +1,35 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QUEUE_TYPES, QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
kind: 'read:admin:queue',
} as const;
export const paramDef = {
type: 'object',
properties: {
},
required: [],
} as const;
@Injectable()
export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
constructor(
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
return this.queueService.queueGetQueues();
});
}
}

38
packages/backend/src/server/api/endpoints/admin/queue/remove-job.ts Normal file
View file

@ -0,0 +1,38 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QUEUE_TYPES, QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
kind: 'write:admin:queue',
} as const;
export const paramDef = {
type: 'object',
properties: {
queue: { type: 'string', enum: QUEUE_TYPES },
jobId: { type: 'string' },
},
required: ['queue', 'jobId'],
} as const;
@Injectable()
export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
constructor(
private moderationLogService: ModerationLogService,
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
this.queueService.queueRemoveJob(ps.queue, ps.jobId);
});
}
}

38
packages/backend/src/server/api/endpoints/admin/queue/retry-job.ts Normal file
View file

@ -0,0 +1,38 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QUEUE_TYPES, QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
kind: 'write:admin:queue',
} as const;
export const paramDef = {
type: 'object',
properties: {
queue: { type: 'string', enum: QUEUE_TYPES },
jobId: { type: 'string' },
},
required: ['queue', 'jobId'],
} as const;
@Injectable()
export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
constructor(
private moderationLogService: ModerationLogService,
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
this.queueService.queueRetryJob(ps.queue, ps.jobId);
});
}
}

38
packages/backend/src/server/api/endpoints/admin/queue/show-job.ts Normal file
View file

@ -0,0 +1,38 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Injectable } from '@nestjs/common';
import { Endpoint } from '@/server/api/endpoint-base.js';
import { ModerationLogService } from '@/core/ModerationLogService.js';
import { QUEUE_TYPES, QueueService } from '@/core/QueueService.js';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
kind: 'read:admin:queue',
} as const;
export const paramDef = {
type: 'object',
properties: {
queue: { type: 'string', enum: QUEUE_TYPES },
jobId: { type: 'string' },
},
required: ['queue', 'jobId'],
} as const;
@Injectable()
export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
constructor(
private moderationLogService: ModerationLogService,
private queueService: QueueService,
) {
super(meta, paramDef, async (ps, me) => {
return this.queueService.queueGetJob(ps.queue, ps.jobId);
});
}
}

2
packages/backend/src/server/web/ClientServerService.ts
View file

@ -558,7 +558,7 @@ export class ClientServerService {
return await reply.view('user', {
user, profile, me,
avatarUrl: user.avatarUrl ?? this.userEntityService.getIdenticonUrl(user),
avatarUrl: _user.avatarUrl,
sub: request.params.sub,
...await this.generateCommonPugData(this.meta),
clientCtx: htmlSafeJsonStringify({

2
packages/backend/src/server/web/FeedService.ts
View file

@ -65,7 +65,7 @@ export class FeedService {
generator: 'Sharkey',
description: `${user.notesCount} Notes, ${profile.followingVisibility === 'public' ? user.followingCount : '?'} Following, ${profile.followersVisibility === 'public' ? user.followersCount : '?'} Followers${profile.description ? ` · ${profile.description}` : ''}`,
link: author.link,
image: user.avatarUrl ?? this.userEntityService.getIdenticonUrl(user),
image: (user.avatarId == null ? null : user.avatarUrl) ?? this.userEntityService.getIdenticonUrl(user),
feedLinks: {
json: `${author.link}.json`,
atom: `${author.link}.atom`,

6
packages/backend/test-federation/test/user.test.ts
View file

@ -381,7 +381,8 @@ describe('User', () => {
await alice.client.request('i/delete-account', { password: alice.password });
// NOTE: user deletion query is slow
await sleep(4000);
// FIXME: ensure user is removed successfully
await sleep(10000);
const following = await bob.client.request('users/following', { userId: bob.id });
strictEqual(following.length, 0); // no following relation
@ -480,7 +481,8 @@ describe('User', () => {
await aAdmin.client.request('admin/suspend-user', { userId: alice.id });
// NOTE: user deletion query is slow
await sleep(4000);
// FIXME: ensure user is removed successfully
await sleep(10000);
const following = await bob.client.request('users/following', { userId: bob.id });
strictEqual(following.length, 0); // no following relation

27
packages/backend/test/e2e/antennas.ts
View file

@ -6,7 +6,6 @@
process.env.NODE_ENV = 'test';
import * as assert from 'assert';
import { DEFAULT_POLICIES } from '@/core/RoleService.js';
import {
api,
failedApiCall,
@ -19,6 +18,7 @@ import {
userList,
} from '../utils.js';
import type * as misskey from 'misskey-js';
import { DEFAULT_POLICIES } from '@/core/RoleService.js';
const compareBy = <T extends { id: string }>(selector: (s: T) => string = (s: T): string => s.id) => (a: T, b: T): number => {
return selector(a).localeCompare(selector(b));
@ -235,11 +235,11 @@ describe('アンテナ', () => {
await failedApiCall({
endpoint: 'antennas/create',
parameters: { ...defaultParam, keywords: [[]], excludeKeywords: [[]] },
user: alice
user: alice,
}, {
status: 400,
code: 'EMPTY_KEYWORD',
id: '53ee222e-1ddd-4f9a-92e5-9fb82ddb463a'
id: '53ee222e-1ddd-4f9a-92e5-9fb82ddb463a',
});
});
//#endregion
@ -274,11 +274,11 @@ describe('アンテナ', () => {
await failedApiCall({
endpoint: 'antennas/update',
parameters: { ...defaultParam, antennaId: antenna.id, keywords: [[]], excludeKeywords: [[]] },
user: alice
user: alice,
}, {
status: 400,
code: 'EMPTY_KEYWORD',
id: '721aaff6-4e1b-4d88-8de6-877fae9f68c4'
id: '721aaff6-4e1b-4d88-8de6-877fae9f68c4',
});
});
@ -375,14 +375,23 @@ describe('アンテナ', () => {
],
},
{
// https://github.com/misskey-dev/misskey/issues/9025
label: 'ただし、フォロワー限定投稿とDM投稿を含まない。フォロワーであっても。',
label: 'フォロワー限定投稿とDM投稿を含む',
parameters: () => ({}),
posts: [
{ note: (): Promise<Note> => post(userFollowedByAlice, { text: `${keyword}`, visibility: 'public' }), included: true },
{ note: (): Promise<Note> => post(userFollowedByAlice, { text: `${keyword}`, visibility: 'home' }), included: true },
{ note: (): Promise<Note> => post(userFollowedByAlice, { text: `${keyword}`, visibility: 'followers' }) },
{ note: (): Promise<Note> => post(userFollowedByAlice, { text: `${keyword}`, visibility: 'specified', visibleUserIds: [alice.id] }) },
{ note: (): Promise<Note> => post(userFollowedByAlice, { text: `${keyword}`, visibility: 'followers' }), included: true },
{ note: (): Promise<Note> => post(bob, { text: `${keyword}`, visibility: 'specified', visibleUserIds: [alice.id] }), included: true },
],
},
{
label: 'フォロワー限定投稿とDM投稿を含まない',
parameters: () => ({}),
posts: [
{ note: (): Promise<Note> => post(bob, { text: `${keyword}`, visibility: 'public' }), included: true },
{ note: (): Promise<Note> => post(bob, { text: `${keyword}`, visibility: 'home' }), included: true },
{ note: (): Promise<Note> => post(bob, { text: `${keyword}`, visibility: 'followers' }) },
{ note: (): Promise<Note> => post(bob, { text: `${keyword}`, visibility: 'specified', visibleUserIds: [carol.id] }) },
],
},
{

2
packages/backend/test/unit/AnnouncementService.ts
View file

@ -44,7 +44,7 @@ describe('AnnouncementService', () => {
return usersRepository.insert({
id: genAidx(Date.now()),
username: un,
usernameLower: un,
usernameLower: un.toLowerCase(),
...data,
})
.then(x => usersRepository.findOneByOrFail(x.identifiers[0]));

4
packages/backend/test/unit/SigninWithPasskeyApiService.ts
View file

@ -123,8 +123,8 @@ describe('SigninWithPasskeyApiService', () => {
jest.spyOn(webAuthnService, 'verifySignInWithPasskeyAuthentication').mockImplementation(FakeWebauthnVerify);
const dummyUser = {
id: uid, username: uid, usernameLower: uid.toLocaleLowerCase(), uri: null, host: null,
};
id: uid, username: uid, usernameLower: uid.toLowerCase(), uri: null, host: null,
};
const dummyProfile = {
userId: uid,
password: 'qwerty',

2
packages/backend/test/unit/entities/UserEntityService.ts
View file

@ -74,7 +74,7 @@ describe('UserEntityService', () => {
...userData,
id: genAidx(Date.now()),
username: un,
usernameLower: un,
usernameLower: un.toLowerCase(),
})
.then(x => usersRepository.findOneByOrFail(x.identifiers[0]));

36
packages/frontend-embed/package.json
View file

@ -22,33 +22,33 @@
"astring": "1.9.0",
"buraha": "0.0.1",
"estree-walker": "3.0.3",
"misskey-js": "workspace:*",
"frontend-shared": "workspace:*",
"punycode.js": "2.3.1",
"rollup": "4.36.0",
"sass": "1.86.0",
"shiki": "3.2.1",
"tinycolor2": "1.6.0",
"tsc-alias": "1.8.11",
"tsconfig-paths": "4.2.0",
"typescript": "5.8.2",
"uuid": "11.1.0",
"json5": "2.2.3",
"vite": "6.2.4",
"misskey-js": "workspace:*",
"punycode.js": "2.3.1",
"rollup": "4.39.0",
"sass": "1.86.3",
"shiki": "3.2.2",
"tinycolor2": "1.6.0",
"tsc-alias": "1.8.15",
"tsconfig-paths": "4.2.0",
"typescript": "5.8.3",
"uuid": "11.1.0",
"vite": "6.3.1",
"vue": "3.5.13"
},
"devDependencies": {
"@misskey-dev/summaly": "5.2.0",
"@testing-library/vue": "8.1.0",
"@types/estree": "1.0.6",
"@types/estree": "1.0.7",
"@types/micromatch": "4.0.9",
"@types/node": "22.13.11",
"@types/node": "22.14.0",
"@types/punycode.js": "npm:@types/punycode@2.1.4",
"@types/tinycolor2": "1.4.6",
"@types/ws": "8.18.0",
"@typescript-eslint/eslint-plugin": "8.27.0",
"@typescript-eslint/parser": "8.27.0",
"@vitest/coverage-v8": "3.0.9",
"@types/ws": "8.18.1",
"@typescript-eslint/eslint-plugin": "8.29.1",
"@typescript-eslint/parser": "8.29.1",
"@vitest/coverage-v8": "3.1.1",
"@vue/runtime-core": "3.5.13",
"acorn": "8.14.1",
"cross-env": "7.0.3",
@ -64,7 +64,7 @@
"start-server-and-test": "2.0.11",
"vite-plugin-turbosnap": "1.0.3",
"vue-component-type-helpers": "2.2.8",
"vue-eslint-parser": "10.1.1",
"vue-eslint-parser": "10.1.3",
"vue-tsc": "2.2.8"
}
}

12
packages/frontend-shared/package.json
View file

@ -21,14 +21,14 @@
"lint": "pnpm typecheck && pnpm eslint"
},
"devDependencies": {
"@types/node": "22.13.11",
"@typescript-eslint/eslint-plugin": "8.27.0",
"@typescript-eslint/parser": "8.27.0",
"esbuild": "0.25.1",
"@types/node": "22.14.0",
"@typescript-eslint/eslint-plugin": "8.29.1",
"@typescript-eslint/parser": "8.29.1",
"esbuild": "0.25.2",
"eslint-plugin-vue": "10.0.0",
"nodemon": "3.1.9",
"typescript": "5.8.2",
"vue-eslint-parser": "10.1.1"
"typescript": "5.8.3",
"vue-eslint-parser": "10.1.3"
},
"files": [
"js-built"

2
packages/frontend-shared/themes/_dark.json5
View file

@ -34,6 +34,8 @@
navFg: '@fg',
navActive: '@accent',
navIndicator: '@indicator',
pageHeaderBg: '@bg',
pageHeaderFg: '@fg',
link: '#44a4c1',
hashtag: '#ff9156',
mention: '@accent',

2
packages/frontend-shared/themes/_light.json5
View file

@ -34,6 +34,8 @@
navFg: '@fg',
navActive: '@accent',
navIndicator: '@indicator',
pageHeaderBg: '@bg',
pageHeaderFg: '@fg',
link: '#44a4c1',
hashtag: '#ff9156',
mention: '@accent',

35
packages/frontend/.storybook/fakes.ts
View file

@ -43,6 +43,41 @@ export function channel(id = 'somechannelid', name = 'Some Channel', bannerUrl:
};
}
export function chatMessage(room = false, id = 'somechatmessageid', text = 'Hello!'): entities.ChatMessage {
const fromUser = userLite();
const toRoom = chatRoom();
const toUser = userLite('touserid');
return {
id,
createdAt: '2016-12-28T22:49:51.000Z',
fromUserId: fromUser.id,
fromUser,
text,
isRead: false,
reactions: [],
...room ? {
toRoomId: toRoom.id,
toRoom,
} : {
toUserId: toUser.id,
toUser,
},
};
}
export function chatRoom(id = 'somechatroomid', name = 'Some Chat Room'): entities.ChatRoom {
const owner = userLite('someownerid');
return {
id,
createdAt: '2016-12-28T22:49:51.000Z',
ownerId: owner.id,
owner,
name,
description: 'A chat room for testing',
isMuted: false,
};
}
export function clip(id = 'someclipid', name = 'Some Clip'): entities.Clip {
return {
id,

81
packages/frontend/package.json
View file

@ -25,7 +25,7 @@
"@rollup/plugin-replace": "6.0.2",
"@rollup/pluginutils": "5.1.4",
"@ruffle-rs/ruffle": "0.1.0-nightly.2024.10.15",
"@sentry/vue": "9.8.0",
"@sentry/vue": "9.12.0",
"@syuilo/aiscript": "0.19.0",
"@transfem-org/sfm-js": "0.24.6",
"@twemoji/parser": "15.1.1",
@ -33,7 +33,7 @@
"@vue/compiler-sfc": "3.5.13",
"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.1.15",
"astring": "1.9.0",
"broadcast-channel": "7.0.0",
"broadcast-channel": "7.1.0",
"buraha": "0.0.1",
"canvas-confetti": "1.9.3",
"chart.js": "4.4.8",
@ -41,7 +41,7 @@
"chartjs-chart-matrix": "2.1.1",
"chartjs-plugin-gradient": "0.6.1",
"chartjs-plugin-zoom": "2.2.0",
"chromatic": "11.27.0",
"chromatic": "11.28.0",
"compare-versions": "6.1.1",
"cropperjs": "2.0.0",
"date-fns": "4.1.0",
@ -61,21 +61,21 @@
"moment": "^2.30.1",
"photoswipe": "5.4.4",
"punycode.js": "2.3.1",
"rollup": "4.36.0",
"rollup": "4.39.0",
"sanitize-html": "2.15.0",
"sass": "1.86.0",
"shiki": "3.2.1",
"sass": "1.86.3",
"shiki": "3.2.2",
"strict-event-emitter-types": "2.0.0",
"textarea-caret": "3.1.0",
"three": "0.174.0",
"three": "0.175.0",
"throttle-debounce": "5.0.2",
"tinycolor2": "1.6.0",
"tsc-alias": "1.8.11",
"tsc-alias": "1.8.15",
"tsconfig-paths": "4.2.0",
"typescript": "5.8.2",
"typescript": "5.8.3",
"uuid": "11.1.0",
"v-code-diff": "1.13.1",
"vite": "6.2.4",
"vite": "6.3.1",
"vue": "3.5.13",
"vuedraggable": "next",
"wanakana": "5.3.1"
@ -85,40 +85,40 @@
},
"devDependencies": {
"@misskey-dev/summaly": "5.2.0",
"@storybook/addon-actions": "8.6.7",
"@storybook/addon-essentials": "8.6.7",
"@storybook/addon-interactions": "8.6.7",
"@storybook/addon-links": "8.6.7",
"@storybook/addon-mdx-gfm": "8.6.7",
"@storybook/addon-storysource": "8.6.7",
"@storybook/blocks": "8.6.7",
"@storybook/components": "8.6.7",
"@storybook/core-events": "8.6.7",
"@storybook/manager-api": "8.6.7",
"@storybook/preview-api": "8.6.7",
"@storybook/react": "8.6.7",
"@storybook/react-vite": "8.6.7",
"@storybook/test": "8.6.7",
"@storybook/theming": "8.6.7",
"@storybook/types": "8.6.7",
"@storybook/vue3": "8.6.7",
"@storybook/vue3-vite": "8.6.7",
"@storybook/addon-actions": "8.6.12",
"@storybook/addon-essentials": "8.6.12",
"@storybook/addon-interactions": "8.6.12",
"@storybook/addon-links": "8.6.12",
"@storybook/addon-mdx-gfm": "8.6.12",
"@storybook/addon-storysource": "8.6.12",
"@storybook/blocks": "8.6.12",
"@storybook/components": "8.6.12",
"@storybook/core-events": "8.6.12",
"@storybook/manager-api": "8.6.12",
"@storybook/preview-api": "8.6.12",
"@storybook/react": "8.6.12",
"@storybook/react-vite": "8.6.12",
"@storybook/test": "8.6.12",
"@storybook/theming": "8.6.12",
"@storybook/types": "8.6.12",
"@storybook/vue3": "8.6.12",
"@storybook/vue3-vite": "8.6.12",
"@testing-library/vue": "8.1.0",
"@types/canvas-confetti": "1.9.0",
"@types/estree": "1.0.6",
"@types/estree": "1.0.7",
"@types/katex": "^0.16.7",
"@types/matter-js": "0.19.8",
"@types/micromatch": "4.0.9",
"@types/node": "22.13.11",
"@types/node": "22.14.0",
"@types/punycode.js": "npm:@types/punycode@2.1.4",
"@types/sanitize-html": "2.13.0",
"@types/sanitize-html": "2.15.0",
"@types/seedrandom": "3.0.8",
"@types/throttle-debounce": "5.0.2",
"@types/tinycolor2": "1.4.6",
"@types/ws": "8.18.0",
"@typescript-eslint/eslint-plugin": "8.27.0",
"@typescript-eslint/parser": "8.27.0",
"@vitest/coverage-v8": "3.0.9",
"@types/ws": "8.18.1",
"@typescript-eslint/eslint-plugin": "8.29.1",
"@typescript-eslint/parser": "8.29.1",
"@vitest/coverage-v8": "3.1.1",
"@vue/compiler-core": "3.5.13",
"@vue/runtime-core": "3.5.13",
"acorn": "8.14.1",
@ -134,18 +134,17 @@
"msw-storybook-addon": "2.0.4",
"nodemon": "3.1.9",
"prettier": "3.5.3",
"react": "19.0.0",
"react-dom": "19.0.0",
"react": "19.1.0",
"react-dom": "19.1.0",
"seedrandom": "3.0.5",
"start-server-and-test": "2.0.11",
"storybook": "8.6.7",
"storybook": "8.6.12",
"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
"vite-node": "3.0.9",
"vite-plugin-turbosnap": "1.0.3",
"vitest": "3.0.9",
"vitest": "3.1.1",
"vitest-fetch-mock": "0.4.5",
"vue-component-type-helpers": "2.2.8",
"vue-eslint-parser": "10.1.1",
"vue-eslint-parser": "10.1.3",
"vue-tsc": "2.2.8"
}
}

88
packages/frontend/src/accounts.ts
View file

@ -21,14 +21,19 @@ type AccountWithToken = Misskey.entities.MeDetailed & { token: string };
export async function getAccounts(): Promise<{
host: string;
user: Misskey.entities.User;
id: Misskey.entities.User['id'];
username: Misskey.entities.User['username'];
user?: Misskey.entities.User | null;
token: string | null;
}[]> {
const tokens = store.s.accountTokens;
const accountInfos = store.s.accountInfos;
const accounts = prefer.s.accounts;
return accounts.map(([host, user]) => ({
host,
user,
id: user.id,
username: user.username,
user: accountInfos[host + '/' + user.id],
token: tokens[host + '/' + user.id] ?? null,
}));
}
@ -36,7 +41,8 @@ export async function getAccounts(): Promise<{
async function addAccount(host: string, user: Misskey.entities.User, token: AccountWithToken['token']) {
if (!prefer.s.accounts.some(x => x[0] === host && x[1].id === user.id)) {
store.set('accountTokens', { ...store.s.accountTokens, [host + '/' + user.id]: token });
prefer.commit('accounts', [...prefer.s.accounts, [host, user]]);
store.set('accountInfos', { ...store.s.accountInfos, [host + '/' + user.id]: user });
prefer.commit('accounts', [...prefer.s.accounts, [host, { id: user.id, username: user.username }]]);
}
}
@ -44,6 +50,10 @@ export async function removeAccount(host: string, id: AccountWithToken['id']) {
const tokens = JSON.parse(JSON.stringify(store.s.accountTokens));
delete tokens[host + '/' + id];
store.set('accountTokens', tokens);
const accountInfos = JSON.parse(JSON.stringify(store.s.accountInfos));
delete accountInfos[host + '/' + id];
store.set('accountInfos', accountInfos);
prefer.commit('accounts', prefer.s.accounts.filter(x => x[0] !== host || x[1].id !== id));
}
@ -128,14 +138,7 @@ export function updateCurrentAccount(accountData: Misskey.entities.MeDetailed) {
for (const [key, value] of Object.entries(accountData)) {
$i[key] = value;
}
prefer.commit('accounts', prefer.s.accounts.map(([host, user]) => {
// TODO: $iのホストも比較したいけど通常null
if (user.id === $i.id) {
return [host, $i];
} else {
return [host, user];
}
}));
store.set('accountInfos', { ...store.s.accountInfos, [host + '/' + $i.id]: $i });
$i.token = token;
miLocalStorage.setItem('account', JSON.stringify($i));
}
@ -145,17 +148,9 @@ export function updateCurrentAccountPartial(accountData: Partial<Misskey.entitie
for (const [key, value] of Object.entries(accountData)) {
$i[key] = value;
}
prefer.commit('accounts', prefer.s.accounts.map(([host, user]) => {
// TODO: $iのホストも比較したいけど通常null
if (user.id === $i.id) {
const newUser = JSON.parse(JSON.stringify($i));
for (const [key, value] of Object.entries(accountData)) {
newUser[key] = value;
}
return [host, newUser];
}
return [host, user];
}));
store.set('accountInfos', { ...store.s.accountInfos, [host + '/' + $i.id]: $i });
miLocalStorage.setItem('account', JSON.stringify($i));
}
@ -230,25 +225,42 @@ export async function openAccountMenu(opts: {
}, ev: MouseEvent) {
if (!$i) return;
function createItem(host: string, account: Misskey.entities.User): MenuItem {
return {
type: 'user' as const,
user: account,
active: opts.active != null ? opts.active === account.id : false,
action: async () => {
if (opts.onChoose) {
opts.onChoose(account);
} else {
switchAccount(host, account.id);
}
},
};
function createItem(host: string, id: Misskey.entities.User['id'], username: Misskey.entities.User['username'], account: Misskey.entities.User | null | undefined, token: string): MenuItem {
if (account) {
return {
type: 'user' as const,
user: account,
active: opts.active != null ? opts.active === id : false,
action: async () => {
if (opts.onChoose) {
opts.onChoose(account);
} else {
switchAccount(host, id);
}
},
};
} else {
return {
type: 'button' as const,
text: username,
active: opts.active != null ? opts.active === id : false,
action: async () => {
if (opts.onChoose) {
fetchAccount(token, id).then(account => {
opts.onChoose(account);
});
} else {
switchAccount(host, id);
}
},
};
}
}
const menuItems: MenuItem[] = [];
// TODO: $iのホストも比較したいけど通常null
const accountItems = (await getAccounts().then(accounts => accounts.filter(x => x.user.id !== $i.id))).map(a => createItem(a.host, a.user));
const accountItems = (await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id))).map(a => createItem(a.host, a.id, a.username, a.user, a.token));
if (opts.withExtraOperation) {
menuItems.push({
@ -261,7 +273,7 @@ export async function openAccountMenu(opts: {
});
if (opts.includeCurrentAccount) {
menuItems.push(createItem(host, $i));
menuItems.push(createItem(host, $i.id, $i.username, $i, $i.token));
}
menuItems.push(...accountItems);
@ -302,7 +314,7 @@ export async function openAccountMenu(opts: {
});
} else {
if (opts.includeCurrentAccount) {
menuItems.push(createItem(host, $i));
menuItems.push(createItem(host, $i.id, $i.username, $i, $i.token));
}
menuItems.push(...accountItems);

4
packages/frontend/src/components/MkAuthConfirm.vue
View file

@ -157,7 +157,7 @@ async function init() {
const accounts = await getAccounts();
const accountIdsToFetch = accounts.map(a => a.user.id).filter(id => !users.value.has(id));
const accountIdsToFetch = accounts.map(a => a.id).filter(id => !users.value.has(id));
if (accountIdsToFetch.length > 0) {
const usersRes = await misskeyApi('users/show', {
@ -169,7 +169,7 @@ async function init() {
users.value.set(user.id, {
...user,
token: accounts.find(a => a.user.id === user.id)!.token,
token: accounts.find(a => a.id === user.id)!.token,
});
}
}

77
packages/frontend/src/components/MkAutocomplete.vue
View file

@ -15,12 +15,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</li>
<li tabindex="-1" :class="$style.item" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
</ol>
<ol v-else-if="hashtags.length > 0" ref="suggests" :class="$style.list">
<ol v-else-if="type === 'hashtag' && hashtags.length > 0" ref="suggests" :class="$style.list">
<li v-for="hashtag in hashtags" tabindex="-1" :class="$style.item" @click="complete(type, hashtag)" @keydown="onKeydown">
<span class="name">{{ hashtag }}</span>
</li>
</ol>
<ol v-else-if="emojis.length > 0" ref="suggests" :class="$style.list">
<ol v-else-if="type === 'emoji' || type === 'emojiComplete' && emojis.length > 0" ref="suggests" :class="$style.list">
<li v-for="emoji in emojis" :key="emoji.emoji" :class="$style.item" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
<MkCustomEmoji v-if="'isCustomEmoji' in emoji && emoji.isCustomEmoji" :name="emoji.emoji" :class="$style.emoji" :fallbackToImage="true"/>
<MkEmoji v-else :emoji="emoji.emoji" :class="$style.emoji"/>
@ -30,12 +30,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="emoji.aliasOf" :class="$style.emojiAlias">({{ emoji.aliasOf }})</span>
</li>
</ol>
<ol v-else-if="mfmTags.length > 0" ref="suggests" :class="$style.list">
<ol v-else-if="type === 'mfmTag' && mfmTags.length > 0" ref="suggests" :class="$style.list">
<li v-for="tag in mfmTags" tabindex="-1" :class="$style.item" @click="complete(type, tag)" @keydown="onKeydown">
<span>{{ tag }}</span>
</li>
</ol>
<ol v-else-if="mfmParams.length > 0" ref="suggests" :class="$style.list">
<ol v-else-if="type === 'mfmParam' && mfmParams.length > 0" ref="suggests" :class="$style.list">
<li v-for="param in mfmParams" tabindex="-1" :class="$style.item" @click="complete(type, q.params.toSpliced(-1, 1, param).join(','))" @keydown="onKeydown">
<span>{{ param }}</span>
</li>
@ -58,12 +58,44 @@ import { store } from '@/store.js';
import { i18n } from '@/i18n.js';
import { miLocalStorage } from '@/local-storage.js';
import { customEmojis } from '@/custom-emojis.js';
import { searchEmoji } from '@/utility/search-emoji.js';
import { searchEmoji, searchEmojiExact } from '@/utility/search-emoji.js';
import { prefer } from '@/preferences.js';
export type CompleteInfo = {
user: {
payload: any;
query: string | null;
},
hashtag: {
payload: string;
query: string;
},
// `:emo` -> `:emoji:` or some unicode emoji
emoji: {
payload: string;
query: string;
},
// like emoji but for `:emoji:` -> unicode emoji
emojiComplete: {
payload: string;
query: string;
},
mfmTag: {
payload: string;
query: string;
},
mfmParam: {
payload: string;
query: {
tag: string;
params: string[];
};
},
};
const lib = emojilist.filter(x => x.category !== 'flags');
const emojiDb = computed(() => {
const unicodeEmojiDB = computed(() => {
//#region Unicode Emoji
const char2path = prefer.r.emojiStyle.value === 'twemoji' ? char2twemojiFilePath : prefer.r.emojiStyle.value === 'tossface' ? char2tossfaceFilePath : char2fluentEmojiFilePath;
@ -87,6 +119,12 @@ const emojiDb = computed(() => {
}
unicodeEmojiDB.sort((a, b) => a.name.length - b.name.length);
return unicodeEmojiDB;
});
const emojiDb = computed(() => {
//#region Unicode Emoji
//#endregion
//#region Custom Emoji
@ -114,7 +152,7 @@ const emojiDb = computed(() => {
customEmojiDB.sort((a, b) => a.name.length - b.name.length);
//#endregion
return markRaw([...customEmojiDB, ...unicodeEmojiDB]);
return markRaw([...customEmojiDB, ...unicodeEmojiDB.value]);
});
export default {
@ -123,18 +161,23 @@ export default {
};
</script>
<script lang="ts" setup>
const props = defineProps<{
type: string;
q: any;
textarea: HTMLTextAreaElement;
<script lang="ts" setup generic="T extends keyof CompleteInfo">
type PropsType<T extends keyof CompleteInfo> = {
type: T;
q: CompleteInfo[T]['query'];
// なぜかわからないけど HTMLTextAreaElement | HTMLInputElement だと addEventListener/removeEventListenerがエラー
textarea: (HTMLTextAreaElement | HTMLInputElement) & HTMLElement;
close: () => void;
x: number;
y: number;
}>();
};
//const props = defineProps<PropsType<keyof CompleteInfo>>();
// ↑と同じだけど↓にしないとdiscriminated unionにならない。
// https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions
const props = defineProps<PropsType<'user'> | PropsType<'hashtag'> | PropsType<'emoji'> | PropsType<'emojiComplete'> | PropsType<'mfmTag'> | PropsType<'mfmParam'>>();
const emit = defineEmits<{
(event: 'done', value: { type: string; value: any }): void;
<T extends keyof CompleteInfo>(event: 'done', value: { type: T; value: CompleteInfo[T]['payload'] }): void;
(event: 'closed'): void;
}>();
@ -151,10 +194,10 @@ const mfmParams = ref<string[]>([]);
const select = ref(-1);
const zIndex = os.claimZIndex('high');
function complete(type: string, value: any) {
function complete<T extends keyof CompleteInfo>(type: T, value: CompleteInfo[T]['payload']) {
emit('done', { type, value });
emit('closed');
if (type === 'emoji') {
if (type === 'emoji' || type === 'emojiComplete') {
let recents = store.s.recentlyUsedEmojis;
recents = recents.filter((emoji: any) => emoji !== value);
recents.unshift(value);
@ -243,6 +286,8 @@ function exec() {
}
emojis.value = searchEmoji(props.q.normalize('NFC').toLowerCase(), emojiDb.value);
} else if (props.type === 'emojiComplete') {
emojis.value = searchEmojiExact(props.q.normalize('NFC').toLowerCase(), unicodeEmojiDB.value);
} else if (props.type === 'mfmTag') {
if (!props.q || props.q === '') {
mfmTags.value = MFM_TAGS;

45
packages/frontend/src/components/MkChatHistories.stories.impl.ts Normal file
View file

@ -0,0 +1,45 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { http, HttpResponse } from 'msw';
import { action } from '@storybook/addon-actions';
import { chatMessage } from '../../.storybook/fakes';
import MkChatHistories from './MkChatHistories.vue';
import type { StoryObj } from '@storybook/vue3';
import type * as Misskey from 'misskey-js';
export const Default = {
render(args) {
return {
components: {
MkChatHistories,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkChatHistories v-bind="props" />',
};
},
parameters: {
layout: 'centered',
msw: {
handlers: [
http.post('/api/chat/history', async ({ request }) => {
const body = await request.json() as Misskey.entities.ChatHistoryRequest;
action('POST /api/chat/history')(body);
return HttpResponse.json([chatMessage(body.room)]);
}),
],
},
},
} satisfies StoryObj<typeof MkChatHistories>;

208
packages/frontend/src/components/MkChatHistories.vue Normal file
View file

@ -0,0 +1,208 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="history.length > 0" class="_gaps_s">
<MkA
v-for="item in history"
:key="item.id"
:class="[$style.message, { [$style.isMe]: item.isMe, [$style.isRead]: item.message.isRead }]"
class="_panel"
:to="item.message.toRoomId ? `/chat/room/${item.message.toRoomId}` : `/chat/user/${item.other!.id}`"
>
<MkAvatar v-if="item.message.toRoomId" :class="$style.messageAvatar" :user="item.message.fromUser" indicator :preview="false"/>
<MkAvatar v-else-if="item.other" :class="$style.messageAvatar" :user="item.other" indicator :preview="false"/>
<div :class="$style.messageBody">
<header v-if="item.message.toRoom" :class="$style.messageHeader">
<span :class="$style.messageHeaderName"><i class="ti ti-users"></i> {{ item.message.toRoom.name }}</span>
<MkTime :time="item.message.createdAt" :class="$style.messageHeaderTime"/>
</header>
<header v-else :class="$style.messageHeader">
<MkUserName :class="$style.messageHeaderName" :user="item.other!"/>
<MkAcct :class="$style.messageHeaderUsername" :user="item.other!"/>
<MkTime :time="item.message.createdAt" :class="$style.messageHeaderTime"/>
</header>
<div :class="$style.messageBodyText"><span v-if="item.isMe" :class="$style.youSaid">{{ i18n.ts.you }}:</span>{{ item.message.text }}</div>
</div>
</MkA>
</div>
<div v-if="!initializing && history.length == 0" class="_fullinfo">
<div>{{ i18n.ts._chat.noHistory }}</div>
</div>
<MkLoading v-if="initializing"/>
</template>
<script lang="ts" setup>
import { onActivated, onDeactivated, onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { useInterval } from '@@/js/use-interval.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { ensureSignin } from '@/i.js';
const $i = ensureSignin();
const history = ref<{
id: string;
message: Misskey.entities.ChatMessage;
other: Misskey.entities.ChatMessage['fromUser'] | Misskey.entities.ChatMessage['toUser'] | null;
isMe: boolean;
}[]>([]);
const initializing = ref(true);
const fetching = ref(false);
async function fetchHistory() {
if (fetching.value) return;
fetching.value = true;
const [userMessages, roomMessages] = await Promise.all([
misskeyApi('chat/history', { room: false }),
misskeyApi('chat/history', { room: true }),
]);
history.value = [...userMessages, ...roomMessages]
.toSorted((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
.map(m => ({
id: m.id,
message: m,
other: (!('room' in m) || m.room == null) ? (m.fromUserId === $i.id ? m.toUser : m.fromUser) : null,
isMe: m.fromUserId === $i.id,
}));
fetching.value = false;
initializing.value = false;
}
let isActivated = true;
onActivated(() => {
isActivated = true;
});
onDeactivated(() => {
isActivated = false;
});
useInterval(() => {
// TODO: DOM的にバックグラウンドになっていないかどうかも考慮する
if (!window.document.hidden && isActivated) {
fetchHistory();
}
}, 1000 * 10, {
immediate: false,
afterMounted: true,
});
onActivated(() => {
fetchHistory();
});
onMounted(() => {
fetchHistory();
});
</script>
<style lang="scss" module>
.message {
position: relative;
display: flex;
padding: 16px 24px;
&.isRead,
&.isMe {
opacity: 0.8;
}
&:not(.isMe):not(.isRead) {
&::before {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
border-radius: 100%;
background-color: var(--MI_THEME-accent);
}
}
}
@container (max-width: 500px) {
.message {
font-size: 90%;
padding: 14px 20px;
}
}
@container (max-width: 450px) {
.message {
font-size: 80%;
padding: 12px 16px;
}
}
.messageAvatar {
width: 50px;
height: 50px;
margin: 0 16px 0 0;
}
@container (max-width: 500px) {
.messageAvatar {
width: 45px;
height: 45px;
}
}
@container (max-width: 450px) {
.messageAvatar {
width: 40px;
height: 40px;
}
}
.messageBody {
flex: 1;
min-width: 0;
}
.messageHeader {
display: flex;
align-items: center;
margin-bottom: 2px;
white-space: nowrap;
overflow: clip;
}
.messageHeaderName {
margin: 0;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1em;
font-weight: bold;
}
.messageHeaderUsername {
margin: 0 8px;
}
.messageHeaderTime {
margin-left: auto;
}
.messageBodyText {
overflow: hidden;
overflow-wrap: break-word;
font-size: 1.1em;
}
.youSaid {
font-weight: bold;
margin-right: 0.5em;
}
</style>

8
packages/frontend/src/components/MkCode.vue
View file

@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #fallback>
<MkLoading/>
</template>
<XCode v-if="show && lang" :code="code" :lang="lang"/>
<pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
<XCode v-if="show && lang" class="_selectable" :code="code" :lang="lang"/>
<pre v-else-if="show" class="_selectable" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
<button v-else :class="$style.codePlaceholderRoot" @click="show = true">
<div :class="$style.codePlaceholderContainer">
<div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div>
@ -70,11 +70,9 @@ function copy() {
.codeBlockFallbackRoot {
display: block;
overflow-wrap: anywhere;
background: var(--MI_THEME-bg);
padding: 1em;
margin: .5em 0;
margin: 0;
overflow: auto;
border-radius: var(--MI-radius-sm);
}
.codeBlockFallbackCode {

7
packages/frontend/src/components/MkDisableSection.stories.impl.ts Normal file
View file

@ -0,0 +1,7 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import MkDisableSection from './MkDisableSection.vue';
void MkDisableSection;

4
packages/frontend/src/components/MkDrive.vue
View file

@ -640,13 +640,13 @@ function getMenu() {
text: i18n.ts.upload + ' (' + i18n.ts.compress + ')',
icon: 'ti ti-upload',
action: () => {
chooseFileFromPc(true, { keepOriginal: false });
chooseFileFromPc(true, { uploadFolder: folder.value?.id, keepOriginal: false });
},
}, {
text: i18n.ts.upload,
icon: 'ti ti-upload',
action: () => {
chooseFileFromPc(true, { keepOriginal: true });
chooseFileFromPc(true, { uploadFolder: folder.value?.id, keepOriginal: true });
},
}, {
text: i18n.ts.fromUrl,

46
packages/frontend/src/components/MkFolder.vue
View file

@ -38,15 +38,26 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<KeepAlive>
<div v-show="opened">
<MkSpacer v-if="withSpacer" :marginMin="spacerMin" :marginMax="spacerMax">
<slot></slot>
</MkSpacer>
<div v-else>
<slot></slot>
</div>
<div v-if="$slots.footer" :class="$style.footer">
<slot name="footer"></slot>
</div>
<MkStickyContainer>
<template #header>
<div v-if="$slots.header" :class="$style.inBodyHeader">
<slot name="header"></slot>
</div>
</template>
<MkSpacer v-if="withSpacer" :marginMin="spacerMin" :marginMax="spacerMax">
<slot></slot>
</MkSpacer>
<div v-else>
<slot></slot>
</div>
<template #footer>
<div v-if="$slots.footer" :class="$style.inBodyFooter">
<slot name="footer"></slot>
</div>
</template>
</MkStickyContainer>
</div>
</KeepAlive>
</Transition>
@ -230,14 +241,21 @@ onMounted(() => {
&.bgSame {
background: var(--MI_THEME-bg);
.inBodyHeader {
background: color(from var(--MI_THEME-bg) srgb r g b / 0.75);
}
}
}
.footer {
position: sticky !important;
z-index: 1;
bottom: var(--MI-stickyBottom, 0px);
left: 0;
.inBodyHeader {
background: color(from var(--MI_THEME-panel) srgb r g b / 0.75);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
border-bottom: solid 0.5px var(--MI_THEME-divider);
}
.inBodyFooter {
padding: 12px;
background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));

25
packages/frontend/src/components/MkMenu.vue
View file

@ -31,9 +31,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-for="item in (items2 ?? [])">
<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
<span style="opacity: 0.7;">{{ item.text }}</span>
</span>
<div v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label]">
<span>{{ item.text }}</span>
</div>
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
<span><MkEllipsis/></span>
@ -619,12 +619,6 @@ onBeforeUnmount(() => {
--menuActiveBg: var(--MI_THEME-accentedBg);
}
&.label {
pointer-events: none;
font-size: 0.7em;
padding-bottom: 4px;
}
&.pending {
pointer-events: none;
opacity: 0.7;
@ -694,6 +688,19 @@ onBeforeUnmount(() => {
font-size: 12px;
}
.label {
position: relative;
padding: 6px 16px;
box-sizing: border-box;
white-space: nowrap;
font-size: 0.7em;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.7;
pointer-events: none;
}
.divider {
margin: 8px 0;
border-top: solid 0.5px var(--MI_THEME-divider);

14
packages/frontend/src/components/MkNotes.vue
View file

@ -14,7 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #default="{ items: notes }">
<component
:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap }]"
:is="prefer.s.animation ? TransitionGroup : 'div'"
:class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: pagination.reversed }]"
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom"
@ -22,14 +23,14 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass=" $style.transition_x_move"
tag="div"
>
<template v-for="note in notes" :key="note.id">
<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]">
<template v-for="(note, i) in notes" :key="note.id">
<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]" :data-scroll-anchor="note.id">
<DynamicNote :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true"/>
<div :class="$style.ad">
<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
</div>
</div>
<DynamicNote v-else :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true"/>
<DynamicNote v-else :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true" :data-scroll-anchor="note.id"/>
</template>
</component>
</template>
@ -74,6 +75,11 @@ defineExpose({
position: absolute;
}
.reverse {
display: flex;
flex-direction: column-reverse;
}
.root {
container-type: inline-size;

13
packages/frontend/src/components/MkNotification.vue
View file

@ -346,6 +346,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
right: -2px;
width: 20px;
height: 20px;
line-height: 20px;
box-sizing: border-box;
border-radius: var(--MI-radius-full);
background: var(--MI_THEME-panel);
@ -360,73 +361,61 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
}
.t_follow, .t_followRequestAccepted, .t_receiveFollowRequest {
padding: 3px;
background: var(--eventFollow);
pointer-events: none;
}
.t_renote {
padding: 3px;
background: var(--eventRenote);
pointer-events: none;
}
.t_quote {
padding: 3px;
background: var(--eventRenote);
pointer-events: none;
}
.t_reply {
padding: 3px;
background: var(--eventReply);
pointer-events: none;
}
.t_mention {
padding: 3px;
background: var(--eventOther);
pointer-events: none;
}
.t_pollEnded {
padding: 3px;
background: var(--eventOther);
pointer-events: none;
}
.t_achievementEarned {
padding: 3px;
background: var(--eventAchievement);
pointer-events: none;
}
.t_exportCompleted {
padding: 3px;
background: var(--eventOther);
pointer-events: none;
}
.t_roleAssigned {
padding: 3px;
background: var(--eventOther);
pointer-events: none;
}
.t_login {
padding: 3px;
background: var(--eventLogin);
pointer-events: none;
}
.t_createToken {
padding: 3px;
background: var(--eventOther);
pointer-events: none;
}
.t_chatRoomInvitationReceived {
padding: 3px;
background: var(--eventOther);
pointer-events: none;
}

4
packages/frontend/src/components/MkNotifications.vue
View file

@ -24,8 +24,8 @@ SPDX-License-Identifier: AGPL-3.0-only
tag="div"
>
<template v-for="(notification, i) in notifications" :key="notification.id">
<DynamicNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true"/>
<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true"/>
<DynamicNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/>
<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
</template>
</component>
</template>

2
packages/frontend/src/components/MkPostForm.vue
View file

@ -956,7 +956,7 @@ async function post(ev?: MouseEvent) {
if (postAccount.value) {
const storedAccounts = await getAccounts();
token = storedAccounts.find(x => x.user.id === postAccount.value?.id)?.token;
token = storedAccounts.find(x => x.id === postAccount.value?.id)?.token;
}
posting.value = true;

0
packages/frontend/src/components/MkHorizontalSwipe.vue → packages/frontend/src/components/MkSwiper.vue
View file

235
packages/frontend/src/components/MkTabs.vue Normal file
View file

@ -0,0 +1,235 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.tabs">
<div :class="$style.tabsInner">
<button
v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: prefer.s.animation }]"
@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
>
<div :class="$style.tabInner">
<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
<div
v-if="!t.iconOnly || (!prefer.s.animation && t.key === tab)"
:class="$style.tabTitle"
>
{{ t.title }}
</div>
<Transition
v-else mode="in-out" @enter="enter" @afterEnter="afterEnter" @leave="leave"
@afterLeave="afterLeave"
>
<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
</Transition>
</div>
</button>
</div>
<div
ref="tabHighlightEl"
:class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation }]"
></div>
</div>
</template>
<script lang="ts">
export type Tab = {
key: string;
onClick?: (ev: MouseEvent) => void;
} & (
| {
iconOnly?: false;
title: string;
icon?: string;
}
| {
iconOnly: true;
icon: string;
}
);
</script>
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
import { prefer } from '@/preferences.js';
const props = withDefaults(defineProps<{
tabs?: Tab[];
tab?: string;
}>(), {
tabs: () => ([] as Tab[]),
});
const emit = defineEmits<{
(ev: 'update:tab', key: string);
(ev: 'tabClick', key: string);
}>();
const tabHighlightEl = useTemplateRef('tabHighlightEl');
const tabRefs: Record<string, HTMLElement | null> = {};
function onTabMousedown(tab: Tab, ev: MouseEvent): void {
// ユーザビリティの観点からmousedown時にはonClickは呼ばない
if (tab.key) {
emit('update:tab', tab.key);
}
}
function onTabClick(t: Tab, ev: MouseEvent): void {
emit('tabClick', t.key);
if (t.onClick) {
ev.preventDefault();
ev.stopPropagation();
t.onClick(ev);
}
if (t.key) {
emit('update:tab', t.key);
}
}
function renderTab() {
const tabEl = props.tab ? tabRefs[props.tab] : undefined;
if (tabEl && tabHighlightEl.value && tabHighlightEl.value.parentElement) {
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
const parentRect = tabHighlightEl.value.parentElement.getBoundingClientRect();
const rect = tabEl.getBoundingClientRect();
tabHighlightEl.value.style.width = rect.width + 'px';
tabHighlightEl.value.style.left = (rect.left - parentRect.left + tabHighlightEl.value.parentElement.scrollLeft) + 'px';
}
}
let entering = false;
async function enter(el: Element) {
if (!(el instanceof HTMLElement)) return;
entering = true;
const elementWidth = el.getBoundingClientRect().width;
el.style.width = '0';
el.style.paddingLeft = '0';
el.offsetWidth; // reflow
el.style.width = `${elementWidth}px`;
el.style.paddingLeft = '';
nextTick(() => {
entering = false;
});
window.setTimeout(renderTab, 170);
}
function afterEnter(el: Element) {
if (!(el instanceof HTMLElement)) return;
// element.style.width = '';
}
async function leave(el: Element) {
if (!(el instanceof HTMLElement)) return;
const elementWidth = el.getBoundingClientRect().width;
el.style.width = `${elementWidth}px`;
el.style.paddingLeft = '';
el.offsetWidth; // reflow
el.style.width = '0';
el.style.paddingLeft = '0';
}
function afterLeave(el: Element) {
if (!(el instanceof HTMLElement)) return;
el.style.width = '';
}
onMounted(() => {
watch([() => props.tab, () => props.tabs], () => {
nextTick(() => {
if (entering) return;
renderTab();
});
}, {
immediate: true,
});
});
onUnmounted(() => {
});
</script>
<style lang="scss" module>
.tabs {
--height: 40px;
display: block;
position: relative;
margin: 0;
height: var(--height);
font-size: 85%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.tabsInner {
display: inline-block;
height: var(--height);
white-space: nowrap;
}
.tab {
display: inline-block;
position: relative;
padding: 0 10px;
height: 100%;
font-weight: normal;
opacity: 0.7;
&:hover {
opacity: 1;
}
&.active {
opacity: 1;
}
&.animate {
transition: opacity 0.2s ease;
}
}
.tabInner {
display: flex;
align-items: center;
}
.tabIcon + .tabTitle {
padding-left: 4px;
}
.tabTitle {
overflow: hidden;
&.animate {
transition: width .15s linear, padding-left .15s linear;
}
}
.tabHighlight {
position: absolute;
bottom: 0;
height: 3px;
background: var(--MI_THEME-accent);
border-radius: 999px;
transition: none;
pointer-events: none;
&.animate {
transition: width 0.15s ease, left 0.15s ease;
}
}
</style>

5
packages/frontend/src/components/MkThemePreview.vue
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<g fill-rule="evenodd">
<rect width="200" height="150" :fill="themeVariables.bg"/>
<rect width="64" height="150" :fill="themeVariables.navBg"/>
<rect x="64" width="136" height="41" :fill="themeVariables.bg"/>
<rect x="64" width="136" height="41" :fill="themeVariables.pageHeaderBg"/>
<path transform="scale(.26458)" d="m439.77 247.19c-43.673 0-78.832 35.157-78.832 78.83v249.98h407.06v-328.81z" :fill="themeVariables.panel"/>
</g>
<circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/>
@ -62,6 +62,7 @@ const themeVariables = ref<{
accent: string;
accentedBg: string;
navBg: string;
pageHeaderBg: string;
success: string;
warn: string;
error: string;
@ -76,6 +77,7 @@ const themeVariables = ref<{
accent: 'var(--MI_THEME-accent)',
accentedBg: 'var(--MI_THEME-accentedBg)',
navBg: 'var(--MI_THEME-navBg)',
pageHeaderBg: 'var(--MI_THEME-pageHeaderBg)',
success: 'var(--MI_THEME-success)',
warn: 'var(--MI_THEME-warn)',
error: 'var(--MI_THEME-error)',
@ -104,6 +106,7 @@ watch(() => props.theme, (theme) => {
accent: compiled.accent ?? 'var(--MI_THEME-accent)',
accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)',
navBg: compiled.navBg ?? 'var(--MI_THEME-navBg)',
pageHeaderBg: compiled.pageHeaderBg ?? 'var(--MI_THEME-pageHeaderBg)',
success: compiled.success ?? 'var(--MI_THEME-success)',
warn: compiled.warn ?? 'var(--MI_THEME-warn)',
error: compiled.error ?? 'var(--MI_THEME-error)',

173
packages/frontend/src/components/MkTl.vue Normal file
View file

@ -0,0 +1,173 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.items">
<template v-for="(item, i) in items" :key="item.id">
<div :class="$style.left">
<slot v-if="item.type === 'event'" name="left" :event="item.data" :timestamp="item.timestamp" :delta="item.delta"></slot>
</div>
<div :class="[$style.center, item.type === 'date' ? $style.date : '']">
<div :class="$style.centerLine"></div>
<div :class="$style.centerPoint"></div>
</div>
<div :class="$style.right">
<slot v-if="item.type === 'event'" name="right" :event="item.data" :timestamp="item.timestamp" :delta="item.delta"></slot>
<div v-else :class="$style.dateLabel"><i class="ti ti-chevron-up"></i> {{ item.prevText }}</div>
</div>
</template>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps<{
events: {
id: string;
timestamp: number;
data: any;
}[];
}>();
const events = computed(() => {
return props.events.toSorted((a, b) => b.timestamp - a.timestamp);
});
function getDateText(dateInstance: Date) {
const year = dateInstance.getFullYear();
const month = dateInstance.getMonth() + 1;
const date = dateInstance.getDate();
const hour = dateInstance.getHours();
return `${year.toString()}/${month.toString()}/${date.toString()} ${hour.toString().padStart(2, '0')}:00:00`;
}
const items = computed<({
id: string;
type: 'event';
timestamp: number;
delta: number;
data: any;
} | {
id: string;
type: 'date';
prev: Date;
prevText: string;
next: Date | null;
nextText: string;
})[]>(() => {
const results = [];
for (let i = 0; i < events.value.length; i++) {
const item = events.value[i];
const date = new Date(item.timestamp);
const nextDate = events.value[i + 1] ? new Date(events.value[i + 1].timestamp) : null;
results.push({
id: item.id,
type: 'event',
timestamp: item.timestamp,
delta: i === events.value.length - 1 ? 0 : item.timestamp - events.value[i + 1].timestamp,
data: item.data,
});
if (
i !== events.value.length - 1 &&
nextDate != null && (
date.getFullYear() !== nextDate.getFullYear() ||
date.getMonth() !== nextDate.getMonth() ||
date.getDate() !== nextDate.getDate() ||
date.getHours() !== nextDate.getHours()
)
) {
results.push({
id: `date-${item.id}`,
type: 'date',
prev: date,
prevText: getDateText(date),
next: nextDate,
nextText: getDateText(nextDate),
});
}
}
return results;
});
</script>
<style lang="scss" module>
.root {
}
.items {
display: grid;
grid-template-columns: max-content 18px 1fr;
gap: 0 8px;
}
.item {
}
.center {
position: relative;
&.date {
.centerPoint::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 7px;
height: 7px;
background: var(--MI_THEME-bg);
border-radius: 50%;
}
}
}
.centerLine {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 3px;
height: 100%;
background: color-mix(in srgb, var(--MI_THEME-accent), var(--MI_THEME-bg) 75%);
}
.centerPoint {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 13px;
height: 13px;
background: color-mix(in srgb, var(--MI_THEME-accent), var(--MI_THEME-bg) 75%);
border-radius: 50%;
}
.left {
min-width: 0;
align-self: center;
justify-self: right;
}
.right {
min-width: 0;
align-self: center;
}
.dateLabel {
opacity: 0.7;
font-size: 90%;
padding: 4px;
margin: 8px 0;
}
</style>

2
packages/frontend/src/components/SkUserRecentNotes.vue
View file

@ -67,7 +67,7 @@ async function reload(): Promise<void> {
// An additional request is needed to "upgrade" the object.
misskeyApi('users/show', { userId: props.userId }),
// Wait for 1 second to match the animation effects in MkHorizontalSwipe, MkPullToRefresh, and MkPagination.
// Wait for 1 second to match the animation effects in MkSwiper, MkPullToRefresh, and MkPagination.
// Otherwise, the page appears to load "backwards".
new Promise(resolve => window.setTimeout(resolve, 1000)),
])

11
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -140,11 +140,18 @@ onUnmounted(() => {
<style lang="scss" module>
.root {
background: color(from var(--MI_THEME-bg) srgb r g b / 0.75);
background: color(from var(--MI_THEME-pageHeaderBg) srgb r g b / 0.75);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
border-bottom: solid 0.5px var(--MI_THEME-divider);
border-bottom: solid 0.5px transparent;
width: 100%;
color: var(--MI_THEME-pageHeaderFg);
}
@container style(--MI_THEME-pageHeaderBg: var(--MI_THEME-bg)) {
.root {
border-bottom: solid 0.5px var(--MI_THEME-divider);
}
}
.upper,

3
packages/frontend/src/components/global/PageWithHeader.vue
View file

@ -20,6 +20,7 @@ import { useTemplateRef } from 'vue';
import { scrollInContainer } from '@@/js/scroll.js';
import type { PageHeaderItem } from '@/types/page-header.js';
import type { Tab } from './MkPageHeader.tabs.vue';
import { useScrollPositionKeeper } from '@/use/use-scroll-position-keeper.js';
const props = withDefaults(defineProps<{
tabs?: Tab[];
@ -36,6 +37,8 @@ const props = withDefaults(defineProps<{
const tab = defineModel<string>('tab');
const rootEl = useTemplateRef('rootEl');
useScrollPositionKeeper(rootEl);
defineExpose({
scrollToTop: () => {
if (rootEl.value) scrollInContainer(rootEl.value, { top: 0, behavior: 'smooth' });

1
packages/frontend/src/deck.ts
View file

@ -39,6 +39,7 @@ export const columnTypes = [
'mentions',
'direct',
'roleTimeline',
'chat',
'following',
] as const;

6
packages/frontend/src/pages/about.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<MkSwiper v-model:tab="tab" :tabs="headerTabs">
<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
<XOverview/>
</MkSpacer>
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
<MkInstanceStats/>
</MkSpacer>
</MkHorizontalSwipe>
</MkSwiper>
</PageWithHeader>
</template>
@ -28,7 +28,7 @@ import { instance } from '@/instance.js';
import { i18n } from '@/i18n.js';
import { claimAchievement } from '@/utility/achievements.js';
import { definePage } from '@/page.js';
import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
import MkSwiper from '@/components/MkSwiper.vue';
const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue'));
const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));

296
packages/frontend/src/pages/admin/_header_.vue
View file

@ -1,296 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
<template v-if="pageMetadata">
<div class="titleContainer" @click="showTabsPopup">
<i v-if="pageMetadata.icon" class="icon" :class="pageMetadata.icon"></i>
<div class="title">
<div class="title">{{ pageMetadata.title }}</div>
</div>
</div>
<div class="tabs">
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
</button>
<div ref="tabHighlightEl" class="highlight"></div>
</div>
</template>
<div class="buttons right">
<template v-if="actions">
<template v-for="action in actions">
<MkButton v-if="action.asFullButton" class="fullButton" primary :disabled="action.disabled" @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
<button v-else v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" :disabled="action.disabled" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
</template>
</template>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch, nextTick, inject } from 'vue';
import tinycolor from 'tinycolor2';
import { scrollToTop } from '@@/js/scroll.js';
import { popupMenu } from '@/os.js';
import MkButton from '@/components/MkButton.vue';
import { globalEvents } from '@/events.js';
import { DI } from '@/di.js';
type Tab = {
key?: string | null;
title: string;
icon?: string;
iconOnly?: boolean;
onClick?: (ev: MouseEvent) => void;
};
const props = defineProps<{
tabs?: Tab[];
tab?: string;
actions?: {
text: string;
icon: string;
asFullButton?: boolean;
disabled?: boolean;
handler: (ev: MouseEvent) => void;
}[];
thin?: boolean;
}>();
const emit = defineEmits<{
(ev: 'update:tab', key: string);
}>();
const pageMetadata = inject(DI.pageMetadata, ref(null));
const el = useTemplateRef('el');
const tabHighlightEl = useTemplateRef('tabHighlightEl');
const tabRefs = {};
const bg = ref<string | null>(null);
const height = ref(0);
const hasTabs = computed(() => {
return props.tabs && props.tabs.length > 0;
});
const showTabsPopup = (ev: MouseEvent) => {
if (!hasTabs.value) return;
ev.preventDefault();
ev.stopPropagation();
const menu = props.tabs.map(tab => ({
text: tab.title,
icon: tab.icon,
active: tab.key != null && tab.key === props.tab,
action: (ev) => {
onTabClick(tab, ev);
},
}));
popupMenu(menu, ev.currentTarget ?? ev.target);
};
const preventDrag = (ev: TouchEvent) => {
ev.stopPropagation();
};
const onClick = () => {
scrollToTop(el.value, { behavior: 'smooth' });
};
function onTabMousedown(tab: Tab, ev: MouseEvent): void {
// ユーザビリティの観点からmousedown時にはonClickは呼ばない
if (tab.key) {
emit('update:tab', tab.key);
}
}
function onTabClick(tab: Tab, ev: MouseEvent): void {
if (tab.onClick) {
ev.preventDefault();
ev.stopPropagation();
tab.onClick(ev);
}
if (tab.key) {
emit('update:tab', tab.key);
}
}
const calcBg = () => {
const rawBg = pageMetadata.value.bg ?? 'var(--MI_THEME-bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(window.document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
tinyBg.setAlpha(0.85);
bg.value = tinyBg.toRgbString();
};
onMounted(() => {
calcBg();
globalEvents.on('themeChanging', calcBg);
watch(() => [props.tab, props.tabs], () => {
nextTick(() => {
const tabEl = tabRefs[props.tab];
if (tabEl && tabHighlightEl.value) {
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
const parentRect = tabEl.parentElement.getBoundingClientRect();
const rect = tabEl.getBoundingClientRect();
tabHighlightEl.value.style.width = rect.width + 'px';
tabHighlightEl.value.style.left = (rect.left - parentRect.left) + 'px';
}
});
}, {
immediate: true,
});
});
onUnmounted(() => {
globalEvents.off('themeChanging', calcBg);
});
</script>
<style lang="scss" scoped>
.fdidabkc {
--height: 60px;
display: flex;
width: 100%;
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
> .buttons {
--margin: 8px;
display: flex;
align-items: center;
height: var(--height);
margin: 0 var(--margin);
&.right {
margin-left: auto;
}
&:empty {
width: var(--height);
}
> .button {
display: flex;
align-items: center;
justify-content: center;
height: calc(var(--height) - (var(--margin) * 2));
width: calc(var(--height) - (var(--margin) * 2));
box-sizing: border-box;
position: relative;
border-radius: var(--MI-radius-xs);
&:hover {
background: rgba(0, 0, 0, 0.05);
}
&.highlighted {
color: var(--MI_THEME-accent);
}
}
> .fullButton {
& + .fullButton {
margin-left: 12px;
}
}
}
> .titleContainer {
display: flex;
align-items: center;
max-width: 400px;
overflow: auto;
white-space: nowrap;
text-align: left;
font-weight: bold;
flex-shrink: 0;
margin-left: 24px;
> .avatar {
$size: 32px;
display: inline-block;
width: $size;
height: $size;
vertical-align: bottom;
margin: 0 8px;
pointer-events: none;
}
> .icon {
margin-right: 8px;
width: 16px;
text-align: center;
}
> .title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.1;
> .subtitle {
opacity: 0.6;
font-size: 0.8em;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.activeTab {
text-align: center;
> .chevron {
display: inline-block;
margin-left: 6px;
}
}
}
}
}
> .tabs {
position: relative;
margin-left: 16px;
font-size: 0.8em;
overflow: auto;
white-space: nowrap;
> .tab {
display: inline-block;
position: relative;
padding: 0 10px;
height: 100%;
font-weight: normal;
opacity: 0.7;
&:hover {
opacity: 1;
}
&.active {
opacity: 1;
}
> .icon + .title {
margin-left: 8px;
}
}
> .highlight {
position: absolute;
bottom: 0;
height: 3px;
background: var(--MI_THEME-accent);
border-radius: var(--MI-radius-ellipse);
transition: all 0.2s ease;
pointer-events: none;
}
}
}
</style>

9
packages/frontend/src/pages/admin/abuse-report/notification-recipient.vue
View file

@ -4,11 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header>
<XHeader :actions="headerActions" :tabs="headerTabs"/>
</template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div :class="$style.root" class="_gaps_m">
<div :class="$style.addButton">
@ -41,14 +37,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script setup lang="ts">
import { entities } from 'misskey-js';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import XRecipient from './notification-recipient.item.vue';
import XHeader from '@/pages/admin/_header_.vue';
import { misskeyApi } from '@/utility/misskey-api.js';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';

6
packages/frontend/src/pages/admin/abuses.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div :class="$style.root" class="_gaps">
<div :class="$style.subMenus" class="_gaps">
@ -55,12 +54,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { computed, useTemplateRef, ref } from 'vue';
import XHeader from './_header_.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkPagination from '@/components/MkPagination.vue';
import XAbuseReport from '@/components/MkAbuseReport.vue';

8
packages/frontend/src/pages/admin/ads.vue
View file

@ -4,10 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header>
<XHeader :actions="headerActions" :tabs="headerTabs"/>
</template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<MkSelect v-model="filterType" :class="$style.input" @update:modelValue="filterItems">
<template #label>{{ i18n.ts.state }}</template>
@ -81,13 +78,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkButton>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import * as Misskey from 'misskey-js';
import XHeader from './_header_.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue';

6
packages/frontend/src/pages/admin/announcements.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_gaps">
<MkInfo>{{ i18n.ts._announcement.shouldNotBeUsedToPresentPermanentInfo }}</MkInfo>
@ -81,12 +80,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import XHeader from './_header_.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';

6
packages/frontend/src/pages/admin/approvals.vue
View file

@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_gaps_m">
<MkPagination ref="paginationComponent" :pagination="pagination" :displayLimit="50">
@ -18,13 +17,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</div>
</template>
<script lang="ts" setup>
import { computed, useTemplateRef } from 'vue';
import XHeader from './_header_.vue';
import MkPagination from '@/components/MkPagination.vue';
import SkApprovalUser from '@/components/SkApprovalUser.vue';
import { i18n } from '@/i18n.js';

194
packages/frontend/src/pages/admin/branding.vue
View file

@ -4,125 +4,122 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkInput v-model="iconUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.iconUrl }}</template>
</MkInput>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkInput v-model="iconUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.iconUrl }}</template>
</MkInput>
<MkInput v-model="app192IconUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/192px)</template>
<template #caption>
<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '192x192px' }) }}</strong></div>
</template>
</MkInput>
<MkInput v-model="app192IconUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/192px)</template>
<template #caption>
<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '192x192px' }) }}</strong></div>
</template>
</MkInput>
<MkInput v-model="app512IconUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/512px)</template>
<template #caption>
<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '512x512px' }) }}</strong></div>
</template>
</MkInput>
<MkInput v-model="app512IconUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/512px)</template>
<template #caption>
<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '512x512px' }) }}</strong></div>
</template>
</MkInput>
<MkInput v-model="sidebarLogoUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.sidebarLogoUrl }}</template>
<template #caption>
<div>{{ i18n.ts._serverSettings.sidebarLogoDescription }}</div>
<div>({{ i18n.ts._serverSettings.sidebarLogoUsageExample }})</div>
</template>
</MkInput>
<MkInput v-model="sidebarLogoUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.sidebarLogoUrl }}</template>
<template #caption>
<div>{{ i18n.ts._serverSettings.sidebarLogoDescription }}</div>
<div>({{ i18n.ts._serverSettings.sidebarLogoUsageExample }})</div>
</template>
</MkInput>
<MkInput v-model="bannerUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.bannerUrl }}</template>
</MkInput>
<MkInput v-model="bannerUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.bannerUrl }}</template>
</MkInput>
<MkInput v-model="backgroundImageUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
</MkInput>
<MkInput v-model="backgroundImageUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
</MkInput>
<FromSlot>
<template #label>{{ i18n.ts.defaultLike }}</template>
<MkCustomEmoji v-if="defaultLike.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :name="defaultLike" :normal="true" :noStyle="true"/>
<MkEmoji v-else :emoji="defaultLike" style="max-height: 3em; font-size: 1.1em;" :normal="true" :noStyle="true"/>
<MkButton rounded :small="true" @click="chooseNewLike"><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton>
</FromSlot>
<FromSlot>
<template #label>{{ i18n.ts.defaultLike }}</template>
<MkCustomEmoji v-if="defaultLike.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :name="defaultLike" :normal="true" :noStyle="true"/>
<MkEmoji v-else :emoji="defaultLike" style="max-height: 3em; font-size: 1.1em;" :normal="true" :noStyle="true"/>
<MkButton rounded :small="true" @click="chooseNewLike"><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton>
</FromSlot>
<MkInput v-model="notFoundImageUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.notFoundDescription }}</template>
</MkInput>
<MkInput v-model="notFoundImageUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.notFoundDescription }}</template>
</MkInput>
<MkInput v-model="infoImageUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.nothing }}</template>
</MkInput>
<MkInput v-model="infoImageUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.nothing }}</template>
</MkInput>
<MkInput v-model="serverErrorImageUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.somethingHappened }}</template>
</MkInput>
<MkInput v-model="serverErrorImageUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.somethingHappened }}</template>
</MkInput>
<MkColorInput v-model="themeColor">
<template #label>{{ i18n.ts.themeColor }}</template>
</MkColorInput>
<MkColorInput v-model="themeColor">
<template #label>{{ i18n.ts.themeColor }}</template>
</MkColorInput>
<MkTextarea v-model="defaultLightTheme">
<template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template>
<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
</MkTextarea>
<MkTextarea v-model="defaultLightTheme">
<template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template>
<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
</MkTextarea>
<MkTextarea v-model="defaultDarkTheme">
<template #label>{{ i18n.ts.instanceDefaultDarkTheme }}</template>
<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
</MkTextarea>
<MkTextarea v-model="defaultDarkTheme">
<template #label>{{ i18n.ts.instanceDefaultDarkTheme }}</template>
<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
</MkTextarea>
<MkInput v-model="repositoryUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.repositoryUrl }}</template>
</MkInput>
<MkInput v-model="repositoryUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.repositoryUrl }}</template>
</MkInput>
<MkInput v-model="feedbackUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.feedbackUrl }}</template>
</MkInput>
<MkInput v-model="feedbackUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.feedbackUrl }}</template>
</MkInput>
<MkTextarea v-model="manifestJsonOverride">
<template #label>{{ i18n.ts._serverSettings.manifestJsonOverride }}</template>
</MkTextarea>
</div>
</FormSuspense>
</MkSpacer>
<template #footer>
<div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</MkSpacer>
<MkTextarea v-model="manifestJsonOverride">
<template #label>{{ i18n.ts._serverSettings.manifestJsonOverride }}</template>
</MkTextarea>
</div>
</template>
</MkStickyContainer>
</div>
</FormSuspense>
</MkSpacer>
<template #footer>
<div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</MkSpacer>
</div>
</template>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import JSON5 from 'json5';
import XHeader from './_header_.vue';
import { host } from '@@/js/config.js';
import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import FromSlot from '@/components/form/slot.vue';
@ -134,7 +131,6 @@ import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import MkButton from '@/components/MkButton.vue';
import MkColorInput from '@/components/MkColorInput.vue';
import { host } from '@@/js/config.js';
const iconUrl = ref<string | null>(null);
const sidebarLogoUrl = ref<string | null>(null);

6
packages/frontend/src/pages/admin/email-settings.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :tabs="headerTabs"/></template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<FormSuspense :p="init">
<div class="_gaps_m">
@ -60,12 +59,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSpacer>
</div>
</template>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import XHeader from './_header_.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkInput from '@/components/MkInput.vue';
import FormInfo from '@/components/MkInfo.vue';

6
packages/frontend/src/pages/admin/external-services.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<FormSuspense :p="init">
<div class="_gaps_m">
@ -54,12 +53,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</FormSuspense>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import XHeader from './_header_.vue';
import MkInput from '@/components/MkInput.vue';
import MkButton from '@/components/MkButton.vue';
import MkSwitch from '@/components/MkSwitch.vue';

0
packages/frontend/src/pages/admin/queue.chart.chart.vue → packages/frontend/src/pages/admin/federation-job-queue.chart.chart.vue
View file

4
packages/frontend/src/pages/admin/queue.chart.vue → packages/frontend/src/pages/admin/federation-job-queue.chart.vue
View file

@ -50,8 +50,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { markRaw, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
import * as Misskey from 'misskey-js';
import XChart from './queue.chart.chart.vue';
import type { ApQueueDomain } from '@/pages/admin/queue.vue';
import XChart from './federation-job-queue.chart.chart.vue';
import type { ApQueueDomain } from '@/pages/admin/federation-job-queue.vue';
import number from '@/filters/number.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { useStream } from '@/stream.js';

20
packages/frontend/src/pages/admin/queue.vue → packages/frontend/src/pages/admin/federation-job-queue.vue
View file

@ -4,22 +4,22 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<XQueue v-if="tab === 'deliver'" domain="deliver"/>
<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
<br>
<MkButton @click="promoteAllQueues"><i class="ti ti-reload"></i> {{ i18n.ts.retryAllQueuesNow }}</MkButton>
<div class="_buttons">
<MkButton @click="promoteAllQueues"><i class="ti ti-reload"></i> {{ i18n.ts.retryAllQueuesNow }}</MkButton>
<MkButton danger @click="clear"><i class="ti ti-trash"></i> {{ i18n.ts.clearQueue }}</MkButton>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import * as config from '@@/js/config.js';
import XQueue from './queue.chart.vue';
import XHeader from './_header_.vue';
import XQueue from './federation-job-queue.chart.vue';
import type { Ref } from 'vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
@ -38,7 +38,7 @@ function clear() {
}).then(({ canceled }) => {
if (canceled) return;
os.apiWithDialog('admin/queue/clear');
os.apiWithDialog('admin/queue/clear', { queue: tab.value, state: '*' });
});
}
@ -50,7 +50,7 @@ function promoteAllQueues() {
}).then(({ canceled }) => {
if (canceled) return;
os.apiWithDialog('admin/queue/promote', { type: tab.value });
os.apiWithDialog('admin/queue/promote-jobs', { queue: tab.value });
});
}
@ -65,7 +65,7 @@ const headerTabs = computed(() => [{
}]);
definePage(() => ({
title: i18n.ts.jobQueue,
title: i18n.ts.federationJobs,
icon: 'ti ti-clock-play',
}));
</script>

102
packages/frontend/src/pages/admin/federation.vue
View file

@ -4,65 +4,61 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions"/></template>
<MkSpacer :contentMax="900">
<div class="_gaps">
<div>
<MkInput v-model="host" :debounce="true" class="">
<template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
<FormSplit style="margin-top: var(--MI-margin);">
<MkSelect v-model="state">
<template #label>{{ i18n.ts.state }}</template>
<option value="all">{{ i18n.ts.all }}</option>
<option value="federating">{{ i18n.ts.federating }}</option>
<option value="subscribing">{{ i18n.ts.subscribing }}</option>
<option value="publishing">{{ i18n.ts.publishing }}</option>
<!-- TODO translate -->
<option value="nsfw">NSFW</option>
<option value="suspended">{{ i18n.ts.suspended }}</option>
<option value="blocked">{{ i18n.ts.blocked }}</option>
<option value="silenced">{{ i18n.ts.silence }}</option>
<option value="notResponding">{{ i18n.ts.notResponding }}</option>
</MkSelect>
<MkSelect v-model="sort">
<template #label>{{ i18n.ts.sort }}</template>
<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+firstRetrievedAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-firstRetrievedAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
</MkSelect>
</FormSplit>
</div>
<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination" :displayLimit="50">
<div :class="$style.instances">
<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" :class="$style.instance" :to="`/instance-info/${instance.host}`">
<MkInstanceCardMini :instance="instance"/>
</MkA>
</div>
</MkPagination>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_gaps">
<div>
<MkInput v-model="host" :debounce="true" class="">
<template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
<FormSplit style="margin-top: var(--MI-margin);">
<MkSelect v-model="state">
<template #label>{{ i18n.ts.state }}</template>
<option value="all">{{ i18n.ts.all }}</option>
<option value="federating">{{ i18n.ts.federating }}</option>
<option value="subscribing">{{ i18n.ts.subscribing }}</option>
<option value="publishing">{{ i18n.ts.publishing }}</option>
<!-- TODO translate -->
<option value="nsfw">NSFW</option>
<option value="suspended">{{ i18n.ts.suspended }}</option>
<option value="blocked">{{ i18n.ts.blocked }}</option>
<option value="silenced">{{ i18n.ts.silence }}</option>
<option value="notResponding">{{ i18n.ts.notResponding }}</option>
</MkSelect>
<MkSelect v-model="sort">
<template #label>{{ i18n.ts.sort }}</template>
<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+firstRetrievedAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-firstRetrievedAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
</MkSelect>
</FormSplit>
</div>
</MkSpacer>
</MkStickyContainer>
</div>
<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination" :displayLimit="50">
<div :class="$style.instances">
<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" :class="$style.instance" :to="`/instance-info/${instance.host}`">
<MkInstanceCardMini :instance="instance"/>
</MkA>
</div>
</MkPagination>
</div>
</MkSpacer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { computed, ref } from 'vue';
import XHeader from './_header_.vue';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkPagination from '@/components/MkPagination.vue';

54
packages/frontend/src/pages/admin/files.vue
View file

@ -4,40 +4,36 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions"/></template>
<MkSpacer :contentMax="900">
<div class="_gaps">
<div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.instance }}</template>
<option value="combined">{{ i18n.ts.all }}</option>
<option value="local">{{ i18n.ts.local }}</option>
<option value="remote">{{ i18n.ts.remote }}</option>
</MkSelect>
<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
</div>
<div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
<template #label>User ID</template>
</MkInput>
<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
<template #label>MIME type</template>
</MkInput>
</div>
<MkFileListForAdmin :pagination="pagination" :viewMode="viewMode"/>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_gaps">
<div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.instance }}</template>
<option value="combined">{{ i18n.ts.all }}</option>
<option value="local">{{ i18n.ts.local }}</option>
<option value="remote">{{ i18n.ts.remote }}</option>
</MkSelect>
<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
</div>
</MkSpacer>
</MkStickyContainer>
</div>
<div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
<template #label>User ID</template>
</MkInput>
<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
<template #label>MIME type</template>
</MkInput>
</div>
<MkFileListForAdmin :pagination="pagination" :viewMode="viewMode"/>
</div>
</MkSpacer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import XHeader from './_header_.vue';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';

13
packages/frontend/src/pages/admin/index.vue
View file

@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkSpacer>
</div>
<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
<div v-if="!(narrow && currentPage?.route.name == null)" class="main _pageContainer" style="height: 100%;">
<NestedRouterView/>
</div>
</div>
@ -160,11 +160,16 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
text: i18n.ts.federation,
to: '/admin/federation',
active: currentPage.value?.route.name === 'federation',
}, {
icon: 'ti ti-clock-play',
text: i18n.ts.federationJobs,
to: '/admin/federation-job-queue',
active: currentPage.value?.route.name === 'federationJobQueue',
}, {
icon: 'ti ti-clock-play',
text: i18n.ts.jobQueue,
to: '/admin/queue',
active: currentPage.value?.route.name === 'queue',
to: '/admin/job-queue',
active: currentPage.value?.route.name === 'jobQueue',
}, {
icon: 'ti ti-cloud',
text: i18n.ts.files,
@ -351,6 +356,8 @@ defineExpose({
<style lang="scss" scoped>
.hiyeyicy {
height: 100%;
&.wide {
display: flex;
margin: 0 auto;

6
packages/frontend/src/pages/admin/invites.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<div class="_gaps_m">
<MkFolder :expanded="false">
@ -51,12 +50,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { computed, ref, useTemplateRef } from 'vue';
import XHeader from './_header_.vue';
import type { Paging } from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js';
import * as os from '@/os.js';

127
packages/frontend/src/pages/admin/job-queue.chart.vue Normal file
View file

@ -0,0 +1,127 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<canvas ref="chartEl"></canvas>
</template>
<script lang="ts" setup>
import { onMounted, useTemplateRef, watch } from 'vue';
import { Chart } from 'chart.js';
import { store } from '@/store.js';
import { useChartTooltip } from '@/use/use-chart-tooltip.js';
import { chartVLine } from '@/utility/chart-vline.js';
import { alpha } from '@/utility/color.js';
import { initChart } from '@/utility/init-chart.js';
initChart();
const props = defineProps<{
dataSet: {
completed: number[];
failed: number[];
};
aspectRatio?: number;
}>();
const chartEl = useTemplateRef('chartEl');
const { handler: externalTooltipHandler } = useChartTooltip();
let chartInstance: Chart;
function setData() {
if (chartInstance == null) return;
chartInstance.data.labels = [];
for (let i = 0; i < Math.max(props.dataSet.completed.length, props.dataSet.failed.length); i++) {
chartInstance.data.labels.push('');
}
chartInstance.data.datasets[0].data = props.dataSet.completed;
chartInstance.data.datasets[1].data = props.dataSet.failed;
chartInstance.update();
}
watch(() => props.dataSet, () => {
setData();
});
onMounted(() => {
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
chartInstance = new Chart(chartEl.value, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Completed',
pointRadius: 0,
tension: 0.3,
borderWidth: 2,
borderJoinStyle: 'round',
borderColor: '#4caf50',
backgroundColor: alpha('#4caf50', 0.2),
fill: true,
data: [],
}, {
label: 'Failed',
pointRadius: 0,
tension: 0.3,
borderWidth: 2,
borderJoinStyle: 'round',
borderColor: '#ff0000',
backgroundColor: alpha('#ff0000', 0.2),
fill: true,
data: [],
}],
},
options: {
aspectRatio: props.aspectRatio ?? 2.5,
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
},
scales: {
x: {
grid: {
display: true,
},
ticks: {
display: false,
maxTicksLimit: 10,
},
},
y: {
min: 0,
grid: {
},
},
},
interaction: {
intersect: false,
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
mode: 'index',
animation: {
duration: 0,
},
external: externalTooltipHandler,
},
},
},
plugins: [chartVLine(vLineColor)],
});
setData();
});
</script>

280
packages/frontend/src/pages/admin/job-queue.job.vue Normal file
View file

@ -0,0 +1,280 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkFolder>
<template #label>
<span v-if="job.opts.repeat != null" style="margin-right: 1em;">&lt;repeat&gt;</span>
<span v-else style="margin-right: 1em;">#{{ job.id }}</span>
<span>{{ job.name }}</span>
</template>
<template #suffix>
<MkTime :time="job.finishedOn ?? job.processedOn ?? job.timestamp" mode="relative"/>
<span v-if="job.progress != null && job.progress > 0" style="margin-left: 1em;">{{ Math.floor(job.progress * 100) }}%</span>
<span v-if="job.opts.attempts != null && job.opts.attempts > 0 && job.attempts > 1" style="margin-left: 1em; color: var(--MI_THEME-warn); font-variant-numeric: diagonal-fractions;">{{ job.attempts }}/{{ job.opts.attempts }}</span>
<span v-if="job.isFailed && job.finishedOn != null" style="margin-left: 1em; color: var(--MI_THEME-error)"><i class="ti ti-circle-x"></i></span>
<span v-else-if="job.isFailed" style="margin-left: 1em; color: var(--MI_THEME-warn)"><i class="ti ti-alert-triangle"></i></span>
<span v-else-if="job.finishedOn != null" style="margin-left: 1em; color: var(--MI_THEME-success)"><i class="ti ti-check"></i></span>
<span v-else-if="job.delay != null && job.delay != 0" style="margin-left: 1em;"><i class="ti ti-clock"></i></span>
<span v-else-if="job.processedOn != null" style="margin-left: 1em; color: var(--MI_THEME-success)"><i class="ti ti-player-play"></i></span>
</template>
<template #header>
<MkTabs
v-model:tab="tab"
:tabs="[{
key: 'info',
title: 'Info',
icon: 'ti ti-info-circle',
}, {
key: 'timeline',
title: 'Timeline',
icon: 'ti ti-timeline-event',
}, {
key: 'data',
title: 'Data',
icon: 'ti ti-package',
}, ...(canEdit ? [{
key: 'dataEdit',
title: 'Data (edit)',
icon: 'ti ti-package',
}] : []),
...(job.returnValue != null ? [{
key: 'result',
title: 'Result',
icon: 'ti ti-check',
}] : []),
...(job.stacktrace.length > 0 ? [{
key: 'error',
title: 'Error',
icon: 'ti ti-alert-triangle',
}] : []), {
key: 'logs',
title: 'Logs',
icon: 'ti ti-logs',
}]"
/>
</template>
<template #footer>
<div class="_buttons">
<MkButton rounded @click="copyRaw()"><i class="ti ti-copy"></i> Copy raw</MkButton>
<MkButton rounded @click="refresh()"><i class="ti ti-reload"></i> Refresh view</MkButton>
<MkButton rounded @click="promoteJob()"><i class="ti ti-player-track-next"></i> Promote</MkButton>
<MkButton rounded @click="moveJob"><i class="ti ti-arrow-right"></i> Move to</MkButton>
<MkButton danger rounded style="margin-left: auto;" @click="removeJob()"><i class="ti ti-trash"></i> Remove</MkButton>
</div>
</template>
<div v-if="tab === 'info'" class="_gaps_s">
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;">
<MkKeyValue>
<template #key>ID</template>
<template #value>{{ job.id }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Created at</template>
<template #value><MkTime :time="job.timestamp" mode="detail"/></template>
</MkKeyValue>
<MkKeyValue v-if="job.processedOn != null">
<template #key>Processed at</template>
<template #value><MkTime :time="job.processedOn" mode="detail"/></template>
</MkKeyValue>
<MkKeyValue v-if="job.finishedOn != null">
<template #key>Finished at</template>
<template #value><MkTime :time="job.finishedOn" mode="detail"/></template>
</MkKeyValue>
<MkKeyValue v-if="job.processedOn != null && job.finishedOn != null">
<template #key>Spent</template>
<template #value>{{ job.finishedOn - job.processedOn }}ms</template>
</MkKeyValue>
<MkKeyValue v-if="job.failedReason != null">
<template #key>Failed reason</template>
<template #value><i style="color: var(--MI_THEME-error)" class="ti ti-alert-triangle"></i> {{ job.failedReason }}</template>
</MkKeyValue>
<MkKeyValue v-if="job.opts.attempts != null && job.opts.attempts > 0">
<template #key>Attempts</template>
<template #value>{{ job.attempts }} of {{ job.opts.attempts }}</template>
</MkKeyValue>
<MkKeyValue v-if="job.progress != null && job.progress > 0">
<template #key>Progress</template>
<template #value>{{ Math.floor(job.progress * 100) }}%</template>
</MkKeyValue>
</div>
<MkFolder :withSpacer="false">
<template #label>Options</template>
<MkCode :code="JSON5.stringify(job.opts, null, '\t')" lang="js"/>
</MkFolder>
</div>
<div v-else-if="tab === 'timeline'">
<MkTl :events="timeline">
<template #left="{ event }">
<div>
<template v-if="event.type === 'finished'">
<template v-if="job.isFailed">
<b>Finished</b> <i class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i>
</template>
<template v-else>
<b>Finished</b> <i class="ti ti-check" style="color: var(--MI_THEME-success);"></i>
</template>
</template>
<template v-else-if="event.type === 'processed'">
<b>Processed</b> <i class="ti ti-player-play"></i>
</template>
<template v-else-if="event.type === 'attempt'">
<b>Attempt #{{ event.attempt }}</b> <i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i>
</template>
<template v-else-if="event.type === 'created'">
<b>Created</b> <i class="ti ti-plus"></i>
</template>
</div>
</template>
<template #right="{ event, timestamp, delta }">
<div style="margin: 8px 0;">
<template v-if="event.type === 'attempt'">
<div>at ?</div>
</template>
<template v-else>
<div>at <MkTime :time="timestamp" mode="detail"/></div>
<div style="font-size: 90%; opacity: 0.7;">{{ timestamp }} (+{{ msSMH(delta) }})</div>
</template>
</div>
</template>
</MkTl>
</div>
<div v-else-if="tab === 'data'">
<MkCode :code="JSON5.stringify(job.data, null, '\t')" lang="js"/>
</div>
<div v-else-if="tab === 'dataEdit'" class="_gaps_s">
<MkCodeEditor v-model="editData" lang="json5"></MkCodeEditor>
<MkButton><i class="ti ti-device-floppy"></i> Update</MkButton>
</div>
<div v-else-if="tab === 'result'">
<MkCode :code="job.returnValue"/>
</div>
<div v-else-if="tab === 'error'" class="_gaps_s">
<MkCode v-for="log in job.stacktrace" :code="log" lang="stacktrace"/>
</div>
</MkFolder>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import JSON5 from 'json5';
import type { Ref } from 'vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import MkButton from '@/components/MkButton.vue';
import { misskeyApi } from '@/utility/misskey-api.js';
import MkTabs from '@/components/MkTabs.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkCode from '@/components/MkCode.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkTl from '@/components/MkTl.vue';
import kmg from '@/filters/kmg.js';
import bytes from '@/filters/bytes.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
function msSMH(v: number | null) {
if (v == null) return 'N/A';
if (v === 0) return '0';
const suffixes = ['ms', 's', 'm', 'h'];
const isMinus = v < 0;
if (isMinus) v = -v;
const i = Math.floor(Math.log(v) / Math.log(1000));
const value = v / Math.pow(1000, i);
const suffix = suffixes[i];
return `${isMinus ? '-' : ''}${value.toFixed(1)}${suffix}`;
}
const props = defineProps<{
job: any;
queueType: string;
}>();
const emit = defineEmits<{
(ev: 'needRefresh'): void,
}>();
const tab = ref('info');
const editData = ref(JSON5.stringify(props.job.data, null, '\t'));
const canEdit = true;
const timeline = computed(() => {
const events = [{
id: 'created',
timestamp: props.job.timestamp,
data: {
type: 'created',
},
}];
if (props.job.attempts > 1) {
for (let i = 1; i < props.job.attempts; i++) {
events.push({
id: `attempt-${i}`,
timestamp: props.job.timestamp + i,
data: {
type: 'attempt',
attempt: i,
},
});
}
}
if (props.job.processedOn != null) {
events.push({
id: 'processed',
timestamp: props.job.processedOn,
data: {
type: 'processed',
},
});
}
if (props.job.finishedOn != null) {
events.push({
id: 'finished',
timestamp: props.job.finishedOn,
data: {
type: 'finished',
},
});
}
return events;
});
async function promoteJob() {
const { canceled } = await os.confirm({
type: 'warning',
title: i18n.ts.areYouSure,
});
if (canceled) return;
os.apiWithDialog('admin/queue/retry-job', { queue: props.queueType, jobId: props.job.id });
}
async function removeJob() {
const { canceled } = await os.confirm({
type: 'warning',
title: i18n.ts.areYouSure,
});
if (canceled) return;
os.apiWithDialog('admin/queue/remove-job', { queue: props.queueType, jobId: props.job.id });
}
function moveJob() {
// TODO
}
function refresh() {
emit('needRefresh');
}
function copyRaw() {
const raw = JSON.stringify(props.job, null, '\t');
copyToClipboard(raw);
}
</script>
<style lang="scss" module>
</style>

370
packages/frontend/src/pages/admin/job-queue.vue Normal file
View file

@ -0,0 +1,370 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkSpacer>
<div v-if="tab === '-'" class="_gaps">
<div :class="$style.queues">
<div v-for="q in queueInfos" :key="q.name" :class="$style.queue" @click="tab = q.name">
<div style="display: flex; align-items: center; font-weight: bold;"><i class="ti ti-http-que" style="margin-right: 0.5em;"></i>{{ q.name }}<i v-if="!q.isPaused" style="color: var(--MI_THEME-success); margin-left: auto;" class="ti ti-player-play"></i></div>
<div :class="$style.queueCounts">
<MkKeyValue>
<template #key>Active</template>
<template #value>{{ kmg(q.counts.active, 2) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Delayed</template>
<template #value>{{ kmg(q.counts.delayed, 2) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Waiting</template>
<template #value>{{ kmg(q.counts.waiting, 2) }}</template>
</MkKeyValue>
</div>
<XChart :dataSet="{ completed: q.metrics.completed.data, failed: q.metrics.failed.data }"/>
</div>
</div>
</div>
<div v-else-if="queueInfo" class="_gaps">
<MkFolder :defaultOpen="true">
<template #label>Overview: {{ tab }}</template>
<template #icon><i class="ti ti-http-que"></i></template>
<template #suffix>#{{ queueInfo.db.processId }}:{{ queueInfo.db.port }} / {{ queueInfo.db.runId }}</template>
<template #caption>{{ queueInfo.qualifiedName }}</template>
<template #footer>
<div class="_buttons">
<MkButton rounded @click="promoteAllJobs"><i class="ti ti-player-track-next"></i> Promote all jobs</MkButton>
<MkButton rounded @click="createJob"><i class="ti ti-plus"></i> Add job</MkButton>
<MkButton v-if="queueInfo.isPaused" rounded @click="resumeQueue"><i class="ti ti-player-play"></i> Resume queue</MkButton>
<MkButton v-else rounded danger @click="pauseQueue"><i class="ti ti-player-pause"></i> Pause queue</MkButton>
<MkButton rounded danger @click="clearQueue"><i class="ti ti-trash"></i> Empty queue</MkButton>
</div>
</template>
<div class="_gaps">
<XChart :dataSet="{ completed: queueInfo.metrics.completed.data, failed: queueInfo.metrics.failed.data }" :aspectRatio="5"/>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;">
<MkKeyValue>
<template #key>Active</template>
<template #value>{{ kmg(queueInfo.counts.active, 2) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Delayed</template>
<template #value>{{ kmg(queueInfo.counts.delayed, 2) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Waiting</template>
<template #value>{{ kmg(queueInfo.counts.waiting, 2) }}</template>
</MkKeyValue>
</div>
<hr>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;">
<MkKeyValue>
<template #key>Clients: Connected</template>
<template #value>{{ queueInfo.db.clients.connected }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Clients: Blocked</template>
<template #value>{{ queueInfo.db.clients.blocked }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Memory: Peak</template>
<template #value>{{ bytes(queueInfo.db.memory.peak, 1) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Memory: Total</template>
<template #value>{{ bytes(queueInfo.db.memory.total, 1) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Memory: Used</template>
<template #value>{{ bytes(queueInfo.db.memory.used, 1) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>Uptime</template>
<template #value>{{ queueInfo.db.uptime }}</template>
</MkKeyValue>
</div>
</div>
</MkFolder>
<MkFolder :defaultOpen="true" :withSpacer="false">
<template #label>Jobs: {{ tab }}</template>
<template #icon><i class="ti ti-list-check"></i></template>
<template #suffix>&lt;A:{{ kmg(queueInfo.counts.active, 2) }}&gt; &lt;D:{{ kmg(queueInfo.counts.delayed, 2) }}&gt; &lt;W:{{ kmg(queueInfo.counts.waiting, 2) }}&gt;</template>
<template #header>
<MkTabs
v-model:tab="jobState"
:class="$style.jobsTabs" :tabs="[{
key: 'all',
title: 'All',
icon: 'ti ti-code-asterisk',
}, {
key: 'latest',
title: 'Latest',
icon: 'ti ti-logs',
}, {
key: 'completed',
title: 'Completed',
icon: 'ti ti-check',
}, {
key: 'failed',
title: 'Failed',
icon: 'ti ti-circle-x',
}, {
key: 'active',
title: 'Active',
icon: 'ti ti-player-play',
}, {
key: 'delayed',
title: 'Delayed',
icon: 'ti ti-clock',
}, {
key: 'wait',
title: 'Waiting',
icon: 'ti ti-hourglass-high',
}, {
key: 'paused',
title: 'Paused',
icon: 'ti ti-player-pause',
}]"
/>
</template>
<template #footer>
<div class="_buttons">
<MkButton rounded @click="fetchJobs()"><i class="ti ti-reload"></i> Refresh view</MkButton>
<MkButton rounded danger style="margin-left: auto;" @click="removeJobs"><i class="ti ti-trash"></i> Remove jobs</MkButton>
</div>
</template>
<MkSpacer>
<MkInput
v-model="searchQuery"
:placeholder="i18n.ts.search"
type="search"
style="margin-bottom: 16px;"
>
<template #prefix><i class="ti ti-search"></i></template>
</MkInput>
<MkLoading v-if="jobsFetching"/>
<MkTl
v-else
:events="jobs.map((job) => ({
id: job.id,
timestamp: job.finishedOn ?? job.processedOn ?? job.timestamp,
data: job,
}))"
class="_monospace"
>
<template #right="{ event: job }">
<XJob :job="job" :queueType="tab" style="margin: 4px 0;" @needRefresh="refreshJob(job.id)"/>
</template>
</MkTl>
</MkSpacer>
</MkFolder>
</div>
</MkSpacer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import JSON5 from 'json5';
import { debounce } from 'throttle-debounce';
import { useInterval } from '@@/js/use-interval.js';
import XChart from './job-queue.chart.vue';
import XJob from './job-queue.job.vue';
import type { Ref } from 'vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import MkButton from '@/components/MkButton.vue';
import { misskeyApi } from '@/utility/misskey-api.js';
import MkTabs from '@/components/MkTabs.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkCode from '@/components/MkCode.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkTl from '@/components/MkTl.vue';
import kmg from '@/filters/kmg.js';
import MkInput from '@/components/MkInput.vue';
import bytes from '@/filters/bytes.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
const QUEUE_TYPES = [
'system',
'endedPollNotification',
'deliver',
'inbox',
'db',
'relationship',
'objectStorage',
'userWebhookDeliver',
'systemWebhookDeliver',
] as const;
const tab: Ref<typeof QUEUE_TYPES[number] | '-'> = ref('-');
const jobState = ref('all');
const jobs = ref([]);
const jobsFetching = ref(true);
const queueInfos = ref([]);
const queueInfo = ref();
const searchQuery = ref('');
async function fetchQueues() {
if (tab.value !== '-') return;
queueInfos.value = await misskeyApi('admin/queue/queues');
}
async function fetchCurrentQueue() {
if (tab.value === '-') return;
queueInfo.value = await misskeyApi('admin/queue/queue-stats', { queue: tab.value });
}
async function fetchJobs() {
jobsFetching.value = true;
const state = jobState.value;
jobs.value = await misskeyApi('admin/queue/jobs', {
queue: tab.value,
state: state === 'all' ? ['completed', 'failed', 'active', 'delayed', 'wait'] : state === 'latest' ? ['completed', 'failed'] : [state],
search: searchQuery.value.trim() === '' ? undefined : searchQuery.value,
}).then(res => {
if (state === 'all') {
res.sort((a, b) => (a.processedOn ?? a.timestamp) > (b.processedOn ?? b.timestamp) ? -1 : 1);
} else if (state === 'latest') {
res.sort((a, b) => a.processedOn > b.processedOn ? -1 : 1);
} else if (state === 'delayed') {
res.sort((a, b) => (a.processedOn ?? a.timestamp) > (b.processedOn ?? b.timestamp) ? -1 : 1);
}
return res;
});
jobsFetching.value = false;
}
watch([tab], async () => {
if (tab.value === '-') {
fetchQueues();
} else {
fetchCurrentQueue();
fetchJobs();
}
}, { immediate: true });
watch([jobState], () => {
fetchJobs();
});
const search = debounce(1000, () => {
fetchJobs();
});
watch([searchQuery], () => {
search();
});
useInterval(() => {
if (tab.value === '-') {
fetchQueues();
} else {
fetchCurrentQueue();
}
}, 1000 * 10, {
immediate: false,
afterMounted: true,
});
async function clearQueue() {
const { canceled } = await os.confirm({
type: 'warning',
title: i18n.ts.areYouSure,
});
if (canceled) return;
os.apiWithDialog('admin/queue/clear', { queue: tab.value, state: '*' });
fetchCurrentQueue();
fetchJobs();
}
async function promoteAllJobs() {
const { canceled } = await os.confirm({
type: 'warning',
title: i18n.ts.areYouSure,
});
if (canceled) return;
os.apiWithDialog('admin/queue/promote-jobs', { queue: tab.value });
fetchCurrentQueue();
fetchJobs();
}
async function removeJobs() {
const { canceled } = await os.confirm({
type: 'warning',
title: i18n.ts.areYouSure,
});
if (canceled) return;
os.apiWithDialog('admin/queue/clear', { queue: tab.value, state: jobState.value });
fetchCurrentQueue();
fetchJobs();
}
async function refreshJob(jobId: string) {
const newJob = await misskeyApi('admin/queue/show-job', { queue: tab.value, jobId });
const index = jobs.value.findIndex((job) => job.id === jobId);
if (index !== -1) {
jobs.value[index] = newJob;
}
}
const headerActions = computed(() => []);
const headerTabs = computed(() =>
[{
key: '-',
title: i18n.ts.overview,
icon: 'ti ti-dashboard',
}].concat(QUEUE_TYPES.map((t) => ({
key: t,
title: t,
}))),
);
definePage(() => ({
title: i18n.ts.jobQueue,
icon: 'ti ti-clock-play',
needWideArea: true,
}));
</script>
<style lang="scss" module>
.queues {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
}
.queue {
padding: 14px 18px;
background-color: var(--MI_THEME-panel);
border-radius: 8px;
cursor: pointer;
}
.queueCounts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 8px;
font-size: 85%;
margin: 6px 0;
}
.jobsTabs {
}
</style>

250
packages/frontend/src/pages/admin/moderation.vue
View file

@ -4,160 +4,156 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkSwitch :modelValue="enableRegistration" @update:modelValue="onChange_enableRegistration">
<template #label>{{ i18n.ts._serverSettings.openRegistration }}</template>
<template #caption>
<div>{{ i18n.ts._serverSettings.thisSettingWillAutomaticallyOffWhenModeratorsInactive }}</div>
<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._serverSettings.openRegistrationWarning }}</div>
</template>
</MkSwitch>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkSwitch :modelValue="enableRegistration" @update:modelValue="onChange_enableRegistration">
<template #label>{{ i18n.ts._serverSettings.openRegistration }}</template>
<template #caption>
<div>{{ i18n.ts._serverSettings.thisSettingWillAutomaticallyOffWhenModeratorsInactive }}</div>
<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._serverSettings.openRegistrationWarning }}</div>
</template>
</MkSwitch>
<MkSwitch v-model="emailRequiredForSignup" @change="onChange_emailRequiredForSignup">
<template #label>{{ i18n.ts.emailRequiredForSignup }}</template>
</MkSwitch>
<MkSwitch v-model="emailRequiredForSignup" @change="onChange_emailRequiredForSignup">
<template #label>{{ i18n.ts.emailRequiredForSignup }}</template>
</MkSwitch>
<MkSwitch v-model="approvalRequiredForSignup" @change="onChange_approvalRequiredForSignup">
<template #label>{{ i18n.ts.approvalRequiredForSignup }}</template>
</MkSwitch>
<MkSwitch v-model="approvalRequiredForSignup" @change="onChange_approvalRequiredForSignup">
<template #label>{{ i18n.ts.approvalRequiredForSignup }}</template>
</MkSwitch>
<FormLink to="/admin/server-rules">{{ i18n.ts.serverRules }}</FormLink>
<FormLink to="/admin/server-rules">{{ i18n.ts.serverRules }}</FormLink>
<!-- TODO translate -->
<MkFolder v-if="bubbleTimelineEnabled">
<template #icon><i class="ph-drop ph-bold ph-lg"></i></template>
<template #label>Bubble timeline</template>
<!-- TODO translate -->
<MkFolder v-if="bubbleTimelineEnabled">
<template #icon><i class="ph-drop ph-bold ph-lg"></i></template>
<template #label>Bubble timeline</template>
<div class="_gaps">
<MkTextarea v-model="bubbleTimeline">
<template #caption>Choose which instances should be displayed in the bubble.</template>
</MkTextarea>
<MkButton primary @click="save_bubbleTimeline">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="bubbleTimeline">
<template #caption>Choose which instances should be displayed in the bubble.</template>
</MkTextarea>
<MkButton primary @click="save_bubbleTimeline">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.trustedLinkUrlPatterns }}</template>
<MkFolder>
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.trustedLinkUrlPatterns }}</template>
<div class="_gaps">
<MkTextarea v-model="trustedLinkUrlPatterns">
<template #caption>{{ i18n.ts.trustedLinkUrlPatternsDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_trustedLinkUrlPatterns">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="trustedLinkUrlPatterns">
<template #caption>{{ i18n.ts.trustedLinkUrlPatternsDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_trustedLinkUrlPatterns">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-lock-star"></i></template>
<template #label>{{ i18n.ts.preservedUsernames }}</template>
<MkFolder>
<template #icon><i class="ti ti-lock-star"></i></template>
<template #label>{{ i18n.ts.preservedUsernames }}</template>
<div class="_gaps">
<MkTextarea v-model="preservedUsernames">
<template #caption>{{ i18n.ts.preservedUsernamesDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_preservedUsernames">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="preservedUsernames">
<template #caption>{{ i18n.ts.preservedUsernamesDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_preservedUsernames">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-message-exclamation"></i></template>
<template #label>{{ i18n.ts.sensitiveWords }}</template>
<MkFolder>
<template #icon><i class="ti ti-message-exclamation"></i></template>
<template #label>{{ i18n.ts.sensitiveWords }}</template>
<div class="_gaps">
<MkTextarea v-model="sensitiveWords">
<template #caption>{{ i18n.ts.sensitiveWordsDescription }}<br>{{ i18n.ts.sensitiveWordsDescription2 }}</template>
</MkTextarea>
<MkButton primary @click="save_sensitiveWords">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="sensitiveWords">
<template #caption>{{ i18n.ts.sensitiveWordsDescription }}<br>{{ i18n.ts.sensitiveWordsDescription2 }}</template>
</MkTextarea>
<MkButton primary @click="save_sensitiveWords">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-message-x"></i></template>
<template #label>{{ i18n.ts.prohibitedWords }}</template>
<MkFolder>
<template #icon><i class="ti ti-message-x"></i></template>
<template #label>{{ i18n.ts.prohibitedWords }}</template>
<div class="_gaps">
<MkTextarea v-model="prohibitedWords">
<template #caption>{{ i18n.ts.prohibitedWordsDescription }}<br>{{ i18n.ts.prohibitedWordsDescription2 }}</template>
</MkTextarea>
<MkButton primary @click="save_prohibitedWords">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="prohibitedWords">
<template #caption>{{ i18n.ts.prohibitedWordsDescription }}<br>{{ i18n.ts.prohibitedWordsDescription2 }}</template>
</MkTextarea>
<MkButton primary @click="save_prohibitedWords">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-user-x"></i></template>
<template #label>{{ i18n.ts.prohibitedWordsForNameOfUser }}</template>
<MkFolder>
<template #icon><i class="ti ti-user-x"></i></template>
<template #label>{{ i18n.ts.prohibitedWordsForNameOfUser }}</template>
<div class="_gaps">
<MkTextarea v-model="prohibitedWordsForNameOfUser">
<template #caption>{{ i18n.ts.prohibitedWordsForNameOfUserDescription }}<br>{{ i18n.ts.prohibitedWordsDescription2 }}</template>
</MkTextarea>
<MkButton primary @click="save_prohibitedWordsForNameOfUser">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="prohibitedWordsForNameOfUser">
<template #caption>{{ i18n.ts.prohibitedWordsForNameOfUserDescription }}<br>{{ i18n.ts.prohibitedWordsDescription2 }}</template>
</MkTextarea>
<MkButton primary @click="save_prohibitedWordsForNameOfUser">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.hiddenTags }}</template>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.hiddenTags }}</template>
<div class="_gaps">
<MkTextarea v-model="hiddenTags">
<template #caption>{{ i18n.ts.hiddenTagsDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_hiddenTags">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="hiddenTags">
<template #caption>{{ i18n.ts.hiddenTagsDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_hiddenTags">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.silencedInstances }}</template>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.silencedInstances }}</template>
<div class="_gaps">
<MkTextarea v-model="silencedHosts">
<template #caption>{{ i18n.ts.silencedInstancesDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_silencedHosts">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="silencedHosts">
<template #caption>{{ i18n.ts.silencedInstancesDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_silencedHosts">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.mediaSilencedInstances }}</template>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.mediaSilencedInstances }}</template>
<div class="_gaps">
<MkTextarea v-model="mediaSilencedHosts">
<template #caption>{{ i18n.ts.mediaSilencedInstancesDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_mediaSilencedHosts">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<div class="_gaps">
<MkTextarea v-model="mediaSilencedHosts">
<template #caption>{{ i18n.ts.mediaSilencedInstancesDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_mediaSilencedHosts">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-ban"></i></template>
<template #label>{{ i18n.ts.blockedInstances }}</template>
<MkFolder>
<template #icon><i class="ti ti-ban"></i></template>
<template #label>{{ i18n.ts.blockedInstances }}</template>
<div class="_gaps">
<MkTextarea v-model="blockedHosts">
<template #caption>{{ i18n.ts.blockedInstancesDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_blockedHosts">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
</div>
</FormSuspense>
</MkSpacer>
</MkStickyContainer>
</div>
<div class="_gaps">
<MkTextarea v-model="blockedHosts">
<template #caption>{{ i18n.ts.blockedInstancesDescription }}</template>
</MkTextarea>
<MkButton primary @click="save_blockedHosts">{{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
</div>
</FormSuspense>
</MkSpacer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import XHeader from './_header_.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue';

50
packages/frontend/src/pages/admin/modlog.ModLog.vue
View file

@ -131,8 +131,49 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-else-if="log.type === 'addRelay'">: {{ log.info.inbox }}</span>
<span v-else-if="log.type === 'removeRelay'">: {{ log.info.inbox }}</span>
</template>
<template v-if="log.user" #icon>
<MkAvatar :user="log.user" :class="$style.avatar"/>
<template #icon>
<i v-if="log.type === 'updateServerSettings'" class="ti ti-settings"></i>
<i v-else-if="log.type === 'updateUserNote'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'suspend'" class="ti ti-user-x"></i>
<i v-else-if="log.type === 'unsuspend'" class="ti ti-user-check"></i>
<i v-else-if="log.type === 'resetPassword'" class="ti ti-key"></i>
<i v-else-if="log.type === 'assignRole'" class="ti ti-user-plus"></i>
<i v-else-if="log.type === 'unassignRole'" class="ti ti-user-minus"></i>
<i v-else-if="log.type === 'createRole'" class="ti ti-plus"></i>
<i v-else-if="log.type === 'updateRole'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'deleteRole'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'addCustomEmoji'" class="ti ti-plus"></i>
<i v-else-if="log.type === 'updateCustomEmoji'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'deleteCustomEmoji'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'markSensitiveDriveFile'" class="ti ti-eye-exclamation"></i>
<i v-else-if="log.type === 'unmarkSensitiveDriveFile'" class="ti ti-eye"></i>
<i v-else-if="log.type === 'suspendRemoteInstance'" class="ti ti-x"></i>
<i v-else-if="log.type === 'unsuspendRemoteInstance'" class="ti ti-check"></i>
<i v-else-if="log.type === 'createGlobalAnnouncement'" class="ti ti-plus"></i>
<i v-else-if="log.type === 'updateGlobalAnnouncement'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'deleteGlobalAnnouncement'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'createUserAnnouncement'" class="ti ti-plus"></i>
<i v-else-if="log.type === 'updateUserAnnouncement'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'deleteUserAnnouncement'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'deleteNote'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'deleteDriveFile'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'createAd'" class="ti ti-plus"></i>
<i v-else-if="log.type === 'updateAd'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'deleteAd'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'createAvatarDecoration'" class="ti ti-plus"></i>
<i v-else-if="log.type === 'updateAvatarDecoration'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'deleteAvatarDecoration'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'createSystemWebhook'" class="ti ti-plus"></i>
<i v-else-if="log.type === 'updateSystemWebhook'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'deleteSystemWebhook'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'createAbuseReportNotificationRecipient'" class="ti ti-plus"></i>
<i v-else-if="log.type === 'updateAbuseReportNotificationRecipient'" class="ti ti-pencil"></i>
<i v-else-if="log.type === 'deleteAbuseReportNotificationRecipient'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'deleteAccount'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'deletePage'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'deleteFlash'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'deleteGalleryPost'" class="ti ti-trash"></i>
<i v-else-if="log.type === 'deleteChatRoom'" class="ti ti-trash"></i>
</template>
<template #suffix>
<MkTime :time="log.createdAt"/>
@ -304,11 +345,6 @@ const props = defineProps<{
</script>
<style lang="scss" module>
.avatar {
width: 18px;
height: 18px;
}
.diff {
background: #fff;
color: #000;

68
packages/frontend/src/pages/admin/modlog.vue
View file

@ -4,10 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div>
<div class="_gaps">
<div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="type" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.type }}</template>
@ -19,41 +18,68 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkInput>
</div>
<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" :displayLimit="50" style="margin-top: var(--MI-margin);">
<MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--MI-margin: 8px;">
<XModLog :key="item.id" :log="item"/>
</MkDateSeparatedList>
</MkPagination>
<MkTl :events="timeline" :displayLimit="50" style="margin-top: var(--MI-margin);">
<template #left="{ event }">
<div>
<MkAvatar :user="event.user" style="width: 24px; height: 24px;"/>
</div>
</template>
<template #right="{ event, timestamp, delta }">
<div style="margin: 4px 0;">
<XModLog :key="event.id" :log="event"/>
</div>
</template>
</MkTl>
<MkButton primary rounded style="margin: 0 auto;" @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { computed, useTemplateRef, ref } from 'vue';
import { computed, useTemplateRef, ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import XHeader from './_header_.vue';
import XModLog from './modlog.ModLog.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkInput from '@/components/MkInput.vue';
import MkPagination from '@/components/MkPagination.vue';
import MkTl from '@/components/MkTl.vue';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
const logs = useTemplateRef('logs');
import { misskeyApi } from '@/utility/misskey-api.js';
import MkButton from '@/components/MkButton.vue';
const type = ref<string | null>(null);
const moderatorId = ref('');
const pagination = {
endpoint: 'admin/show-moderation-logs' as const,
limit: 30,
params: computed(() => ({
const timeline = ref([]);
watch([type, moderatorId], async () => {
const res = await misskeyApi('admin/show-moderation-logs', {
type: type.value,
userId: moderatorId.value === '' ? null : moderatorId.value,
})),
};
});
timeline.value = res.map(x => ({
id: x.id,
timestamp: x.createdAt,
data: x,
}));
}, { immediate: true });
function fetchMore() {
const last = timeline.value[timeline.value.length - 1];
misskeyApi('admin/show-moderation-logs', {
type: type.value,
userId: moderatorId.value === '' ? null : moderatorId.value,
untilId: last.id,
}).then(res => {
timeline.value.push(...res.map(x => ({
id: x.id,
timestamp: x.createdAt,
data: x,
})));
});
}
const headerActions = computed(() => []);

6
packages/frontend/src/pages/admin/object-storage.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :tabs="headerTabs"/></template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<FormSuspense :p="init">
<div class="_gaps_m">
@ -79,12 +78,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSpacer>
</div>
</template>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import XHeader from './_header_.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkInput from '@/components/MkInput.vue';
import FormSuspense from '@/components/form/suspense.vue';

6
packages/frontend/src/pages/admin/performance.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_gaps">
<div class="_panel" style="padding: 16px;">
@ -104,12 +103,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import XHeader from './_header_.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { fetchInstance } from '@/instance.js';

6
packages/frontend/src/pages/admin/relays.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<div class="_gaps">
<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel" style="padding: 16px;">
@ -20,13 +19,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import * as Misskey from 'misskey-js';
import XHeader from './_header_.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';

28
packages/frontend/src/pages/admin/roles.edit.vue
View file

@ -4,28 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :tabs="headerTabs"/></template>
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="32">
<XEditor v-if="data" v-model="data"/>
</MkSpacer>
<template #footer>
<div :class="$style.footer">
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="16">
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</MkSpacer>
</div>
</template>
</MkStickyContainer>
</div>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="32">
<XEditor v-if="data" v-model="data"/>
</MkSpacer>
<template #footer>
<div :class="$style.footer">
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="16">
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</MkSpacer>
</div>
</template>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { v4 as uuid } from 'uuid';
import XHeader from './_header_.vue';
import XEditor from './roles.editor.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';

100
packages/frontend/src/pages/admin/roles.role.vue
View file

@ -4,66 +4,62 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700">
<div class="_gaps">
<div class="_buttons">
<MkButton primary rounded @click="edit"><i class="ti ti-pencil"></i> {{ i18n.ts.edit }}</MkButton>
<MkButton danger rounded @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
<MkFolder>
<template #icon><i class="ti ti-info-circle"></i></template>
<template #label>{{ i18n.ts.info }}</template>
<XEditor :modelValue="role" readonly/>
</MkFolder>
<MkFolder v-if="role.target === 'manual'" defaultOpen>
<template #icon><i class="ti ti-users"></i></template>
<template #label>{{ i18n.ts.users }}</template>
<template #suffix>{{ role.usersCount }}</template>
<div class="_gaps">
<MkButton primary rounded @click="assign"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_gaps">
<div class="_buttons">
<MkButton primary rounded @click="edit"><i class="ti ti-pencil"></i> {{ i18n.ts.edit }}</MkButton>
<MkButton danger rounded @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
<MkFolder>
<template #icon><i class="ti ti-info-circle"></i></template>
<template #label>{{ i18n.ts.info }}</template>
<XEditor :modelValue="role" readonly/>
</MkFolder>
<MkFolder v-if="role.target === 'manual'" defaultOpen>
<template #icon><i class="ti ti-users"></i></template>
<template #label>{{ i18n.ts.users }}</template>
<template #suffix>{{ role.usersCount }}</template>
<div class="_gaps">
<MkButton primary rounded @click="assign"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton>
<MkPagination :pagination="usersPagination" :displayLimit="50">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<MkPagination :pagination="usersPagination" :displayLimit="50">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.user.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="`/admin/user/${item.user.id}`">
<MkUserCardMini :user="item.user"/>
</MkA>
<button class="_button" :class="$style.userToggle" @click="toggleItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.unassign" @click="unassign(item.user, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedItems.includes(item.id)" :class="$style.userItemSub">
<div>Assigned: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.user.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="`/admin/user/${item.user.id}`">
<MkUserCardMini :user="item.user"/>
</MkA>
<button class="_button" :class="$style.userToggle" @click="toggleItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.unassign" @click="unassign(item.user, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedItems.includes(item.id)" :class="$style.userItemSub">
<div>Assigned: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div>
</template>
</MkPagination>
</div>
</MkFolder>
<MkInfo v-else>{{ i18n.ts._role.isConditionalRole }}</MkInfo>
</div>
</MkSpacer>
</MkStickyContainer>
</div>
</div>
</template>
</MkPagination>
</div>
</MkFolder>
<MkInfo v-else>{{ i18n.ts._role.isConditionalRole }}</MkInfo>
</div>
</MkSpacer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import XHeader from './_header_.vue';
import XEditor from './roles.editor.vue';
import MkFolder from '@/components/MkFolder.vue';
import * as os from '@/os.js';

610
packages/frontend/src/pages/admin/roles.vue
View file

@ -4,323 +4,319 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700">
<div class="_gaps">
<MkFolder>
<template #label>{{ i18n.ts._role.baseRole }}</template>
<template #footer>
<MkButton primary rounded @click="updateBaseRole">{{ i18n.ts.save }}</MkButton>
</template>
<div class="_gaps_s">
<MkInput v-model="baseRoleQ" type="search">
<template #prefix><i class="ti ti-search"></i></template>
</MkInput>
<MkFolder v-if="matchQuery([i18n.ts._role._options.rateLimitFactor, 'rateLimitFactor'])">
<template #label>{{ i18n.ts._role._options.rateLimitFactor }}</template>
<template #suffix>{{ Math.floor(policies.rateLimitFactor * 100) }}%</template>
<MkRange :modelValue="policies.rateLimitFactor * 100" :min="30" :max="300" :step="10" :textConverter="(v) => `${v}%`" @update:modelValue="v => policies.rateLimitFactor = (v / 100)">
<template #caption>{{ i18n.ts._role._options.descriptionOfRateLimitFactor }}</template>
</MkRange>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.gtlAvailable, 'gtlAvailable'])">
<template #label>{{ i18n.ts._role._options.gtlAvailable }}</template>
<template #suffix>{{ policies.gtlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.gtlAvailable">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<!-- TODO translate -->
<MkFolder v-if="matchQuery([i18n.ts._role._options.btlAvailable, 'btlAvailable'])">
<template #label>{{ i18n.ts._role._options.btlAvailable }}</template>
<template #suffix>{{ policies.btlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
<div class="_gaps_s">
<MkInfo :warn="true">After enabling this option navigate to the Moderation section to configure which instances should be shown.</MkInfo>
<MkSwitch v-model="policies.btlAvailable">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</div>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.ltlAvailable, 'ltlAvailable'])">
<template #label>{{ i18n.ts._role._options.ltlAvailable }}</template>
<template #suffix>{{ policies.ltlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.ltlAvailable">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canPublicNote, 'canPublicNote'])">
<template #label>{{ i18n.ts._role._options.canPublicNote }}</template>
<template #suffix>{{ policies.canPublicNote ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canPublicNote">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportNotes, 'canImportNotes'])">
<template #label>{{ i18n.ts._role._options.canImportNotes }}</template>
<template #suffix>{{ policies.canImportNotes ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportNotes">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.scheduleNoteMax, 'scheduleNoteMax'])">
<template #label>{{ i18n.ts._role._options.scheduleNoteMax }}</template>
<template #suffix>{{ policies.scheduleNoteMax }}</template>
<MkInput v-model="policies.scheduleNoteMax" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.chatAvailability, 'chatAvailability'])">
<template #label>{{ i18n.ts._role._options.chatAvailability }}</template>
<template #suffix>{{ policies.chatAvailability === 'available' ? i18n.ts.yes : policies.chatAvailability === 'readonly' ? i18n.ts.readonly : i18n.ts.no }}</template>
<MkSelect v-model="policies.chatAvailability">
<template #label>{{ i18n.ts.enable }}</template>
<option value="available">{{ i18n.ts.enabled }}</option>
<option value="readonly">{{ i18n.ts.readonly }}</option>
<option value="unavailable">{{ i18n.ts.disabled }}</option>
</MkSelect>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.mentionMax, 'mentionLimit'])">
<template #label>{{ i18n.ts._role._options.mentionMax }}</template>
<template #suffix>{{ policies.mentionLimit }}</template>
<MkInput v-model="policies.mentionLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canInvite, 'canInvite'])">
<template #label>{{ i18n.ts._role._options.canInvite }}</template>
<template #suffix>{{ policies.canInvite ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canInvite">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteLimit, 'inviteLimit'])">
<template #label>{{ i18n.ts._role._options.inviteLimit }}</template>
<template #suffix>{{ policies.inviteLimit }}</template>
<MkInput v-model="policies.inviteLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteLimitCycle, 'inviteLimitCycle'])">
<template #label>{{ i18n.ts._role._options.inviteLimitCycle }}</template>
<template #suffix>{{ policies.inviteLimitCycle + i18n.ts._time.minute }}</template>
<MkInput v-model="policies.inviteLimitCycle" type="number">
<template #suffix>{{ i18n.ts._time.minute }}</template>
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteExpirationTime, 'inviteExpirationTime'])">
<template #label>{{ i18n.ts._role._options.inviteExpirationTime }}</template>
<template #suffix>{{ policies.inviteExpirationTime + i18n.ts._time.minute }}</template>
<MkInput v-model="policies.inviteExpirationTime" type="number">
<template #suffix>{{ i18n.ts._time.minute }}</template>
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageAvatarDecorations, 'canManageAvatarDecorations'])">
<template #label>{{ i18n.ts._role._options.canManageAvatarDecorations }}</template>
<template #suffix>{{ policies.canManageAvatarDecorations ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canManageAvatarDecorations">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageCustomEmojis, 'canManageCustomEmojis'])">
<template #label>{{ i18n.ts._role._options.canManageCustomEmojis }}</template>
<template #suffix>{{ policies.canManageCustomEmojis ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canManageCustomEmojis">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canSearchNotes, 'canSearchNotes'])">
<template #label>{{ i18n.ts._role._options.canSearchNotes }}</template>
<template #suffix>{{ policies.canSearchNotes ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canSearchNotes">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canUseTranslator, 'canSearchNotes'])">
<template #label>{{ i18n.ts._role._options.canUseTranslator }}</template>
<template #suffix>{{ policies.canUseTranslator ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canUseTranslator">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.driveCapacity, 'driveCapacityMb'])">
<template #label>{{ i18n.ts._role._options.driveCapacity }}</template>
<template #suffix>{{ policies.driveCapacityMb }}MB</template>
<MkInput v-model="policies.driveCapacityMb" type="number">
<template #suffix>MB</template>
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.alwaysMarkNsfw, 'alwaysMarkNsfw'])">
<template #label>{{ i18n.ts._role._options.alwaysMarkNsfw }}</template>
<template #suffix>{{ policies.alwaysMarkNsfw ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.alwaysMarkNsfw">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canUpdateBioMedia, 'canUpdateBioMedia'])">
<template #label>{{ i18n.ts._role._options.canUpdateBioMedia }}</template>
<template #suffix>{{ policies.canUpdateBioMedia ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canUpdateBioMedia">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.pinMax, 'pinLimit'])">
<template #label>{{ i18n.ts._role._options.pinMax }}</template>
<template #suffix>{{ policies.pinLimit }}</template>
<MkInput v-model="policies.pinLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.antennaMax, 'antennaLimit'])">
<template #label>{{ i18n.ts._role._options.antennaMax }}</template>
<template #suffix>{{ policies.antennaLimit }}</template>
<MkInput v-model="policies.antennaLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.wordMuteMax, 'wordMuteLimit'])">
<template #label>{{ i18n.ts._role._options.wordMuteMax }}</template>
<template #suffix>{{ policies.wordMuteLimit }}</template>
<MkInput v-model="policies.wordMuteLimit" type="number">
<template #suffix>chars</template>
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.webhookMax, 'webhookLimit'])">
<template #label>{{ i18n.ts._role._options.webhookMax }}</template>
<template #suffix>{{ policies.webhookLimit }}</template>
<MkInput v-model="policies.webhookLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.clipMax, 'clipLimit'])">
<template #label>{{ i18n.ts._role._options.clipMax }}</template>
<template #suffix>{{ policies.clipLimit }}</template>
<MkInput v-model="policies.clipLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.noteEachClipsMax, 'noteEachClipsLimit'])">
<template #label>{{ i18n.ts._role._options.noteEachClipsMax }}</template>
<template #suffix>{{ policies.noteEachClipsLimit }}</template>
<MkInput v-model="policies.noteEachClipsLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.userListMax, 'userListLimit'])">
<template #label>{{ i18n.ts._role._options.userListMax }}</template>
<template #suffix>{{ policies.userListLimit }}</template>
<MkInput v-model="policies.userListLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.userEachUserListsMax, 'userEachUserListsLimit'])">
<template #label>{{ i18n.ts._role._options.userEachUserListsMax }}</template>
<template #suffix>{{ policies.userEachUserListsLimit }}</template>
<MkInput v-model="policies.userEachUserListsLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canHideAds, 'canHideAds'])">
<template #label>{{ i18n.ts._role._options.canHideAds }}</template>
<template #suffix>{{ policies.canHideAds ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canHideAds">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.avatarDecorationLimit, 'avatarDecorationLimit'])">
<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
<template #suffix>{{ policies.avatarDecorationLimit }}</template>
<MkInput v-model="avatarDecorationLimit" type="number" :min="0" :max="16" @update:modelValue="updateAvatarDecorationLimit">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportAntennas, 'canImportAntennas'])">
<template #label>{{ i18n.ts._role._options.canImportAntennas }}</template>
<template #suffix>{{ policies.canImportAntennas ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportAntennas">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportBlocking, 'canImportBlocking'])">
<template #label>{{ i18n.ts._role._options.canImportBlocking }}</template>
<template #suffix>{{ policies.canImportBlocking ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportBlocking">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportFollowing, 'canImportFollowing'])">
<template #label>{{ i18n.ts._role._options.canImportFollowing }}</template>
<template #suffix>{{ policies.canImportFollowing ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportFollowing">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportMuting, 'canImportMuting'])">
<template #label>{{ i18n.ts._role._options.canImportMuting }}</template>
<template #suffix>{{ policies.canImportMuting ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportMuting">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportUserLists, 'canImportUserList'])">
<template #label>{{ i18n.ts._role._options.canImportUserLists }}</template>
<template #suffix>{{ policies.canImportUserLists ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportUserLists">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
</div>
</MkFolder>
<MkButton primary rounded @click="create"><i class="ti ti-plus"></i> {{ i18n.ts._role.new }}</MkButton>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_gaps">
<MkFolder>
<template #label>{{ i18n.ts._role.baseRole }}</template>
<template #footer>
<MkButton primary rounded @click="updateBaseRole">{{ i18n.ts.save }}</MkButton>
</template>
<div class="_gaps_s">
<MkFoldableSection>
<template #header>{{ i18n.ts._role.manualRoles }}</template>
<MkInput v-model="baseRoleQ" type="search">
<template #prefix><i class="ti ti-search"></i></template>
</MkInput>
<MkFolder v-if="matchQuery([i18n.ts._role._options.rateLimitFactor, 'rateLimitFactor'])">
<template #label>{{ i18n.ts._role._options.rateLimitFactor }}</template>
<template #suffix>{{ Math.floor(policies.rateLimitFactor * 100) }}%</template>
<MkRange :modelValue="policies.rateLimitFactor * 100" :min="30" :max="300" :step="10" :textConverter="(v) => `${v}%`" @update:modelValue="v => policies.rateLimitFactor = (v / 100)">
<template #caption>{{ i18n.ts._role._options.descriptionOfRateLimitFactor }}</template>
</MkRange>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.gtlAvailable, 'gtlAvailable'])">
<template #label>{{ i18n.ts._role._options.gtlAvailable }}</template>
<template #suffix>{{ policies.gtlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.gtlAvailable">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<!-- TODO translate -->
<MkFolder v-if="matchQuery([i18n.ts._role._options.btlAvailable, 'btlAvailable'])">
<template #label>{{ i18n.ts._role._options.btlAvailable }}</template>
<template #suffix>{{ policies.btlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
<div class="_gaps_s">
<MkRolePreview v-for="role in roles.filter(x => x.target === 'manual')" :key="role.id" :role="role" :forModeration="true"/>
<MkInfo :warn="true">After enabling this option navigate to the Moderation section to configure which instances should be shown.</MkInfo>
<MkSwitch v-model="policies.btlAvailable">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</div>
</MkFoldableSection>
<MkFoldableSection>
<template #header>{{ i18n.ts._role.conditionalRoles }}</template>
<div class="_gaps_s">
<MkRolePreview v-for="role in roles.filter(x => x.target === 'conditional')" :key="role.id" :role="role" :forModeration="true"/>
</div>
</MkFoldableSection>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.ltlAvailable, 'ltlAvailable'])">
<template #label>{{ i18n.ts._role._options.ltlAvailable }}</template>
<template #suffix>{{ policies.ltlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.ltlAvailable">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canPublicNote, 'canPublicNote'])">
<template #label>{{ i18n.ts._role._options.canPublicNote }}</template>
<template #suffix>{{ policies.canPublicNote ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canPublicNote">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportNotes, 'canImportNotes'])">
<template #label>{{ i18n.ts._role._options.canImportNotes }}</template>
<template #suffix>{{ policies.canImportNotes ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportNotes">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.scheduleNoteMax, 'scheduleNoteMax'])">
<template #label>{{ i18n.ts._role._options.scheduleNoteMax }}</template>
<template #suffix>{{ policies.scheduleNoteMax }}</template>
<MkInput v-model="policies.scheduleNoteMax" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.chatAvailability, 'chatAvailability'])">
<template #label>{{ i18n.ts._role._options.chatAvailability }}</template>
<template #suffix>{{ policies.chatAvailability === 'available' ? i18n.ts.yes : policies.chatAvailability === 'readonly' ? i18n.ts.readonly : i18n.ts.no }}</template>
<MkSelect v-model="policies.chatAvailability">
<template #label>{{ i18n.ts.enable }}</template>
<option value="available">{{ i18n.ts.enabled }}</option>
<option value="readonly">{{ i18n.ts.readonly }}</option>
<option value="unavailable">{{ i18n.ts.disabled }}</option>
</MkSelect>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.mentionMax, 'mentionLimit'])">
<template #label>{{ i18n.ts._role._options.mentionMax }}</template>
<template #suffix>{{ policies.mentionLimit }}</template>
<MkInput v-model="policies.mentionLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canInvite, 'canInvite'])">
<template #label>{{ i18n.ts._role._options.canInvite }}</template>
<template #suffix>{{ policies.canInvite ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canInvite">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteLimit, 'inviteLimit'])">
<template #label>{{ i18n.ts._role._options.inviteLimit }}</template>
<template #suffix>{{ policies.inviteLimit }}</template>
<MkInput v-model="policies.inviteLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteLimitCycle, 'inviteLimitCycle'])">
<template #label>{{ i18n.ts._role._options.inviteLimitCycle }}</template>
<template #suffix>{{ policies.inviteLimitCycle + i18n.ts._time.minute }}</template>
<MkInput v-model="policies.inviteLimitCycle" type="number">
<template #suffix>{{ i18n.ts._time.minute }}</template>
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteExpirationTime, 'inviteExpirationTime'])">
<template #label>{{ i18n.ts._role._options.inviteExpirationTime }}</template>
<template #suffix>{{ policies.inviteExpirationTime + i18n.ts._time.minute }}</template>
<MkInput v-model="policies.inviteExpirationTime" type="number">
<template #suffix>{{ i18n.ts._time.minute }}</template>
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageAvatarDecorations, 'canManageAvatarDecorations'])">
<template #label>{{ i18n.ts._role._options.canManageAvatarDecorations }}</template>
<template #suffix>{{ policies.canManageAvatarDecorations ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canManageAvatarDecorations">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageCustomEmojis, 'canManageCustomEmojis'])">
<template #label>{{ i18n.ts._role._options.canManageCustomEmojis }}</template>
<template #suffix>{{ policies.canManageCustomEmojis ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canManageCustomEmojis">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canSearchNotes, 'canSearchNotes'])">
<template #label>{{ i18n.ts._role._options.canSearchNotes }}</template>
<template #suffix>{{ policies.canSearchNotes ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canSearchNotes">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canUseTranslator, 'canSearchNotes'])">
<template #label>{{ i18n.ts._role._options.canUseTranslator }}</template>
<template #suffix>{{ policies.canUseTranslator ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canUseTranslator">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.driveCapacity, 'driveCapacityMb'])">
<template #label>{{ i18n.ts._role._options.driveCapacity }}</template>
<template #suffix>{{ policies.driveCapacityMb }}MB</template>
<MkInput v-model="policies.driveCapacityMb" type="number">
<template #suffix>MB</template>
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.alwaysMarkNsfw, 'alwaysMarkNsfw'])">
<template #label>{{ i18n.ts._role._options.alwaysMarkNsfw }}</template>
<template #suffix>{{ policies.alwaysMarkNsfw ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.alwaysMarkNsfw">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canUpdateBioMedia, 'canUpdateBioMedia'])">
<template #label>{{ i18n.ts._role._options.canUpdateBioMedia }}</template>
<template #suffix>{{ policies.canUpdateBioMedia ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canUpdateBioMedia">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.pinMax, 'pinLimit'])">
<template #label>{{ i18n.ts._role._options.pinMax }}</template>
<template #suffix>{{ policies.pinLimit }}</template>
<MkInput v-model="policies.pinLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.antennaMax, 'antennaLimit'])">
<template #label>{{ i18n.ts._role._options.antennaMax }}</template>
<template #suffix>{{ policies.antennaLimit }}</template>
<MkInput v-model="policies.antennaLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.wordMuteMax, 'wordMuteLimit'])">
<template #label>{{ i18n.ts._role._options.wordMuteMax }}</template>
<template #suffix>{{ policies.wordMuteLimit }}</template>
<MkInput v-model="policies.wordMuteLimit" type="number">
<template #suffix>chars</template>
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.webhookMax, 'webhookLimit'])">
<template #label>{{ i18n.ts._role._options.webhookMax }}</template>
<template #suffix>{{ policies.webhookLimit }}</template>
<MkInput v-model="policies.webhookLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.clipMax, 'clipLimit'])">
<template #label>{{ i18n.ts._role._options.clipMax }}</template>
<template #suffix>{{ policies.clipLimit }}</template>
<MkInput v-model="policies.clipLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.noteEachClipsMax, 'noteEachClipsLimit'])">
<template #label>{{ i18n.ts._role._options.noteEachClipsMax }}</template>
<template #suffix>{{ policies.noteEachClipsLimit }}</template>
<MkInput v-model="policies.noteEachClipsLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.userListMax, 'userListLimit'])">
<template #label>{{ i18n.ts._role._options.userListMax }}</template>
<template #suffix>{{ policies.userListLimit }}</template>
<MkInput v-model="policies.userListLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.userEachUserListsMax, 'userEachUserListsLimit'])">
<template #label>{{ i18n.ts._role._options.userEachUserListsMax }}</template>
<template #suffix>{{ policies.userEachUserListsLimit }}</template>
<MkInput v-model="policies.userEachUserListsLimit" type="number">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canHideAds, 'canHideAds'])">
<template #label>{{ i18n.ts._role._options.canHideAds }}</template>
<template #suffix>{{ policies.canHideAds ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canHideAds">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.avatarDecorationLimit, 'avatarDecorationLimit'])">
<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
<template #suffix>{{ policies.avatarDecorationLimit }}</template>
<MkInput v-model="avatarDecorationLimit" type="number" :min="0" :max="16" @update:modelValue="updateAvatarDecorationLimit">
</MkInput>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportAntennas, 'canImportAntennas'])">
<template #label>{{ i18n.ts._role._options.canImportAntennas }}</template>
<template #suffix>{{ policies.canImportAntennas ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportAntennas">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportBlocking, 'canImportBlocking'])">
<template #label>{{ i18n.ts._role._options.canImportBlocking }}</template>
<template #suffix>{{ policies.canImportBlocking ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportBlocking">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportFollowing, 'canImportFollowing'])">
<template #label>{{ i18n.ts._role._options.canImportFollowing }}</template>
<template #suffix>{{ policies.canImportFollowing ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportFollowing">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportMuting, 'canImportMuting'])">
<template #label>{{ i18n.ts._role._options.canImportMuting }}</template>
<template #suffix>{{ policies.canImportMuting ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportMuting">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportUserLists, 'canImportUserList'])">
<template #label>{{ i18n.ts._role._options.canImportUserLists }}</template>
<template #suffix>{{ policies.canImportUserLists ? i18n.ts.yes : i18n.ts.no }}</template>
<MkSwitch v-model="policies.canImportUserLists">
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</MkFolder>
</div>
</MkFolder>
<MkButton primary rounded @click="create"><i class="ti ti-plus"></i> {{ i18n.ts._role.new }}</MkButton>
<div class="_gaps_s">
<MkFoldableSection>
<template #header>{{ i18n.ts._role.manualRoles }}</template>
<div class="_gaps_s">
<MkRolePreview v-for="role in roles.filter(x => x.target === 'manual')" :key="role.id" :role="role" :forModeration="true"/>
</div>
</MkFoldableSection>
<MkFoldableSection>
<template #header>{{ i18n.ts._role.conditionalRoles }}</template>
<div class="_gaps_s">
<MkRolePreview v-for="role in roles.filter(x => x.target === 'conditional')" :key="role.id" :role="role" :forModeration="true"/>
</div>
</MkFoldableSection>
</div>
</MkSpacer>
</MkStickyContainer>
</div>
</div>
</MkSpacer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import { ROLE_POLICIES } from '@@/js/const.js';
import XHeader from './_header_.vue';
import MkInput from '@/components/MkInput.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';

6
packages/frontend/src/pages/admin/security.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_gaps_m">
<MkFolder v-if="meta.federation !== 'none'">
@ -89,13 +88,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import XBotProtection from './bot-protection.vue';
import XHeader from './_header_.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkSwitch from '@/components/MkSwitch.vue';

62
packages/frontend/src/pages/admin/server-rules.vue
View file

@ -4,45 +4,41 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkStickyContainer>
<template #header><XHeader :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_gaps_m">
<div>{{ i18n.ts._serverRules.description }}</div>
<Sortable
v-model="serverRules"
class="_gaps_m"
:itemKey="(_, i) => i"
:animation="150"
:handle="'.' + $style.itemHandle"
@start="e => e.item.classList.add('active')"
@end="e => e.item.classList.remove('active')"
>
<template #item="{element,index}">
<div :class="$style.item">
<div :class="$style.itemHeader">
<div :class="$style.itemNumber" v-text="String(index + 1)"/>
<span :class="$style.itemHandle"><i class="ti ti-menu"/></span>
<button class="_button" :class="$style.itemRemove" @click="remove(index)"><i class="ti ti-x"></i></button>
</div>
<MkInput v-model="serverRules[index]"/>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_gaps_m">
<div>{{ i18n.ts._serverRules.description }}</div>
<Sortable
v-model="serverRules"
class="_gaps_m"
:itemKey="(_, i) => i"
:animation="150"
:handle="'.' + $style.itemHandle"
@start="e => e.item.classList.add('active')"
@end="e => e.item.classList.remove('active')"
>
<template #item="{element,index}">
<div :class="$style.item">
<div :class="$style.itemHeader">
<div :class="$style.itemNumber" v-text="String(index + 1)"/>
<span :class="$style.itemHandle"><i class="ti ti-menu"/></span>
<button class="_button" :class="$style.itemRemove" @click="remove(index)"><i class="ti ti-x"></i></button>
</div>
</template>
</Sortable>
<div :class="$style.commands">
<MkButton rounded @click="serverRules.push('')"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</div>
<MkInput v-model="serverRules[index]"/>
</div>
</template>
</Sortable>
<div :class="$style.commands">
<MkButton rounded @click="serverRules.push('')"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</div>
</MkSpacer>
</MkStickyContainer>
</div>
</div>
</MkSpacer>
</PageWithHeader>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, computed } from 'vue';
import XHeader from './_header_.vue';
import * as os from '@/os.js';
import { fetchInstance, instance } from '@/instance.js';
import { i18n } from '@/i18n.js';

Some files were not shown because too many files have changed in this diff Show more