Add simple display of event to note in UI

packages/backend/src/server/api/endpoints/notes/events/search.ts

@@ -100,7 +100,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 					const matches = filters[f].filter(x => x !== null);
 					if (matches.length < 1) throw new ApiError(meta.errors.invalidParam);
 					query.andWhere(new Brackets((qb) => {
-						qb.where('event.metadata ->> :key IN (:...values)', { key: f, values: filters[f].filter(x => x !== null) });
+						qb.where('event.metadata ->> :key IN (:...values)', { key: f, values: matches });
 						if (filters[f].filter(x => x === null).length > 0) {
 							qb.orWhere('event.metadata ->> :key IS NULL', { key: f });
 						}

packages/frontend/src/components/MkEvent.vue

@@ -0,0 +1,23 @@
+<template>
+<div><span class="mfm-x2">{{ note.event!.title }}</span></div>
+<div>Start: {{ note.event!.start }}</div>
+<div v-if="!!note.event!.end">End: {{ note.event!.end }}</div>
+<ul>
+	<li v-for="k in Object.keys(note.event!.metadata)">
+	{{ k }}: {{ note.event!.metadata[k] }}
+	</li>
+</ul>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+//import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	note: misskey.entities.Note
+}>();
+
+</script>
+
+<style lang="scss" module>
+</style>

packages/frontend/src/components/MkNote.vue

@@ -45,6 +45,7 @@
 			<MkNoteHeader :class="$style.header" :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :class="$style.ticker" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
+				<MkEvent v-if="appearNote.event" :note="appearNote"/>
 				<p v-if="appearNote.cw != null" :class="$style.cw">
 					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :i="$i"/>
 					<MkCwButton v-model="showContent" :note="appearNote"/>
@@ -144,6 +145,7 @@ import MkPoll from '@/components/MkPoll.vue';
 import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import MkEvent from '@/components/MkEvent.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import { checkWordMute } from '@/scripts/check-word-mute';