chore: tweak MkEvent

locales/ja-JP.yml

@@ -1037,7 +1037,9 @@ _serverRules:
   description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"
 
 _event:
-  title: "題"
+  title: "題名"
+  startDateTime: "開始日時"
+  endDateTime: "終了日時"
   startDate: "開始日"
   endDate: "終了日"
   startTime: "開始時刻"

packages/frontend/.storybook/generate.tsx

@@ -397,6 +397,7 @@ function toStories(component: string): string {
 Promise.all([
 	glob('src/components/global/*.vue'),
 	glob('src/components/Mk{A,B}*.vue'),
+	glob('src/components/MkEvent.vue'),
 	glob('src/components/MkGalleryPostPreview.vue'),
 	glob('src/components/MkSignupServerRules.vue'),
 	glob('src/pages/user/home.vue'),

packages/frontend/src/components/MkEvent.stories.impl.ts

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import MkEvent from './MkEvent.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkEvent,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			beforeMount () {
+				document.body.style.background = 'var(--panel)';
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkEvent v-bind="props" />',
+		};
+	},
+	args: {
+		note: {
+			event: {
+				title: 'Come on a Tea Party!',
+				start: '2017-10-25T15:00:00+0900',
+				end: '2017-10-25T18:00:00+0900',
+				detail: {
+					location: 'Kawasaki, Japan',
+					description: 'Let\'s have a tea party!',
+				},
+			},
+		},
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkEvent>;

packages/frontend/src/components/MkEvent.vue

@@ -1,22 +1,66 @@
 <template>
-<div><span class="mfm-x2">{{ note.event!.title }}</span></div>
-<div>Start: {{ (new Date(note.event!.start)).toLocaleString() }}</div>
-<div v-if="!!note.event!.end">End: {{ (new Date(note.event!.end)).toLocaleString() }}</div>
-<ul>
-	<li v-for="k in Object.keys(note.event!.metadata)" :key="k">
-		{{ k }}: {{ note.event!.metadata[k] }}
-	</li>
-</ul>
+<div :class="$style.container">
+	<div :class="$style.title">
+		<i class="ti ti-calendar-event icon"></i>
+		{{ note.event!.title }}
+	</div>
+	<dl :class="$style.details">
+		<dt :class="$style.key">{{ i18n.ts._event.startDateTime }}</dt>
+		<dd :class="$style.value">
+			<MkTime :time="note.event!.start" mode="detail"/>
+		</dd>
+		<template v-if="note.event!.end">
+			<dt :class="$style.key">{{ i18n.ts._event.endDateTime }}</dt>
+			<dd :class="$style.value">
+				<MkTime :time="note.event!.end" mode="detail"/>
+			</dd>
+		</template>
+		<template v-for="[key, value] of Object.entries(note.event!.detail)" :key="key">
+			<dt :class="$style.key">{{ key }}</dt>
+			<dd :class="$style.value">{{ value }}</dd>
+		</template>
+	</dl>
+</div>
 </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>
+.container {
+	background: var(--bg);
+	border-radius: var(--radius);
+	padding: 1rem;
+}
+
+.title {
+	font-size: 1.6rem;
+	line-height: 1.25;
+	font-weight: bold;
+	padding-bottom: 1rem;
+	border-bottom: .5px solid var(--divider);
+}
+
+.details {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-gap: 1rem;
+	padding-top: 1rem;
+	margin: 0;
+}
+
+.key {
+	opacity: 0.75;
+}
+
+.value {
+	margin: 0;
+	opacity: 0.75;
+}
 </style>