🎨

2 files changed, 87 insertions, 23 deletions

diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue
index 7ab9417267..40c7b0b1b4 100644
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -84,7 +84,48 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span v-else-if="log.type === 'deleteChatRoom'">: @{{ log.info.room.name }}</span>
 	</template>
 	<template #icon>
-		<MkAvatar :user="log.user" :class="$style.avatar"/>
+		<i v-if="log.type === 'updateServerSettings'" class="ti ti-settings"></i>
+		<i v-else-if="log.type === 'updateUserNote'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'suspend'" class="ti ti-user-x"></i>
+		<i v-else-if="log.type === 'unsuspend'" class="ti ti-user-check"></i>
+		<i v-else-if="log.type === 'resetPassword'" class="ti ti-key"></i>
+		<i v-else-if="log.type === 'assignRole'" class="ti ti-user-plus"></i>
+		<i v-else-if="log.type === 'unassignRole'" class="ti ti-user-minus"></i>
+		<i v-else-if="log.type === 'createRole'" class="ti ti-plus"></i>
+		<i v-else-if="log.type === 'updateRole'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'deleteRole'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'addCustomEmoji'" class="ti ti-plus"></i>
+		<i v-else-if="log.type === 'updateCustomEmoji'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'deleteCustomEmoji'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'markSensitiveDriveFile'" class="ti ti-eye-exclamation"></i>
+		<i v-else-if="log.type === 'unmarkSensitiveDriveFile'" class="ti ti-eye"></i>
+		<i v-else-if="log.type === 'suspendRemoteInstance'" class="ti ti-x"></i>
+		<i v-else-if="log.type === 'unsuspendRemoteInstance'" class="ti ti-check"></i>
+		<i v-else-if="log.type === 'createGlobalAnnouncement'" class="ti ti-plus"></i>
+		<i v-else-if="log.type === 'updateGlobalAnnouncement'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'deleteGlobalAnnouncement'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'createUserAnnouncement'" class="ti ti-plus"></i>
+		<i v-else-if="log.type === 'updateUserAnnouncement'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'deleteUserAnnouncement'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'deleteNote'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'deleteDriveFile'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'createAd'" class="ti ti-plus"></i>
+		<i v-else-if="log.type === 'updateAd'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'deleteAd'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'createAvatarDecoration'" class="ti ti-plus"></i>
+		<i v-else-if="log.type === 'updateAvatarDecoration'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'deleteAvatarDecoration'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'createSystemWebhook'" class="ti ti-plus"></i>
+		<i v-else-if="log.type === 'updateSystemWebhook'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'deleteSystemWebhook'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'createAbuseReportNotificationRecipient'" class="ti ti-plus"></i>
+		<i v-else-if="log.type === 'updateAbuseReportNotificationRecipient'" class="ti ti-pencil"></i>
+		<i v-else-if="log.type === 'deleteAbuseReportNotificationRecipient'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'deleteAccount'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'deletePage'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'deleteFlash'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'deleteGalleryPost'" class="ti ti-trash"></i>
+		<i v-else-if="log.type === 'deleteChatRoom'" class="ti ti-trash"></i>
 	</template>
 	<template #suffix>
 		<MkTime :time="log.createdAt"/>
@@ -199,11 +240,6 @@ const props = defineProps<{
 </script>
 
 <style lang="scss" module>
-.avatar {
-	width: 18px;
-	height: 18px;
-}
-
 .diff {
 	background: #fff;
 	color: #000;
diff --git a/packages/frontend/src/pages/admin/modlog.vue b/packages/frontend/src/pages/admin/modlog.vue
index 1fb2c4b726..89f59bcaab 100644
--- a/packages/frontend/src/pages/admin/modlog.vue
+++ b/packages/frontend/src/pages/admin/modlog.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="900">
-		<div>
+		<div class="_gaps">
 			<div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
 				<MkSelect v-model="type" style="margin: 0; flex: 1;">
 					<template #label>{{ i18n.ts.type }}</template>
@@ -19,41 +19,69 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkInput>
 			</div>
 
-			<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--MI-margin);">
-				<MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--MI-margin: 8px;">
-					<XModLog :key="item.id" :log="item"/>
-				</MkDateSeparatedList>
-			</MkPagination>
+			<MkTl :events="timeline">
+				<template #left="{ event }">
+					<div>
+						<MkAvatar :user="event.user" style="width: 24px; height: 24px;"/>
+					</div>
+				</template>
+				<template #right="{ event, timestamp, delta }">
+					<div style="margin: 4px 0;">
+						<XModLog :key="event.id" :log="event"/>
+					</div>
+				</template>
+			</MkTl>
+
+			<MkButton primary rounded style="margin: 0 auto;" @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, useTemplateRef, ref } from 'vue';
+import { computed, useTemplateRef, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import XHeader from './_header_.vue';
 import XModLog from './modlog.ModLog.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkInput from '@/components/MkInput.vue';
-import MkPagination from '@/components/MkPagination.vue';
+import MkTl from '@/components/MkTl.vue';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
-import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
-
-const logs = useTemplateRef('logs');
+import { misskeyApi } from '@/utility/misskey-api.js';
+import MkButton from '@/components/MkButton.vue';
 
 const type = ref<string | null>(null);
 const moderatorId = ref('');
 
-const pagination = {
-	endpoint: 'admin/show-moderation-logs' as const,
-	limit: 30,
-	params: computed(() => ({
+const timeline = ref([]);
+
+watch([type, moderatorId], async () => {
+	const res = await misskeyApi('admin/show-moderation-logs', {
+		type: type.value,
+		userId: moderatorId.value === '' ? null : moderatorId.value,
+	});
+	timeline.value = res.map(x => ({
+		id: x.id,
+		timestamp: x.createdAt,
+		data: x,
+	}));
+}, { immediate: true });
+
+function fetchMore() {
+	const last = timeline.value[timeline.value.length - 1];
+	misskeyApi('admin/show-moderation-logs', {
 		type: type.value,
 		userId: moderatorId.value === '' ? null : moderatorId.value,
-	})),
-};
+		untilId: last.id,
+	}).then(res => {
+		timeline.value.push(...res.map(x => ({
+			id: x.id,
+			timestamp: x.createdAt,
+			data: x,
+		})));
+	});
+}
 
 const headerActions = computed(() => []);