From f904f8d1d34ed3cc6457c0c6ae958ebb75ef1a72 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 6 Jul 2025 17:25:01 +0900
Subject: [PATCH 01/10] =?UTF-8?q?refactor(frontend):=20=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=AB=E3=83=9D=E3=83=AA=E3=82=B7=E3=83=BC=E3=82=A8=E3=83=87?=
 =?UTF-8?q?=E3=82=A3=E3=82=BF=E3=82=92=E7=B5=B1=E5=90=88=EF=BC=8B=E5=9E=8B?=
 =?UTF-8?q?=E5=BC=B7=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/admin/roles.editor.vue | 752 +-----------------
 .../pages/admin/roles.policy-editor.def.ts    | 190 +++++
 .../pages/admin/roles.policy-editor.form.vue  | 114 +++
 ...licy-editor.uploadableFileTypesCaption.vue |  13 +
 .../src/pages/admin/roles.policy-editor.vue   | 124 +++
 packages/frontend/src/pages/admin/roles.vue   | 331 +-------
 .../frontend/src/types/role-policy-editor.ts  |  85 ++
 7 files changed, 574 insertions(+), 1035 deletions(-)
 create mode 100644 packages/frontend/src/pages/admin/roles.policy-editor.def.ts
 create mode 100644 packages/frontend/src/pages/admin/roles.policy-editor.form.vue
 create mode 100644 packages/frontend/src/pages/admin/roles.policy-editor.uploadableFileTypesCaption.vue
 create mode 100644 packages/frontend/src/pages/admin/roles.policy-editor.vue
 create mode 100644 packages/frontend/src/types/role-policy-editor.ts

diff --git a/packages/frontend/src/pages/admin/roles.editor.vue b/packages/frontend/src/pages/admin/roles.editor.vue
index a266e1df6f..1eb794ad11 100644
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@@ -79,728 +79,35 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<FormSlot>
 		<template #label><i class="ti ti-license"></i> {{ i18n.ts._role.policies }}</template>
-		<div class="_gaps_s">
-			<MkInput v-model="q" 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>
-					<span v-if="role.policies.rateLimitFactor.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ `${Math.floor(role.policies.rateLimitFactor.value * 100)}%` }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.rateLimitFactor)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.rateLimitFactor.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkRange :modelValue="role.policies.rateLimitFactor.value * 100" :min="0" :max="400" :step="10" :textConverter="(v) => `${v}%`" @update:modelValue="v => role.policies.rateLimitFactor.value = (v / 100)">
-						<template #label>{{ i18n.ts._role._options.rateLimitFactor }}</template>
-						<template #caption>{{ i18n.ts._role._options.descriptionOfRateLimitFactor }}</template>
-					</MkRange>
-					<MkRange v-model="role.policies.rateLimitFactor.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.gtlAvailable, 'gtlAvailable'])">
-				<template #label>{{ i18n.ts._role._options.gtlAvailable }}</template>
-				<template #suffix>
-					<span v-if="role.policies.gtlAvailable.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.gtlAvailable.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.gtlAvailable)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.gtlAvailable.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.gtlAvailable.value" :disabled="role.policies.gtlAvailable.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.gtlAvailable.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.ltlAvailable, 'ltlAvailable'])">
-				<template #label>{{ i18n.ts._role._options.ltlAvailable }}</template>
-				<template #suffix>
-					<span v-if="role.policies.ltlAvailable.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.ltlAvailable.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.ltlAvailable)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.ltlAvailable.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.ltlAvailable.value" :disabled="role.policies.ltlAvailable.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.ltlAvailable.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canPublicNote, 'canPublicNote'])">
-				<template #label>{{ i18n.ts._role._options.canPublicNote }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canPublicNote.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canPublicNote.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canPublicNote)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canPublicNote.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canPublicNote.value" :disabled="role.policies.canPublicNote.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canPublicNote.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.chatAvailability, 'chatAvailability'])">
-				<template #label>{{ i18n.ts._role._options.chatAvailability }}</template>
-				<template #suffix>
-					<span v-if="role.policies.chatAvailability.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.chatAvailability.value === 'available' ? i18n.ts.yes : role.policies.chatAvailability.value === 'readonly' ? i18n.ts.readonly : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.chatAvailability)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.chatAvailability.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSelect v-model="role.policies.chatAvailability.value" :disabled="role.policies.chatAvailability.useDefault" :readonly="readonly">
-						<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>
-					<MkRange v-model="role.policies.chatAvailability.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.mentionMax, 'mentionLimit'])">
-				<template #label>{{ i18n.ts._role._options.mentionMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.mentionLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.mentionLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.mentionLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.mentionLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.mentionLimit.value" :disabled="role.policies.mentionLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.mentionLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canInvite, 'canInvite'])">
-				<template #label>{{ i18n.ts._role._options.canInvite }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canInvite.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canInvite.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canInvite)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canInvite.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canInvite.value" :disabled="role.policies.canInvite.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canInvite.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteLimit, 'inviteLimit'])">
-				<template #label>{{ i18n.ts._role._options.inviteLimit }}</template>
-				<template #suffix>
-					<span v-if="role.policies.inviteLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.inviteLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.inviteLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.inviteLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.inviteLimit.value" :disabled="role.policies.inviteLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.inviteLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteLimitCycle, 'inviteLimitCycle'])">
-				<template #label>{{ i18n.ts._role._options.inviteLimitCycle }}</template>
-				<template #suffix>
-					<span v-if="role.policies.inviteLimitCycle.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.inviteLimitCycle.value + i18n.ts._time.minute }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.inviteLimitCycle)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.inviteLimitCycle.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.inviteLimitCycle.value" :disabled="role.policies.inviteLimitCycle.useDefault" type="number" :readonly="readonly">
-						<template #suffix>{{ i18n.ts._time.minute }}</template>
-					</MkInput>
-					<MkRange v-model="role.policies.inviteLimitCycle.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.inviteExpirationTime, 'inviteExpirationTime'])">
-				<template #label>{{ i18n.ts._role._options.inviteExpirationTime }}</template>
-				<template #suffix>
-					<span v-if="role.policies.inviteExpirationTime.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.inviteExpirationTime.value + i18n.ts._time.minute }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.inviteExpirationTime)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.inviteExpirationTime.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.inviteExpirationTime.value" :disabled="role.policies.inviteExpirationTime.useDefault" type="number" :readonly="readonly">
-						<template #suffix>{{ i18n.ts._time.minute }}</template>
-					</MkInput>
-					<MkRange v-model="role.policies.inviteExpirationTime.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageCustomEmojis, 'canManageCustomEmojis'])">
-				<template #label>{{ i18n.ts._role._options.canManageCustomEmojis }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canManageCustomEmojis.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canManageCustomEmojis.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canManageCustomEmojis)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canManageCustomEmojis.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canManageCustomEmojis.value" :disabled="role.policies.canManageCustomEmojis.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canManageCustomEmojis.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageAvatarDecorations, 'canManageAvatarDecorations'])">
-				<template #label>{{ i18n.ts._role._options.canManageAvatarDecorations }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canManageAvatarDecorations.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canManageAvatarDecorations.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canManageAvatarDecorations)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canManageAvatarDecorations.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canManageAvatarDecorations.value" :disabled="role.policies.canManageAvatarDecorations.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canManageAvatarDecorations.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canSearchNotes, 'canSearchNotes'])">
-				<template #label>{{ i18n.ts._role._options.canSearchNotes }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canSearchNotes.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canSearchNotes.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canSearchNotes)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canSearchNotes.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canSearchNotes.value" :disabled="role.policies.canSearchNotes.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canSearchNotes.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canUseTranslator, 'canUseTranslator'])">
-				<template #label>{{ i18n.ts._role._options.canUseTranslator }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canUseTranslator.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canUseTranslator.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canUseTranslator)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canUseTranslator.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canUseTranslator.value" :disabled="role.policies.canUseTranslator.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canUseTranslator.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.driveCapacity, 'driveCapacityMb'])">
-				<template #label>{{ i18n.ts._role._options.driveCapacity }}</template>
-				<template #suffix>
-					<span v-if="role.policies.driveCapacityMb.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.driveCapacityMb.value + 'MB' }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.driveCapacityMb)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.driveCapacityMb.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.driveCapacityMb.value" :disabled="role.policies.driveCapacityMb.useDefault" type="number" :readonly="readonly">
-						<template #suffix>MB</template>
-					</MkInput>
-					<MkRange v-model="role.policies.driveCapacityMb.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.maxFileSize, 'maxFileSizeMb'])">
-				<template #label>{{ i18n.ts._role._options.maxFileSize }}</template>
-				<template #suffix>
-					<span v-if="role.policies.maxFileSizeMb.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.maxFileSizeMb.value + 'MB' }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.maxFileSizeMb)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.maxFileSizeMb.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.maxFileSizeMb.value" :disabled="role.policies.maxFileSizeMb.useDefault" type="number" :readonly="readonly">
-						<template #suffix>MB</template>
-					</MkInput>
-					<MkRange v-model="role.policies.maxFileSizeMb.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.uploadableFileTypes, 'uploadableFileTypes'])">
-				<template #label>{{ i18n.ts._role._options.uploadableFileTypes }}</template>
-				<template #suffix>
-					<span v-if="role.policies.uploadableFileTypes.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>...</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.uploadableFileTypes)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.uploadableFileTypes.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkTextarea :modelValue="role.policies.uploadableFileTypes.value.join('\n')" :disabled="role.policies.uploadableFileTypes.useDefault" :readonly="readonly" @update:modelValue="role.policies.uploadableFileTypes.value = $event.split('\n')">
-						<template #caption>
-							<div>{{ i18n.ts._role._options.uploadableFileTypes_caption }}</div>
-							<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.tsx._role._options.uploadableFileTypes_caption2({ x: 'application/octet-stream' }) }}</div>
-						</template>
-					</MkTextarea>
-					<MkRange v-model="role.policies.uploadableFileTypes.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.alwaysMarkNsfw, 'alwaysMarkNsfw'])">
-				<template #label>{{ i18n.ts._role._options.alwaysMarkNsfw }}</template>
-				<template #suffix>
-					<span v-if="role.policies.alwaysMarkNsfw.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.alwaysMarkNsfw.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.alwaysMarkNsfw)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.alwaysMarkNsfw.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.alwaysMarkNsfw.value" :disabled="role.policies.alwaysMarkNsfw.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.alwaysMarkNsfw.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canUpdateBioMedia, 'canUpdateBioMedia'])">
-				<template #label>{{ i18n.ts._role._options.canUpdateBioMedia }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canUpdateBioMedia.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canUpdateBioMedia.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canUpdateBioMedia)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canUpdateBioMedia.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canUpdateBioMedia.value" :disabled="role.policies.canUpdateBioMedia.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canUpdateBioMedia.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.pinMax, 'pinLimit'])">
-				<template #label>{{ i18n.ts._role._options.pinMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.pinLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.pinLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.pinLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.pinLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.pinLimit.value" :disabled="role.policies.pinLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.pinLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.antennaMax, 'antennaLimit'])">
-				<template #label>{{ i18n.ts._role._options.antennaMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.antennaLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.antennaLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.antennaLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.antennaLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.antennaLimit.value" :disabled="role.policies.antennaLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.antennaLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.wordMuteMax, 'wordMuteLimit'])">
-				<template #label>{{ i18n.ts._role._options.wordMuteMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.wordMuteLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.wordMuteLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.wordMuteLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.wordMuteLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.wordMuteLimit.value" :disabled="role.policies.wordMuteLimit.useDefault" type="number" :readonly="readonly">
-						<template #suffix>chars</template>
-					</MkInput>
-					<MkRange v-model="role.policies.wordMuteLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.webhookMax, 'webhookLimit'])">
-				<template #label>{{ i18n.ts._role._options.webhookMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.webhookLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.webhookLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.webhookLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.webhookLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.webhookLimit.value" :disabled="role.policies.webhookLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.webhookLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.clipMax, 'clipLimit'])">
-				<template #label>{{ i18n.ts._role._options.clipMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.clipLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.clipLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.clipLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.clipLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.clipLimit.value" :disabled="role.policies.clipLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.clipLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.noteEachClipsMax, 'noteEachClipsLimit'])">
-				<template #label>{{ i18n.ts._role._options.noteEachClipsMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.noteEachClipsLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.noteEachClipsLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.noteEachClipsLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.noteEachClipsLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.noteEachClipsLimit.value" :disabled="role.policies.noteEachClipsLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.noteEachClipsLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.userListMax, 'userListLimit'])">
-				<template #label>{{ i18n.ts._role._options.userListMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.userListLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.userListLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.userListLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.userListLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.userListLimit.value" :disabled="role.policies.userListLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.userListLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.userEachUserListsMax, 'userEachUserListsLimit'])">
-				<template #label>{{ i18n.ts._role._options.userEachUserListsMax }}</template>
-				<template #suffix>
-					<span v-if="role.policies.userEachUserListsLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.userEachUserListsLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.userEachUserListsLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.userEachUserListsLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.userEachUserListsLimit.value" :disabled="role.policies.userEachUserListsLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.userEachUserListsLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canHideAds, 'canHideAds'])">
-				<template #label>{{ i18n.ts._role._options.canHideAds }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canHideAds.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canHideAds.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canHideAds)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canHideAds.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canHideAds.value" :disabled="role.policies.canHideAds.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canHideAds.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.avatarDecorationLimit, 'avatarDecorationLimit'])">
-				<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
-				<template #suffix>
-					<span v-if="role.policies.avatarDecorationLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.avatarDecorationLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.avatarDecorationLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.avatarDecorationLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.avatarDecorationLimit.value" type="number" :min="0" :max="16" @update:modelValue="updateAvatarDecorationLimit">
-						<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
-					</MkInput>
-					<MkRange v-model="role.policies.avatarDecorationLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportAntennas, 'canImportAntennas'])">
-				<template #label>{{ i18n.ts._role._options.canImportAntennas }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canImportAntennas.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canImportAntennas.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canImportAntennas)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canImportAntennas.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canImportAntennas.value" :disabled="role.policies.canImportAntennas.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canImportAntennas.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportBlocking, 'canImportBlocking'])">
-				<template #label>{{ i18n.ts._role._options.canImportBlocking }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canImportBlocking.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canImportBlocking.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canImportBlocking)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canImportBlocking.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canImportBlocking.value" :disabled="role.policies.canImportBlocking.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canImportBlocking.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportFollowing, 'canImportFollowing'])">
-				<template #label>{{ i18n.ts._role._options.canImportFollowing }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canImportFollowing.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canImportFollowing.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canImportFollowing)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canImportFollowing.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canImportFollowing.value" :disabled="role.policies.canImportFollowing.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canImportFollowing.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportMuting, 'canImportMuting'])">
-				<template #label>{{ i18n.ts._role._options.canImportMuting }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canImportMuting.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canImportMuting.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canImportMuting)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canImportMuting.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canImportMuting.value" :disabled="role.policies.canImportMuting.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canImportMuting.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canImportUserLists, 'canImportUserLists'])">
-				<template #label>{{ i18n.ts._role._options.canImportUserLists }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canImportUserLists.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canImportUserLists.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canImportUserLists)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canImportUserLists.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canImportUserLists.value" :disabled="role.policies.canImportUserLists.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canImportUserLists.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.noteDraftLimit, 'noteDraftLimit'])">
-				<template #label>{{ i18n.ts._role._options.noteDraftLimit }}</template>
-				<template #suffix>
-					<span v-if="role.policies.noteDraftLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.noteDraftLimit.value }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.noteDraftLimit)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.noteDraftLimit.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkInput v-model="role.policies.noteDraftLimit.value" :disabled="role.policies.noteDraftLimit.useDefault" type="number" :readonly="readonly">
-					</MkInput>
-					<MkRange v-model="role.policies.noteDraftLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
-						<template #label>{{ i18n.ts._role.priority }}</template>
-					</MkRange>
-				</div>
-			</MkFolder>
-		</div>
+		<XPolicyEditor
+			v-model="role.policies"
+			:withUseDefault="true"
+			:withPriority="true"
+			:readonly="readonly"
+		/>
 	</FormSlot>
 </div>
 </template>
 
 <script lang="ts" setup>
