wip

packages/frontend/src/components/MkPagination.vue

@@ -95,7 +95,6 @@ const props = withDefaults(defineProps<{
 	pagination: Paging;
 	disableAutoLoad?: boolean;
 	displayLimit?: number;
-	scrollReversed?: boolean;
 }>(), {
 	displayLimit: 20,
 });
@@ -347,7 +346,7 @@ const appearFetchMoreAhead = async (): Promise<void> => {
 	fetchMoreAppearTimeout();
 };
 
-const isHead = (): boolean => isBackTop.value || (props.pagination.reversed && !props.scrollReversed ? isTailVisible : isHeadVisible)(rootEl.value!, TOLERANCE);
+const isHead = (): boolean => isBackTop.value || (props.pagination.reversed ? isTailVisible : isHeadVisible)(rootEl.value!, TOLERANCE);
 
 watch(visibility, () => {
 	if (visibility.value === 'hidden') {

packages/frontend/src/pages/chat/room.form.vue

@@ -233,7 +233,6 @@ onMounted(() => {
 <style lang="scss" module>
 .root {
 	position: relative;
-	border: solid 1px var(--MI_THEME-divider);
 	border-bottom: none;
 	border-radius: 14px 14px 0 0;
 	overflow: clip;

packages/frontend/src/pages/chat/room.message.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="[$style.root, { [$style.isMe]: isMe }]">
-	<MkAvatar :class="$style.avatar" :user="user" link :preview="false"/>
+	<MkAvatar :class="$style.avatar" :user="user" :link="!isMe" :preview="false"/>
 	<div :class="$style.body">
 		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
 			<div v-if="!message.isDeleted" :class="$style.content">
@@ -17,13 +17,11 @@
 			</div>
 		</MkFukidashi>
 		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
-		<div>
+		<div :class="$style.footer">
+			<button class="_textButton" style="color: currentColor;" @click="showMenu"><i class="ti ti-dots-circle-horizontal"></i></button>
 			<MkTime :class="$style.time" :time="message.createdAt"/>
 		</div>
 	</div>
-	<button v-if="isMe" :class="$style.delete" :title="i18n.ts.delete" @click="del">
-		<img src="/client-assets/remove.png" alt="Delete"/>
-	</button>
 </div>
 </template>
 
@@ -71,12 +69,16 @@ function del(): void {
 		.content {
 			color: var(--MI_THEME-fgOnAccent);
 		}
+
+		.footer {
+			flex-direction: row-reverse;
+		}
 	}
 }
 
 .avatar {
 	position: sticky;
-	top: calc(var(--stickyTop, 0px) + 16px);
+	top: calc(16px + var(--MI-stickyTop, 0px));
 	display: block;
 	width: 54px;
 	height: 54px;
@@ -93,26 +95,15 @@ function del(): void {
 	word-break: break-word;
 }
 
-.delete {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 24px;
-	height: 24px;
-	padding: 0;
-	margin: 0;
-	border: none;
-	background: none;
-	cursor: pointer;
-	transition: all 0.1s ease;
-
-	&:hover {
-		transform: scale(1.1);
-	}
+.footer {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5em;
+	margin-top: 4px;
+	font-size: 75%;
 }
 
 .time {
-	font-size: 75%;
 	opacity: 0.5;
 }
 </style>

packages/frontend/src/pages/chat/room.vue

@@ -87,11 +87,6 @@ const room = ref<Misskey.entities.ChatRoom | null>(null);
 const connection = ref<Misskey.ChannelConnection<Misskey.Channels['chat']> | null>(null);
 const showIndicator = ref(false);
 
-watch([() => props.userId, () => props.roomId], () => {
-	if (connection.value) connection.value.dispose();
-	initialize();
-});
-
 async function initialize() {
 	initializing.value = true;
 

packages/frontend/src/style.scss

@@ -335,13 +335,13 @@ rt {
 ._gaps_m {
 	display: flex;
 	flex-direction: column;
-	gap: 1.5em;
+	gap: 21px;
 }
 
 ._gaps_s {
 	display: flex;
 	flex-direction: column;
-	gap: 0.75em;
+	gap: 10px;
 }
 
 ._gaps {