diff --git a/packages/frontend/src/pages/admin/roles.editor.vue b/packages/frontend/src/pages/admin/roles.editor.vue
index bb96a1cde1..ba81a7c370 100644
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@@ -79,768 +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.canSearchUsers, 'canSearchUsers'])">
-				<template #label>{{ i18n.ts._role._options.canSearchUsers }}</template>
-				<template #suffix>
-					<span v-if="role.policies.canSearchUsers.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canSearchUsers.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canSearchUsers)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canSearchUsers.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.canSearchUsers.value" :disabled="role.policies.canSearchUsers.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canSearchUsers.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>
-
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.watermarkAvailable, 'watermarkAvailable'])">
-				<template #label>{{ i18n.ts._role._options.watermarkAvailable }}</template>
-				<template #suffix>
-					<span v-if="role.policies.watermarkAvailable.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.watermarkAvailable.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.watermarkAvailable)"></i></span>
-				</template>
-				<div class="_gaps">
-					<MkSwitch v-model="role.policies.watermarkAvailable.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="role.policies.watermarkAvailable.value" :disabled="role.policies.watermarkAvailable.useDefault" :readonly="readonly">
-						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.watermarkAvailable.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 '@/utility/role-policy.js';
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', v: any): void;
@@ -851,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',
@@ -880,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.form.vue b/packages/frontend/src/pages/admin/roles.policy-editor.form.vue
new file mode 100644
index 0000000000..b52377f4ea
--- /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 :is="def.inputCaption" v-else />
+	</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 :is="def.inputCaption" v-else />
+	</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 :is="def.inputCaption" v-else />
+	</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 :is="def.inputCaption" v-else />
+	</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 :is="def.inputCaption" v-else />
+	</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 :is="def.inputCaption" v-else />
+	</template>
+</MkSwitch>
+</template>
+
+<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';
+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 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.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..37175bf163
--- /dev/null
+++ b/packages/frontend/src/pages/admin/roles.policy-editor.vue
@@ -0,0 +1,125 @@
+<!--
+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.displayLabel }}</template>
+		<template #suffix>
+			<span v-if="withUseDefault && model[key].useDefault">{{ i18n.ts._role.useBaseValue }}</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>
+
+		<div class="_gaps">
+			<MkSwitch v-if="withUseDefault" v-model="model[key].useDefault" :disabled="readonly">
+				<template #label>{{ i18n.ts._role.useBaseValue }}</template>
+			</MkSwitch>
+
+			<XForm
+				v-model="model[key].value"
+				:def="def"
+				: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 { rolePolicyDef, getPolicyDisplayValue } from '@/utility/role-policy.js';
+import type { GetRolePolicyEditorValuesType, RolePolicyDefItem } from '@/types/role-policy-editor.js';
+
+const props = withDefaults(defineProps<{
+	withUseDefault: UD;
+	withPriority: WP;
+	withSearchBar?: boolean;
+	readonly?: boolean;
+}>(), {
+	withSearchBar: true,
+	readonly: false,
+});
+
+type RemoveNever<T> = {
+	[P in keyof T as T[P] extends never ? never : P]: T[P];
+};
+
+type RolePolicyEditorValueItem = {
+	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 rolePolicyDef]: 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 rolePolicyDef;
+
+	return Object.fromEntries(
+		Object.entries(rolePolicyDef).filter(([key, def]) => {
+			if (searchQuery.value.trim().length === 0) return true;
+			const matchTerms = [
+				key,
+				def.displayLabel,
+				...((def as RolePolicyDefItem).searchTerms ? (def as RolePolicyDefItem).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 efdf8620ef..01e0e160f2 100644
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -12,302 +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.canSearchUsers, 'canSearchUsers'])">
-						<template #label>{{ i18n.ts._role._options.canSearchUsers }}</template>
-						<template #suffix>{{ policies.canSearchUsers ? i18n.ts.yes : i18n.ts.no }}</template>
-						<MkSwitch v-model="policies.canSearchUsers">
-							<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>
-
-					<MkFolder v-if="matchQuery([i18n.ts._role._options.watermarkAvailable, 'watermarkAvailable'])">
-						<template #label>{{ i18n.ts._role._options.watermarkAvailable }}</template>
-						<template #suffix>{{ policies.watermarkAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
-						<MkSwitch v-model="policies.watermarkAvailable">
-							<template #label>{{ i18n.ts.enable }}</template>
-						</MkSwitch>
-					</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">
@@ -330,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 '@/utility/role-policy.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';
@@ -346,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/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index 730cce183a..91f75391b4 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>
@@ -156,7 +157,6 @@ 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';
@@ -165,6 +165,7 @@ 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';
 import { suggestReload } from '@/utility/reload-suggest.js';
 
@@ -178,6 +179,22 @@ const stackingRouterView = prefer.model('experimental.stackingRouterView');
 const enableFolderPageView = prefer.model('experimental.enableFolderPageView');
 const enableHapticFeedback = prefer.model('experimental.enableHapticFeedback');
 
+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, () => {
 	suggestReload();
 });
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..f328f386a2
--- /dev/null
+++ b/packages/frontend/src/types/role-policy-editor.ts
@@ -0,0 +1,81 @@
+/*
+ * 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 RolePolicyDefItemBase<T = any> {
+	searchTerms?: string[];
+	type: string;
+	displayLabel: string;
+	displayValue?: string | ((value: T, full?: boolean) => string);
+	inputLabel?: string;
+	inputCaption?: string | Component;
+}
+
+interface RolePolicyDefItemBoolean extends RolePolicyDefItemBase<boolean> {
+	type: 'boolean';
+}
+
+interface RolePolicyDefItemNumber extends RolePolicyDefItemBase<number> {
+	type: 'number';
+	min?: number;
+	max?: number;
+	inputPrefix?: string;
+	inputSuffix?: string;
+}
+
+interface RolePolicyDefItemRange extends RolePolicyDefItemBase<number> {
+	type: 'range';
+	min: number;
+	max: number;
+	step?: number;
+	textConverter?: (value: number) => string;
+	inputPrefix?: string;
+	inputSuffix?: string;
+}
+
+interface RolePolicyDefItemString extends RolePolicyDefItemBase<string> {
+	type: 'string';
+	multiline?: boolean;
+}
+
+interface RolePolicyDefItemEnum extends RolePolicyDefItemBase<string> {
+	type: 'enum';
+	enum: {
+		label: string;
+		value: string;
+	}[];
+}
+
+export type RolePolicyDefItem =
+	RolePolicyDefItemBoolean |
+	RolePolicyDefItemNumber |
+	RolePolicyDefItemRange |
+	RolePolicyDefItemString |
+	RolePolicyDefItemEnum;
+
+export type RolePolicyDef = Record<typeof ROLE_POLICIES[number], RolePolicyDefItem>;
+
+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, RolePolicyDefItem>> = {
+	[K in keyof T]: {
+		value: GetRolePolicyEditorValuesType<T[K]>;
+	};
+};
+
+export type RolePolicySettingsRecord<T extends Record<string, RolePolicyDefItem>> = {
+	[K in keyof T]: {
+		value: GetRolePolicyEditorValuesType<T[K]>;
+		useDefault: boolean;
+		priority: 0 | 1 | 2;
+	};
+};
diff --git a/packages/frontend/src/utility/role-policy.ts b/packages/frontend/src/utility/role-policy.ts
new file mode 100644
index 0000000000..47db1ab7ec
--- /dev/null
+++ b/packages/frontend/src/utility/role-policy.ts
@@ -0,0 +1,231 @@
+/*
+ * 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,
+	},
+	canSearchUsers: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.canSearchUsers,
+	},
+	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,
+	},
+	watermarkAvailable: {
+		type: 'boolean',
+		displayLabel: i18n.ts._role._options.watermarkAvailable,
+	},
+} 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;
+	}
+}