From bffa9f1e96b367c281f5e2d75de32b3159346507 Mon Sep 17 00:00:00 2001
From: ToBinio <tobias.frischmann@proton.me>
Date: Wed, 10 Jun 2026 11:20:51 +0200
Subject: [PATCH] basic reminder ui

---
 app/components/Edit/DesktopTodoDataSelect.vue |   4 +
 app/components/Edit/EditTodoSheet.vue         |   3 +-
 app/components/Edit/MobileTodoDataSelect.vue  |   1 +
 app/components/Edit/NewTodoSheet.vue          |   5 +-
 app/components/Edit/Reminder.vue              | 108 ++++++++++++++++++
 app/components/Edit/ReminderSelect.vue        |  48 ++++++++
 app/components/Edit/TabedDataSelect.vue       |   8 +-
 app/components/Edit/Time/TimePointSelect.vue  |   2 +-
 i18n/locales/de.json                          |   5 +
 i18n/locales/en.json                          |   5 +
 10 files changed, 183 insertions(+), 6 deletions(-)
 create mode 100644 app/components/Edit/Reminder.vue
 create mode 100644 app/components/Edit/ReminderSelect.vue

diff --git a/app/components/Edit/DesktopTodoDataSelect.vue b/app/components/Edit/DesktopTodoDataSelect.vue
index 053fdb1..2315f56 100644
--- a/app/components/Edit/DesktopTodoDataSelect.vue
+++ b/app/components/Edit/DesktopTodoDataSelect.vue
@@ -10,6 +10,7 @@
 	import TimeRangeSelect from "./Time/TimeRangeSelect.vue";
 	import TimeRecurringSelect from "./Time/TimeRecurringSelect.vue";
 	import TitleSelect from "./TitleSelect.vue";
+	import ReminderSelect from "./ReminderSelect.vue";
 
 	const { t } = useI18n();
 
@@ -95,6 +96,9 @@
 						/>
 					</div>
 				</DesktopSideBarElement>
+				<DesktopSideBarElement :title="t('reminders')">
+					<ReminderSelect v-model:reminders="todoData.reminders" />
+				</DesktopSideBarElement>
 			</div>
 		</SplitterPanel>
 	</SplitterGroup>
diff --git a/app/components/Edit/EditTodoSheet.vue b/app/components/Edit/EditTodoSheet.vue
index ec07239..20d66d0 100644
--- a/app/components/Edit/EditTodoSheet.vue
+++ b/app/components/Edit/EditTodoSheet.vue
@@ -37,7 +37,8 @@
 				? todo.tags.map((tag) => tag.uuid)
 				: undefined;
 			todoData.value.category = todo.category?.uuid;
-			todoData.value.time = todo.time;
+      todoData.value.time = todo.time;
+			todoData.value.reminders = todo.reminders;
 
 			isOpen.value = true;
 		},
diff --git a/app/components/Edit/MobileTodoDataSelect.vue b/app/components/Edit/MobileTodoDataSelect.vue
index 12c8063..07d7348 100644
--- a/app/components/Edit/MobileTodoDataSelect.vue
+++ b/app/components/Edit/MobileTodoDataSelect.vue
@@ -15,6 +15,7 @@
 		v-model:tags="todoData.tags"
 		v-model:category="todoData.category"
 		v-model:note="todoData.note"
+		v-model:reminders="todoData.reminders"
 	/>
 	<div class="flex h-10 gap-1">
 		<slot />
diff --git a/app/components/Edit/NewTodoSheet.vue b/app/components/Edit/NewTodoSheet.vue
index 6848fc5..c5ecf89 100644
--- a/app/components/Edit/NewTodoSheet.vue
+++ b/app/components/Edit/NewTodoSheet.vue
@@ -24,8 +24,6 @@
 		title: "",
 		note: "",
 		tags: [],