+import * as Misskey from 'misskey-js';
 import { watch, ref, computed } from 'vue';
 import { throttle } from 'throttle-debounce';
 import { ROLE_POLICIES } from '@@/js/const.js';
 import RolesEditorFormula from './RolesEditorFormula.vue';
+import XPolicyEditor from './roles.policy-editor.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkColorInput from '@/components/MkColorInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
-import MkRange from '@/components/MkRange.vue';
 import FormSlot from '@/components/form/slot.vue';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { deepClone } from '@/utility/clone.js';
+import type { RolePolicySettingsRecord } from './roles.policy-editor.def.js';
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', v: any): void;
@@ -811,24 +118,24 @@ const props = defineProps<{
 	readonly?: boolean;
 }>();
 
-const role = ref(deepClone(props.modelValue));
+const role = ref<Misskey.entities.AdminRolesShowResponse & {
+	policies: RolePolicySettingsRecord;
+}>((() => {
+	const roleBase = deepClone(props.modelValue);
 
-// fill missing policy
-for (const ROLE_POLICY of ROLE_POLICIES) {
-	if (role.value.policies[ROLE_POLICY] == null) {
-		role.value.policies[ROLE_POLICY] = {
-			useDefault: true,
-			priority: 0,
-			value: instance.policies[ROLE_POLICY],
-		};
+	// fill missing policy
+	for (const ROLE_POLICY of ROLE_POLICIES) {
+		if (roleBase.policies[ROLE_POLICY] == null) {
+			roleBase.policies[ROLE_POLICY] = {
+				useDefault: true,
+				priority: 0,
+				value: instance.policies[ROLE_POLICY],
+			};
+		}
 	}
-}
 
-function updateAvatarDecorationLimit(value: string | number) {
-	const numValue = Number(value);
-	const limited = Math.min(16, Math.max(0, numValue));
-	role.value.policies.avatarDecorationLimit.value = limited;
-}
+	return roleBase;
+})());
 
 const rolePermission = computed({
 	get: () => role.value.isAdministrator ? 'administrator' : role.value.isModerator ? 'moderator' : 'normal',
@@ -840,17 +147,6 @@ const rolePermission = computed({
 
 const q = ref('');
 
-function getPriorityIcon(option) {
-	if (option.priority === 2) return 'ti ti-arrows-up';
-	if (option.priority === 1) return 'ti ti-arrow-narrow-up';
-	return 'ti ti-point';
-}
-
-function matchQuery(keywords: string[]): boolean {
-	if (q.value.trim().length === 0) return true;
-	return keywords.some(keyword => keyword.toLowerCase().includes(q.value.toLowerCase()));
-}
-
 const save = throttle(100, () => {
 	const data = {
 		name: role.value.name,
diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.def.ts b/packages/frontend/src/pages/admin/roles.policy-editor.def.ts
new file mode 100644
index 0000000000..521065843e
--- /dev/null
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.def.ts
@@ -0,0 +1,190 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { i18n } from '@/i18n.js';
+import XUploadableFileTypesCaption from './roles.policy-editor.uploadableFileTypesCaption.vue';
+import type {
+	RolePolicyEditorDef,
+	GetRolePolicyEditorValuesType,
+	RolePolicyValueRecord as _RolePolicyValueRecord,
+	RolePolicySettingsRecord as _RolePolicySettingsRecord,
+} from '@/types/role-policy-editor.js';
+
+export const rolePolicyEditorDef = {
+  rateLimitFactor: {
+    type: 'range',
+    folderLabel: i18n.ts._role._options.rateLimitFactor,
+		folderSuffix: (value) => `${Math.round(value * 100)}%`,
+    min: 0.3,
+    max: 3,
+    step: 0.1,
+		textConverter: (value) => `${Math.round(value * 100)}%`,
+		inputCaption: i18n.ts._role._options.descriptionOfRateLimitFactor,
+  },
+  gtlAvailable: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.gtlAvailable,
+  },
+  ltlAvailable: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.ltlAvailable,
+  },
+  canPublicNote: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canPublicNote,
+  },
+  chatAvailability: {
+    type: 'enum',
+    folderLabel: i18n.ts._role._options.chatAvailability,
+		enum: [
+			{ label: i18n.ts.enabled, value: 'available' },
+			{ label: i18n.ts.readonly, value: 'readonly' },
+			{ label: i18n.ts.disabled, value: 'unavailable' },
+		],
+  },
+  mentionLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.mentionMax,
+  },
+  canInvite: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canInvite,
+  },
+  inviteLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.inviteLimit,
+  },
+  inviteLimitCycle: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.inviteLimitCycle,
+		folderSuffix: (value) => `${value} ${i18n.ts._time.minute}`,
+		inputSuffix: i18n.ts._time.minute,
+  },
+  inviteExpirationTime: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.inviteExpirationTime,
+		folderSuffix: (value) => `${value} ${i18n.ts._time.minute}`,
+		inputSuffix: i18n.ts._time.minute,
+  },
+  canManageAvatarDecorations: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canManageAvatarDecorations,
+  },
+  canManageCustomEmojis: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canManageCustomEmojis,
+  },
+  canSearchNotes: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canSearchNotes,
+  },
+  canUseTranslator: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canUseTranslator,
+  },
+  driveCapacityMb: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.driveCapacity,
+		folderSuffix: (value) => `${value} MB`,
+		inputSuffix: 'MB',
+  },
+  maxFileSizeMb: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.maxFileSize,
+		folderSuffix: (value) => `${value} MB`,
+		inputSuffix: 'MB',
+  },
+  uploadableFileTypes: {
+    type: 'string',
+		multiline: true,
+    folderLabel: i18n.ts._role._options.uploadableFileTypes,
+		folderSuffix: '...',
+		inputCaption: XUploadableFileTypesCaption,
+  },
+  alwaysMarkNsfw: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.alwaysMarkNsfw,
+  },
+  canUpdateBioMedia: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canUpdateBioMedia,
+  },
+  pinLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.pinMax,
+  },
+  antennaLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.antennaMax,
+  },
+  wordMuteLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.wordMuteMax,
+		inputSuffix: 'chars',
+  },
+  webhookLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.webhookMax,
+  },
+  clipLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.clipMax,
+  },
+  noteEachClipsLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.noteEachClipsMax,
+  },
+  userListLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.userListMax,
+  },
+  userEachUserListsLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.userEachUserListsMax,
+  },
+  canHideAds: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canHideAds,
+  },
+  avatarDecorationLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.avatarDecorationLimit,
+		min: 0,
+		max: 16,
+  },
+  canImportAntennas: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canImportAntennas,
+  },
+  canImportBlocking: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canImportBlocking,
+  },
+  canImportFollowing: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canImportFollowing,
+  },
+  canImportMuting: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canImportMuting,
+  },
+  canImportUserLists: {
+    type: 'boolean',
+    folderLabel: i18n.ts._role._options.canImportUserLists,
+  },
+  noteDraftLimit: {
+    type: 'number',
+    folderLabel: i18n.ts._role._options.noteDraftLimit,
+		min: 0,
+  },
+} satisfies RolePolicyEditorDef;
+
+export type RolePolicyValueRecord = _RolePolicyValueRecord<typeof rolePolicyEditorDef>;
+
+export type RolePolicySettingsRecord = _RolePolicySettingsRecord<typeof rolePolicyEditorDef>;
+
+export type RolePolicyRecord = {
+	[K in keyof typeof rolePolicyEditorDef]: GetRolePolicyEditorValuesType<typeof rolePolicyEditorDef[K]>;
+};
diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.form.vue b/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
new file mode 100644
index 0000000000..fd47ffbce3
--- /dev/null
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
@@ -0,0 +1,114 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkInput
+	v-if="def.type === 'string' && def.multiline !== true && assertModelType(model, 'string')"
+	v-model="model"
+	type="text"
+	:disabled="disabled"
+	:readonly="readonly"
+>
+	<template #label>{{ def.inputLabel }}</template>
+	<template #caption>
+		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
+		<component v-else :is="def.inputCaption" />
+	</template>
+</MkInput>
+<MkTextarea
+	v-else-if="def.type === 'string' && def.multiline === true && assertModelType(model, 'string')"
+	v-model="model"
+	:disabled="disabled"
+	:readonly="readonly"
+>
+	<template #label>{{ def.inputLabel }}</template>
+	<template #caption>
+		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
+		<component v-else :is="def.inputCaption" />
+	</template>
+</MkTextarea>
+<MkInput
+	v-else-if="def.type === 'number' && assertModelType(model, 'number')"
+	v-model="model"
+	type="number"
+	:disabled="disabled"
+	:readonly="readonly"
+	:min="def.min"
+	:max="def.max"
+>
+	<template #label>{{ def.inputLabel }}</template>
+	<template #caption>
+		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
+		<component v-else :is="def.inputCaption" />
+	</template>
+	<template #prefix>{{ def.inputPrefix }}</template>
+	<template #suffix>{{ def.inputSuffix }}</template>
+</MkInput>
+<MkRange
+	v-else-if="def.type === 'range' && assertModelType(model, 'range')"
+	v-model="model"
+	:min="def.min"
+	:max="def.max"
+	:step="def.step"
+	easing
+	:disabled="disabled || readonly"
+	:textConverter="def.textConverter"
+>
+	<template #label>{{ def.inputLabel }}</template>
+	<template #caption>
+		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
+		<component v-else :is="def.inputCaption" />
+	</template>
+	<template #prefix>{{ def.inputPrefix }}</template>
+	<template #suffix>{{ def.inputSuffix }}</template>
+</MkRange>
+<MkSelect
+	v-else-if="def.type === 'enum' && assertModelType(model, 'enum')"
+	v-model="model"
+	:disabled="disabled"
+	:readonly="readonly"
+>
+	<template #label>{{ def.inputLabel }}</template>
+	<template #caption>
+		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
+		<component v-else :is="def.inputCaption" />
+	</template>
+	<option v-for="option in def.enum" :key="option.value" :value="option.value">{{ option.label }}</option>
+</MkSelect>
+<MkSwitch
+	v-else-if="def.type === 'boolean' && assertModelType(model, 'boolean')"
+	v-model="model"
+	:disabled="disabled || readonly"
+>
+	<template #label>{{ def.inputLabel ?? i18n.ts.enable }}</template>
+	<template #caption>
+		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
+		<component v-else :is="def.inputCaption" />
+	</template>
+</MkSwitch>
+</template>
+
+<script lang="ts" setup generic="D extends RolePolicyEditorItem">
+import type { RolePolicyEditorItem, GetRolePolicyEditorValuesType } from '@/types/role-policy-editor.js';
+import { i18n } from '@/i18n.js';
+
+import MkInput from '@/components/MkInput.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkRange from '@/components/MkRange.vue';
+
+const props = defineProps<{
+	def: D;
+	disabled?: boolean;
+	readonly?: boolean;
+}>();
+
+const model = defineModel<GetRolePolicyEditorValuesType<D>>({ required: true });
+
+function assertModelType<T extends RolePolicyEditorItem['type']>(m: unknown, type: T): m is GetRolePolicyEditorValuesType<Extract<RolePolicyEditorItem, { type: T }>> {
+  return props.def.type === type;
+}
+</script>
diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.uploadableFileTypesCaption.vue b/packages/frontend/src/pages/admin/roles.policy-editor.uploadableFileTypesCaption.vue
new file mode 100644
index 0000000000..8d62884162
--- /dev/null
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.uploadableFileTypesCaption.vue
@@ -0,0 +1,13 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div>{{ i18n.ts._role._options.uploadableFileTypes_caption }}</div>
+<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.tsx._role._options.uploadableFileTypes_caption2({ x: 'application/octet-stream' }) }}</div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+</script>
diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.vue b/packages/frontend/src/pages/admin/roles.policy-editor.vue
new file mode 100644
index 0000000000..da1a85304d
--- /dev/null
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.vue
@@ -0,0 +1,124 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_s">
+	<MkInput v-if="withSearchBar" v-model="searchQuery" type="search">
+		<template #prefix><i class="ti ti-search"></i></template>
+	</MkInput>
+
+	<MkFolder v-for="(def, key) in filteredDefs" :key="key">
+		<template #label>{{ def.folderLabel }}</template>
+		<template #suffix>
+			<span v-if="withUseDefault && model[key].useDefault">{{ i18n.ts._role.useBaseValue }}</span>
+			<span v-else-if="'folderSuffix' in def">{{ typeof def.folderSuffix === 'string' ? def.folderSuffix : (def as RolePolicyEditorItemBaseFolderSuffixGetter).folderSuffix(model[key].value) }}</span>
+			<span v-else-if="def.type === 'boolean'">{{ model[key].value === true ? i18n.ts.yes : i18n.ts.no }}</span>
+			<span v-else-if="def.type === 'enum'">{{ def.enum.find((v) => v.value === model[key].value)?.label ?? model[key].value }}</span>
+			<span v-else>{{ model[key].value }}</span>
+			<span v-if="withPriority" :class="$style.priorityIndicator"><i :class="getPriorityIcon(model[key].priority)"></i></span>
+		</template>
+
+		<div class="_gaps">
+			<MkSwitch v-if="withUseDefault" v-model="model[key].useDefault" :disabled="readonly">
+				<template #label>{{ i18n.ts._role.useBaseValue }}</template>
+			</MkSwitch>
+
+			<XForm
+				:def="def"
+				v-model="model[key].value"
+				:disabled="withUseDefault && model[key].useDefault"
+				:readonly="readonly"
+			/>
+
+			<MkRange
+				v-if="withPriority"
+				v-model="model[key].priority"
+				:min="0"
+				:max="2"
+				:step="1"
+				easing
+				:textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''"
+				:disabled="readonly || (withUseDefault && model[key].useDefault)"
+			>
+				<template #label>{{ i18n.ts._role.priority }}</template>
+			</MkRange>
+		</div>
+	</MkFolder>
+</div>
+</template>
+
+<script lang="ts" setup generic="WP extends boolean, UD extends boolean">
+import { ref, computed } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkInput from '@/components/MkInput.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkRange from '@/components/MkRange.vue';
+import XForm from './roles.policy-editor.form.vue';
+import { rolePolicyEditorDef } from './roles.policy-editor.def.js';
+import type { GetRolePolicyEditorValuesType, RolePolicyEditorDef, RolePolicyEditorItemBaseFolderSuffixGetter } from '@/types/role-policy-editor.js';
+
+const props = withDefaults(defineProps<{
+	withUseDefault: UD;
+	withPriority: WP;
+	withSearchBar?: boolean;
+	readonly?: boolean;
+}>(), {
+	withSearchBar: true,
+	readonly: false,
+});
+
+type RolePolicyEditorValueItem = {
+	value: GetRolePolicyEditorValuesType<typeof rolePolicyEditorDef[keyof typeof rolePolicyEditorDef]>;
+} & (
+	(UD extends true ? { useDefault: boolean } : {}) &
+	(WP extends true ? { priority: 0 | 1 | 2 } : {})
+);
+
+type RolePolicyEditorValue = {
+	[K in keyof typeof rolePolicyEditorDef]: RolePolicyEditorValueItem;
+};
+
+const model = defineModel<RolePolicyEditorValue>({ required: true });
+
+const searchQuery = ref('');
+
+function matchQuery(keywords: string[]) {
+	if (searchQuery.value.trim().length === 0) return true;
+	return keywords.some(keyword => keyword.toLowerCase().includes(searchQuery.value.toLowerCase()));
+}
+
+const filteredDefs = computed(() => {
+	if (!props.withSearchBar) return rolePolicyEditorDef;
+
+	return Object.fromEntries(
+		Object.entries(rolePolicyEditorDef as RolePolicyEditorDef).filter(([key, def]) => {
+			if (searchQuery.value.trim().length === 0) return true;
+			const matchTerms = [
+				key,
+				def.folderLabel,
+				...(def.searchTerms ?? []),
+			];
+			return matchQuery(matchTerms);
+		}),
+	);
+});
+
+function getPriorityIcon(priority: number) {
+	if (priority === 2) return 'ti ti-arrows-up';
+	if (priority === 1) return 'ti ti-arrow-narrow-up';
+	return 'ti ti-point';
+}
+</script>
+
+<style lang="scss" module>
+.useDefaultLabel {
+	opacity: 0.7;
+}
+
+.priorityIndicator {
+	margin-left: 8px;
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/roles.vue b/packages/frontend/src/pages/admin/roles.vue
index dee0fb1e5c..01b4a651fd 100644
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -12,286 +12,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<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>
-
-					<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.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, 'canUseTranslator'])">
-						<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.maxFileSize, 'maxFileSizeMb'])">
-						<template #label>{{ i18n.ts._role._options.maxFileSize }}</template>
-						<template #suffix>{{ policies.maxFileSizeMb }}MB</template>
-						<MkInput v-model="policies.maxFileSizeMb" type="number">
-							<template #suffix>MB</template>
-						</MkInput>
-					</MkFolder>
-
-					<MkFolder v-if="matchQuery([i18n.ts._role._options.uploadableFileTypes, 'uploadableFileTypes'])">
-						<template #label>{{ i18n.ts._role._options.uploadableFileTypes }}</template>
-						<template #suffix>...</template>
-						<MkTextarea :modelValue="policies.uploadableFileTypes.join('\n')" @update:modelValue="v => policies.uploadableFileTypes = v.split('\n')">
-							<template #caption>
-								<div>{{ i18n.ts._role._options.uploadableFileTypes_caption }}</div>
-								<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.tsx._role._options.uploadableFileTypes_caption2({ x: 'application/octet-stream' }) }}</div>
-							</template>
-						</MkTextarea>
-					</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>
-
-					<MkFolder v-if="matchQuery([i18n.ts._role._options.noteDraftLimit, 'noteDraftLimit'])">
-						<template #label>{{ i18n.ts._role._options.noteDraftLimit }}</template>
-						<template #suffix>{{ policies.noteDraftLimit }}</template>
-						<MkInput v-model="policies.noteDraftLimit" type="number" :min="0">
-						</MkInput>
-					</MkFolder>
-				</div>
+				<XPolicyEditor
+					v-model="policies"
+					:withUseDefault="false"
+					:withPriority="false"
+				/>
 			</MkFolder>
 			<MkButton primary rounded @click="create"><i class="ti ti-plus"></i> {{ i18n.ts._role.new }}</MkButton>
 			<div class="_gaps_s">
