feat: ユーザーのリアクション一覧を見れるように

src/client/pages/user/reactions.vue

@@ -0,0 +1,81 @@
+<template>
+<div>
+	<MkPagination :pagination="pagination" #default="{items}" ref="list">
+		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
+			<div class="header">
+				<MkAvatar class="avatar" :user="user"/>
+				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
+				<MkTime :time="item.createdAt" class="createdAt"/>
+			</div>
+			<MkNote :note="item.note" @update:note="updated(note, $event)" :key="item.id"/>
+		</div>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkPagination from '@client/components/ui/pagination.vue';
+import MkNote from '@client/components/note.vue';
+import MkReactionIcon from '@client/components/reaction-icon.vue';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+		MkNote,
+		MkReactionIcon,
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			pagination: {
+				endpoint: 'users/reactions',
+				limit: 20,
+				params: {
+					userId: this.user.id,
+				}
+			},
+		};
+	},
+
+	watch: {
+		user() {
+			this.$refs.list.reload();
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.afdcfbfb {
+	> .header {
+		display: flex;
+		align-items: center;
+		padding: 8px 16px;
+		margin-bottom: 8px;
+		border-bottom: solid 2px var(--divider);
+
+		> .avatar {
+			width: 24px;
+			height: 24px;
+			margin-right: 8px;
+		}
+
+		> .reaction {
+			width: 32px;
+			height: 32px;
+		}
+
+		> .createdAt {
+			margin-left: auto;
+		}
+	}
+}
+</style>