From 8430256f220400e4cf14ac8d0a0c60e637c3d148 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:29:18 +0900
Subject: [PATCH] clean up

---
 .../MkDateSeparatedList.stories.impl.ts       |   7 -
 .../src/components/MkDateSeparatedList.vue    | 254 ------------------
 packages/frontend/src/pages/favorites.vue     |   5 +-
 3 files changed, 1 insertion(+), 265 deletions(-)
 delete mode 100644 packages/frontend/src/components/MkDateSeparatedList.stories.impl.ts
 delete mode 100644 packages/frontend/src/components/MkDateSeparatedList.vue

diff --git a/packages/frontend/src/components/MkDateSeparatedList.stories.impl.ts b/packages/frontend/src/components/MkDateSeparatedList.stories.impl.ts
deleted file mode 100644
index 0e5635754c..0000000000
--- a/packages/frontend/src/components/MkDateSeparatedList.stories.impl.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import MkDateSeparatedList from './MkDateSeparatedList.vue';
-void MkDateSeparatedList;
diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
deleted file mode 100644
index 82561055bc..0000000000
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<!-- TODO: 親からスタイルを当てにくいことや実装がトリッキーなことを鑑み廃止または使用の縮小(timeline-date-separate.tsを使う) -->
-
-<script lang="ts">
-import { defineComponent, h, TransitionGroup, useCssModule } from 'vue';
-import MkAd from '@/components/global/MkAd.vue';
-import { isDebuggerEnabled, stackTraceInstances } from '@/debug.js';
-import * as os from '@/os.js';
-import { instance } from '@/instance.js';
-import { prefer } from '@/preferences.js';
-import { getDateText } from '@/utility/timeline-date-separate.js';
-
-export default defineComponent({
-	props: {
-		items: {
-			type: Array,
-			required: true,
-		},
-		direction: {
-			type: String,
-			required: false,
-			default: 'down',
-		},
-		reversed: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		noGap: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		ad: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-
-	setup(props, { slots, expose }) {
-		const $style = useCssModule(); // カスタムレンダラなので使っても大丈夫
-
-		if (props.items.length === 0) return;
-
-		const renderChildrenImpl = () => props.items.map((item, i) => {
-			if (!slots || !slots.default) return;
-
-			const el = slots.default({
-				item: item,
-			})[0];
-			if (el.key == null && item.id) el.key = item.id;
-
-			const date = new Date(item.createdAt);
-			const nextDate = props.items[i + 1] ? new Date(props.items[i + 1].createdAt) : null;
-
-			if (
-				i !== props.items.length - 1 &&
-				nextDate != null && (
-					date.getFullYear() !== nextDate.getFullYear() ||
-					date.getMonth() !== nextDate.getMonth() ||
-					date.getDate() !== nextDate.getDate()
-				)
-			) {
-				const separator = h('div', {
-					class: $style['separator'],
-					key: item.id + ':separator',
-				}, h('p', {
-					class: $style['date'],
-				}, [
-					h('span', {
-						class: $style['date-1'],
-					}, [
-						h('i', {
-							class: `ti ti-chevron-up ${$style['date-1-icon']}`,
-						}),
-						getDateText(date),
-					]),
-					h('span', {
-						class: $style['date-2'],
-					}, [
-						getDateText(nextDate),
-						h('i', {
-							class: `ti ti-chevron-down ${$style['date-2-icon']}`,
-						}),
-					]),
-				]));
-
-				return [el, separator];
-			} else {
-				if (props.ad && instance.ads.length > 0 && item._shouldInsertAd_) {
-					return [h('div', {
-						key: item.id + ':ad',
-						class: $style['ad-wrapper'],
-					}, [h(MkAd, {
-						prefer: ['horizontal', 'horizontal-big'],
-					})]), el];
-				} else {
-					return el;
-				}
-			}
-		});
-
-		const renderChildren = () => {
-			const children = renderChildrenImpl();
-			if (isDebuggerEnabled(6864)) {
-				const nodes = children.flatMap((node) => node ?? []);
-				const keys = new Set(nodes.map((node) => node.key));
-				if (keys.size !== nodes.length) {
-					const id = crypto.randomUUID();
-					const instances = stackTraceInstances();
-					os.toast(instances.reduce((a, c) => `${a} at ${c.type.name}`, `[DEBUG_6864 (${id})]: ${nodes.length - keys.size} duplicated keys found`));
-					console.warn({ id, debugId: 6864, stack: instances });
-				}
-			}
-			return children;
-		};
-
-		function onBeforeLeave(el: Element) {
-			if (!(el instanceof HTMLElement)) return;
-			el.style.top = `${el.offsetTop}px`;
-			el.style.left = `${el.offsetLeft}px`;
-		}
-
-		function onLeaveCancelled(el: Element) {
-			if (!(el instanceof HTMLElement)) return;
-			el.style.top = '';
-			el.style.left = '';
-		}
-
-		// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-		const classes = {
-			[$style['date-separated-list']]: true,
-			[$style['date-separated-list-nogap']]: props.noGap,
-			[$style['reversed']]: props.reversed,
-			[$style['direction-down']]: props.direction === 'down',
-			[$style['direction-up']]: props.direction === 'up',
-		};
-
-		return () => prefer.s.animation ? h(TransitionGroup, {
-			class: classes,
-			name: 'list',
-			tag: 'div',
-			onBeforeLeave,
-			onLeaveCancelled,
-		}, { default: renderChildren }) : h('div', {
-			class: classes,
-		}, { default: renderChildren });
-	},
-});
-</script>
-
-<style lang="scss" module>
-.date-separated-list {
-	container-type: inline-size;
-
-	&:global {
-		> .list-move {
-			transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
-		}
-
-		> .list-enter-active {
-			transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
-		}
-
-		> *:empty {
-			display: none;
-		}
-	}
-
-	&:not(.date-separated-list-nogap) > *:not(:last-child) {
-		margin-bottom: var(--MI-margin);
-	}
-}
-
-.date-separated-list-nogap {
-	> * {
-		margin: 0 !important;
-		border: none;
-		border-radius: 0;
-		box-shadow: none;
-
-		&:not(:last-child) {
-			border-bottom: solid 0.5px var(--MI_THEME-divider);
-		}
-	}
-}
-
-.direction-up {
-	&:global {
-	> .list-enter-from,
-	> .list-leave-to {
-		opacity: 0;
-		transform: translateY(64px);
-	}
-	}
-}
-.direction-down {
-	&:global {
-	> .list-enter-from,
-	> .list-leave-to {
-		opacity: 0;
-		transform: translateY(-64px);
-	}
-	}
-}
-
-.reversed {
-	display: flex;
-	flex-direction: column-reverse;
-}
-
-.separator {
-	text-align: center;
-}
-
-.date {
-	display: inline-block;
-	position: relative;
-	margin: 0;
-	padding: 0 16px;
-	line-height: 32px;
-	text-align: center;
-	font-size: 12px;
-	color: var(--MI_THEME-dateLabelFg);
-}
-
-.date-1 {
-	margin-right: 8px;
-}
-
-.date-1-icon {
-	margin-right: 8px;
-}
-
-.date-2 {
-	margin-left: 8px;
-}
-
-.date-2-icon {
-	margin-left: 8px;
-}
-
-.ad-wrapper {
-	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);
-}
-</style>
-
diff --git a/packages/frontend/src/pages/favorites.vue b/packages/frontend/src/pages/favorites.vue
index 72dd2b4a16..b37b9c33c5 100644
--- a/packages/frontend/src/pages/favorites.vue
+++ b/packages/frontend/src/pages/favorites.vue
@@ -10,9 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></template>
 
 			<template #default="{ items }">
-				<MkDateSeparatedList v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false">
-					<MkNote :key="item.id" :note="item.note" :class="$style.note"/>
-				</MkDateSeparatedList>
+				<MkNote v-for="item in items" :key="item.id" :note="item.note" :class="$style.note"/>
 			</template>
 		</MkPagination>
 	</div>
@@ -23,7 +21,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { markRaw } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkNote from '@/components/MkNote.vue';
-import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { Paginator } from '@/utility/paginator.js';