feat(frontend): 検索画面の統一とピックアップ機能 (taiyme#126)

Co-authored-by: taiyme <[email protected]>

packages/client/src/components/MkNotes.vue

@@ -24,7 +24,7 @@ import XList from '@/components/MkDateSeparatedList.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n';
 
-const props = defineProps<{
+defineProps<{
 	pagination: Paging;
 	noGap?: boolean;
 }>();

packages/client/src/components/MkUserList.vue

@@ -1,5 +1,5 @@
 <template>
-<MkPagination :pagination="pagination">
+<MkPagination ref="pagingComponent" :pagination="pagination">
 	<template #empty>
 		<div class="_fullinfo">
 			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@@ -16,15 +16,21 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue';
+import { ref } from 'vue';
 import MkUserInfo from '@/components/MkUserInfo.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n';
 
-const props = defineProps<{
+defineProps<{
 	pagination: Paging;
 	noGap?: boolean;
 }>();
+
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+
+defineExpose({
+	pagingComponent,
+});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/init.ts

@@ -32,16 +32,16 @@ import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
 import { defaultStore, ColdDeviceStorage } from '@/store';
 import { fetchInstance, instance } from '@/instance';
 import { makeHotkey } from '@/scripts/hotkey';
-import { search } from '@/scripts/search';
 import { deviceKind } from '@/scripts/device-kind';
 import { initializeSw } from '@/scripts/initialize-sw';
 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 { trimHash } from '@/scripts/tms/url-hash';
+import { mainRouter } from '@/router';
 
-(async () => {
+(async (): Promise<void> => {
 	console.info(`Misskey v${version}`);
 
 	const [{ type: entryType }] = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
@@ -124,7 +124,7 @@ import { trimHash } from '@/scripts/tms/url-hash';
 
 	//#region Set lang attr
 	const html = document.documentElement;
-	html.setAttribute('lang', lang);
+	html.setAttribute('lang', lang ?? 'en-US');
 	//#endregion
 
 	//#region loginId
@@ -223,7 +223,7 @@ import { trimHash } from '@/scripts/tms/url-hash';
 
 	// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 	// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
-	const rootEl = (() => {
+	const rootEl = ((): HTMLElement => {
 		const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
 
 		const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
@@ -233,10 +233,10 @@ import { trimHash } from '@/scripts/tms/url-hash';
 			return currentEl;
 		}
 
-		const rootEl = document.createElement('div');
-		rootEl.id = MISSKEY_MOUNT_DIV_ID;
-		document.body.appendChild(rootEl);
-		return rootEl;
+		const rootEl_ = document.createElement('div');
+		rootEl_.id = MISSKEY_MOUNT_DIV_ID;
+		document.body.appendChild(rootEl_);
+		return rootEl_;
 	})();
 
 	app.mount(rootEl);
@@ -268,6 +268,7 @@ import { trimHash } from '@/scripts/tms/url-hash';
 				}
 			}
 		} catch (err) {
+			// emtpy
 		}
 	}
 
@@ -342,7 +343,7 @@ import { trimHash } from '@/scripts/tms/url-hash';
 		}
 	});
 
-	stream.on('emojiAdded', emojiData => {
+	stream.on('emojiAdded', _emojiData => {
 		// TODO
 		//store.commit('instance/set', );
 	});
@@ -359,7 +360,9 @@ import { trimHash } from '@/scripts/tms/url-hash';
 		'd': (): void => {
 			defaultStore.set('darkMode', !defaultStore.state.darkMode);
 		},
-		's': search,
+		's': (): void => {
+			mainRouter.push('/search');
+		},
 	};
 
 	if ($i) {

packages/client/src/navbar.ts

@@ -1,6 +1,5 @@
 import { computed, 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',
@@ -99,29 +98,30 @@ export const navbarItemDef = reactive({
 	ui: {
 		title: 'switchUi',
 		icon: 'ti ti-devices',
-		action: (ev) => {
+		action: (ev: MouseEvent) => {
+			const el = ev.currentTarget ?? ev.target;
 			os.popupMenu([{
 				text: i18n.ts.default,
 				active: ui === 'default' || ui === null,
-				action: () => {
+				action: (): void => {
 					localStorage.setItem('ui', 'default');
 					unisonReload();
 				},
 			}, {
 				text: i18n.ts.deck,
 				active: ui === 'deck',
-				action: () => {
+				action: (): void => {
 					localStorage.setItem('ui', 'deck');
 					unisonReload();
 				},
 			}, {
 				text: i18n.ts.classic,
 				active: ui === 'classic',
-				action: () => {
+				action: (): void => {
 					localStorage.setItem('ui', 'classic');
 					unisonReload();
 				},
-			}], ev.currentTarget ?? ev.target);
+			}], el instanceof HTMLElement ? el : undefined);
 		},
 	},
 	about: {
@@ -134,7 +134,7 @@ export const navbarItemDef = reactive({
 	reload: {
 		title: 'reload',
 		icon: 'ti ti-refresh',
-		action: (ev) => {
+		action: () => {
 			location.reload();
 		},
 	},

packages/client/src/os.ts

@@ -207,6 +207,7 @@ export const toast = (message: string): void => {
 };
 
 export const alert = (props: {
+	[x: string]: unknown;
 	type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
 	title?: string | null;
 	text?: string | null;

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,34 +17,23 @@ 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 { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
-import XUserList from '@/components/MkUserList.vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	tag?: string;
-}>();
+	initialTab?: string;
+}>(), {
+	initialTab: 'featured',
+});
 
-let tab = $ref('featured');
+let tab = $ref(props.initialTab);
 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(() => [{
@@ -72,9 +44,6 @@ const headerTabs = $computed(() => [{
 	key: 'users',
 	icon: 'ti ti-users',
 	title: i18n.ts.users,
-}, {
-	key: 'search',
-	title: i18n.ts.search,
 }]);
 
 definePageMetadata(computed(() => ({