From 26da54d372d07c16c9ab1c7381b72781664a7db2 Mon Sep 17 00:00:00 2001
From: hijiki <arumaaru@proton.me>
Date: Fri, 25 Oct 2024 00:22:06 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=87=E3=83=95=E3=82=A9=E3=83=AB=E3=83=88?=
 =?UTF-8?q?=E3=81=A7=E3=83=8E=E3=83=BC=E3=83=88=E8=87=AA=E5=8B=95=E5=89=8A?=
 =?UTF-8?q?=E9=99=A4=E3=81=A7=E3=81=8D=E3=82=8B=E6=A9=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  16 ++
 locales/ja-JP.yml                             |   4 +
 .../src/server/api/endpoints/notes/create.ts  |  10 +
 .../src/components/MkDeleteScheduleEditor.vue | 209 +++++++++++-------
 .../frontend/src/components/MkPostForm.vue    |   5 +-
 .../frontend/src/pages/settings/general.vue   |   1 +
 .../frontend/src/pages/settings/post-form.vue |  62 ++++++
 packages/frontend/src/router/definition.ts    |   4 +
 packages/frontend/src/store.ts                |  12 +-
 9 files changed, 244 insertions(+), 79 deletions(-)
 create mode 100644 packages/frontend/src/pages/settings/post-form.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 9592e94839..714e73cecb 100755
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5213,6 +5213,22 @@ export interface Locale extends ILocale {
      * 高度なMFMのピッカーを表示する
      */
     "enableQuickAddMfmFunction": string;
+		/**
+     * ノートの自己消滅の初期値
+     */
+		"defaultScheduledNoteDeleteTime": string;
+		/**
+		 * ノートの自己消滅が有効になっています
+		 */
+		"scheduledNoteDeleteEnabled": string;
+		/**
+     * 1年以上先の日時を指定することはできません
+     */
+		"cannotScheduleLaterThanOneYear": string;
+	  /**
+     * デフォルトでノートが自己消滅するように
+     */
+		"defaultScheduledNoteDelete": string;
     /**
      * バブルゲーム
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 201a49cd5e..21ef77277a 100755
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1344,6 +1344,10 @@ _delivery:
     autoSuspendedForNotResponding: "サーバー応答なしのため停止中"
 scheduledNoteDelete: "時限爆弾"
 noteDeletationAt: "このノートは{time}に削除されます"
+defaultScheduledNoteDeleteTime: "ノートの自己消滅の初期値"
+scheduledNoteDeleteEnabled: "ノートの自己消滅が有効になっています"
+cannotScheduleLaterThanOneYear: "1年以上先の日時を指定することはできません"
+defaultScheduledNoteDelete: "デフォルトでノートが自己消滅するように"
 
 _bubbleGame:
   howToPlay: "遊び方"
diff --git a/packages/backend/src/server/api/endpoints/notes/create.ts b/packages/backend/src/server/api/endpoints/notes/create.ts
index 1d55cfe646..4122d4dfff 100755
--- a/packages/backend/src/server/api/endpoints/notes/create.ts
+++ b/packages/backend/src/server/api/endpoints/notes/create.ts
@@ -110,6 +110,12 @@ export const meta = {
 			id: '9576c3c8-d8f3-11ee-ac15-00155d19d35d',
 		},
 
+		cannotScheduleDeleteLaterThanOneYear: {
+			message: 'Scheduled delete time is later than one year.',
+			code: 'CANNOT_SCHEDULE_DELETE_LATER_THAN_ONE_YEAR',
+			id: 'b02b5edb-2741-4841-b692-d9893f1e6515',
+		},
+
 		noSuchChannel: {
 			message: 'No such channel.',
 			code: 'NO_SUCH_CHANNEL',
@@ -387,6 +393,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				} else if (typeof ps.scheduledDelete.deleteAfter === 'number') {
 					ps.scheduledDelete.deleteAt = Date.now() + ps.scheduledDelete.deleteAfter;
 				}
+
+				if (ps.scheduledDelete.deleteAt && ps.scheduledDelete.deleteAt > Date.now() + ms('1year')) {
+					throw new ApiError(meta.errors.cannotScheduleDeleteLaterThanOneYear);
+				}
 			}
 
 			let channel: MiChannel | null = null;
diff --git a/packages/frontend/src/components/MkDeleteScheduleEditor.vue b/packages/frontend/src/components/MkDeleteScheduleEditor.vue
index 352b02145c..f401c92150 100755
--- a/packages/frontend/src/components/MkDeleteScheduleEditor.vue
+++ b/packages/frontend/src/components/MkDeleteScheduleEditor.vue
@@ -1,74 +1,108 @@
 <template>
-<div class="zmdxowus">
-	<span>{{ i18n.ts.scheduledNoteDelete }}</span>
-	<section>
-		<div>
-			<MkSelect v-model="expiration" small>
-				<template #label>{{ i18n.ts._poll.expiration }}</template>
-				<option value="at">{{ i18n.ts._poll.at }}</option>
-				<option value="after">{{ i18n.ts._poll.after }}</option>
-			</MkSelect>
-			<section v-if="expiration === 'at'">
-				<MkInput v-model="atDate" small type="date" class="input">
-					<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
-				</MkInput>
-				<MkInput v-model="atTime" small type="time" class="input">
-					<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
-				</MkInput>
-			</section>
-			<section v-else-if="expiration === 'after'">
-				<MkInput v-model="after" small type="number" class="input">
-					<template #label>{{ i18n.ts._poll.duration }}</template>
-				</MkInput>
-				<MkSelect v-model="unit" small>
-					<option value="second">{{ i18n.ts._time.second }}</option>
-					<option value="minute">{{ i18n.ts._time.minute }}</option>
-					<option value="hour">{{ i18n.ts._time.hour }}</option>
-					<option value="day">{{ i18n.ts._time.day }}</option>
+	<div :class="[$style.root, { [$style.padding]: !afterOnly }]">
+		<div v-if="!afterOnly" :class="[$style.label, { [$style.withAccent]: !showDetail }]" @click="showDetail = !showDetail"><i class="ti" :class="showDetail ? 'ti-chevron-up' : 'ti-chevron-down'"></i> {{ summaryText }}</div>
+		<MkInfo v-if="!isValid" warn>{{ i18n.ts.cannotScheduleLaterThanOneYear }}</MkInfo>
+		<section v-if="afterOnly || showDetail">
+			<div>
+				<MkSelect v-if="!afterOnly" v-model="expiration" small>
+					<template #label>{{ i18n.ts._poll.expiration }}</template>
+					<option value="at">{{ i18n.ts._poll.at }}</option>
+					<option value="after">{{ i18n.ts._poll.after }}</option>
 				</MkSelect>
-			</section>
-		</div>
-	</section>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import MkInput from './MkInput.vue';
-import MkSelect from './MkSelect.vue';
-import { formatDateTimeString } from '@/scripts/format-time-string.js';
-import { addTime } from '@/scripts/time.js';
-import { i18n } from '@/i18n.js';
-
-export type DeleteScheduleEditorModelValue = {
+				<section v-if="expiration === 'at'">
+					<MkInput v-model="atDate" small type="date" class="input">
+						<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
+					</MkInput>
+					<MkInput v-model="atTime" small type="time" class="input">
+						<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
+					</MkInput>
+				</section>
+				<section v-else-if="expiration === 'after'">
+					<MkInput v-model="after" small type="number" class="input">
+						<template #label>{{ i18n.ts._poll.duration }}</template>
+					</MkInput>
+					<MkSelect v-model="unit" small>
+						<option value="second">{{ i18n.ts._time.second }}</option>
+						<option value="minute">{{ i18n.ts._time.minute }}</option>
+						<option value="hour">{{ i18n.ts._time.hour }}</option>
+						<option value="day">{{ i18n.ts._time.day }}</option>
+					</MkSelect>
+				</section>
+			</div>
+		</section>
+	</div>
+	</template>
+	<script lang="ts" setup>
+	import { computed, ref, watch } from 'vue';
+	import MkInput from './MkInput.vue';
+	import MkSelect from './MkSelect.vue';
+	import MkInfo from './MkInfo.vue';
+	import { formatDateTimeString } from '@/scripts/format-time-string.js';
+	import { addTime } from '@/scripts/time.js';
+	import { defaultStore } from '@/store.js';
+	import { i18n } from '@/i18n.js';
+	export type DeleteScheduleEditorModelValue = {
 		deleteAt: number | null;
 		deleteAfter: number | null;
+		isValid: boolean;
 	};
 
-const props = defineProps<{
+	const props = defineProps<{
 		modelValue: DeleteScheduleEditorModelValue;
+		afterOnly?: boolean;
 	}>();
-const emit = defineEmits<{
+	const emit = defineEmits<{
 		(ev: 'update:modelValue', v: DeleteScheduleEditorModelValue): void;
 	}>();
 
-const expiration = ref('at');
-const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
-const atTime = ref('00:00');
-const after = ref(0);
-const unit = ref('second');
+	const expiration = ref<'at' | 'after'>('after');
+	const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
+	const atTime = ref('00:00');
+	const after = ref(0);
+	const unit = ref<'second' | 'minute' | 'hour' | 'day'>('second');
+	const isValid = ref(true);
+	const showDetail = ref(!defaultStore.state.defaultScheduledNoteDelete);
+	const summaryText = computed(() => {
+		if (showDetail.value) {
+			return i18n.ts.scheduledNoteDelete;
+		}
+		if (expiration.value === 'at') {
+			return `${i18n.ts.scheduledNoteDeleteEnabled} (${formatDateTimeString(new Date(calcAt()), 'yyyy/MM/dd HH:mm')})`;
+		} else {
+			const time = unit.value === 'second' ? i18n.tsx._timeIn.seconds({ n: (after.value).toString() })
+				: unit.value === 'minute' ? i18n.tsx._timeIn.minutes({ n: (after.value).toString() })
+				: unit.value === 'hour' ? i18n.tsx._timeIn.hours({ n: (after.value).toString() })
+				: i18n.tsx._timeIn.days({ n: (after.value).toString() });
+			return `${i18n.ts.scheduledNoteDeleteEnabled} (${time})`;
+		}
+	});
+	const beautifyAfter = (base: number) => {
+		let time = base;
+		if (time % 60 === 0) {
+			unit.value = 'minute';
+			time /= 60;
+		}
+		if (time % 60 === 0) {
+			unit.value = 'hour';
+			time /= 60;
+		}
+		if (time % 24 === 0) {
+			unit.value = 'day';
+			time /= 24;
+		}
+		after.value = time;
+	};
+	beautifyAfter(defaultStore.state.defaultScheduledNoteDeleteTime / 1000);
+	if (props.modelValue.deleteAt) {
+		expiration.value = 'at';
+		const deleteAt = new Date(props.modelValue.deleteAt);
+		atDate.value = formatDateTimeString(deleteAt, 'yyyy-MM-dd');
+		atTime.value = formatDateTimeString(deleteAt, 'HH:mm');
+	} else if (typeof props.modelValue.deleteAfter === 'number') {
+		expiration.value = 'after';
+		beautifyAfter(props.modelValue.deleteAfter / 1000);
+	}
 
-if (props.modelValue.deleteAt) {
-	expiration.value = 'at';
-	const deleteAt = new Date(props.modelValue.deleteAt);
-	atDate.value = formatDateTimeString(deleteAt, 'yyyy-MM-dd');
-	atTime.value = formatDateTimeString(deleteAt, 'HH:mm');
-} else if (typeof props.modelValue.deleteAfter === 'number') {
-	expiration.value = 'after';
-	after.value = props.modelValue.deleteAfter / 1000;
-}
-
-function get(): DeleteScheduleEditorModelValue {
 	const calcAt = () => {
 		return new Date(`${atDate.value} ${atTime.value}`).getTime();
 	};
@@ -88,20 +122,35 @@ function get(): DeleteScheduleEditorModelValue {
 		}
 	};
 
-	return {
-		deleteAt: expiration.value === 'at' ? calcAt() : null,
-		deleteAfter: expiration.value === 'after' ? calcAfter() : null,
+	const isValidTime = () => {
+		if (expiration.value === 'at') {
+			return calcAt() < Date.now() + (1000 * 60 * 60 * 24 * 365);
+		} else {
+			const afterMs = calcAfter();
+			if (afterMs === null) return false;
+			return afterMs < 1000 * 60 * 60 * 24 * 365;
+		}
 	};
-}
 
-watch([expiration, atDate, atTime, after, unit], () => emit('update:modelValue', get()), {
-	deep: true,
-});
-</script>
-
-	<style lang="scss" scoped>
-	.zmdxowus {
-		padding: 8px 16px;
+	isValid.value = isValidTime();
+	watch([expiration, atDate, atTime, after, unit, isValid], () => {
+		const isValidTimeValue = isValidTime();
+		isValid.value = isValidTimeValue;
+		emit('update:modelValue', {
+			deleteAt: expiration.value === 'at' ? calcAt() : null,
+			deleteAfter: expiration.value === 'after' ? calcAfter() : null,
+			isValid: isValidTimeValue,
+		});
+	}, {
+		deep: true,
+	});
+	</script>
+	<style lang="scss" module>
+	.root {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px 0px;
 
 		>span {
 			opacity: 0.7;
@@ -131,10 +180,7 @@ watch([expiration, atDate, atTime, after, unit], () => emit('update:modelValue',
 		}
 
 		>section {
-			margin: 16px 0 0 0;
-
 			>div {
-				margin: 0 8px;
 				display: flex;
 				flex-direction: row;
 				flex-wrap: wrap;
@@ -162,4 +208,19 @@ watch([expiration, atDate, atTime, after, unit], () => emit('update:modelValue',
 			}
 		}
 	}
+
+	.padding {
+		padding: 8px 24px;
+	}
+	.label {
+		font-size: 0.85em;
+		padding: 0 0 8px 0;
+		user-select: none;
+	}
+	.withAccent {
+		color: var(--MI_THEME-accent);
+	}
+	.chevronOpening {
+		transform: rotateX(180deg);
+	}
 	</style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 66a683b65c..79e6af35ce 100755
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -185,7 +185,7 @@ const posted = ref(false);
 const text = ref(props.initialText ?? '');
 const files = ref(props.initialFiles ?? []);
 const poll = ref<PollEditorModelValue | null>(null);
-const scheduledNoteDelete = ref<DeleteScheduleEditorModelValue | null>(null);
+const scheduledNoteDelete = ref<DeleteScheduleEditorModelValue | null>(defaultStore.state.defaultScheduledNoteDelete ? { deleteAt: null, deleteAfter: defaultStore.state.defaultScheduledNoteDeleteTime, isValid: true } : null);
 const useCw = ref<boolean>(!!props.initialCw);
 const showPreview = ref(defaultStore.state.showPreview);
 watch(showPreview, () => defaultStore.set('showPreview', showPreview.value));
@@ -260,6 +260,7 @@ const maxTextLength = computed((): number => {
 
 const canPost = computed((): boolean => {
 	return !props.mock && !posting.value && !posted.value &&
+	(scheduledNoteDelete.value ? scheduledNoteDelete.value.isValid : true) &&
 		(
 			1 <= textLength.value ||
 			1 <= files.value.length ||
@@ -433,6 +434,7 @@ function toggleScheduledNoteDelete() {
 		scheduledNoteDelete.value = {
 			deleteAt: null,
 			deleteAfter: null,
+			isValid: true,
 		};
 	}
 }
@@ -1074,6 +1076,7 @@ onMounted(() => {
 				scheduledNoteDelete.value = {
 					deleteAt: init.deleteAt ? (new Date(init.deleteAt)).getTime() : null,
 					deleteAfter: null,
+					isValid: true,
 				};
 			}
 			if (init.visibleUserIds) {
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index e4a798e72b..e2a4137105 100755
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -36,6 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_s">
 			<MkSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</MkSwitch>
 			<MkSwitch v-model="showFixedPostFormInChannel">{{ i18n.ts.showFixedPostFormInChannel }}</MkSwitch>
+			<FormLink to="/settings/post-form">{{ i18n.ts.defaultScheduledNoteDelete }}</FormLink>
 			<MkFolder>
 				<template #label>{{ i18n.ts.pinnedList }}</template>
 				<!-- 複数ピン止め管理できるようにしたいけどめんどいので一旦ひとつのみ -->
diff --git a/packages/frontend/src/pages/settings/post-form.vue b/packages/frontend/src/pages/settings/post-form.vue
new file mode 100644
index 0000000000..91ad3d0c12
--- /dev/null
+++ b/packages/frontend/src/pages/settings/post-form.vue
@@ -0,0 +1,62 @@
+<template>
+	<div class="_gaps_m">
+	<!-- <MkSwitch v-model="disableNoteDrafting">
+			<template #caption>{{ i18n.ts.disableNoteDraftingDescription }}</template>
+			{{ i18n.ts.disableNoteDrafting }}
+			<span class="_beta">{{ i18n.ts.originalFeature }}</span>
+		</MkSwitch> -->
+		<div>
+			<div :class="$style.label">
+				{{ i18n.ts.defaultScheduledNoteDeleteTime }}
+				<span class="_beta">{{ i18n.ts.originalFeature }}</span>
+			</div>
+			<MkDeleteScheduleEditor v-model="scheduledNoteDelete" :afterOnly="true"/>
+		</div>
+		<MkSwitch v-model="defaultScheduledNoteDelete">
+			{{ i18n.ts.defaultScheduledNoteDelete }}
+			<span class="_beta">{{ i18n.ts.originalFeature }}</span>
+		</MkSwitch>
+	</div>
+	</template>
+	<script lang="ts" setup>
+	import { computed, defineAsyncComponent, ref, watch } from 'vue';
+	import MkSwitch from '@/components/MkSwitch.vue';
+	import MkDeleteScheduleEditor from '@/components/MkDeleteScheduleEditor.vue';
+	import FormSlot from '@/components/form/slot.vue';
+	import { defaultStore } from '@/store.js';
+	import { i18n } from '@/i18n.js';
+	// const disableNoteDrafting = computed(defaultStore.makeGetterSetter('disableNoteDrafting'));
+	const defaultScheduledNoteDelete = computed(defaultStore.makeGetterSetter('defaultScheduledNoteDelete'));
+	const scheduledNoteDelete = ref({ deleteAt: null, deleteAfter: defaultStore.state.defaultScheduledNoteDeleteTime, isValid: true });
+	watch(scheduledNoteDelete, () => {
+		if (!scheduledNoteDelete.value.isValid) return;
+		defaultStore.set('defaultScheduledNoteDeleteTime', scheduledNoteDelete.value.deleteAfter);
+	});
+</script>
+	<style lang="scss" module>
+.items {
+	padding: 8px;
+	flex: 1;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+	grid-auto-rows: 40px;
+}
+.item {
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	font-size: 1em;
+	width: auto;
+	height: 100%;
+	border-radius: 6px;
+	&:hover {
+		background: var(--X5);
+	}
+}
+.label {
+	font-size: 0.85em;
+	padding: 0 0 8px 0;
+	user-select: none;
+}
+ </style>
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index a4d4612b5b..585aaba50d 100755
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -116,6 +116,10 @@ const routes: RouteDef[] = [{
 		path: '/navbar',
 		name: 'navbar',
 		component: page(() => import('@/pages/settings/navbar.vue')),
+	}, {
+		path: '/post-form',
+		name: 'post-form',
+		component: page(() => import('@/pages/settings/post-form.vue')),
 	}, {
 		path: '/statusbar',
 		name: 'statusbar',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index bef6829f40..fd6e0b0af0 100755
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -117,6 +117,14 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: true,
 	},
+	defaultScheduledNoteDelete: {
+		where: 'account',
+		default: false,
+	},
+	defaultScheduledNoteDeleteTime: {
+		where: 'account',
+		default: 86400000,
+	},
 	uploadFolder: {
 		where: 'account',
 		default: null as string | null,
@@ -569,10 +577,6 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: { type: 'syuilo/bubble2', volume: 1 } as SoundStore,
 	},
-	searchEngine: {
-		where: 'device',
-		default: 'https://google.com/search?q=',
-	},
 	reactionChecksMuting: {
 		where: 'device',
 		default: true,