enhance(client): Renote時に表示されるトーストポップアップにアイコンを追加

CHANGELOG_CHERRYPICK.md

@@ -68,6 +68,7 @@
 - 네비게이션 메뉴 편집 페이지 UI 개선 ([shrimpia bf8c84d](https://github.com/shrimpia/misskey/commit/bf8c84d299bd06cb21e18a9fe68ff9abc11fd4a0))
 - 「노트 본문에 번역 버튼 표시」를 선택 사항으로 설정
 - 답글도 번역할 수 있도록 개선
+- 리노트 했을 때 뜨는 토스트 팝업에 아이콘 추가
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

packages/frontend/src/components/MkNote.vue

@@ -306,7 +306,7 @@ function renote(viaKeyboard = false) {
 					renoteId: appearNote.id,
 					channelId: appearNote.channelId,
 				}).then(() => {
-					os.toast(i18n.ts.renoted);
+					os.noteToast(i18n.ts.renoted);
 				});
 			},
 		}, {
@@ -336,7 +336,7 @@ function renote(viaKeyboard = false) {
 			os.api('notes/create', {
 				renoteId: appearNote.id,
 			}).then(() => {
-				os.toast(i18n.ts.renoted);
+				os.noteToast(i18n.ts.renoted);
 			});
 		},
 	}, {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -274,7 +274,7 @@ function renote(viaKeyboard = false) {
 					renoteId: appearNote.id,
 					channelId: appearNote.channelId,
 				}).then(() => {
-					os.toast(i18n.ts.renoted);
+					os.noteToast(i18n.ts.renoted);
 				});
 			},
 		}, {
@@ -304,7 +304,7 @@ function renote(viaKeyboard = false) {
 			os.api('notes/create', {
 				renoteId: appearNote.id,
 			}).then(() => {
-				os.toast(i18n.ts.renoted);
+				os.noteToast(i18n.ts.renoted);
 			});
 		},
 	}, {

packages/frontend/src/components/MkNoteToast.vue

@@ -0,0 +1,75 @@
+<template>
+<div>
+	<Transition
+		:enterActiveClass="defaultStore.state.animation ? $style.transition_toast_enterActive : ''"
+		:leaveActiveClass="defaultStore.state.animation ? $style.transition_toast_leaveActive : ''"
+		:enterFromClass="defaultStore.state.animation ? $style.transition_toast_enterFrom : ''"
+		:leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
+		appear @afterLeave="emit('closed')"
+	>
+		<div v-if="showing" class="_acrylic" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ zIndex }">
+			<div style="padding: 16px 24px;">
+				<i class="ti ti-check"></i>
+				{{ message }}
+			</div>
+		</div>
+	</Transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+
+defineProps<{
+	message: string;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const zIndex = os.claimZIndex('high');
+let showing = $ref(true);
+
+onMounted(() => {
+	window.setTimeout(() => {
+		showing = false;
+	}, 4000);
+});
+</script>
+
+<style lang="scss" module>
+.transition_toast_enterActive,
+.transition_toast_leaveActive {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.transition_toast_enterFrom,
+.transition_toast_leaveTo {
+	opacity: 0;
+	transform: translateY(-100%);
+}
+
+.root {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 50px;
+	margin: 16px auto 0;
+	min-width: 300px;
+	max-width: calc(100% - 32px);
+	width: min-content;
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+	border-radius: 8px;
+	overflow: clip;
+	text-align: center;
+	pointer-events: none;
+
+	@media (max-width: 500px) {
+		&.reduceBlurEffect {
+			background: var(--panel);
+		}
+	}
+}
+</style>

packages/frontend/src/os.ts

@@ -11,6 +11,7 @@ import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
 import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
 import MkPageWindow from '@/components/MkPageWindow.vue';
 import MkToast from '@/components/MkToast.vue';
+import MkNoteToast from '@/components/MkNoteToast.vue';
 import MkWelcomeToast from '@/components/MkWelcomeToast.vue';
 import MkDialog from '@/components/MkDialog.vue';
 import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue';
@@ -179,6 +180,12 @@ export function toast(message: string) {
 	}, {}, 'closed');
 }
 
+export function noteToast(message: string) {
+	popup(MkNoteToast, {
+		message,
+	}, {}, 'closed');
+}
+
 export function welcomeToast(message: string) {
 	popup(MkWelcomeToast, {
 		message,