enhance(frontend): improve MkTl rendering

packages/frontend/src/components/MkTl.vue

@@ -32,9 +32,12 @@ export type TlEvent<E = any> = {
 <script lang="ts" setup generic="T extends unknown">
 import { computed } from 'vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	events: TlEvent<T>[];
-}>();
+	groupBy?: 'd' | 'h';
+}>(), {
+	groupBy: 'd',
+});
 
 const events = computed(() => {
 	return props.events.toSorted((a, b) => b.timestamp - a.timestamp);
@@ -65,6 +68,7 @@ type TlItem<T> = ({
 
 const items = computed<TlItem<T>[]>(() => {
 	const results: TlItem<T>[] = [];
+
 	for (let i = 0; i < events.value.length; i++) {
 		const item = events.value[i];
 
@@ -79,25 +83,37 @@ const items = computed<TlItem<T>[]>(() => {
 			data: item.data,
 		});
 
-		if (
+		if (i !== events.value.length - 1 && nextDate != null) {
-			i !== events.value.length - 1 &&
+			let needsSeparator = false;
-				nextDate != null && (
+
-				date.getFullYear() !== nextDate.getFullYear() ||
+			if (props.groupBy === 'd') {
+				needsSeparator = (
+					date.getFullYear() !== nextDate.getFullYear() ||
+					date.getMonth() !== nextDate.getMonth() ||
+					date.getDate() !== nextDate.getDate()
+				);
+			} else if (props.groupBy === 'h') {
+				needsSeparator = (
+					date.getFullYear() !== nextDate.getFullYear() ||
 					date.getMonth() !== nextDate.getMonth() ||
 					date.getDate() !== nextDate.getDate() ||
 					date.getHours() !== nextDate.getHours()
-			)
+				);
-		) {
+			}
-			results.push({
+
-				id: `date-${item.id}`,
+			if (needsSeparator) {
-				type: 'date',
+				results.push({
-				prev: date,
+					id: `date-${item.id}`,
-				prevText: getDateText(date),
+					type: 'date',
-				next: nextDate,
+					prev: date,
-				nextText: getDateText(nextDate),
+					prevText: getDateText(date),
-			});
+					next: nextDate,
+					nextText: getDateText(nextDate),
+				});
+			}
 		}
 	}
+
 	return results;
 });
 </script>

packages/frontend/src/pages/admin/job-queue.job.vue

@@ -107,7 +107,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkFolder>
 	</div>
 	<div v-else-if="tab === 'timeline'">
-		<MkTl :events="timeline">
+		<MkTl :events="timeline" groupBy="h">
 			<template #left="{ event }">
 				<div>
 					<template v-if="event.type === 'finished'">
@@ -162,6 +162,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import JSON5 from 'json5';
+import type { TlEvent } from '@/components/MkTl.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import MkButton from '@/components/MkButton.vue';
@@ -172,7 +173,6 @@ import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkCodeEditor from '@/components/MkCodeEditor.vue';
 import MkTl from '@/components/MkTl.vue';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
-import type { TlEvent } from '@/components/MkTl.vue';
 
 function msSMH(v: number | null) {
 	if (v == null) return 'N/A';

packages/frontend/src/pages/admin/job-queue.vue

@@ -157,6 +157,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							timestamp: job.finishedOn ?? job.processedOn ?? job.timestamp,
 							data: job,
 						}))"
+						groupBy="h"
 						class="_monospace"
 					>
 						<template #right="{ event: job }">

packages/frontend/src/pages/admin/modlog.vue

@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkInput>
 			</div>
 
-			<MkTl :events="timeline">
+			<MkTl :events="timeline" groupBy="d">
 				<template #left="{ event }">
 					<div>
 						<MkAvatar :user="event.user" style="width: 26px; height: 26px;"/>