-		time: undefined,
-		category: undefined,
 	});
 
 	watch(isOpen, () => {
@@ -49,7 +47,8 @@
 		todoData.value.time =
 			timeFilter.value === "all"
 				? undefined
-				: { type: "range", start: today, end: today };
+        : { type: "range", start: today, end: today };
+    todoData.value.reminders = undefined;
 	}
 
 	function onAddTodo() {
diff --git a/app/components/Edit/Reminder.vue b/app/components/Edit/Reminder.vue
new file mode 100644
index 0000000..060b0e6
--- /dev/null
+++ b/app/components/Edit/Reminder.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+	import {
+		type DateValue,
+		getLocalTimeZone,
+		now,
+		parseAbsoluteToLocal,
+		toZoned,
+	} from "@internationalized/date";
+	import { DateFieldInput, DateFieldRoot } from "reka-ui";
+
+	const { t, locale } = useI18n();
+
+	const reminder = defineModel<Reminder | undefined>("reminder", {
+		required: true,
+	});
+
+	const offset = computed({
+		get: () => {
+			if (reminder.value?.type === "relative") {
+				return reminder.value.offset;
+			}
+
+			return null;
+		},
+		set: (value: number | undefined) => {
+			if (value) {
+				reminder.value = {
+					offset: value,
+					type: "relative",
+				};
+			}
+		},
+	});
+	const dateTime = computed({
+		get: () => {
+			if (reminder.value?.type === "time") {
+				return parseAbsoluteToLocal(reminder.value.time);
+			}
+
+			return null;
+		},
+		set: (value: DateValue | undefined) => {
+			if (value) {
+				reminder.value = {
+					time: toZoned(value, getLocalTimeZone()).toAbsoluteString(),
+					type: "time",
+				};
+			}
+		},
+  });
+
+	const type = computed({
+    get: () => {
+      return reminder.value?.type ?? "relative"
+		},
+		set: (value: "relative" | "time") => {
+			if(value == "relative") {
+				reminder.value = {
+					offset: 0,
+					type: "relative",
+				};
+			} else {
+				reminder.value = {
+          time: now(getLocalTimeZone()).toAbsoluteString(),
+					type: "time",
+				};
+			}
+		},
+	});
+</script>
+
+<template>
+	<div class="flex gap-2 flex-wrap">
+		<select v-model="type">
+			<option value="relative">{{ t("reminder.relative") }}</option>
+			<option value="time">{{ t("reminder.time") }}</option>
+		</select>
+		<div v-if="reminder?.type === 'relative'">
+			<input v-model="offset" type="number" class="w-full">
+		</div>
+		<div
+			v-if="reminder?.type === 'time'"
+			class="flex gap-1 max-h-8 border border-secondary rounded"
+		>
+			<DateFieldRoot
+				:granularity="'minute'"
+				:hourCycle="24"
+				:locale="locale"
+				v-model="dateTime"
+				v-slot="{ segments }"
+				class="flex select-none items-center"
+			>
+				<template v-for="item in segments" :key="item.part">
+					<DateFieldInput v-if="item.part === 'literal'" :part="item.part">
+						{{ item.value }}
+					</DateFieldInput>
+					<DateFieldInput
+						v-else
+						:part="item.part"
+						class="px-1 focus:bg-secondary outline-0 rounded"
+					>
+						{{ item.value }}
+					</DateFieldInput>
+				</template>
+			</DateFieldRoot>
+		</div>
+	</div>
+</template>
diff --git a/app/components/Edit/ReminderSelect.vue b/app/components/Edit/ReminderSelect.vue
new file mode 100644
index 0000000..1dda069
--- /dev/null
+++ b/app/components/Edit/ReminderSelect.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+	import Reminder from "./Reminder.vue";
+
+	const { t } = useI18n();
+
+	const reminders = defineModel<Reminder[] | undefined>("reminders", {
+		required: true,
+	});
+
+	function onRemoveReminder(index: number) {
+		if (!reminders.value) return;
+		reminders.value.splice(index, 1);
+	}
+
+	function onAddReminder() {
+		reminders.value = [
+			...(reminders.value ?? []),
+			{ type: "relative", offset: 0 },
+		];
+	}
+</script>
+
+<template>
+	<div class="overflow-auto flex flex-col gap-1">
+		<div
+			class="flex justify-between"
+			v-for="(_, index) in reminders"
+			:key="index"
+		>
+			<Reminder v-model:reminder="reminders![index]" />
+			<button
+				class="cursor-pointer"
+				type="button"
+				@click="onRemoveReminder(index)"
+			>
+				<Icon name="material-symbols:delete-outline-rounded" size="24" />
+			</button>
+		</div>
+		<button
+			class="border border-secondary rounded p-0.5 pr-1 cursor-pointer flex gap-1 items-center w-min"
+			type="button"
+			@click="onAddReminder()"
+		>
+			<Icon name="material-symbols:add-2-rounded" size="20" />
+			{{ t("new") }}
+		</button>
+	</div>
+</template>
diff --git a/app/components/Edit/TabedDataSelect.vue b/app/components/Edit/TabedDataSelect.vue
index f18176d..4ac7456 100644
--- a/app/components/Edit/TabedDataSelect.vue
+++ b/app/components/Edit/TabedDataSelect.vue
@@ -6,13 +6,14 @@
 		TabsRoot,
 		TabsTrigger,
 	} from "reka-ui";
-	import type { Time, UUID } from "~/utils/types";
+	import type { Reminder, Time, UUID } from "~/utils/types";
 	import CategorySelect from "../Utils/Label/CategorySelect.vue";
 	import TagSelect from "../Utils/Label/TagSelect.vue";
 	import NoteSelect from "./NoteSelect.vue";
 	import TimePointSelect from "./Time/TimePointSelect.vue";
 	import TimeRangeSelect from "./Time/TimeRangeSelect.vue";
 	import TimeRecurringSelect from "./Time/TimeRecurringSelect.vue";
+	import ReminderSelect from "./ReminderSelect.vue";
 
 	const { t } = useI18n();
 
@@ -24,6 +25,7 @@
 		required: true,
 	});
 	const note = defineModel<string>("note", { required: true });
