- refactor search page

- lint fixes
- UI bug fix

packages/frontend/src/pages/search.event.vue

@@ -0,0 +1,65 @@
+<template>
+<div class="_gaps">
+	<div class="_gaps">
+		<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search">
+			<template #prefix><i class="ti ti-search"></i></template>
+		</MkInput>
+		<MkSelect v-model="eventSort" small>
+			<template #label>{{ i18n.ts.sort }}</template>
+			<option value="startDate">{{ i18n.ts._event.startDate }}</option>
+			<option value="createdAt">{{ i18n.ts.reverseChronological }}</option>
+		</MkSelect>
+		<section>
+			<MkInput v-model="startDate" small type="date" class="input">
+				<template #label>{{ i18n.ts._event.startDate }}</template>
+			</MkInput>
+			<MkInput v-model="endDate" small type="date" class="input">
+				<template #label>{{ i18n.ts._event.endDate }}</template>
+			</MkInput>
+		</section>
+		<MkButton large primary gradate rounded @click="search">{{ i18n.ts.search }}</MkButton>
+	</div>
+
+	<MkFoldableSection v-if="eventPagination">
+		<template #header>{{ i18n.ts.searchResult }}</template>
+		<MkNotes :key="key" :pagination="eventPagination" :getDate="eventSort === 'startDate' ? note => note.event.start : undefined"/>
+	</MkFoldableSection>
+</div>
+</template>
+	
+<script lang="ts" setup>
+import MkNotes from '@/components/MkNotes.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import { i18n } from '@/i18n';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
+		
+let searchQuery = $ref('');
+let key = $ref(0);
+let eventSort = $ref('startDate');
+let eventPagination = $ref();
+let startDate = $ref(null);
+let endDate = $ref(null);
+	
+async function search(): Promise<void> {
+	const query = searchQuery.toString().trim();
+
+	// only notes/users search require the query string
+	if (query == null || query === '') return;
+
+	eventPagination = {
+		endpoint: 'notes/events/search',
+		limit: 10,
+		offsetMode: true,
+		params: {
+			query: !searchQuery ? undefined : searchQuery,
+			sortBy: eventSort,
+			sinceDate: startDate ? (new Date(startDate)).getTime() : undefined,
+			untilDate: endDate ? (new Date(endDate)).getTime() + 1000 * 3600 * 24 : undefined,
+		},
+	};
+
+	key++;
+}
+</script>

packages/frontend/src/pages/search.vue

@@ -14,48 +14,16 @@
 	<MkSpacer v-else-if="tab === 'user'" :contentMax="800">
 		<XUser/>
 	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'event'" :content-max="800">
+	<MkSpacer v-else-if="tab === 'event'" :contentMax="800">
-		<div class="_gaps">
+		<XEvent/>
-			<div class="_gaps">
-				<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search">
-					<template #prefix><i class="ti ti-search"></i></template>
-				</MkInput>
-				<MkSelect v-model="eventSort" small>
-					<template #label>{{ i18n.ts.sort }}</template>
-					<option value="startDate">{{ i18n.ts._event.startDate }}</option>
-					<option value="createdAt">{{ i18n.ts.reverseChronological }}</option>
-				</MkSelect>
-				<section>
-					<MkInput v-model="startDate" small type="date" class="input">
-						<template #label>{{ i18n.ts._event.startDate }}</template>
-					</MkInput>
-					<MkInput v-model="endDate" small type="date" class="input">
-						<template #label>{{ i18n.ts._event.endDate }}</template>
-					</MkInput>
-				</section>
-				<MkButton large primary gradate rounded @click="search">{{ i18n.ts.search }}</MkButton>
-			</div>
-
-			<MkFoldableSection v-if="eventPagination">
-				<template #header>{{ i18n.ts.searchResult }}</template>
-				<MkNotes :key="key" :pagination="eventPagination" :get-date="eventSort === 'startDate' ? note => note.event.start : undefined"/>
-			</MkFoldableSection>
-		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
-import MkNotes from '@/components/MkNotes.vue';
-import MkUserList from '@/components/MkUserList.vue';
-import MkInput from '@/components/MkInput.vue';
-import MkRadios from '@/components/MkRadios.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/MkSelect.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
-import * as os from '@/os';
 import { $i } from '@/account';
 import { instance } from '@/instance';
 import MkInfo from '@/components/MkInfo.vue';
