feat: api key authentication (#291)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Calendar } from '$lib/components/ui/calendar';
+	import * as Popover from '$lib/components/ui/popover';
+	import { cn } from '$lib/utils/style';
+	import {
+		CalendarDate,
+		DateFormatter,
+		getLocalTimeZone,
+		type DateValue
+	} from '@internationalized/date';
+	import CalendarIcon from 'lucide-svelte/icons/calendar';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { value = $bindable(), ...restProps }: HTMLAttributes<HTMLButtonElement> & { value: Date } =
+		$props();
+
+	let date: CalendarDate = $state(dateToCalendarDate(value));
+	let open = $state(false);
+
+	function dateToCalendarDate(date: Date) {
+		return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+	}
+
+	function onValueChange(newDate?: DateValue) {
+		if (!newDate) return;
+
+		value = newDate.toDate(getLocalTimeZone());
+		date = newDate as CalendarDate;
+		open = false;
+	}
+
+	const df = new DateFormatter('en-US', {
+		dateStyle: 'long'
+	});
+</script>
+
+<Popover.Root openFocus {open} onOpenChange={(o) => (open = o)}>
+	<Popover.Trigger asChild let:builder>
+		<Button
+			{...restProps}
+			variant="outline"
+			class={cn('w-full justify-start text-left font-normal', !value && 'text-muted-foreground')}
+			builders={[builder]}
+		>
+			<CalendarIcon class="mr-2 h-4 w-4" />
+			{date ? df.format(date.toDate(getLocalTimeZone())) : 'Select a date'}
+		</Button>
+	</Popover.Trigger>
+	<Popover.Content class="w-auto p-0" align="start">
+		<Calendar bind:value={date} initialFocus {onValueChange} />
+	</Popover.Content>
+</Popover.Root>

frontend/src/lib/components/form/form-input.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import DatePicker from '$lib/components/form/date-picker.svelte';
+	import { Input, type FormInputEvent } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import type { FormInput } from '$lib/utils/form-util';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { Input, type FormInputEvent } from '$lib/components/ui/input';
 
 	let {
 		input = $bindable(),
@@ -16,12 +17,12 @@
 		onInput,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
-		input?: FormInput<string | boolean | number>;
+		input?: FormInput<string | boolean | number | Date>;
 		label?: string;
 		description?: string;
 		placeholder?: string;
 		disabled?: boolean;
-		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox';
+		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'date';
 		onInput?: (e: FormInputEvent) => void;
 		children?: Snippet;
 	} = $props();
@@ -34,20 +35,24 @@
 		<Label class="mb-0" for={id}>{label}</Label>
 	{/if}
 	{#if description}
-		<p class="mt-1 text-xs text-muted-foreground">{description}</p>
+		<p class="text-muted-foreground mt-1 text-xs">{description}</p>
 	{/if}
 	<div class={label || description ? 'mt-2' : ''}>
 		{#if children}
 			{@render children()}
 		{:else if input}
-			<Input
-				{id}
-				{placeholder}
-				{type}
-				bind:value={input.value}
-				{disabled}
-				on:input={(e) => onInput?.(e)}
-			/>
+			{#if type === 'date'}
+				<DatePicker {id} bind:value={input.value as Date} />
+			{:else}
+				<Input
+					{id}
+					{placeholder}
+					{type}
+					bind:value={input.value}
+					{disabled}
+					on:input={(e) => onInput?.(e)}
+				/>
+			{/if}
 		{/if}
 		{#if input?.error}
 			<p class="mt-1 text-sm text-red-500">{input.error}</p>

frontend/src/lib/components/ui/calendar/calendar-cell.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.CellProps;
+
+	export let date: $$Props["date"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Cell
+	{date}
+	class={cn(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Cell>

frontend/src/lib/components/ui/calendar/calendar-day.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.DayProps;
+	type $$Events = CalendarPrimitive.DayEvents;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"h-9 w-9 p-0 font-normal ",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	{...$$restProps}
+	let:selected
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {selected} {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</CalendarPrimitive.Day>

frontend/src/lib/components/ui/calendar/calendar-grid-body.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.GridBodyProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridBody>

frontend/src/lib/components/ui/calendar/calendar-grid-head.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.GridHeadProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridHead>

frontend/src/lib/components/ui/calendar/calendar-grid-row.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.GridRowProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridRow>

frontend/src/lib/components/ui/calendar/calendar-grid.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.GridProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.Grid>

frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.HeadCellProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.HeadCell
+	class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.HeadCell>

frontend/src/lib/components/ui/calendar/calendar-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.HeaderProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Header
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Header>

frontend/src/lib/components/ui/calendar/calendar-heading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.HeadingProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Heading
+	let:headingValue
+	class={cn("text-sm font-medium", className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</CalendarPrimitive.Heading>

frontend/src/lib/components/ui/calendar/calendar-months.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

frontend/src/lib/components/ui/calendar/calendar-next-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.NextButtonProps;
+	type $$Events = CalendarPrimitive.NextButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronRight class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.NextButton>

frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = CalendarPrimitive.PrevButtonProps;
+	type $$Events = CalendarPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronLeft class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.PrevButton>

frontend/src/lib/components/ui/calendar/calendar.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import * as Calendar from "$lib/components/ui/calendar/index.js";
+	import * as Select from "$lib/components/ui/select/index.js";
+	import { cn } from "$lib/utils/style";
+	import {
+		DateFormatter,
+		getLocalTimeZone,
+		today
+	} from "@internationalized/date";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	
+	type $$Props = CalendarPrimitive.Props;
+	type $$Events = CalendarPrimitive.Events;
+	
+	export let value: $$Props["value"] = undefined;
+	export let placeholder: $$Props["placeholder"] = today(getLocalTimeZone());
+	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+	
+	const monthOptions = [
+	 "January",
+	 "February",
+	 "March",
+	 "April",
+	 "May",
+	 "June",
+	 "July",
+	 "August",
+	 "September",
+	 "October",
+	 "November",
+	 "December"
+	].map((month, i) => ({ value: i + 1, label: month }));
+	
+	const monthFmt = new DateFormatter("en-US", {
+	 month: "long"
+	});
+	
+	const yearOptions = Array.from({ length: 100 }, (_, i) => ({
+	 label: String(new Date().getFullYear() + i),
+	 value: new Date().getFullYear() + i
+	}));
+	
+	$: defaultYear = placeholder
+	 ? {
+	   value: placeholder.year,
+	   label: String(placeholder.year)
+	  }
+	 : undefined;
+	
+	$: defaultMonth = placeholder
+	 ? {
+	   value: placeholder.month,
+	   label: monthFmt.format(placeholder.toDate(getLocalTimeZone()))
+	  }
+	 : undefined;
+	
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+   
+</script>
+	
+   <CalendarPrimitive.Root
+	{weekdayFormat}
+	class={cn("rounded-md border p-3", className)}
+	{...$$restProps}
+	on:keydown
+	let:months
+	let:weekdays
+	bind:value
+	bind:placeholder
+   >
+	<Calendar.Header>
+	 <Calendar.Heading class="flex w-full items-center justify-between gap-2">
+	  <Select.Root
+	   selected={defaultMonth}
+	   items={monthOptions}
+	   onSelectedChange={(v) => {
+		if (!v || !placeholder) return;
+		if (v.value === placeholder?.month) return;
+		placeholder = placeholder.set({ month: v.value });
+	   }}
+	  >
+	   <Select.Trigger aria-label="Select month" class="w-[60%]">
+		<Select.Value placeholder="Select month" />
+	   </Select.Trigger>
+	   <Select.Content class="max-h-[200px] overflow-y-auto">
+		{#each monthOptions as { value, label }}
+		 <Select.Item {value} {label}>
+		  {label}
+		 </Select.Item>
+		{/each}
+	   </Select.Content>
+	  </Select.Root>
+	  <Select.Root
+	   selected={defaultYear}
+	   items={yearOptions}
+	   onSelectedChange={(v) => {
+		if (!v || !placeholder) return;
+		if (v.value === placeholder?.year) return;
+		placeholder = placeholder.set({ year: v.value });
+	   }}
+	  >
+	   <Select.Trigger aria-label="Select year" class="w-[40%]">
+		<Select.Value placeholder="Select year" />
+	   </Select.Trigger>
+	   <Select.Content class="max-h-[200px] overflow-y-auto">
+		{#each yearOptions as { value, label }}
+		 <Select.Item {value} {label}>
+		  {label}
+		 </Select.Item>
+		{/each}
+	   </Select.Content>
+	  </Select.Root>
+	 </Calendar.Heading>
+	</Calendar.Header>
+	<Calendar.Months>
+	 {#each months as month}
+	  <Calendar.Grid>
+	   <Calendar.GridHead>
+		<Calendar.GridRow class="flex">
+		 {#each weekdays as weekday}
+		  <Calendar.HeadCell>
+		   {weekday.slice(0, 2)}
+		  </Calendar.HeadCell>
+		 {/each}
+		</Calendar.GridRow>
+	   </Calendar.GridHead>
+	   <Calendar.GridBody>
+		{#each month.weeks as weekDates}
+		 <Calendar.GridRow class="mt-2 w-full">
+		  {#each weekDates as date}
+		   <Calendar.Cell {date}>
+			<Calendar.Day {date} month={month.value} />
+		   </Calendar.Cell>
+		  {/each}
+		 </Calendar.GridRow>
+		{/each}
+	   </Calendar.GridBody>
+	  </Calendar.Grid>
+	 {/each}
+	</Calendar.Months>

frontend/src/lib/components/ui/calendar/index.ts

@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};

frontend/src/lib/components/ui/dialog/dialog-content.svelte

@@ -4,10 +4,13 @@
 	import * as Dialog from './index.js';
 	import { cn, flyAndScale } from '$lib/utils/style.js';
 
-	type $$Props = DialogPrimitive.ContentProps;
+	type $$Props = DialogPrimitive.ContentProps & {
+		closeButton?: boolean;
+	}
 
 	let className: $$Props['class'] = undefined;
 	export let transition: $$Props['transition'] = flyAndScale;
+	export let closeButton : $$Props['closeButton'] = true;
 	export let transitionConfig: $$Props['transitionConfig'] = {
 		duration: 200
 	};
@@ -26,11 +29,13 @@
 		{...$$restProps}
 	>
 		<slot />
+		{#if closeButton}
 		<DialogPrimitive.Close
 			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 		>
 			<X class="h-4 w-4" />
 			<span class="sr-only">Close</span>
 		</DialogPrimitive.Close>
+		{/if}
 	</DialogPrimitive.Content>
 </Dialog.Portal>