feat: 誰がリアクションをしたのかを非表示にできる機能を実装 + fix: クエリの修正

README.md

@@ -31,6 +31,7 @@
 - TL上のサーバー情報をアイコン表示に切り替えられるように https://github.com/team-shahu/misskey/pull/13 https://github.com/team-shahu/misskey/pull/24
 - 特定のロールにのみお知らせを発行する機能 https://github.com/team-shahu/misskey/pull/18
 - リアクションした人一覧がブロック・ミュートを考慮するようにする設定 https://github.com/team-shahu/misskey/pull/23 https://github.com/team-shahu/misskey/pull/27
+- 誰がリアクションをしたのかを非表示にできる機能 https://github.com/hideki0403/kakurega.app/commit/65d85bb4fe724dc0737f1ac7958bc13c96cc926d
 
 ## Special Thanks
 - [Misskey](https://github.com/misskey-dev/misskey)  

packages/backend/src/server/api/endpoints/notes/reactions.ts

@@ -72,7 +72,10 @@
 					this.cacheService.userBlockedCache.get(me.id),
 				]);
 
-			  query.andWhere('reaction.userId NOT IN (:...userIds)', { userIds: Array.from(userIdsWhoMeMuting ?? []).concat(Array.from(userIdsWhoBlockingMe ?? [])) });
+				const userIds = Array.from(userIdsWhoMeMuting ?? []).concat(Array.from(userIdsWhoBlockingMe ?? []));
+				if (userIds.length > 0 ){
+			  	query.andWhere('reaction.userId NOT IN (:...userIds)', { userIds: Array.from(userIdsWhoMeMuting ?? []).concat(Array.from(userIdsWhoBlockingMe ?? [])) });
+				}
 			}
 
 			if (ps.type) {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -175,7 +175,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
 			<div :class="$style.reactionTabs">
-				<button v-for="reaction in Object.keys(appearNote.reactions)" :key="reaction" :class="[$style.reactionTab, { [$style.reactionTabActive]: reactionTabType === reaction }]" class="_button" @click="reactionTabType = reaction">
+				<button v-for="reaction in Object.keys(appearNote.reactions)" :key="reaction" :class="[$style.reactionTab, { [$style.reactionTabActive]: reactionTabType === reaction }]" class="_button" @click="reactionTabType = defaultStore.state.hideReactionUsers ? null : reaction">
 					<MkReactionIcon :reaction="reaction"/>
 					<span style="margin-left: 4px;">{{ appearNote.reactions[reaction] }}</span>
 				</button>

packages/frontend/src/components/MkReactionsViewer.details.vue

@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkReactionIcon :reaction="reaction" :class="$style.reactionIcon" :noStyle="true"/>
 			<div :class="$style.reactionName">{{ getReactionName(reaction) }}</div>
 		</div>
-		<div :class="$style.users">
+		<div v-if="users.length" :class="$style.users">
 			<div v-for="u in users" :key="u.id" :class="$style.user">
 				<MkAvatar :class="$style.avatar" :user="u"/>
 				<MkUserName :user="u" :nowrap="true"/>
@@ -57,7 +57,6 @@ function getReactionName(reaction: string): string {
 
 .reaction {
 	max-width: 100px;
-	padding-right: 10px;
 	text-align: center;
 	border-right: solid 0.5px var(--MI_THEME-divider);
 }
@@ -81,6 +80,8 @@ function getReactionName(reaction: string): string {
 	margin: -4px 14px 0 10px;
 	font-size: 0.95em;
 	text-align: left;
+	padding-left: 10px;
+	border-left: solid 0.5px var(--divider);
 }
 
 .user {

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -150,12 +150,12 @@ if (!mock) {
 	useTooltip(buttonEl, async (showing) => {
 		const useGet = !reactionChecksMuting.value;
 		const apiCall = useGet ? misskeyApiGet : misskeyApi;
-		const reactions = await apiCall('notes/reactions', {
+		const reactions = !defaultStore.state.hideReactionUsers ? await apiCall('notes/reactions', {
 			noteId: props.note.id,
 			type: props.reaction,
 			limit: 10,
 			_cacheKey_: props.count,
-		});
+		}) : [];
 
 		const users = reactions.map(x => x.user);
 		const count = users.length;

packages/frontend/src/pages/settings/general.vue

@@ -63,6 +63,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<option value="large">{{ i18n.ts.large }}</option>
 				</MkRadios>
 				<MkSwitch v-model="limitWidthOfReaction">{{ i18n.ts.limitWidthOfReaction }}</MkSwitch>
+				<MkSelect v-model="hideReactionCount">
+					<template #label>{{ i18n.ts.hideReactionCount }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template>
+					<option value="none">{{ i18n.ts._hideReactionCount.none }}</option>
+					<option value="self">{{ i18n.ts._hideReactionCount.self }}</option>
+					<option value="others">{{ i18n.ts._hideReactionCount.others }}</option>
+					<option value="all">{{ i18n.ts._hideReactionCount.all }}</option>
+				</MkSelect>
+				<MkSwitch v-model="hideReactionUsers">
+					<template #caption>{{ i18n.ts.hideReactionUsersDescription }}</template>
+					{{ i18n.ts.hideReactionUsers }}
+					<span class="_beta">{{ i18n.ts.originalFeature }}</span>
+				</MkSwitch>
 			</div>
 
 			<MkSelect v-model="instanceTicker">
@@ -296,6 +308,8 @@ const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNot
 const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
 const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
 const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
+const hideReactionCount = computed(defaultStore.makeGetterSetter('hideReactionCount'));
+const hideReactionUsers = computed(defaultStore.makeGetterSetter('hideReactionUsers'));
 const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
 const collapseRenotesTrigger = computed(defaultStore.makeGetterSetter('collapseRenotesTrigger'));
 const collapseSelfRenotes = computed(defaultStore.makeGetterSetter('collapseSelfRenotes'));

packages/frontend/src/store.ts

@@ -402,6 +402,14 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'medium' as 'small' | 'medium' | 'large',
 	},
+	hideReactionCount: {
+		where: 'account',
+		default: 'none' as 'none' | 'self' | 'others' | 'all',
+	},
+	hideReactionUsers: {
+		where: 'account',
+		default: false,
+	},
 	limitWidthOfReaction: {
 		where: 'device',
 		default: true,