refactor: run formatter

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

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils/style.js";
+	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 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",
+		'[&: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}

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

@@ -1,14 +1,14 @@
 <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";
+	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 let date: $$Props['date'];
+	export let month: $$Props['month'];
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -17,17 +17,17 @@
 	{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",
+		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",
+		'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",
+		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 		// Unavailable
-		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		'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",
+		'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}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,21 +1,21 @@
 <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";
+	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;
+	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",
+		buttonVariants({ variant: 'outline' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}

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

@@ -1,21 +1,21 @@
 <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";
+	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;
+	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",
+		buttonVariants({ variant: 'outline' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}

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

@@ -1,141 +1,137 @@
 <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";
-	
+	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";
-	
+
+	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"
+		'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 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
+		label: String(new Date().getFullYear() + i),
+		value: new Date().getFullYear() + i
 	}));
-	
+
 	$: defaultYear = placeholder
-	 ? {
-	   value: placeholder.year,
-	   label: String(placeholder.year)
-	  }
-	 : undefined;
-	
+		? {
+				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;
+		? {
+				value: placeholder.month,
+				label: monthFmt.format(placeholder.toDate(getLocalTimeZone()))
+			}
+		: undefined;
+
+	let className: $$Props['class'] = undefined;
 	export { className as class };
-   
-</script>
-	
+</script>
+
+<CalendarPrimitive.Root
 	{weekdayFormat}
-	{weekdayFormat}
+	class={cn('rounded-md border p-3', className)}
 	{...$$restProps}
 	on:keydown
 	let:months
 	let:weekdays
 	bind:value
 	bind:placeholder
-	bind:placeholder
+>
 	<Calendar.Header>
-	<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 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>
-	<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}
+		{#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}
-		{/each}
-	   </Calendar.GridBody>
-	  </Calendar.Grid>
 	</Calendar.Months>
-	</Calendar.Months>
+</CalendarPrimitive.Root>

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

@@ -1,16 +1,16 @@
-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";
+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,
@@ -26,5 +26,5 @@ export {
 	NextButton,
 	PrevButton,
 	//
-	Root as Calendar,
+	Root as Calendar
 };