From dd736b8990e6330981d60e89e22781bba7c43676 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Tue, 31 Oct 2023 20:46:03 +0900
Subject: [PATCH 1/6] (fix) reactionViewer mock

---
 packages/frontend/src/components/MkNote.vue   |  2 +-
 .../components/MkReactionsViewer.reaction.vue | 37 ++++++++++---------
 .../src/components/MkReactionsViewer.vue      |  4 +-
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index d8a8aa39c0..0319eb61d6 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -84,7 +84,7 @@ 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 :note="appearNote" :maxNumber="16">
+			<MkReactionsViewer :note="appearNote" :maxNumber="16" :mock="mock">
 				<template #more>
 					<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
 				</template>
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index d0db515219..5dc19db85f 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -34,6 +34,7 @@ const props = defineProps<{
 	count: number;
 	isInitial: boolean;
 	note: Misskey.entities.Note;
+	mock?: boolean;
 }>();
 
 const buttonEl = shallowRef<HTMLElement>();
@@ -51,7 +52,7 @@ async function toggleReaction() {
 			type: 'warning',
 			text: oldReaction !== props.reaction ? i18n.ts.changeReactionConfirm : i18n.ts.cancelReactionConfirm,
 		});
-		if (confirm.canceled) return;
+		if (confirm.canceled || props.mock) return;
 
 		os.api('notes/reactions/delete', {
 			noteId: props.note.id,
@@ -92,24 +93,26 @@ onMounted(() => {
 	if (!props.isInitial) anime();
 });
 
-useTooltip(buttonEl, async (showing) => {
-	const reactions = await os.apiGet('notes/reactions', {
-		noteId: props.note.id,
-		type: props.reaction,
-		limit: 11,
-		_cacheKey_: props.count,
-	});
+if (!props.mock) {
+	useTooltip(buttonEl, async (showing) => {
+		const reactions = await os.apiGet('notes/reactions', {
+			noteId: props.note.id,
+			type: props.reaction,
+			limit: 11,
+			_cacheKey_: props.count,
+		});
 
-	const users = reactions.map(x => x.user);
+		const users = reactions.map(x => x.user);
 
-	os.popup(XDetails, {
-		showing,
-		reaction: props.reaction,
-		users,
-		count: props.count,
-		targetElement: buttonEl.value,
-	}, {}, 'closed');
-}, 100);
+		os.popup(XDetails, {
+			showing,
+			reaction: props.reaction,
+			users,
+			count: props.count,
+			targetElement: buttonEl.value,
+		}, {}, 'closed');
+	}, 100);
+}
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 52ead19a4b..4ec061a86a 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:moveClass="defaultStore.state.animation ? $style.transition_x_move : ''"
 	tag="div" :class="$style.root"
 >
-	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note"/>
+	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" :mock="mock"/>
 	<slot v-if="hasMoreReactions" name="more"/>
 </TransitionGroup>
 </template>
@@ -26,8 +26,10 @@ import { defaultStore } from '@/store.js';
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
 	maxNumber?: number;
+	mock?: boolean;
 }>(), {
 	maxNumber: Infinity,
+	mock: false,
 });
 
 const initialReactions = new Set(Object.keys(props.note.reactions));

From 512e7d9e6260477dedcb45b10cc3bed7c967def6 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Tue, 31 Oct 2023 20:46:14 +0900
Subject: [PATCH 2/6] change strings

---
 locales/index.d.ts                                         | 2 +-
 locales/ja-JP.yml                                          | 2 +-
 packages/frontend/src/components/MkTutorialDialog.Note.vue | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 383c454ca9..685430980d 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1196,10 +1196,10 @@ export interface Locale {
         "_note": {
             "title": string;
             "description": string;
-            "date": string;
             "reply": string;
             "renote": string;
             "reaction": string;
+            "menu": string;
             "howToNote": string;
         };
         "_reaction": {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index f54002f309..4e77054ee7 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1193,10 +1193,10 @@ _initialTutorial:
   _note:
     title: "ノートって何？"
     description: "Misskeyでの投稿は「ノート」と呼びます。ノートはタイムラインに時系列で並んでいて、リアルタイムで更新されていきます。"
-    date: "日付をクリックすることで、ノートの詳細ページに移動することができます。"
     reply: "返信することができます。返信に対しての返信も可能で、スレッドのように会話を続けることもできます。"
     renote: "そのノートを自分のタイムラインに流して共有することができます。テキストを追加して引用することも可能です。"
     reaction: "リアクションをつけることができます。詳しくは次のページで解説します。"
+    menu: "ノートの詳細を表示したり、リンクをコピーしたりなどの様々な操作が行えます。"
     howToNote: "ノートは、下のようなボタンから簡単にできます。チュートリアルが終わったら、早速「Misskey始めました」などと投稿してみましょう！"
   _reaction:
     title: "リアクションって何？"
diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue
index 46d35c42df..95d91cb400 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Note.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue
@@ -8,10 +8,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._note.description }}</div>
 	<MkNote :class="$style.exampleNoteRoot" style="pointer-events: none;" :note="exampleNote" :mock="true"/>
 	<div class="_gaps_s">
