Refactor instance-mute to use Composition API (#8580)

* refactor(client): refactor instance-mute to use Composition API

* Apply review suggestion from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

* Apply review suggestion from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

packages/client/src/pages/settings/instance-mute.vue

@@ -1,67 +1,51 @@
 <template>
 <div class="_formRoot">
-	<MkInfo>{{ $ts._instanceMute.title }}</MkInfo>
+	<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
 	<FormTextarea v-model="instanceMutes" class="_formBlock">
-		<template #label>{{ $ts._instanceMute.heading }}</template>
+		<template #label>{{ i18n.ts._instanceMute.heading }}</template>
-		<template #caption>{{ $ts._instanceMute.instanceMuteDescription }}<br>{{ $ts._instanceMute.instanceMuteDescription2 }}</template>
+		<template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
 	</FormTextarea>
-	<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+	<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { defineExpose, ref, watch } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import MkInfo from '@/components/ui/info.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const instanceMutes = ref($i!.mutedInstances.join('\n'));
-	components: {
+const changed = ref(false);
-		MkButton,
-		FormTextarea,
-		MkInfo,
-	},
 
-	emits: ['info'],
+async function save() {
+	let mutes = instanceMutes.value
+		.trim().split('\n')
+		.map(el => el.trim())
+		.filter(el => el);
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.instanceMute,
-				icon: 'fas fa-volume-mute'
-			},
-			tab: 'soft',
-			instanceMutes: '',
-			changed: false,
-		}
-	},
-
-	watch: {
-		instanceMutes: {
-			handler() {
-				this.changed = true;
-			},
-			deep: true
-		},
-	},
-
-	async created() {
-		this.instanceMutes = this.$i.mutedInstances.join('\n');
-	},
-
-	methods: {
-		async save() {
-			let mutes = this.instanceMutes.trim().split('\n').map(el => el.trim()).filter(el => el);
 	await os.api('i/update', {
 		mutedInstances: mutes,
 	});
-			this.changed = false;
+
+	changed.value = false;
 
 	// Refresh filtered list to signal to the user how they've been saved
-			this.instanceMutes = mutes.join('\n');
+	instanceMutes.value = mutes.join('\n');
-		},
+}
+
+watch(instanceMutes, () => {
+	changed.value = true;
+});
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.ts.instanceMute,
+		icon: 'fas fa-volume-mute'
 	}
-})
+});
 </script>