From 15d76ec82ffeb78dab67b8d71ca61db6d88380b6 Mon Sep 17 00:00:00 2001
From: tobinio <tobias.frischmann@proton.me>
Date: Fri, 22 May 2026 11:59:25 +0200
Subject: [PATCH] improve desktopTodo design

---
 app/components/Edit/DesktopTodoDataSelect.vue | 110 +++++++++++++-----
 app/components/Edit/TabedDataSelect.vue       |   5 +-
 app/components/Edit/Time/TimePointSelect.vue  |   2 +-
 .../Edit/Time/TimeRecurringSelect.vue         |   2 +-
 app/components/Edit/Time/WeekSelection.vue    |   4 +-
 app/components/Utils/Label/CategoryLabel.vue  |   2 +-
 app/components/Utils/Label/CategorySelect.vue |   2 +-
 i18n/locales/en.json                          |   6 +-
 8 files changed, 95 insertions(+), 38 deletions(-)

diff --git a/app/components/Edit/DesktopTodoDataSelect.vue b/app/components/Edit/DesktopTodoDataSelect.vue
index 252713d..dce101c 100644
--- a/app/components/Edit/DesktopTodoDataSelect.vue
+++ b/app/components/Edit/DesktopTodoDataSelect.vue
@@ -1,4 +1,11 @@
 <script setup lang="ts">
+	import {
+		CollapsibleContent,
+		CollapsibleRoot,
+		CollapsibleTrigger,
+	} from "reka-ui";
+	import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
+	import { RadioGroupItem, RadioGroupRoot } from "reka-ui";
 	import type { CreateTodoData, UUID } from "~/utils/types";
 	import CategorySelect from "../Utils/Label/CategorySelect.vue";
 	import TagSelect from "../Utils/Label/TagSelect.vue";
@@ -29,8 +36,8 @@
 </script>
 
 <template>
-	<div class="h-full flex gap-1">
-		<div class="h-full flex flex-col flex-1">
+	<SplitterGroup direction="horizontal" class="h-full flex gap-1">
+		<SplitterPanel class="h-full flex flex-col flex-1">
 			<TitleSelect v-model:title="todoData.title" />
 			<div class="relative flex-1 overflow-scroll py-1">
 				<NoteSelect v-model:note="todoData.note" />
@@ -38,32 +45,79 @@
 			<div class="flex h-10 gap-1">
 				<slot />
 			</div>
-		</div>
-		<div class="overflow-scroll">
-			<h2 class="text-muted-text text-lg">{{ t("categories") }}</h2>
-			<CategorySelect v-model:category="todoData.category" />
-			<h2 class="text-muted-text text-lg">{{ t("tags") }}</h2>
-			<TagSelect v-model:tags="todoData.tags" :category="todoData.category" />
+		</SplitterPanel>
+		<SplitterResizeHandle id="splitter-group-1-resize-handle-1" class="w-2" />
+		<SplitterPanel
+			class="data-[state=expanded]:pr-2 data-[state=expanded]:overflow-scroll!"
+			collapsible
+			:min-size="225"
+			:defaultSize="300"
+			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>
 
-			<select v-model="selectedTimeType">
-				<option value="range">{{ t("date-range") }} </option>
-				<option value="recurring">{{ t("date-recurring") }} </option>
-				<option value="point">{{ t("date-point") }} </option>
-			</select>
-			<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"
-				/>
+				<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>
+
+				<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>
-		</div>
-	</div>
+		</SplitterPanel>
+	</SplitterGroup>
 </template>
diff --git a/app/components/Edit/TabedDataSelect.vue b/app/components/Edit/TabedDataSelect.vue
index 16cd3c9..c1b3c68 100644
--- a/app/components/Edit/TabedDataSelect.vue
+++ b/app/components/Edit/TabedDataSelect.vue
@@ -85,7 +85,10 @@
 				<TagSelect v-model:tags="tags" :category="category" />
 			</TabsContent>
 
