From 267b97f62470230ec408ac702c33e583762a560d Mon Sep 17 00:00:00 2001
From: ToBinio <tobias.frischmann@proton.me>
Date: Thu, 28 May 2026 11:05:18 +0200
Subject: [PATCH] slightly improve ux around time type selection

---
 app/components/Edit/DesktopTodoDataSelect.vue | 13 ++++++++---
 app/components/Edit/TabedDataSelect.vue       | 16 +++++++++++---
 app/components/Edit/Time/TimeRangeSelect.vue  | 22 ++++++++++++++++++-
 .../Edit/Time/TimeRecurringSelect.vue         | 12 +++++-----
 app/components/Utils/SegmentedRadioGroup.vue  |  4 ++--
 5 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/app/components/Edit/DesktopTodoDataSelect.vue b/app/components/Edit/DesktopTodoDataSelect.vue
index f0e0cba..f97a7f7 100644
--- a/app/components/Edit/DesktopTodoDataSelect.vue
+++ b/app/components/Edit/DesktopTodoDataSelect.vue
@@ -26,9 +26,15 @@
 
 	const { timeRange, timeRecurring, timePoint } = useExtractedTime(time);
 
-	const selectedTimeType = ref<"range" | "recurring" | "point">(
-		time.value?.type ?? "range",
+	const selectedTimeType = ref<"range" | "recurring" | "point" | "none">(
+		time.value?.type ?? "none",
 	);
+
+	watch(selectedTimeType, (type) => {
+		if (type === "none") {
+			time.value = undefined;
+		}
+	});
 </script>
 
 <template>
@@ -66,9 +72,10 @@
 					<SegmentedRadioGroup
 						v-model="selectedTimeType"
 						:options="[
+						{ label: t('date-none'), value: 'none' },
 						{ label: t('date-range'), value: 'range' },
 						{ label: t('date-recurring'), value: 'recurring' },
-						{ label: t('date-point'), value: 'point' }
+            { label: t('date-point'), value: 'point' },
 					]"
 						class="mb-2"
 					/>
diff --git a/app/components/Edit/TabedDataSelect.vue b/app/components/Edit/TabedDataSelect.vue
index c1b3c68..007c459 100644
--- a/app/components/Edit/TabedDataSelect.vue
+++ b/app/components/Edit/TabedDataSelect.vue
@@ -28,10 +28,16 @@
 	const { timeRange, timeRecurring, timePoint } = useExtractedTime(time);
 
 	const activeTab = ref("notes");
-	const selectedTimeType = ref<"range" | "recurring" | "point">(
-		time.value?.type ?? "range",
+	const selectedTimeType = ref<"range" | "recurring" | "point" | "none">(
+		time.value?.type ?? "none",
 	);
 
+	watch(selectedTimeType, (type) => {
+		if (type === "none") {
+			time.value = undefined;
+		}
+	});
+
 	watch(selectedTimeType, (_value) => {
 		time.value = undefined;
 	});
@@ -66,7 +72,11 @@
 				class="data-[state=active]:text-primary cursor-pointer transition"
 				value="date"
 			>
-				<select v-model="selectedTimeType" :disabled="activeTab !== 'date'">
+				<select
+					v-model="selectedTimeType"
+					:disabled="activeTab !== 'date' && selectedTimeType !== 'none'"
+				>
+					<option value="none">{{ t("date-none") }} </option>
 					<option value="range">{{ t("date-range") }} </option>
 					<option value="recurring">{{ t("date-recurring") }} </option>
 					<option value="point">{{ t("date-point") }} </option>
diff --git a/app/components/Edit/Time/TimeRangeSelect.vue b/app/components/Edit/Time/TimeRangeSelect.vue
index 596082a..69fabb8 100644
--- a/app/components/Edit/Time/TimeRangeSelect.vue
+++ b/app/components/Edit/Time/TimeRangeSelect.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-	import { parseDate } from "@internationalized/date";
+	import {
+		CalendarDate,
+		getLocalTimeZone,
+		now,
+		parseDate,
+	} from "@internationalized/date";
 	import type { DateRange } from "reka-ui";
 	import {
 		RangeCalendarCell,
@@ -37,6 +42,21 @@
 		};
 	}
 
+	if (timeRange.value === undefined) {
+		let date = now(getLocalTimeZone());
+		let calendarDate = new CalendarDate(date.year, date.month, date.day);
+
+		timeRange.value = {
+			start: calendarDate.toString(),
+			end: calendarDate.toString(),
+		};
+
+		dateRange.value = {
+			start: calendarDate,
+			end: calendarDate,
+		};
+	}
+
 	watch(dateRange, (value) => {
 		if (value.end && value.start) {
 			timeRange.value = {
diff --git a/app/components/Edit/Time/TimeRecurringSelect.vue b/app/components/Edit/Time/TimeRecurringSelect.vue
index 70c90e9..457cb0a 100644
--- a/app/components/Edit/Time/TimeRecurringSelect.vue
+++ b/app/components/Edit/Time/TimeRecurringSelect.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { RadioGroupItem, RadioGroupRoot } from "reka-ui";
 	import type { TimeRecurring } from "~/utils/types";
 	import WeekSelection from "./WeekSelection.vue";
 	import YearlySelection from "./YearlySelection.vue";
@@ -8,13 +7,15 @@
 	const { t } = useI18n();
 
 	const timeRecurring = defineModel<TimeRecurring | undefined>("timeRecurring");
+
+	if (timeRecurring.value === undefined) {
+		timeRecurring.value = { mode: "daily" };
+	}
+
 	const state = computed({
-		get: () => timeRecurring.value?.mode ?? "none",
+		get: () => timeRecurring.value?.mode ?? "daily",
 		set: (value) => {
 			switch (value) {
-				case "none":
-					timeRecurring.value = undefined;
-					break;
 				case "daily":
 					timeRecurring.value = { mode: "daily" };
 					break;
@@ -76,7 +77,6 @@
 		<SegmentedRadioGroup
 			v-model="state"
 			:options="[
-			{ label: t('recurring-none'), value: 'none' },
 			{ label: t('recurring-daily'), value: 'daily' },
 			{ label: t('recurring-weekly'), value: 'weekly' },
 			{ label: t('recurring-yearly'), value: 'yearly' }
diff --git a/app/components/Utils/SegmentedRadioGroup.vue b/app/components/Utils/SegmentedRadioGroup.vue
index b6b5b83..8edae89 100644
--- a/app/components/Utils/SegmentedRadioGroup.vue
+++ b/app/components/Utils/SegmentedRadioGroup.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 	import { RadioGroupItem, RadioGroupRoot } from "reka-ui";
 
-	let selected = defineModel<string>({ required: true });
-
 	defineProps<{
 		options: {
 			label: string;
 			value: string;
 		}[];
 	}>();
+
+	let selected = defineModel<string>({ required: true });
 </script>
 
 <template>
-- 
2.51.2