feat: 特定のドライブファイルを添付しているチャットメッセージを一覧できるように

3 files changed, 58 insertions, 6 deletions

diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
index c639e18b1d..e3469d0fd7 100644
--- a/packages/frontend/src/components/MkUserList.vue
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<template #default="{ items }">
 		<div :class="$style.root">
-			<MkUserInfo v-for="item in items" :key="item.id" class="user" :user="extractor(item)"/>
+			<MkUserInfo v-for="item in items" :key="item.id" :user="extractor(item)"/>
 		</div>
 	</template>
 </MkPagination>
diff --git a/packages/frontend/src/pages/admin-file.chat.vue b/packages/frontend/src/pages/admin-file.chat.vue
new file mode 100644
index 0000000000..e451da51a3
--- /dev/null
+++ b/packages/frontend/src/pages/admin-file.chat.vue
@@ -0,0 +1,38 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<MkInfo>{{ i18n.ts._fileViewer.thisPageCanBeSeenFromTheAuthor }}</MkInfo>
+
+	<MkPagination :paginator="paginator">
+		<template #default="{ items }">
+			<XMessage v-for="item in items" :key="item.id" :message="item" :isSearchResult="true"/>
+		</template>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, markRaw } from 'vue';
+import XMessage from './chat/XMessage.vue';
+import { i18n } from '@/i18n.js';
+import MkInfo from '@/components/MkInfo.vue';
+import { Paginator } from '@/utility/paginator.js';
+import MkPagination from '@/components/MkPagination.vue';
+
+const props = defineProps<{
+	fileId: string;
+}>();
+
+const realFileId = computed(() => props.fileId);
+
+const paginator = markRaw(new Paginator('drive/files/attached-chat-messages', {
+	limit: 10,
+	params: {
+		fileId: realFileId.value,
+	},
+}));
+</script>
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
index 8495642a8c..7a49ba542f 100644
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/packages/frontend/src/pages/admin-file.vue
@@ -44,8 +44,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
 		</div>
-		<div v-else-if="tab === 'notes' && info" class="_gaps_m">
-			<XNotes :fileId="fileId"/>
+		<div v-else-if="tab === 'usage' && info" class="_gaps_m">
+			<MkTabs
+				v-model:tab="usageTab"
+				:tabs="[{
+					key: 'note',
+					title: 'Note',
+				}, {
+					key: 'chat',
+					title: 'Chat',
+				}]"
+			/>
+			<XNotes v-if="usageTab === 'note'" :fileId="fileId"/>
+			<XChat v-else-if="usageTab === 'chat'" :fileId="fileId"/>
 		</div>
 		<div v-else-if="tab === 'ip' && info" class="_gaps_m">
 			<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
@@ -86,12 +97,15 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { iAmAdmin, iAmModerator } from '@/i.js';
+import MkTabs from '@/components/MkTabs.vue';
 
 const tab = ref('overview');
 const file = ref<Misskey.entities.DriveFile | null>(null);
 const info = ref<Misskey.entities.AdminDriveShowFileResponse | null>(null);
 const isSensitive = ref<boolean>(false);
+const usageTab = ref<'note' | 'chat'>('note');
 const XNotes = defineAsyncComponent(() => import('./drive.file.notes.vue'));
+const XChat = defineAsyncComponent(() => import('./admin-file.chat.vue'));
 
 const props = defineProps<{
 	fileId: string,
@@ -147,9 +161,9 @@ const headerTabs = computed(() => [{
 	title: i18n.ts.overview,
 	icon: 'ti ti-info-circle',
 }, iAmModerator ? {
-	key: 'notes',
-	title: i18n.ts._fileViewer.attachedNotes,
-	icon: 'ti ti-pencil',
+	key: 'usage',
+	title: i18n.ts._fileViewer.usage,
+	icon: 'ti ti-plus',
 } : null, iAmModerator ? {
 	key: 'ip',
 	title: 'IP',