client: add page 'notes with file attached'

locales/en-US.yml

@@ -347,6 +347,8 @@ withReplies: "Include replies"
 connectedTo: "Following account(s) are connected"
 notesAndReplies: "Notes and replies"
 withFiles: "Including files"
+attachedToNotes: "Notes with this file"
+showAttachedNotes: "Show notes with this file"
 silence: "Silence"
 silenceConfirm: "Are you sure that you want to silence this user?"
 unsilence: "Undo silencing"

packages/client/src/components/drive.file.vue

@@ -85,6 +85,11 @@ function getMenu(): MenuItem[] {
 		text: i18n.ts.download,
 		icon: 'fas fa-download',
 		download: props.file.name,
+	}, {
+		type: 'link',
+		href: `/my/drive/file/${props.file.id}/attached`,
+		text: i18n.ts.showAttachedNotes,
+		icon: 'fas fa-paperclip',
 	}, null, {
 		text: i18n.ts.delete,
 		icon: 'fas fa-trash-alt',

packages/client/src/components/timeline.vue

@@ -10,11 +10,12 @@ import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 
 const props = defineProps<{
-	src: 'antenna' | 'home' | 'local' | 'social' | 'global' | 'mentions' | 'directs' | 'list' | 'channel';
+	src: 'antenna' | 'home' | 'local' | 'social' | 'global' | 'mentions' | 'directs' | 'list' | 'channel' | 'file';
 	list?: string;
 	antenna?: string;
 	channel?: string;
 	sound?: boolean;
+	fileId?: string;
 }>();
 
 const emit = defineEmits<{
@@ -129,6 +130,12 @@ switch (props.src) {
 		});
 		connection.on('note', prepend);
 		break;
+	case 'file':
+		endpoint = 'drive/files/attached-notes';
+		query = {
+			fileId: props.fileId,
+		};
+		break;
 }
 
 const pagination = {

packages/client/src/pages/attached-files.vue

@@ -0,0 +1,39 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :content-max="800">
+		<div class="attachments-timeline">
+			<XTimeline
+				ref="tl"
+				class="tl"
+				src="file"
+				:fileId="fileId"
+			/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import XTimeline from '@/components/timeline.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+defineProps<{
+	fileId: string;
+}>();
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.attachedToNotes,
+	icon: 'fas fa-paperclip',
+})));
+</script>
+
+<style lang="scss" scoped>
+.attachments-timeline {
+	background: var(--bg);
+	border-radius: var(--radius);
+	overflow: clip;
+}
+</style>

packages/client/src/router.ts

@@ -177,6 +177,10 @@ export const routes = [{
 	path: '/my/drive/folder/:folder',
 	component: page(() => import('./pages/drive.vue')),
 	loginRequired: true,
+}, {
+	path: '/my/drive/file/:fileId/attached',
+	component: page(() => import('./pages/attached-files.vue')),
+	loginRequired: true,
 }, {
 	path: '/my/drive',
 	component: page(() => import('./pages/drive.vue')),