Fix #5842 and refactoring

14 files changed, 17 insertions, 17 deletions

diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index f3abea9583..48b1e067d3 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -4,7 +4,7 @@
 	<portal to="title">{{ $t('announcements') }}</portal>
 
 	<mk-pagination :pagination="pagination" #default="{items}" class="ruryvtyk" ref="list">
-		<section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id" :data-index="i">
+		<section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id">
 			<div class="_title"><span v-if="$store.getters.isSignedIn && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
 			<div class="_content">
 				<mfm :text="announcement.text"/>
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index c302088b97..1038e89d6e 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-pagination :pagination="pagination" #default="{items}" class="mk-follow-requests" ref="list">
-	<div class="user _panel" v-for="(req, i) in items" :key="req.id" :data-index="i">
+	<div class="user _panel" v-for="(req, i) in items" :key="req.id">
 		<mk-avatar class="avatar" :user="req.follower"/>
 		<div class="body">
 			<div class="name">
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index b1005b0639..a53508db84 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -9,7 +9,7 @@
 			<mk-pagination :pagination="pagination" class="emojis" ref="emojis">
 				<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
 				<template #default="{items}">
-					<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" :data-index="i" @click="selected = emoji" :class="{ selected: selected && (selected.id === emoji.id) }">
+					<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selected = emoji" :class="{ selected: selected && (selected.id === emoji.id) }">
 						<img :src="emoji.url" class="img" :alt="emoji.name"/>
 						<div class="body">
 							<span class="name">{{ emoji.name }}</span>
@@ -30,7 +30,7 @@
 			<mk-pagination :pagination="remotePagination" class="emojis" ref="remoteEmojis">
 				<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
 				<template #default="{items}">
-					<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" :data-index="i" @click="selectedRemote = emoji" :class="{ selected: selectedRemote && (selectedRemote.id === emoji.id) }">
+					<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selectedRemote = emoji" :class="{ selected: selectedRemote && (selectedRemote.id === emoji.id) }">
 						<img :src="emoji.url" class="img" :alt="emoji.name"/>
 						<div class="body">
 							<span class="name">{{ emoji.name }}</span>
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index ab8eeb86b2..fa7c377720 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -18,7 +18,7 @@
 		</div>
 		<div class="_content">
 			<mk-pagination :pagination="pagination" #default="{items}" class="instances" ref="instances" :key="host + state">
-				<div class="instance" v-for="(instance, i) in items" :key="instance.id" :data-index="i" @click="info(instance)">
+				<div class="instance" v-for="(instance, i) in items" :key="instance.id" @click="info(instance)">
 					<div class="host"><fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div>
 					<div class="status">
 						<span class="sub" v-if="instance.followersCount > 0"><fa :icon="faCaretDown" class="icon"/>Sub</span>
diff --git a/src/client/pages/instance/queue.queue.vue b/src/client/pages/instance/queue.queue.vue
index 6cd2f2a332..710f4ec099 100644
--- a/src/client/pages/instance/queue.queue.vue
+++ b/src/client/pages/instance/queue.queue.vue
@@ -12,7 +12,7 @@
 	</div>
 	<div class="_content" style="max-height: 180px; overflow: auto;">
 		<sequential-entrance :delay="15" v-if="jobs.length > 0">
-			<div v-for="(job, i) in jobs" :key="job[0]" :data-index="i">
+			<div v-for="(job, i) in jobs" :key="job[0]">
 				<span>{{ job[0] }}</span>
 				<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
 			</div>
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index bafb0c006a..6f53bb8434 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -20,7 +20,7 @@
 		<div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div>
 		<div class="_content _list">
 			<mk-pagination :pagination="pagination" #default="{items}" class="users" ref="users" :auto-margin="false">
-				<button class="user _button _listItem" v-for="(user, i) in items" :key="user.id" :data-index="i" @click="show(user)">
+				<button class="user _button _listItem" v-for="(user, i) in items" :key="user.id" @click="show(user)">
 					<mk-avatar :user="user" class="avatar"/>
 					<div class="body">
 						<mk-user-name :user="user" class="name"/>
diff --git a/src/client/pages/messaging-room.vue b/src/client/pages/messaging-room.vue
index cba84b6de7..cb6cae697a 100644
--- a/src/client/pages/messaging-room.vue
+++ b/src/client/pages/messaging-room.vue
@@ -18,8 +18,8 @@
 		<button class="more _button" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
 			<template v-if="fetchingMoreMessages"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreMessages ? $t('@.loading') : $t('@.load-more') }}
 		</button>
-		<x-list class="messages" :items="messages" v-slot="{ item: message, i }" direction="up">
-			<x-message :message="message" :is-group="group != null" :key="message.id" :data-index="messages.length - i"/>
+		<x-list class="messages" :items="messages" v-slot="{ item: message, i }" direction="up" reversed>
+			<x-message :message="message" :is-group="group != null" :key="message.id"/>
 		</x-list>
 	</div>
 	<footer>
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index 3a9a11b541..7e7b8b7ea9 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -8,7 +8,7 @@
 	<x-antenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
 
 	<mk-pagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
