From db722e84ed376a8160cae4f54e518bc720c6036b Mon Sep 17 00:00:00 2001
From: ToBinio <tobias.frischmann@proton.me>
Date: Thu, 28 May 2026 10:44:37 +0200
Subject: [PATCH] warp lists in desktopTodoDataSelection view

---
 app/components/Edit/DesktopTodoDataSelect.vue | 38 ++++++-------------
 .../Edit/Time/TimeRecurringSelect.vue         | 36 +++++-------------
 app/components/Edit/Time/WeekSelection.vue    |  7 ++--
 app/components/Utils/SegmentedRadioGroup.vue  | 28 ++++++++++++++
 i18n/locales/de.json                          |  6 +--
 5 files changed, 56 insertions(+), 59 deletions(-)
 create mode 100644 app/components/Utils/SegmentedRadioGroup.vue

diff --git a/app/components/Edit/DesktopTodoDataSelect.vue b/app/components/Edit/DesktopTodoDataSelect.vue
index 82ccb51..f0e0cba 100644
--- a/app/components/Edit/DesktopTodoDataSelect.vue
+++ b/app/components/Edit/DesktopTodoDataSelect.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-	import {
-		RadioGroupItem,
-		RadioGroupRoot,
-		SplitterGroup,
-		SplitterPanel,
-		SplitterResizeHandle,
-	} from "reka-ui";
+	import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
 	import type { CreateTodoData, UUID } from "~/utils/types";
 	import CategorySelect from "../Utils/Label/CategorySelect.vue";
 	import TagSelect from "../Utils/Label/TagSelect.vue";
@@ -15,6 +9,7 @@
 	import TimeRangeSelect from "./Time/TimeRangeSelect.vue";
 	import TimeRecurringSelect from "./Time/TimeRecurringSelect.vue";
 	import TitleSelect from "./TitleSelect.vue";
+	import SegmentedRadioGroup from "../Utils/SegmentedRadioGroup.vue";
 
 	const { t } = useI18n();
 
@@ -68,26 +63,15 @@
 				</DesktopSideBarElement>
 
 				<DesktopSideBarElement :title="t('time')">
-					<RadioGroupRoot v-model="selectedTimeType" class="h-10 flex pb-2">
-						<RadioGroupItem
-							class="data-active:bg-secondary-hover border-secondary flex-1 cursor-pointer rounded-l border px-1"
-							value="range"
-						>
-							{{ t("date-range") }}
-						</RadioGroupItem>
-						<RadioGroupItem
-							class="data-active:bg-secondary-hover border-secondary flex-1 cursor-pointer border-y px-1"
-							value="recurring"
-						>
-							{{ t("date-recurring") }}
-						</RadioGroupItem>
-						<RadioGroupItem
-							class="data-active:bg-secondary-hover border-secondary flex-1 cursor-pointer rounded-r border px-1"
-							value="point"
-						>
-							{{ t("date-point") }}
-						</RadioGroupItem>
-					</RadioGroupRoot>
+					<SegmentedRadioGroup
+						v-model="selectedTimeType"
+						:options="[
+						{ label: t('date-range'), value: 'range' },
+						{ label: t('date-recurring'), value: 'recurring' },
+						{ label: t('date-point'), value: 'point' }
+					]"
+						class="mb-2"
+					/>
 
 					<div>
 						<TimeRangeSelect
diff --git a/app/components/Edit/Time/TimeRecurringSelect.vue b/app/components/Edit/Time/TimeRecurringSelect.vue
index b383c57..70c90e9 100644
--- a/app/components/Edit/Time/TimeRecurringSelect.vue
+++ b/app/components/Edit/Time/TimeRecurringSelect.vue
@@ -3,6 +3,7 @@
 	import type { TimeRecurring } from "~/utils/types";
 	import WeekSelection from "./WeekSelection.vue";
 	import YearlySelection from "./YearlySelection.vue";
+	import SegmentedRadioGroup from "~/components/Utils/SegmentedRadioGroup.vue";
 
 	const { t } = useI18n();
 
