client: use new API

packages/client/src/components/notification-setting-window.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { notificationTypes } from 'foundkey-js';
+import * as foundkey from 'foundkey-js';
 import MkSwitch from './form/switch.vue';
 import MkInfo from './ui/info.vue';
 import MkButton from './ui/button.vue';
@@ -41,10 +41,12 @@ const emit = defineEmits<{
 }>();
 
 const props = withDefaults(defineProps<{
-	includingTypes?: typeof notificationTypes[number][] | null;
+	includingTypes?: typeof foundkey.notificationTypes[number][] | null;
+	notificationTypes?: typeof foundkey.notificationTypes[number][] | null;
 	showGlobalToggle?: boolean;
 }>(), {
 	includingTypes: () => [],
+	notificationTypes: () => [],
 	showGlobalToggle: true,
 });
 
@@ -52,10 +54,10 @@ let includingTypes = $computed(() => props.includingTypes || []);
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
-let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
+let typesMap = $ref<Record<typeof foundkey.notificationTypes[number], boolean>>({});
 let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
 
-for (const ntype of notificationTypes) {
+for (const ntype of props.notificationTypes) {
 	typesMap[ntype] = includingTypes.includes(ntype);
 }
 
@@ -64,7 +66,7 @@ function ok() {
 		emit('done', { includingTypes: null });
 	} else {
 		emit('done', {
-			includingTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
+			includingTypes: (Object.keys(typesMap) as typeof foundkey.notificationTypes[number][])
 				.filter(type => typesMap[type]),
 		});
 	}
@@ -74,13 +76,13 @@ function ok() {
 
 function disableAll() {
 	for (const type in typesMap) {
-		typesMap[type as typeof notificationTypes[number]] = false;
+		typesMap[type as typeof foundkey.notificationTypes[number]] = false;
 	}
 }
 
 function enableAll() {
 	for (const type in typesMap) {
-		typesMap[type as typeof notificationTypes[number]] = true;
+		typesMap[type as typeof foundkey.notificationTypes[number]] = true;
 	}
 }
 </script>

packages/client/src/scripts/get-note-menu.ts

@@ -65,9 +65,33 @@ export function getNoteMenu(props: {
 		});
 	}
 
-	function toggleThreadMute(mute: boolean): void {
-		os.apiWithDialog(mute ? 'notes/thread-muting/create' : 'notes/thread-muting/delete', {
-			noteId: appearNote.id,
+	function muteThread(): void {
+		// show global settings by default
+		const includingTypes = foundkey.notificationTypes.filter(x => !$i.mutingNotificationTypes.includes(x));
+		os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
+			includingTypes,
+			showGlobalToggle: false,
+			message: i18n.ts.threadMuteNotificationsDesc,
+			notificationTypes: foundkey.noteNotificationTypes,
+		}, {
+			done: async (res) => {
+				const { includingTypes: value } = res;
+				let mutingNotificationTypes: string[] | undefined;
+				if (value != null) {
+					mutingNotificationTypes = foundkey.noteNotificationTypes.filter(x => !value.includes(x))
+				}
+
+				await os.apiWithDialog('notes/thread-muting/create', {
+					noteId: appearNote.id,
+					mutingNotificationTypes,
+				});
+			}
+		}, 'closed');
+	}
+
+	function unmuteThread(): void {
+		os.apiWithDialog('notes/thread-muting/delete', {
+			noteId: appearNote.id
 		});
 	}
 
@@ -251,11 +275,11 @@ export function getNoteMenu(props: {
 			statePromise.then(state => state.isMutedThread ? {
 				icon: 'fas fa-comment-slash',
 				text: i18n.ts.unmuteThread,
-				action: () => toggleThreadMute(false),
+				action: () => unmuteThread(),
 			} : {
 				icon: 'fas fa-comment-slash',
 				text: i18n.ts.muteThread,
-				action: () => toggleThreadMute(true),
+				action: () => muteThread(),
 			}),
 			appearNote.userId === $i.id ? ($i.pinnedNoteIds || []).includes(appearNote.id) ? {
 				icon: 'fas fa-thumbtack',