@@ -314,14 +40,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue';
-import { ROLE_POLICIES } from '@@/js/const.js';
-import MkInput from '@/components/MkInput.vue';
+import { computed, ref } from 'vue';
+import type { RolePolicyRecord, RolePolicyValueRecord } from './roles.policy-editor.def.js';
 import MkFolder from '@/components/MkFolder.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
 import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/MkSelect.vue';
-import MkRange from '@/components/MkRange.vue';
+import XPolicyEditor from './roles.policy-editor.vue';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -330,37 +53,31 @@ import { definePage } from '@/page.js';
 import { instance, fetchInstance } from '@/instance.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import { useRouter } from '@/router.js';
-import MkTextarea from '@/components/MkTextarea.vue';
+import { deepClone } from '@/utility/clone.js';
 
 const router = useRouter();
-const baseRoleQ = ref('');
 
 const roles = await misskeyApi('admin/roles/list');
 
-const policies = reactive<Record<typeof ROLE_POLICIES[number], any>>({});
-for (const ROLE_POLICY of ROLE_POLICIES) {
-	policies[ROLE_POLICY] = instance.policies[ROLE_POLICY];
-}
+const policies = ref<RolePolicyValueRecord>((() => {
+	const _p = deepClone(instance.policies);
 
-const avatarDecorationLimit = computed({
-	get: () => Math.min(16, Math.max(0, policies.avatarDecorationLimit)),
-	set: (value) => {
-		policies.avatarDecorationLimit = Math.min(Number(value), 16);
-	},
-});
-
-function updateAvatarDecorationLimit(value: string | number) {
-	avatarDecorationLimit.value = Number(value);
-}
-
-function matchQuery(keywords: string[]): boolean {
-	if (baseRoleQ.value.trim().length === 0) return true;
-	return keywords.some(keyword => keyword.toLowerCase().includes(baseRoleQ.value.toLowerCase()));
-}
+	return Object.fromEntries(
+		Object.entries(_p).map(([key, value]) => {
+			return [key, { value }];
+		})
+	) as RolePolicyValueRecord;
+})());
 
 async function updateBaseRole() {
+	const _policies = Object.fromEntries(
+		Object.entries(policies.value).map(([key, value]) => {
+			return [key, value.value];
+		})
+	) as RolePolicyRecord;
+
 	await os.apiWithDialog('admin/roles/update-default-policies', {
-		policies,
+		policies: _policies,
 	});
 	fetchInstance(true);
 }