-			<TabsContent class="flex h-full flex-col justify-center" value="date">
+			<TabsContent
+				class="flex h-full flex-col justify-center pt-2"
+				value="date"
+			>
 				<TimeRangeSelect
 					v-if="selectedTimeType === 'range'"
 					v-model:timeRange="timeRange"
diff --git a/app/components/Edit/Time/TimePointSelect.vue b/app/components/Edit/Time/TimePointSelect.vue
index f09ec59..4539821 100644
--- a/app/components/Edit/Time/TimePointSelect.vue
+++ b/app/components/Edit/Time/TimePointSelect.vue
@@ -38,7 +38,7 @@
 
 <template>
 	<div class="flex h-full justify-center">
-		<div class="mt-2 flex gap-1 max-h-8 border border-secondary rounded">
+		<div class="flex gap-1 max-h-8 border border-secondary rounded">
 			<DateFieldRoot
 				:granularity="'minute'"
 				:hourCycle="24"
diff --git a/app/components/Edit/Time/TimeRecurringSelect.vue b/app/components/Edit/Time/TimeRecurringSelect.vue
index 8b60c7c..e9b793a 100644
--- a/app/components/Edit/Time/TimeRecurringSelect.vue
+++ b/app/components/Edit/Time/TimeRecurringSelect.vue
@@ -47,7 +47,7 @@
 </script>
 
 <template>
-	<div class="w-full h-full mt-2 flex flex-col gap-2">
+	<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"
diff --git a/app/components/Edit/Time/WeekSelection.vue b/app/components/Edit/Time/WeekSelection.vue
index 5cd5ec6..454fe72 100644
--- a/app/components/Edit/Time/WeekSelection.vue
+++ b/app/components/Edit/Time/WeekSelection.vue
@@ -33,13 +33,13 @@
 </script>
 
 <template>
-	<div class="flex h-10 border border-secondary rounded-md">
+	<div class="flex h-7 border border-secondary rounded">
 		<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-2 flex-1"
+			class="data-[first=false]:border-l border-secondary data-[selected=true]:bg-secondary flex cursor-pointer items-center justify-center p-1 flex-1"
 			@click="onSelectDay(index)"
 		>
 			{{ day }}
diff --git a/app/components/Utils/Label/CategoryLabel.vue b/app/components/Utils/Label/CategoryLabel.vue
index 6ff7f80..55fa6c3 100644
--- a/app/components/Utils/Label/CategoryLabel.vue
+++ b/app/components/Utils/Label/CategoryLabel.vue
@@ -18,7 +18,7 @@
 		class="cursor-pointer rounded text-nowrap transition-all flex justify-between data-selected:bg-secondary"
 		@click="emits('press')"
 	>
-		<span class="flex items-center gap-0.5">
+		<span class="flex-1 flex items-center gap-0.5">
 			<Icon
 				:style="{
           color: label.color,
diff --git a/app/components/Utils/Label/CategorySelect.vue b/app/components/Utils/Label/CategorySelect.vue
index 3dd0861..dbc5321 100644
--- a/app/components/Utils/Label/CategorySelect.vue
+++ b/app/components/Utils/Label/CategorySelect.vue
@@ -44,7 +44,7 @@
 				:count="categoryCount.get(category.uuid)"
 				:is-selected="isSelected(category)"
 				type="category"
-				class="mr-1 mb-1"
+				class="mr-1 mb-1 overflow-hidden"
 				@press="onPress(category.uuid)"
 			/>
 		</div>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4e3144a..92c17f5 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -21,9 +21,9 @@
 	},
 	"apiKeys": "API Keys",
 	"create": "Create",
-	"date-range": "Date Range",
-	"date-recurring": "Date Recurring",
-	"date-point": "Date Point",
+	"date-range": "Range",
+	"date-recurring": "Recurring",
+	"date-point": "Point",
 	"recurring-none": "None",
 	"recurring-daily": "Daily",
 	"recurring-weekly": "Weekly",
-- 
2.51.2