From ded7a80a0111bcad65f3fe2249d442cf74fea437 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 17 Jan 2025 11:48:03 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  59 ++--
 locales/ja-JP.yml                             |  16 +-
 packages/frontend/src/components/MkButton.vue |   9 +-
 .../components/MkNoteDraftSelectDialog.vue    | 265 +++++++++---------
 .../frontend/src/components/MkPostForm.vue    | 101 ++++---
 .../frontend/src/scripts/get-note-summary.ts  |  40 ++-
 6 files changed, 288 insertions(+), 202 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 2651ec3bdf..396f8ce0c4 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5254,22 +5254,6 @@ export interface Locale extends ILocale {
      * 下書き
      */
     "draft": string;
-    /**
-     * 下書きを選択
-     */
-    "selectDraft": string;
-    /**
-     * 下書きはありません
-     */
-    "noDrafts": string;
-    /**
-     * 下書きを保存
-     */
-    "saveDraft": string;
-    /**
-     * 下書きを削除
-     */
-    "removeDraft": string;
     "_accountSettings": {
         /**
          * コンテンツの表示にログインを必須にする
@@ -10751,6 +10735,49 @@ export interface Locale extends ILocale {
             };
         };
     };
+    "_drafts": {
+        /**
+         * 下書きを選択
+         */
+        "select": string;
+        /**
+         * サーバーに下書きを保存しますか？
+         */
+        "saveConfirm": string;
+        /**
+         * ここで「いいえ」を選択しても、下書きは端末内に保存されます。
+         * サーバーに保存することで、端末間で下書きを共有したり、もしもの時にデータが失われるのを防いだりすることができます。
+         */
+        "saveConfirmDescription": string;
+        /**
+         * これ以上下書きを作成できません
+         */
+        "youCantCreateAnymore": string;
+        /**
+         * 下書きを削除
+         */
+        "delete": string;
+        /**
+         * 下書きを削除しますか？
+         */
+        "deleteAreYouSure": string;
+        /**
+         * 下書きはありません
+         */
+        "noDrafts": string;
+        /**
+         * {user}への返信
+         */
+        "replyTo": ParameterizedString<"user">;
+        /**
+         * {user}のノートへの引用
+         */
+        "quoteOf": ParameterizedString<"user">;
+        /**
+         * {channel}への投稿
+         */
+        "postTo": ParameterizedString<"channel">;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b70049cf93..9ed504cfc3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1309,10 +1309,6 @@ acknowledgeNotesAndEnable: "注意事項を理解した上でオンにします
 federationSpecified: "このサーバーはホワイトリスト連合で運用されています。管理者が指定したサーバー以外とやり取りすることはできません。"
 federationDisabled: "このサーバーは連合が無効化されています。他のサーバーのユーザーとやり取りすることはできません。"
 draft: "下書き"
-selectDraft: "下書きを選択"
-noDrafts: "下書きはありません"
-saveDraft: "下書きを保存"
-removeDraft: "下書きを削除"
 
 _accountSettings:
   requireSigninToViewContents: "コンテンツの表示にログインを必須にする"
@@ -2871,3 +2867,15 @@ _captcha:
     _unknown:
       title: "CAPTCHAエラー"
       text: "想定外のエラーが発生しました。"
+
+_drafts:
+  select: "下書きを選択"
+  saveConfirm: "サーバーに下書きを保存しますか？"
+  saveConfirmDescription: "ここで「いいえ」を選択しても、下書きは端末内に保存されます。\nサーバーに保存することで、端末間で下書きを共有したり、もしもの時にデータが失われるのを防いだりすることができます。"
+  youCantCreateAnymore: "これ以上下書きを作成できません"
+  delete: "下書きを削除"
+  deleteAreYouSure: "下書きを削除しますか？"
+  noDrafts: "下書きはありません"
+  replyTo: "{user}への返信"
+  quoteOf: "{user}のノートへの引用"
+  postTo: "{channel}への投稿"
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 311facb4aa..06be05dc33 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <button
 	v-if="!link"
 	ref="el" class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.short]: short, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
 	:type="type"
 	:name="name"
 	:value="value"
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </button>
 <MkA
 	v-else class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.short]: short, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
 	:to="to ?? '#'"
 	:behavior="linkBehavior"
 	@mousedown="onMousedown"
