カスタム絵文字の管理を権限を持つユーザーが行えるように

Resolve #9542

6 files changed, 37 insertions, 4 deletions

diff --git a/packages/frontend/src/pages/admin/roles.editor.vue b/packages/frontend/src/pages/admin/roles.editor.vue
index 1d83ae3244..b66c967e6a 100644
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@@ -91,6 +91,19 @@
 			</MkFolder>
 
 			<MkFolder>
+				<template #label>{{ i18n.ts._role._options.canManageCustomEmojis }}</template>
+				<template #suffix>{{ options_canManageCustomEmojis_useDefault ? i18n.ts._role.useBaseValue : (options_canManageCustomEmojis_value ? i18n.ts.yes : i18n.ts.no) }}</template>
+				<div class="_gaps">
+					<MkSwitch v-model="options_canManageCustomEmojis_useDefault" :readonly="readonly">
+						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
+					</MkSwitch>
+					<MkSwitch v-model="options_canManageCustomEmojis_value" :disabled="options_canManageCustomEmojis_useDefault" :readonly="readonly">
+						<template #label>{{ i18n.ts.enable }}</template>
+					</MkSwitch>
+				</div>
+			</MkFolder>
+
+			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.driveCapacity }}</template>
 				<template #suffix>{{ options_driveCapacityMb_useDefault ? i18n.ts._role.useBaseValue : (options_driveCapacityMb_value + 'MB') }}</template>
 				<div class="_gaps">
@@ -175,6 +188,8 @@ let options_canPublicNote_useDefault = $ref(role?.options?.canPublicNote?.useDef
 let options_canPublicNote_value = $ref(role?.options?.canPublicNote?.value ?? false);
 let options_canInvite_useDefault = $ref(role?.options?.canInvite?.useDefault ?? true);
 let options_canInvite_value = $ref(role?.options?.canInvite?.value ?? false);
+let options_canManageCustomEmojis_useDefault = $ref(role?.options?.canManageCustomEmojis?.useDefault ?? true);
+let options_canManageCustomEmojis_value = $ref(role?.options?.canManageCustomEmojis?.value ?? false);
 let options_driveCapacityMb_useDefault = $ref(role?.options?.driveCapacityMb?.useDefault ?? true);
 let options_driveCapacityMb_value = $ref(role?.options?.driveCapacityMb?.value ?? 0);
 let options_antennaLimit_useDefault = $ref(role?.options?.antennaLimit?.useDefault ?? true);
@@ -192,6 +207,7 @@ function getOptions() {
 		ltlAvailable: { useDefault: options_ltlAvailable_useDefault, value: options_ltlAvailable_value },
 		canPublicNote: { useDefault: options_canPublicNote_useDefault, value: options_canPublicNote_value },
 		canInvite: { useDefault: options_canInvite_useDefault, value: options_canInvite_value },
+		canManageCustomEmojis: { useDefault: options_canManageCustomEmojis_useDefault, value: options_canManageCustomEmojis_value },
 		driveCapacityMb: { useDefault: options_driveCapacityMb_useDefault, value: options_driveCapacityMb_value },
 		antennaLimit: { useDefault: options_antennaLimit_useDefault, value: options_antennaLimit_value },
 	};
diff --git a/packages/frontend/src/pages/admin/roles.vue b/packages/frontend/src/pages/admin/roles.vue
index 6495074bb7..16c12f9928 100644
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -41,6 +41,14 @@
 						</MkFolder>
 
 						<MkFolder>
+							<template #label>{{ i18n.ts._role._options.canManageCustomEmojis }}</template>
+							<template #suffix>{{ options_canManageCustomEmojis ? i18n.ts.yes : i18n.ts.no }}</template>
+							<MkSwitch v-model="options_canManageCustomEmojis">
+								<template #label>{{ i18n.ts.enable }}</template>
+							</MkSwitch>
+						</MkFolder>
+
+						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.driveCapacity }}</template>
 							<template #suffix>{{ options_driveCapacityMb }}MB</template>
 							<MkInput v-model="options_driveCapacityMb" type="number">
@@ -90,6 +98,7 @@ let options_gtlAvailable = $ref(instance.baseRole.gtlAvailable);
 let options_ltlAvailable = $ref(instance.baseRole.ltlAvailable);
 let options_canPublicNote = $ref(instance.baseRole.canPublicNote);
 let options_canInvite = $ref(instance.baseRole.canInvite);
+let options_canManageCustomEmojis = $ref(instance.baseRole.canManageCustomEmojis);
 let options_driveCapacityMb = $ref(instance.baseRole.driveCapacityMb);
 let options_antennaLimit = $ref(instance.baseRole.antennaLimit);
 
@@ -100,6 +109,7 @@ async function updateBaseRole() {
 			ltlAvailable: options_ltlAvailable,
 			canPublicNote: options_canPublicNote,
 			canInvite: options_canInvite,
+			canManageCustomEmojis: options_canManageCustomEmojis,
 			driveCapacityMb: options_driveCapacityMb,
 			antennaLimit: options_antennaLimit,
 		},
diff --git a/packages/frontend/src/pages/admin/emojis.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 49f130d75b..87d205ed78 100644
--- a/packages/frontend/src/pages/admin/emojis.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<MkStickyContainer>
-		<template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+		<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 		<MkSpacer :content-max="900">
 			<div class="ogwlenmc">
 				<div v-if="tab === 'local'" class="local">
@@ -69,7 +69,6 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, defineComponent, ref, shallowRef } from 'vue';
-import XHeader from './_header_.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkPagination from '@/components/MkPagination.vue';
diff --git a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index b2880b60b1..b2880b60b1 100644
--- a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index 05dcd7806e..26c73c610f 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -306,6 +306,9 @@ export const routes = [{
 	path: '/channels',
 	component: page(() => import('./pages/channels.vue')),
 }, {
+	path: '/custom-emojis-manager',
+	component: page(() => import('./pages/custom-emojis-manager.vue')),
+}, {
 	path: '/registry/keys/system/:path(*)?',
 	component: page(() => import('./pages/registry.keys.vue')),
 }, {
@@ -331,7 +334,7 @@ export const routes = [{
 	}, {
 		path: '/emojis',
 		name: 'emojis',
-		component: page(() => import('./pages/admin/emojis.vue')),
+		component: page(() => import('./pages/custom-emojis-manager.vue')),
 	}, {
 		path: '/queue',
 		name: 'queue',
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index 079b31489e..cc152f9c1c 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -47,7 +47,7 @@ export function openInstanceMenu(ev: MouseEvent) {
 			to: '/clicker',
 			text: '🍪👈',
 			icon: 'ti ti-cookie',
-		}, ($i && ($i.isRoot || $i.role.canInvite) && instance.disableRegistration) ? {
+		}, ($i && ($i.isAdmin || $i.role.canInvite) && instance.disableRegistration) ? {
 			text: i18n.ts.invite,
 			icon: 'ti ti-user-plus',
 			action: () => {
@@ -63,6 +63,11 @@ export function openInstanceMenu(ev: MouseEvent) {
 					});
 				});
 			},
+		} : undefined, ($i && ($i.isAdmin || $i.role.canManageCustomEmojis)) ? {
+			type: 'link',
+			to: '/custom-emojis-manager',
+			text: i18n.ts.manageCustomEmojis,
+			icon: 'ti ti-icons',
 		} : undefined],
 	}, null, {
 		text: i18n.ts.help,