From 13e94ff93442bf485aca14c2b935298a2af54e4f Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Thu, 17 Sep 2026 14:12:54 +0200
Subject: [PATCH] add option to switch week

---
 app/components/TimeHeader.vue                 | 92 +++++++++++++------
 .../Todo/TimeDisplay/TimeDisplayPoint.vue     | 17 ++--
 .../Todo/TimeDisplay/TimeDisplayRange.vue     | 21 +++--
 app/components/Todo/Todos.vue                 |  2 +-
 app/composables/useWeekDays.ts                | 42 ++++++---
 5 files changed, 116 insertions(+), 58 deletions(-)

diff --git a/app/components/TimeHeader.vue b/app/components/TimeHeader.vue
index 08de396..c9502ee 100644
--- a/app/components/TimeHeader.vue
+++ b/app/components/TimeHeader.vue
@@ -1,39 +1,73 @@
 <script setup lang="ts">
-	import { useWeekDays } from "~/composables/useWeekDays";
+	import { useWeekDays, useWeekOffset } from "~/composables/useWeekDays";
+
+	const weekOffset = useWeekOffset();
+	const dayStrings = useWeekDays();
 
-	const dayStrings = useWeekDays(new Date());
 	const { endDrag, dropOnDayHandler } = useTodoDragging();
 </script>
 
 <template>
-	<div class="flex justify-center">
-		<div class="bg-background h-10 w-full max-w-200 px-1 pt-1">
-			<div class="relative flex items-center justify-evenly">
-				<template v-for="(day, index) in dayStrings" :key="index">
-					<li
-						class="bold flex-1 text-center text-xl list-none"
-						draggable="true"
-						@dragend="endDrag"
-						@dragover="
-              (event: DragEvent) => {
-                event.preventDefault();
-              }
-            "
-						@drop="
-              (event: DragEvent) => {
-                dropOnDayHandler(event, day.date);
-              }
-            "
-					>
-						{{ day.text }}
-					</li>
-					<div
-						v-if="index !== dayStrings.length - 1"
-						class="bg-secondary h-8 w-0.5"
-					/>
-				</template>
+	<div class="@container">
+		<div
+			class="w-full flex flex-col items-center @[870px]:gap-2 @[870px]:flex-row @[870px]:justify-center"
+		>
+			<div
+				class="flex items-center justify-between w-full max-w-200 @[870px]:hidden"
+			>
+				<button
+					type="button"
+					@click="weekOffset -= 1"
+					class="cursor-pointer flex"
+				>
+					<Icon name="material-symbols:arrow-left-rounded" size="28" />
+				</button>
+
+				<button
+					type="button"
+					@click="weekOffset += 1"
+					class="cursor-pointer flex"
+				>
+					<Icon name="material-symbols:arrow-right-rounded" size="28" />
+				</button>
+			</div>
+
+			<button
+				type="button"
+				@click="weekOffset -= 1"
+				class="cursor-pointer hidden @[870px]:flex"
+			>
+				<Icon name="material-symbols:arrow-left-rounded" size="28" />
+			</button>
+
+			<div class="bg-background h-10 w-full max-w-200 px-1 pt-1">
+				<div class="relative flex items-center justify-evenly">
+					<template v-for="(day, index) in dayStrings" :key="index">
+						<li
+							class="bold flex-1 text-center text-xl list-none"
+							draggable="true"
+							@dragend="endDrag"
+							@dragover="(event: DragEvent) => event.preventDefault()"
+							@drop="(event: DragEvent) => dropOnDayHandler(event, day.date)"
+						>
+							{{ day.text }}
+						</li>
+						<div
+							v-if="index !== dayStrings.length - 1"
+							class="bg-secondary h-8 w-0.5"
+						/>
+					</template>
+				</div>
+				<div class="bg-secondary h-0.5" />
 			</div>
-			<div class="bg-secondary h-0.5" />
+
+			<button
+				type="button"
+				@click="weekOffset += 1"
+				class="cursor-pointer hidden @[870px]:flex"
+			>
+				<Icon name="material-symbols:arrow-right-rounded" size="28" />
+			</button>
 		</div>
 	</div>
 </template>
diff --git a/app/components/Todo/TimeDisplay/TimeDisplayPoint.vue b/app/components/Todo/TimeDisplay/TimeDisplayPoint.vue
index 4e0ee45..7fa954e 100644
--- a/app/components/Todo/TimeDisplay/TimeDisplayPoint.vue
+++ b/app/components/Todo/TimeDisplay/TimeDisplayPoint.vue
@@ -5,15 +5,20 @@
 
 	const { point } = defineProps<{ point: TimePoint }>();
 
+	const weekOffset = useWeekOffset();
+	const start = computed(() => {
+		const now = new Date();
+		now.setHours(0, 0, 0, 0);
+
+		return addDays(now, weekOffset.value * 7);
+	});
+
 	const time = computed(() => {
 		return parseAbsoluteToLocal(point.time).toDate().getTime();
 	});
 
 	const offset = computed(() => {
-		const now = new Date();
-		now.setHours(0, 0, 0, 0);
-
-		const timeDiff = time.value - now.getTime();
+		const timeDiff = time.value - start.value.getTime();
 		const numberOfDays = timeDiff / (24 * 60 * 60 * 1000.0);
 		const percentage = numberOfDays / 7.0;
 
@@ -21,11 +26,11 @@
 	});
 
 	const isCappedRight = computed(() => {
-		return time.value > addDays(sanitizeDate(new Date()), 7).getTime();
+		return time.value > addDays(sanitizeDate(start.value), 7).getTime();
 	});
 
 	const isCappedLeft = computed(() => {
-		return time.value < sanitizeDate(new Date()).getTime();
+		return time.value < sanitizeDate(start.value).getTime();
 	});
 </script>
 