diff --git a/packages/frontend/src/types/role-policy-editor.ts b/packages/frontend/src/types/role-policy-editor.ts
new file mode 100644
index 0000000000..21d543d537
--- /dev/null
+++ b/packages/frontend/src/types/role-policy-editor.ts
@@ -0,0 +1,85 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { Component } from 'vue';
+import type { ROLE_POLICIES } from '@@/js/const.js';
+
+interface RolePolicyEditorItemBase<T = unknown> {
+	searchTerms?: string[];
+	type: string;
+	folderLabel: string;
+	folderSuffix?: string | ((value: T) => string);
+	inputLabel?: string;
+	inputCaption?: string | Component;
+}
+
+export type RolePolicyEditorItemBaseFolderSuffixGetter = {
+	folderSuffix: (value: boolean | number | string) => string;
+}
+
+interface RolePolicyEditorItemBoolean extends RolePolicyEditorItemBase<boolean> {
+	type: 'boolean';
+}
+
+interface RolePolicyEditorItemNumber extends RolePolicyEditorItemBase<number> {
+	type: 'number';
+	min?: number;
+	max?: number;
+	inputPrefix?: string;
+	inputSuffix?: string;
+}
+
+interface RolePolicyEditorItemRange extends RolePolicyEditorItemBase<number> {
+	type: 'range';
+	min: number;
+	max: number;
+	step?: number;
+	textConverter?: (value: number) => string;
+	inputPrefix?: string;
+	inputSuffix?: string;
+}
+
+interface RolePolicyEditorItemString extends RolePolicyEditorItemBase<string> {
+	type: 'string';
+	multiline?: boolean;
+}
+
+interface RolePolicyEditorItemEnum extends RolePolicyEditorItemBase<string> {
+	type: 'enum';
+	enum: {
+		label: string;
+		value: string;
+	}[];
+}
+
+export type RolePolicyEditorItem =
+	RolePolicyEditorItemBoolean |
+	RolePolicyEditorItemNumber |
+	RolePolicyEditorItemRange |
+	RolePolicyEditorItemString |
+	RolePolicyEditorItemEnum;
+
+export type RolePolicyEditorDef = Record<typeof ROLE_POLICIES[number], RolePolicyEditorItem>;
+
+export type GetRolePolicyEditorValuesType<T extends RolePolicyEditorItem> =
+	T extends RolePolicyEditorItemBoolean ? boolean :
+	T extends RolePolicyEditorItemNumber ? number :
+	T extends RolePolicyEditorItemRange ? number :
+	T extends RolePolicyEditorItemString ? string :
+	T extends RolePolicyEditorItemEnum ? T['enum'][number]['value'] :
+	never;
+
+export type RolePolicyValueRecord<T extends Record<string, RolePolicyEditorItem>> = {
+	[K in keyof T]: {
+		value: GetRolePolicyEditorValuesType<T[K]>;
+	};
+};
+
+export type RolePolicySettingsRecord<T extends Record<string, RolePolicyEditorItem>> = {
+	[K in keyof T]: {
+		value: GetRolePolicyEditorValuesType<T[K]>;
+		useDefault: boolean;
+		priority: 0 | 1 | 2;
+	};
+};

From c276859e3f87ad2dd9d61cbd3f2063f4ff160cce Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 6 Jul 2025 17:33:46 +0900
Subject: [PATCH 02/10] lint fixes

---
 .../src/pages/admin/roles.policy-editor.form.vue     | 12 ++++++------
 .../frontend/src/pages/admin/roles.policy-editor.vue |  6 +++---
 packages/frontend/src/types/role-policy-editor.ts    |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.form.vue b/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
index fd47ffbce3..3686034e2e 100644
--- a/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #label>{{ def.inputLabel }}</template>
 	<template #caption>
 		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
-		<component v-else :is="def.inputCaption" />
+		<component :is="def.inputCaption" v-else />
 	</template>
 </MkInput>
 <MkTextarea
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #label>{{ def.inputLabel }}</template>
 	<template #caption>
 		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
-		<component v-else :is="def.inputCaption" />
+		<component :is="def.inputCaption" v-else />
 	</template>
 </MkTextarea>
 <MkInput
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #label>{{ def.inputLabel }}</template>
 	<template #caption>
 		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
