fix(frontend): チャットページのスクロールが意図しない方向に動作することがある

CHANGELOG_CHERRYPICK.md

@@ -97,7 +97,8 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Fix: 누락된 안테나 소스 추가
 - Fix: OffscreenCanvas undefined (MisskeyIO/misskey#165)
 - Fix: 대화 삭제가 올바르게 작동하지 않음
-- Fix: 유저 메뉴에서 '대화 시작하기'를 클릭하면 잘못된 페이지가 호출됨
+- Fix: 유저 메뉴에서 '대화 시작하기'를 클릭하면 잘못된 페이지가 호출됨화
+- Fix: 대화 페이지의 스크롤이 의도하지 않은 방향으로 작동할 수 있음
 
 ### Server
 - Nodeinfo의 Software 이름을 CherryPick이 아닌 다른 이름으로 변경할 때 관련 주석 추가

packages/frontend/src/pages/messaging/messaging-room.vue

@@ -36,34 +36,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkPagination>
 			</div>
 		</MkSpacer>
-	</div>
-	<template #footer>
-		<div :class="$style.footerSpacer">
-			<div :class="$style.footer">
-				<div v-if="typers.length > 0" :class="$style.typers">
-					<I18n :src="i18n.ts.typingUsers" textTag="span">
-						<template #users>
-							<b v-for="typer in typers" :key="typer.id" :class="$style.user">{{ typer.username }}</b>
-						</template>
-					</I18n>
-					<MkEllipsis/>
-				</div>
-				<Transition :name="animation ? 'fade' : ''">
-					<div v-show="showIndicator" :class="$style.newMessage">
-						<button class="_buttonPrimary" :class="$style.newMessageButton" @click="onIndicatorClick">
-							<i class="ti ti-circle-arrow-down-filled" :class="$style.newMessageIcon"></i>{{ i18n.ts.newMessageExists }}
-						</button>
+		<footer>
+			<div :class="$style.footerSpacer">
+				<div :class="[$style.footer, { [$style.friendly]: isFriendly }]">
+					<div v-if="typers.length > 0" :class="$style.typers">
+						<I18n :src="i18n.ts.typingUsers" textTag="span">
+							<template #users>
+								<b v-for="typer in typers" :key="typer.id" :class="$style.user">{{ typer.username }}</b>
+							</template>
+						</I18n>
+						<MkEllipsis/>
 					</div>
-				</Transition>
-				<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style.form"/>
+					<Transition :name="animation ? 'fade' : ''">
+						<div v-show="showIndicator" :class="$style.newMessage">
+							<button class="_buttonPrimary" :class="$style.newMessageButton" @click="onIndicatorClick">
+								<i class="ti ti-circle-arrow-down-filled" :class="$style.newMessageIcon"></i>{{ i18n.ts.newMessageExists }}
+							</button>
+						</div>
+					</Transition>
+					<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style.form"/>
+				</div>
 			</div>
-		</div>
-	</template>
+		</footer>
+	</div>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, nextTick, onBeforeUnmount, watch, shallowRef } from 'vue';
+import { computed, onMounted, nextTick, onBeforeUnmount, watch, shallowRef, ref } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
@@ -78,6 +78,9 @@ import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { vibrate } from '@/scripts/vibrate.js';
+import { miLocalStorage } from '@/local-storage.js';
+
+const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
 
 const props = defineProps<{
 	userAcct?: string;
@@ -94,9 +97,7 @@ let group: Misskey.entities.UserGroup | null = $ref(null);
 let typers: Misskey.entities.User[] = $ref([]);
 let connection: Misskey.ChannelConnection<Misskey.Channels['messaging']> | null = $ref(null);
 let showIndicator = $ref(false);
-const {
-	animation,
-} = defaultStore.reactiveState;
+const animation = defaultStore.reactiveState;
 
 let pagination: Paging | null = $ref(null);
 
@@ -217,7 +218,7 @@ function onMessage(message) {
 	sound.play('chat');
 	vibrate([30, 30, 30]);
 
-	const _isBottom = isBottomVisible(rootEl, 64);
+	const _isBottom = isBottomVisible($$(rootEl).value, 64);
 
 	pagingComponent.value.prepend(message);
 	if (message.userId !== $i?.id && !document.hidden) {
@@ -282,7 +283,7 @@ let scrollRemove: (() => void) | null = $ref(null);
 function notifyNewMessage() {
 	showIndicator = true;
 
-	scrollRemove = onScrollBottom(rootEl, () => {
+	scrollRemove = onScrollBottom($$(rootEl).value, () => {
 		showIndicator = false;
 		scrollRemove = null;
 	});
@@ -330,10 +331,6 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	opacity: 0;
 }
 
-.root {
-	display: contents;
-}
-
 .body {
 	min-height: 80dvh;
 }
@@ -435,7 +432,9 @@ definePageMetadata(computed(() => !fetching ? user ? {
   }
 
 	.footer {
-		margin-top: calc(50px + env(safe-area-inset-bottom));
+    &.friendly {
+      margin-bottom: calc(50px + env(safe-area-inset-bottom));
+    }
 	}
 
   .form {