client: add button to delete all shown notes in clip

This makes use of the API functionality in the backend which was introduced in
commit 89761c86ab .

locales/en-US.yml

@@ -494,6 +494,8 @@ output: "Output"
 updateRemoteUser: "Update remote user information"
 deleteAllFiles: "Delete all files"
 deleteAllFilesConfirm: "Are you sure that you want to delete all files?"
+deleteAllNotes: "Delete all notes"
+deleteAllNotesConfirm: "Are you sure that you want to delete all visible notes of this clip?"
 removeAllFollowing: "Unfollow all followed users"
 removeAllFollowingDescription: "Executing this unfollows all accounts from {host}.\
   \ Please run this if the instance e.g. no longer exists."

packages/client/src/pages/clip.vue

@@ -12,7 +12,7 @@
 				</div>
 			</div>
 
-			<XNotes :pagination="pagination" :detail="true"/>
+			<XNotes ref="tlComponent" :pagination="pagination" :detail="true"/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -39,6 +39,7 @@ const pagination = {
 		clipId: props.clipId,
 	})),
 };
+const tlComponent = $ref();
 
 const isOwned: boolean | null = $computed<boolean | null>(() => $i && clip && ($i.id === clip.userId));
 
@@ -52,7 +53,25 @@ watch(() => props.clipId, async () => {
 
 provide('currentClipPage', $$(clip));
 
-const headerActions = $computed(() => clip && isOwned ? [{
+const headerActions = $computed(() => clip && isOwned ? [
+...($i.isAdmin ? [{
+	icon: 'fas fa-dumpster',
+	text: i18n.ts.deleteAllNotes,
+	handler: async (): Promise<void> => {
+		const { canceled } = await os.confirm({
+			type: 'warning',
+			text: i18n.ts.deleteAllNotesConfirm,
+		});
+		if (canceled) return;
+
+		await os.apiWithDialog('notes/delete-many', {
+			noteIds: tlComponent.pagingComponent?.items.map(item => item.id)
+		});
+
+		tlComponent.pagingComponent?.reload();
+	},
+}] : []),
+{
 	icon: 'fas fa-pencil-alt',
 	text: i18n.ts.edit,
 	handler: async (): Promise<void> => {