From c4b31525b3e86381dfc1df969afa315ec7b3759a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Thu, 18 May 2023 23:47:17 +0900
Subject: [PATCH] chore: tweak MkEvent

---
 locales/ja-JP.yml                             |  4 +-
 packages/frontend/.storybook/generate.tsx     |  1 +
 .../src/components/MkEvent.stories.impl.ts    | 44 +++++++++++++
 packages/frontend/src/components/MkEvent.vue  | 62 ++++++++++++++++---
 4 files changed, 101 insertions(+), 10 deletions(-)
 create mode 100644 packages/frontend/src/components/MkEvent.stories.impl.ts

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8d34c688e0..9d81513c92 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1037,7 +1037,9 @@ _serverRules:
   description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"
 
 _event:
-  title: "題"
+  title: "題名"
+  startDateTime: "開始日時"
+  endDateTime: "終了日時"
   startDate: "開始日"
   endDate: "終了日"
   startTime: "開始時刻"
diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx
index dbe9729170..7e340b1c18 100644
--- a/packages/frontend/.storybook/generate.tsx
+++ b/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'),
diff --git a/packages/frontend/src/components/MkEvent.stories.impl.ts b/packages/frontend/src/components/MkEvent.stories.impl.ts
new file mode 100644
index 0000000000..e85dc5653b
--- /dev/null
+++ b/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>;
diff --git a/packages/frontend/src/components/MkEvent.vue b/packages/frontend/src/components/MkEvent.vue
index 1933515f35..3b445ce1b5 100644
--- a/packages/frontend/src/components/MkEvent.vue
+++ b/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>