Merge branch 'develop' of https://github.com/misskey-dev/misskey into storybook

packages/frontend/src/pages/admin/RolesEditorFormula.vue

@@ -10,6 +10,8 @@
 			<option value="followersMoreThanOrEq">{{ i18n.ts._role._condition.followersMoreThanOrEq }}</option>
 			<option value="followingLessThanOrEq">{{ i18n.ts._role._condition.followingLessThanOrEq }}</option>
 			<option value="followingMoreThanOrEq">{{ i18n.ts._role._condition.followingMoreThanOrEq }}</option>
+			<option value="notesLessThanOrEq">{{ i18n.ts._role._condition.notesLessThanOrEq }}</option>
+			<option value="notesMoreThanOrEq">{{ i18n.ts._role._condition.notesMoreThanOrEq }}</option>
 			<option value="and">{{ i18n.ts._role._condition.and }}</option>
 			<option value="or">{{ i18n.ts._role._condition.or }}</option>
 			<option value="not">{{ i18n.ts._role._condition.not }}</option>
@@ -42,7 +44,7 @@
 		<template #suffix>sec</template>
 	</MkInput>
 
-	<MkInput v-else-if="['followersLessThanOrEq', 'followersMoreThanOrEq', 'followingLessThanOrEq', 'followingMoreThanOrEq'].includes(type)" v-model="v.value" type="number">
+	<MkInput v-else-if="['followersLessThanOrEq', 'followersMoreThanOrEq', 'followingLessThanOrEq', 'followingMoreThanOrEq', 'notesLessThanOrEq', 'notesMoreThanOrEq'].includes(type)" v-model="v.value" type="number">
 	</MkInput>
 </div>
 </template>
@@ -91,6 +93,8 @@ const type = computed({
 		if (t === 'followersMoreThanOrEq') v.value.value = 10;
 		if (t === 'followingLessThanOrEq') v.value.value = 10;
 		if (t === 'followingMoreThanOrEq') v.value.value = 10;
+		if (t === 'notesLessThanOrEq') v.value.value = 10;
+		if (t === 'notesMoreThanOrEq') v.value.value = 10;
 		v.value.type = t;
 	},
 });

packages/frontend/src/pages/admin/moderation.vue

@@ -46,7 +46,7 @@ let sensitiveWords: string = $ref('');
 
 async function init() {
 	const meta = await os.api('admin/meta');
-	sensitiveWords = meta.pinnedUsers.join('\n');
+	sensitiveWords = meta.sensitiveWords.join('\n');
 }
 
 function save() {

packages/frontend/src/pages/admin/queue.vue

@@ -4,6 +4,8 @@
 	<MkSpacer :content-max="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>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -15,6 +17,7 @@ import * as os from '@/os';
 import * as config from '@/config';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import MkButton from '@/components/MkButton.vue';
 
 let tab = $ref('deliver');
 
@@ -30,6 +33,18 @@ function clear() {
 	});
 }
 