diff --git a/app/components/Todo/TimeDisplay/TimeDisplayRange.vue b/app/components/Todo/TimeDisplay/TimeDisplayRange.vue
index ad4797d..6da2e30 100644
--- a/app/components/Todo/TimeDisplay/TimeDisplayRange.vue
+++ b/app/components/Todo/TimeDisplay/TimeDisplayRange.vue
@@ -5,6 +5,14 @@
 
 	const { range } = defineProps<{ range: TimeRange }>();
 
+	const weekOffset = useWeekOffset();
+	const start = computed(() => {
+		const now = new Date();
+		now.setHours(0, 0, 0, 0);
+
+		return addDays(now, weekOffset.value * 7);
+	});
+
 	const timeFrameString = computed(() => {
 		return `${range.start.toWellFormed()} - ${range.end.toWellFormed()}`;
 	});
@@ -21,8 +29,8 @@
 
 	function capTime(time: number): number {
 		return Math.min(
-			Math.max(time, sanitizeDate(new Date()).getTime()),
-			addDays(sanitizeDate(new Date()), 7).getTime(),
+			Math.max(time, sanitizeDate(start.value).getTime()),
+			addDays(sanitizeDate(start.value), 7).getTime(),
 		);
 	}
 
@@ -41,21 +49,18 @@
 	});
 
 	const offset = computed(() => {
-		const now = new Date();
-		now.setHours(0, 0, 0, 0);
-
-		const timeDiff = cappedTime.value.start - now.getTime();
+		const timeDiff = cappedTime.value.start - start.value.getTime();
 		const numberOfDays = timeDiff / (24 * 60 * 60 * 1000.0);
 		const percentage = numberOfDays / 7.0;
 		return percentage;
 	});
 
 	const isCappedRight = computed(() => {
-		return time.value.end > addDays(sanitizeDate(new Date()), 7).getTime();
+		return time.value.end > addDays(sanitizeDate(start.value), 7).getTime();
 	});
 
 	const isCappedLeft = computed(() => {
-		return time.value.start < sanitizeDate(new Date()).getTime();
+		return time.value.start < sanitizeDate(start.value).getTime();
 	});
 </script>
 
diff --git a/app/components/Todo/Todos.vue b/app/components/Todo/Todos.vue
index 5282c53..c3d87a2 100644
--- a/app/components/Todo/Todos.vue
+++ b/app/components/Todo/Todos.vue
@@ -18,7 +18,7 @@
 <template>
 	<div class="flex justify-center" data-testid="todos-container">
 		<div
-			class="max-h-[calc(100dvh-5.75rem)] pwa:max-h-[calc(100dvh-8.75rem)] floating:max-h-[calc(100dvh-2.5rem)]! floating:pb-25  w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)] pb-1"
+			class="max-h-[calc(100dvh-7.25rem)] pwa:max-h-[calc(100dvh-10.75rem)] floating:max-h-[calc(100dvh-4.5rem)]! floating:pb-25  w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)] pb-1"
 		>
 			<TransitionGroup
 				leave-to-class="max-h-0! opacity-0 scale-y-0"
diff --git a/app/composables/useWeekDays.ts b/app/composables/useWeekDays.ts
index fb941af..2b4a444 100644
--- a/app/composables/useWeekDays.ts
+++ b/app/composables/useWeekDays.ts
@@ -1,22 +1,36 @@
 import { addDays } from "~/utils/date";
 
-export function useWeekDays(start: Date) {
+export function useWeekOffset() {
+	return useState("weekOffset", () => 0);
+}
+
+export function useWeekDays() {
 	const { locale } = useI18n();
+	const weekOffset = useWeekOffset();
+
+	return computed(() => {
+		const dayStrings = [];
+		let now = addDays(new Date(), weekOffset.value * 7);
 
-	const dayStrings = [];
-	let now = start;
+		for (let i = 0; i < 7; i++) {
+			let text = "";
+			if (weekOffset.value === 0) {
+				text = now
+					.toLocaleString(locale.value, { weekday: "long" })
+					.substring(0, 2);
+			} else {
+				text = `${now.getDate()}.${now.getMonth() + 1}`;
+			}
 
-	for (let i = 0; i < 7; i++) {
-		dayStrings.push({
-			text: now
-				.toLocaleString(locale.value, { weekday: "long" })
-				.substring(0, 2),
-			date: now,
-		});
+			dayStrings.push({
+				text,
+				date: now,
+			});
 
-		// Increment the date by one day
-		now = addDays(now, 1);
-	}
+			// Increment the date by one day
+			now = addDays(now, 1);
+		}
 
-	return dayStrings;
+		return dayStrings;
+	});
 }
-- 
2.51.2