feat: 2つの検索画面の統合 (misskey-dev#9949) (misskey-dev#10038)

* feat: 検索画面の UI を統一 * fix: エラーの修正 * Support remote objects in search * Simplify search.vue (remove dead code) --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
yu256 · Mar 3, 2023 · cb6cfa1 · cb6cfa1
1 parent 65f49a5
commit cb6cfa1
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 120 deletions.
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
@@ -38,6 +38,7 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
+import { mainRouter } from './router';
 
 (async () => {
 	console.info(`Misskey v${version}`);
@@ -350,7 +351,9 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		'd': (): void => {
 			defaultStore.set('darkMode', !defaultStore.state.darkMode);
 		},
-		's': search,
+		's': (): void => {
+			mainRouter.push('/search');
+		}
 	};
 
 	if ($i) {

diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
@@ -1,6 +1,5 @@
 import { computed, ref, reactive } from 'vue';
 import { $i } from './account';
-import { search } from '@/scripts/search';
 import { openInstanceMenu } from './ui/_common_/common';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -49,7 +48,7 @@ export const navbarItemDef = reactive({
 	search: {
 		title: 'search',
 		icon: 'ti ti-search',
-		action: () => search(),
+		to: '/search',
 	},
 	lists: {
 		title: 'lists',

diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
@@ -8,23 +8,6 @@
 		<div v-else-if="tab === 'users'">
 			<XUsers/>
 		</div>
-		<div v-else-if="tab === 'search'">
-			<MkSpacer :content-max="1200">
-				<div>
-					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
-						<template #prefix><i class="ti ti-search"></i></template>
-						<template #label>{{ i18n.ts.searchUser }}</template>
-					</MkInput>
-					<MkRadios v-model="searchOrigin" class="_formBlock">
-						<option value="combined">{{ i18n.ts.all }}</option>
-						<option value="local">{{ i18n.ts.local }}</option>
-						<option value="remote">{{ i18n.ts.remote }}</option>
-					</MkRadios>
-				</div>
-
-				<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
-			</MkSpacer>
-		</div>
 	</div>
 </MkStickyContainer>
 </template>
@@ -34,37 +17,19 @@ import { computed, watch } from 'vue';
 import XFeatured from './explore.featured.vue';
 import XUsers from './explore.users.vue';
 import MkFolder from '@/components/MkFolder.vue';
-import MkInput from '@/components/form/input.vue';
-import MkRadios from '@/components/form/radios.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import XUserList from '@/components/MkUserList.vue';
-
 const props = defineProps<{
 	tag?: string;
 }>();
 
 let tab = $ref('featured');
 let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>();
-let searchQuery = $ref(null);
-let searchOrigin = $ref('combined');
 
 watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);
 });
 
-const searchPagination = {
-	endpoint: 'users/search' as const,
-	limit: 10,
-	params: computed(() => (searchQuery && searchQuery !== '') ? {
-		query: searchQuery,
-		origin: searchOrigin,
-	} : null),
-};
-
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
@@ -75,9 +40,6 @@ const headerTabs = $computed(() => [{
 	key: 'users',
 	icon: 'ti ti-users',
 	title: i18n.ts.users,
-}, {
-	key: 'search',
-	title: i18n.ts.search,
 }]);
 
 definePageMetadata(computed(() => ({

diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
@@ -2,37 +2,143 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<XNotes ref="notes" :pagination="pagination"/>
+		<MkInput v-model="searchQuery" :large="true" :autofocus="true" :debounce="true" type="search" style="margin-bottom: var(--margin);" @update:model-value="search()">
+			<template #prefix><i class="ti ti-search"></i></template>
+		</MkInput>
+		<MkTab v-model="searchType" style="margin-bottom: var(--margin);" @update:model-value="search()">
+			<option value="note">{{ i18n.ts.note }}</option>
+			<option value="user">{{ i18n.ts.user }}</option>
+		</MkTab>
+
+		<div v-if="searchType === 'note'">
+			<MkNotes v-if="searchQuery" ref="notes" :pagination="notePagination"/>
+		</div>
+		<div v-else>
+			<MkRadios v-model="searchOrigin" style="margin-bottom: var(--margin);" @update:model-value="search()">
+				<option value="combined">{{ i18n.ts.all }}</option>
+				<option value="local">{{ i18n.ts.local }}</option>
+				<option value="remote">{{ i18n.ts.remote }}</option>
+			</MkRadios>
+
+			<MkUserList v-if="searchQuery" ref="users" :pagination="userPagination"/>
+		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
+import { computed, onMounted } from 'vue';
+import MkNotes from '@/components/MkNotes.vue';
+import MkUserList from '@/components/MkUserList.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkTab from '@/components/MkTab.vue';
+import MkRadios from '@/components/MkRadios.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import * as os from '@/os';
+import { mainRouter } from '@/router';
 
 const props = defineProps<{
 	query: string;
 	channel?: string;
+	type?: string;
+	origin?: string;
 }>();
 
-const pagination = {
+let searchQuery = $ref('');
+let searchType = $ref('note');
+let searchOrigin = $ref('combined');
+
+onMounted(() => {
+	searchQuery = props.query ?? '';
+	searchType = props.type ?? 'note';
+	searchOrigin = props.origin ?? 'combined';
+
+	if (searchQuery) {
+		search();
+	}
+});
+
+const search = async () => {
+	const query = searchQuery.toString().trim();
+
+	if (query == null || query === '') return;
+
+	if (query.startsWith('@') && !query.includes(' ')) {
+		mainRouter.push(`/${query}`);
+		return;
+	}
+
+	if (query.startsWith('#')) {
+		mainRouter.push(`/tags/${encodeURIComponent(query.substr(1))}`);
+		return;
+	}
+
+	// like 2018/03/12
+	if (/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}/.test(query.replace(/-/g, '/'))) {
+		const date = new Date(query.replace(/-/g, '/'));
+
+		// 日付しか指定されてない場合、例えば 2018/03/12 ならユーザーは
+		// 2018/03/12 のコンテンツを「含む」結果になることを期待するはずなので
+		// 23時間59分進める(そのままだと 2018/03/12 00:00:00 「まで」の
+		// 結果になってしまい、2018/03/12 のコンテンツは含まれない)
+		if (query.replace(/-/g, '/').match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
+			date.setHours(23, 59, 59, 999);
+		}
+
+		// TODO
+		//v.$root.$emit('warp', date);
+		os.alert({
+			icon: 'ti ti-history',
+			iconOnly: true, autoClose: true,
+		});
+		return;
+	}
+
+	if (query.startsWith('https://')) {
+		const promise = os.api('ap/show', {
+			uri: query,
+		});
+
+		os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
+
+		const res = await promise;
+
+		if (res.type === 'User') {
+			mainRouter.push(`/@${res.object.username}@${res.object.host}`);
+		} else if (res.type === 'Note') {
+			mainRouter.push(`/notes/${res.object.id}`);
+		}
+
+		return;
+	}
+
+	window.history.replaceState('', '', `/search?q=${encodeURIComponent(query)}&type=${searchType}${searchType === 'user' ? `&origin=${searchOrigin}` : ''}`);
+};
+
+const notePagination = {
 	endpoint: 'notes/search' as const,
 	limit: 10,
 	params: computed(() => ({
-		query: props.query,
+		query: searchQuery,
 		channelId: props.channel,
 	})),
 };
+const userPagination = {
+	endpoint: 'users/search' as const,
+	limit: 10,
+	params: computed(() => ({
+		query: searchQuery,
+		origin: searchOrigin,
+	})),
+};
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
-	title: i18n.t('searchWith', { q: props.query }),
+	title: searchQuery ? i18n.t('searchWith', { q: searchQuery }) : i18n.ts.search,
 	icon: 'ti ti-search',
 })));
 </script>
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
@@ -217,6 +217,8 @@ export const routes = [{
 	query: {
 		q: 'query',
 		channel: 'channel',
+		type: 'type',
+		origin: 'origin',
 	},
 }, {
 	path: '/authorize-follow',

diff --git a/packages/client/src/scripts/search.ts b/packages/client/src/scripts/search.ts
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
@@ -41,11 +41,11 @@
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
-import { search } from '@/scripts/search';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { openAccountMenu } from '@/account';
 import MkButton from '@/components/MkButton.vue';
+import { mainRouter } from '@/router';
 
 export default defineComponent({
 	components: {
@@ -97,7 +97,7 @@ export default defineComponent({
 		},
 
 		search() {
-			search();
+			mainRouter.push('/search');
 		},
 
 		more(ev) {

diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
@@ -43,12 +43,12 @@
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
-import { search } from '@/scripts/search';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { openAccountMenu } from '@/account';
 import MkButton from '@/components/MkButton.vue';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
+import { mainRouter } from '@/router';
 //import MisskeyLogo from '@assets/client/misskey.svg';
 
 export default defineComponent({
@@ -117,7 +117,7 @@ export default defineComponent({
 		},
 
 		search() {
-			search();
+			mainRouter.push('/search');
 		},
 
 		more(ev) {

diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
@@ -40,7 +40,6 @@
 import { defineComponent, defineAsyncComponent } from 'vue';
 import XHeader from './header.vue';
 import { host, instanceName } from '@/config';
-import { search } from '@/scripts/search';
 import * as os from '@/os';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -79,7 +78,9 @@ export default defineComponent({
 					if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
 					this.$store.set('darkMode', !this.$store.state.darkMode);
 				},
-				's': search,
+				's': () => {
+					mainRouter.push('/search');
+				},
 				'h|/': this.help,
 			};
 		},