enhance(frontend): 時刻表示を常に絶対時刻にできるように

locales/index.d.ts

@@ -5190,6 +5190,10 @@ export interface Locale extends ILocale {
      * 名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。
      */
     "yourNameContainsProhibitedWordsDescription": string;
+    /**
+     * 常に絶対時刻で表示する
+     */
+    "alwaysUseAbsoluteTime": string;
     "_abuseUserReport": {
         /**
          * 転送

locales/ja-JP.yml

@@ -1293,6 +1293,7 @@ prohibitedWordsForNameOfUser: "禁止ワード（ユーザーの名前）"
 prohibitedWordsForNameOfUserDescription: "このリストに含まれる文字列がユーザーの名前に含まれる場合、ユーザーの名前の変更を拒否します。モデレーター権限を持つユーザーはこの制限の影響を受けません。"
 yourNameContainsProhibitedWords: "変更しようとした名前に禁止された文字列が含まれています"
 yourNameContainsProhibitedWordsDescription: "名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。"
+alwaysUseAbsoluteTime: "常に絶対時刻で表示する"
 
 _abuseUserReport:
   forward: "転送"

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

@@ -6,9 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <time :title="absolute" :class="{ [$style.old1]: colored && (ago > 60 * 60 * 24 * 90), [$style.old2]: colored && (ago > 60 * 60 * 24 * 180) }">
 	<template v-if="invalid">{{ i18n.ts._ago.invalid }}</template>
-	<template v-else-if="mode === 'relative'">{{ relative }}</template>
+	<template v-else-if="_mode === 'relative'">{{ relative }}</template>
-	<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
+	<template v-else-if="_mode === 'absolute'">{{ absolute }}</template>
-	<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
+	<template v-else-if="_mode === 'detail'">{{ absolute }} ({{ relative }})</template>
 </time>
 </template>
 
@@ -16,6 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import isChromatic from 'chromatic/isChromatic';
 import { onMounted, onUnmounted, ref, computed } from 'vue';
 import { i18n } from '@/i18n.js';
+import { defaultStore } from '@/store.js';
 import { dateTimeFormat } from '@@/js/intl-const.js';
 
 const props = withDefaults(defineProps<{
@@ -23,9 +24,21 @@ const props = withDefaults(defineProps<{
 	origin?: Date | null;
 	mode?: 'relative' | 'absolute' | 'detail';
 	colored?: boolean;
+	allowOverrideByUser?: boolean;
 }>(), {
 	origin: isChromatic() ? () => new Date('2023-04-01T00:00:00Z') : null,
 	mode: 'relative',
+	allowOverrideByUser: true,
+});
+
+const _mode = computed(() => {
+	if (props.mode === 'detail') return 'detail';
+
+	if (props.allowOverrideByUser && defaultStore.state.alwaysUseAbsoluteTime) {
+		return 'absolute';
+	} else {
+		return props.mode;
+	}
 });
 
 function getDateSafe(n: Date | string | number) {
@@ -51,7 +64,7 @@ const now = ref(props.origin?.getTime() ?? Date.now());
 const ago = computed(() => (now.value - _time) / 1000/*ms*/);
 
 const relative = computed<string>(() => {
-	if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない
+	if (_mode.value === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない
 	if (invalid) return i18n.ts._ago.invalid;
 
 	return (
@@ -87,7 +100,7 @@ function tick() {
 	}
 }
 
-if (!invalid && props.origin === null && (props.mode === 'relative' || props.mode === 'detail')) {
+if (!invalid && props.origin === null && (_mode.value === 'relative' || _mode.value === 'detail')) {
 	onMounted(() => {
 		tick();
 	});

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

@@ -170,6 +170,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="enableHorizontalSwipe">{{ i18n.ts.enableHorizontalSwipe }}</MkSwitch>
 				<MkSwitch v-model="alwaysConfirmFollow">{{ i18n.ts.alwaysConfirmFollow }}</MkSwitch>
 				<MkSwitch v-model="confirmWhenRevealingSensitiveMedia">{{ i18n.ts.confirmWhenRevealingSensitiveMedia }}</MkSwitch>
+				<MkSwitch v-model="alwaysUseAbsoluteTime">{{ i18n.ts.alwaysUseAbsoluteTime }}</MkSwitch>
 			</div>
 			<MkSelect v-model="serverDisconnectedBehavior">
 				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
@@ -319,6 +320,7 @@ const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHori
 const useNativeUIForVideoAudioPlayer = computed(defaultStore.makeGetterSetter('useNativeUIForVideoAudioPlayer'));
 const alwaysConfirmFollow = computed(defaultStore.makeGetterSetter('alwaysConfirmFollow'));
 const confirmWhenRevealingSensitiveMedia = computed(defaultStore.makeGetterSetter('confirmWhenRevealingSensitiveMedia'));
+const alwaysUseAbsoluteTime = computed(defaultStore.makeGetterSetter('alwaysUseAbsoluteTime'));
 const contextMenu = computed(defaultStore.makeGetterSetter('contextMenu'));
 
 watch(lang, () => {
@@ -363,6 +365,7 @@ watch([
 	enableSeasonalScreenEffect,
 	alwaysConfirmFollow,
 	confirmWhenRevealingSensitiveMedia,
+	alwaysUseAbsoluteTime,
 	contextMenu,
 ], async () => {
 	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });

packages/frontend/src/store.ts

@@ -472,6 +472,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	alwaysUseAbsoluteTime: {
+		where: 'device',
+		default: false,
+	},
 
 	sound_masterVolume: {
 		where: 'device',