Refactor my-antennas/edit to use Composition API (#8680)

* refactor(client): refactor my-antennas/edit to use Composition API

* fix(client): apply review suggestions

packages/client/src/pages/my-antennas/edit.vue

@@ -4,49 +4,34 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@/components/ui/button.vue';
+<script lang="ts" setup>
+import { watch } from 'vue';
 import XAntenna from './editor.vue';
 import * as symbols from '@/symbols';
 import * as os from '@/os';
+import { MisskeyNavigator } from '@/scripts/navigate';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		MkButton,
-		XAntenna,
-	},
+const nav = new MisskeyNavigator();
 
-	props: {
-		antennaId: {
-			type: String,
-			required: true,
-		}
-	},
+let antenna: any = $ref(null);
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.manageAntennas,
-				icon: 'fas fa-satellite',
-			},
-			antenna: null,
-		};
-	},
+const props = defineProps<{
+	antennaId: string
+}>();
 
-	watch: {
-		antennaId: {
-			async handler() {
-				this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
-			},
-			immediate: true,
-		}
-	},
+function onAntennaUpdated() {
+	nav.push('/my/antennas');
+}
 
-	methods: {
-		onAntennaUpdated() {
-			this.$router.push('/my/antennas');
-		},
+os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
+	antenna = antennaResponse;
+});
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.ts.manageAntennas,
+		icon: 'fas fa-satellite',
 	}
 });
 </script>