+function promoteAllQueues() {
+	os.confirm({
+		type: 'warning',
+		title: i18n.ts.retryAllQueuesConfirmTitle,
+		text: i18n.ts.retryAllQueuesConfirmText,
+	}).then(({ canceled }) => {
+		if (canceled) return;
+
+		os.apiWithDialog('admin/queue/promote', { type: tab });
+	});
+}
+
 const headerActions = $computed(() => [{
 	asFullButton: true,
 	icon: 'ti ti-external-link',

packages/frontend/src/pages/admin/roles.edit.vue

@@ -26,6 +26,7 @@ import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { useRouter } from '@/router';
 import MkButton from '@/components/MkButton.vue';
+import { rolesCache } from '@/cache';
 
 const router = useRouter();
 
@@ -61,6 +62,7 @@ if (props.id) {
 }
 
 async function save() {
+	rolesCache.delete();
 	if (role) {
 		os.apiWithDialog('admin/roles/update', {
 			roleId: role.id,

packages/frontend/src/pages/admin/settings.vue

@@ -43,6 +43,14 @@
 							<MkSwitch v-model="emailRequiredForSignup">
 								<template #label>{{ i18n.ts.emailRequiredForSignup }}</template>
 							</MkSwitch>
+
+							<MkSwitch v-model="enableChartsForRemoteUser">
+								<template #label>{{ i18n.ts.enableChartsForRemoteUser }}</template>
+							</MkSwitch>
+
+							<MkSwitch v-model="enableChartsForFederatedInstances">
+								<template #label>{{ i18n.ts.enableChartsForFederatedInstances }}</template>
+							</MkSwitch>
 						</div>
 					</FormSection>
 
@@ -175,6 +183,8 @@ let cacheRemoteFiles: boolean = $ref(false);
 let enableRegistration: boolean = $ref(false);
 let emailRequiredForSignup: boolean = $ref(false);
 let enableServiceWorker: boolean = $ref(false);
+let enableChartsForRemoteUser: boolean = $ref(false);
+let enableChartsForFederatedInstances: boolean = $ref(false);
 let swPublicKey: any = $ref(null);
 let swPrivateKey: any = $ref(null);
 let deeplAuthKey: string = $ref('');
@@ -198,6 +208,8 @@ async function init() {
 	enableRegistration = !meta.disableRegistration;
 	emailRequiredForSignup = meta.emailRequiredForSignup;
 	enableServiceWorker = meta.enableServiceWorker;
+	enableChartsForRemoteUser = meta.enableChartsForRemoteUser;
+	enableChartsForFederatedInstances = meta.enableChartsForFederatedInstances;
 	swPublicKey = meta.swPublickey;
 	swPrivateKey = meta.swPrivateKey;
 	deeplAuthKey = meta.deeplAuthKey;
@@ -222,6 +234,8 @@ function save() {
 		disableRegistration: !enableRegistration,
 		emailRequiredForSignup,
 		enableServiceWorker,
+		enableChartsForRemoteUser,
+		enableChartsForFederatedInstances,
 		swPublicKey,
 		swPrivateKey,
 		deeplAuthKey,

packages/frontend/src/pages/clip.vue

@@ -30,6 +30,7 @@ import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { url } from '@/config';
 import MkButton from '@/components/MkButton.vue';
+import { clipsCache } from '@/cache';
 
 const props = defineProps<{
 	clipId: string,
@@ -108,6 +109,8 @@ const headerActions = $computed(() => clip && isOwned ? [{
 			clipId: clip.id,
 			...result,
 		});
+
+		clipsCache.delete();
 	},
 }, ...(clip.isPublic ? [{
 	icon: 'ti ti-share',
@@ -133,6 +136,8 @@ const headerActions = $computed(() => clip && isOwned ? [{
 		await os.apiWithDialog('clips/delete', {
 			clipId: clip.id,
 		});
+
+		clipsCache.delete();
 	},
 }] : null);
 

packages/frontend/src/pages/my-clips/index.vue

@@ -28,6 +28,7 @@ import MkClipPreview from '@/components/MkClipPreview.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { clipsCache } from '@/cache';
 
 const pagination = {
 	endpoint: 'clips/list' as const,
@@ -65,6 +66,8 @@ async function create() {
 
 	os.apiWithDialog('clips/create', result);
 
+	clipsCache.delete();
+
 	pagingComponent.reload();
 }
 

packages/frontend/src/pages/my-lists/index.vue

@@ -24,6 +24,7 @@ import MkAvatars from '@/components/MkAvatars.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { userListsCache } from '@/cache';
 
 const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>();
 
@@ -38,6 +39,7 @@ async function create() {
 	});
 	if (canceled) return;
 	await os.apiWithDialog('users/lists/create', { name: name });
+	userListsCache.delete();
 	pagingComponent.reload();
 }
 

packages/frontend/src/pages/my-lists/list.vue

@@ -37,6 +37,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { userPage } from '@/filters/user';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import { userListsCache } from '@/cache';
 
 const props = defineProps<{
 	listId: string;
@@ -97,6 +98,8 @@ async function renameList() {
 		name: name,
 	});
 
+	userListsCache.delete();
+
 	list.name = name;
 }
 
@@ -107,10 +110,10 @@ async function deleteList() {
 	});
 	if (canceled) return;
 
-	await os.api('users/lists/delete', {
+	await os.apiWithDialog('users/lists/delete', {
 		listId: list.id,
 	});
-	os.success();
+	userListsCache.delete();
 	mainRouter.push('/my/lists');
 }
 

packages/frontend/src/pages/settings/drive-cleaner.vue

@@ -0,0 +1,156 @@
+<template>
+<div class="_gaps">
+	<MkSelect v-model="sortModeSelect">
+		<template #label>{{ i18n.ts.sort }}</template>
+		<option v-for="x in sortOptions" :key="x.value" :value="x.value">{{ x.displayName }}</option>
+	</MkSelect>
+	<div v-if="!fetching">
+		<MkPagination v-slot="{items}" :pagination="pagination">
+			<div class="_gaps">
+				<div
+					v-for="file in items" :key="file.id"
+					class="_button"
+					@click="$event => onClick($event, file)"
+					@contextmenu.stop="$event => onContextMenu($event, file)"
+				>
+					<div :class="$style.file">
+						<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
+						<MkDriveFileThumbnail :class="$style.fileThumbnail" :file="file" fit="contain"/>
+						<div :class="$style.fileBody">
+							<div style="margin-bottom: 4px;">
+								{{ file.name }}
+							</div>
+							<div>
+								<span style="margin-right: 1em;">{{ file.type }}</span>
+								<span>{{ bytes(file.size) }}</span>
+							</div>
+							<div>
+								<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+							</div>
+							<div v-if="sortModeSelect === 'sizeDesc'">
+								<div :class="$style.meter"><div :class="$style.meterValue" :style="genUsageBar(file.size)"></div></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</MkPagination>
+	</div>
+	<div v-else>
+		<MkLoading/>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import tinycolor from 'tinycolor2';
+import * as os from '@/os';
+import MkPagination from '@/components/MkPagination.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import { i18n } from '@/i18n';
+import bytes from '@/filters/bytes';
+import { dateString } from '@/filters/date';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import MkSelect from '@/components/MkSelect.vue';
+import { getDriveFileMenu } from '@/scripts/get-drive-file-menu';
+
+let sortMode = ref('+size');
+const pagination = {
+	endpoint: 'drive/files' as const,
+	limit: 10,
+	params: computed(() => ({ sort: sortMode.value })),
+};
+
+const sortOptions = [
+	{ value: 'sizeDesc', displayName: i18n.ts._drivecleaner.orderBySizeDesc },
+	{ value: 'createdAtAsc', displayName: i18n.ts._drivecleaner.orderByCreatedAtAsc },
+];
+
+const capacity = ref<number>(0);
+const usage = ref<number>(0);
+const fetching = ref(true);
+const sortModeSelect = ref('sizeDesc');
+
+fetchDriveInfo();
+
+watch(sortModeSelect, () => {
+	switch (sortModeSelect.value) {
+		case 'sizeDesc':
+			sortMode.value = '+size';
+			fetchDriveInfo();
+			break;
+		
+		case 'createdAtAsc':
+			sortMode.value = '-createdAt';
+			fetchDriveInfo();
+			break;
+	}
+});
+
+function fetchDriveInfo(): void {
+	fetching.value = true;
+	os.api('drive').then(info => {
+		capacity.value = info.capacity;
+		usage.value = info.usage;
+		fetching.value = false;
+	});
+}
+
+function genUsageBar(fsize: number): object {
+	return {
+		width: `${fsize / usage.value * 100}%`,
+		background: tinycolor({ h: 180 - (fsize / usage.value * 180), s: 0.7, l: 0.5 }),
+	};
+}
+
+function onClick(ev: MouseEvent, file) {
+	os.popupMenu(getDriveFileMenu(file), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+}
+
+function onContextMenu(ev: MouseEvent, file): void {
+	os.contextMenu(getDriveFileMenu(file), ev);
+}
+
+definePageMetadata({
+	title: i18n.ts.drivecleaner,
+	icon: 'ti ti-trash',
+});
+</script>
+
+<style lang="scss" module>
+.file {
+	display: flex;
+	width: 100%;
+	box-sizing: border-box;
+	text-align: left;
+	align-items: center;
+
+	&:hover {
+		color: var(--accent);
+	}
+}
+
+.fileThumbnail {
+	width: 100px;
+	height: 100px;
+}
+
+.fileBody {
+	margin-left: 0.3em;
+	padding: 8px;
+	flex: 1;
+}
+
+.meter {
+	margin-top: 8px;
+	height: 12px;
+	background: rgba(0, 0, 0, 0.1);
+	overflow: clip;
+	border-radius: 999px;
+}
+
+.meterValue {
+	height: 100%;
+}
+</style>

packages/frontend/src/pages/settings/drive.vue

@@ -32,6 +32,9 @@
 				<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
 				<template #suffixIcon><i class="ti ti-folder"></i></template>
 			</FormLink>
+			<FormLink to="/settings/drive/cleaner">
+				{{ i18n.ts.drivecleaner }}
+			</FormLink>
 			<MkSwitch v-model="keepOriginalUploading">
 				<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
 				<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>

packages/frontend/src/pages/settings/general.vue

@@ -47,6 +47,7 @@
 		<div class="_gaps_m">
 			<div class="_gaps_s">
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
+				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
 				<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
@@ -143,6 +144,7 @@ async function reloadAsk() {
 const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
 const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
 const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
+const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
 const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
 const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
 const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));

packages/frontend/src/pages/settings/navbar.vue

@@ -1,9 +1,34 @@
 <template>
 <div class="_gaps_m">
-	<MkTextarea v-model="items" tall manual-save>
+	<FormSlot>
 		<template #label>{{ i18n.ts.navbar }}</template>
-		<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
-	</MkTextarea>
+		<MkContainer :show-header="false">
+			<Sortable 
+				v-model="items"
+				item-key="id"
+				:animation="150"
+				:handle="'.' + $style.itemHandle"
+				@start="e => e.item.classList.add('active')"
+				@end="e => e.item.classList.remove('active')"
+			>
+				<template #item="{element,index}">
+					<div
+						v-if="element.type === '-' || navbarItemDef[element.type]"
+						:class="$style.item"
+					>
+						<button class="_button" :class="$style.itemHandle"><i class="ti ti-menu"></i></button>
+						<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[element.type]?.icon]"></i><span :class="$style.itemText">{{ navbarItemDef[element.type]?.title ?? i18n.ts.divider }}</span>
+						<button class="_button" :class="$style.itemRemove" @click="removeItem(index)"><i class="ti ti-x"></i></button>
+					</div>
+				</template>
+			</Sortable>
+		</MkContainer>
+	</FormSlot>
+	<div class="_buttons">
+		<MkButton @click="addItem"><i class="ti ti-plus"></i> {{ i18n.ts.addItem }}</MkButton>
+		<MkButton danger @click="reset"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
+		<MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+	</div>
 
 	<MkRadios v-model="menuDisplay">
 		<template #label>{{ i18n.ts.display }}</template>
@@ -12,26 +37,30 @@
 		<option value="top">{{ i18n.ts._menuDisplay.top }}</option>
 		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 	</MkRadios>
-
-	<MkButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import MkTextarea from '@/components/MkTextarea.vue';
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
+import FormSlot from '@/components/form/slot.vue';
+import MkContainer from '@/components/MkContainer.vue';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { defaultStore } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { deepClone } from '@/scripts/clone';
 
-const items = ref(defaultStore.state.menu.join('\n'));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+
+const items = ref(defaultStore.state.menu.map(x => ({
+	id: Math.random().toString(),
+	type: x,
+})));
 
-const split = computed(() => items.value.trim().split('\n').filter(x => x.trim() !== ''));
 const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
 
 async function reloadAsk() {
@@ -55,23 +84,28 @@ async function addItem() {
 		}],
 	});
 	if (canceled) return;
-	items.value = [...split.value, item].join('\n');
+	items.value = [...items.value, {
+		id: Math.random().toString(),
+		type: item,
+	}];
+}
+
+function removeItem(index: number) {
+	items.value.splice(index, 1);
 }
 
 async function save() {
-	defaultStore.set('menu', split.value);
+	defaultStore.set('menu', items.value.map(x => x.type));
 	await reloadAsk();
 }
 
 function reset() {
-	defaultStore.reset('menu');
-	items.value = defaultStore.state.menu.join('\n');
+	items.value = defaultStore.def.menu.default.map(x => ({
+		id: Math.random().toString(),
+		type: x,
+	}));
 }
 
-watch(items, async () => {
-	await save();
-});
-
 watch(menuDisplay, async () => {
 	await reloadAsk();
 });
@@ -85,3 +119,44 @@ definePageMetadata({
 	icon: 'ti ti-list',
 });
 </script>
+
+<style lang="scss" module>
+.item {
+	position: relative;
+	display: block;
+	line-height: 2.85rem;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	color: var(--navFg);
+}
+
+.itemIcon {
+	position: relative;
+	width: 32px;
+	margin-right: 8px;
+}
+
+.itemText {
+	position: relative;
+	font-size: 0.9em;
+}
+
+.itemRemove {
+	position: absolute;
+	z-index: 10000;
+	width: 32px;
+	height: 32px;
+	color: #ff2a2a;
+	right: 8px;
+	opacity: 0.8;
+}
+
+.itemHandle {
+	cursor: move;
+	width: 32px;
+	height: 32px;
+	margin: 0 8px;
+	opacity: 0.5;
+}
+</style>

packages/frontend/src/pages/settings/webhook.edit.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_gaps_m">
 	<MkInput v-model="name">
-		<template #label>Name</template>
+		<template #label>{{ i18n.ts._webhookSettings.name }}</template>
 	</MkInput>
 
 	<MkInput v-model="url" type="url">
@@ -10,24 +10,24 @@
 
 	<MkInput v-model="secret">
 		<template #prefix><i class="ti ti-lock"></i></template>
-		<template #label>Secret</template>
+		<template #label>{{ i18n.ts._webhookSettings.secret }}</template>
 	</MkInput>
 
 	<FormSection>
-		<template #label>Events</template>
+		<template #label>{{ i18n.ts._webhookSettings.events }}</template>
 
 		<div class="_gaps_s">
-			<MkSwitch v-model="event_follow">Follow</MkSwitch>
-			<MkSwitch v-model="event_followed">Followed</MkSwitch>
-			<MkSwitch v-model="event_note">Note</MkSwitch>
-			<MkSwitch v-model="event_reply">Reply</MkSwitch>
-			<MkSwitch v-model="event_renote">Renote</MkSwitch>
-			<MkSwitch v-model="event_reaction">Reaction</MkSwitch>
-			<MkSwitch v-model="event_mention">Mention</MkSwitch>
+			<MkSwitch v-model="event_follow">{{ i18n.ts._webhookSettings._events.follow }}</MkSwitch>
+			<MkSwitch v-model="event_followed">{{ i18n.ts._webhookSettings._events.followed }}</MkSwitch>
+			<MkSwitch v-model="event_note">{{ i18n.ts._webhookSettings._events.note }}</MkSwitch>
+			<MkSwitch v-model="event_reply">{{ i18n.ts._webhookSettings._events.reply }}</MkSwitch>
+			<MkSwitch v-model="event_renote">{{ i18n.ts._webhookSettings._events.renote }}</MkSwitch>
+			<MkSwitch v-model="event_reaction">{{ i18n.ts._webhookSettings._events.reaction }}</MkSwitch>
+			<MkSwitch v-model="event_mention">{{ i18n.ts._webhookSettings._events.mention }}</MkSwitch>
 		</div>
 	</FormSection>
 
-	<MkSwitch v-model="active">Active</MkSwitch>
+	<MkSwitch v-model="active">{{ i18n.ts._webhookSettings.active }}</MkSwitch>
 
 	<div class="_buttons">
 		<MkButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>

packages/frontend/src/pages/settings/webhook.new.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_gaps_m">
 	<MkInput v-model="name">
-		<template #label>Name</template>
+		<template #label>{{ i18n.ts._webhookSettings.name }}</template>
 	</MkInput>
 
 	<MkInput v-model="url" type="url">
@@ -10,20 +10,20 @@
 
 	<MkInput v-model="secret">
 		<template #prefix><i class="ti ti-lock"></i></template>
-		<template #label>Secret</template>
+		<template #label>{{ i18n.ts._webhookSettings.secret }}</template>
 	</MkInput>
 
 	<FormSection>
-		<template #label>Events</template>
+		<template #label>{{ i18n.ts._webhookSettings.events }}</template>
 
 		<div class="_gaps_s">
-			<MkSwitch v-model="event_follow">Follow</MkSwitch>
-			<MkSwitch v-model="event_followed">Followed</MkSwitch>
-			<MkSwitch v-model="event_note">Note</MkSwitch>
-			<MkSwitch v-model="event_reply">Reply</MkSwitch>
-			<MkSwitch v-model="event_renote">Renote</MkSwitch>
-			<MkSwitch v-model="event_reaction">Reaction</MkSwitch>
-			<MkSwitch v-model="event_mention">Mention</MkSwitch>
+			<MkSwitch v-model="event_follow">{{ i18n.ts._webhookSettings._events.follow }}</MkSwitch>
+			<MkSwitch v-model="event_followed">{{ i18n.ts._webhookSettings._events.followed }}</MkSwitch>
+			<MkSwitch v-model="event_note">{{ i18n.ts._webhookSettings._events.note }}</MkSwitch>
+			<MkSwitch v-model="event_reply">{{ i18n.ts._webhookSettings._events.reply }}</MkSwitch>
+			<MkSwitch v-model="event_renote">{{ i18n.ts._webhookSettings._events.renote }}</MkSwitch>
+			<MkSwitch v-model="event_reaction">{{ i18n.ts._webhookSettings._events.reaction }}</MkSwitch>
+			<MkSwitch v-model="event_mention">{{ i18n.ts._webhookSettings._events.mention }}</MkSwitch>
 		</div>
 	</FormSection>
 

packages/frontend/src/pages/settings/webhook.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_gaps_m">
 	<FormLink :to="`/settings/webhook/new`">
-		Create webhook
+		{{ i18n.ts._webhookSettings.createWebhook }}
 	</FormLink>
 
 	<FormSection>
@@ -31,6 +31,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
 const pagination = {
 	endpoint: 'i/webhooks/list' as const,