-		<div><small><MkTime :time="exampleNote.createdAt" colored></MkTime></small> … <b>{{ i18n.ts._initialTutorial._note.date }}</b></div>
 		<div><i class="ti ti-arrow-back-up"></i> <b>{{ i18n.ts.reply }}</b> … {{ i18n.ts._initialTutorial._note.reply }}</div>
 		<div><i class="ti ti-repeat"></i> <b>{{ i18n.ts.renote }}</b> … {{ i18n.ts._initialTutorial._note.renote }}</div>
 		<div><i class="ti ti-plus"></i> <b>{{ i18n.ts.reaction }}</b> … {{ i18n.ts._initialTutorial._note.reaction }}</div>
+		<div><i class="ti ti-plus"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div>
 	</div>
 </div>
 <div v-else-if="phase === 'howToReact'" class="_gaps">
@@ -28,7 +28,6 @@ import { ref, reactive } from 'vue';
 import { i18n } from '@/i18n.js';
 import { globalEvents } from '@/events.js';
 import { $i } from '@/account.js';
-import MkTime from '@/components/global/MkTime.vue';
 import MkNote from '@/components/MkNote.vue';
 
 const props = defineProps<{

From 2c329cfb1ec40220fbf69ca444ffce5847af37b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 1 Nov 2023 01:12:30 +0900
Subject: [PATCH 3/6] Update MkTutorialDialog.Note.vue

---
 packages/frontend/src/components/MkTutorialDialog.Note.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue
index 95d91cb400..861b5e76f3 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Note.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div><i class="ti ti-arrow-back-up"></i> <b>{{ i18n.ts.reply }}</b> … {{ i18n.ts._initialTutorial._note.reply }}</div>
 		<div><i class="ti ti-repeat"></i> <b>{{ i18n.ts.renote }}</b> … {{ i18n.ts._initialTutorial._note.renote }}</div>
 		<div><i class="ti ti-plus"></i> <b>{{ i18n.ts.reaction }}</b> … {{ i18n.ts._initialTutorial._note.reaction }}</div>
-		<div><i class="ti ti-plus"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div>
+		<div><i class="ti ti-dots"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div>
 	</div>
 </div>
 <div v-else-if="phase === 'howToReact'" class="_gaps">

From 6cb35e2f939ee53d3d6765aafa99d8fce1897ec7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 1 Nov 2023 01:13:36 +0900
Subject: [PATCH 4/6] Update ja-JP.yml

---
 locales/ja-JP.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 4e77054ee7..c4c74ff1ef 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1238,7 +1238,7 @@ _initialTutorial:
     description: "サーバーのガイドラインにより必要とされる際や、そのまま見れる状態にしておくべきではない添付ファイルには、「センシティブ」設定を付けます。"
     tryThisFile: "試しに、このノートについている画像をセンシティブにしてみましょう。"
     _exampleNote:
-      note: "納豆のフタ開けるのミスったわね… なんかグロい"
+      note: "納豆のフタ開けるのミスったわね…"
     method: "添付ファイルをセンシティブにする際は、そのファイルをクリックしてメニューを開き、「センシティブとして設定」をクリックします。"
     sensitiveSucceeded: "今後ファイルを添付する際は、お使いのサーバーのガイドラインに従って、センシティブを適切に設定してください！"
     doItToContinue: "画像をセンシティブに設定すると先に進めるようになります。"

From ddf31c392a91311ed62c087cef1b1f9977906686 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 1 Nov 2023 01:45:57 +0900
Subject: [PATCH 5/6] (fix) reactionViewer error

---
 packages/frontend/src/components/MkNote.vue      | 10 +++++++++-
 .../components/MkReactionsViewer.reaction.vue    | 16 +++++++++++++++-
 .../src/components/MkReactionsViewer.vue         | 15 ++++++++++++++-
 .../src/components/MkTutorialDialog.Note.vue     |  2 +-
 4 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 0319eb61d6..122d29eff3 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -84,7 +84,7 @@ 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 :note="appearNote" :maxNumber="16" :mock="mock">
+			<MkReactionsViewer :note="appearNote" :maxNumber="16" :mock="mock" @mockUpdateMyReaction="emitUpdReaction">
 				<template #more>
 					<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
 				</template>
@@ -545,6 +545,14 @@ function readPromo() {
 	});
 	isDeleted.value = true;
 }
+
+function emitUpdReaction(emoji: string, delta: number) {
+	if (delta < 0) {
+		emit('removeReaction', emoji);
+	} else if (delta > 0) {
+		emit('reaction', emoji);
+	}
+}
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 5dc19db85f..4c97899739 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -37,6 +37,10 @@ const props = defineProps<{
 	mock?: boolean;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'reactionToggled', emoji: string, newCount: number): void;
+}>();
+
 const buttonEl = shallowRef<HTMLElement>();
 
 const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
@@ -52,7 +56,12 @@ async function toggleReaction() {
 			type: 'warning',
 			text: oldReaction !== props.reaction ? i18n.ts.changeReactionConfirm : i18n.ts.cancelReactionConfirm,
 		});