-		<component v-else :is="def.inputCaption" />
+		<component :is="def.inputCaption" v-else />
 	</template>
 	<template #prefix>{{ def.inputPrefix }}</template>
 	<template #suffix>{{ def.inputSuffix }}</template>
@@ -59,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #label>{{ def.inputLabel }}</template>
 	<template #caption>
 		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
-		<component v-else :is="def.inputCaption" />
+		<component :is="def.inputCaption" v-else />
 	</template>
 	<template #prefix>{{ def.inputPrefix }}</template>
 	<template #suffix>{{ def.inputSuffix }}</template>
@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #label>{{ def.inputLabel }}</template>
 	<template #caption>
 		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
-		<component v-else :is="def.inputCaption" />
+		<component :is="def.inputCaption" v-else />
 	</template>
 	<option v-for="option in def.enum" :key="option.value" :value="option.value">{{ option.label }}</option>
 </MkSelect>
@@ -85,7 +85,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #label>{{ def.inputLabel ?? i18n.ts.enable }}</template>
 	<template #caption>
 		<span v-if="typeof def.inputCaption === 'string'">{{ def.inputCaption }}</span>
-		<component v-else :is="def.inputCaption" />
+		<component :is="def.inputCaption" v-else />
 	</template>
 </MkSwitch>
 </template>
diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.vue b/packages/frontend/src/pages/admin/roles.policy-editor.vue
index da1a85304d..f0a0886350 100644
--- a/packages/frontend/src/pages/admin/roles.policy-editor.vue
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.vue
@@ -26,8 +26,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSwitch>
 
 			<XForm
-				:def="def"
 				v-model="model[key].value"
+				:def="def"
 				:disabled="withUseDefault && model[key].useDefault"
 				:readonly="readonly"
 			/>
@@ -73,8 +73,8 @@ const props = withDefaults(defineProps<{
 type RolePolicyEditorValueItem = {
 	value: GetRolePolicyEditorValuesType<typeof rolePolicyEditorDef[keyof typeof rolePolicyEditorDef]>;
 } & (
-	(UD extends true ? { useDefault: boolean } : {}) &
-	(WP extends true ? { priority: 0 | 1 | 2 } : {})
+	(UD extends true ? { useDefault: boolean } : never) &
+	(WP extends true ? { priority: 0 | 1 | 2 } : never)
 );
 
 type RolePolicyEditorValue = {
diff --git a/packages/frontend/src/types/role-policy-editor.ts b/packages/frontend/src/types/role-policy-editor.ts
index 21d543d537..77ea6d3080 100644
--- a/packages/frontend/src/types/role-policy-editor.ts
+++ b/packages/frontend/src/types/role-policy-editor.ts
@@ -16,7 +16,7 @@ interface RolePolicyEditorItemBase<T = unknown> {
 
 export type RolePolicyEditorItemBaseFolderSuffixGetter = {
 	folderSuffix: (value: boolean | number | string) => string;
-}
+};
 
 interface RolePolicyEditorItemBoolean extends RolePolicyEditorItemBase<boolean> {
 	type: 'boolean';

From ce88357dd45eb196845a91ff6d819b62365e9aa6 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 6 Jul 2025 17:40:57 +0900
Subject: [PATCH 03/10] fix indent

---
 .../pages/admin/roles.policy-editor.def.ts    | 286 +++++++++---------
 1 file changed, 143 insertions(+), 143 deletions(-)

diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.def.ts b/packages/frontend/src/pages/admin/roles.policy-editor.def.ts
index 521065843e..88cd69b297 100644
--- a/packages/frontend/src/pages/admin/roles.policy-editor.def.ts
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.def.ts
@@ -13,172 +13,172 @@ import type {
 } from '@/types/role-policy-editor.js';
 
 export const rolePolicyEditorDef = {
-  rateLimitFactor: {
-    type: 'range',
-    folderLabel: i18n.ts._role._options.rateLimitFactor,
+	rateLimitFactor: {
+		type: 'range',
+		folderLabel: i18n.ts._role._options.rateLimitFactor,
 		folderSuffix: (value) => `${Math.round(value * 100)}%`,
-    min: 0.3,
-    max: 3,
-    step: 0.1,
+		min: 0.3,
+		max: 3,
+		step: 0.1,
 		textConverter: (value) => `${Math.round(value * 100)}%`,
 		inputCaption: i18n.ts._role._options.descriptionOfRateLimitFactor,
-  },
-  gtlAvailable: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.gtlAvailable,
-  },
-  ltlAvailable: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.ltlAvailable,
-  },
-  canPublicNote: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canPublicNote,
-  },
-  chatAvailability: {
-    type: 'enum',
-    folderLabel: i18n.ts._role._options.chatAvailability,
+	},
+	gtlAvailable: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.gtlAvailable,
+	},
+	ltlAvailable: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.ltlAvailable,
+	},
+	canPublicNote: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canPublicNote,
+	},
+	chatAvailability: {
+		type: 'enum',
+		folderLabel: i18n.ts._role._options.chatAvailability,
 		enum: [
 			{ label: i18n.ts.enabled, value: 'available' },
 			{ label: i18n.ts.readonly, value: 'readonly' },
 			{ label: i18n.ts.disabled, value: 'unavailable' },
 		],
-  },
-  mentionLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.mentionMax,
-  },
-  canInvite: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canInvite,
-  },
-  inviteLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.inviteLimit,
-  },
-  inviteLimitCycle: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.inviteLimitCycle,
+	},
+	mentionLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.mentionMax,
+	},
+	canInvite: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canInvite,
+	},
+	inviteLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.inviteLimit,
+	},
+	inviteLimitCycle: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.inviteLimitCycle,
 		folderSuffix: (value) => `${value} ${i18n.ts._time.minute}`,
 		inputSuffix: i18n.ts._time.minute,
-  },
-  inviteExpirationTime: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.inviteExpirationTime,
+	},
+	inviteExpirationTime: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.inviteExpirationTime,
 		folderSuffix: (value) => `${value} ${i18n.ts._time.minute}`,
 		inputSuffix: i18n.ts._time.minute,
-  },
-  canManageAvatarDecorations: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canManageAvatarDecorations,
-  },
-  canManageCustomEmojis: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canManageCustomEmojis,
-  },
-  canSearchNotes: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canSearchNotes,
-  },
-  canUseTranslator: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canUseTranslator,
-  },
-  driveCapacityMb: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.driveCapacity,
+	},
+	canManageAvatarDecorations: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canManageAvatarDecorations,
+	},
+	canManageCustomEmojis: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canManageCustomEmojis,
+	},
+	canSearchNotes: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canSearchNotes,
+	},
+	canUseTranslator: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canUseTranslator,
+	},
+	driveCapacityMb: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.driveCapacity,
 		folderSuffix: (value) => `${value} MB`,
 		inputSuffix: 'MB',
-  },
-  maxFileSizeMb: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.maxFileSize,
+	},
+	maxFileSizeMb: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.maxFileSize,
 		folderSuffix: (value) => `${value} MB`,
 		inputSuffix: 'MB',
-  },
-  uploadableFileTypes: {
-    type: 'string',
+	},
+	uploadableFileTypes: {
+		type: 'string',
 		multiline: true,
-    folderLabel: i18n.ts._role._options.uploadableFileTypes,
+		folderLabel: i18n.ts._role._options.uploadableFileTypes,
 		folderSuffix: '...',
 		inputCaption: XUploadableFileTypesCaption,
-  },
-  alwaysMarkNsfw: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.alwaysMarkNsfw,
-  },
-  canUpdateBioMedia: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canUpdateBioMedia,
-  },
-  pinLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.pinMax,
-  },
-  antennaLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.antennaMax,
-  },
-  wordMuteLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.wordMuteMax,
+	},
+	alwaysMarkNsfw: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.alwaysMarkNsfw,
+	},
+	canUpdateBioMedia: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canUpdateBioMedia,
+	},
+	pinLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.pinMax,
+	},
+	antennaLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.antennaMax,
+	},
+	wordMuteLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.wordMuteMax,
 		inputSuffix: 'chars',
-  },
-  webhookLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.webhookMax,
-  },
-  clipLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.clipMax,
-  },
-  noteEachClipsLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.noteEachClipsMax,
-  },
-  userListLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.userListMax,
-  },
-  userEachUserListsLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.userEachUserListsMax,
-  },
-  canHideAds: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canHideAds,
-  },
-  avatarDecorationLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.avatarDecorationLimit,
+	},
+	webhookLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.webhookMax,
+	},
+	clipLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.clipMax,
+	},
+	noteEachClipsLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.noteEachClipsMax,
+	},
+	userListLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.userListMax,
+	},
+	userEachUserListsLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.userEachUserListsMax,
+	},
+	canHideAds: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canHideAds,
+	},
+	avatarDecorationLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.avatarDecorationLimit,
 		min: 0,
 		max: 16,
-  },
-  canImportAntennas: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canImportAntennas,
-  },
-  canImportBlocking: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canImportBlocking,
-  },
-  canImportFollowing: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canImportFollowing,
-  },
-  canImportMuting: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canImportMuting,
-  },
-  canImportUserLists: {
-    type: 'boolean',
-    folderLabel: i18n.ts._role._options.canImportUserLists,
-  },
-  noteDraftLimit: {
-    type: 'number',
-    folderLabel: i18n.ts._role._options.noteDraftLimit,
+	},
+	canImportAntennas: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canImportAntennas,
+	},
+	canImportBlocking: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canImportBlocking,
+	},
+	canImportFollowing: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canImportFollowing,
+	},
+	canImportMuting: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canImportMuting,
+	},
+	canImportUserLists: {
+		type: 'boolean',
+		folderLabel: i18n.ts._role._options.canImportUserLists,
+	},
+	noteDraftLimit: {
+		type: 'number',
+		folderLabel: i18n.ts._role._options.noteDraftLimit,
 		min: 0,
-  },
+	},
 } satisfies RolePolicyEditorDef;
 
 export type RolePolicyValueRecord = _RolePolicyValueRecord<typeof rolePolicyEditorDef>;

From 051ffb31971bbfbf971bf7e191dec022739df0e8 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 6 Jul 2025 17:41:01 +0900
Subject: [PATCH 04/10] fix type