@@ -72,32 +73,15 @@
 
 <template>
 	<div class="w-full h-full flex flex-col gap-2">
-		<RadioGroupRoot v-model="state" class="h-10 flex">
-			<RadioGroupItem
-				class="data-active:bg-secondary-hover border-secondary flex-1 cursor-pointer rounded-l border px-1"
-				value="none"
-			>
-				{{ t("recurring-none") }}
-			</RadioGroupItem>
-			<RadioGroupItem
-				class="data-active:bg-secondary-hover border-secondary flex-1 cursor-pointer border-y border-r px-1"
-				value="daily"
-			>
-				{{ t("recurring-daily") }}
-			</RadioGroupItem>
-			<RadioGroupItem
-				class="data-active:bg-secondary-hover border-secondary flex-1 cursor-pointer border-y px-1"
-				value="weekly"
-			>
-				{{ t("recurring-weekly") }}
-			</RadioGroupItem>
-			<RadioGroupItem
-				class="data-active:bg-secondary-hover border-secondary flex-1 cursor-pointer rounded-r border px-1"
-				value="yearly"
-			>
-				{{ t("recurring-yearly") }}
-			</RadioGroupItem>
-		</RadioGroupRoot>
+		<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' }
+		]"
+		/>
 
 		<WeekSelection
 			v-if="timeRecurring?.mode === 'weekly'"
diff --git a/app/components/Edit/Time/WeekSelection.vue b/app/components/Edit/Time/WeekSelection.vue
index 454fe72..5b5dfb9 100644
--- a/app/components/Edit/Time/WeekSelection.vue
+++ b/app/components/Edit/Time/WeekSelection.vue
@@ -33,13 +33,14 @@
 </script>
 
 <template>
-	<div class="flex h-7 border border-secondary rounded">
+	<div
+		class="flex border border-secondary rounded flex-wrap bg-secondary gap-px"
+	>
 		<div
 			v-for="(day, index) in weekDays"
 			:key="day"
 			:data-selected="index >= range.start && index <= range.end"
-			:data-first="index === 0"
-			class="data-[first=false]:border-l border-secondary data-[selected=true]:bg-secondary flex cursor-pointer items-center justify-center p-1 flex-1"
+			class="bg-surface data-[selected=true]:bg-secondary flex cursor-pointer items-center justify-center p-1 flex-1 h-7"
 			@click="onSelectDay(index)"
 		>
 			{{ day }}
diff --git a/app/components/Utils/SegmentedRadioGroup.vue b/app/components/Utils/SegmentedRadioGroup.vue
new file mode 100644
index 0000000..b6b5b83
--- /dev/null
+++ b/app/components/Utils/SegmentedRadioGroup.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+	import { RadioGroupItem, RadioGroupRoot } from "reka-ui";
+
+	let selected = defineModel<string>({ required: true });
+
+	defineProps<{
+		options: {
+			label: string;
+			value: string;
+		}[];
+	}>();
+</script>
+
+<template>
+	<RadioGroupRoot
+		class="flex flex-wrap overflow-hidden border border-secondary rounded gap-px bg-secondary"
+		v-model="selected"
+	>
+		<RadioGroupItem
+			v-for="option in options"
+			:key="option.value"
+			:value="option.value"
+			class="data-active:bg-secondary-hover flex-1 cursor-pointer px-1 py-0.5 bg-surface"
+		>
+			{{ option.label }}
+		</RadioGroupItem>
+	</RadioGroupRoot>
+</template>
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index b4961d0..5ad166e 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -21,9 +21,9 @@
 	},
 	"apiKeys": "API Schlüssel",
 	"create": "Erstellen",
-	"date-range": "Datumbereich",
-	"date-recurring": "Wiederholung",
-	"date-point": "Zeitpunkt",
+	"date-range": "Bereich",
+	"date-recurring": "Wiederholend",
+	"date-point": "Punkt",
 	"recurring-none": "Keine",
 	"recurring-daily": "Täglich",
 	"recurring-weekly": "Wöchentlich",
-- 
2.51.2