fix(client): messaging-room周り (#9643)

* wip

* ✌️

* clean up

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

@@ -1,11 +1,15 @@
 <template>
+<MkStickyContainer>
+<template #header>
+	<MkPageHeader />
+</template>
 <div
 	ref="rootEl"
-	class="root"
+	:class="$style['root']"
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
 >
-	<div class="body">
+	<div :class="$style['body']">
 		<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
 			<template #empty>
 				<div class="_fullinfo">
@@ -17,7 +21,7 @@
 				<MkDateSeparatedList
 					v-if="messages.length > 0"
 					v-slot="{ item: message }"
-					:class="{ messages: true, 'deny-move-transition': pFetching }"
+					:class="{ [$style['messages']]: true, 'deny-move-transition': pFetching }"
 					:items="messages"
 					direction="up"
 					reversed
@@ -27,23 +31,26 @@
 			</template>
 		</MkPagination>
 	</div>
-	<footer>
+	<footer :class="$style['footer']">
-		<div v-if="typers.length > 0" class="typers">
+		<div v-if="typers.length > 0" :class="$style['typers']">
-			<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
+			<I18n :src="i18n.ts.typingUsers" text-tag="span">
 				<template #users>
-					<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
+					<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="new-message">
+			<div v-show="showIndicator" :class="$style['new-message']">
-				<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ti-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button>
+				<button class="_buttonPrimary" @click="onIndicatorClick" :class="$style['new-message-button']">
+					<i class="fas ti-fw fa-arrow-circle-down" :class="$style['new-message-icon']"></i>{{ i18n.ts.newMessageExists }}
+				</button>
 			</div>
 		</Transition>
-		<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
+		<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style['form']"/>
 	</footer>
 </div>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -303,12 +310,14 @@ definePageMetadata(computed(() => !fetching ? user ? {
 } : null));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .root {
 	display: content;
+}
 
-	> .body {
+.body {
 	min-height: 80%;
+}
 
 .more {
 	display: block;
@@ -318,89 +327,82 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	color: #fff;
 	background: rgba(#000, 0.3);
 	border-radius: 12px;
-
 	&:hover {
 		background: rgba(#000, 0.4);
 	}
-
 	&:active {
 		background: rgba(#000, 0.5);
 	}
-
-			&.fetching {
-				cursor: wait;
-			}
-
 	> i {
 		margin-right: 4px;
 	}
 }
 
-		.messages {
+.fetching {
-			padding: 8px 0;
+	cursor: wait;
+}
 
-			> ::v-deep(*) {
+.messages {
+	padding: 16px 0 0;
+
+	> * {
 		margin-bottom: 16px;
 	}
 }
-	}
 
-	> footer {
+.footer {
 	width: 100%;
 	position: sticky;
 	z-index: 2;
 	padding-top: 8px;
-		bottom: 0;
+	bottom: var(--minBottomSpacing);
-		bottom: env(safe-area-inset-bottom, 0px);
+}
 
-		> .new-message {
+.new-message {
 	width: 100%;
 	padding-bottom: 8px;
 	text-align: center;
+}
 
-			> button {
+.new-message-button {
 	display: inline-block;
 	margin: 0;
 	padding: 0 12px;
 	line-height: 32px;
 	font-size: 12px;
 	border-radius: 16px;
+}
 
-				> i {
+.new-message-icon {
 	display: inline-block;
 	margin-right: 8px;
 }
-			}
-		}
 
-		> .typers {
+.typers {
 	position: absolute;
 	bottom: 100%;
 	padding: 0 8px 0 8px;
 	font-size: 0.9em;
 	color: var(--fgTransparentWeak);
+}
 
-			> .users {
+
-				> .user + .user:before {
+.user + .user:before {
 	content: ", ";
 	font-weight: normal;
 }
 
-				> .user:last-of-type:after {
+.user:last-of-type:after {
 	content: " ";
 }
-			}
-		}
 
-		> .form {
+.form {
 	max-height: 12em;
 	overflow-y: scroll;
 	border-top: solid 0.5px var(--divider);
 	border-bottom-left-radius: 0;
 	border-bottom-right-radius: 0;
 }
-	}
-}
 
 .fade-enter-active, .fade-leave-active {
 	transition: opacity 0.1s;