feat: add option to renew API key (#1214)

frontend/src/lib/components/form/date-picker.svelte

@@ -31,19 +31,6 @@
 		return new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate());
 	}
 
-	$effect(() => {
-		if (calendarDisplayDate) {
-			const newExternalDate = calendarDisplayDate.toDate(getLocalTimeZone());
-			if (!value || value.getTime() !== newExternalDate.getTime()) {
-				value = newExternalDate;
-			}
-		} else {
-			if (value !== undefined) {
-				value = undefined;
-			}
-		}
-	});
-
 	$effect(() => {
 		if (value) {
 			const newInternalCalendarDate = dateToCalendarDate(value);
@@ -59,6 +46,17 @@
 
 	function handleCalendarInteraction(newDateValue?: DateValue) {
 		open = false;
+		calendarDisplayDate = newDateValue as CalendarDate | undefined;
+		if (calendarDisplayDate) {
+			const newExternalDate = calendarDisplayDate.toDate(getLocalTimeZone());
+			if (!value || value.getTime() !== newExternalDate.getTime()) {
+				value = newExternalDate;
+			}
+		} else {
+			if (value !== undefined) {
+				value = undefined;
+			}
+		}
 	}
 
 	const df = new DateFormatter(getLocale(), {
@@ -89,8 +87,7 @@
 		<Popover.Content class="w-auto p-0" align="start">
 			<Calendar
 				type="single"
-				bind:value={calendarDisplayDate}
-				onValueChange={handleCalendarInteraction}
+				bind:value={() => calendarDisplayDate, (newValue) => handleCalendarInteraction(newValue)}
 				initialFocus
 			/>
 		</Popover.Content>

frontend/src/lib/services/api-key-service.ts

@@ -13,6 +13,13 @@ export default class ApiKeyService extends APIService {
 		return res.data as ApiKeyResponse;
 	};
 
+	renew = async (id: string, expiresAt: Date): Promise<ApiKeyResponse> => {
+		const res = await this.api.post(`/api-keys/${id}/renew`, {
+			expiresAt
+		});
+		return res.data as ApiKeyResponse;
+	};
+
 	revoke = async (id: string): Promise<void> => {
 		await this.api.delete(`/api-keys/${id}`);
 	};