1 files changed, 86 insertions, 0 deletions
diff --git a/packages/frontend/src/widgets/WidgetBirthdayFollowings.user.vue b/packages/frontend/src/widgets/WidgetBirthdayFollowings.user.vue
new file mode 100644
index 0000000000..2b714c2f6c
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetBirthdayFollowings.user.vue
@@ -0,0 +1,86 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<MkA :to="userPage(item.user)" style="overflow: clip;">
+		<MkUserCardMini :user="item.user" :withChart="false" style="text-overflow: ellipsis; background: inherit; border-radius: unset;">
+			<template #sub>
+				<span>{{ countdownDate }}</span>
+				<span> / </span>
+				<span class="_monospace">@{{ acct(item.user) }}</span>
+			</template>
+		</MkUserCardMini>
+	</MkA>
+	<button v-tooltip.noDelay="i18n.ts.note" class="_button" :class="$style.post" @click="os.post({initialText: `@${item.user.username}${item.user.host ? `@${item.user.host}` : ''} `})">
+		<i class="ti-fw ti ti-confetti" :class="$style.postIcon"></i>
+	</button>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { useLowresTime } from '@/composables/use-lowres-time.js';
+import { userPage, acct } from '@/filters/user.js';
+
+const props = defineProps<{
+	item: Misskey.entities.UsersGetFollowingUsersByBirthdayResponse[number];
+}>();
+
+const now = useLowresTime();
+const nowDate = computed(() => {
+	const date = new Date(now.value);
+	date.setHours(0, 0, 0, 0);
+	return date;
+});
+const birthdayDate = computed(() => {
+	const [year, month, day] = props.item.birthday.split('-').map((v) => parseInt(v, 10));
+	return new Date(year, month - 1, day, 0, 0, 0, 0);
+});
+
+const countdownDate = computed(() => {
+	const days = Math.floor((birthdayDate.value.getTime() - nowDate.value.getTime()) / (1000 * 60 * 60 * 24));
+	if (days === 0) {
+		return i18n.ts.today;
+	} else if (days > 0) {
+		return i18n.tsx._timeIn.days({ n: days });
+	} else {
+		return i18n.tsx._ago.daysAgo({ n: Math.abs(days) });
+	}
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	box-sizing: border-box;
+	display: grid;
+	align-items: center;
+	grid-template-columns: auto 56px;
+}
+
+.post {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 40px;
+	width: 40px;
+	margin-right: 16px;
+	aspect-ratio: 1/1;
+	border-radius: 100%;
+	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
+
+	&:hover {
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+	}
+}
+
+.postIcon {
+	color: var(--MI_THEME-fgOnAccent);
+}
+</style>