From 2677f6254d142f4dce5c9b194b181f90403d206e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 17:35:50 +0200
Subject: [PATCH] feat(reminders): highlight which preset or custom date is
 selected

---
 .../tasks/partials/reminder-detail.vue          | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 08969606..d908efd1 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -15,14 +15,23 @@
 							v-for="(p, k) in presets"
 							:key="k"
 							class="option-button"
+							:class="{'currently-active': p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo}"
 							@click="setReminderFromPreset(p, toggle)"
 						>
 							{{ formatReminder(p) }}
 						</SimpleButton>
-						<SimpleButton @click="showFormSwitch = 'relative'" class="option-button">
+						<SimpleButton 
+							@click="showFormSwitch = 'relative'" 
+							class="option-button"
+							:class="{'currently-active': modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
+						>
 							{{ $t('task.reminder.custom') }}
 						</SimpleButton>
-						<SimpleButton @click="showFormSwitch = 'absolute'" class="option-button">
+						<SimpleButton 
+							@click="showFormSwitch = 'absolute'" 
+							class="option-button"
+							:class="{'currently-active': modelValue?.relativeTo === null}"
+						>
 							{{ $t('task.reminder.dateAndTime') }}
 						</SimpleButton>
 					</div>
@@ -254,4 +263,8 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 	margin: .5rem;
 	width: calc(100% - 1rem);
 }
+
+.currently-active {
+	color: var(--primary);
+}
 </style>