Enhance(frontend): もっと！ボタンでリアクション一覧が開けるように (misskey-dev#12935) (MisskeyIO#524)

Co-authored-by: 1Step621 <onestep621@gmail.com>

packages/frontend/src/components/MkNote.vue

@@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
 				<template #more>
-					<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
+					<MkButton class="_button" link :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted, { [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]">{{ i18n.ts.more }}</MkButton>
 				</template>
 			</MkReactionsViewer>
 			<footer :class="$style.footer">
@@ -162,6 +162,7 @@ import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
 import MkPoll from '@/components/MkPoll.vue';
+import MkButton from './MkButton.vue';
 import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
@@ -977,12 +978,28 @@ function emitUpdReaction(emoji: string, delta: number) {
 	text-align: center;
 	opacity: 0.7;
 }
-
 .reactionOmitted {
-	display: inline-block;
-	height: 32px;
+	display: inline-flex;
+	min-width: 0;
+	height: 42px;
 	margin: 2px;
 	padding: 0 6px;
-	opacity: .8;
+	border-radius: 6px;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	border: dashed 1px var(--divider);
+
+	&.small {
+		height: 32px;
+		font-size: 1em;
+		border-radius: 4px;
+	}
+
+	&.large {
+		height: 52px;
+		font-size: 2em;
+		border-radius: 8px;
+	}
 }
 </style>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -230,9 +230,12 @@ import MkPagination, { type Paging } from '@/components/MkPagination.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkButton from '@/components/MkButton.vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
-}>();
+	initialTab: string;
+}>(), {
+	initialTab: 'replies',
+});
 
 const inChannel = inject('inChannel', null);
 
@@ -301,7 +304,7 @@ provide('react', (reaction: string) => {
 	});
 });
 
-const tab = ref('replies');
+const tab = ref(props.initialTab);
 const reactionTabType = ref<string | null>(null);
 
 const renotesPagination = computed<Paging>(() => ({

packages/frontend/src/components/MkReactionsViewer.vue

@@ -100,6 +100,8 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
 }
 
 .root {
+	display: flex;
+	flex-wrap: wrap;
 	margin: 4px -2px 0 -2px;
 
 	&:empty {