refactor: renote-button to composition api

packages/client/src/components/renote-button.vue

@@ -13,8 +13,9 @@
 </button>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { Note } from 'misskey-js/built/entities';
 import XDetails from '@/components/users-tooltip.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
@@ -22,22 +23,14 @@ import { $i } from '@/account';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { i18n } from '@/i18n';
 
-export default defineComponent({
-	props: {
-		count: {
-			type: Number,
-			required: true,
-		},
-		note: {
-			type: Object,
-			required: true,
-		},
-	},
+const props = defineProps<{
+	count: number;
+	note: Note;
+}>();
 
-	setup(props) {
 const buttonRef = ref<HTMLElement>();
 
-		const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
+const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i?.id);
 
 useTooltip(buttonRef, async (showing) => {
 	const renotes = await os.api('notes/renotes', {
@@ -57,7 +50,7 @@ export default defineComponent({
 	}, {}, 'closed');
 });
 
-		const renote = (viaKeyboard = false) => {
+function renote(viaKeyboard = false): void {
 	pleaseLogin();
 	os.popupMenu([{
 		text: i18n.ts.renote,
@@ -79,15 +72,7 @@ export default defineComponent({
 	}], buttonRef.value, {
 		viaKeyboard,
 	});
-		};
-
-		return {
-			buttonRef,
-			canRenote,
-			renote,
-		};
-	},
-});
+}
 </script>
 
 <style lang="scss" scoped>