fix(frontend): 二段階認証の設定ダイアログはbotWarnよりも上に表示するように

packages/frontend/src/components/MkModal.vue

@@ -68,7 +68,7 @@ const props = withDefaults(defineProps<{
 	anchor?: { x: string; y: string; };
 	src?: HTMLElement | null;
 	preferType?: ModalTypes | 'auto';
-	zPriority?: 'low' | 'middle' | 'high';
+	zPriority?: os.ZPriority;
 	noOverlap?: boolean;
 	transparentBg?: boolean;
 	hasInteractionWithOtherFocusTrappedEls?: boolean;

packages/frontend/src/components/MkModalWindow.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
+<MkModal ref="modal" :preferType="'dialog'" :zPriority="zPriority" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
 	<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }">
 		<div ref="headerEl" :class="$style.header">
 			<button v-if="withOkButton && withCloseButton" :class="$style.headerButton" class="_button" @click="emit('close')"><i class="ti ti-x"></i></button>
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, shallowRef, ref } from 'vue';
+import type { ZPriority } from '@/os.js';
 import MkModal from './MkModal.vue';
 
 const props = withDefaults(defineProps<{
@@ -31,12 +32,14 @@ const props = withDefaults(defineProps<{
 	okButtonDisabled: boolean;
 	width: number;
 	height: number;
+	zPriority: ZPriority;
 }>(), {
 	withOkButton: false,
 	withCloseButton: true,
 	okButtonDisabled: false,
 	width: 400,
 	height: 500,
+	zPriority: 'low',
 });
 
 const emit = defineEmits<{

packages/frontend/src/os.ts

@@ -144,8 +144,14 @@ const zIndexes = {
 	low: 1000000,
 	middle: 2000000,
 	high: 3000000,
+
+	/** botアカウントインジケータよりも上に表示させる必要があるもの専用 */
+	veryHigh: 4000000,
 };
-export function claimZIndex(priority: keyof typeof zIndexes = 'low'): number {
+
+export type ZPriority = keyof typeof zIndexes;
+
+export function claimZIndex(priority: ZPriority = 'low'): number {
 	zIndexes[priority] += 100;
 	return zIndexes[priority];
 }

packages/frontend/src/pages/settings/2fa.qrdialog.vue

@@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="dialog"
 	:width="500"
 	:height="550"
+	:zPriority="'veryHigh'"
 	@close="cancel"
 	@closed="emit('closed')"
 >

packages/frontend/src/ui/_common_/common.vue

@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
 
-<div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
+<div v-if="$i && $i.isBot" id="botWarn" :style="{ zIndex: botWarnZIndex }"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
 </template>
 
 <script lang="ts" setup>
@@ -53,6 +53,7 @@ import { popups } from '@/os.js';
 import { pendingApiRequestsCount } from '@/scripts/misskey-api.js';
 import { uploads } from '@/scripts/upload.js';
 import * as sound from '@/scripts/sound.js';
+import * as os from '@/os.js';
 import { $i } from '@/account.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
@@ -64,6 +65,8 @@ const XUpload = defineAsyncComponent(() => import('./upload.vue'));
 
 const dev = _DEV_;
 
+const botWarnZIndex = ref(os.claimZIndex('veryHigh'));
+
 const notifications = ref<Misskey.entities.Notification[]>([]);
 
 function onNotification(notification: Misskey.entities.Notification, isClient = false) {
@@ -251,7 +254,6 @@ if ($i) {
 	width: 100%;
 	height: max-content;
 	text-align: center;
-	z-index: 2147483647;
 	color: #ff0;
 	background: rgba(0, 0, 0, 0.5);
 	padding: 4px 7px;