---
 packages/frontend/src/pages/admin/roles.policy-editor.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.vue b/packages/frontend/src/pages/admin/roles.policy-editor.vue
index f0a0886350..961c5ff4cd 100644
--- a/packages/frontend/src/pages/admin/roles.policy-editor.vue
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.vue
@@ -72,9 +72,9 @@ const props = withDefaults(defineProps<{
 
 type RolePolicyEditorValueItem = {
 	value: GetRolePolicyEditorValuesType<typeof rolePolicyEditorDef[keyof typeof rolePolicyEditorDef]>;
-} & (
-	(UD extends true ? { useDefault: boolean } : never) &
-	(WP extends true ? { priority: 0 | 1 | 2 } : never)
+} | (
+	(UD extends true ? { useDefault: boolean } : Record<string, never>) |
+	(WP extends true ? { priority: 0 | 1 | 2 } : Record<string, never>)
 );
 
 type RolePolicyEditorValue = {

From 7f4280f9d54401108de13d325ddee39c6db8f399 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 6 Jul 2025 18:05:10 +0900
Subject: [PATCH 05/10] fix type error

---
 .../frontend/src/pages/admin/roles.policy-editor.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.vue b/packages/frontend/src/pages/admin/roles.policy-editor.vue
index 961c5ff4cd..ed18ee9675 100644
--- a/packages/frontend/src/pages/admin/roles.policy-editor.vue
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.vue
@@ -70,12 +70,16 @@ const props = withDefaults(defineProps<{
 	readonly: false,
 });
 
+type RemoveNever<T> = {
+	[P in keyof T as T[P] extends never ? never : P]: T[P];
+};
+
 type RolePolicyEditorValueItem = {
 	value: GetRolePolicyEditorValuesType<typeof rolePolicyEditorDef[keyof typeof rolePolicyEditorDef]>;
-} | (
-	(UD extends true ? { useDefault: boolean } : Record<string, never>) |
-	(WP extends true ? { priority: 0 | 1 | 2 } : Record<string, never>)
-);
+} & RemoveNever<
+	(UD extends true ? { useDefault: boolean } : { useDefault: never })
+	& (WP extends true ? { priority: 0 | 1 | 2 } : { priority: never })
+>;
 
 type RolePolicyEditorValue = {
 	[K in keyof typeof rolePolicyEditorDef]: RolePolicyEditorValueItem;

From a0a0c8a4ed81972edbc266d0f60411e327685719 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 7 Jul 2025 19:03:31 +0900
Subject: [PATCH 06/10] =?UTF-8?q?enhance:=20=E3=83=A6=E3=83=BC=E3=82=B6?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E3=83=AD=E3=83=BC=E3=83=AB=E4=B8=80=E8=A6=A7?=
 =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=81=AE=E5=A4=9A=E8=A8=80=E8=AA=9E=E5=AF=BE?=
 =?UTF-8?q?=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/admin/roles.editor.vue |   2 +-
 .../pages/admin/roles.policy-editor.def.ts    | 190 ---------------
 .../pages/admin/roles.policy-editor.form.vue  |   6 +-
 .../src/pages/admin/roles.policy-editor.vue   |  23 +-
 packages/frontend/src/pages/admin/roles.vue   |   2 +-
 .../frontend/src/pages/settings/other.vue     |  26 +-
 .../frontend/src/types/role-policy-editor.ts  |  50 ++--
 packages/frontend/src/utility/role-policy.ts  | 223 ++++++++++++++++++
 8 files changed, 284 insertions(+), 238 deletions(-)
 delete mode 100644 packages/frontend/src/pages/admin/roles.policy-editor.def.ts
 create mode 100644 packages/frontend/src/utility/role-policy.ts

diff --git a/packages/frontend/src/pages/admin/roles.editor.vue b/packages/frontend/src/pages/admin/roles.editor.vue
index 1eb794ad11..ba81a7c370 100644
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@@ -107,7 +107,7 @@ import FormSlot from '@/components/form/slot.vue';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { deepClone } from '@/utility/clone.js';
-import type { RolePolicySettingsRecord } from './roles.policy-editor.def.js';
+import type { RolePolicySettingsRecord } from '@/utility/role-policy.js';
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', v: any): void;
diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.def.ts b/packages/frontend/src/pages/admin/roles.policy-editor.def.ts
deleted file mode 100644
index 88cd69b297..0000000000
--- a/packages/frontend/src/pages/admin/roles.policy-editor.def.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { i18n } from '@/i18n.js';
-import XUploadableFileTypesCaption from './roles.policy-editor.uploadableFileTypesCaption.vue';
-import type {
-	RolePolicyEditorDef,
-	GetRolePolicyEditorValuesType,
-	RolePolicyValueRecord as _RolePolicyValueRecord,
-	RolePolicySettingsRecord as _RolePolicySettingsRecord,
-} from '@/types/role-policy-editor.js';
-
-export const rolePolicyEditorDef = {
-	rateLimitFactor: {
-		type: 'range',
-		folderLabel: i18n.ts._role._options.rateLimitFactor,
-		folderSuffix: (value) => `${Math.round(value * 100)}%`,
-		min: 0.3,
-		max: 3,
-		step: 0.1,
-		textConverter: (value) => `${Math.round(value * 100)}%`,
-		inputCaption: i18n.ts._role._options.descriptionOfRateLimitFactor,
-	},
-	gtlAvailable: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.gtlAvailable,
-	},
-	ltlAvailable: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.ltlAvailable,
-	},
-	canPublicNote: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canPublicNote,
-	},
-	chatAvailability: {
-		type: 'enum',
-		folderLabel: i18n.ts._role._options.chatAvailability,
-		enum: [
-			{ label: i18n.ts.enabled, value: 'available' },
-			{ label: i18n.ts.readonly, value: 'readonly' },
-			{ label: i18n.ts.disabled, value: 'unavailable' },
-		],
-	},
-	mentionLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.mentionMax,
-	},
-	canInvite: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canInvite,
-	},
-	inviteLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.inviteLimit,
-	},
-	inviteLimitCycle: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.inviteLimitCycle,
-		folderSuffix: (value) => `${value} ${i18n.ts._time.minute}`,
-		inputSuffix: i18n.ts._time.minute,
-	},
-	inviteExpirationTime: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.inviteExpirationTime,
-		folderSuffix: (value) => `${value} ${i18n.ts._time.minute}`,
-		inputSuffix: i18n.ts._time.minute,
-	},
-	canManageAvatarDecorations: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canManageAvatarDecorations,
-	},
-	canManageCustomEmojis: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canManageCustomEmojis,
-	},
-	canSearchNotes: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canSearchNotes,
-	},
-	canUseTranslator: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canUseTranslator,
-	},
-	driveCapacityMb: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.driveCapacity,
-		folderSuffix: (value) => `${value} MB`,
-		inputSuffix: 'MB',
-	},
-	maxFileSizeMb: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.maxFileSize,
-		folderSuffix: (value) => `${value} MB`,
-		inputSuffix: 'MB',
-	},
-	uploadableFileTypes: {
-		type: 'string',
-		multiline: true,
-		folderLabel: i18n.ts._role._options.uploadableFileTypes,
-		folderSuffix: '...',
-		inputCaption: XUploadableFileTypesCaption,
-	},
-	alwaysMarkNsfw: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.alwaysMarkNsfw,
-	},
-	canUpdateBioMedia: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canUpdateBioMedia,
-	},
-	pinLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.pinMax,
-	},
-	antennaLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.antennaMax,
-	},
-	wordMuteLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.wordMuteMax,
-		inputSuffix: 'chars',
-	},
-	webhookLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.webhookMax,
-	},
-	clipLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.clipMax,
-	},
-	noteEachClipsLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.noteEachClipsMax,
-	},
-	userListLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.userListMax,
-	},
-	userEachUserListsLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.userEachUserListsMax,
-	},
-	canHideAds: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canHideAds,
-	},
-	avatarDecorationLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.avatarDecorationLimit,
-		min: 0,
-		max: 16,
-	},
-	canImportAntennas: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canImportAntennas,
-	},
-	canImportBlocking: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canImportBlocking,
-	},
-	canImportFollowing: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canImportFollowing,
-	},
-	canImportMuting: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canImportMuting,
-	},
-	canImportUserLists: {
-		type: 'boolean',
-		folderLabel: i18n.ts._role._options.canImportUserLists,
-	},
-	noteDraftLimit: {
-		type: 'number',
-		folderLabel: i18n.ts._role._options.noteDraftLimit,
-		min: 0,
-	},
-} satisfies RolePolicyEditorDef;
-
-export type RolePolicyValueRecord = _RolePolicyValueRecord<typeof rolePolicyEditorDef>;
-
-export type RolePolicySettingsRecord = _RolePolicySettingsRecord<typeof rolePolicyEditorDef>;
-
-export type RolePolicyRecord = {
-	[K in keyof typeof rolePolicyEditorDef]: GetRolePolicyEditorValuesType<typeof rolePolicyEditorDef[K]>;
-};
diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.form.vue b/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
index 3686034e2e..b52377f4ea 100644
--- a/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
@@ -90,8 +90,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </MkSwitch>
 </template>
 
-<script lang="ts" setup generic="D extends RolePolicyEditorItem">
-import type { RolePolicyEditorItem, GetRolePolicyEditorValuesType } from '@/types/role-policy-editor.js';
+<script lang="ts" setup generic="D extends RolePolicyDefItem">
+import type { RolePolicyDefItem, GetRolePolicyEditorValuesType } from '@/types/role-policy-editor.js';
 import { i18n } from '@/i18n.js';
 
 import MkInput from '@/components/MkInput.vue';
