From 145682f8d435ba9995529d4eb40c36c56a14d23b Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Tue, 29 Sep 2026 10:53:49 +0200
Subject: [PATCH] add datePicker to timePoint

---
 app/components/Edit/Time/TimePointSelect.vue | 133 ++++++++++++++++---
 1 file changed, 115 insertions(+), 18 deletions(-)

diff --git a/app/components/Edit/Time/TimePointSelect.vue b/app/components/Edit/Time/TimePointSelect.vue
index 90c0683..21d4ac9 100644
--- a/app/components/Edit/Time/TimePointSelect.vue
+++ b/app/components/Edit/Time/TimePointSelect.vue
@@ -6,7 +6,26 @@
 		parseAbsoluteToLocal,
 		toZoned,
 	} from "@internationalized/date";
-	import { DateFieldInput, DateFieldRoot } from "reka-ui";
+	import {
+		DatePickerArrow,
+		DatePickerCalendar,
+		DatePickerCell,
+		DatePickerCellTrigger,
+		DatePickerContent,
+		DatePickerField,
+		DatePickerGrid,
+		DatePickerGridBody,
+		DatePickerGridHead,
+		DatePickerGridRow,
+		DatePickerHeadCell,
+		DatePickerHeader,
+		DatePickerHeading,
+		DatePickerInput,
+		DatePickerNext,
+		DatePickerPrev,
+		DatePickerRoot,
+		DatePickerTrigger,
+	} from "reka-ui";
 	import type { TimePoint } from "~/utils/types";
 
 	const { locale } = useI18n();
@@ -38,28 +57,106 @@
 
 <template>
 	<div class="flex h-full justify-center">
-		<div class="flex gap-1 max-h-8 border border-secondary rounded">
-			<DateFieldRoot
+		<DatePickerRoot v-model="dateTime">
+			<DatePickerField
 				:granularity="'minute'"
 				:hourCycle="24"
 				:locale="locale"
 				v-model="dateTime"
 				v-slot="{ segments }"
-				class="flex select-none items-center"
+				class="flex select-none items-center border border-secondary rounded"
 			>
-				<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 class="flex items-center">
+					<template v-for="item in segments.slice(0, 5)" :key="item.part">
+						<DatePickerInput v-if="item.part === 'literal'" :part="item.part">
+							{{ item.value }}
+						</DatePickerInput>
+						<DatePickerInput
+							v-else
+							:part="item.part"
+							class="px-1 focus:bg-secondary outline-0 rounded"
+						>
+							{{ item.value }}
+						</DatePickerInput>
+					</template>
+				</div>
+
+				<DatePickerTrigger class="pr-1 flex items-center cursor-pointer">
+					<Icon
+						name="material-symbols:edit-calendar-rounded"
+						class="text-base"
+					/>
+				</DatePickerTrigger>
+
+				<div class="flex items-center">
+					<template v-for="item in segments.slice(6, 11)" :key="item.part">
+						<DatePickerInput v-if="item.part === 'literal'" :part="item.part">
+							{{ item.value }}
+						</DatePickerInput>
+						<DatePickerInput
+							v-else
+							:part="item.part"
+							class="px-1 focus:bg-secondary outline-0 rounded"
+						>
+							{{ item.value }}
+						</DatePickerInput>
+					</template>
+				</div>
+			</DatePickerField>
+			<DatePickerContent class="z-50">
+				<DatePickerArrow class="fill-secondary" />
+				<DatePickerCalendar
+					v-slot="{ weekDays, grid }"
+					class="p-2 bg-secondary rounded flex flex-col gap-2"
+				>
+					<DatePickerHeader class="flex items-center justify-between">
+						<DatePickerPrev
+							class="inline-flex cursor-pointer hover:bg-secondary-hover rounded"
+						>
+							<Icon name="material-symbols:chevron-left-rounded" size="20" />
+						</DatePickerPrev>
+
+						<DatePickerHeading class="font-medium" />
+						<DatePickerNext
+							class="inline-flex cursor-pointer hover:bg-secondary-hover rounded"
+						>
+							<Icon name="material-symbols:chevron-right-rounded" size="20" />
+						</DatePickerNext>
+					</DatePickerHeader>
+					<DatePickerGrid v-for="month in grid" :key="month.value.toString()">
+						<DatePickerGridHead>
+							<DatePickerGridRow class="mb-1 flex w-full justify-between">
+								<DatePickerHeadCell
+									v-for="day in weekDays"
+									:key="day"
+									class="w-8 text-muted-text text-xs"
+								>
+									{{ day }}
+								</DatePickerHeadCell>
+							</DatePickerGridRow>
+						</DatePickerGridHead>
+						<DatePickerGridBody>
+							<DatePickerGridRow
+								v-for="(weekDates, index) in month.rows"
+								:key="`weekDate-${index}`"
+								class="flex w-full"
+							>
+								<DatePickerCell
+									v-for="weekDate in weekDates"
+									:key="weekDate.toString()"
+									:date="weekDate"
+								>
+									<DatePickerCellTrigger
+										:day="weekDate"
+										:month="month.value"
+										class="relative flex items-center justify-center rounded-full text-sm font-normal w-8 h-8 hover:bg-secondary-hover data-selected:bg-primary-hover data-outside-view:text-muted-text"
+									/>
+								</DatePickerCell>
+							</DatePickerGridRow>
+						</DatePickerGridBody>
+					</DatePickerGrid>
+				</DatePickerCalendar>
+			</DatePickerContent>
+		</DatePickerRoot>
 	</div>
 </template>
-- 
2.51.2