packages/frontend/src/components/MkNotes.vue

@@ -13,26 +13,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</template>
 
 	<template #default="{ items: notes }">
-		<div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap }]">
-			<template v-for="(note, i) in notes" :key="note.id">
-				<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
-				<div v-if="note._shouldInsertAd_" :class="$style.ad">
-					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-				</div>
-			</template>
+		<div :class="[$style.root, { [$style.noGap]: noGap }]">
+			<MkDateSeparatedList
+				ref="notes"
+				v-slot="{ item: note }"
+				:items="notes"
+				:direction="pagination.reversed ? 'up' : 'down'"
+				:reversed="pagination.reversed"
+				:noGap="noGap"
+				:ad="true"
+				:class="$style.notes"
+			>
+				<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note" :withHardMute="true"/>
+			</MkDateSeparatedList>
 		</div>
 	</template>
 </MkPagination>
 </template>
 
 <script lang="ts" setup>
-import { useTemplateRef, TransitionGroup } from 'vue';
+import { useTemplateRef } from 'vue';
 import type { Paging } from '@/components/MkPagination.vue';
 import MkNote from '@/components/MkNote.vue';
+import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
-import { prefer } from '@/preferences.js';
 
 const props = defineProps<{
 	pagination: Paging;
@@ -49,29 +55,20 @@ defineExpose({
 
 <style lang="scss" module>
 .root {
-	container-type: inline-size;
-
 	&.noGap {
-		background: var(--MI_THEME-panel);
-
-		.note {
-			border-bottom: solid 0.5px var(--MI_THEME-divider);
-		}
-
-		.ad {
-			padding: 8px;
-			background-size: auto auto;
-			background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-bg) 8px, var(--MI_THEME-bg) 14px);
-			border-bottom: solid 0.5px var(--MI_THEME-divider);
+		> .notes {
+			background: var(--MI_THEME-panel);
 		}
 	}
 
 	&:not(.noGap) {
-		background: var(--MI_THEME-bg);
+		> .notes {
+			background: var(--MI_THEME-bg);
 
-		.note {
-			background: var(--MI_THEME-panel);
-			border-radius: var(--MI-radius);
+			.note {
+				background: var(--MI_THEME-panel);
+				border-radius: var(--MI-radius);
+			}
 		}
 	}
 }

packages/frontend/src/components/MkNotifications.vue

@@ -14,12 +14,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 
 		<template #default="{ items: notifications }">
-			<div :class="$style.notifications">
-				<template v-for="(notification, i) in notifications" :key="notification.id">
-					<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true"/>
-					<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true"/>
-				</template>
-			</div>
+			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id + ':note'" :note="notification.note" :withHardMute="true"/>
+				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
+			</MkDateSeparatedList>
 		</template>
 	</MkPagination>
 </MkPullToRefresh>
@@ -31,6 +29,7 @@ import * as Misskey from 'misskey-js';
 import type { notificationTypes } from '@@/js/const.js';
 import MkPagination from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
+import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import MkNote from '@/components/MkNote.vue';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
@@ -85,22 +84,28 @@ onMounted(() => {
 	connection.on('notificationFlushed', reload);
 });
 
+onActivated(() => {
+	pagingComponent.value?.reload();
+	connection = useStream().useChannel('main');
+	connection.on('notification', onNotification);
+	connection.on('notificationFlushed', reload);
+});
+
 onUnmounted(() => {
 	if (connection) connection.dispose();
 });
 
+onDeactivated(() => {
+	if (connection) connection.dispose();
+});
+
 defineExpose({
 	reload,
 });
 </script>
 
 <style lang="scss" module>
-.notifications {
-	container-type: inline-size;
+.list {
 	background: var(--MI_THEME-panel);
 }
-
-.item {
-	border-bottom: solid 0.5px var(--MI_THEME-divider);
-}
 </style>

packages/frontend/src/components/MkPagination.vue

@@ -4,34 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkLoading v-if="fetching"/>
+<Transition
+	:enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
+	mode="out-in"
+>
+	<MkLoading v-if="fetching"/>
 
-<MkError v-else-if="error" @retry="init()"/>
+	<MkError v-else-if="error" @retry="init()"/>
 
-<div v-else-if="empty" key="_empty_" class="empty">
-	<slot name="empty">
-		<div class="_fullinfo">
-			<img :src="infoImageUrl" draggable="false"/>
-			<div>{{ i18n.ts.nothing }}</div>
+	<div v-else-if="empty" key="_empty_" class="empty">
+		<slot name="empty">
+			<div class="_fullinfo">
+				<img :src="infoImageUrl" draggable="false"/>
+				<div>{{ i18n.ts.nothing }}</div>
+			</div>
+		</slot>
+	</div>
+
+	<div v-else ref="rootEl" class="_gaps">
+		<div v-show="pagination.reversed && more" key="_more_">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMoreAhead">
+				{{ i18n.ts.loadMore }}
+			</MkButton>
+			<MkLoading v-else class="loading"/>
+		</div>
+		<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
+		<div v-show="!pagination.reversed && more" key="_more_">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">
+				{{ i18n.ts.loadMore }}
+			</MkButton>
+			<MkLoading v-else class="loading"/>
 		</div>
-	</slot>
-</div>
-
-<div v-else ref="rootEl" class="_gaps">
-	<div v-show="pagination.reversed && more" key="_more_">
-		<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMoreAhead">
-			{{ i18n.ts.loadMore }}
-		</MkButton>
-		<MkLoading v-else class="loading"/>
 	</div>
-	<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
-	<div v-show="!pagination.reversed && more" key="_more_">
-		<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">
-			{{ i18n.ts.loadMore }}
-		</MkButton>
-		<MkLoading v-else class="loading"/>
-	</div>
-</div>
+</Transition>
 </template>
 
 <script lang="ts">
@@ -483,6 +491,15 @@ defineExpose({
 </script>
 
 <style lang="scss" module>
+.transition_fade_enterActive,
+.transition_fade_leaveActive {
+	transition: opacity 0.125s ease;
+}
+.transition_fade_enterFrom,
+.transition_fade_leaveTo {
+	opacity: 0;
+}
+
 .more {
 	margin-left: auto;
 	margin-right: auto;

packages/frontend/src/ui/deck/column.vue

@@ -377,7 +377,7 @@ function onDrop(ev) {
 	font-size: 0.9em;
 	color: var(--MI_THEME-panelHeaderFg);
 	background: var(--MI_THEME-panelHeaderBg);
-	box-shadow: 0 0.5px 0 0 var(--MI_THEME-panelHeaderDivider);
+	box-shadow: 0 1px 0 0 var(--MI_THEME-panelHeaderDivider);
 	cursor: pointer;
 	user-select: none;
 }