From 3747d7ecb173bbb573a95b29a4e6e6db1a1a0fae Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Mon, 27 Mar 2023 18:43:49 +0200
Subject: [PATCH] client: add page 'notes with file attached'

---
 locales/en-US.yml                             |  2 +
 packages/client/src/components/drive.file.vue |  5 +++
 packages/client/src/components/timeline.vue   |  9 ++++-
 packages/client/src/pages/attached-files.vue  | 39 +++++++++++++++++++
 packages/client/src/router.ts                 |  4 ++
 5 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/pages/attached-files.vue

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 25158511b..bee6111fc 100644
--- a/locales/en-US.yml
+++ b/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"
diff --git a/packages/client/src/components/drive.file.vue b/packages/client/src/components/drive.file.vue
index f6713947e..0091766a4 100644
--- a/packages/client/src/components/drive.file.vue
+++ b/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',
diff --git a/packages/client/src/components/timeline.vue b/packages/client/src/components/timeline.vue
index 4ce9d9113..147c0c8a0 100644
--- a/packages/client/src/components/timeline.vue
+++ b/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 = {
diff --git a/packages/client/src/pages/attached-files.vue b/packages/client/src/pages/attached-files.vue
new file mode 100644
index 000000000..66830ec3f
--- /dev/null
+++ b/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>
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 10869a3cf..6ba2c09ef 100644
--- a/packages/client/src/router.ts
+++ b/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')),