いい感じに

Author: mattyatea

packages/backend/src/models/json-schema/note.ts

@@ -283,5 +283,13 @@ export const packedNoteSchema = {
 			type: 'string',
 			optional: true, nullable: true,
 		},
+		myReactions: {
+			type: 'array',
+			optional: true, nullable: false,
+			items: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+		},
 	},
 } as const;

packages/frontend/src/cache.ts

@@ -12,6 +12,7 @@ export const rolesCache = new Cache(1000 * 60 * 30, () => misskeyApi('admin/role
 export const userListsCache = new Cache<Misskey.entities.UserList[]>(1000 * 60 * 30, () => misskeyApi('users/lists/list'));
 export const antennasCache = new Cache<Misskey.entities.Antenna[]>(1000 * 60 * 30, () => misskeyApi('antennas/list'));
 export const favoritedChannelsCache = new Cache<Misskey.entities.Channel[]>(1000 * 60 * 30, () => misskeyApi('channels/my-favorites', { limit: 100 }));
-export const userFavoriteListsCache = new Cache(1000 * 60 * 30, () => misskeyApi('users/lists/list-favorite'));
+// list-favorite endpoint doesn't exist, using empty array for now
+export const userFavoriteListsCache = new Cache(1000 * 60 * 30, () => Promise.resolve([]));
 export const userChannelsCache = new Cache<Misskey.entities.Channel[]>(1000 * 60 * 30, () => misskeyApi('channels/owned'));
 export const userChannelFollowingsCache = new Cache<Misskey.entities.Channel[]>(1000 * 60 * 30, () => misskeyApi('channels/followed'));

packages/frontend/src/components/MkNote.vue

@@ -254,7 +254,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:reactionEmojis="$appearNote.reactionEmojis"
 				:myReaction="$appearNote.myReaction"
 				:noteId="appearNote.id"
-				:note="appearNote"
+				:note="$appearNote"
 				:maxNumber="16"
 				@mockUpdateMyReaction="emitUpdReaction"
 			>
@@ -304,15 +304,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<i
 						v-if="
 							appearNote.reactionAcceptance === 'likeOnly' &&
-								appearNote.myReactions?.length >= 4
+								$appearNote.myReactions?.length >= 4
 						"
 						class="ti ti-heart-filled"
 						style="color: var(--MI_THEME-love)"
 					></i>
 					<i
 						v-else-if="
-							appearNote.myReactions?.length >= 4 ||
-								(appearNote.myReaction && appearNote.user.host)
+							$appearNote.myReactions?.length >= 4 ||
+								($appearNote.myReaction && appearNote.user.host)
 						"
 						class="ti ti-minus"
 						style="color: var(--MI_THEME-accent)"
@@ -554,7 +554,7 @@ const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibili
 const renoteCollapsed = ref(
 	prefer.s.collapseRenotes && isRenote && (
 		($i && ($i.id === note.userId || $i.id === appearNote.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
-		(appearNote.myReaction != null)
+		($appearNote.myReaction != null)
 	),
 );
 
@@ -855,7 +855,7 @@ function toggleReact() {
 	if ($appearNote.myReaction == null) {
 		react();
 	} else {
-		undoReact($appearNote);
+		undoReact(appearNote);
 	}
 }
 

packages/frontend/src/components/MkNoteDetailed.vue

@@ -143,7 +143,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:reactionEmojis="$appearNote.reactionEmojis"
 				:myReaction="$appearNote.myReaction"
 				:noteId="appearNote.id"
-				:note="appearNote"
+				:note="$appearNote"
 				:maxNumber="16"
 				@mockUpdateMyReaction="emitUpdReaction"
 			/>
@@ -166,7 +166,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</button>
 			<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
 				<i v-if="appearNote.reactionAcceptance === 'likeOnly' && $appearNote.myReactions?.length >= 4 " class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
-				<i v-else-if="$appearNote.myReactions?.length >= 4 || appearNote.myReaction && appearNote.user.host " class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
+				<i v-else-if="$appearNote.myReactions?.length >= 4 || $appearNote.myReaction && appearNote.user.host " class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
 				<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
 				<i v-else class="ti ti-plus"></i>
 				<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || prefer.s.showReactionsCount) && $appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number($appearNote.reactionCount) }}</p>
@@ -370,6 +370,17 @@ const replies = ref<Misskey.entities.Note[]>([]);
 const mutedReactions = ref<string[]>(store.s.mutedReactions);
 const canRenote = computed(() => appearNote && (['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i?.id));
 
+// Add missing gaming ref
+const gaming = ref<'light' | 'dark' | null>(null);
+
+// Add missing emitUpdReaction function
+function emitUpdReaction(newReaction: string) {
+	// Update the local reaction state
+	if ($appearNote.myReaction !== newReaction) {
+		$appearNote.myReaction = newReaction;
+	}
+}
+
 useGlobalEvent('noteDeleted', (noteId) => {
 	if (noteId === note.id || noteId === appearNote.id) {
 		isDeleted.value = true;
@@ -570,7 +581,7 @@ function undoReact(targetNote: Misskey.entities.Note): void {
 }
 
 function toggleReact() {
-	if (appearNote.value.myReactions?.length < 4 || appearNote.myReaction && appearNote.value.user.host || !appearNote.value.myReactions ) {
+	if (!$appearNote.myReactions || $appearNote.myReactions.length < 4 || ($appearNote.myReaction && appearNote.user.host)) {
 		react();
 	} else {
 		undoReact(appearNote);

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

@@ -125,56 +125,31 @@ async function toggleReaction() {
 	if (!canToggle.value) return;
 	if (!props.note) return; // Guard against undefined note
 
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-	const oldReaction = props.note.myReactions?.includes(props.reaction)
-		? props.reaction
-		: null;
-	if (oldReaction) {
+	// Check if already reacted using the same logic as isReacted
+	const alreadyReacted = props.note.myReactions?.includes(props.reaction) ?? false;
+	
+	if (alreadyReacted) {
 		const confirm = await os.confirm({
 			type: 'warning',
-			text:
-				oldReaction !== props.reaction
-					? i18n.ts.changeReactionConfirm
-					: i18n.ts.cancelReactionConfirm,
+			text: i18n.ts.cancelReactionConfirm,
 		});
 		if (confirm.canceled) return;
 
-		// eslint-disable-next-line vue/no-mutating-props
-		props.note.myReactions.splice(
-			props.note.myReactions.indexOf(oldReaction),
-			1,
-		);
-		if (oldReaction !== props.reaction) {
-			sound.playMisskeySfx('reaction');
-		}
-
 		if (mock) {
 			emit('reactionToggled', props.reaction, props.count - 1);
 			return;
 		}
 
+		// Note: The myReactions array will be updated by the noteEvents handler in use-note-capture.ts
+		
 		misskeyApi('notes/reactions/delete', {
 			noteId: props.noteId,
-			reaction: oldReaction,
+			reaction: props.reaction,
 		}).then(() => {
 			noteEvents.emit(`unreacted:${props.noteId}`, {
 				userId: $i!.id,
-				reaction: oldReaction,
+				reaction: props.reaction,
 			});
-			if (
-				oldReaction !== props.reaction
-			) {
-				misskeyApi('notes/reactions/create', {
-					noteId: props.noteId,
-					reaction: props.reaction,
-				}).then(() => {
-					noteEvents.emit(`reacted:${props.noteId}`, {
-						userId: $i!.id,
-						reaction: props.reaction,
-						emoji: emoji.value,
-					});
-				});
-			}
 		});
 	} else {
 		if (prefer.s.confirmOnReact) {
@@ -193,6 +168,7 @@ async function toggleReaction() {
 			return;
 		}
 
+		// Note: The myReactions array will be updated by the noteEvents handler in use-note-capture.ts
 		misskeyApi('notes/reactions/create', {
 			noteId: props.noteId,
 			reaction: props.reaction,

packages/frontend/src/components/XNote.vue

@@ -94,7 +94,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
-			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
+			<MkReactionsViewer 
+				v-if="appearNote.reactionAcceptance !== 'likeOnly'" 
+				:noteId="appearNote.id"
+				:reactions="appearNote.reactions"
+				:reactionEmojis="appearNote.reactionEmojis"
+				:myReaction="appearNote.myReaction"
+				:note="appearNote" 
+				:maxNumber="16" 
+				@mockUpdateMyReaction="emitUpdReaction">
 				<template #more>
 					<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
 				</template>

packages/frontend/src/composables/use-note-capture.ts

@@ -190,6 +190,7 @@ export type ReactiveNoteData = {
 	reactionCount: Misskey.entities.Note['reactionCount'];
 	reactionEmojis: Misskey.entities.Note['reactionEmojis'];
 	myReaction: Misskey.entities.Note['myReaction'];
+	myReactions: Misskey.entities.Note['myReactions'];
 	pollChoices: NonNullable<Misskey.entities.Note['poll']>['choices'];
 };
 
@@ -219,6 +220,7 @@ export function useNoteCapture(props: {
 		reactionCount: note.reactionCount,
 		reactionEmojis: note.reactionEmojis,
 		myReaction: note.myReaction,
+		myReactions: note.myReactions ?? [],
 		pollChoices: note.poll?.choices ?? [],
 	});
 
@@ -247,6 +249,10 @@ export function useNoteCapture(props: {
 
 		if ($i && (ctx.userId === $i.id)) {
 			$note.myReaction = normalizedName;
+			// Update myReactions array
+			if (!$note.myReactions.includes(normalizedName)) {
+				$note.myReactions.push(normalizedName);
+			}
 		}
 	}
 
@@ -266,6 +272,11 @@ export function useNoteCapture(props: {
 
 		if ($i && (ctx.userId === $i.id)) {
 			$note.myReaction = null;
+			// Update myReactions array
+			const index = $note.myReactions.indexOf(normalizedName);
+			if (index > -1) {
+				$note.myReactions.splice(index, 1);
+			}
 		}
 	}
 

packages/frontend/src/pages/welcome.timeline.note.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkMediaList :mediaList="note.files.slice(0, 4)"/>
 		</div>
 		<div v-if="note.reactionCount > 0" :class="$style.reactions">
-			<MkReactionsViewer :noteId="note.id" :reactions="note.reactions" :reactionEmojis="note.reactionEmojis" :myReaction="note.myReaction" :maxNumber="16"/>
+			<MkReactionsViewer :noteId="note.id" :reactions="note.reactions" :reactionEmojis="note.reactionEmojis" :myReaction="note.myReaction" :note="note" :maxNumber="16"/>
 		</div>
 	</div>
 </div>