+	const reminders = defineModel<Reminder[] | undefined>("reminders", { required: true });
 
 	const { timeRange, timeRecurring, timePoint } = useExtractedTime(time);
 
@@ -111,6 +113,10 @@
 					v-if="selectedTimeType === 'point'"
 					v-model:timePoint="timePoint"
 				/>
+				<div class="pt-2">
+					<h3 class="text-lg" >{{ t("reminders") }}</h3>
+					<ReminderSelect v-model:reminders="reminders" />
+				</div>
 			</TabsContent>
 		</div>
 	</TabsRoot>
diff --git a/app/components/Edit/Time/TimePointSelect.vue b/app/components/Edit/Time/TimePointSelect.vue
index 4539821..90c0683 100644
--- a/app/components/Edit/Time/TimePointSelect.vue
+++ b/app/components/Edit/Time/TimePointSelect.vue
@@ -9,7 +9,7 @@
 	import { DateFieldInput, DateFieldRoot } from "reka-ui";
 	import type { TimePoint } from "~/utils/types";
 
-	const { t, locale } = useI18n();
+	const { locale } = useI18n();
 	const timePoint = defineModel<TimePoint | undefined>("timePoint");
 
 	if (timePoint.value === undefined) {
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 3641810..7214248 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -1,6 +1,11 @@
 {
 	"categories": "Kategorien",
 	"tags": "Tags",
+	"reminders": "Erinnerungen",
+	"reminder": {
+		"relative": "Relativ",
+		"time": "Zeit Punkt"
+	},
 	"time": "Zeit",
 	"all": "Alle",
 	"today": "Heute",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 776a1b8..bb17a85 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,6 +1,11 @@
 {
 	"categories": "Categories",
 	"tags": "Tags",
+	"reminders": "Reminders",
+	"reminder": {
+		"relative": "Relative",
+		"time": "Time Point"
+	},
 	"time": "Time",
 	"all": "All",
 	"today": "Today",
-- 
2.51.2