Improve: unclip (#8823)

* Refactor clip page to use Composition API

* Refactor clip page

* Refactor clip page

* Refactor clip page

* Improve: unclip

* Fix unclip

* Fix unclip

* chore: better type and name

* Fix

* Fix clipPage vue provider

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

1 files changed, 39 insertions, 3 deletions

diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 78749ad6bb..e56d519493 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -1,4 +1,4 @@
-import { defineAsyncComponent, Ref } from 'vue';
+import { defineAsyncComponent, Ref, inject } from 'vue';
 import * as misskey from 'misskey-js';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
@@ -14,6 +14,8 @@ export function getNoteMenu(props: {
 	menuButton: Ref<HTMLElement>;
 	translation: Ref<any>;
 	translating: Ref<boolean>;
+	isDeleted: Ref<boolean>;
+	cullentClipPage?: Ref<misskey.entities.Clip>;
 }) {
 	const isRenote = (
 		props.note.renote != null &&
@@ -125,12 +127,37 @@ export function getNoteMenu(props: {
 		}, null, ...clips.map(clip => ({
 			text: clip.name,
 			action: () => {
-				os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: appearNote.id });
+				os.promiseDialog(
+					os.api('clips/add-note', { clipId: clip.id, noteId: appearNote.id }),
+					null,
+					async (err) => {
+						if (err.id === '734806c4-542c-463a-9311-15c512803965') {
+							const confirm = await os.confirm({
+								type: 'warning',
+								text: i18n.t('confirmToUnclipAlreadyClippedNote', { name: clip.name }),
+							});
+							if (!confirm.canceled) {
+								os.apiWithDialog('clips/remove-note', { clipId: clip.id, noteId: appearNote.id });
+								if (props.cullentClipPage?.value.id === clip.id) props.isDeleted.value = true;
+							}
+						} else {
+							os.alert({
+								type: 'error',
+								text: err.message + '\n' + err.id,
+							});
+						}
+					}
+				);
 			}
 		}))], props.menuButton.value, {
 		}).then(focus);
 	}
 
+	async function unclip(): Promise<void> {
+		os.apiWithDialog('clips/remove-note', { clipId: props.cullentClipPage.value.id, noteId: appearNote.id });
+		props.isDeleted.value = true;
+	}
+
 	async function promote(): Promise<void> {
 		const { canceled, result: days } = await os.inputNumber({
 			title: i18n.ts.numberOfDays,
@@ -169,7 +196,16 @@ export function getNoteMenu(props: {
 			noteId: appearNote.id
 		});
 
-		menu = [{
+		menu = [
+		...(
+			props.cullentClipPage?.value.userId === $i.id ? [{
+				icon: 'fas fa-circle-minus',
+				text: i18n.ts.unclip,
+				danger: true,
+				action: unclip,
+			}, null] : []
+		),
+		{
 			icon: 'fas fa-copy',
 			text: i18n.ts.copyContent,
 			action: copyContent