feat: 検索ウィジェット

locales/en-US.yml

@@ -2476,6 +2476,7 @@ _widgets:
   birthdayFollowings: "Users who celebrate their birthday today"
   dice: "Dice"
 
+  search: "Search"
 _cw:
   hide: "Hide"
   show: "Show content"

locales/index.d.ts

@@ -9749,6 +9749,7 @@ export interface Locale extends ILocale {
          * サイコロ
          */
         "dice": string;
+        "search": string;
     };
     "_cw": {
         /**

locales/ja-JP.yml

@@ -2564,6 +2564,7 @@ _widgets:
   clicker: "クリッカー"
   birthdayFollowings: "今日誕生日のユーザー"
   dice: "サイコロ"
+  search: "検索"
 
 _cw:
   hide: "隠す"

packages/frontend/src/components/MkSearchResultWindow.vue

@@ -0,0 +1,35 @@
+<!--
+SPDX-FileCopyrightText: marie and other Sharkey contributors, and esurio
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+<template>
+<MkWindow ref="window" :initialWidth="600" :initialHeight="450" :canResize="true" @closed="emit('closed')">
+	<template #header>
+		<i class="ti ti-zoom" style="margin-right: 0.5em;"></i>
+		<b>{{ i18n.ts.searchResult }}</b>
+	</template>
+	<MkNotes :key="props.noteKey" :pagination="props.notePagination"/>
+</MkWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import type { Paging } from '@/components/MkPagination.vue';
+import MkNotes from '@/components/MkNotes.vue';
+import MkWindow from '@/components/MkWindow.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	noteKey: string | number | symbol | undefined;
+	notePagination: Paging;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+</script>
+
+<style lang="scss" module>
+
+</style>

packages/frontend/src/components/MkWidgets.vue

@@ -71,6 +71,13 @@ const props = defineProps<{
 	edit: boolean;
 }>();
 
+// This will not be available for now as I don't think this is needed
+// const notesSearchAvailable = (($i == null && instance.policies.canSearchNotes) || ($i != null && $i.policies.canSearchNotes));
+/* if (!notesSearchAvailable) {
+	const wid = widgetDefs.findIndex(widget => widget === 'search');
+	widgetDefs.splice(wid, 1);
+} */
+
 const emit = defineEmits<{
 	(ev: 'updateWidgets', widgets: Widget[]): void;
 	(ev: 'addWidget', widget: Widget): void;

packages/frontend/src/widgets/WidgetSearch.vue

@@ -0,0 +1,130 @@
+<!--
+SPDX-FileCopyrightText: marie and other Sharkey contributors, and esurio
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<MkContainer :showHeader="widgetProps.showHeader" class="skw-search">
+		<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @keydown="onInputKeydown">
+			<template #suffix>
+				<button style="border: none; background: none; z-index: 2; pointer-events: auto; position: relative; margin: 0 auto;" @click="search"><i class="ti ti-zoom"></i></button>
+			</template>
+		</MkInput>
+	</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from 'vue';
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import MkInput from '@/components/MkInput.vue';
+import MkContainer from '@/components/MkContainer.vue';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import * as os from '@/os.js';
+import { useRouter } from '@/router/supplier.js';
+import { GetFormResultType } from '@/scripts/form.js';
+
+const name = 'search';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+function onInputKeydown(evt: KeyboardEvent) {
+	if (evt.key === 'Enter') {
+		evt.preventDefault();
+		evt.stopPropagation();
+		search();
+	}
+}
+
+const router = useRouter();
+
+let key = ref(0);
+let searchQuery = ref('');
+let notePagination = ref();
+let isLocalOnly = ref(false);
+let order = ref(true);
+let filetype = ref<null | string>(null);
+
+async function search() {
+	const query = searchQuery.value.toString().trim();
+
+	if (query == null || query === '') return;
+
+	if (query.startsWith('https://')) {
+		const promise = misskeyApi('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 (query.match(/^@[a-z0-9_.-]+@[a-z0-9_.-]+$/i)) {
+		router.push(`/${query}`);
+		return;
+	}
+
+	if (query.startsWith('#')) {
+		router.push(`/tags/${encodeURIComponent(query.substring(1))}`);
+		return;
+	}
+
+	notePagination.value = {
+		endpoint: 'notes/search',
+		limit: 10,
+		params: {
+			query: searchQuery,
+			userId: null,
+			order: order.value ? 'desc' : 'asc',
+			filetype: filetype.value,
+		},
+	};
+
+	if (isLocalOnly.value) notePagination.value.params.host = '.';
+
+	key.value++;
+
+	os.popup(defineAsyncComponent(() => import('@/components/MkSearchResultWindow.vue')), {
+		noteKey: key.value,
+		notePagination: notePagination.value,
+	}, {
+	}, 'closed');
+	}
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+	</script>
+
+	<style lang="scss" scoped>
+	.skw-search {
+		border-radius: var(--radius-sm) !important;
+	}
+	</style>

packages/frontend/src/widgets/index.ts

@@ -35,6 +35,7 @@ export default function(app: App) {
 	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 	app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue')));
 	app.component('WidgetDice', defineAsyncComponent(() => import('./WidgetDice.vue')));
+	app.component('WidgetSearch', defineAsyncComponent(() => import('./WidgetSearch.vue')));
 }
 
 export const widgets = [
@@ -67,4 +68,5 @@ export const widgets = [
 	'clicker',
 	'birthdayFollowings',
 	'dice',
+	'search',
 ];