@@ -52,6 +52,7 @@ const props = defineProps<{
 	full?: boolean;
 	small?: boolean;
 	large?: boolean;
+	short?: boolean;
 	transparent?: boolean;
 	asLike?: boolean;
 	name?: string;
@@ -157,6 +158,10 @@ function onMousedown(evt: MouseEvent): void {
 		padding: 8px 16px;
 	}
 
+	&.short {
+		min-width: 0;
+	}
+
 	&.full {
 		width: 100%;
 	}
diff --git a/packages/frontend/src/components/MkNoteDraftSelectDialog.vue b/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
index ff22d3aeae..cce2e08cfa 100644
--- a/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
+++ b/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkModalWindow
 	ref="dialogEl"
+	:width="600"
+	:height="650"
 	:withOkButton="true"
 	:okButtonDisabled="selected == null"
 	@click="cancel()"
@@ -13,65 +15,76 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@ok="ok()"
 	@closed="emit('closed')"
 >
-	<template #header>{{ i18n.ts.selectDraft }}</template>
-	<div>
-		<div :class="$style.result">
-			<div :class="$style.drafts">
-				<MkPagination ref="pagingEl" :pagination="paging">
-					<template #empty>
-						<div class="_fullinfo">
-							<img :src="infoImageUrl" class="_ghost"/>
-							<div>{{ i18n.ts.noDrafts }}</div>
-						</div>
-					</template>
+	<template #header>{{ i18n.ts._drafts.select }}</template>
+	<div :class="$style.drafts" class="_gaps">
+		<!-- TODO: 下書きの保存可能数の残り表示 -->
+		<MkPagination ref="pagingEl" :pagination="paging">
+			<template #empty>
+				<div class="_fullinfo">
+					<img :src="infoImageUrl" class="_ghost"/>
+					<div>{{ i18n.ts._drafts.noDrafts }}</div>
+				</div>
+			</template>
 
-					<template #default="{ items }">
-						<button
-							v-for="draft in items"
-							:key="draft.id"
-							class="_button"
-							:class="[$style.draft, { [$style.selected]: selected && selected.id === draft.id }]"
-							type="button"
-							@click="selected = draft"
-							@dblclick="ok()"
-						>
-							<div :class="$style.draftContainer">
-								<div :class="$style.draftContent">
-									<div :class="$style.draftHeader">
-										<div :class="$style.headerLeft">
-											<div v-if="draft.reply">
-												<i class="ti ti-arrow-back-up"></i><MkAvatar :user="draft.reply.user" :class="$style.headerAvater"/>@{{ `${draft.reply.user.username}${ draft.reply.user.host ? `@${draft.reply.user.host}` : '' }` }} <span>{{ truncateText(draft.reply.text, 10) }}</span>
-											</div>
-											<div v-else-if="draft.renote">
-												<i class="ti ti-quote"></i><MkAvatar :user="draft.renote.user" :class="$style.headerAvater"/>@{{ `${draft.renote.user.username}${ draft.renote.user.host ? `@${draft.renote.user.host}` : '' }` }} <span>{{ truncateText(draft.renote?.text, 10) }}</span>
-											</div>
-											<div v-else>
-												<i class="ti ti-pencil-minus"></i>
-											</div>
-										</div>
-										<div :class="$style.headerRight">
-											<div style="margin-left: 0.5em;" :title="i18n.ts._visibility[draft.visibility]">
-												<i v-if="draft.visibility === 'public' && draft.channel == null" class="ti ti-world"></i>
-												<i v-else-if="draft.visibility === 'home'" class="ti ti-home"></i>
-												<i v-else-if="draft.visibility === 'followers'" class="ti ti-lock"></i>
-												<i v-else-if="draft.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
-											</div>
-											<span v-if="draft.channel" v-tooltip="i18n.ts.channel"><i class="ti ti-device-tv"></i> </span>
-											<span v-if="draft.localOnly" v-tooltip="i18n.ts.localOnly"><i class="ti ti-rocket-off"></i></span>
-										</div>
-									</div>
-									<div :class="$style.draftBody">
-										<div v-if="draft.cw != null" class="cw">{{ truncateText(draft.cw, 20) }}</div>
-										{{ truncateText(draft.text, 20) }}
-									</div>
+			<template #default="{ items }">
+				<button
+					v-for="draft in (items as Misskey.entities.NoteDraft[])"
+					:key="draft.id"
+					class="_button"
+					:class="[$style.draft, { [$style.selected]: selected && selected.id === draft.id }]"
+					type="button"
+					@click="toggleSelected(draft)"
+					@dblclick="ok()"
+				>
+					<div :class="$style.draftBody" class="_gaps_s">
+						<div :class="$style.draftInfo">
+							<div :class="$style.draftMeta">
+								<div v-if="draft.reply" class="_nowrap">
+									<i class="ti ti-arrow-back-up"></i> <I18n :src="i18n.ts._drafts.replyTo" tag="span">
+										<template #user>
+											<Mfm v-if="draft.reply.user.name != null" :text="draft.reply.user.name" :plain="true" :nowrap="true"/>
+											<MkAcct v-else :user="draft.reply.user"/>
+										</template>
+									</I18n>
+								</div>
+								<div v-if="draft.renote && draft.text != null" class="_nowrap">
+									<i class="ti ti-quote"></i> <I18n :src="i18n.ts._drafts.quoteOf" tag="span">
+										<template #user>
+											<Mfm v-if="draft.renote.user.name != null" :text="draft.renote.user.name" :plain="true" :nowrap="true"/>
+											<MkAcct v-else :user="draft.renote.user"/>
+										</template>
+									</I18n>
+								</div>
+								<div v-if="draft.channel" class="_nowrap">
+									<i class="ti ti-device-tv"></i> {{ i18n.tsx._drafts.postTo({ channel: draft.channel.name }) }}
 								</div>
-								<MkButton short :class="$style.deleteButton" @click="deleteDraft(draft)"><i class="ti ti-trash"></i></MkButton>
 							</div>
-						</button>
-					</template>
-				</MkPagination>
-			</div>
-		</div>
+							<div :class="$style.draftVisibility">
+								<MkTime :time="draft.createdAt" colored/>
+								<span style="margin-left: 0.5em;" :title="i18n.ts._visibility[draft.visibility]">
+									<i v-if="draft.visibility === 'public'" class="ti ti-world"></i>
+									<i v-else-if="draft.visibility === 'home'" class="ti ti-home"></i>
+									<i v-else-if="draft.visibility === 'followers'" class="ti ti-lock"></i>
+									<i v-else-if="draft.visibility === 'specified'" class="ti ti-mail"></i>
+								</span>
+								<span v-if="draft.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
+							</div>
+						</div>
+						<div :class="$style.draftContent">
+							<Mfm :text="getNoteSummary(draft, { showRenote: false, showReply: false })" :plain="true" :author="draft.user"/>
+						</div>
+					</div>
+					<div :class="$style.draftActions">
+						<MkButton
+							v-tooltip="i18n.ts._drafts.delete"
+							short
+							:class="$style.itemButton"
+							@click="deleteDraft(draft)"
+						><i class="ti ti-trash"></i></MkButton>
+					</div>
+				</button>
+			</template>
+		</MkPagination>
 	</div>
 </MkModalWindow>
 </template>
@@ -82,8 +95,9 @@ import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkPagination, { type Paging } from '@/components/MkPagination.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
-import { misskeyApi } from '@/scripts/misskey-api.js';
+import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
 import { infoImageUrl } from '@/instance.js';
 
 const emit = defineEmits<{
@@ -102,10 +116,12 @@ const pagingComponent = useTemplateRef('pagingEl');
 const selected = ref<Misskey.entities.NoteDraft | null>(null);
 const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
 
-function truncateText(text: string | null, length: number) {
-	if (text == null) return '';
-	if (text.length <= length) return text;
-	return text.slice(0, length) + '...';
+function toggleSelected(draft: Misskey.entities.NoteDraft) {
+	if (selected.value?.id === draft.id) {
+		selected.value = null;
+	} else {
+		selected.value = draft;
+	}
 }
 
 async function ok() {
@@ -121,96 +137,85 @@ function cancel() {
 	dialogEl.value?.close();
 }
 
-function deleteDraft(draft: Misskey.entities.NoteDraft) {
-	misskeyApi('notes/drafts/delete', { draftId: draft.id }).then(() => {
+async function deleteDraft(draft: Misskey.entities.NoteDraft) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts._drafts.deleteAreYouSure,
+	});
+
+	if (canceled) return;
+
+	os.apiWithDialog('notes/drafts/delete', { draftId: draft.id }).then(() => {
 		pagingComponent.value?.reload();
 	});
 }
 </script>
 
 <style lang="scss" module>
-
-.form {
-	padding: calc(var(--root-margin) / 2) var(--root-margin);
-}
-
-.result {
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
-	height: 100%;
-
-	&.result {
-		padding: 0;
-	}
-}
-
 .drafts {
-	flex: 1;
-	overflow: auto;
-	padding: 8px 0;
+	overflow-x: hidden;
+	overflow-x: clip;
+	overflow-y: auto;
 }
 
 .draft {
-	display: flex;
-	align-items: center;
-	padding: 8px var(--root-margin);
-	font-size: 14px;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	width: 100%;
+	text-align: start;
+	box-sizing: border-box;
+	padding: 16px;
+	gap: 16px;
+	border-bottom: 1px solid var(--MI_THEME-divider);
+
+	&:last-child {
+		border-bottom-color: transparent;
+	}
 
 	&:hover {
-		background: var(--MI_THEME-X7);
+		background: var(--MI_THEME-buttonBg);
+
+		.itemButton:not(:hover) {
+			background-color: var(--MI_THEME-panel);
+		}
 	}
 
 	&.selected {
-		background: var(--MI_THEME-accent);
-		color: #fff;
+		background: var(--MI_THEME-accentedBg);
+
+		.itemButton:not(:hover) {
+			background-color: var(--MI_THEME-panel);
+		}
 	}
 }
 
-.draftContainer {
-	display: flex;
-	flex: 1;
-	flex-basis: 100%;
-}
-
-.draftContent {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	flex-basis: 100%;
-}
-
-.draftHeader {
-	display: flex;
-	justify-content: space-between;
-	flex-grow: 1;
-	padding-bottom: 2px;
-}
-
-.headerLeft {
-	display: flex;
-	align-items: center;
-}
-
-.headerRight {
-	display: flex;
-	align-items: center;
-}
-
-.headerAvater {
-	width: 1.2em;
-	height: 1.2em;
-	margin: 0 0.5em;
-}
-
 .draftBody {
-	padding: 0 8px;
+	width: 100%;
 	min-width: 0;
 }
 
-.deleteButton {
-	align-self: center;
-	margin-left: 0.5em;
-	min-width: 40px;
+.draftInfo {
+	display: flex;
+	width: 100%;
+	font-size: 0.85em;
+	opacity: 0.7;
+}
+
+.draftMeta {
+	flex-grow: 1;
+	min-width: 0;
+}
+
+.draftVisibility {
+	flex-shrink: 0;
+}
+
+.draftContent {
+	display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+	line-clamp: 2;
+  overflow: hidden;
+	font-size: 0.9em;
 }
 </style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 05d1f35be3..010ee4645b 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -101,7 +101,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide, shallowRef, ref, computed, type ShallowRef } from 'vue';
+import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide, shallowRef, ref, computed, type ShallowRef, onBeforeUnmount } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
@@ -572,7 +572,7 @@ function onKeydown(ev: KeyboardEvent) {
 
 	// justEndedComposition.value is for Safari, which keyDown occurs after compositionend.
 	// ev.isComposing is for another browsers.
-	if (ev.key === 'Escape' && !justEndedComposition.value && !ev.isComposing) emit('esc');
+	if (ev.key === 'Escape' && !justEndedComposition.value && !ev.isComposing) esc();
 }
 
 function onKeyup(ev: KeyboardEvent) {
@@ -725,43 +725,39 @@ function deleteDraft() {
 	miLocalStorage.setItem('drafts', JSON.stringify(draftData));
 }
 
-function saveServerDraft() {
-	if (serverDraftId.value == null) {
-		misskeyApi('notes/drafts/create', {
-			text: text.value,
-			useCw: useCw.value,
-			cw: cw.value,
-			visibility: visibility.value,
-			localOnly: localOnly.value,
-			hashtag: hashtags.value,
-			...(files.value.length > 0 ? { fileIds: files.value.map(f => f.id) } : {}),
-			poll: poll.value,
-			...( visibleUsers.value.length > 0 ? { visibleUserIds: visibleUsers.value.map(x => x.id) } : {}),
-			renoteId: renoteTargetNote.value ? renoteTargetNote.value.id : undefined,
-			replyId: replyTargetNote.value ? replyTargetNote.value.id : undefined,
-			quoteId: quoteId.value,
-			channelId: targetChannel.value ? targetChannel.value.id : undefined,
-			reactionAcceptance: reactionAcceptance.value,
-		});
-	} else {
-		misskeyApi('notes/drafts/update', {
-			draftId: serverDraftId.value,
-			text: text.value,
-			useCw: useCw.value,
-			cw: cw.value,
-			visibility: visibility.value,
-			localOnly: localOnly.value,
-			hashtag: hashtags.value,
-			...(files.value.length > 0 ? { fileIds: files.value.map(f => f.id) } : {}),
-			poll: poll.value,
-			...( visibleUsers.value.length > 0 ? { visibleUserIds: visibleUsers.value.map(x => x.id) } : {}),
-			renoteId: renoteTargetNote.value ? renoteTargetNote.value.id : undefined,
-			replyId: replyTargetNote.value ? replyTargetNote.value.id : undefined,
-			quoteId: quoteId.value,
-			channelId: targetChannel.value ? targetChannel.value.id : undefined,
-			reactionAcceptance: reactionAcceptance.value,
-		});
-	}
+async function saveServerDraft() {
+	const promise = misskeyApi(serverDraftId.value == null ? 'notes/drafts/create' : 'notes/drafts/update', {
+		...(serverDraftId.value == null ? {} : { draftId: serverDraftId.value }),
+		text: text.value,
+		useCw: useCw.value,
+		cw: cw.value,
+		visibility: visibility.value,
+		localOnly: localOnly.value,
+		hashtag: hashtags.value,
+		...(files.value.length > 0 ? { fileIds: files.value.map(f => f.id) } : {}),
+		poll: poll.value,
+		...(visibleUsers.value.length > 0 ? { visibleUserIds: visibleUsers.value.map(x => x.id) } : {}),
+		renoteId: renoteTargetNote.value ? renoteTargetNote.value.id : undefined,
+		replyId: replyTargetNote.value ? replyTargetNote.value.id : undefined,
+		quoteId: quoteId.value,
+		channelId: targetChannel.value ? targetChannel.value.id : undefined,
+		reactionAcceptance: reactionAcceptance.value,
+	});
+
+	await os.promiseDialog(promise, null, (err) => {
+		if (err.id === '9ee33bbe-fde3-4c71-9b51-e50492c6b9c8') {
+			os.alert({
+				type: 'error',
+				text: i18n.ts._drafts.youCantCreateAnymore,
+			});
+		} else {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.somethingHappened,
+				text: err.message + '\n' + err.id,
+			});
+		}
+	});
 }
 
 async function post(ev?: MouseEvent) {
@@ -939,12 +935,29 @@ async function post(ev?: MouseEvent) {
 	});
 }
 
-async function cancel() {
+async function confirmSavingServerDraft() {
 	if (canPost.value === true) {
-		os.confirm({ type: 'question', text: i18n.ts.saveDraft, okText: i18n.ts.save, cancelText: i18n.ts.no }).then(( { canceled } ) => {
-			if (!canceled) saveServerDraft();
+		const { canceled } = await os.confirm({
+			type: 'question',
+			title: i18n.ts._drafts.saveConfirm,
+			text: i18n.ts._drafts.saveConfirmDescription,
+			okText: i18n.ts.save,
+			cancelText: i18n.ts.no,
 		});
+
+		if (!canceled) {
+			await saveServerDraft();
+		}
 	}
+}
+
+async function esc() {
+	await confirmSavingServerDraft();
+	emit('esc');
+}
+
+async function cancel() {
+	await confirmSavingServerDraft();
 	emit('cancel');
 }
 
@@ -1159,6 +1172,10 @@ onMounted(() => {
 	});
 });
 
+onBeforeUnmount(async () => {
+
+});
+
 defineExpose({
 	clear,
 });
diff --git a/packages/frontend/src/scripts/get-note-summary.ts b/packages/frontend/src/scripts/get-note-summary.ts
index 6fd9947ac1..66de997aab 100644
--- a/packages/frontend/src/scripts/get-note-summary.ts
+++ b/packages/frontend/src/scripts/get-note-summary.ts
@@ -10,16 +10,40 @@ import { i18n } from '@/i18n.js';
  * 投稿を表す文字列を取得します。
  * @param {*} note (packされた)投稿
  */
-export const getNoteSummary = (note?: Misskey.entities.Note | null): string => {
+export const getNoteSummary = (note?: Misskey.entities.Note | Misskey.entities.NoteDraft | null, opts?: {
+	/**
+	 * ファイルの数を表示するかどうか
+	 */
+	showFiles?: boolean;
+	/**
+	 * 投票の有無を表示するかどうか
+	 */
+	showPoll?: boolean;
+	/**
+	 * 返信の有無を表示するかどうか
+	 */
+	showReply?: boolean;
+	/**
+	 * Renoteの有無を表示するかどうか
+	 */
+	showRenote?: boolean;
+}): string => {
+	const _opts = Object.assign({
+		showFiles: true,
+		showPoll: true,
+		showReply: true,
+		showRenote: true,
+	}, opts);
+
 	if (note == null) {
 		return '';
 	}
 
-	if (note.deletedAt) {
+	if ('deletedAt' in note && note.deletedAt) {
 		return `(${i18n.ts.deletedNote})`;
 	}
 
-	if (note.isHidden) {
+	if ('isHidden' in note && note.isHidden) {
 		return `(${i18n.ts.invisibleNote})`;
 	}
 
@@ -33,17 +57,17 @@ export const getNoteSummary = (note?: Misskey.entities.Note | null): string => {
 	}
 
 	// ファイルが添付されているとき
-	if ((note.files || []).length !== 0) {
-		summary += ` (${i18n.tsx.withNFiles({ n: note.files.length })})`;
+	if (_opts.showFiles && (note.files || []).length !== 0) {
+		summary += ` (${i18n.tsx.withNFiles({ n: note.files!.length })})`;
 	}
 
 	// 投票が添付されているとき
-	if (note.poll) {
+	if (_opts.showPoll && note.poll) {
 		summary += ` (${i18n.ts.poll})`;
 	}
 
 	// 返信のとき
-	if (note.replyId) {
+	if (_opts.showReply && note.replyId) {
 		if (note.reply) {
 			summary += `\n\nRE: ${getNoteSummary(note.reply)}`;
 		} else {
@@ -52,7 +76,7 @@ export const getNoteSummary = (note?: Misskey.entities.Note | null): string => {
 	}
 
 	// Renoteのとき
-	if (note.renoteId) {
+	if (_opts.showRenote && note.renoteId) {
 		if (note.renote) {
 			summary += `\n\nRN: ${getNoteSummary(note.renote)}`;
 		} else {