From 2de33c943531846bfa3e61852cb2c13b6943fc6c Mon Sep 17 00:00:00 2001
From: ToBinio <tobias.frischmann@proton.me>
Date: Sun, 24 May 2026 12:01:24 +0200
Subject: [PATCH] extract Callapsible logic

---
 app/components/Edit/DesktopSideBarElement.vue |  19 +++
 app/components/Edit/DesktopTodoDataSelect.vue | 110 ++++++++----------
 2 files changed, 66 insertions(+), 63 deletions(-)
 create mode 100644 app/components/Edit/DesktopSideBarElement.vue

diff --git a/app/components/Edit/DesktopSideBarElement.vue b/app/components/Edit/DesktopSideBarElement.vue
new file mode 100644
index 0000000..8786204
--- /dev/null
+++ b/app/components/Edit/DesktopSideBarElement.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+	import {
+		CollapsibleContent,
+		CollapsibleRoot,
+		CollapsibleTrigger,
+	} from "reka-ui";
+
+	defineProps<{ title: string }>();
+</script>
+<template>
+	<CollapsibleRoot :defaultOpen="true">
+		<CollapsibleTrigger class="text-muted-text text-lg cursor-pointer">
+			{{ title }}
+		</CollapsibleTrigger>
+		<CollapsibleContent>
+			<slot />
+		</CollapsibleContent>
+	</CollapsibleRoot>
+</template>
diff --git a/app/components/Edit/DesktopTodoDataSelect.vue b/app/components/Edit/DesktopTodoDataSelect.vue
index b8a90c9..82ccb51 100644
--- a/app/components/Edit/DesktopTodoDataSelect.vue
+++ b/app/components/Edit/DesktopTodoDataSelect.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 	import {
-		CollapsibleContent,
-		CollapsibleRoot,
-		CollapsibleTrigger,
 		RadioGroupItem,
 		RadioGroupRoot,
 		SplitterGroup,
@@ -12,6 +9,7 @@
 	import type { CreateTodoData, UUID } from "~/utils/types";
 	import CategorySelect from "../Utils/Label/CategorySelect.vue";
 	import TagSelect from "../Utils/Label/TagSelect.vue";
+	import DesktopSideBarElement from "./DesktopSideBarElement.vue";
 	import NoteSelect from "./NoteSelect.vue";
 	import TimePointSelect from "./Time/TimePointSelect.vue";
 	import TimeRangeSelect from "./Time/TimeRangeSelect.vue";
@@ -58,68 +56,54 @@
 			sizeUnit="px"
 		>
 			<div class="flex flex-col gap-2 mb-32">
-				<CollapsibleRoot :defaultOpen="true">
-					<CollapsibleTrigger class="text-muted-text text-lg cursor-pointer">
-						{{ t("categories") }}
-					</CollapsibleTrigger>
-					<CollapsibleContent>
-						<CategorySelect v-model:category="todoData.category" />
-					</CollapsibleContent>
-				</CollapsibleRoot>
+				<DesktopSideBarElement :title="t('categories')">
+					<CategorySelect v-model:category="todoData.category" />
+				</DesktopSideBarElement>
 
-				<CollapsibleRoot :defaultOpen="true">
-					<CollapsibleTrigger class="text-muted-text text-lg cursor-pointer">
-						{{ t("tags") }}
-					</CollapsibleTrigger>
-					<CollapsibleContent>
-						<TagSelect
-							v-model:tags="todoData.tags"
-							:category="todoData.category"
-						/>
-					</CollapsibleContent>
-				</CollapsibleRoot>
+				<DesktopSideBarElement :title="t('tags')">
+					<TagSelect
+						v-model:tags="todoData.tags"
+						:category="todoData.category"
+					/>
+				</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>
 
-				<CollapsibleRoot :defaultOpen="true">
-					<CollapsibleTrigger class="text-muted-text text-lg cursor-pointer">
-						{{ t("time") }}
-					</CollapsibleTrigger>
-					<CollapsibleContent class="flex flex-col gap-2">
-						<RadioGroupRoot v-model="selectedTimeType" class="h-10 flex">
-							<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>
-						<div>
-							<TimeRangeSelect
-								v-if="selectedTimeType === 'range'"
-								v-model:timeRange="timeRange"
-							/>
-							<TimeRecurringSelect
-								v-if="selectedTimeType === 'recurring'"
-								v-model:timeRecurring="timeRecurring"
-							/>
-							<TimePointSelect
-								v-if="selectedTimeType === 'point'"
-								v-model:timePoint="timePoint"
-							/>
-						</div>
-					</CollapsibleContent>
-				</CollapsibleRoot>
+					<div>
+						<TimeRangeSelect
+							v-if="selectedTimeType === 'range'"
+							v-model:timeRange="timeRange"
+						/>
+						<TimeRecurringSelect
+							v-if="selectedTimeType === 'recurring'"
+							v-model:timeRecurring="timeRecurring"
+						/>
+						<TimePointSelect
+							v-if="selectedTimeType === 'point'"
+							v-model:timePoint="timePoint"
+						/>
+					</div>
+				</DesktopSideBarElement>
 			</div>
 		</SplitterPanel>
 	</SplitterGroup>
-- 
2.51.2