enhance(frontend): Add an option to customize Lockdown duration (#16405)

* chore(locales): Add "setManually" and "_time.month"

Add Japanese locales to auto-generate other languages.

* feat(frontend): Add text fields to set lockdown duration manually

Choose from presets or set it manually.

* refactor(frontend): Make objects contains option's values and labels

When adding a new option, it needed to write two times.

* docs(changelog): Add a description about this change

Users can notice what's changed by this PR.

* refactor(frontend): Manage state by MkSelect

The functions only initialize the values.

* refactor(frontend): Make the custom input as writable computed

Clean up the MkInput components.

* chore(locales): Switch to "custom"

A single word is better than sentence on this situation.

* refactor(frontend): Insert the custom button to presets

Users don't need to click multiple times to use prests.

1 files changed, 86 insertions, 16 deletions

diff --git a/packages/frontend/src/pages/settings/privacy.vue b/packages/frontend/src/pages/settings/privacy.vue
index 3977359c54..ab012841dc 100644
--- a/packages/frontend/src/pages/settings/privacy.vue
+++ b/packages/frontend/src/pages/settings/privacy.vue
@@ -125,17 +125,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 									<option value="absolute">{{ i18n.ts._accountSettings.notesOlderThanSpecifiedDateAndTime }}</option>
 								</MkSelect>
 
-								<MkSelect v-if="makeNotesFollowersOnlyBefore_type === 'relative'" v-model="makeNotesFollowersOnlyBefore">
-									<option :value="-3600">{{ i18n.ts.oneHour }}</option>
-									<option :value="-86400">{{ i18n.ts.oneDay }}</option>
-									<option :value="-259200">{{ i18n.ts.threeDays }}</option>
-									<option :value="-604800">{{ i18n.ts.oneWeek }}</option>
-									<option :value="-2592000">{{ i18n.ts.oneMonth }}</option>
-									<option :value="-7776000">{{ i18n.ts.threeMonths }}</option>
-									<option :value="-31104000">{{ i18n.ts.oneYear }}</option>
+								<MkSelect v-if="makeNotesFollowersOnlyBefore_type === 'relative'" v-model="makeNotesFollowersOnlyBefore_selection">
+									<option v-for="preset in makeNotesFollowersOnlyBefore_presets" :value="preset.value">{{ preset.label }}</option>
+									<option value="custom">{{ i18n.ts.custom }}</option>
 								</MkSelect>
 
 								<MkInput
+									v-if="makeNotesFollowersOnlyBefore_type === 'relative' && makeNotesFollowersOnlyBefore_isCustomMode"
+									v-model="makeNotesFollowersOnlyBefore_customMonths"
+									type="number"
+									:min="1"
+								>
+									<template #suffix>{{ i18n.ts._time.month }}</template>
+								</MkInput>
+
+								<MkInput
 									v-if="makeNotesFollowersOnlyBefore_type === 'absolute'"
 									:modelValue="formatDateTimeString(new Date(makeNotesFollowersOnlyBefore * 1000), 'yyyy-MM-dd')"
 									type="date"
@@ -162,17 +166,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 									<option value="absolute">{{ i18n.ts._accountSettings.notesOlderThanSpecifiedDateAndTime }}</option>
 								</MkSelect>
 
-								<MkSelect v-if="makeNotesHiddenBefore_type === 'relative'" v-model="makeNotesHiddenBefore">
-									<option :value="-3600">{{ i18n.ts.oneHour }}</option>
-									<option :value="-86400">{{ i18n.ts.oneDay }}</option>
-									<option :value="-259200">{{ i18n.ts.threeDays }}</option>
-									<option :value="-604800">{{ i18n.ts.oneWeek }}</option>
-									<option :value="-2592000">{{ i18n.ts.oneMonth }}</option>
-									<option :value="-7776000">{{ i18n.ts.threeMonths }}</option>
-									<option :value="-31104000">{{ i18n.ts.oneYear }}</option>
+								<MkSelect v-if="makeNotesHiddenBefore_type === 'relative'" v-model="makeNotesHiddenBefore_selection">
+									<option v-for="preset in makeNotesHiddenBefore_presets" :value="preset.value">{{ preset.label }}</option>
+									<option value="custom">{{ i18n.ts.custom }}</option>
 								</MkSelect>
 
 								<MkInput
+									v-if="makeNotesHiddenBefore_type === 'relative' && makeNotesHiddenBefore_isCustomMode"
+									v-model="makeNotesHiddenBefore_customMonths"
+									type="number"
+									:min="1"
+								>
+									<template #suffix>{{ i18n.ts._time.month }}</template>
+								</MkInput>
+
+								<MkInput
 									v-if="makeNotesHiddenBefore_type === 'absolute'"
 									:modelValue="formatDateTimeString(new Date(makeNotesHiddenBefore * 1000), 'yyyy-MM-dd')"
 									type="date"
@@ -241,6 +249,37 @@ const makeNotesFollowersOnlyBefore_type = computed(() => {
 	}
 });
 
