🎨

This reverts commit 2b42e8f171.

packages/frontend/src/components/MkNotes.vue

@@ -13,32 +13,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</template>
 
 	<template #default="{ items: notes }">
-		<div :class="[$style.root, { [$style.noGap]: noGap }]">
+		<div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap }]">
-			<MkDateSeparatedList
+			<template v-for="(note, i) in notes" :key="note.id">
-				ref="notes"
+				<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
-				v-slot="{ item: note }"
+				<div v-if="note._shouldInsertAd_" :class="$style.ad">
-				:items="notes"
+					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-				:direction="pagination.reversed ? 'up' : 'down'"
+				</div>
-				:reversed="pagination.reversed"
+			</template>
-				: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 } from 'vue';
+import { useTemplateRef, TransitionGroup } 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;
@@ -55,20 +49,29 @@ defineExpose({
 
 <style lang="scss" module>
 .root {
+	container-type: inline-size;
+
 	&.noGap {
-		> .notes {
+		background: var(--MI_THEME-panel);
-			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);
 		}
 	}
 
 	&:not(.noGap) {
-		> .notes {
+		background: var(--MI_THEME-bg);
-			background: var(--MI_THEME-bg);
 
-			.note {
+		.note {
-				background: var(--MI_THEME-panel);
+			background: var(--MI_THEME-panel);
-				border-radius: var(--MI-radius);
+			border-radius: var(--MI-radius);
-			}
 		}
 	}
 }

packages/frontend/src/components/MkNotifications.vue

@@ -14,10 +14,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 
 		<template #default="{ items: notifications }">
-			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+			<div :class="$style.notifications">
-				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id + ':note'" :note="notification.note" :withHardMute="true"/>
+				<template v-for="(notification, i) in notifications" :key="notification.id">
-				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
+					<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true"/>
-			</MkDateSeparatedList>
+					<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true"/>
+				</template>
+			</div>
 		</template>
 	</MkPagination>
 </MkPullToRefresh>
@@ -29,7 +31,6 @@ 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';
@@ -84,28 +85,22 @@ 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>
-.list {
+.notifications {
+	container-type: inline-size;
 	background: var(--MI_THEME-panel);
 }
+
+.item {
+	border-bottom: solid 0.5px var(--MI_THEME-divider);
+}
 </style>

packages/frontend/src/components/MkPagination.vue

@@ -4,42 +4,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<Transition
+<MkLoading v-if="fetching"/>
-	: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">
+<div v-else-if="empty" key="_empty_" class="empty">
-		<slot name="empty">
+	<slot name="empty">
-			<div class="_fullinfo">
+		<div class="_fullinfo">
-				<img :src="infoImageUrl" draggable="false"/>
+			<img :src="infoImageUrl" draggable="false"/>
-				<div>{{ i18n.ts.nothing }}</div>
+			<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>
-</Transition>
+	<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>
 </template>
 
 <script lang="ts">
@@ -491,15 +483,6 @@ 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 1px 0 0 var(--MI_THEME-panelHeaderDivider);
+	box-shadow: 0 0.5px 0 0 var(--MI_THEME-panelHeaderDivider);
 	cursor: pointer;
 	user-select: none;
 }