From 4a55425fdb6e94ede0b5872719d0612606d01b45 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 16 Jun 2022 16:05:43 +0900
Subject: [PATCH] enhance(client): improve files page of control panel

---
 CHANGELOG.md                                  |   1 +
 .../src/components/drive-file-thumbnail.vue   |  22 +--
 packages/client/src/components/ui/tooltip.vue |   8 +-
 packages/client/src/directives/tooltip.ts     |   1 +
 packages/client/src/pages/admin/files.vue     | 169 +++++++++---------
 5 files changed, 105 insertions(+), 96 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ffe545c3d5..63d6966658 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ You should also include the user name that made the change.
 
 ### Improvements
 - Server: Add rate limit to i/notifications @tamaina
+- Client: Improve files page of control panel @syuilo
 
 ### Bugfixes
 - Server: Fix GenerateVideoThumbnail failed @mei23
diff --git a/packages/client/src/components/drive-file-thumbnail.vue b/packages/client/src/components/drive-file-thumbnail.vue
index dd24440e82..07cd565c58 100644
--- a/packages/client/src/components/drive-file-thumbnail.vue
+++ b/packages/client/src/components/drive-file-thumbnail.vue
@@ -1,6 +1,6 @@
 <template>
 <div ref="thumbnail" class="zdjebgpv">
-	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
+	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
 	<i v-else-if="is === 'image'" class="fas fa-file-image icon"></i>
 	<i v-else-if="is === 'video'" class="fas fa-file-video icon"></i>
 	<i v-else-if="is === 'audio' || is === 'midi'" class="fas fa-music icon"></i>
@@ -33,16 +33,16 @@ const is = computed(() => {
 	if (props.file.type.endsWith('/pdf')) return 'pdf';
 	if (props.file.type.startsWith('text/')) return 'textfile';
 	if ([
-			"application/zip",
-			"application/x-cpio",
-			"application/x-bzip",
-			"application/x-bzip2",
-			"application/java-archive",
-			"application/x-rar-compressed",
-			"application/x-tar",
-			"application/gzip",
-			"application/x-7z-compressed"
-		].some(archiveType => archiveType === props.file.type)) return 'archive';
+		'application/zip',
+		'application/x-cpio',
+		'application/x-bzip',
+		'application/x-bzip2',
+		'application/java-archive',
+		'application/x-rar-compressed',
+		'application/x-tar',
+		'application/gzip',
+		'application/x-7z-compressed',
+	].some(archiveType => archiveType === props.file.type)) return 'archive';
 	return 'unknown';
 });
 
diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue
index 571d11ba3b..152c939a1a 100644
--- a/packages/client/src/components/ui/tooltip.vue
+++ b/packages/client/src/components/ui/tooltip.vue
@@ -1,7 +1,10 @@
 <template>
 <transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
 	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
-		<slot>{{ text }}</slot>
+		<slot>
+			<Mfm v-if="asMfm" :text="text"/>
+			<span v-else>{{ text }}</span>
+		</slot>
 	</div>
 </transition>
 </template>
@@ -16,6 +19,7 @@ const props = withDefaults(defineProps<{
 	x?: number;
 	y?: number;
 	text?: string;
+	asMfm?: boolean;
 	maxWidth?: number;
 	direction?: 'top' | 'bottom' | 'right' | 'left';
 	innerMargin?: number;
@@ -170,8 +174,6 @@ const setPosition = () => {
 				return { left, top, transformOrigin: 'left center' };
 			}
 		}
-
-		return null as never;
 	};
 
 	const { left, top, transformOrigin } = calc();
diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
index 0e69da954e..588bbca3a9 100644
--- a/packages/client/src/directives/tooltip.ts
+++ b/packages/client/src/directives/tooltip.ts
@@ -48,6 +48,7 @@ export default {
 			popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), {
 				showing,
 				text: self.text,
+				asMfm: binding.modifiers.mfm,
 				targetElement: el,
 			}, {}, 'closed');
 
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 3cda688698..6f43c2b7bd 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -1,61 +1,50 @@
 <template>
 <div class="xrmjdkdw">
-	<MkContainer :foldable="true" class="lookup">
-		<template #header><i class="fas fa-search"></i> {{ $ts.lookup }}</template>
-		<div class="xrmjdkdw-lookup">
-			<MkInput v-model="q" class="item" type="text" @enter="find()">
-				<template #label>{{ $ts.fileIdOrUrl }}</template>
+	<div>
+		<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+			<MkSelect v-model="origin" style="margin: 0; flex: 1;">
+				<template #label>{{ $ts.instance }}</template>
+				<option value="combined">{{ $ts.all }}</option>
+				<option value="local">{{ $ts.local }}</option>
+				<option value="remote">{{ $ts.remote }}</option>
+			</MkSelect>
+			<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
+				<template #label>{{ $ts.host }}</template>
 			</MkInput>
-			<MkButton primary @click="find()"><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
 		</div>
