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

Based on FoundKey commit 3747d7ecb1.
Closes #10695
---
 locales/de-DE.yml                             |  2 +
 locales/en-US.yml                             |  2 +
 locales/ja-JP.yml                             |  2 +
 .../client/src/components/MkDrive.file.vue    |  6 +++
 packages/client/src/components/MkTimeline.vue |  6 +++
 packages/client/src/pages/attached-files.vue  | 39 +++++++++++++++++++
 packages/client/src/router.ts                 |  5 +++
 7 files changed, 62 insertions(+)
 create mode 100644 packages/client/src/pages/attached-files.vue

diff --git a/locales/de-DE.yml b/locales/de-DE.yml
index 9521870fd..693b521c4 100644
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -402,6 +402,8 @@ withReplies: "Antworten beinhalten"
 connectedTo: "Mit folgenden Nutzerkonten verknüpft"
 notesAndReplies: "Beiträge und Antworten"
 withFiles: "Beiträge mit Dateien"
+attachedToNotes: "Beiträge mit dieser Datei"
+showAttachedNotes: "Zeige Beiträge mit dieser Datei"
 silence: "stummschalten"
 silenceConfirm: "Sind Sie sicher, dass Sie diesen Benutzer Stummschalten möchten?"
 unsilence: "Stummschaltung aufheben"
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 24fc39244..3594c7e09 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -429,6 +429,8 @@ withReplies: "Include replies"
 connectedTo: "Following account(s) are connected"
 notesAndReplies: "Posts and replies"
 withFiles: "Including files"
+attachedToNotes: "Posts with this file"
+showAttachedNotes: "Show posts with this file"
 silence: "Silence"
 silenceConfirm: "Are you sure that you want to silence this user?"
 unsilence: "Undo silencing"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 31d817b7b..04bfa297a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -384,6 +384,8 @@ withReplies: "返信を含む"
 connectedTo: "次のアカウントに接続されています"
 notesAndReplies: "投稿と返信"
 withFiles: "ファイル付き"
+attachedToNotes: "このファイルが添付された投稿"
+showAttachedNotes: "このファイルが添付された投稿を見る"
 silence: "サイレンス"
 silenceConfirm: "サイレンスしますか？"
 unsilence: "サイレンス解除"
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 483375938..5163b9f7c 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -107,6 +107,12 @@ function getMenu() {
 			icon: `${icon("ph-download-simple")}`,
 			download: props.file.name,
 		},
+		{
+			type: "a",
+			href: `/my/drive/file/${props.file.id}/attached`,
+			text: i18n.ts.showAttachedNotes,
+			icon: `${icon("ph-paperclip")}`,
+		},
 		null,
 		{
 			text: i18n.ts.delete,
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index beca720a3..c310851e2 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -44,6 +44,7 @@ const props = defineProps<{
 	antenna?: string;
 	channel?: string;
 	sound?: boolean;
+	fileId?: string;
 }>();
 
 const queue = ref(0);
@@ -195,6 +196,11 @@ if (props.src === "antenna") {
 		channelId: props.channel,
 	});
 	connection.on("note", prepend);
+} else if (props.src === "file") {
+	endpoint = "drive/files/attached-notes";
+	query = {
+		fileId: props.fileId,
+	};
 }
 
 function closeHint() {
diff --git a/packages/client/src/pages/attached-files.vue b/packages/client/src/pages/attached-files.vue
new file mode 100644
index 000000000..e0fd09d41
--- /dev/null
+++ b/packages/client/src/pages/attached-files.vue
@@ -0,0 +1,39 @@
+<template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :display-back-button="true"
+		/></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/MkTimeline.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
+
+defineProps<{
+	fileId: string;
+}>();
+
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.attachedToNotes,
+		icon: `${icon("ph-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 ea772bad5..23fdd5d39 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -583,6 +583,11 @@ export const routes = [
 		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")),