From f2871b98db75c1abc5f3cb36b603f36c5616fa25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 7 Mar 2026 10:49:35 +0100
Subject: [PATCH] style: apply prettier formatting across frontend components
 and pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/header/header.svelte   |   1 -
 .../src/lib/components/ui/badge/badge.svelte  |  75 ++++---
 .../ui/calendar/calendar-caption.svelte       | 118 +++++-----
 .../ui/calendar/calendar-cell.svelte          |  26 +--
 .../ui/calendar/calendar-day.svelte           |  58 ++---
 .../ui/calendar/calendar-grid-body.svelte     |  14 +-
 .../ui/calendar/calendar-grid-head.svelte     |  14 +-
 .../ui/calendar/calendar-grid-row.svelte      |  14 +-
 .../ui/calendar/calendar-grid.svelte          |  20 +-
 .../ui/calendar/calendar-head-cell.svelte     |  26 +--
 .../ui/calendar/calendar-header.svelte        |  26 +--
 .../ui/calendar/calendar-heading.svelte       |  20 +-
 .../ui/calendar/calendar-month-select.svelte  |  82 +++----
 .../ui/calendar/calendar-month.svelte         |  18 +-
 .../ui/calendar/calendar-months.svelte        |  24 +-
 .../ui/calendar/calendar-nav.svelte           |  24 +-
 .../ui/calendar/calendar-next-button.svelte   |  44 ++--
 .../ui/calendar/calendar-prev-button.svelte   |  44 ++--
 .../ui/calendar/calendar-year-select.svelte   |  80 +++----
 .../components/ui/calendar/calendar.svelte    | 206 +++++++++---------
 .../src/lib/components/ui/calendar/index.ts   |  38 ++--
 .../src/lib/components/ui/popover/index.ts    |  22 +-
 .../ui/popover/popover-close.svelte           |   4 +-
 .../ui/popover/popover-content.svelte         |  50 ++---
 .../ui/popover/popover-portal.svelte          |   4 +-
 .../ui/popover/popover-trigger.svelte         |  22 +-
 .../lib/components/ui/popover/popover.svelte  |   4 +-
 .../frontend/src/routes/admin/+layout.svelte  |   6 +-
 .../admin/articles/[id]/+page.server.ts       |   5 +-
 .../routes/admin/articles/[id]/+page.svelte   |  30 ++-
 .../routes/admin/articles/new/+page.svelte    |  41 +++-
 .../src/routes/admin/users/+page.svelte       |  56 +++--
 .../src/routes/admin/users/[id]/+page.svelte  |  22 +-
 .../src/routes/admin/videos/[id]/+page.svelte |  37 +++-
 .../src/routes/admin/videos/new/+page.svelte  |  20 +-
 35 files changed, 706 insertions(+), 589 deletions(-)

diff --git a/packages/frontend/src/lib/components/header/header.svelte b/packages/frontend/src/lib/components/header/header.svelte
index 0c3e0ce..b6d1ed0 100644
--- a/packages/frontend/src/lib/components/header/header.svelte
+++ b/packages/frontend/src/lib/components/header/header.svelte
@@ -320,6 +320,5 @@
         {/if}
       </div>
     </div>
-
   </div>
 </div>
diff --git a/packages/frontend/src/lib/components/ui/badge/badge.svelte b/packages/frontend/src/lib/components/ui/badge/badge.svelte
index e3164ba..80c63d6 100644
--- a/packages/frontend/src/lib/components/ui/badge/badge.svelte
+++ b/packages/frontend/src/lib/components/ui/badge/badge.svelte
@@ -1,50 +1,49 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+  import { type VariantProps, tv } from "tailwind-variants";
 
