From 657697ab937a5201ff8815bbe6c062f8c0c39ff2 Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Fri, 27 Sep 2024 11:39:28 +0900
Subject: [PATCH 1/5] =?UTF-8?q?enhance(frontend):=20=E6=A4=9C=E7=B4=A2?=
 =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E3=83=9B=E3=82=B9=E3=83=88?=
 =?UTF-8?q?=E6=8C=87=E5=AE=9A=E3=81=A8=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E6=8C=87=E5=AE=9A=E3=82=92=E7=B5=B1=E5=90=88=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=20(#273)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit c79392c88d6bf58ede39d8bba9ca2778c58521ef)
---
 locales/index.d.ts                            |  30 ++
 locales/ja-JP.yml                             |   9 +
 packages/frontend/src/pages/search.note.vue   | 305 ++++++++++++------
 packages/frontend/src/pages/search.user.vue   |  11 +-
 .../frontend/src/scripts/gen-search-query.ts  |  35 --
 5 files changed, 254 insertions(+), 136 deletions(-)
 delete mode 100644 packages/frontend/src/scripts/gen-search-query.ts

diff --git a/locales/index.d.ts b/locales/index.d.ts
index b5af5909a324..060ea09aa53d 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -10471,6 +10471,36 @@ export interface Locale extends ILocale {
          */
         "codeGeneratedDescription": string;
     };
+    "_search": {
+        /**
+         * 全て
+         */
+        "searchScopeAll": string;
+        /**
+         * ローカル
+         */
+        "searchScopeLocal": string;
+        /**
+         * サーバー指定
+         */
+        "searchScopeServer": string;
+        /**
+         * ユーザー指定
+         */
+        "searchScopeUser": string;
+        /**
+         * サーバーのホストを入力してください
+         */
+        "pleaseEnterServerHost": string;
+        /**
+         * ユーザーを選択してください
+         */
+        "pleaseSelectUser": string;
+        /**
+         * 例: misskey.example.com
+         */
+        "serverHostPlaceholder": string;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c448d4d50a73..9c60bcefd371 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2789,3 +2789,12 @@ _embedCodeGen:
   generateCode: "埋め込みコードを作成"
   codeGenerated: "コードが生成されました"
   codeGeneratedDescription: "生成されたコードをウェブサイトに貼り付けてご利用ください。"
+
+_search:
+  searchScopeAll: "全て"
+  searchScopeLocal: "ローカル"
+  searchScopeServer: "サーバー指定"
+  searchScopeUser: "ユーザー指定"
+  pleaseEnterServerHost: "サーバーのホストを入力してください"
+  pleaseSelectUser: "ユーザーを選択してください"
+  serverHostPlaceholder: "例: misskey.example.com"
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 105c947d2543..5a9b3231476f 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -6,67 +6,127 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div class="_gaps">
 	<div class="_gaps">
-		<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter.prevent="search">
+		<MkInput
+			v-model="searchQuery"
+			large
+			autofocus
+			type="search"
+			@enter.prevent="search"
+		>
 			<template #prefix><i class="ti ti-search"></i></template>
 		</MkInput>
-		<MkFoldableSection :expanded="true">
+		<MkFoldableSection expanded>
 			<template #header>{{ i18n.ts.options }}</template>
 
 			<div class="_gaps_m">
-				<MkRadios v-model="hostSelect">
-					<template #label>{{ i18n.ts.host }}</template>
-					<option value="all" default>{{ i18n.ts.all }}</option>
-					<option value="local">{{ i18n.ts.local }}</option>
-					<option v-if="noteSearchableScope === 'global'" value="specified">{{ i18n.ts.specifyHost }}</option>
+				<MkRadios v-model="searchScope">
+					<option v-if="noteSearchableScope === 'global'" value="all">{{ i18n.ts._search.searchScopeAll }}</option>
+					<option value="local">{{ i18n.ts._search.searchScopeLocal }}</option>
+					<option v-if="noteSearchableScope === 'global'" value="server">{{ i18n.ts._search.searchScopeServer }}</option>
+					<option value="user">{{ i18n.ts._search.searchScopeUser }}</option>
 				</MkRadios>
-				<MkInput v-if="noteSearchableScope === 'global'" v-model="hostInput" :disabled="hostSelect !== 'specified'" :large="true" type="search">
+
+				<MkInput
+					v-if="searchScope === 'server'"
+					v-model="hostInput"
+					large
+					:placeholder="i18n.ts._search.serverHostPlaceholder"
+					@enter.prevent="search"
+				>
+					<template #label>{{ i18n.ts._search.pleaseEnterServerHost }}</template>
 					<template #prefix><i class="ti ti-server"></i></template>
 				</MkInput>
 
-				<MkFolder :defaultOpen="true">
-					<template #label>{{ i18n.ts.specifyUser }}</template>
-					<template v-if="user" #suffix>@{{ user.username }}{{ user.host ? `@${user.host}` : "" }}</template>
-
+				<div v-if="searchScope === 'user'">
+					<div :class="$style.userSelectLabel">{{ i18n.ts._search.pleaseSelectUser }}</div>
 					<div class="_gaps">
-						<div :class="$style.userItem">
-							<MkUserCardMini v-if="user" :class="$style.userCard" :user="user" :withChart="false"/>
-							<MkButton v-if="user == null && $i != null" transparent :class="$style.addMeButton" @click="selectSelf"><div :class="$style.addUserButtonInner"><span><i class="ti ti-plus"></i><i class="ti ti-user"></i></span><span>{{ i18n.ts.selectSelf }}</span></div></MkButton>
-							<MkButton v-if="user == null" transparent :class="$style.addUserButton" @click="selectUser"><div :class="$style.addUserButtonInner"><i class="ti ti-plus"></i><span>{{ i18n.ts.selectUser }}</span></div></MkButton>
-							<button class="_button" :class="$style.remove" :disabled="user == null" @click="removeUser"><i class="ti ti-x"></i></button>
+						<div v-if="user == null" :class="$style.userSelectButtons">
+							<div v-if="$i != null" style="min-width: 30cqw;">
+								<MkButton
+									transparent
+									:class="$style.userSelectButton"
+									@click="selectSelf"
+								>
+									<div :class="$style.userSelectButtonInner">
+										<span><i class="ti ti-plus"></i><i class="ti ti-user"></i></span>
+										<span>{{ i18n.ts.selectSelf }}</span>
+									</div>
+								</MkButton>
+							</div>
+							<div :style="$i == null ? 'grid-column: span 2;' : undefined">
+								<MkButton
+									transparent
+									:class="$style.userSelectButton"
+									@click="selectUser"
+								>
+									<div :class="$style.userSelectButtonInner">
+										<span><i class="ti ti-plus"></i></span>
+										<span>{{ i18n.ts.selectUser }}</span>
+									</div>
+								</MkButton>
+							</div>
+						</div>
+						<div v-else :class="$style.userSelectedButtons">
+							<div style="overflow: hidden;">
+								<MkUserCardMini
+									:user="user"
+									:withChart="false"
+									:class="$style.userSelectedCard"
+								/>
+							</div>
+							<div>
+								<button
+									class="_button"
+									:class="$style.userSelectedRemoveButton"
+									@click="removeUser"
+								>
+									<i class="ti ti-x"></i>
+								</button>
+							</div>
 						</div>
 					</div>
-				</MkFolder>
+				</div>
 			</div>
 		</MkFoldableSection>
 		<div>
-			<MkButton large primary gradate rounded style="margin: 0 auto;" @click="search">{{ i18n.ts.search }}</MkButton>
+			<MkButton
+				large
+				primary
+				gradate
+				rounded
+				:disabled="searchParams == null"
+				style="margin: 0 auto;"
+				@click="search"
+			>
+				{{ i18n.ts.search }}
+			</MkButton>
 		</div>
 	</div>
 
 	<MkFoldableSection v-if="notePagination">
 		<template #header>{{ i18n.ts.searchResult }}</template>
-		<MkNotes :key="key" :pagination="notePagination"/>
+		<MkNotes :key="`searchNotes:${key}`" :pagination="notePagination"/>
 	</MkFoldableSection>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, toRef, watch } from 'vue';
-import type { UserDetailed } from 'misskey-js/entities.js';
+import { computed, ref, shallowRef, toRef } from 'vue';
+import type * as Misskey from 'misskey-js';
 import type { Paging } from '@/components/MkPagination.vue';
-import MkNotes from '@/components/MkNotes.vue';
-import MkInput from '@/components/MkInput.vue';
-import MkButton from '@/components/MkButton.vue';
+import { $i } from '@/account.js';
+import { host as localHost } from '@/config.js';
 import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import MkFoldableSection from '@/components/MkFoldableSection.vue';
-import MkFolder from '@/components/MkFolder.vue';
 import { useRouter } from '@/router/supplier.js';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkNotes from '@/components/MkNotes.vue';
 import MkRadios from '@/components/MkRadios.vue';
-import { $i } from '@/account.js';
-import { instance } from '@/instance.js';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
 
 const props = withDefaults(defineProps<{
 	query?: string;
@@ -81,76 +141,127 @@ const props = withDefaults(defineProps<{
 });
 
 const router = useRouter();
+
 const key = ref(0);
+const notePagination = ref<Paging<'notes/search'>>();
+
 const searchQuery = ref(toRef(props, 'query').value);
-const notePagination = ref<Paging>();
-const user = ref<UserDetailed | null>(null);
 const hostInput = ref(toRef(props, 'host').value);
 
+const user = shallowRef<Misskey.entities.UserDetailed | null>(null);
+
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 const noteSearchableScope = instance.noteSearchableScope ?? 'local';
 
-const hostSelect = ref<'all' | 'local' | 'specified'>('all');
+//#region set user
+let fetchedUser: Misskey.entities.UserDetailed | null = null;
+
+if (props.userId) {
+	fetchedUser = await misskeyApi('users/show', {
+		userId: props.userId,
+	}).catch(() => null);
+}
 
-const setHostSelectWithInput = (after:string|undefined|null, before:string|undefined|null) => {
-	if (before === after) return;
-	if (after === '') hostSelect.value = 'all';
-	else hostSelect.value = 'specified';
+if (props.username && fetchedUser == null) {
+	fetchedUser = await misskeyApi('users/show', {
+		username: props.username,
+		...(props.host ? { host: props.host } : {}),
+	}).catch(() => null);
+}
+
+if (fetchedUser != null) {
+	if (!(noteSearchableScope === 'local' && fetchedUser.host != null)) {
+		user.value = fetchedUser;
+	}
+}
+//#endregion
+
+const searchScope = ref<'all' | 'local' | 'server' | 'user'>((() => {
+	if (user.value != null) return 'user';
+	if (noteSearchableScope === 'local') return 'local';
+	if (hostInput.value) return 'server';
+	return 'all';
+})());
+
+type SearchParams = {
+	readonly query: string;
+	readonly host?: string;
+	readonly userId?: string;
 };
 
-setHostSelectWithInput(hostInput.value, undefined);
+const fixHostIfLocal = (target: string | null | undefined) => {
+	if (!target || target === localHost) return '.';
+	return target;
+};
 
-watch(hostInput, setHostSelectWithInput);
+const searchParams = computed(() => {
+	const trimmedQuery = searchQuery.value.trim();
+	if (!trimmedQuery) return null;
 
-const searchHost = computed(() => {
-	if (hostSelect.value === 'local') return '.';
-	if (hostSelect.value === 'specified') return hostInput.value;
-	return null;
-});
+	if (searchScope.value === 'user') {
+		if (user.value == null) return null;
+		return {
+			query: trimmedQuery,
+			host: fixHostIfLocal(user.value.host),
+			userId: user.value.id,
+		} as const satisfies SearchParams;
+	}
 
-if (props.userId != null) {
-	misskeyApi('users/show', { userId: props.userId }).then(_user => {
-		user.value = _user;
-	});
-} else if (props.username != null) {
-	misskeyApi('users/show', {
-		username: props.username,
-		...(props.host != null && props.host !== '') ? { host: props.host } : {},
-	}).then(_user => {
-		user.value = _user;
-	});
-}
+	if (searchScope.value === 'server') {
+		let trimmedHost = hostInput.value?.trim();
+		if (!trimmedHost) return null;
+		if (trimmedHost.startsWith('https://') || trimmedHost.startsWith('http://')) {
+			try {
+				trimmedHost = new URL(trimmedHost).host;
+			} catch (err) { /* empty */ }
+		}
+		return {
+			query: trimmedQuery,
+			host: fixHostIfLocal(trimmedHost),
+		} as const satisfies SearchParams;
+	}
+
+	if (searchScope.value === 'local') {
+		return {
+			query: trimmedQuery,
+			host: '.',
+		} as const satisfies SearchParams;
+	}
+
+	return {
+		query: trimmedQuery,
+	} as const satisfies SearchParams;
+});
 
 function selectUser() {
-	os.selectUser({ includeSelf: true, localOnly: instance.noteSearchableScope === 'local' }).then(_user => {
+	os.selectUser({
+		includeSelf: true,
+		localOnly: instance.noteSearchableScope === 'local',
+	}).then(_user => {
 		user.value = _user;
-		hostInput.value = _user.host ?? '';
 	});
 }
 
 function selectSelf() {
-	user.value = $i as UserDetailed | null;
-	hostInput.value = null;
+	user.value = $i;
 }
 
 function removeUser() {
 	user.value = null;
-	hostInput.value = '';
 }
 
 async function search() {
-	const query = searchQuery.value.toString().trim();
-
-	if (query == null || query === '') return;
+	if (searchParams.value == null) return;
 
 	//#region AP lookup
-	if (query.startsWith('https://') && !query.includes(' ')) {
+	if (searchParams.value.query.startsWith('https://') && !searchParams.value.query.includes(' ')) {
 		const confirm = await os.confirm({
 			type: 'info',
 			text: i18n.ts.lookupConfirm,
 		});
 		if (!confirm.canceled) {
 			const promise = misskeyApi('ap/show', {
-				uri: query,
+				uri: searchParams.value.query,
 			});
 
 			os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
@@ -159,6 +270,7 @@ async function search() {
 
 			if (res.type === 'User') {
 				router.push(`/@${res.object.username}@${res.object.host}`);
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 			} else if (res.type === 'Note') {
 				router.push(`/notes/${res.object.id}`);
 			}
@@ -168,25 +280,25 @@ async function search() {
 	}
 	//#endregion
 
-	if (query.length > 1 && !query.includes(' ')) {
-		if (query.startsWith('@')) {
+	if (searchParams.value.query.length > 1 && !searchParams.value.query.includes(' ')) {
+		if (searchParams.value.query.startsWith('@')) {
 			const confirm = await os.confirm({
 				type: 'info',
 				text: i18n.ts.lookupConfirm,
 			});
 			if (!confirm.canceled) {
-				router.push(`/${query}`);
+				router.push(`/${searchParams.value.query}`);
 				return;
 			}
 		}
 
-		if (query.startsWith('#')) {
+		if (searchParams.value.query.startsWith('#')) {
 			const confirm = await os.confirm({
 				type: 'info',
 				text: i18n.ts.openTagPageConfirm,
 			});
 			if (!confirm.canceled) {
-				router.push(`/tags/${encodeURIComponent(query.substring(1))}`);
+				router.push(`/tags/${encodeURIComponent(searchParams.value.query.substring(1))}`);
 				return;
 			}
 		}
@@ -196,9 +308,7 @@ async function search() {
 		endpoint: 'notes/search',
 		limit: 10,
 		params: {
-			query: searchQuery.value,
-			userId: user.value ? user.value.id : null,
-			...(searchHost.value ? { host: searchHost.value } : {}),
+			...searchParams.value,
 		},
 	};
 
@@ -206,41 +316,42 @@ async function search() {
 }
 </script>
 <style lang="scss" module>
-.userItem {
-	display: flex;
-	justify-content: center;
+.userSelectLabel {
+	font-size: 0.85em;
+	padding: 0 0 8px;
+	user-select: none;
 }
-.addMeButton {
-  border: 2px dashed var(--MI_THEME-fgTransparent);
-	padding: 12px;
-	margin-right: 16px;
+
+.userSelectButtons {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: 16px;
 }
-.addUserButton {
-  border: 2px dashed var(--MI_THEME-fgTransparent);
+
+.userSelectButton {
+	width: 100%;
+	height: 100%;
 	padding: 12px;
-	flex-grow: 1;
+	border: 2px dashed var(--fgTransparent);
 }
-.addUserButtonInner {
+
+.userSelectButtonInner {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: space-between;
 	min-height: 38px;
 }
-.userCard {
-	flex-grow: 1;
+
+.userSelectedButtons {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
 }
-.remove {
+
+.userSelectedRemoveButton {
 	width: 32px;
 	height: 32px;
-	align-self: center;
-
-	& > i:before {
-		color: #ff2a2a;
-	}
-
-	&:disabled {
-		opacity: 0;
-	}
+	color: #ff2a2a;
 }
 </style>
diff --git a/packages/frontend/src/pages/search.user.vue b/packages/frontend/src/pages/search.user.vue
index 724fbfdfbda1..faafcc9b2704 100644
--- a/packages/frontend/src/pages/search.user.vue
+++ b/packages/frontend/src/pages/search.user.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<MkFoldableSection v-if="userPagination">
 		<template #header>{{ i18n.ts.searchResult }}</template>
-		<MkUserList :key="key" :pagination="userPagination"/>
+		<MkUserList :key="`searchUsers:${key}`" :pagination="userPagination"/>
 	</MkFoldableSection>
 </div>
 </template>
@@ -48,14 +48,16 @@ const props = withDefaults(defineProps<{
 
 const router = useRouter();
 
-const key = ref('');
+const key = ref(0);
+const userPagination = ref<Paging<'users/search'>>();
+
 const searchQuery = ref(toRef(props, 'query').value);
 const searchOrigin = ref(toRef(props, 'origin').value);
-const userPagination = ref<Paging>();
 
 async function search() {
 	const query = searchQuery.value.toString().trim();
 
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 	if (query == null || query === '') return;
 
 	//#region AP lookup
@@ -75,6 +77,7 @@ async function search() {
 
 			if (res.type === 'User') {
 				router.push(`/@${res.object.username}@${res.object.host}`);
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 			} else if (res.type === 'Note') {
 				router.push(`/notes/${res.object.id}`);
 			}
@@ -117,6 +120,6 @@ async function search() {
 		},
 	};
 
-	key.value = query;
+	key.value++;
 }
 </script>
diff --git a/packages/frontend/src/scripts/gen-search-query.ts b/packages/frontend/src/scripts/gen-search-query.ts
deleted file mode 100644
index a85ee01e26e5..000000000000
--- a/packages/frontend/src/scripts/gen-search-query.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import * as Misskey from 'misskey-js';
-import { host as localHost } from '@@/js/config.js';
-
-export async function genSearchQuery(v: any, q: string) {
-	let host: string;
-	let userId: string;
-	if (q.split(' ').some(x => x.startsWith('@'))) {
-		for (const at of q.split(' ').filter(x => x.startsWith('@')).map(x => x.substring(1))) {
-			if (at.includes('.')) {
-				if (at === localHost || at === '.') {
-					host = null;
-				} else {
-					host = at;
-				}
-			} else {
-				const user = await v.api('users/show', Misskey.acct.parse(at)).catch(x => null);
-				if (user) {
-					userId = user.id;
-				} else {
-					// todo: show error
-				}
-			}
-		}
-	}
-	return {
-		query: q.split(' ').filter(x => !x.startsWith('/') && !x.startsWith('@')).join(' '),
-		host: host,
-		userId: userId,
-	};
-}

From 2290bd7bb72bb2514a7a0ef73fe559bceb1a69cb Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 19 Oct 2024 13:14:16 +0900
Subject: [PATCH 2/5] fix

---
 packages/frontend/src/pages/search.note.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 5a9b3231476f..295918d70605 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -332,7 +332,7 @@ async function search() {
 	width: 100%;
 	height: 100%;
 	padding: 12px;
-	border: 2px dashed var(--fgTransparent);
+	border: 2px dashed var(--MI_THEME-fgTransparent);
 }
 
 .userSelectButtonInner {

From 780ba5a18255e0cd5b64b66977246f36d0d864b0 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 19 Oct 2024 17:23:04 +0900
Subject: [PATCH 3/5] :art:

---
 packages/frontend/src/pages/search.note.vue | 34 ++++++++++++---------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 295918d70605..2f7d01b19793 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -26,22 +26,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<option value="user">{{ i18n.ts._search.searchScopeUser }}</option>
 				</MkRadios>
 
-				<MkInput
-					v-if="searchScope === 'server'"
-					v-model="hostInput"
-					large
-					:placeholder="i18n.ts._search.serverHostPlaceholder"
-					@enter.prevent="search"
-				>
-					<template #label>{{ i18n.ts._search.pleaseEnterServerHost }}</template>
-					<template #prefix><i class="ti ti-server"></i></template>
-				</MkInput>
-
-				<div v-if="searchScope === 'user'">
+				<div v-if="searchScope === 'server'" :class="$style.subOptionRoot">
+					<MkInput
+						v-model="hostInput"
+						:placeholder="i18n.ts._search.serverHostPlaceholder"
+						@enter.prevent="search"
+					>
+						<template #label>{{ i18n.ts._search.pleaseEnterServerHost }}</template>
+						<template #prefix><i class="ti ti-server"></i></template>
+					</MkInput>
+				</div>
+
+				<div v-if="searchScope === 'user'" :class="$style.subOptionRoot">
 					<div :class="$style.userSelectLabel">{{ i18n.ts._search.pleaseSelectUser }}</div>
 					<div class="_gaps">
 						<div v-if="user == null" :class="$style.userSelectButtons">
-							<div v-if="$i != null" style="min-width: 30cqw;">
+							<div v-if="$i != null">
 								<MkButton
 									transparent
 									:class="$style.userSelectButton"
@@ -115,7 +115,7 @@ import { computed, ref, shallowRef, toRef } from 'vue';
 import type * as Misskey from 'misskey-js';
 import type { Paging } from '@/components/MkPagination.vue';
 import { $i } from '@/account.js';
-import { host as localHost } from '@/config.js';
+import { host as localHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
@@ -316,6 +316,12 @@ async function search() {
 }
 </script>
 <style lang="scss" module>
+.subOptionRoot {
+	background: var(--MI_THEME-panel);
+	border-radius: var(--MI-radius);
+	padding: var(--MI-margin);
+}
+
 .userSelectLabel {
 	font-size: 0.85em;
 	padding: 0 0 8px;

From b144e760863ec599c33bb255e84114eeaa096e14 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 19 Oct 2024 17:23:23 +0900
Subject: [PATCH 4/5] Update Changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f3dcb7bbd85..963f31a6d1ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 -
 
 ### Client
--
+- Enhance: デザインの調整
 
 ### Server
 -

From 4e17602abb452385987225aa7e75fae957596f83 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 19 Oct 2024 17:34:03 +0900
Subject: [PATCH 5/5] Update Changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be6ac36c85ec..b3e0a3a063de 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,8 @@
 ### Client
 - Enhance: Bull DashboardでRelationship Queueの状態も確認できるように  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/751)
-- Enhance: デザインの調整
+- Enhance: ノート検索ページのデザイン調整  
+  (Cherry-picked from https://github.com/taiyme/misskey/pull/273)
 
 ### Server
 -