From 7f5ad5badbf9574ca7183d7381333fb06cd31a15 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 3 Nov 2023 08:01:22 +0900
Subject: [PATCH] enhance(frontend): tweak drive file component

Resolve #12220
---
 packages/frontend/src/components/MkDrive.file.vue    |  7 ++++++-
 packages/frontend/src/pages/drive.file.info.vue      |  4 ++++
 packages/frontend/src/scripts/get-drive-file-menu.ts | 10 +++++-----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index 96704996f9..b46b25eba2 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -47,6 +47,7 @@ import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import { useRouter } from '@/router.js';
 import { getDriveFileMenu } from '@/scripts/get-drive-file-menu.js';
+import { deviceKind } from '@/scripts/device-kind.js';
 
 const router = useRouter();
 
@@ -74,7 +75,11 @@ function onClick(ev: MouseEvent) {
 	if (props.selectMode) {
 		emit('chosen', props.file);
 	} else {
-		router.push(`/my/drive/file/${props.file.id}`);
+		if (deviceKind === 'desktop') {
+			router.push(`/my/drive/file/${props.file.id}`);
+		} else {
+			os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+		}
 	}
 }
 
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index ae9256b8e3..1a2fc197f9 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -56,6 +56,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #key>{{ i18n.ts._fileViewer.size }}</template>
 				<template #value>{{ bytes(file.size) }}</template>
 			</MkKeyValue>
+			<MkKeyValue :class="$style.fileMetaDataChildren" :copy="file.url">
+				<template #key>URL</template>
+				<template #value>{{ file.url }}</template>
+			</MkKeyValue>
 		</div>
 	</div>
 	<div v-else class="_fullinfo">
diff --git a/packages/frontend/src/scripts/get-drive-file-menu.ts b/packages/frontend/src/scripts/get-drive-file-menu.ts
index d1cafdf27b..23a1a77bfb 100644
--- a/packages/frontend/src/scripts/get-drive-file-menu.ts
+++ b/packages/frontend/src/scripts/get-drive-file-menu.ts
@@ -78,6 +78,11 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 	const isImage = file.type.startsWith('image/');
 	let menu;
 	menu = [{
+		type: 'link',
+		to: `/my/drive/file/${file.id}`,
+		text: i18n.ts._fileViewer.title,
+		icon: 'ti ti-info-circle',
+	}, null, {
 		text: i18n.ts.rename,
 		icon: 'ti ti-forms',
 		action: () => rename(file),
@@ -113,11 +118,6 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 		text: i18n.ts.download,
 		icon: 'ti ti-download',
 		download: file.name,
-	}, null, {
-		type: 'link',
-		to: `/my/drive/file/${file.id}`,
-		text: i18n.ts._fileViewer.title,
-		icon: 'ti ti-file',
 	}, null, {
 		text: i18n.ts.delete,
 		icon: 'ti ti-trash',