From 7e93391ac326f73231b53579d413e09a6d7e0f60 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 23:02:15 -0400
Subject: [PATCH 1/4] fix depth

---
 packages/client/src/components/MkNoteSub.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 2b8d6e8df9..1a50e6f5f3 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -137,7 +137,7 @@
 				class="reply"
 				:class="{ single: replies.length == 1 }"
 				:conversation="conversation"
-				:depth="replies.lenght == 1 ? depth : depth + 1"
+				:depth="replies.length == 1 ? depth : depth + 1"
 				:replyLevel="replyLevel + 1"
 				:parentId="appearNote.replyId"
 				:detailedView="detailedView"

From c3b8ce2e57671c05f9dec9742cc91b4d80469cfb Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 20 May 2023 00:14:14 -0400
Subject: [PATCH 2/4] Reactions tab

---
 .../client/src/components/MkNoteDetailed.vue  |  33 ++++-
 .../client/src/components/MkReactedUsers.vue  | 108 +++++++++++++++
 .../src/components/MkReactedUsersDialog.vue   | 128 ------------------
 packages/client/src/components/MkTab.vue      |   9 ++
 packages/client/src/scripts/get-note-menu.ts  |  18 ---
 5 files changed, 145 insertions(+), 151 deletions(-)
 create mode 100644 packages/client/src/components/MkReactedUsers.vue
 delete mode 100644 packages/client/src/components/MkReactedUsersDialog.vue

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index f9f0e60a30..4860927e75 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -55,6 +55,13 @@
 				</template>
 				{{ i18n.ts._notification._types.quote }}
 			</option>
+			<option value="reactions">
+				<i class="ph-smiley ph-bold ph-lg"></i>
+				<template v-if="reactionsCount > 0">
+					<span class="count">{{ reactionsCount }}</span>
+				</template>
+				{{ i18n.ts.reaction }}
+			</option>
 			<option value="clips">
 				<i class="ph-paperclip ph-bold ph-lg"></i>
 				<template v-if="clips?.length > 0">
@@ -128,6 +135,11 @@
 			</MkA>
 		</div>
 		<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
+
+		<MkReactedUsers
+			v-if="tab === 'reactions'"
+			:note-id="appearNote.id"
+		></MkReactedUsers>
 	</div>
 	<div v-else class="_panel muted" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
@@ -165,6 +177,7 @@ import XStarButton from "@/components/MkStarButton.vue";
 import XRenoteButton from "@/components/MkRenoteButton.vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import MkReactedUsers from "@/components/MkReactedUsers.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import { getWordSoftMute } from "@/scripts/check-word-mute";
 import { userPage } from "@/filters/user";
@@ -240,6 +253,8 @@ let clips = $ref();
 let renotes = $ref();
 let isScrolling;
 
