feat: ノートの時刻を日付で表示する機能

CHANGELOG_CHERRYPICK.md

@@ -29,6 +29,7 @@
 ### General
 - 리액션 수신의 기본값을 전체로 설정
 - 제어판 메인 화면에 서버 통계 추가
+- 노트의 시간을 일자로 표시하는 기능
 
 ### Client
 - 리노트 전 확인 팝업을 띄움

locales/en-US.yml

@@ -1,5 +1,6 @@
 ---
 _lang_: "English"
+enableMarkByDate: "Show note times as dates"
 renoteConfirm: "Do you want to Renote?"
 inviteRevoke: "Revoke All Invitation Codes"
 inviteRevokeConfirm: "Are you sure that you want to revoke all invitation codes?"

locales/index.d.ts

@@ -3,6 +3,7 @@
 // Do not edit this file directly.
 export interface Locale {
     "_lang_": string;
+    "enableMarkByDate": string;
     "renoteConfirm": string;
     "inviteRevoke": string;
     "inviteRevokeConfirm": string;

locales/ja-JP.yml

@@ -1,5 +1,6 @@
 _lang_: "日本語"
 
+enableMarkByDate: "ノート時刻を日付で表示"
 renoteConfirm: "Renoteしますか？"
 inviteRevoke: "全ての招待コードを失効する"
 inviteRevokeConfirm: "本当に全ての招待コードを失効させますか？"

locales/ko-KR.yml

@@ -1,5 +1,6 @@
 ---
 _lang_: "한국어"
+enableMarkByDate: "노트 시간을 일자로 표시"
 renoteConfirm: "리노트 할까요?"
 inviteRevoke: "모든 초대 코드 무효화"
 inviteRevokeConfirm: "정말로 모든 초대 코드를 무효화 할까요?"

packages/frontend/src/components/global/MkTime.vue

@@ -12,6 +12,7 @@ import isChromatic from 'chromatic/isChromatic';
 import { onUnmounted } from 'vue';
 import { i18n } from '@/i18n';
 import { dateTimeFormat } from '@/scripts/intl-const';
+import {defaultStore} from "@/store";
 
 const props = withDefaults(defineProps<{
 	time: Date | string | number | null;
@@ -34,16 +35,27 @@ const relative = $computed<string>(() => {
 	if (invalid) return i18n.ts._ago.invalid;
 
 	const ago = (now - _time) / 1000/*ms*/;
-	return (
-		ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
-		ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
-		ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() }) :
-		ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
-		ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
-		ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
-		ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
-		ago >= -1 ? i18n.ts._ago.justNow :
-		i18n.ts._ago.future);
+
+	if (defaultStore.state.enableMarkByDate) {
+		return (
+			ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
+			ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
+			ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
+			ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
+			ago >= -1 ? i18n.ts._ago.justNow :
+			i18n.ts._ago.future);
+	} else {
+		return (
+			ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
+			ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
+			ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() }) :
+			ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
+			ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
+			ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
+			ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
+			ago >= -1 ? i18n.ts._ago.justNow :
+			i18n.ts._ago.future);
+	}
 });
 
 let tickId: number;

packages/frontend/src/pages/settings/general.vue

@@ -61,6 +61,7 @@
 					<template #caption>{{ i18n.ts.postFormVisibilityHotkeyDescription }}</template>
 				</MkSwitch>
 				<MkSwitch v-model="enableAbsoluteTime">{{ i18n.ts.enableAbsoluteTime }} <span class="_beta">CherryPick</span></MkSwitch>
+				<MkSwitch v-model="enableMarkByDate" :disabled="defaultStore.state.enableAbsoluteTime">{{ i18n.ts.enableMarkByDate }} <span class="_beta">CherryPick</span></MkSwitch>
 			</div>
 
 			<MkSelect v-model="instanceTicker">
@@ -334,6 +335,7 @@ const requireRefreshBehavior = computed(defaultStore.makeGetterSetter('requireRe
 const hideAvatarsInNote = computed(defaultStore.makeGetterSetter('hideAvatarsInNote'));
 const showTranslateButtonInNote = computed(defaultStore.makeGetterSetter('showTranslateButtonInNote'));
 const enableAbsoluteTime = computed(defaultStore.makeGetterSetter('enableAbsoluteTime'));
+const enableMarkByDate = computed(defaultStore.makeGetterSetter('enableMarkByDate'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
@@ -379,6 +381,7 @@ watch([
 	overridedDeviceKind,
 	enableDataSaverMode,
 	enableAbsoluteTime,
+	enableMarkByDate,
 ], async () => {
 	await reloadAsk();
 });

packages/frontend/src/store.ts

@@ -387,6 +387,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	enableMarkByDate: {
+		where: 'device',
+		default: false,
+	},
 
 	// - Settings/CherryPick
 	nicknameEnabled: {