-		if (confirm.canceled || props.mock) return;
+		if (confirm.canceled) return;
+
+		if (props.mock) {
+			emit('reactionToggled', props.reaction, (props.count - 1));
+			return;
+		}
 
 		os.api('notes/reactions/delete', {
 			noteId: props.note.id,
@@ -65,6 +74,11 @@ async function toggleReaction() {
 			}
 		});
 	} else {
+		if (props.mock) {
+			emit('reactionToggled', props.reaction, (props.count + 1));
+			return;
+		}
+
 		os.api('notes/reactions/create', {
 			noteId: props.note.id,
 			reaction: props.reaction,
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 4ec061a86a..2c982ff063 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:moveClass="defaultStore.state.animation ? $style.transition_x_move : ''"
 	tag="div" :class="$style.root"
 >
-	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" :mock="mock"/>
+	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" :mock="mock" @reactionToggled="onMockToggleReaction"/>
 	<slot v-if="hasMoreReactions" name="more"/>
 </TransitionGroup>
 </template>
@@ -32,6 +32,10 @@ const props = withDefaults(defineProps<{
 	mock: false,
 });
 
+const emit = defineEmits<{
+	(ev: 'mockUpdateMyReaction', emoji: string, delta: number): void;
+}>();
+
 const initialReactions = new Set(Object.keys(props.note.reactions));
 
 let reactions = $ref<[string, number][]>([]);
@@ -41,6 +45,15 @@ if (props.note.myReaction && !Object.keys(reactions).includes(props.note.myReact
 	reactions[props.note.myReaction] = props.note.reactions[props.note.myReaction];
 }
 
+function onMockToggleReaction(emoji: string, count: number) {
+	if (!props.mock) return;
+
+	const i = reactions.findIndex((item) => item[0] === emoji);
+	if (i < 0) return;
+
+	emit('mockUpdateMyReaction', emoji, (count - reactions[i][1]));
+}
+
 watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumber]) => {
 	let newReactions: [string, number][] = [];
 	hasMoreReactions = Object.keys(newSource).length > maxNumber;
diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue
index 861b5e76f3..81ce0f6630 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Note.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div v-else-if="phase === 'howToReact'" class="_gaps">
 	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._reaction.description }}</div>
 	<div>{{ i18n.ts._initialTutorial._reaction.letsTryReacting }}</div>
-	<MkNote :class="$style.exampleNoteRoot" :note="exampleNote" :mock="true" @reaction="addReaction" @removeReaction="removeReaction"/>
+	<MkNote :class="$style.exampleNoteRoot" :note="exampleNote" :mock="true" @reaction="addReaction" @removeReaction="removeReaction" @updateReaction="updateReaction"/>
 	<div v-if="onceReacted"><b style="color: var(--accent);"><i class="ti ti-check"></i> {{ i18n.ts._initialTutorial.wellDone }}</b> {{ i18n.ts._initialTutorial._reaction.reactNotification }}<br>{{ i18n.ts._initialTutorial._reaction.reactDone }}</div>
 </div>
 </template>

From fbb9bc37ee044c395aec5f8abf893ae6cccd6ed7 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 1 Nov 2023 01:56:13 +0900
Subject: [PATCH 6/6] (fix) path

---
 packages/frontend/src/components/MkTutorialDialog.Note.vue      | 2 +-
 packages/frontend/src/components/MkTutorialDialog.PostNote.vue  | 2 +-
 packages/frontend/src/components/MkTutorialDialog.Sensitive.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue
index 81ce0f6630..c7df1a576e 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Note.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue
@@ -48,7 +48,7 @@ const exampleNote = reactive<Misskey.entities.Note>({
 		username: 'ai',
 		host: null,
 		avatarDecorations: [],
-		avatarUrl: './client-assets/tutorial/ai.webp',
+		avatarUrl: '/client-assets/tutorial/ai.webp',
 		avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB',
 		isBot: false,
 		isCat: true,
diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
index 441594e42b..9b55a1dca7 100644
--- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
@@ -53,7 +53,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({
 		username: 'ai',
 		host: null,
 		avatarDecorations: [],
-		avatarUrl: './client-assets/tutorial/ai.webp',
+		avatarUrl: '/client-assets/tutorial/ai.webp',
 		avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB',
 		isBot: false,
 		isCat: true,
diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
index 659fd7c0fc..2188935ebf 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
@@ -54,7 +54,7 @@ const exampleNote = reactive<Misskey.entities.Note>({
 		username: 'syuilo',
 		host: null,
 		avatarDecorations: [],
-		avatarUrl: './client-assets/tutorial/syuilo.webp',
+		avatarUrl: '/client-assets/tutorial/syuilo.webp',
 		avatarBlurhash: 'yFF5Kq0L00?a^*IBNG01^j-pV@D*o|xt58WB}@9at7s.Ip~AWB57%Laes:xaOEoLnis:ofIpoJr?NHtRV@oLoeNHNI%1M{kCWCjuxZ',
 		isBot: false,
 		isCat: true,