Merge branch 'develop' into better-tutorial

* Update emojilist.json

* Update CHANGELOG.md

CHANGELOG.md

@@ -50,6 +50,7 @@
 - Fix: チャンネルの作成・更新時に失敗した場合何も表示されない問題を修正 #11983
 - Fix: 個人カードのemojiがバッテリーになっている問題を修正
 - Fix: 標準テーマと同じIDを使用してインストールできてしまう問題を修正
+- Fix: 絵文字ピッカーでバッテリーの絵文字が複数表示される問題を修正 #12197
 
 ### Server
 - Enhance: RedisへのTLのキャッシュ(FTT)をオフにできるように

CONTRIBUTING.md

@@ -15,7 +15,7 @@ Before creating an issue, please check the following:
 - To avoid duplication, please search for similar issues before creating a new issue.
 - Do not use Issues to ask questions or troubleshooting.
 	- Issues should only be used to feature requests, suggestions, and bug tracking.
-	- Please ask questions or troubleshooting in ~~the [Misskey Forum](https://forum.misskey.io/)~~ [GitHub Discussions](https://github.com/misskey-dev/misskey/discussions) or [Discord](https://discord.gg/Wp8gVStHW3).
+	- Please ask questions or troubleshooting in [GitHub Discussions](https://github.com/misskey-dev/misskey/discussions) or [Discord](https://discord.gg/Wp8gVStHW3).
 
 > **Warning**
 > Do not close issues that are about to be resolved. It should remain open until a commit that actually resolves it is merged.

locales/index.d.ts

@@ -1612,6 +1612,10 @@ export interface Locale {
                 "title": string;
                 "description": string;
             };
+            "_tutorialCompleted": {
+                "title": string;
+                "description": string;
+            };
         };
     };
     "_role": {

locales/ja-JP.yml

@@ -1524,6 +1524,9 @@ _achievements:
     _smashTestNotificationButton:
       title: "テスト過剰"
       description: "通知のテストをごく短時間のうちに連続して行った"
+    _tutorialCompleted:
+      title: "Misskey初心者講座 修了証"
+      description: "チュートリアルを完了した"
 
 _role:
   new: "ロールの作成"

packages/backend/src/core/AchievementService.ts

@@ -86,6 +86,7 @@ export const ACHIEVEMENT_TYPES = [
 	'cookieClicked',
 	'brainDiver',
 	'smashTestNotificationButton',
+	'tutorialCompleted',
 ] as const;
 
 @Injectable()

packages/frontend/src/components/MkNotification.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="elRef" :class="$style.root">
+<div :class="$style.root">
 	<div :class="$style.head">
 		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user" link preview/>
 		<MkAvatar v-else-if="notification.type === 'note'" :class="$style.icon" :user="notification.note.user" link preview/>
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<MkReactionIcon
 				v-else-if="notification.type === 'reaction'"
-				ref="reactionRef"
+				:withTooltip="true"
 				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
 				:noStyle="true"
 				style="width: 100%; height: 100%;"
@@ -111,6 +111,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkAvatar :class="$style.reactionsItemAvatar" :user="reaction.user" link preview/>
 					<div :class="$style.reactionsItemReaction">
 						<MkReactionIcon
+							:withTooltip="true"
 							:reaction="reaction.reaction ? reaction.reaction.replace(/^:(\w+):$/, ':$1@.:') : reaction.reaction"
 							:noStyle="true"
 							style="width: 100%; height: 100%;"
@@ -133,14 +134,12 @@ import { ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
-import XReactionTooltip from '@/components/MkReactionTooltip.vue';
 import MkButton from '@/components/MkButton.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
-import { useTooltip } from '@/scripts/use-tooltip.js';
 import { $i } from '@/account.js';
 import { infoImageUrl } from '@/instance.js';
 
@@ -153,9 +152,6 @@ const props = withDefaults(defineProps<{
 	full: false,
 });
 
-const elRef = shallowRef<HTMLElement>(null);
-const reactionRef = ref(null);
-
 const followRequestDone = ref(false);
 
 const acceptFollowRequest = () => {
@@ -167,15 +163,6 @@ const rejectFollowRequest = () => {
 	followRequestDone.value = true;
 	os.api('following/requests/reject', { userId: props.notification.user.id });
 };
-
-useTooltip(reactionRef, (showing) => {
-	os.popup(XReactionTooltip, {
-		showing,
-		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
-		emojis: props.notification.note.emojis,
-		targetElement: reactionRef.value.$el,
-	}, {}, 'closed');
-});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkReactionIcon.vue

@@ -4,16 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
-<MkEmoji v-else :emoji="reaction" :normal="true" :noStyle="noStyle"/>
+<MkCustomEmoji v-if="reaction[0] === ':'" ref="elRef" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
+<MkEmoji v-else ref="elRef" :emoji="reaction" :normal="true" :noStyle="noStyle"/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { defineAsyncComponent, shallowRef } from 'vue';
+import { useTooltip } from '@/scripts/use-tooltip.js';
+import * as os from '@/os.js';
 
 const props = defineProps<{
 	reaction: string;
 	noStyle?: boolean;
 	emojiUrl?: string;
+	withTooltip?: boolean;
 }>();
+
+const elRef = shallowRef();
+
+if (props.withTooltip) {
+	useTooltip(elRef, (showing) => {
+		os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
+			showing,
+			reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
+			targetElement: elRef.value.$el,
+		}, {}, 'closed');
+	});
+}
 </script>

packages/frontend/src/components/MkTutorialDialog.vue

@@ -148,7 +148,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef } from 'vue';
+import { ref, shallowRef, watch } from 'vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import XNote from '@/components/MkTutorialDialog.Note.vue';
@@ -159,6 +159,7 @@ import MkAnimBg from '@/components/MkAnimBg.vue';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { host } from '@/config.js';
+import { claimAchievement } from '@/scripts/achievements.js';
 import * as os from '@/os.js';
 
 const props = defineProps<{
@@ -174,6 +175,13 @@ const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 // eslint-disable-next-line vue/no-setup-props-destructure
 const page = ref(props.initialPage ?? 0);
 
+watch(page, (to) => {
+	// チュートリアルの枚数を増やしたら必ず変更すること！！
+	if (to === 6) {
+		claimAchievement('tutorialCompleted');
+	}
+});
+
 const isReactionTutorialPushed = ref<boolean>(false);
 const isSensitiveTutorialSucceeded = ref<boolean>(false);
 

packages/frontend/src/emojilist.json

@@ -1045,7 +1045,7 @@
 	["⌛", "hourglass", 6],
 	["📡", "satellite", 6],
 	["🔋", "battery", 6],
-	["🪫", "battery", 6],
+	["🪫", "low_battery", 6],
 	["🔌", "electric_plug", 6],
 	["💡", "bulb", 6],
 	["🔦", "flashlight", 6],

packages/frontend/src/scripts/achievements.ts

@@ -82,6 +82,7 @@ export const ACHIEVEMENT_TYPES = [
 	'cookieClicked',
 	'brainDiver',
 	'smashTestNotificationButton',
+	'tutorialCompleted',
 ] as const;
 
 export const ACHIEVEMENT_BADGES = {
@@ -460,6 +461,11 @@ export const ACHIEVEMENT_BADGES = {
 		bg: 'linear-gradient(0deg, rgb(187 183 59), rgb(255 143 77))',
 		frame: 'bronze',
 	},
+	'tutorialCompleted': {
+		img: '/fluent-emoji/1f393.png',
+		bg: 'linear-gradient(0deg, rgb(220 223 225), rgb(172 192 207))',
+		frame: 'bronze',
+	},
 /* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
 } as const satisfies Record<typeof ACHIEVEMENT_TYPES[number], {
 	img: string;

packages/frontend/src/scripts/use-tooltip.ts

@@ -37,7 +37,7 @@ export function useTooltip(
 		};
 
 		autoHidingTimer = window.setInterval(() => {
-			if (!document.body.contains(elRef.value)) {
+			if (elRef.value == null || !document.body.contains(elRef.value instanceof Element ? elRef.value : elRef.value.$el)) {
 				if (!isHovering) return;
 				isHovering = false;
 				window.clearTimeout(timeoutId);

packages/misskey-js/CONTRIBUTING.md

@@ -15,7 +15,7 @@ Issueを作成する前に、以下をご確認ください:
 - 重複を防ぐため、既に同様の内容のIssueが作成されていないか検索してから新しいIssueを作ってください。
 - Issueを質問に使わないでください。
 	- Issueは、要望、提案、問題の報告にのみ使用してください。
-	- 質問は、[Misskey Forum](https://forum.misskey.io/)や[Discord](https://discord.gg/Wp8gVStHW3)でお願いします。
+	- 質問は、[GitHub Discussions](https://github.com/misskey-dev/misskey/discussions)や[Discord](https://discord.gg/Wp8gVStHW3)でお願いします。
 
 ## PRの作成
 PRを作成する前に、以下をご確認ください:

packages/misskey-js/docs/CONTRIBUTING.en.md

@@ -11,7 +11,7 @@ Before creating an issue, please check the following:
 - To avoid duplication, please search for similar issues before creating a new issue.
 - Do not use Issues as a question.
 	- Issues should only be used to feature requests, suggestions, and report problems.
-	- Please ask questions in the [Misskey Forum](https://forum.misskey.io/) or [Discord](https://discord.gg/Wp8gVStHW3).
+	- Please ask questions in [GitHub Discussions](https://github.com/misskey-dev/misskey/discussions) or [Discord](https://discord.gg/Wp8gVStHW3).
 
 ## Creating a PR
 Thank you for your PR! Before creating a PR, please check the following: