enhance(client): ノートを離して表示オプションを有効にすると、通知ページのノートも離するように

CHANGELOG_CHERRYPICK.md

@@ -62,6 +62,7 @@
 - 채팅방 목록 페이지 디자인 개선
 - 리노트 문구를 노트 최상단으로 배치
 - 특정 MFM 구문이 포함된 노트를 간략화 할지 선택할 수 있음(enhance: [aba0755](https://github.com/kokonect-link/cherrypick/commit/aba0755880d6797f49d34c8b7fe2c602d153e367))
+- 노트 사이를 띄우는 옵션 활성화 시 알림 페이지의 노트도 띄우도록
 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제

packages/frontend/src/components/MkNote.vue

@@ -4,7 +4,7 @@
 	v-show="!isDeleted"
 	ref="el"
 	v-hotkey="keymap"
-	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
+	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover, [$style.radius]: defaultStore.state.showGapBetweenNotesInTimeline && mainRouter.currentRoute.value.name === 'my-notifications' }]"
 	:tabindex="!isDeleted ? '-1' : undefined"
 >
 	<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
@@ -481,6 +481,7 @@ function showReactions(): void {
 	font-size: 1.05em;
 	overflow: clip;
 	contain: content;
+	background: var(--panel);
 
 	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
 	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
@@ -548,6 +549,10 @@ function showReactions(): void {
 			visibility: visible;
 		}
 	}
+
+	&.radius {
+		border-radius: var(--radius);
+	}
 }
 
 .tip {

packages/frontend/src/components/MkNotifications.vue

@@ -8,7 +8,7 @@
 	</template>
 
 	<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline || mainRouter.currentRoute.value.name !== 'my-notifications'">
 			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
 			<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
 		</MkDateSeparatedList>
@@ -26,6 +26,8 @@ import { useStream } from '@/stream';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { notificationTypes } from '@/const';
+import { defaultStore } from '@/store';
+import { mainRouter } from '@/router';
 
 const props = defineProps<{
 	includeTypes?: typeof notificationTypes[number][];

packages/frontend/src/pages/timeline.vue

@@ -166,7 +166,6 @@ async function reloadAsk() {
 }
 
 const headerActions = $computed(() => [{
-	asFullButton: true,
 	icon: 'ti ti-column-insert-left',
 	text: i18n.ts.friendlyEnableNotification,
 	handler: () => {