From 7fec78b70e35e33cab3bf2b8224facc9c62ebff4 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 31 May 2026 13:22:54 +0900
Subject: [PATCH] wip

---
 .../frontend/src/pages/rooms/OverlayPanel.vue | 107 ++++++++++++++++++
 .../frontend/src/pages/rooms/room.core.vue    |  57 ++++------
 2 files changed, 126 insertions(+), 38 deletions(-)
 create mode 100644 packages/frontend/src/pages/rooms/OverlayPanel.vue

diff --git a/packages/frontend/src/pages/rooms/OverlayPanel.vue b/packages/frontend/src/pages/rooms/OverlayPanel.vue
new file mode 100644
index 0000000000..c8331e2d48
--- /dev/null
+++ b/packages/frontend/src/pages/rooms/OverlayPanel.vue
@@ -0,0 +1,107 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="[$style.root, { [$style.isMobile]: isMobile, [$style.isDesktop]: !isMobile }]">
+	<MkStickyContainer>
+		<template #header>
+			<div :class="$style.header">
+				<span :class="$style.icon">
+					<slot name="icon"></slot>
+				</span>
+
+				<span :class="$style.title">
+					<MkCondensedLine :minScale="0.5">{{ title }}</MkCondensedLine>
+				</span>
+
+				<button class="_button" :class="$style.close" @click="emit('close')">
+					<i class="ti ti-x"></i>
+				</button>
+			</div>
+		</template>
+
+		<div :class="$style.body">
+			<slot></slot>
+		</div>
+	</MkStickyContainer>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
+
+const isMobile = true;
+
+const props = defineProps<{
+	title: string;
+	acrylic?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'close'): void;
+}>();
+
+</script>
+
+<style lang="scss" module>
+.root.isDesktop {
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	z-index: 1;
+	width: 300px;
+	max-height: calc(100% - 16px - 16px);
+	box-sizing: border-box;
+	overflow: auto;
+	border-radius: 12px;
+	background: var(--MI_THEME-panel);
+}
+
+.root.isMobile {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+	width: 100%;
+	height: min(50%, 400px);
+	box-sizing: border-box;
+	overflow: auto;
+	border-radius: 16px 16px 0 0;
+	background: var(--MI_THEME-panel);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding-left: 16px;
+	background: var(--MI_THEME-panel);
+	border-bottom: solid 0.5px var(--MI_THEME-divider);
+}
+
+.icon {
+	margin-right: 12px;
+}
+
+.title {
+	flex: 1;
+	min-width: 0;
+	font-weight: bold;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.close {
+	margin-left: auto;
+	width: 45px;
+	aspect-ratio: 1;
+	display: grid;
+	place-items: center;
+}
+
+.body {
+	padding: 16px;
+}
+</style>
diff --git a/packages/frontend/src/pages/rooms/room.core.vue b/packages/frontend/src/pages/rooms/room.core.vue
index 2f41f6ca59..e0d0fca3df 100644
--- a/packages/frontend/src/pages/rooms/room.core.vue
+++ b/packages/frontend/src/pages/rooms/room.core.vue
@@ -80,8 +80,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 
-	<div v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null && !controller.grabbing.value" :key="controller.selected.value.furnitureId" :class="$style.overlayFurnitureInfoPanel">
-		<div style="margin-bottom: 8px; font-weight: bold; text-align: center;">{{ FURNITURE_UI_DEFS[controller.selected.value.funitureState.type].name }}</div>
+	<XOverlayPanel v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null && !controller.grabbing.value" :key="controller.selected.value.furnitureId" :title="FURNITURE_UI_DEFS[controller.selected.value.funitureState.type].name">
+		<template #icon>
+			<i class="ti ti-box"></i>
+		</template>
 
 		<MkWorldMonoOptionsForm
 			:uiDef="FURNITURE_UI_DEFS[FURNITURE_SCHEMA_DEFS[controller.selected.value.funitureState.type].id]"
@@ -90,15 +92,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:options="controller.selected.value.funitureState.options"
 			@update="(k, v) => updateFurnitureOption(k, v)"
 		/>
-	</div>
+	</XOverlayPanel>
+
+	<XOverlayPanel v-if="isRoomSettingsOpen && controller.isEditMode.value" :title="i18n.ts._miRoom.roomCustomize" @close="isRoomSettingsOpen = false">
+		<template #icon>
+			<i class="ti ti-home-cog"></i>
+		</template>
 
-	<div v-if="isRoomSettingsOpen && controller.isEditMode.value" class="_panel" :class="$style.overlayFurnitureInfoPanel">
 		<XEnvOptions :controller="controller" @changeEnvType="changeEnvType"/>
-	</div>
+	</XOverlayPanel>
 
-	<div v-if="isRoomInfoOpen" :class="$style.overlayRoomInfoPanel">
-		<div style="margin-bottom: 8px; font-weight: bold; text-align: center;">{{ room.name }}</div>
-	</div>
+	<XOverlayPanel v-if="isRoomInfoOpen" :title="room.name" @close="isRoomInfoOpen = false">
+		<template #icon>
+			<i class="ti ti-info-circle"></i>
+		</template>
+
+		test
+	</XOverlayPanel>
 </div>
 </template>
 
@@ -111,6 +121,7 @@ import { FURNITURE_SCHEMA_DEFS } from 'misskey-world/src/room/furniture-schema-d
 import { useInterval } from '@@/js/use-interval.js';
 import { url } from '@@/js/config.js';
 import XEnvOptions from './room.env-options.vue';
+import XOverlayPanel from './OverlayPanel.vue';
 import type { RoomControllerOptions } from '@/world/room/controller.js';
 import type { RoomState, RoomAttachments } from 'misskey-world/src/room/type.js';
 import MkWorldMonoOptionsForm from '@/components/MkWorldMonoOptionsForm.vue';
@@ -859,36 +870,6 @@ function enterOnline() {
 	display: none;
 }
 
-.overlayRoomInfoPanel {
-	position: absolute;
-	top: 16px;
-	right: 16px;
-	z-index: 1;
-	padding: 16px;
-	width: 300px;
-	max-height: calc(100% - 16px - 16px);
-	box-sizing: border-box;
-	overflow: auto;
-	border-radius: 12px;
-	background: var(--MI_THEME-panel);
-}
-
-.overlayFurnitureInfoPanel {
-	position: absolute;
-	top: 16px;
-	right: 16px;
-	z-index: 1;
-	padding: 16px;
-	width: 300px;
-	max-height: calc(100% - 16px - 16px);
-	box-sizing: border-box;
-	overflow: auto;
-	border-radius: 12px;
-	background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
-	-webkit-backdrop-filter: blur(15px);
-	backdrop-filter: blur(15px);
-}
-
 .loading {
 	position: absolute;
 	top: 0;