fix: 新しいノート通知がプロフィールアイコンを押し出す問題

CHANGELOG_CHERRYPICK.md

@@ -45,6 +45,7 @@
 - Fix: 일부 옵션 변경 시 페이지를 새로 고치도록
 - Fix: 위젯 추가 영역의 위치가 오른쪽으로 치우쳐 있음
 - Fix: 노트 작성 폼의 프로필 아이콘 여백 조정
+- Fix: 새 노트 알림이 프로필 아이콘을 밀어내는 문제
 
 ---
 

packages/frontend/src/pages/timeline.vue

@@ -2,27 +2,28 @@
 <MkStickyContainer>
 	<template #header>
 		<MkPageHeader v-model:tab="src" style="position: relative; z-index: 1001" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/>
-		<transition
-			:enter-active-class="defaultStore.state.animation ? $style.transition_new_enterActive : ''"
-			:leave-active-class="defaultStore.state.animation ? $style.transition_new_leaveActive : ''"
-			:enter-from-class="defaultStore.state.animation ? $style.transition_new_enterFrom : ''"
-			:leave-to-class="defaultStore.state.animation ? $style.transition_new_leaveTo : ''"
-		>
-			<div v-if="queue > 0 && defaultStore.state.newNoteRecivedNotificationBehavior === 'default'" :class="[$style.new, {[$style.reduceAnimation]: !defaultStore.state.animation }]"><button class="_buttonPrimary" :class="$style.newButton" @click="top()"><i class="ti ti-arrow-up"></i>{{ i18n.ts.newNoteRecived }}</button></div>
-		</transition>
-		<transition
-			:enter-active-class="defaultStore.state.animation ? $style.transition_new_enterActive : ''"
-			:leave-active-class="defaultStore.state.animation ? $style.transition_new_leaveActive : ''"
-			:enter-from-class="defaultStore.state.animation ? $style.transition_new_enterFrom : ''"
-			:leave-to-class="defaultStore.state.animation ? $style.transition_new_leaveTo : ''"
-		>
-			<div v-if="queue > 0 && defaultStore.state.newNoteRecivedNotificationBehavior === 'count'" :class="[$style.new, {[$style.reduceAnimation]: !defaultStore.state.animation }]"><button class="_buttonPrimary" :class="$style.newButton" @click="top()"><i class="ti ti-arrow-up"></i><I18n :src="i18n.ts.newNoteRecivedCount" text-tag="span"><template #n>{{ queue }}</template></I18n></button></div>
-		</transition>
 	</template>
 	<MkSpacer :contentMax="800">
 		<div ref="rootEl" v-hotkey.global="keymap">
 			<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
 			<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
+
+			<transition
+				:enterActiveClass="defaultStore.state.animation ? $style.transition_new_enterActive : ''"
+				:leaveActiveClass="defaultStore.state.animation ? $style.transition_new_leaveActive : ''"
+				:enterFromClass="defaultStore.state.animation ? $style.transition_new_enterFrom : ''"
+				:leaveToClass="defaultStore.state.animation ? $style.transition_new_leaveTo : ''"
+			>
+				<div v-if="queue > 0 && defaultStore.state.newNoteRecivedNotificationBehavior === 'default'" :class="[$style.new, { [$style.showEl]: showEl && isMobile, [$style.reduceAnimation]: !defaultStore.state.animation }]"><button class="_buttonPrimary" :class="$style.newButton" @click="top()"><i class="ti ti-arrow-up"></i>{{ i18n.ts.newNoteRecived }}</button></div>
+			</transition>
+			<transition
+				:enterActiveClass="defaultStore.state.animation ? $style.transition_new_enterActive : ''"
+				:leaveActiveClass="defaultStore.state.animation ? $style.transition_new_leaveActive : ''"
+				:enterFromClass="defaultStore.state.animation ? $style.transition_new_enterFrom : ''"
+				:leaveToClass="defaultStore.state.animation ? $style.transition_new_leaveTo : ''"
+			>
+				<div v-if="queue > 0 && defaultStore.state.newNoteRecivedNotificationBehavior === 'count'" :class="[$style.new, { [$style.showEl]: showEl && isMobile, [$style.reduceAnimation]: !defaultStore.state.animation }]"><button class="_buttonPrimary" :class="$style.newButton" @click="top()"><i class="ti ti-arrow-up"></i><I18n :src="i18n.ts.newNoteRecivedCount" textTag="span"><template #n>{{ queue }}</template></I18n></button></div>
+			</transition>
 			<div :class="$style.tl">
 				<MkTimeline
 					ref="tlComponent"
@@ -38,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch, ref, onMounted, provide } from 'vue';
+import { defineAsyncComponent, computed, watch, ref, provide, onMounted } from 'vue';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
@@ -53,6 +54,7 @@ import { eventBus } from '@/scripts/cherrypick/eventBus';
 import { miLocalStorage } from '@/local-storage';
 import { deviceKind } from '@/scripts/device-kind';
 
+let showEl = $ref(false);
 const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
 
 if (!isFriendly.value) provide('shouldOmitHeaderTitle', true);
@@ -81,6 +83,12 @@ const src = $computed({ get: () => ($i ? defaultStore.reactiveState.tl.value.src
 
 watch ($$(src), () => queue = 0);
 
+onMounted(() => {
+	eventBus.on('showEl', (showEl_receive) => {
+		showEl = showEl_receive;
+	});
+});
+
 function queueUpdated(q: number): void {
 	queue = q;
 	eventBus.emit('queueUpdated', q);
@@ -217,15 +225,20 @@ definePageMetadata(computed(() => ({
 
 .new {
 	position: sticky;
-	top: 64px;
+	top: calc(var(--stickyTop, 0px) + 16px);
 	z-index: 1000;
 	width: 100%;
+	margin: calc(-0.675em - 8px) 0;
 	transition: opacity 0.5s, transform 0.5s;
 
 	&:first-child {
 		margin-top: calc(-0.675em - 8px - var(--margin));
 	}
 
+	&.showEl {
+		transform: translateY(calc(var(--stickyTop, 0px) - 189px))
+	}
+
 	&.reduceAnimation {
 		transition: opacity 0s, transform 0s;
 	}