+const reactionsCount = Object.values(props.note.reactions).reduce((x,y) => x + y);
+
 const keymap = {
 	r: () => reply(true),
 	"e|a|plus": () => react(true),
@@ -509,14 +524,19 @@ onUnmounted(() => {
 		}
 	}
 
-	> :deep(.chips) {
-		padding: 6px 32px 12px;
+	> :deep(.chips), {
+		padding-block: 6px 12px;
+		padding-left: 32px;
 	}
-	> :deep(.user-card-mini) {
+	> :deep(.user-card-mini), 
+	> :deep(.reacted-users > *) {
 		padding-inline: 32px;
 		border-top: 1px solid var(--divider);
 		border-radius: 0;
 	}
+	> :deep(.reacted-users > div) {
+		padding-block: 12px;
+	}
 
 	> .reply {
 		border-top: solid 0.5px var(--divider);
@@ -612,10 +632,13 @@ onUnmounted(() => {
 			}
 		}
 		> .clips,
-		> .chips,
-		> :deep(.user-card-mini) {
+		> :deep(.user-card-mini),
+		> :deep(.reacted-users > *) {
 			padding-inline: 16px !important;
 		}
+		> .chips {
+			padding-left: 16px !important;
+		}
 	}
 
 	&.max-width_300px {
diff --git a/packages/client/src/components/MkReactedUsers.vue b/packages/client/src/components/MkReactedUsers.vue
new file mode 100644
index 0000000000..e685c85db5
--- /dev/null
+++ b/packages/client/src/components/MkReactedUsers.vue
@@ -0,0 +1,108 @@
+<template>
+	<div v-if="note" class="_gaps reacted-users">
+		<div v-if="reactions.length === 0" class="_fullinfo">
+			<img
+				src="/static-assets/badges/info.png"
+				class="_ghost"
+				alt="Info"
+			/>
+			<div>{{ i18n.ts.nothing }}</div>
+		</div>
+		<template v-else>
+			<div :class="$style.tabs">
+				<button
+					v-for="reaction in reactions"
+					:key="reaction"
+					:class="[
+						$style.tab,
+						{ [$style.tabActive]: tab === reaction },
+					]"
+					class="_button"
+					@click="tab = reaction"
+				>
+					<MkReactionIcon
+						ref="reactionRef"
+						:reaction="
+							reaction
+								? reaction.replace(
+										/^:(\w+):$/,
+										':$1@.:'
+									)
+								: reaction
+						"
+						:custom-emojis="note.emojis"
+					/>
+					<span style="margin-left: 4px">{{
+						note.reactions[reaction]
+					}}</span>
+				</button>
+			</div>
+			<MkUserCardMini
+				v-for="user in users"
+				:key="user.id"
+				:user="user"
+				:with-chart="false" 
+			/>
+		</template>
+	</div>
+	<div v-else>
+		<MkLoading />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch } from "vue";
+import * as misskey from "calckey-js";
+import MkReactionIcon from "@/components/MkReactionIcon.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
+
+const props = defineProps<{
+	noteId: misskey.entities.Note["id"];
+}>();
+
+let note = $ref<misskey.entities.Note>();
+let tab = $ref<string>();
+let reactions = $ref<string[]>();
+let users = $ref();
+
+watch($$(tab), async () => {
+	const res = await os.api("notes/reactions", {
+		noteId: props.noteId,
+		type: tab,
+		limit: 30,
+	});
+
+	users = res.map((x) => x.user);
+});
+
+onMounted(() => {
+	os.api("notes/show", {
+		noteId: props.noteId,
+	}).then((res) => {
+		reactions = Object.keys(res.reactions);
+		tab = reactions[0];
+		note = res;
+	});
+});
+</script>
+
+<style lang="scss" module>
+.tabs {
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.tab {
+	padding: 4px 6px;
+	border: solid 1px var(--divider);
+	border-radius: 6px;
+}
+
+.tabActive {
+	border-color: var(--accent);
+}
+</style>
diff --git a/packages/client/src/components/MkReactedUsersDialog.vue b/packages/client/src/components/MkReactedUsersDialog.vue
deleted file mode 100644
index 784d306b63..0000000000
--- a/packages/client/src/components/MkReactedUsersDialog.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-	<MkModalWindow
-		ref="dialog"
-		:width="400"
-		:height="450"
-		@close="dialog.close()"
-		@closed="emit('closed')"
-	>
-		<template #header>{{ i18n.ts.reaction }}</template>
-
-		<MkSpacer :margin-min="20" :margin-max="28">
-			<div v-if="note" class="_gaps">
-				<div v-if="reactions.length === 0" class="_fullinfo">
-					<img
-						src="/static-assets/badges/info.png"
-						class="_ghost"
-						alt="Info"
-					/>
-					<div>{{ i18n.ts.nothing }}</div>
-				</div>
-				<template v-else>
-					<div :class="$style.tabs">
-						<button
-							v-for="reaction in reactions"
-							:key="reaction"
-							:class="[
-								$style.tab,
-								{ [$style.tabActive]: tab === reaction },
-							]"
-							class="_button"
-							@click="tab = reaction"
-						>
-							<MkReactionIcon
-								ref="reactionRef"
-								:reaction="
-									reaction
-										? reaction.replace(
-												/^:(\w+):$/,
-												':$1@.:'
-										  )
-										: reaction
-								"
-								:custom-emojis="note.emojis"
-							/>
-							<span style="margin-left: 4px">{{
-								note.reactions[reaction]
-							}}</span>
-						</button>
-					</div>
-					<MkA
-						v-for="user in users"
-						:key="user.id"
-						:to="userPage(user)"
-					>
-						<MkUserCardMini :user="user" :with-chart="false" />
-					</MkA>
-				</template>
-			</div>
-			<div v-else>
-				<MkLoading />
-			</div>
-		</MkSpacer>
-	</MkModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, watch } from "vue";
-import * as misskey from "calckey-js";
-import MkModalWindow from "@/components/MkModalWindow.vue";
-import MkReactionIcon from "@/components/MkReactionIcon.vue";
-import MkUserCardMini from "@/components/MkUserCardMini.vue";
-import { userPage } from "@/filters/user";
-import { i18n } from "@/i18n";
-import * as os from "@/os";
-
-const emit = defineEmits<{
-	(ev: "closed"): void;
-}>();
-
-const props = defineProps<{
-	noteId: misskey.entities.Note["id"];
-}>();
-
-const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
-
-let note = $ref<misskey.entities.Note>();
-let tab = $ref<string>();
-let reactions = $ref<string[]>();
-let users = $ref();
-
-watch($$(tab), async () => {
-	const res = await os.api("notes/reactions", {
-		noteId: props.noteId,
-		type: tab,
-		limit: 30,
-	});
-
-	users = res.map((x) => x.user);
-});
-
-onMounted(() => {
-	os.api("notes/show", {
-		noteId: props.noteId,
-	}).then((res) => {
-		reactions = Object.keys(res.reactions);
-		tab = reactions[0];
-		note = res;
-	});
-});
-</script>
-
-<style lang="scss" module>
-.tabs {
-	display: flex;
-	gap: 8px;
-	flex-wrap: wrap;
-}
-
-.tab {
-	padding: 4px 6px;
-	border: solid 1px var(--divider);
-	border-radius: 6px;
-}
-
-.tabActive {
-	border-color: var(--accent);
-}
-</style>
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 2eb3e6ac12..d696790095 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -89,6 +89,12 @@ export default defineComponent({
 		padding: 12px 32px;
 		font-size: 0.85em;
 		overflow-x: auto;
+		mask: linear-gradient(to right, black calc(100% - 90px), transparent);
+		-webkit-mask: linear-gradient(to right, black calc(100% - 90px), transparent);
+		padding-right: 90px !important;
+		&::-webkit-scrollbar {
+			display: none;
+		}
 		> button {
 			display: flex;
 			gap: 6px;
@@ -102,6 +108,9 @@ export default defineComponent({
 			> i {
 				margin-top: -0.1em;
 			}
+			> .count {
+				margin-right: -.2em;
+			}
 		}
 	}
 
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index d8e47ff437..6eeecf4a66 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -230,19 +230,6 @@ export function getNoteMenu(props: {
 		});
 	}
 
-	function showReactions(): void {
-		os.popup(
-			defineAsyncComponent(
-				() => import("@/components/MkReactedUsersDialog.vue"),
-			),
-			{
-				noteId: appearNote.id,
-			},
-			{},
-			"closed",
-		);
-	}
-
 	async function translate(): Promise<void> {
 		if (props.translation.value != null) return;
 		props.translating.value = true;
@@ -282,11 +269,6 @@ export function getNoteMenu(props: {
 						action: edit,
 				  }
 				: undefined,
-			{
-				icon: "ph-smiley ph-bold ph-lg",
-				text: i18n.ts.reaction,
-				action: showReactions,
-			},
 			{
 				icon: "ph-clipboard-text ph-bold ph-lg",
 				text: i18n.ts.copyContent,

From bf9077e1dcd9cbb8d63451fb7a312f6d638d6c52 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 20 May 2023 00:41:42 -0400
Subject: [PATCH 3/4] fix

---
 .../client/src/components/MkNoteDetailed.vue  |  4 +-
 .../client/src/components/MkReactedUsers.vue  | 77 ++++++++-----------
 2 files changed, 35 insertions(+), 46 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 4860927e75..67dfef973d 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -137,7 +137,7 @@
 		<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
 
 		<MkReactedUsers
-			v-if="tab === 'reactions'"
+			v-if="tab === 'reactions' && reactionsCount > 0"
 			:note-id="appearNote.id"
 		></MkReactedUsers>
 	</div>
@@ -253,7 +253,7 @@ let clips = $ref();
 let renotes = $ref();
 let isScrolling;
 
-const reactionsCount = Object.values(props.note.reactions).reduce((x,y) => x + y);
+const reactionsCount = Object.values(props.note.reactions).reduce((x,y) => x + y, 0);
 
 const keymap = {
 	r: () => reply(true),
diff --git a/packages/client/src/components/MkReactedUsers.vue b/packages/client/src/components/MkReactedUsers.vue
index e685c85db5..8a8bf842f9 100644
--- a/packages/client/src/components/MkReactedUsers.vue
+++ b/packages/client/src/components/MkReactedUsers.vue
@@ -1,49 +1,39 @@
 <template>
 	<div v-if="note" class="_gaps reacted-users">
-		<div v-if="reactions.length === 0" class="_fullinfo">
-			<img
-				src="/static-assets/badges/info.png"
-				class="_ghost"
-				alt="Info"
-			/>
-			<div>{{ i18n.ts.nothing }}</div>
+		<div :class="$style.tabs">
+			<button
+				v-for="reaction in reactions"
+				:key="reaction"
+				:class="[
+					$style.tab,
+					{ [$style.tabActive]: tab === reaction },
+				]"
+				class="_button"
+				@click="tab = reaction"
+			>
+				<MkReactionIcon
+					ref="reactionRef"
+					:reaction="
+						reaction
+							? reaction.replace(
+									/^:(\w+):$/,
+									':$1@.:'
+								)
+							: reaction
+					"
+					:custom-emojis="note.emojis"
+				/>
+				<span style="margin-left: 4px">{{
+					note.reactions[reaction]
+				}}</span>
+			</button>
 		</div>
-		<template v-else>
-			<div :class="$style.tabs">
-				<button
-					v-for="reaction in reactions"
-					:key="reaction"
-					:class="[
-						$style.tab,
-						{ [$style.tabActive]: tab === reaction },
-					]"
-					class="_button"
-					@click="tab = reaction"
-				>
-					<MkReactionIcon
-						ref="reactionRef"
-						:reaction="
-							reaction
-								? reaction.replace(
-										/^:(\w+):$/,
-										':$1@.:'
-									)
-								: reaction
-						"
-						:custom-emojis="note.emojis"
-					/>
-					<span style="margin-left: 4px">{{
-						note.reactions[reaction]
-					}}</span>
-				</button>
-			</div>
-			<MkUserCardMini
-				v-for="user in users"
-				:key="user.id"
-				:user="user"
-				:with-chart="false" 
-			/>
-		</template>
+		<MkUserCardMini
+			v-for="user in users"
+			:key="user.id"
+			:user="user"
+			:with-chart="false" 
+		/>
 	</div>
 	<div v-else>
 		<MkLoading />
@@ -55,7 +45,6 @@ import { onMounted, watch } from "vue";
 import * as misskey from "calckey-js";
 import MkReactionIcon from "@/components/MkReactionIcon.vue";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
-import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 

From e79b1c693e486ee0273108320df4c0388eb1d455 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 20 May 2023 00:53:15 -0400
Subject: [PATCH 4/4] bottom padding

---
 packages/client/src/components/MkNoteDetailed.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 67dfef973d..e97141903b 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -527,6 +527,9 @@ onUnmounted(() => {
 	> :deep(.chips), {
 		padding-block: 6px 12px;
 		padding-left: 32px;
+		&:last-child {
+			margin-bottom: 12px;
+		}
 	}
 	> :deep(.user-card-mini), 
 	> :deep(.reacted-users > *) {