feat: add "posts with file attached" page to client

Co-authored-by: Mia Herkt <mia@0x0.st>

README.md

@@ -40,6 +40,7 @@
 
 - 本家 Firefish へのまだマージされていないマージリクエストを独断でマージ
   - https://git.joinfirefish.org/firefish/firefish/-/merge_requests/10631
+  - https://git.joinfirefish.org/firefish/firefish/-/merge_requests/10634
 - デフォルトではバイブレーションを無効に
 - ログインしていなければ投稿検索ができないように
   - 攻撃対策のため

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"

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"

locales/ja-JP.yml

@@ -384,6 +384,8 @@ withReplies: "返信を含む"
 connectedTo: "次のアカウントに接続されています"
 notesAndReplies: "投稿と返信"
 withFiles: "ファイル付き"
+attachedToNotes: "このファイルが添付された投稿"
+showAttachedNotes: "このファイルが添付された投稿を見る"
 silence: "サイレンス"
 silenceConfirm: "サイレンスしますか？"
 unsilence: "サイレンス解除"

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,

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() {

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>

packages/client/src/router.ts

@@ -588,6 +588,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")),