@@ -108,7 +108,7 @@ const props = defineProps<{
 
 const model = defineModel<GetRolePolicyEditorValuesType<D>>({ required: true });
 
-function assertModelType<T extends RolePolicyEditorItem['type']>(m: unknown, type: T): m is GetRolePolicyEditorValuesType<Extract<RolePolicyEditorItem, { type: T }>> {
+function assertModelType<T extends RolePolicyDefItem['type']>(m: unknown, type: T): m is GetRolePolicyEditorValuesType<Extract<RolePolicyDefItem, { type: T }>> {
   return props.def.type === type;
 }
 </script>
diff --git a/packages/frontend/src/pages/admin/roles.policy-editor.vue b/packages/frontend/src/pages/admin/roles.policy-editor.vue
index ed18ee9675..37175bf163 100644
--- a/packages/frontend/src/pages/admin/roles.policy-editor.vue
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.vue
@@ -10,13 +10,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</MkInput>
 
 	<MkFolder v-for="(def, key) in filteredDefs" :key="key">
-		<template #label>{{ def.folderLabel }}</template>
+		<template #label>{{ def.displayLabel }}</template>
 		<template #suffix>
 			<span v-if="withUseDefault && model[key].useDefault">{{ i18n.ts._role.useBaseValue }}</span>
-			<span v-else-if="'folderSuffix' in def">{{ typeof def.folderSuffix === 'string' ? def.folderSuffix : (def as RolePolicyEditorItemBaseFolderSuffixGetter).folderSuffix(model[key].value) }}</span>
-			<span v-else-if="def.type === 'boolean'">{{ model[key].value === true ? i18n.ts.yes : i18n.ts.no }}</span>
-			<span v-else-if="def.type === 'enum'">{{ def.enum.find((v) => v.value === model[key].value)?.label ?? model[key].value }}</span>
-			<span v-else>{{ model[key].value }}</span>
+			<span v-else>{{ getPolicyDisplayValue(def, model[key].value) }}</span>
 			<span v-if="withPriority" :class="$style.priorityIndicator"><i :class="getPriorityIcon(model[key].priority)"></i></span>
 		</template>
 
@@ -57,8 +54,8 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkRange from '@/components/MkRange.vue';
 import XForm from './roles.policy-editor.form.vue';
-import { rolePolicyEditorDef } from './roles.policy-editor.def.js';
-import type { GetRolePolicyEditorValuesType, RolePolicyEditorDef, RolePolicyEditorItemBaseFolderSuffixGetter } from '@/types/role-policy-editor.js';
+import { rolePolicyDef, getPolicyDisplayValue } from '@/utility/role-policy.js';
+import type { GetRolePolicyEditorValuesType, RolePolicyDefItem } from '@/types/role-policy-editor.js';
 
 const props = withDefaults(defineProps<{
 	withUseDefault: UD;
@@ -75,14 +72,14 @@ type RemoveNever<T> = {
 };
 
 type RolePolicyEditorValueItem = {
-	value: GetRolePolicyEditorValuesType<typeof rolePolicyEditorDef[keyof typeof rolePolicyEditorDef]>;
+	value: GetRolePolicyEditorValuesType<typeof rolePolicyDef[keyof typeof rolePolicyDef]>;
 } & RemoveNever<
 	(UD extends true ? { useDefault: boolean } : { useDefault: never })
 	& (WP extends true ? { priority: 0 | 1 | 2 } : { priority: never })
 >;
 
 type RolePolicyEditorValue = {
-	[K in keyof typeof rolePolicyEditorDef]: RolePolicyEditorValueItem;
+	[K in keyof typeof rolePolicyDef]: RolePolicyEditorValueItem;
 };
 
 const model = defineModel<RolePolicyEditorValue>({ required: true });
@@ -95,15 +92,15 @@ function matchQuery(keywords: string[]) {
 }
 
 const filteredDefs = computed(() => {
-	if (!props.withSearchBar) return rolePolicyEditorDef;
+	if (!props.withSearchBar) return rolePolicyDef;
 
 	return Object.fromEntries(
-		Object.entries(rolePolicyEditorDef as RolePolicyEditorDef).filter(([key, def]) => {
+		Object.entries(rolePolicyDef).filter(([key, def]) => {
 			if (searchQuery.value.trim().length === 0) return true;
 			const matchTerms = [
 				key,
-				def.folderLabel,
-				...(def.searchTerms ?? []),
+				def.displayLabel,
+				...((def as RolePolicyDefItem).searchTerms ? (def as RolePolicyDefItem).searchTerms ?? [] : []),
 			];
 			return matchQuery(matchTerms);
 		}),
diff --git a/packages/frontend/src/pages/admin/roles.vue b/packages/frontend/src/pages/admin/roles.vue
index 01b4a651fd..01e0e160f2 100644
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import type { RolePolicyRecord, RolePolicyValueRecord } from './roles.policy-editor.def.js';
+import type { RolePolicyRecord, RolePolicyValueRecord } from '@/utility/role-policy.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import XPolicyEditor from './roles.policy-editor.vue';
diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index ac432e9f32..c57e4fe629 100644
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -39,9 +39,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<template #label><SearchLabel>{{ i18n.ts._role.policies }}</SearchLabel></template>
 
 								<div class="_gaps_s">
-									<div v-for="policy in Object.keys($i.policies)" :key="policy">
-										{{ policy }} ... {{ $i.policies[policy] }}
-									</div>
+									<MkKeyValue v-for="(value, pKey) in policiesKv" :key="pKey">
+										<template #key>{{ value.label }}</template>
+										<template #value>{{ value.value }}</template>
+									</MkKeyValue>
 								</div>
 							</MkFolder>
 						</SearchMarker>
@@ -151,16 +152,15 @@ import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSlot from '@/components/form/slot.vue';
 import * as os from '@/os.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
 import { ensureSignin } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { reloadAsk } from '@/utility/reload-ask.js';
-import FormSection from '@/components/form/section.vue';
 import { prefer } from '@/preferences.js';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import { signout } from '@/signout.js';
 import { migrateOldSettings } from '@/pref-migrate.js';
+import { rolePolicyDef, getPolicyDisplayValue } from '@/utility/role-policy.js';
 import { hideAllTips as _hideAllTips, resetAllTips as _resetAllTips } from '@/tips.js';
 
 const $i = ensureSignin();
@@ -172,6 +172,22 @@ const devMode = prefer.model('devMode');
 const stackingRouterView = prefer.model('experimental.stackingRouterView');
 const enableFolderPageView = prefer.model('experimental.enableFolderPageView');
 
+const policiesKv = computed(() => {
+	return Object.fromEntries(
+		Object.entries($i.policies).map(([key, def]) => {
+			const _key = key as keyof typeof $i.policies | keyof typeof rolePolicyDef;
+			const value = getPolicyDisplayValue(rolePolicyDef[_key], def, true);
+			return [_key, {
+				label: rolePolicyDef[_key]?.displayLabel ?? _key,
+				value,
+			}];
+		}),
+	) as Record<keyof typeof $i.policies, {
+		label: string;
+		value: string;
+	}>;
+});
+
 watch(skipNoteRender, async () => {
 	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
 });
diff --git a/packages/frontend/src/types/role-policy-editor.ts b/packages/frontend/src/types/role-policy-editor.ts
index 77ea6d3080..4c753a3527 100644
--- a/packages/frontend/src/types/role-policy-editor.ts
+++ b/packages/frontend/src/types/role-policy-editor.ts
@@ -5,24 +5,24 @@
 import type { Component } from 'vue';
 import type { ROLE_POLICIES } from '@@/js/const.js';
 
-interface RolePolicyEditorItemBase<T = unknown> {
+interface RolePolicyDefItemBase<T extends unknown = any> {
 	searchTerms?: string[];
 	type: string;
-	folderLabel: string;
-	folderSuffix?: string | ((value: T) => string);
+	displayLabel: string;
+	displayValue?: string | ((value: T, full?: boolean) => string);
 	inputLabel?: string;
 	inputCaption?: string | Component;
 }
 
-export type RolePolicyEditorItemBaseFolderSuffixGetter = {
-	folderSuffix: (value: boolean | number | string) => string;
+export type RolePolicyDefItemBaseDisplayValueGetter = {
+	displayValue: (value: boolean | number | string, full?: boolean) => string;
 };
 
-interface RolePolicyEditorItemBoolean extends RolePolicyEditorItemBase<boolean> {
+interface RolePolicyDefItemBoolean extends RolePolicyDefItemBase<boolean> {
 	type: 'boolean';
 }
 
-interface RolePolicyEditorItemNumber extends RolePolicyEditorItemBase<number> {
+interface RolePolicyDefItemNumber extends RolePolicyDefItemBase<number> {
 	type: 'number';
 	min?: number;
 	max?: number;
@@ -30,7 +30,7 @@ interface RolePolicyEditorItemNumber extends RolePolicyEditorItemBase<number> {
 	inputSuffix?: string;
 }
 
-interface RolePolicyEditorItemRange extends RolePolicyEditorItemBase<number> {
+interface RolePolicyDefItemRange extends RolePolicyDefItemBase<number> {
 	type: 'range';
 	min: number;
 	max: number;
@@ -40,12 +40,12 @@ interface RolePolicyEditorItemRange extends RolePolicyEditorItemBase<number> {
 	inputSuffix?: string;
 }
 
-interface RolePolicyEditorItemString extends RolePolicyEditorItemBase<string> {
+interface RolePolicyDefItemString extends RolePolicyDefItemBase<string> {
 	type: 'string';
 	multiline?: boolean;
 }
 
-interface RolePolicyEditorItemEnum extends RolePolicyEditorItemBase<string> {
+interface RolePolicyDefItemEnum extends RolePolicyDefItemBase<string> {
 	type: 'enum';
 	enum: {
 		label: string;
@@ -53,30 +53,30 @@ interface RolePolicyEditorItemEnum extends RolePolicyEditorItemBase<string> {
 	}[];
 }
 
-export type RolePolicyEditorItem =
-	RolePolicyEditorItemBoolean |
-	RolePolicyEditorItemNumber |
-	RolePolicyEditorItemRange |
-	RolePolicyEditorItemString |
-	RolePolicyEditorItemEnum;
+export type RolePolicyDefItem =
+	RolePolicyDefItemBoolean |
+	RolePolicyDefItemNumber |
+	RolePolicyDefItemRange |
+	RolePolicyDefItemString |
+	RolePolicyDefItemEnum;
 
-export type RolePolicyEditorDef = Record<typeof ROLE_POLICIES[number], RolePolicyEditorItem>;
+export type RolePolicyDef = Record<typeof ROLE_POLICIES[number], RolePolicyDefItem>;
 
-export type GetRolePolicyEditorValuesType<T extends RolePolicyEditorItem> =
-	T extends RolePolicyEditorItemBoolean ? boolean :
-	T extends RolePolicyEditorItemNumber ? number :
-	T extends RolePolicyEditorItemRange ? number :
-	T extends RolePolicyEditorItemString ? string :
-	T extends RolePolicyEditorItemEnum ? T['enum'][number]['value'] :
+export type GetRolePolicyEditorValuesType<T extends RolePolicyDefItem> =
+	T extends RolePolicyDefItemBoolean ? boolean :
+	T extends RolePolicyDefItemNumber ? number :
+	T extends RolePolicyDefItemRange ? number :
+	T extends RolePolicyDefItemString ? string :
+	T extends RolePolicyDefItemEnum ? T['enum'][number]['value'] :
 	never;
 
-export type RolePolicyValueRecord<T extends Record<string, RolePolicyEditorItem>> = {
+export type RolePolicyValueRecord<T extends Record<string, RolePolicyDefItem>> = {
 	[K in keyof T]: {
 		value: GetRolePolicyEditorValuesType<T[K]>;
 	};
 };
 
-export type RolePolicySettingsRecord<T extends Record<string, RolePolicyEditorItem>> = {
+export type RolePolicySettingsRecord<T extends Record<string, RolePolicyDefItem>> = {
 	[K in keyof T]: {
 		value: GetRolePolicyEditorValuesType<T[K]>;
 		useDefault: boolean;
diff --git a/packages/frontend/src/utility/role-policy.ts b/packages/frontend/src/utility/role-policy.ts
new file mode 100644
index 0000000000..8484feccf8
--- /dev/null
+++ b/packages/frontend/src/utility/role-policy.ts
@@ -0,0 +1,223 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineAsyncComponent } from 'vue';
+import { i18n } from '@/i18n.js';
+import type {
+	RolePolicyDef,
+	GetRolePolicyEditorValuesType,
+	RolePolicyValueRecord as _RolePolicyValueRecord,
+	RolePolicySettingsRecord as _RolePolicySettingsRecord,
+} from '@/types/role-policy-editor.js';
+
+export const rolePolicyDef = {
+	rateLimitFactor: {
+		type: 'range',
+		displayLabel: i18n.ts._role._options.rateLimitFactor,
+		displayValue: (value) => `${Math.round(value * 100)}%`,
+		min: 0.3,
+		max: 3,
+		step: 0.1,
+		textConverter: (value) => `${Math.round(value * 100)}%`,
+		inputCaption: i18n.ts._role._options.descriptionOfRateLimitFactor,
+	},
+	gtlAvailable: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.gtlAvailable,
+	},
+	ltlAvailable: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.ltlAvailable,
+	},
+	canPublicNote: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canPublicNote,
+	},
+	chatAvailability: {
+		type: 'enum',
+		displayLabel: i18n.ts._role._options.chatAvailability,
+		enum: [
+			{ label: i18n.ts.enabled, value: 'available' as const },
+			{ label: i18n.ts.readonly, value: 'readonly' as const },
+			{ label: i18n.ts.disabled, value: 'unavailable' as const },
+		],
+	},
+	mentionLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.mentionMax,
+	},
+	canInvite: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canInvite,
+	},
+	inviteLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.inviteLimit,
+	},
+	inviteLimitCycle: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.inviteLimitCycle,
+		displayValue: (value) => `${value} ${i18n.ts._time.minute}`,
+		inputSuffix: i18n.ts._time.minute,
+	},
+	inviteExpirationTime: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.inviteExpirationTime,
+		displayValue: (value) => `${value} ${i18n.ts._time.minute}`,
+		inputSuffix: i18n.ts._time.minute,
+	},
+	canManageAvatarDecorations: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canManageAvatarDecorations,
+	},
+	canManageCustomEmojis: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canManageCustomEmojis,
+	},
+	canSearchNotes: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canSearchNotes,
+	},
+	canUseTranslator: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canUseTranslator,
+	},
+	driveCapacityMb: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.driveCapacity,
+		displayValue: (value) => `${value} MB`,
+		inputSuffix: 'MB',
+	},
+	maxFileSizeMb: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.maxFileSize,
+		displayValue: (value) => `${value} MB`,
+		inputSuffix: 'MB',
+	},
+	uploadableFileTypes: {
+		type: 'string',
+		multiline: true,
+		displayLabel: i18n.ts._role._options.uploadableFileTypes,
+		displayValue: (value, full) => full === true ? Array.isArray(value) ? value.join(', ') : value : '...',
+		inputCaption: defineAsyncComponent(() => import('@/pages/admin/roles.policy-editor.uploadableFileTypesCaption.vue')),
+	},
+	alwaysMarkNsfw: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.alwaysMarkNsfw,
+	},
+	canUpdateBioMedia: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canUpdateBioMedia,
+	},
+	pinLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.pinMax,
+	},
+	antennaLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.antennaMax,
+	},
+	wordMuteLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.wordMuteMax,
+		inputSuffix: 'chars',
+	},
+	webhookLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.webhookMax,
+	},
+	clipLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.clipMax,
+	},
+	noteEachClipsLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.noteEachClipsMax,
+	},
+	userListLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.userListMax,
+	},
+	userEachUserListsLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.userEachUserListsMax,
+	},
+	canHideAds: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canHideAds,
+	},
+	avatarDecorationLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.avatarDecorationLimit,
+		min: 0,
+		max: 16,
+	},
+	canImportAntennas: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canImportAntennas,
+	},
+	canImportBlocking: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canImportBlocking,
+	},
+	canImportFollowing: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canImportFollowing,
+	},
+	canImportMuting: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canImportMuting,
+	},
+	canImportUserLists: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canImportUserLists,
+	},
+	noteDraftLimit: {
+		type: 'number',
+		displayLabel: i18n.ts._role._options.noteDraftLimit,
+		min: 0,
+	},
+} satisfies RolePolicyDef;
+
+export type RolePolicyValueRecord = _RolePolicyValueRecord<typeof rolePolicyDef>;
+
+export type RolePolicySettingsRecord = _RolePolicySettingsRecord<typeof rolePolicyDef>;
+
+export type RolePolicyRecord = {
+	[K in keyof typeof rolePolicyDef]: GetRolePolicyEditorValuesType<typeof rolePolicyDef[K]>;
+};
+
+type RolePolicyDefDef = typeof rolePolicyDef[keyof typeof rolePolicyDef];
+
+export function getPolicyDisplayValue<D extends RolePolicyDefDef, T = GetRolePolicyEditorValuesType<D>>(
+	policyDef: D,
+	value: T,
+	full = false,
+): string {
+	if ('displayValue' in policyDef && policyDef.displayValue != null) {
+		if (typeof policyDef.displayValue === 'string') {
+			return policyDef.displayValue;
+		} else {
+			return policyDef.displayValue(value as never, full);
+		}
+	}
+
+	if (policyDef.type === 'enum') {
+		const enumItem = policyDef.enum.find(item => item.value === value);
+		if (enumItem) {
+			return enumItem.label;
+		} else {
+			return value as string;
+		}
+	} else if (policyDef.type === 'boolean') {
+		return value ? i18n.ts.yes : i18n.ts.no;
+	} else if (typeof value === 'number') {
+		return value.toString();
+	} else if (typeof value === 'string') {
+		return value;
+	} else {
+		return i18n.ts.unknown;
+	}
+}

