yumechi-no-kuni/packages/frontend/src/components/MkRenoteButton.vue

<template>
<button
	v-if="canRenote"
	ref="buttonRef"
	class="eddddedb _button canRenote"
	@click="renote()"
>
	<i class="ti ti-repeat"></i>
	<p v-if="count > 0" class="count">{{ count }}</p>
</button>
<button v-else class="eddddedb _button">
	<i class="ti ti-ban"></i>
</button>
</template>

<script lang="ts" setup>
import { computed, ref, shallowRef } from 'vue';
import * as misskey from 'misskey-js';
import XDetails from '@/components/MkUsersTooltip.vue';
import { pleaseLogin } from '@/scripts/please-login';
import * as os from '@/os';
import { $i } from '@/account';
import { useTooltip } from '@/scripts/use-tooltip';
import { i18n } from '@/i18n';

const props = defineProps<{
	note: misskey.entities.Note;
	count: number;
}>();

const buttonRef = shallowRef<HTMLElement>();

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', {
		noteId: props.note.id,
		limit: 11,
	});

	const users = renotes.map(x => x.user);

	if (users.length < 1) return;

	os.popup(XDetails, {
		showing,
		users,
		count: props.count,
		targetElement: buttonRef.value,
	}, {}, 'closed');
});

const renote = (viaKeyboard = false) => {
	pleaseLogin();
	os.popupMenu([{
		text: i18n.ts.renote,
		icon: 'ti ti-repeat',
		action: () => {
			os.api('notes/create', {
				renoteId: props.note.id,
			});
		},
	}, {
		text: i18n.ts.quote,
		icon: 'ti ti-quote',
		action: () => {
			os.post({
				renote: props.note,
			});
		},
	}], buttonRef.value, {
		viaKeyboard,
	});
};
</script>

<style lang="scss" scoped>
.eddddedb {
	display: inline-block;
	height: 32px;
	margin: 2px;
	padding: 0 6px;
	border-radius: 4px;

	&:not(.canRenote) {
		cursor: default;
	}

	&.renoted {
		background: var(--accent);
	}

	> .count {
		display: inline;
		margin-left: 8px;
		opacity: 0.7;
	}
}
</style>