-	export const badgeVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
-		variants: {
-			variant: {
-				default:
-					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
-				secondary:
-					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
-				destructive:
-					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
-				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
+  export const badgeVariants = tv({
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+        destructive:
+          "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  });
 
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+  export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		href,
-		class: className,
-		variant = "default",
-		children,
-		...restProps
-	}: WithElementRef<HTMLAnchorAttributes> & {
-		variant?: BadgeVariant;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = "default",
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+  } = $props();
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
-	bind:this={ref}
-	data-slot="badge"
-	{href}
-	class={cn(badgeVariants({ variant }), className)}
-	{...restProps}
+  this={href ? "a" : "span"}
+  bind:this={ref}
+  data-slot="badge"
+  {href}
+  class={cn(badgeVariants({ variant }), className)}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </svelte:element>
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-caption.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-caption.svelte
index 5c93037..c541f3d 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-caption.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-caption.svelte
@@ -1,76 +1,76 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import type Calendar from "./calendar.svelte";
-	import CalendarMonthSelect from "./calendar-month-select.svelte";
-	import CalendarYearSelect from "./calendar-year-select.svelte";
-	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+  import type { ComponentProps } from "svelte";
+  import type Calendar from "./calendar.svelte";
+  import CalendarMonthSelect from "./calendar-month-select.svelte";
+  import CalendarYearSelect from "./calendar-year-select.svelte";
+  import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
 
-	let {
-		captionLayout,
-		months,
-		monthFormat,
-		years,
-		yearFormat,
-		month,
-		locale,
-		placeholder = $bindable(),
-		monthIndex = 0,
-	}: {
-		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
-		months: ComponentProps<typeof CalendarMonthSelect>["months"];
-		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
-		years: ComponentProps<typeof CalendarYearSelect>["years"];
-		yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
-		month: DateValue;
-		placeholder: DateValue | undefined;
-		locale: string;
-		monthIndex: number;
-	} = $props();
+  let {
+    captionLayout,
+    months,
+    monthFormat,
+    years,
+    yearFormat,
+    month,
+    locale,
+    placeholder = $bindable(),
+    monthIndex = 0,
+  }: {
+    captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+    months: ComponentProps<typeof CalendarMonthSelect>["months"];
+    monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+    years: ComponentProps<typeof CalendarYearSelect>["years"];
+    yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+    month: DateValue;
+    placeholder: DateValue | undefined;
+    locale: string;
+    monthIndex: number;
+  } = $props();
 
-	function formatYear(date: DateValue) {
-		const dateObj = date.toDate(getLocalTimeZone());
-		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
-		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
-	}
+  function formatYear(date: DateValue) {
+    const dateObj = date.toDate(getLocalTimeZone());
+    if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+    return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+  }
 
-	function formatMonth(date: DateValue) {
-		const dateObj = date.toDate(getLocalTimeZone());
-		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
-		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
-	}
+  function formatMonth(date: DateValue) {
+    const dateObj = date.toDate(getLocalTimeZone());
+    if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+    return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+  }
 </script>
 
 {#snippet MonthSelect()}
-	<CalendarMonthSelect
-		{months}
-		{monthFormat}
-		value={month.month}
-		onchange={(e) => {
-			if (!placeholder) return;
-			const v = Number.parseInt(e.currentTarget.value);
-			const newPlaceholder = placeholder.set({ month: v });
-			placeholder = newPlaceholder.subtract({ months: monthIndex });
-		}}
-	/>
+  <CalendarMonthSelect
+    {months}
+    {monthFormat}
+    value={month.month}
+    onchange={(e) => {
+      if (!placeholder) return;
+      const v = Number.parseInt(e.currentTarget.value);
+      const newPlaceholder = placeholder.set({ month: v });
+      placeholder = newPlaceholder.subtract({ months: monthIndex });
+    }}
+  />
 {/snippet}
 
 {#snippet YearSelect()}
-	<CalendarYearSelect {years} {yearFormat} value={month.year} />
+  <CalendarYearSelect {years} {yearFormat} value={month.year} />
 {/snippet}
 
 {#if captionLayout === "dropdown"}
-	{@render MonthSelect()}
-	{@render YearSelect()}
+  {@render MonthSelect()}
+  {@render YearSelect()}
 {:else if captionLayout === "dropdown-months"}
-	{@render MonthSelect()}
-	{#if placeholder}
-		{formatYear(placeholder)}
-	{/if}
+  {@render MonthSelect()}
+  {#if placeholder}
+    {formatYear(placeholder)}
+  {/if}
 {:else if captionLayout === "dropdown-years"}
-	{#if placeholder}
-		{formatMonth(placeholder)}
-	{/if}
-	{@render YearSelect()}
+  {#if placeholder}
+    {formatMonth(placeholder)}
+  {/if}
+  {@render YearSelect()}
 {:else}
-	{formatMonth(month)} {formatYear(month)}
+  {formatMonth(month)} {formatYear(month)}
 {/if}
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-cell.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
index 4cdb548..7d872d6 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.CellProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.CellProps = $props();
 </script>
 
 <CalendarPrimitive.Cell
-	bind:ref
-	class={cn(
-		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
-		className
-	)}
-	{...restProps}
+  bind:ref
+  class={cn(
+    "relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
+    className,
+  )}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-day.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-day.svelte
index 19d7bde..e1c0dde 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-day.svelte
@@ -1,35 +1,35 @@
 <script lang="ts">
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { buttonVariants } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.DayProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.DayProps = $props();
 </script>
 
 <CalendarPrimitive.Day
-	bind:ref
-	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
-		"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
-		// Outside months
-		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
-		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		// Unavailable
-		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
-		// hover
-		"dark:hover:text-accent-foreground",
-		// focus
-		"focus:border-ring focus:ring-ring/50 focus:relative",
-		// inner spans
-		"[&>span]:text-xs [&>span]:opacity-70",
-		className
-	)}
-	{...restProps}
+  bind:ref
+  class={cn(
+    buttonVariants({ variant: "ghost" }),
+    "flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
+    "[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+    "data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
+    // Outside months
+    "[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+    // Disabled
+    "data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    // Unavailable
+    "data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+    // hover
+    "dark:hover:text-accent-foreground",
+    // focus
+    "focus:border-ring focus:ring-ring/50 focus:relative",
+    // inner spans
+    "[&>span]:text-xs [&>span]:opacity-70",
+    className,
+  )}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-grid-body.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-grid-body.svelte
index 8cd86de..ecbbbd7 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-grid-body.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.GridBodyProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridBodyProps = $props();
 </script>
 
 <CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-grid-head.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-grid-head.svelte
index 333edc4..b195f74 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-grid-head.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.GridHeadProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridHeadProps = $props();
 </script>
 
 <CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-grid-row.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-grid-row.svelte
index 9032236..ec9c978 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-grid-row.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.GridRowProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridRowProps = $props();
 </script>
 
 <CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-grid.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-grid.svelte
index e0c8627..80a53e9 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.GridProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridProps = $props();
 </script>
 
 <CalendarPrimitive.Grid
-	bind:ref
-	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
-	{...restProps}
+  bind:ref
+  class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
index 131807e..7919c72 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.HeadCellProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeadCellProps = $props();
 </script>
 
 <CalendarPrimitive.HeadCell
-	bind:ref
-	class={cn(
-		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
-		className
-	)}
-	{...restProps}
+  bind:ref
+  class={cn(
+    "text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+    className,
+  )}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-header.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-header.svelte
index c39e955..bd4920d 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-header.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.HeaderProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeaderProps = $props();
 </script>
 
 <CalendarPrimitive.Header
-	bind:ref
-	class={cn(
-		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-		className
-	)}
-	{...restProps}
+  bind:ref
+  class={cn(
+    "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+    className,
+  )}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-heading.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-heading.svelte
index a9b9810..7d995e1 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/packages/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.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: CalendarPrimitive.HeadingProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeadingProps = $props();
 </script>
 
 <CalendarPrimitive.Heading
-	bind:ref
-	class={cn("px-(--cell-size) text-sm font-medium", className)}
-	{...restProps}
+  bind:ref
+  class={cn("px-(--cell-size) text-sm font-medium", className)}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte
index 664afab..4a1aa8d 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -1,48 +1,48 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		value,
-		onchange,
-		...restProps
-	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    onchange,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
 </script>
 
 <span
-	class={cn(
-		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
-		className
-	)}
+  class={cn(
+    "has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+    className,
+  )}
 >
-	<CalendarPrimitive.MonthSelect
-		bind:ref
-		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
-		{...restProps}
-	>
-		{#snippet child({ props, monthItems, selectedMonthItem })}
-			<select {...props} {value} {onchange}>
-				{#each monthItems as monthItem (monthItem.value)}
-					<option
-						value={monthItem.value}
-						selected={value !== undefined
-							? monthItem.value === value
-							: monthItem.value === selectedMonthItem.value}
-					>
-						{monthItem.label}
-					</option>
-				{/each}
-			</select>
-			<span
-				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
-				aria-hidden="true"
-			>
-				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
-				<ChevronDownIcon class="size-4" />
-			</span>
-		{/snippet}
-	</CalendarPrimitive.MonthSelect>
+  <CalendarPrimitive.MonthSelect
+    bind:ref
+    class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+    {...restProps}
+  >
+    {#snippet child({ props, monthItems, selectedMonthItem })}
+      <select {...props} {value} {onchange}>
+        {#each monthItems as monthItem (monthItem.value)}
+          <option
+            value={monthItem.value}
+            selected={value !== undefined
+              ? monthItem.value === value
+              : monthItem.value === selectedMonthItem.value}
+          >
+            {monthItem.label}
+          </option>
+        {/each}
+      </select>
+      <span
+        class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+        aria-hidden="true"
+      >
+        {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+        <ChevronDownIcon class="size-4" />
+      </span>
+    {/snippet}
+  </CalendarPrimitive.MonthSelect>
 </span>
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-month.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-month.svelte
index e747fae..17358d4 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-month.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-month.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { type WithElementRef, cn } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { type WithElementRef, cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
 <div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
-	{@render children?.()}
+  {@render children?.()}
 </div>
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-months.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-months.svelte
index f717a9d..e78cfd0 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-months.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-months.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	bind:this={ref}
-	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
-	{...restProps}
+  bind:this={ref}
+  class={cn("relative flex flex-col gap-4 md:flex-row", className)}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-nav.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-nav.svelte
index 27f33d7..336e8e4 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-nav.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-nav.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
 <nav
-	{...restProps}
-	bind:this={ref}
-	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+  {...restProps}
+  bind:this={ref}
+  class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
 >
-	{@render children?.()}
+  {@render children?.()}
 </nav>
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte
index 5c5a78d..568f4b8 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		variant = "ghost",
-		...restProps
-	}: CalendarPrimitive.NextButtonProps & {
-		variant?: ButtonVariant;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "ghost",
+    ...restProps
+  }: CalendarPrimitive.NextButtonProps & {
+    variant?: ButtonVariant;
+  } = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronRightIcon class="size-4" />
+  <ChevronRightIcon class="size-4" />
 {/snippet}
 
 <CalendarPrimitive.NextButton
-	bind:ref
-	class={cn(
-		buttonVariants({ variant }),
-		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
-		className
-	)}
-	children={children || Fallback}
-	{...restProps}
+  bind:ref
+  class={cn(
+    buttonVariants({ variant }),
+    "size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+    className,
+  )}
+  children={children || Fallback}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte
index 33cfd63..9909b00 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+  import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		variant = "ghost",
-		...restProps
-	}: CalendarPrimitive.PrevButtonProps & {
-		variant?: ButtonVariant;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "ghost",
+    ...restProps
+  }: CalendarPrimitive.PrevButtonProps & {
+    variant?: ButtonVariant;
+  } = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class="size-4" />
+  <ChevronLeftIcon class="size-4" />
 {/snippet}
 
 <CalendarPrimitive.PrevButton
-	bind:ref
-	class={cn(
-		buttonVariants({ variant }),
-		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
-		className
-	)}
-	children={children || Fallback}
-	{...restProps}
+  bind:ref
+  class={cn(
+    buttonVariants({ variant }),
+    "size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+    className,
+  )}
+  children={children || Fallback}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte
index 33cc961..06e017a 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -1,47 +1,47 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		value,
-		...restProps
-	}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
 </script>
 
 <span
-	class={cn(
-		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
-		className
-	)}
+  class={cn(
+    "has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+    className,
+  )}
 >
-	<CalendarPrimitive.YearSelect
-		bind:ref
-		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
-		{...restProps}
-	>
-		{#snippet child({ props, yearItems, selectedYearItem })}
-			<select {...props} {value}>
-				{#each yearItems as yearItem (yearItem.value)}
-					<option
-						value={yearItem.value}
-						selected={value !== undefined
-							? yearItem.value === value
-							: yearItem.value === selectedYearItem.value}
-					>
-						{yearItem.label}
-					</option>
-				{/each}
-			</select>
-			<span
-				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
-				aria-hidden="true"
-			>
-				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
-				<ChevronDownIcon class="size-4" />
-			</span>
-		{/snippet}
-	</CalendarPrimitive.YearSelect>
+  <CalendarPrimitive.YearSelect
+    bind:ref
+    class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+    {...restProps}
+  >
+    {#snippet child({ props, yearItems, selectedYearItem })}
+      <select {...props} {value}>
+        {#each yearItems as yearItem (yearItem.value)}
+          <option
+            value={yearItem.value}
+            selected={value !== undefined
+              ? yearItem.value === value
+              : yearItem.value === selectedYearItem.value}
+          >
+            {yearItem.label}
+          </option>
+        {/each}
+      </select>
+      <span
+        class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+        aria-hidden="true"
+      >
+        {yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+        <ChevronDownIcon class="size-4" />
+      </span>
+    {/snippet}
+  </CalendarPrimitive.YearSelect>
 </span>
diff --git a/packages/frontend/src/lib/components/ui/calendar/calendar.svelte b/packages/frontend/src/lib/components/ui/calendar/calendar.svelte
index 29b6fff..0f842b0 100644
--- a/packages/frontend/src/lib/components/ui/calendar/calendar.svelte
+++ b/packages/frontend/src/lib/components/ui/calendar/calendar.svelte
@@ -1,42 +1,42 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import * as Calendar from "./index.js";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import type { ButtonVariant } from "../button/button.svelte";
-	import { isEqualMonth, type DateValue } from "@internationalized/date";
-	import type { Snippet } from "svelte";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import * as Calendar from "./index.js";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import type { ButtonVariant } from "../button/button.svelte";
+  import { isEqualMonth, type DateValue } from "@internationalized/date";
+  import type { Snippet } from "svelte";
 
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		placeholder = $bindable(),
-		class: className,
-		weekdayFormat = "short",
-		buttonVariant = "ghost",
-		captionLayout = "label",
-		locale = "en-US",
-		months: monthsProp,
-		years,
-		monthFormat: monthFormatProp,
-		yearFormat = "numeric",
-		day,
-		disableDaysOutsideMonth = false,
-		...restProps
-	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
-		buttonVariant?: ButtonVariant;
-		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
-		months?: CalendarPrimitive.MonthSelectProps["months"];
-		years?: CalendarPrimitive.YearSelectProps["years"];
-		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
-		yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
-		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    placeholder = $bindable(),
+    class: className,
+    weekdayFormat = "short",
+    buttonVariant = "ghost",
+    captionLayout = "label",
+    locale = "en-US",
+    months: monthsProp,
+    years,
+    monthFormat: monthFormatProp,
+    yearFormat = "numeric",
+    day,
+    disableDaysOutsideMonth = false,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+    months?: CalendarPrimitive.MonthSelectProps["months"];
+    years?: CalendarPrimitive.YearSelectProps["years"];
+    monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+    yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+    day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+  } = $props();
 
-	const monthFormat = $derived.by(() => {
-		if (monthFormatProp) return monthFormatProp;
-		if (captionLayout.startsWith("dropdown")) return "short";
-		return "long";
-	});
+  const monthFormat = $derived.by(() => {
+    if (monthFormatProp) return monthFormatProp;
+    if (captionLayout.startsWith("dropdown")) return "short";
+    return "long";
+  });
 </script>
 
 <!--
@@ -44,72 +44,72 @@ Discriminated Unions + Destructing (required for bindable) do not
 get along, so we shut typescript up by casting `value` to `never`.
 -->
 <CalendarPrimitive.Root
-	bind:value={value as never}
-	bind:ref
-	bind:placeholder
-	{weekdayFormat}
-	{disableDaysOutsideMonth}
-	class={cn(
-		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-		className
-	)}
-	{locale}
-	{monthFormat}
-	{yearFormat}
-	{...restProps}
+  bind:value={value as never}
+  bind:ref
+  bind:placeholder
+  {weekdayFormat}
+  {disableDaysOutsideMonth}
+  class={cn(
+    "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+    className,
+  )}
+  {locale}
+  {monthFormat}
+  {yearFormat}
+  {...restProps}
 >
-	{#snippet children({ months, weekdays })}
-		<Calendar.Months>
-			<Calendar.Nav>
-				<Calendar.PrevButton variant={buttonVariant} />
-				<Calendar.NextButton variant={buttonVariant} />
-			</Calendar.Nav>
-			{#each months as month, monthIndex (month)}
-				<Calendar.Month>
-					<Calendar.Header>
-						<Calendar.Caption
-							{captionLayout}
-							months={monthsProp}
-							{monthFormat}
-							{years}
-							{yearFormat}
-							month={month.value}
-							bind:placeholder
-							{locale}
-							{monthIndex}
-						/>
-					</Calendar.Header>
-					<Calendar.Grid>
-						<Calendar.GridHead>
-							<Calendar.GridRow class="select-none">
-								{#each weekdays as weekday (weekday)}
-									<Calendar.HeadCell>
-										{weekday.slice(0, 2)}
-									</Calendar.HeadCell>
-								{/each}
-							</Calendar.GridRow>
-						</Calendar.GridHead>
-						<Calendar.GridBody>
-							{#each month.weeks as weekDates (weekDates)}
-								<Calendar.GridRow class="mt-2 w-full">
-									{#each weekDates as date (date)}
-										<Calendar.Cell {date} month={month.value}>
-											{#if day}
-												{@render day({
-													day: date,
-													outsideMonth: !isEqualMonth(date, month.value),
-												})}
-											{:else}
-												<Calendar.Day />
-											{/if}
-										</Calendar.Cell>
-									{/each}
-								</Calendar.GridRow>
-							{/each}
-						</Calendar.GridBody>
-					</Calendar.Grid>
-				</Calendar.Month>
-			{/each}
-		</Calendar.Months>
-	{/snippet}
+  {#snippet children({ months, weekdays })}
+    <Calendar.Months>
+      <Calendar.Nav>
+        <Calendar.PrevButton variant={buttonVariant} />
+        <Calendar.NextButton variant={buttonVariant} />
+      </Calendar.Nav>
+      {#each months as month, monthIndex (month)}
+        <Calendar.Month>
+          <Calendar.Header>
+            <Calendar.Caption
+              {captionLayout}
+              months={monthsProp}
+              {monthFormat}
+              {years}
+              {yearFormat}
+              month={month.value}
+              bind:placeholder
+              {locale}
+              {monthIndex}
+            />
+          </Calendar.Header>
+          <Calendar.Grid>
+            <Calendar.GridHead>
+              <Calendar.GridRow class="select-none">
+                {#each weekdays as weekday (weekday)}
+                  <Calendar.HeadCell>
+                    {weekday.slice(0, 2)}
+                  </Calendar.HeadCell>
+                {/each}
+              </Calendar.GridRow>
+            </Calendar.GridHead>
+            <Calendar.GridBody>
+              {#each month.weeks as weekDates (weekDates)}
+                <Calendar.GridRow class="mt-2 w-full">
+                  {#each weekDates as date (date)}
+                    <Calendar.Cell {date} month={month.value}>
+                      {#if day}
+                        {@render day({
+                          day: date,
+                          outsideMonth: !isEqualMonth(date, month.value),
+                        })}
+                      {:else}
+                        <Calendar.Day />
+                      {/if}
+                    </Calendar.Cell>
+                  {/each}
+                </Calendar.GridRow>
+              {/each}
+            </Calendar.GridBody>
+          </Calendar.Grid>
+        </Calendar.Month>
+      {/each}
+    </Calendar.Months>
+  {/snippet}
 </CalendarPrimitive.Root>
diff --git a/packages/frontend/src/lib/components/ui/calendar/index.ts b/packages/frontend/src/lib/components/ui/calendar/index.ts
index f3a16d2..8347a54 100644
--- a/packages/frontend/src/lib/components/ui/calendar/index.ts
+++ b/packages/frontend/src/lib/components/ui/calendar/index.ts
@@ -18,23 +18,23 @@ import Nav from "./calendar-nav.svelte";
 import Caption from "./calendar-caption.svelte";
 
 export {
-	Day,
-	Cell,
-	Grid,
-	Header,
-	Months,
-	GridRow,
-	Heading,
-	GridBody,
-	GridHead,
-	HeadCell,
-	NextButton,
-	PrevButton,
-	Nav,
-	Month,
-	YearSelect,
-	MonthSelect,
-	Caption,
-	//
-	Root as Calendar,
+  Day,
+  Cell,
+  Grid,
+  Header,
+  Months,
+  GridRow,
+  Heading,
+  GridBody,
+  GridHead,
+  HeadCell,
+  NextButton,
+  PrevButton,
+  Nav,
+  Month,
+  YearSelect,
+  MonthSelect,
+  Caption,
+  //
+  Root as Calendar,
 };
diff --git a/packages/frontend/src/lib/components/ui/popover/index.ts b/packages/frontend/src/lib/components/ui/popover/index.ts
index b79d12e..5fb2ee9 100644
--- a/packages/frontend/src/lib/components/ui/popover/index.ts
+++ b/packages/frontend/src/lib/components/ui/popover/index.ts
@@ -5,15 +5,15 @@ import Trigger from "./popover-trigger.svelte";
 import Portal from "./popover-portal.svelte";
 
 export {
-	Root,
-	Content,
-	Trigger,
-	Close,
-	Portal,
-	//
-	Root as Popover,
-	Content as PopoverContent,
-	Trigger as PopoverTrigger,
-	Close as PopoverClose,
-	Portal as PopoverPortal,
+  Root,
+  Content,
+  Trigger,
+  Close,
+  Portal,
+  //
+  Root as Popover,
+  Content as PopoverContent,
+  Trigger as PopoverTrigger,
+  Close as PopoverClose,
+  Portal as PopoverPortal,
 };
diff --git a/packages/frontend/src/lib/components/ui/popover/popover-close.svelte b/packages/frontend/src/lib/components/ui/popover/popover-close.svelte
index c360925..fd2c882 100644
--- a/packages/frontend/src/lib/components/ui/popover/popover-close.svelte
+++ b/packages/frontend/src/lib/components/ui/popover/popover-close.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
+  import { Popover as PopoverPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+  let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
 </script>
 
 <PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
diff --git a/packages/frontend/src/lib/components/ui/popover/popover-content.svelte b/packages/frontend/src/lib/components/ui/popover/popover-content.svelte
index 3d79f3c..3d867e2 100644
--- a/packages/frontend/src/lib/components/ui/popover/popover-content.svelte
+++ b/packages/frontend/src/lib/components/ui/popover/popover-content.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
-	import PopoverPortal from "./popover-portal.svelte";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
+  import { Popover as PopoverPrimitive } from "bits-ui";
+  import PopoverPortal from "./popover-portal.svelte";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import type { ComponentProps } from "svelte";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		sideOffset = 4,
-		align = "center",
-		portalProps,
-		...restProps
-	}: PopoverPrimitive.ContentProps & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    align = "center",
+    portalProps,
+    ...restProps
+  }: PopoverPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+  } = $props();
 </script>
 
 <PopoverPortal {...portalProps}>
-	<PopoverPrimitive.Content
-		bind:ref
-		data-slot="popover-content"
-		{sideOffset}
-		{align}
-		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-			className
-		)}
-		{...restProps}
-	/>
+  <PopoverPrimitive.Content
+    bind:ref
+    data-slot="popover-content"
+    {sideOffset}
+    {align}
+    class={cn(
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+      className,
+    )}
+    {...restProps}
+  />
 </PopoverPortal>
diff --git a/packages/frontend/src/lib/components/ui/popover/popover-portal.svelte b/packages/frontend/src/lib/components/ui/popover/popover-portal.svelte
index dd8265f..8115718 100644
--- a/packages/frontend/src/lib/components/ui/popover/popover-portal.svelte
+++ b/packages/frontend/src/lib/components/ui/popover/popover-portal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
+  import { Popover as PopoverPrimitive } from "bits-ui";
 
-	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+  let { ...restProps }: PopoverPrimitive.PortalProps = $props();
 </script>
 
 <PopoverPrimitive.Portal {...restProps} />
diff --git a/packages/frontend/src/lib/components/ui/popover/popover-trigger.svelte b/packages/frontend/src/lib/components/ui/popover/popover-trigger.svelte
index 586323c..a58180b 100644
--- a/packages/frontend/src/lib/components/ui/popover/popover-trigger.svelte
+++ b/packages/frontend/src/lib/components/ui/popover/popover-trigger.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { Popover as PopoverPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+  import { Popover as PopoverPrimitive } from "bits-ui";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: PopoverPrimitive.TriggerProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: PopoverPrimitive.TriggerProps = $props();
 </script>
 
 <PopoverPrimitive.Trigger
-	bind:ref
-	data-slot="popover-trigger"
-	class={cn("", className)}
-	{...restProps}
+  bind:ref
+  data-slot="popover-trigger"
+  class={cn("", className)}
+  {...restProps}
 />
diff --git a/packages/frontend/src/lib/components/ui/popover/popover.svelte b/packages/frontend/src/lib/components/ui/popover/popover.svelte
index 6b1aa5f..b485e41 100644
--- a/packages/frontend/src/lib/components/ui/popover/popover.svelte
+++ b/packages/frontend/src/lib/components/ui/popover/popover.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
+  import { Popover as PopoverPrimitive } from "bits-ui";
 
-	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+  let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
 </script>
 
 <PopoverPrimitive.Root bind:open {...restProps} />
diff --git a/packages/frontend/src/routes/admin/+layout.svelte b/packages/frontend/src/routes/admin/+layout.svelte
index 9db41b8..ae1e628 100644
--- a/packages/frontend/src/routes/admin/+layout.svelte
+++ b/packages/frontend/src/routes/admin/+layout.svelte
@@ -17,10 +17,12 @@
 
 <div class="min-h-screen bg-background">
   <div class="container mx-auto px-4">
-
     <!-- Mobile top nav -->
     <div class="lg:hidden flex items-center gap-2 py-3 border-b border-border/40">
-      <a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2">
+      <a
+        href="/"
+        class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2"
+      >
         {$_("admin.nav.back_mobile")}
       </a>
       {#each navLinks as link (link.href)}
diff --git a/packages/frontend/src/routes/admin/articles/[id]/+page.server.ts b/packages/frontend/src/routes/admin/articles/[id]/+page.server.ts
index 1afe111..be94032 100644
--- a/packages/frontend/src/routes/admin/articles/[id]/+page.server.ts
+++ b/packages/frontend/src/routes/admin/articles/[id]/+page.server.ts
@@ -5,7 +5,10 @@ export async function load({ params, fetch, cookies }) {
   const token = cookies.get("session_token") || "";
   const [articles, modelsResult] = await Promise.all([
     adminListArticles(fetch, token).catch(() => []),
-    adminListUsers({ role: "model", limit: 200 }, fetch, token).catch(() => ({ items: [], total: 0 })),
+    adminListUsers({ role: "model", limit: 200 }, fetch, token).catch(() => ({
+      items: [],
+      total: 0,
+    })),
   ]);
   const article = articles.find((a) => a.id === params.id);
   if (!article) throw error(404, "Article not found");
diff --git a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
index 9068557..99ab688 100644
--- a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
@@ -107,13 +107,13 @@
           <button
             type="button"
             class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "write")}
-          >{$_("admin.common.write")}</button>
+            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
+          >
           <button
             type="button"
             class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "preview")}
-          >{$_("admin.common.preview")}</button>
+            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
+          >
         </div>
       </div>
       <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
@@ -127,7 +127,9 @@
           {#if preview}
             {@html preview}
           {:else}
-            <p class="text-muted-foreground italic text-sm">{$_("admin.article_form.preview_placeholder")}</p>
+            <p class="text-muted-foreground italic text-sm">
+              {$_("admin.article_form.preview_placeholder")}
+            </p>
           {/if}
         </div>
       </div>
@@ -152,7 +154,11 @@
         <SelectTrigger class="w-full">
           {#if selectedAuthor}
             {#if selectedAuthor.avatar}
-              <img src={getAssetUrl(selectedAuthor.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
+              <img
+                src={getAssetUrl(selectedAuthor.avatar, "mini")}
+                alt=""
+                class="h-5 w-5 rounded-full object-cover shrink-0"
+              />
             {/if}
             {selectedAuthor.artist_name}
           {:else}
@@ -164,7 +170,11 @@
           {#each data.authors as author (author.id)}
             <SelectItem value={author.id}>
               {#if author.avatar}
-                <img src={getAssetUrl(author.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
+                <img
+                  src={getAssetUrl(author.avatar, "mini")}
+                  alt=""
+                  class="h-5 w-5 rounded-full object-cover shrink-0"
+                />
               {/if}
               {author.artist_name}
             </SelectItem>
@@ -195,7 +205,11 @@
     </label>
 
     <div class="flex gap-3 pt-2">
-      <Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+      <Button
+        onclick={handleSubmit}
+        disabled={saving}
+        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
         {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
       </Button>
       <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
diff --git a/packages/frontend/src/routes/admin/articles/new/+page.svelte b/packages/frontend/src/routes/admin/articles/new/+page.svelte
index 7467fb9..d38c2c3 100644
--- a/packages/frontend/src/routes/admin/articles/new/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/new/+page.svelte
@@ -98,13 +98,22 @@
       </div>
       <div class="space-y-1.5">
         <Label for="slug">{$_("admin.common.slug_field")}</Label>
-        <Input id="slug" bind:value={slug} placeholder={$_("admin.article_form.slug_placeholder")} />
+        <Input
+          id="slug"
+          bind:value={slug}
+          placeholder={$_("admin.article_form.slug_placeholder")}
+        />
       </div>
     </div>
 
     <div class="space-y-1.5">
       <Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
-      <Textarea id="excerpt" bind:value={excerpt} placeholder={$_("admin.article_form.excerpt_placeholder")} rows={2} />
+      <Textarea
+        id="excerpt"
+        bind:value={excerpt}
+        placeholder={$_("admin.article_form.excerpt_placeholder")}
+        rows={2}
+      />
     </div>
 
     <!-- Markdown editor with live preview -->
@@ -115,13 +124,13 @@
           <button
             type="button"
             class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "write")}
-          >{$_("admin.common.write")}</button>
+            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
+          >
           <button
             type="button"
             class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "preview")}
-          >{$_("admin.common.preview")}</button>
+            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
+          >
         </div>
       </div>
       <!-- Mobile: single pane toggled; Desktop: side by side -->
@@ -137,7 +146,9 @@
           {#if preview}
             {@html preview}
           {:else}
-            <p class="text-muted-foreground italic text-sm">{$_("admin.article_form.preview_placeholder")}</p>
+            <p class="text-muted-foreground italic text-sm">
+              {$_("admin.article_form.preview_placeholder")}
+            </p>
           {/if}
         </div>
       </div>
@@ -146,13 +157,19 @@
     <div class="space-y-1.5">
       <Label>{$_("admin.common.cover_image")}</Label>
       <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
-      {#if imageId}<p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>{/if}
+      {#if imageId}<p class="text-xs text-green-600 mt-1">
+          {$_("admin.common.image_uploaded")} ✓
+        </p>{/if}
     </div>
 
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div class="space-y-1.5">
         <Label for="category">{$_("admin.article_form.category")}</Label>
-        <Input id="category" bind:value={category} placeholder={$_("admin.article_form.category_placeholder")} />
+        <Input
+          id="category"
+          bind:value={category}
+          placeholder={$_("admin.article_form.category_placeholder")}
+        />
       </div>
       <div class="space-y-1.5">
         <Label>{$_("admin.common.publish_date")}</Label>
@@ -171,7 +188,11 @@
     </label>
 
     <div class="flex gap-3 pt-2">
-      <Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+      <Button
+        onclick={handleSubmit}
+        disabled={saving}
+        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
         {saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
       </Button>
       <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
diff --git a/packages/frontend/src/routes/admin/users/+page.svelte b/packages/frontend/src/routes/admin/users/+page.svelte
index 6c4c23e..647c8ed 100644
--- a/packages/frontend/src/routes/admin/users/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/+page.svelte
@@ -87,7 +87,9 @@
 <div class="py-3 sm:py-6 sm:pl-6">
   <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
     <h1 class="text-2xl font-bold">{$_("admin.users.title")}</h1>
-    <span class="text-sm text-muted-foreground">{$_("admin.users.total", { values: { total: data.total } })}</span>
+    <span class="text-sm text-muted-foreground"
+      >{$_("admin.users.total", { values: { total: data.total } })}</span
+    >
   </div>
 
   <!-- Filters -->
@@ -120,11 +122,21 @@
     <table class="w-full text-sm">
       <thead class="bg-muted/30">
         <tr>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground">{$_("admin.users.col_user")}</th>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.users.col_email")}</th>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground">{$_("admin.users.col_role")}</th>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">{$_("admin.users.col_joined")}</th>
-          <th class="px-4 py-3 text-right font-medium text-muted-foreground">{$_("admin.users.col_actions")}</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+            >{$_("admin.users.col_user")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.users.col_email")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+            >{$_("admin.users.col_role")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell"
+            >{$_("admin.users.col_joined")}</th
+          >
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground"
+            >{$_("admin.users.col_actions")}</th
+          >
         </tr>
       </thead>
       <tbody class="divide-y divide-border/30">
@@ -147,12 +159,18 @@
                 {/if}
                 <div class="min-w-0">
                   <div class="flex items-center gap-1.5">
-                    <span class="font-medium truncate">{user.artist_name || user.first_name || "—"}</span>
+                    <span class="font-medium truncate"
+                      >{user.artist_name || user.first_name || "—"}</span
+                    >
                     {#if user.is_admin}
-                      <Badge variant="default" class="shrink-0 text-[10px] px-1.5 py-0">{$_("admin.users.admin_badge")}</Badge>
+                      <Badge variant="default" class="shrink-0 text-[10px] px-1.5 py-0"
+                        >{$_("admin.users.admin_badge")}</Badge
+                      >
                     {/if}
                   </div>
-                  <span class="text-xs text-muted-foreground sm:hidden truncate block">{user.email}</span>
+                  <span class="text-xs text-muted-foreground sm:hidden truncate block"
+                    >{user.email}</span
+                  >
                 </div>
               </div>
             </td>
@@ -173,7 +191,9 @@
                 </SelectContent>
               </Select>
             </td>
-            <td class="px-4 py-3 text-muted-foreground hidden md:table-cell">{formatDate(user.date_created)}</td>
+            <td class="px-4 py-3 text-muted-foreground hidden md:table-cell"
+              >{formatDate(user.date_created)}</td
+            >
             <td class="px-4 py-3 text-right">
               <div class="flex items-center justify-end gap-1">
                 <Button size="sm" variant="ghost" href="/admin/users/{user.id}">
@@ -195,7 +215,9 @@
 
         {#if data.items.length === 0}
           <tr>
-            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">{$_("admin.users.no_results")}</td>
+            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground"
+              >{$_("admin.users.no_results")}</td
+            >
           </tr>
         {/if}
       </tbody>
@@ -206,7 +228,13 @@
   {#if data.total > data.limit}
     <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
       <span class="text-sm text-muted-foreground">
-        {$_("admin.users.showing", { values: { start: data.offset + 1, end: Math.min(data.offset + data.limit, data.total), total: data.total } })}
+        {$_("admin.users.showing", {
+          values: {
+            start: data.offset + 1,
+            end: Math.min(data.offset + data.limit, data.total),
+            total: data.total,
+          },
+        })}
       </span>
       <div class="flex gap-2">
         <Button
@@ -244,7 +272,9 @@
     <Dialog.Header>
       <Dialog.Title>{$_("admin.users.delete_title")}</Dialog.Title>
       <Dialog.Description>
-        {$_("admin.users.delete_description", { values: { name: deleteTarget?.artist_name || deleteTarget?.email } })}
+        {$_("admin.users.delete_description", {
+          values: { name: deleteTarget?.artist_name || deleteTarget?.email },
+        })}
       </Dialog.Description>
     </Dialog.Header>
     <Dialog.Footer>
diff --git a/packages/frontend/src/routes/admin/users/[id]/+page.svelte b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
index da14ebc..66926ec 100644
--- a/packages/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -106,7 +106,11 @@
     </Button>
     <div>
       <h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1>
-      <p class="text-xs text-muted-foreground">{data.user.email} · {data.user.role}{data.user.is_admin ? " · " + $_("admin.users.admin_badge").toLowerCase() : ""}</p>
+      <p class="text-xs text-muted-foreground">
+        {data.user.email} · {data.user.role}{data.user.is_admin
+          ? " · " + $_("admin.users.admin_badge").toLowerCase()
+          : ""}
+      </p>
     </div>
   </div>
 
@@ -155,8 +159,14 @@
     </div>
 
     <!-- Admin flag -->
-    <label class="flex items-center gap-3 rounded-lg border border-border/40 px-4 py-3 cursor-pointer hover:bg-muted/20 transition-colors">
-      <input type="checkbox" bind:checked={isAdmin} class="h-4 w-4 rounded accent-primary shrink-0" />
+    <label
+      class="flex items-center gap-3 rounded-lg border border-border/40 px-4 py-3 cursor-pointer hover:bg-muted/20 transition-colors"
+    >
+      <input
+        type="checkbox"
+        bind:checked={isAdmin}
+        class="h-4 w-4 rounded accent-primary shrink-0"
+      />
       <div>
         <span class="text-sm font-medium">{$_("admin.user_edit.is_admin")}</span>
         <p class="text-xs text-muted-foreground">{$_("admin.user_edit.is_admin_hint")}</p>
@@ -164,7 +174,11 @@
     </label>
 
     <div class="flex gap-3">
-      <Button onclick={handleSave} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+      <Button
+        onclick={handleSave}
+        disabled={saving}
+        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
         {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
       </Button>
     </div>
diff --git a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
index 4f016f6..17c627c 100644
--- a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
@@ -97,7 +97,11 @@
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div class="space-y-1.5">
         <Label for="title">{$_("admin.common.title_field")}</Label>
-        <Input id="title" bind:value={title} placeholder={$_("admin.video_form.title_placeholder")} />
+        <Input
+          id="title"
+          bind:value={title}
+          placeholder={$_("admin.video_form.title_placeholder")}
+        />
       </div>
       <div class="space-y-1.5">
         <Label for="slug">{$_("admin.common.slug_field")}</Label>
@@ -107,7 +111,12 @@
 
     <div class="space-y-1.5">
       <Label for="description">{$_("admin.video_form.description")}</Label>
-      <Textarea id="description" bind:value={description} placeholder={$_("admin.video_form.description_placeholder")} rows={3} />
+      <Textarea
+        id="description"
+        bind:value={description}
+        placeholder={$_("admin.video_form.description_placeholder")}
+        rows={3}
+      />
     </div>
 
     <div class="space-y-1.5">
@@ -127,7 +136,7 @@
       {#if movieId}
         <video
           src={getAssetUrl(movieId)}
-          poster={imageId ? getAssetUrl(imageId, "preview") ?? undefined : undefined}
+          poster={imageId ? (getAssetUrl(imageId, "preview") ?? undefined) : undefined}
           controls
           class="w-full rounded-lg bg-black max-h-72 mb-2"
         ></video>
@@ -142,7 +151,11 @@
 
     <div class="space-y-1.5">
       <Label>{$_("admin.common.publish_date")}</Label>
-      <DatePicker bind:value={uploadDate} placeholder={$_("admin.common.publish_date")} showTime={false} />
+      <DatePicker
+        bind:value={uploadDate}
+        placeholder={$_("admin.common.publish_date")}
+        showTime={false}
+      />
     </div>
 
     <div class="flex gap-6">
@@ -162,7 +175,9 @@
         <Select type="multiple" bind:value={selectedModelIds}>
           <SelectTrigger class="w-full">
             {#if selectedModelIds.length}
-              {$_("admin.video_form.models_selected", { values: { count: selectedModelIds.length } })}
+              {$_("admin.video_form.models_selected", {
+                values: { count: selectedModelIds.length },
+              })}
             {:else}
               <span class="text-muted-foreground">{$_("admin.video_form.no_models")}</span>
             {/if}
@@ -171,7 +186,11 @@
             {#each data.models as model (model.id)}
               <SelectItem value={model.id}>
                 {#if model.avatar}
-                  <img src={getAssetUrl(model.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
+                  <img
+                    src={getAssetUrl(model.avatar, "mini")}
+                    alt=""
+                    class="h-5 w-5 rounded-full object-cover shrink-0"
+                  />
                 {/if}
                 {model.artist_name}
               </SelectItem>
@@ -182,7 +201,11 @@
     {/if}
 
     <div class="flex gap-3 pt-2">
-      <Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+      <Button
+        onclick={handleSubmit}
+        disabled={saving}
+        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
         {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
       </Button>
       <Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
diff --git a/packages/frontend/src/routes/admin/videos/new/+page.svelte b/packages/frontend/src/routes/admin/videos/new/+page.svelte
index 43d212d..9a1dc4d 100644
--- a/packages/frontend/src/routes/admin/videos/new/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/new/+page.svelte
@@ -137,13 +137,17 @@
     <div class="space-y-1.5">
       <Label>{$_("admin.common.cover_image")}</Label>
       <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
-      {#if imageId}<p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>{/if}
+      {#if imageId}<p class="text-xs text-green-600 mt-1">
+          {$_("admin.common.image_uploaded")} ✓
+        </p>{/if}
     </div>
 
     <div class="space-y-1.5">
       <Label>{$_("admin.video_form.video_file")}</Label>
       <FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
-      {#if movieId}<p class="text-xs text-green-600 mt-1">{$_("admin.video_form.video_uploaded")} ✓</p>{/if}
+      {#if movieId}<p class="text-xs text-green-600 mt-1">
+          {$_("admin.video_form.video_uploaded")} ✓
+        </p>{/if}
     </div>
 
     <div class="space-y-1.5">
@@ -153,7 +157,11 @@
 
     <div class="space-y-1.5">
       <Label>{$_("admin.common.publish_date")}</Label>
-      <DatePicker bind:value={uploadDate} placeholder={$_("admin.common.publish_date")} showTime={false} />
+      <DatePicker
+        bind:value={uploadDate}
+        placeholder={$_("admin.common.publish_date")}
+        showTime={false}
+      />
     </div>
 
     <div class="flex gap-6">
@@ -189,7 +197,11 @@
     {/if}
 
     <div class="flex gap-3 pt-2">
-      <Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+      <Button
+        onclick={handleSubmit}
+        disabled={saving}
+        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
         {saving ? $_("admin.common.creating") : $_("admin.video_form.create")}
       </Button>
       <Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>