From ac77804e7dd7d38977d647fedab9849a1605333b Mon Sep 17 00:00:00 2001
From: tai-cha <dev@taichan.site>
Date: Fri, 17 Jan 2025 03:06:19 +0900
Subject: [PATCH] =?UTF-8?q?WIP:=20=E3=83=8E=E3=83=BC=E3=83=88=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=20?=
 =?UTF-8?q?=E6=8A=95=E7=A8=BF=E6=99=82=E3=81=AB=E4=B8=8B=E6=9B=B8=E3=81=8D?=
 =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MkNoteDraftSelectDialog.vue    | 62 +++++++++++++------
 .../frontend/src/components/MkPostForm.vue    |  8 +++
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/src/components/MkNoteDraftSelectDialog.vue b/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
index 0daa442917..b0d5f2971f 100644
--- a/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
+++ b/packages/frontend/src/components/MkNoteDraftSelectDialog.vue
@@ -19,31 +19,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div :class="$style.drafts">
 				<div v-for="draft in drafts" :key="draft.id" class="_button" :class="[$style.draft, { [$style.selected]: selected && selected.id === draft.id }]" @click="selected = draft" @dblclick="ok()">
 					<div :class="$style.draftContainer">
-						<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"/><span>{{ truncateText(draft.reply.text, 10) }}</span>
+						<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 }} <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 }} <span>{{ truncateText(draft.renote?.text, 10) }}</span>
+									</div>
+									<div v-else>
+										<i class="ti ti-pencil-minus"></i>
+									</div>
 								</div>
-								<div v-else-if="draft.renote">
-									<i class="ti ti-quote"></i><MkAvatar :user="draft.renote.user" :class="$style.headerAvater"/><span>{{ truncateText(draft.renote?.text, 10) }}</span>
-								</div>
-								<div v-else>
-									<i class="ti ti-pencil-minus"></i>
+								<div :class="$style.headerRight">
+									<div 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'" ref="specified" class="ti ti-mail"></i>
+									</div>
 								</div>
 							</div>
-							<div :class="$style.headerRight">
-								<div 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'" ref="specified" class="ti ti-mail"></i>
-								</div>
+							<div :class="$style.draftBody">
+								<div v-if="draft.cw != null" class="cw">{{ truncateText(draft.cw, 20) }}</div>
+								{{ truncateText(draft.text, 20) }}
 							</div>
 						</div>
-						<div :class="$style.draftBody">
-							<div v-if="draft.cw != null" class="cw">{{ truncateText(draft.cw, 20) }}</div>
-							{{ truncateText(draft.text, 20) }}
-						</div>
+						<MkButton short :class="$style.deleteButton" @click="deleteDraft(draft)"><i class="ti ti-trash"></i></MkButton>
 					</div>
 				</div>
 				<div v-if="drafts.length === 0" class="_empty" :class="$style.empty">{{ i18n.ts.noDrafts }}</div>
@@ -56,6 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
+import MkButton from './MkButton.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -90,6 +94,12 @@ function cancel() {
 	dialogEl.value?.close();
 }
 
+function deleteDraft(draft: Misskey.entities.NoteDraft) {
+	misskeyApi('notes/drafts/delete', { draftId: draft.id }).then(() => {
+		drafts.value = drafts.value.filter(d => d.id !== draft.id);
+	});
+}
+
 onMounted(() => {
 	misskeyApi('notes/drafts', {}).then(_drafts => {
 		drafts.value = _drafts as unknown as Misskey.entities.NoteDraft[];
@@ -137,6 +147,12 @@ onMounted(() => {
 }
 
 .draftContainer {
+	display: flex;
+	flex: 1;
+	flex-basis: 100%;
+}
+
+.draftContent {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
@@ -166,6 +182,12 @@ onMounted(() => {
 	min-width: 0;
 }
 
+.deleteButton {
+	align-self: center;
+	margin-left: 0.5em;
+	min-width: 40px;
+}
+
 .empty {
 	opacity: 0.7;
 	text-align: center;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index cbbc84ce10..72cbdcdc80 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -195,6 +195,8 @@ const justEndedComposition = ref(false);
 const renoteTargetNote: ShallowRef<PostFormProps['renote'] | null> = shallowRef(props.renote);
 const replyTargetNote: ShallowRef<PostFormProps['reply'] | null> = shallowRef(props.reply);
 
+const serverDraftId = ref<string | null>(null);
+
 const draftKey = computed((): string => {
 	let key = props.channel ? `channel:${props.channel.id}` : '';
 
@@ -883,6 +885,10 @@ async function post(ev?: MouseEvent) {
 			if (m === 0 && s === 0) {
 				claimAchievement('postedAt0min0sec');
 			}
+
+			if (serverDraftId.value != null) {
+				misskeyApi('notes/drafts/delete', { draftId: serverDraftId.value });
+			}
 		});
 	}).catch(err => {
 		posting.value = false;
@@ -1019,6 +1025,8 @@ async function showDraftMenu() {
 	renoteTargetNote.value = draft.renote;
 	replyTargetNote.value = draft.reply;
 	reactionAcceptance.value = draft.reactionAcceptance;
+
+	serverDraftId.value = draft.id;
 }
 
 onMounted(() => {