From 75ad704bb668fdf7c8b419f9c36d6fea05a449da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 8 Jul 2025 15:50:05 +0900
Subject: [PATCH 07/10] Update role-policy-editor.ts

---
 packages/frontend/src/types/role-policy-editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/types/role-policy-editor.ts b/packages/frontend/src/types/role-policy-editor.ts
index 4c753a3527..08dcb4cc60 100644
--- a/packages/frontend/src/types/role-policy-editor.ts
+++ b/packages/frontend/src/types/role-policy-editor.ts
@@ -5,7 +5,7 @@
 import type { Component } from 'vue';
 import type { ROLE_POLICIES } from '@@/js/const.js';
 
-interface RolePolicyDefItemBase<T extends unknown = any> {
+interface RolePolicyDefItemBase<T = any> {
 	searchTerms?: string[];
 	type: string;
 	displayLabel: string;

From e6bce4dcf14cb7c3f450b3aca5114ddf7ecba7bb Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 2 Aug 2025 14:37:27 +0900
Subject: [PATCH 08/10] fix

---
 packages/frontend/src/utility/role-policy.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/frontend/src/utility/role-policy.ts b/packages/frontend/src/utility/role-policy.ts
index 8484feccf8..2a0a692aaa 100644
--- a/packages/frontend/src/utility/role-policy.ts
+++ b/packages/frontend/src/utility/role-policy.ts
@@ -179,6 +179,10 @@ export const rolePolicyDef = {
 		displayLabel: i18n.ts._role._options.noteDraftLimit,
 		min: 0,
 	},
+	watermarkAvailable: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.watermarkAvailable,
+	},
 } satisfies RolePolicyDef;
 
 export type RolePolicyValueRecord = _RolePolicyValueRecord<typeof rolePolicyDef>;

From 3f8d706c6ea3e0ce95c2017ca7261f5bf65fbe46 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 2 Aug 2025 14:38:40 +0900
Subject: [PATCH 09/10] remove unnecessary type

---
 packages/frontend/src/types/role-policy-editor.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/frontend/src/types/role-policy-editor.ts b/packages/frontend/src/types/role-policy-editor.ts
index 08dcb4cc60..f328f386a2 100644
--- a/packages/frontend/src/types/role-policy-editor.ts
+++ b/packages/frontend/src/types/role-policy-editor.ts
@@ -14,10 +14,6 @@ interface RolePolicyDefItemBase<T = any> {
 	inputCaption?: string | Component;
 }
 
-export type RolePolicyDefItemBaseDisplayValueGetter = {
-	displayValue: (value: boolean | number | string, full?: boolean) => string;
-};
-
 interface RolePolicyDefItemBoolean extends RolePolicyDefItemBase<boolean> {
 	type: 'boolean';
 }

From 5501c8dea26e6d22f6b3629c12db13556fc5f18d Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 2 Aug 2025 14:40:54 +0900
Subject: [PATCH 10/10] fix

---
 packages/frontend/src/pages/settings/other.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index ad3bc3c700..944862f5e6 100644
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -155,7 +155,6 @@ import * as os from '@/os.js';
 import { ensureSignin } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
-import { reloadAsk } from '@/utility/reload-ask.js';
 import FormSection from '@/components/form/section.vue';
 import { prefer } from '@/preferences.js';
 import MkRolePreview from '@/components/MkRolePreview.vue';