From 2ebdc36c7a0ad7f8f86bf5b36296447fa34493b5 Mon Sep 17 00:00:00 2001
From: Leah <kevinlukej@gmail.com>
Date: Fri, 28 Jun 2024 16:27:28 +0200
Subject: [PATCH] Add search for files in drive

---
 .../src/server/api/endpoints/drive/files.ts       |  5 +++++
 .../src/server/api/endpoints/drive/folders.ts     |  4 ++++
 packages/frontend/src/components/MkDrive.vue      | 15 +++++++++++++++
 3 files changed, 24 insertions(+)

diff --git a/packages/backend/src/server/api/endpoints/drive/files.ts b/packages/backend/src/server/api/endpoints/drive/files.ts
index 10c521332d..e8bebb449b 100644
--- a/packages/backend/src/server/api/endpoints/drive/files.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files.ts
@@ -37,6 +37,7 @@ export const paramDef = {
 		folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null },
 		type: { type: 'string', nullable: true, pattern: /^[a-zA-Z\/\-*]+$/.toString().slice(1, -1) },
 		sort: { type: 'string', nullable: true, enum: ['+createdAt', '-createdAt', '+name', '-name', '+size', '-size', null] },
+		searchQuery: {type : 'string', default: '' }
 	},
 	required: [],
 } as const;
@@ -60,6 +61,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				query.andWhere('file.folderId IS NULL');
 			}
 
+			if (ps.searchQuery.length > 0) {
+				query.andWhere('file.name ILIKE :searchQuery OR file.comment ILIKE :searchQuery', { searchQuery: `%${ps.searchQuery}%` });
+			}
+
 			if (ps.type) {
 				if (ps.type.endsWith('/*')) {
 					query.andWhere('file.type like :type', { type: ps.type.replace('/*', '/') + '%' });
diff --git a/packages/backend/src/server/api/endpoints/drive/folders.ts b/packages/backend/src/server/api/endpoints/drive/folders.ts
index 8c4848f8e1..03223b267f 100644
--- a/packages/backend/src/server/api/endpoints/drive/folders.ts
+++ b/packages/backend/src/server/api/endpoints/drive/folders.ts
@@ -35,6 +35,7 @@ export const paramDef = {
 		sinceId: { type: 'string', format: 'misskey:id' },
 		untilId: { type: 'string', format: 'misskey:id' },
 		folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null },
+		searchQuery: {type : 'string', default: '' }
 	},
 	required: [],
 } as const;
@@ -58,6 +59,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				query.andWhere('folder.parentId IS NULL');
 			}
 
+			if (ps.searchQuery.length > 0) {
+				query.andWhere('folder.name ILIKE :searchQuery', { searchQuery: `%${ps.searchQuery}%` });
+			}
 			const folders = await query.limit(ps.limit).getMany();
 
 			return await Promise.all(folders.map(folder => this.driveFolderEntityService.pack(folder)));
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 2990ea6861..497601eb5a 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -30,6 +30,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ph-caret-right ph-bold ph-lg"></i></span>
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
 		</div>
+		<MkInput :class="$style.navMenu" v-model="searchQuery" :large="true" :autofocus="true" type="search" placeholder="Search drive via alt text or file names" @enter="search">
+			<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
+		</MkInput>
+
 		<button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ph-dots-three ph-bold ph-lg"></i></button>
 	</nav>
 	<div
@@ -102,6 +106,7 @@ import type { MenuItem } from '@/types/menu.js';
 import XNavFolder from '@/components/MkDrive.navFolder.vue';
 import XFolder from '@/components/MkDrive.folder.vue';
 import XFile from '@/components/MkDrive.file.vue';
+import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
@@ -110,6 +115,8 @@ import { i18n } from '@/i18n.js';
 import { uploadFile, uploads } from '@/scripts/upload.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 
+const searchQuery = ref('');
+
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
 	type?: string;
@@ -152,6 +159,12 @@ const isDragSource = ref(false);
 
 const fetching = ref(true);
 
+async function search() {
+	const query = searchQuery.value.toString().trim();
+	fetch();
+	return;
+}
+
 const ilFilesObserver = new IntersectionObserver(
 	(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
 );
@@ -540,6 +553,7 @@ async function fetch() {
 	const foldersPromise = misskeyApi('drive/folders', {
 		folderId: folder.value ? folder.value.id : null,
 		limit: foldersMax + 1,
+		searchQuery: searchQuery.value.toString().trim(),
 	}).then(fetchedFolders => {
 		if (fetchedFolders.length === foldersMax + 1) {
 			moreFolders.value = true;
@@ -552,6 +566,7 @@ async function fetch() {
 		folderId: folder.value ? folder.value.id : null,
 		type: props.type,
 		limit: filesMax + 1,
+		searchQuery: searchQuery.value.toString().trim(),
 	}).then(fetchedFiles => {
 		if (fetchedFiles.length === filesMax + 1) {
 			moreFiles.value = true;