From 472de991d5dd2d37bc1ea6792c56a4d9d883b118 Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Thu, 2 Apr 2026 10:42:16 +0200
Subject: [PATCH] improve ui for delivery start, end quick selection

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 frontend/src/routes/campaign/+page.svelte | 67 ++++++++++++++++++-----
 1 file changed, 52 insertions(+), 15 deletions(-)

diff --git a/frontend/src/routes/campaign/+page.svelte b/frontend/src/routes/campaign/+page.svelte
index 339be97..9c0c6ba 100644
--- a/frontend/src/routes/campaign/+page.svelte
+++ b/frontend/src/routes/campaign/+page.svelte
@@ -1707,13 +1707,32 @@
 									>
 										Delivery start
 									</DateTimeField>
-									<button
-										class="text-cta-blue hover:text-blue-700 dark:text-white dark:hover:text-gray-200 text-sm transition-colors duration-200"
-										on:click|preventDefault={() =>
-											(formValues.sendStartAt = new Date().toISOString())}
-									>
-										set to now
-									</button>
+									<div class="flex items-center gap-1">
+										<button
+											type="button"
+											class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 transition-colors duration-200"
+											on:click|preventDefault={() =>
+												(formValues.sendStartAt = new Date().toISOString())}
+										>
+											Now
+										</button>
+										<button
+											type="button"
+											class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 transition-colors duration-200"
+											on:click|preventDefault={() =>
+												(formValues.sendStartAt = new Date(Date.now() + 86400000).toISOString())}
+										>
+											+1 Day
+										</button>
+										<button
+											type="button"
+											class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 transition-colors duration-200"
+											on:click|preventDefault={() =>
+												(formValues.sendStartAt = new Date(Date.now() + 604800000).toISOString())}
+										>
+											+1 Week
+										</button>
+									</div>
 								</div>
 
 								{#if formValues.sendStartAt && !hasDynamicGroup}
@@ -1800,14 +1819,32 @@
 										Delivery end
 									</DateTimeField>
 									{#if spreadOption === SPREAD_MANUAL}
-										<button
-											class="text-cta-blue hover:text-blue-700 dark:text-white dark:hover:text-gray-200 text-sm transition-colors duration-200"
-											on:click|preventDefault={() => {
-												formValues.sendEndAt = new Date().toISOString();
-											}}
-										>
-											set to now
-										</button>
+										<div class="flex items-center gap-1">
+											<button
+												type="button"
+												class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 transition-colors duration-200"
+												on:click|preventDefault={() =>
+													(formValues.sendEndAt = new Date().toISOString())}
+											>
+												Now
+											</button>
+											<button
+												type="button"
+												class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 transition-colors duration-200"
+												on:click|preventDefault={() =>
+													(formValues.sendEndAt = new Date(Date.now() + 86400000).toISOString())}
+											>
+												+1 Day
+											</button>
+											<button
+												type="button"
+												class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 transition-colors duration-200"
+												on:click|preventDefault={() =>
+													(formValues.sendEndAt = new Date(Date.now() + 604800000).toISOString())}
+											>
+												+1 Week
+											</button>
+										</div>
 									{/if}
 								</div>
 							{:else if scheduleType === 'schedule'}