@@ -63,84 +31,12 @@ import { $ref } from 'vue/macros';
 
 const XNote = defineAsyncComponent(() => import('./search.note.vue'));
 const XUser = defineAsyncComponent(() => import('./search.user.vue'));
+const XEvent = defineAsyncComponent(() => import('./search.event.vue'));
 
 let tab = $ref('note');
-let searchQuery = $ref('');
-let key = $ref('');
-let searchOrigin = $ref('combined');
-let eventSort = $ref('startDate');
-let notePagination = $ref();
-let userPagination = $ref();
-let eventPagination = $ref();
-let startDate = $ref(null);
-let endDate = $ref(null);
 
 const notesSearchAvailable = (($i == null && instance.policies.canSearchNotes) || ($i != null && $i.policies.canSearchNotes));
 
-async function search() {
-	const query = searchQuery.toString().trim();
-
-	// only notes/users search require the query string
-	if ((query == null || query === '') && tab !== 'event') 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') {
-			router.push(`/@${res.object.username}@${res.object.host}`);
-		} else if (res.type === 'Note') {
-			router.push(`/notes/${res.object.id}`);
-		}
-
-		return;
-	}
-
-	if (tab === 'note') {
-		notePagination = {
-			endpoint: 'notes/search',
-			limit: 10,
-			params: {
-				query: searchQuery,
-				channelId: props.channel,
-			},
-		};
-	} else if (tab === 'user') {
-		userPagination = {
-			endpoint: 'users/search',
-			limit: 10,
-			params: {
-				query: searchQuery,
-				origin: searchOrigin,
-			},
-		};
-	} else if (tab === 'event') {
-		eventPagination = {
-			endpoint: 'notes/events/search',
-			limit: 10,
-			offsetMode: true,
-			params: {
-				query: !searchQuery ? undefined : searchQuery,
-				sortBy: eventSort,
-				sinceDate: startDate ? (new Date(startDate)).getTime() : undefined,
-				untilDate: endDate ? (new Date(endDate)).getTime() + 1000 * 3600 * 24 : undefined,
-			},
-		};
-
-		// only refresh search on query/key change
-		key = JSON.stringify(eventPagination);
-
-		return;
-	}
-
-	key = query;
-}
-
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{

packages/frontend/src/pages/user/events.vue

@@ -1,5 +1,5 @@
 <template>
-<MkSpacer :content-max="800" style="padding-top: 0">
+<MkSpacer :contentMax="800" style="padding-top: 0">
 	<MkStickyContainer>
 		<template #header>
 			<MkTab v-model="include" :class="$style.tab">
@@ -7,7 +7,7 @@
 				<option :value="null">{{ i18n.ts.reverseChronological }}</option>
 			</MkTab>
 		</template>
-		<MkNotes :no-gap="true" :pagination="pagination" :class="$style.tl" :get-date="include === 'upcoming' ? note => note.event.start : undefined "/>
+		<MkNotes :noGap="true" :pagination="pagination" :class="$style.tl" :getDate="include === 'upcoming' ? note => note.event.start : undefined "/>
 	</MkStickyContainer>
 </MkSpacer>
 </template>

packages/frontend/src/pages/user/index.vue

@@ -2,21 +2,6 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<div>
-		<Transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XHome v-if="tab === 'home'" :user="user"/>
-				<XTimeline v-else-if="tab === 'notes'" :user="user"/>
-				<XEvent v-else-if="tab === 'events'" :user="user"/>
-				<XActivity v-else-if="tab === 'activity'" :user="user"/>
-				<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
-				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
-				<XClips v-else-if="tab === 'clips'" :user="user"/>
-				<XPages v-else-if="tab === 'pages'" :user="user"/>
-				<XGallery v-else-if="tab === 'gallery'" :user="user"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</Transition>
 		<div v-if="user">
 			<XHome v-if="tab === 'home'" :user="user"/>
 			<XTimeline v-else-if="tab === 'notes'" :user="user"/>