-	</MkContainer>
-
-	<div class="_section">
-		<div class="_content">
-			<div class="inputs" style="display: flex;">
-				<MkSelect v-model="origin" style="margin: 0; flex: 1;">
-					<template #label>{{ $ts.instance }}</template>
-					<option value="combined">{{ $ts.all }}</option>
-					<option value="local">{{ $ts.local }}</option>
-					<option value="remote">{{ $ts.remote }}</option>
-				</MkSelect>
-				<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
-					<template #label>{{ $ts.host }}</template>
-				</MkInput>
-			</div>
-			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
-					<template #label>MIME type</template>
-				</MkInput>
-			</div>
-			<MkPagination v-slot="{items}" :pagination="pagination" class="urempief">
-				<button v-for="file in items" :key="file.id" class="file _panel _button _gap" @click="show(file, $event)">
-					<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-					<div class="body">
-						<div>
-							<small style="opacity: 0.7;">{{ file.name }}</small>
-						</div>
-						<div>
-							<MkAcct v-if="file.user" :user="file.user"/>
-							<div v-else>{{ $ts.system }}</div>
-						</div>
-						<div>
-							<span style="margin-right: 1em;">{{ file.type }}</span>
-							<span>{{ bytes(file.size) }}</span>
-						</div>
-						<div>
-							<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
-						</div>
+		<div class="inputs" style="display: flex; padding-top: 1.2em;">
+			<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
+				<template #label>MIME type</template>
+			</MkInput>
+		</div>
+		<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
+			<button v-for="file in items" :key="file.id" v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`" class="file _panel _button" @click="show(file, $event)">
+				<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+				<div v-if="viewMode === 'list'" class="body">
+					<div>
+						<small style="opacity: 0.7;">{{ file.name }}</small>
 					</div>
-				</button>
-			</MkPagination>
-		</div>
+					<div>
+						<MkAcct v-if="file.user" :user="file.user"/>
+						<div v-else>{{ $ts.system }}</div>
+					</div>
+					<div>
+						<span style="margin-right: 1em;">{{ file.type }}</span>
+						<span>{{ bytes(file.size) }}</span>
+					</div>
+					<div>
+						<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+					</div>
+				</div>
+			</button>
+		</MkPagination>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from 'vue';
+import * as Acct from 'misskey-js/built/acct';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
@@ -67,10 +56,10 @@ import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 
-let q = $ref(null);
 let origin = $ref('local');
 let type = $ref(null);
 let searchHost = $ref('');
+let viewMode = $ref('grid');
 const pagination = {
 	endpoint: 'admin/drive/files' as const,
 	limit: 10,
@@ -94,18 +83,24 @@ function clear() {
 
 function show(file) {
 	os.popup(defineAsyncComponent(() => import('./file-dialog.vue')), {
-		fileId: file.id
+		fileId: file.id,
 	}, {}, 'closed');
 }
 
-function find() {
+async function find() {
+	const { canceled, result: q } = await os.inputText({
+		title: i18n.ts.fileIdOrUrl,
+		allowEmpty: false,
+	});
+	if (canceled) return;
+
 	os.api('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
 		show(file);
 	}).catch(err => {
 		if (err.code === 'NO_SUCH_FILE') {
 			os.alert({
 				type: 'error',
-				text: i18n.ts.notFound
+				text: i18n.ts.notFound,
 			});
 		}
 	});
@@ -117,6 +112,10 @@ defineExpose({
 		icon: 'fas fa-cloud',
 		bg: 'var(--bg)',
 		actions: [{
+			text: i18n.ts.lookup,
+			icon: 'fas fa-search',
+			handler: find,
+		}, {
 			text: i18n.ts.clearCachedFiles,
 			icon: 'fas fa-trash-alt',
 			handler: clear,
@@ -129,47 +128,53 @@ defineExpose({
 .xrmjdkdw {
 	margin: var(--margin);
 
-	> .lookup {
-		margin-bottom: 16px;
-	}
-
 	.urempief {
 		margin-top: var(--margin);
 
-		> .file {
-			display: flex;
-			width: 100%;
-			box-sizing: border-box;
-			text-align: left;
-			align-items: center;
+		&.list {
+			> .file {
+				display: flex;
+				width: 100%;
+				box-sizing: border-box;
+				text-align: left;
+				align-items: center;
 
-			&:hover {
-				color: var(--accent);
+				&:hover {
+					color: var(--accent);
+				}
+
+				> .thumbnail {
+					width: 128px;
+					height: 128px;
+				}
+
+				> .body {
+					margin-left: 0.3em;
+					padding: 8px;
+					flex: 1;
+
+					@media (max-width: 500px) {
+						font-size: 14px;
+					}
+				}
 			}
+		}
 
-			> .thumbnail {
-				width: 128px;
-				height: 128px;
-			}
+		&.grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+			grid-gap: 12px;
+			margin: var(--margin) 0;
 
-			> .body {
-				margin-left: 0.3em;
-				padding: 8px;
-				flex: 1;
-
-				@media (max-width: 500px) {
-					font-size: 14px;
+			> .file {
+				aspect-ratio: 1;
+			
+				> .thumbnail {
+					width: 100%;
+					height: 100%;
 				}
 			}
 		}
 	}
 }
-
-.xrmjdkdw-lookup {
-	padding: 16px;
-
-	> .item {
-		margin-bottom: 16px;
-	}
-}
 </style>