-		<x-antenna v-for="(antenna, i) in items" :key="antenna.id" :data-index="i" :antenna="antenna" @created="onAntennaDeleted"/>
+		<x-antenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @created="onAntennaDeleted"/>
 	</mk-pagination>
 </div>
 </template>
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index 6c4b46e85c..968864cdb1 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -6,7 +6,7 @@
 	<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('createList') }}</mk-button>
 
 	<mk-pagination :pagination="pagination" #default="{items}" class="lists" ref="list">
-		<div class="list _panel" v-for="(list, i) in items" :key="list.id" :data-index="i">
+		<div class="list _panel" v-for="(list, i) in items" :key="list.id">
 			<router-link :to="`/lists/${ list.id }`">{{ list.name }}</router-link>
 		</div>
 	</mk-pagination>
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 43a3e2b666..ded79b89c7 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -5,7 +5,7 @@
 			<div class="_title">{{ list.name }}</div>
 			<div class="_content">
 				<div class="users">
-					<div class="user" v-for="(user, i) in users" :key="user.id" :data-index="i">
+					<div class="user" v-for="(user, i) in users" :key="user.id">
 						<mk-avatar :user="user" class="avatar"/>
 						<div class="body">
 							<mk-user-name :user="user" class="name"/>
diff --git a/src/client/pages/settings/drive.vue b/src/client/pages/settings/drive.vue
index 8ff054b9bb..55372687fc 100644
--- a/src/client/pages/settings/drive.vue
+++ b/src/client/pages/settings/drive.vue
@@ -3,7 +3,7 @@
 	<div class="_title"><fa :icon="faCloud"/> {{ $t('drive') }}</div>
 	<div class="_content">
 		<mk-pagination :pagination="drivePagination" #default="{items}" class="drive" ref="drive">
-			<div class="file" v-for="(file, i) in items" :key="file.id" :data-index="i" @click="selected = file" :class="{ selected: selected && (selected.id === file.id) }">
+			<div class="file" v-for="(file, i) in items" :key="file.id" @click="selected = file" :class="{ selected: selected && (selected.id === file.id) }">
 				<x-file-thumbnail class="thumbnail" :file="file" fit="cover"/>
 				<div class="body">
 					<p class="name">
diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue
index 86541472fa..03cf4aacc8 100644
--- a/src/client/pages/settings/mute-block.vue
+++ b/src/client/pages/settings/mute-block.vue
@@ -6,7 +6,7 @@
 		<mk-pagination :pagination="mutingPagination" class="muting">
 			<template #empty><span>{{ $t('noUsers') }}</span></template>
 			<template #default="{items}">
-				<div class="user" v-for="(mute, i) in items" :key="mute.id" :data-index="i">
+				<div class="user" v-for="(mute, i) in items" :key="mute.id">
 					<router-link class="name" :to="mute.mutee | userPage">
 						<mk-acct :user="mute.mutee"/>
 					</router-link>
@@ -19,7 +19,7 @@
 		<mk-pagination :pagination="blockingPagination" class="blocking">
 			<template #empty><span>{{ $t('noUsers') }}</span></template>
 			<template #default="{items}">
-				<div class="user" v-for="(block, i) in items" :key="block.id" :data-index="i">
+				<div class="user" v-for="(block, i) in items" :key="block.id">
 					<router-link class="name" :to="block.blockee | userPage">
 						<mk-acct :user="block.blockee"/>
 					</router-link>
diff --git a/src/client/pages/user/follow-list.vue b/src/client/pages/user/follow-list.vue
index 4eb48d6053..3da0b8359d 100644
--- a/src/client/pages/user/follow-list.vue
+++ b/src/client/pages/user/follow-list.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-pagination :pagination="pagination" #default="{items}" class="mk-following-or-followers" ref="list">
-	<div class="user _panel" v-for="(user, i) in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" :data-index="i">
+	<div class="user _panel" v-for="(user, i) in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id">
 		<mk-avatar class="avatar" :user="user"/>
 		<div class="body">
 			<div class="name">
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 65a480270f..38bab7334f 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -83,7 +83,7 @@
 	<router-view :user="user"></router-view>
 	<template v-if="$route.name == 'user'">
 		<sequential-entrance class="pins">
-			<x-note v-for="(note, i) in user.pinnedNotes" class="note" :note="note" :key="note.id" :data-index="i" :detail="true" :pinned="true"/>
+			<x-note v-for="(note, i) in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/>
 		</sequential-entrance>
 		<mk-container :body-togglable="true" class="content">
 			<template #header><fa :icon="faImage"/>{{ $t('images') }}</template>