+const makeNotesFollowersOnlyBefore_presets = [
+	{ label: i18n.ts.oneHour, value: -3600 },
+	{ label: i18n.ts.oneDay, value: -86400 },
+	{ label: i18n.ts.threeDays, value: -259200 },
+	{ label: i18n.ts.oneWeek, value: -604800 },
+	{ label: i18n.ts.oneMonth, value: -2592000 },
+	{ label: i18n.ts.threeMonths, value: -7776000 },
+	{ label: i18n.ts.oneYear, value: -31104000 },
+];
+
+const makeNotesFollowersOnlyBefore_isCustomMode = ref(
+	makeNotesFollowersOnlyBefore.value != null &&
+	makeNotesFollowersOnlyBefore.value < 0 &&
+	!makeNotesFollowersOnlyBefore_presets.some((preset) => preset.value === makeNotesFollowersOnlyBefore.value)
+);
+
+const makeNotesFollowersOnlyBefore_selection = computed({
+	get: () => makeNotesFollowersOnlyBefore_isCustomMode.value ? 'custom' : makeNotesFollowersOnlyBefore.value,
+	set(value) {
+		makeNotesFollowersOnlyBefore_isCustomMode.value = value === 'custom';
+		if (value !== 'custom') makeNotesFollowersOnlyBefore.value = value;
+	}
+});
+
+const makeNotesFollowersOnlyBefore_customMonths = computed({
+	get: () => makeNotesFollowersOnlyBefore.value ? Math.abs(makeNotesFollowersOnlyBefore.value) / (30 * 24 * 60 * 60) : null,
+	set(value) {
+		if (value != null && value > 0) makeNotesFollowersOnlyBefore.value = -Math.abs(Math.floor(Number(value))) * 30 * 24 * 60 * 60;
+	}
+});
+
 const makeNotesHiddenBefore_type = computed(() => {
 	if (makeNotesHiddenBefore.value == null) {
 		return null;
@@ -251,6 +290,37 @@ const makeNotesHiddenBefore_type = computed(() => {
 	}
 });
 
+const makeNotesHiddenBefore_presets = [
+	{ label: i18n.ts.oneHour, value: -3600 },
+	{ label: i18n.ts.oneDay, value: -86400 },
+	{ label: i18n.ts.threeDays, value: -259200 },
+	{ label: i18n.ts.oneWeek, value: -604800 },
+	{ label: i18n.ts.oneMonth, value: -2592000 },
+	{ label: i18n.ts.threeMonths, value: -7776000 },
+	{ label: i18n.ts.oneYear, value: -31104000 },
+];
+
+const makeNotesHiddenBefore_isCustomMode = ref(
+	makeNotesHiddenBefore.value != null &&
+	makeNotesHiddenBefore.value < 0 &&
+	!makeNotesHiddenBefore_presets.some((preset) => preset.value === makeNotesHiddenBefore.value)
+);
+
+const makeNotesHiddenBefore_selection = computed({
+	get: () => makeNotesHiddenBefore_isCustomMode.value ? 'custom' : makeNotesHiddenBefore.value,
+	set(value) {
+		makeNotesHiddenBefore_isCustomMode.value = value === 'custom';
+		if (value !== 'custom') makeNotesHiddenBefore.value = value;
+	}
+});
+
+const makeNotesHiddenBefore_customMonths = computed({
+	get: () => makeNotesHiddenBefore.value ? Math.abs(makeNotesHiddenBefore.value) / (30 * 24 * 60 * 60) : null,
+	set(value) {
+		if (value != null && value > 0) makeNotesHiddenBefore.value = -Math.abs(Math.floor(Number(value))) * 30 * 24 * 60 * 60;
+	}
+});
+
 watch([makeNotesFollowersOnlyBefore, makeNotesHiddenBefore], () => {
 	save();
 });