release: 0.53.0

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

.github/workflows/e2e-tests.yml

@@ -17,6 +17,9 @@ jobs:
   build:
     if: github.event.pull_request.head.ref != 'i18n_crowdin'
     timeout-minutes: 20
+    permissions:
+      contents: read
+      actions: write
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -44,6 +47,9 @@ jobs:
 
   test-sqlite:
     if: github.event.pull_request.head.ref != 'i18n_crowdin'
+    permissions:
+      contents: read
+      actions: write
     runs-on: ubuntu-latest
     needs: build
     steps:
@@ -72,6 +78,23 @@ jobs:
       - name: Load Docker image
         run: docker load -i /tmp/docker-image.tar
 
+      - name: Cache LLDAP Docker image
+        uses: actions/cache@v3
+        id: lldap-cache
+        with:
+          path: /tmp/lldap-image.tar
+          key: lldap-stable-${{ runner.os }}
+
+      - name: Pull and save LLDAP image
+        if: steps.lldap-cache.outputs.cache-hit != 'true'
+        run: |
+          docker pull nitnelave/lldap:stable
+          docker save nitnelave/lldap:stable > /tmp/lldap-image.tar
+
+      - name: Load LLDAP image from cache
+        if: steps.lldap-cache.outputs.cache-hit == 'true'
+        run: docker load < /tmp/lldap-image.tar
+
       - name: Install frontend dependencies
         working-directory: ./frontend
         run: npm ci
@@ -81,9 +104,18 @@ jobs:
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps chromium
 
-      - name: Run Docker Container with Sqlite DB
+      - name: Create Docker network
+        run: docker network create pocket-id-network
+
+      - name: Setup and Configure LLDAP Server
+        run: |
+          chmod +x ./scripts/tests/setup-lldap.sh
+          ./scripts/tests/setup-lldap.sh
+
+      - name: Run Docker Container with Sqlite DB and LDAP
         run: |
           docker run -d --name pocket-id-sqlite \
+          --network pocket-id-network \
           -p 80:80 \
           -e APP_ENV=test \
           pocket-id:test
@@ -114,6 +146,9 @@ jobs:
 
   test-postgres:
     if: github.event.pull_request.head.ref != 'i18n_crowdin'
+    permissions:
+      contents: read
+      actions: write
     runs-on: ubuntu-latest
     needs: build
     steps:
@@ -150,6 +185,23 @@ jobs:
         if: steps.postgres-cache.outputs.cache-hit == 'true'
         run: docker load < /tmp/postgres-image.tar
 
+      - name: Cache LLDAP Docker image
+        uses: actions/cache@v3
+        id: lldap-cache
+        with:
+          path: /tmp/lldap-image.tar
+          key: lldap-stable-${{ runner.os }}
+
+      - name: Pull and save LLDAP image
+        if: steps.lldap-cache.outputs.cache-hit != 'true'
+        run: |
+          docker pull nitnelave/lldap:stable
+          docker save nitnelave/lldap:stable > /tmp/lldap-image.tar
+
+      - name: Load LLDAP image from cache
+        if: steps.lldap-cache.outputs.cache-hit == 'true'
+        run: docker load < /tmp/lldap-image.tar
+
       - name: Download Docker image artifact
         uses: actions/download-artifact@v4
         with:
@@ -181,9 +233,14 @@ jobs:
           -p 5432:5432 \
           postgres:17
 
+      - name: Setup and Configure LLDAP Server
+        run: |
+          chmod +x ./scripts/tests/setup-lldap.sh
+          ./scripts/tests/setup-lldap.sh
+
       - name: Wait for Postgres to start
         run: |
-          for i in {1..10}; do
+          for i in {1..5}; do
             if docker exec pocket-id-db pg_isready -U postgres; then
               echo "Postgres is ready"
               break
@@ -192,7 +249,7 @@ jobs:
             sleep 2
           done
 
-      - name: Run Docker Container with Postgres DB
+      - name: Run Docker Container with Postgres DB and LDAP
         run: |
           docker run -d --name pocket-id-postgres \
           --network pocket-id-network \

.github/workflows/unit-tests.yml

@@ -11,13 +11,16 @@ on:
 
 jobs:
   test-backend:
+    permissions:
+      contents: read
+      actions: write
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-go@v5
         with:
-          go-version-file: 'backend/go.mod'
-          cache-dependency-path: 'backend/go.sum'
+          go-version-file: "backend/go.mod"
+          cache-dependency-path: "backend/go.sum"
       - name: Install dependencies
         working-directory: backend
         run: |

.version

@@ -1 +1 @@
-0.52.0
+0.53.0

CHANGELOG.md

@@ -1,3 +1,15 @@
+## [](https://github.com/pocket-id/pocket-id/compare/v0.52.0...v) (2025-05-08)
+
+
+### Features
+
+* add support for `TZ` environment variable ([5e2e947](https://github.com/pocket-id/pocket-id/commit/5e2e947fe09fa881a7bbc70133a243a4baf30e90))
+
+
+### Bug Fixes
+
+* handle CORS correctly for endpoints that SPAs need ([#513](https://github.com/pocket-id/pocket-id/issues/513)) ([63a0c08](https://github.com/pocket-id/pocket-id/commit/63a0c08696938e1cefd12018f4bd38aa1808996a))
+
 ## [](https://github.com/pocket-id/pocket-id/compare/v0.51.1...v) (2025-05-06)
 
 

backend/cmd/main.go

@@ -3,6 +3,8 @@ package main
 import (
 	"log"
 
+	_ "time/tzdata"
+
 	"github.com/pocket-id/pocket-id/backend/internal/bootstrap"
 )
 

backend/internal/bootstrap/e2etest_router_bootstrap.go

@@ -14,7 +14,7 @@ import (
 func init() {
 	registerTestControllers = []func(apiGroup *gin.RouterGroup, db *gorm.DB, svc *services){
 		func(apiGroup *gin.RouterGroup, db *gorm.DB, svc *services) {
-			testService := service.NewTestService(db, svc.appConfigService, svc.jwtService)
+			testService := service.NewTestService(db, svc.appConfigService, svc.jwtService, svc.ldapService)
 			controller.NewTestController(apiGroup, testService)
 		},
 	}

backend/internal/controller/e2etest_controller.go

@@ -41,6 +41,16 @@ func (tc *TestController) resetAndSeedHandler(c *gin.Context) {
 		return
 	}
 
+	if err := tc.TestService.SetLdapTestConfig(c.Request.Context()); err != nil {
+		_ = c.Error(err)
+		return
+	}
+
+	if err := tc.TestService.SyncLdap(c.Request.Context()); err != nil {
+		_ = c.Error(err)
+		return
+	}
+
 	tc.TestService.SetJWTKeys()
 
 	c.Status(http.StatusNoContent)

backend/internal/controller/oidc_controller.go

@@ -129,9 +129,6 @@ func (oc *OidcController) authorizationConfirmationRequiredHandler(c *gin.Contex
 // @Success 200 {object} dto.OidcTokenResponseDto "Token response with access_token and optional id_token and refresh_token"
 // @Router /api/oidc/token [post]
 func (oc *OidcController) createTokensHandler(c *gin.Context) {
-	// Disable cors for this endpoint
-	c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
-
 	var input dto.OidcCreateTokensDto
 	if err := c.ShouldBind(&input); err != nil {
 		_ = c.Error(err)

backend/internal/middleware/cors.go

@@ -4,7 +4,6 @@ import (
 	"net/http"
 
 	"github.com/gin-gonic/gin"
-	"github.com/pocket-id/pocket-id/backend/internal/common"
 )
 
 type CorsMiddleware struct{}
@@ -15,17 +14,21 @@ func NewCorsMiddleware() *CorsMiddleware {
 
 func (m *CorsMiddleware) Add() gin.HandlerFunc {
 	return func(c *gin.Context) {
-		// Allow all origins for the token endpoint
-		switch c.FullPath() {
-		case "/api/oidc/token", "/api/oidc/introspect":
-			c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
-		default:
-			c.Writer.Header().Set("Access-Control-Allow-Origin", common.EnvConfig.AppURL)
+		path := c.FullPath()
+		if path == "" {
+			// The router doesn't map preflight requests, so we need to use the raw URL path
+			path = c.Request.URL.Path
 		}
 
-		c.Writer.Header().Set("Access-Control-Allow-Headers", "*")
-		c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT")
+		if !isCorsPath(path) {
+			c.Next()
+			return
+		}
 
+		c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
+		c.Writer.Header().Set("Access-Control-Allow-Methods", "GET, POST")
+
+		// Preflight request
 		if c.Request.Method == http.MethodOptions {
 			c.AbortWithStatus(204)
 			return
@@ -34,3 +37,17 @@ func (m *CorsMiddleware) Add() gin.HandlerFunc {
 		c.Next()
 	}
 }
+
+func isCorsPath(path string) bool {
+	switch path {
+	case "/api/oidc/token",
+		"/api/oidc/userinfo",
+		"/oidc/end-session",
+		"/api/oidc/introspect",
+		"/.well-known/jwks.json",
+		"/.well-known/openid-configuration":
+		return true
+	default:
+		return false
+	}
+}

backend/internal/service/e2etest_service.go

@@ -29,15 +29,16 @@ type TestService struct {
 	db               *gorm.DB
 	jwtService       *JwtService
 	appConfigService *AppConfigService
+	ldapService      *LdapService
 }
 
-func NewTestService(db *gorm.DB, appConfigService *AppConfigService, jwtService *JwtService) *TestService {
-	return &TestService{db: db, appConfigService: appConfigService, jwtService: jwtService}
+func NewTestService(db *gorm.DB, appConfigService *AppConfigService, jwtService *JwtService, ldapService *LdapService) *TestService {
+	return &TestService{db: db, appConfigService: appConfigService, jwtService: jwtService, ldapService: ldapService}
 }
 
 //nolint:gocognit
 func (s *TestService) SeedDatabase() error {
-	return s.db.Transaction(func(tx *gorm.DB) error {
+	err := s.db.Transaction(func(tx *gorm.DB) error {
 		users := []model.User{
 			{
 				Base: model.Base{
@@ -238,6 +239,12 @@ func (s *TestService) SeedDatabase() error {
 
 		return nil
 	})
+
+	if err != nil {
+		return err
+	}
+
+	return nil
 }
 
 func (s *TestService) ResetDatabase() error {
@@ -349,3 +356,52 @@ func (s *TestService) getCborPublicKey(base64PublicKey string) ([]byte, error) {
 
 	return cborPublicKey, nil
 }
+
+// SyncLdap triggers an LDAP synchronization
+func (s *TestService) SyncLdap(ctx context.Context) error {
+	return s.ldapService.SyncAll(ctx)
+}
+
+// SetLdapTestConfig writes the test LDAP config variables directly to the database.
+func (s *TestService) SetLdapTestConfig(ctx context.Context) error {
+	err := s.db.Transaction(func(tx *gorm.DB) error {
+		ldapConfigs := map[string]string{
+			"ldapUrl":                            "ldap://lldap:3890",
+			"ldapBindDn":                         "uid=admin,ou=people,dc=pocket-id,dc=org",
+			"ldapBindPassword":                   "admin_password",
+			"ldapBase":                           "dc=pocket-id,dc=org",
+			"ldapUserSearchFilter":               "(objectClass=person)",
+			"ldapUserGroupSearchFilter":          "(objectClass=groupOfNames)",
+			"ldapSkipCertVerify":                 "true",
+			"ldapAttributeUserUniqueIdentifier":  "uuid",
+			"ldapAttributeUserUsername":          "uid",
+			"ldapAttributeUserEmail":             "mail",
+			"ldapAttributeUserFirstName":         "givenName",
+			"ldapAttributeUserLastName":          "sn",
+			"ldapAttributeGroupUniqueIdentifier": "uuid",
+			"ldapAttributeGroupName":             "uid",
+			"ldapAttributeGroupMember":           "member",
+			"ldapAttributeAdminGroup":            "admin_group",
+			"ldapSoftDeleteUsers":                "true",
+			"ldapEnabled":                        "true",
+		}
+
+		for key, value := range ldapConfigs {
+			configVar := model.AppConfigVariable{Key: key, Value: value}
+			if err := tx.Create(&configVar).Error; err != nil {
+				return fmt.Errorf("failed to create config variable '%s': %w", key, err)
+			}
+		}
+		return nil
+	})
+
+	if err != nil {
+		return fmt.Errorf("failed to set LDAP test config: %w", err)
+	}
+
+	if err := s.appConfigService.LoadDbConfig(ctx); err != nil {
+		return fmt.Errorf("failed to load app config: %w", err)
+	}
+
+	return nil
+}

frontend/messages/cs-CZ.json

@@ -343,8 +343,8 @@
 	"callback_url_description": "URL poskytnuté klientem. Klientské zástupné znaky (*) jsou podporovány, ale raději se jim vyhýbejte, pro lepší bezpečnost.",
 	"api_key_expiration": "Vypršení platnosti API klíče",
 	"send_an_email_to_the_user_when_their_api_key_is_about_to_expire": "Pošlete uživateli e-mail, jakmile jejich API klíč brzy vyprší.",
-	"authorize_device": "Authorize Device",
-	"the_device_has_been_authorized": "The device has been authorized.",
-	"enter_code_displayed_in_previous_step": "Enter the code that was displayed in the previous step.",
-	"authorize": "Authorize"
+	"authorize_device": "Autorizovat zařízení",
+	"the_device_has_been_authorized": "Zařízení bylo autorizováno.",
+	"enter_code_displayed_in_previous_step": "Zadejte kód, který byl zobrazen v předchozím kroku.",
+	"authorize": "Autorizovat"
 }

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocket-id-frontend",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/hooks.server.ts

@@ -24,7 +24,8 @@ const authenticationHandle: Handle = async ({ event, resolve }) => {
 	const { isSignedIn, isAdmin } = verifyJwt(event.cookies.get(ACCESS_TOKEN_COOKIE_NAME));
 
 	const path = event.url.pathname;
-	const isUnauthenticatedOnlyPath = path == '/login' || path.startsWith('/login/') || path == '/lc' || path.startsWith('/lc/')
+	const isUnauthenticatedOnlyPath =
+		path == '/login' || path.startsWith('/login/') || path == '/lc' || path.startsWith('/lc/');
 	const isPublicPath = ['/authorize', '/device', '/health', '/healthz'].includes(path);
 	const isAdminPath = path == '/settings/admin' || path.startsWith('/settings/admin/');
 
@@ -79,7 +80,7 @@ function verifyJwt(accessToken: string | undefined) {
 		const jwtPayload = decodeJwt<{ isAdmin: boolean }>(accessToken);
 		if (jwtPayload?.exp && jwtPayload.exp * 1000 > Date.now()) {
 			isSignedIn = true;
-			isAdmin = !!(jwtPayload?.isAdmin);
+			isAdmin = !!jwtPayload?.isAdmin;
 		}
 	}
 

frontend/src/lib/components/audit-log-list.svelte

@@ -37,7 +37,7 @@
 			: (auditLogs = await auditLogService.list(options))}
 	columns={[
 		{ label: m.time(), sortColumn: 'createdAt' },
-        ...(isAdmin ? [{ label: 'Username' }] : []),
+		...(isAdmin ? [{ label: 'Username' }] : []),
 		{ label: m.event(), sortColumn: 'event' },
 		{ label: m.approximate_location(), sortColumn: 'city' },
 		{ label: m.ip_address(), sortColumn: 'ipAddress' },

frontend/src/lib/components/copy-to-clipboard.svelte

@@ -29,7 +29,9 @@
 </script>
 
 <Tooltip.Root closeOnPointerDown={false} {onOpenChange} {open}>
-	<Tooltip.Trigger class="text-start" tabindex={-1} onclick={onClick}>{@render children()}</Tooltip.Trigger>
+	<Tooltip.Trigger class="text-start" tabindex={-1} onclick={onClick}
+		>{@render children()}</Tooltip.Trigger
+	>
 	<Tooltip.Content onclick={copyToClipboard}>
 		{#if copied}
 			<span class="flex items-center"><LucideCheck class="mr-1 h-4 w-4" /> {m.copied()}</span>

frontend/src/lib/components/error.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div class="mt-[20%] flex flex-col items-center">
-	<LucideXCircle class="h-12 w-12 text-muted-foreground" />
+	<LucideXCircle class="text-muted-foreground h-12 w-12" />
 	<h1 class="mt-3 text-2xl font-semibold">{m.something_went_wrong()}</h1>
 	<p class="text-muted-foreground">{message}</p>
 	{#if showButton}

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

@@ -92,7 +92,7 @@
 					onkeydown={(e) => {
 						if (e.key === 'Enter') handleSuggestionClick(suggestion);
 					}}
-					class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {selectedIndex ===
+					class="hover:bg-accent hover:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {selectedIndex ===
 					index
 						? 'bg-accent text-accent-foreground'
 						: ''}"

frontend/src/lib/components/form/checkbox-with-label.svelte

@@ -27,7 +27,7 @@
 		bind:checked
 	/>
 	<div class="grid gap-1.5 leading-none">
-		<Label for={id} class="mb-0 text-sm font-medium leading-none">
+		<Label for={id} class="mb-0 text-sm leading-none font-medium">
 			{label}
 		</Label>
 		{#if description}

frontend/src/lib/components/header/header-avatar.svelte

@@ -24,7 +24,7 @@
 	<DropdownMenu.Content class="min-w-40" align="start">
 		<DropdownMenu.Label class="font-normal">
 			<div class="flex flex-col space-y-1">
-				<p class="text-sm font-medium leading-none">
+				<p class="text-sm leading-none font-medium">
 					{$userStore?.firstName}
 					{$userStore?.lastName}
 				</p>

frontend/src/lib/components/login-wrapper.svelte

@@ -50,7 +50,7 @@
 	</div>
 
 	<!-- Background image with slide animation -->
-	<div class="{cn(animate && 'animate-slide-bg-container')} absolute bottom-0 right-0 top-0 z-0">
+	<div class="{cn(animate && 'animate-slide-bg-container')} absolute top-0 right-0 bottom-0 z-0">
 		<img
 			src="/api/application-configuration/background-image"
 			class="h-screen rounded-l-[60px] object-cover {animate ? 'w-full' : 'w-[calc(100vw-650px)]'}"

frontend/src/lib/components/one-time-link-modal.svelte

@@ -116,7 +116,7 @@
 
 				<div class="text-muted-foreground my-2 flex items-center justify-center gap-3">
 					<Separator />
-					<p class="text-nowrap text-xs">{m.or_visit()}</p>
+					<p class="text-xs text-nowrap">{m.or_visit()}</p>
 					<Separator />
 				</div>
 

frontend/src/lib/components/scope-item.svelte

@@ -5,9 +5,9 @@
 </script>
 
 <div class="flex items-center">
-	<div class="mr-5 rounded-lg bg-muted p-2"><svelte:component this={icon} /></div>
+	<div class="bg-muted mr-5 rounded-lg p-2"><svelte:component this={icon} /></div>
 	<div class="text-start">
 		<h3 class="font-semibold">{name}</h3>
-		<p class="text-sm text-muted-foreground">{description}</p>
+		<p class="text-muted-foreground text-sm">{description}</p>
 	</div>
 </div>

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

@@ -18,7 +18,7 @@
 		{transition}
 		{transitionConfig}
 		class={cn(
-			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
+			'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}

frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <AlertDialogPrimitive.Description
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -16,6 +16,6 @@
 <AlertDialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
+	class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ', className)}
 	{...$$restProps}
 />

frontend/src/lib/components/ui/alert/alert-title.svelte

@@ -14,7 +14,7 @@
 
 <svelte:element
 	this={level}
-	class={cn('mb-1 font-medium leading-none tracking-tight', className)}
+	class={cn('mb-1 leading-none font-medium tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

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

@@ -37,7 +37,9 @@
 	<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
 		<slot />
 		{#if dismissibleId}
-			<button on:click={dismiss} class="absolute top-0 right-0 m-3 text-black dark:text-white"><LucideX class="w-4" /></button>
+			<button on:click={dismiss} class="absolute top-0 right-0 m-3 text-black dark:text-white"
+				><LucideX class="w-4" /></button
+			>
 		{/if}
 	</div>
 {/if}

frontend/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <AvatarPrimitive.Fallback
-	class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+	class={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)}
 	{...$$restProps}
 >
 	<slot />

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
 };

frontend/src/lib/components/ui/card/card-title.svelte

@@ -14,7 +14,7 @@
 
 <svelte:element
 	this={tag}
-	class={cn('flex items-center gap-2 text-xl font-semibold leading-none tracking-tight', className)}
+	class={cn('flex items-center gap-2 text-xl leading-none font-semibold tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

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

@@ -14,7 +14,7 @@
 
 <CheckboxPrimitive.Root
 	class={cn(
-		'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
+		'peer border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground box-content h-4 w-4 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
 		className
 	)}
 	bind:checked

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

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { Dialog as DialogPrimitive } from "bits-ui";
-	import type { Command as CommandPrimitive } from "cmdk-sv";
-	import Command from "./command.svelte";
-	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import type { Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Command as CommandPrimitive } from 'cmdk-sv';
+	import Command from './command.svelte';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
 
 	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
 
-	export let open: $$Props["open"] = false;
-	export let value: $$Props["value"] = undefined;
+	export let open: $$Props['open'] = false;
+	export let value: $$Props['value'] = undefined;
 </script>
 
 <Dialog.Root bind:open {...$$restProps}>
 	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
 		<Command
-			class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
+			class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
 			{...$$restProps}
 			bind:value
 		>

frontend/src/lib/components/ui/command/command-empty.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils/style.js";
-	import type { ClassValue } from "svelte/elements";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils/style.js';
+	import type { ClassValue } from 'svelte/elements';
 
 	type $$Props = CommandPrimitive.EmptyProps;
 	let className: ClassValue | undefined | null = undefined;
 	export { className as class };
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
+<CommandPrimitive.Empty class={cn('py-6 text-center text-sm', className)} {...$$restProps}>
 	<slot />
 </CommandPrimitive.Empty>

frontend/src/lib/components/ui/command/command-group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils/style.js";
-	import type { ClassValue } from "svelte/elements";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils/style.js';
+	import type { ClassValue } from 'svelte/elements';
 	type $$Props = CommandPrimitive.GroupProps;
 
 	let className: ClassValue | undefined | null = undefined;
@@ -10,7 +10,7 @@
 
 <CommandPrimitive.Group
 	class={cn(
-		"text-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium",
+		'text-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/command/command-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils/style.js";
-	import type { ClassValue } from "svelte/elements";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils/style.js';
+	import type { ClassValue } from 'svelte/elements';
 
 	type $$Props = CommandPrimitive.ItemProps;
 
@@ -14,7 +14,7 @@
 <CommandPrimitive.Item
 	{asChild}
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/command/command-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils/style.js";
-	import type { ClassValue } from "svelte/elements";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils/style.js';
+	import type { ClassValue } from 'svelte/elements';
 
 	type $$Props = CommandPrimitive.ListProps;
 	let className: ClassValue | undefined | null = undefined;
@@ -9,7 +9,7 @@
 </script>
 
 <CommandPrimitive.List
-	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+	class={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/command/command-separator.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils/style.js";
-	import type { ClassValue } from "svelte/elements";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils/style.js';
+	import type { ClassValue } from 'svelte/elements';
 
 	type $$Props = CommandPrimitive.SeparatorProps;
 	let className: ClassValue | undefined | null = undefined;
 	export { className as class };
 </script>
 
-<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} {...$$restProps} />
+<CommandPrimitive.Separator class={cn('bg-border -mx-1 h-px', className)} {...$$restProps} />

frontend/src/lib/components/ui/command/command-shortcut.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { ClassValue, HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils/style.js";
+	import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
@@ -9,7 +9,7 @@
 </script>
 
 <span
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
 	{...$$restProps}
 >
 	<slot />

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils/style.js";
-	import type { ClassValue } from "svelte/elements";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils/style.js';
+	import type { ClassValue } from 'svelte/elements';
 
 	type $$Props = CommandPrimitive.CommandProps;
 
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
 
 	let className: ClassValue | undefined | null = undefined;
 	export { className as class };
@@ -13,7 +13,7 @@
 
 <CommandPrimitive.Root
 	class={cn(
-		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
 		className
 	)}
 	bind:value

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

@@ -1,14 +1,14 @@
-import { Command as CommandPrimitive } from "cmdk-sv";
+import { Command as CommandPrimitive } from 'cmdk-sv';
 
-import Root from "./command.svelte";
-import Dialog from "./command-dialog.svelte";
-import Empty from "./command-empty.svelte";
-import Group from "./command-group.svelte";
-import Item from "./command-item.svelte";
-import Input from "./command-input.svelte";
-import List from "./command-list.svelte";
-import Separator from "./command-separator.svelte";
-import Shortcut from "./command-shortcut.svelte";
+import Root from './command.svelte';
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Item from './command-item.svelte';
+import Input from './command-input.svelte';
+import List from './command-list.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
 
 const Loading = CommandPrimitive.Loading;
 
@@ -33,5 +33,5 @@ export {
 	List as CommandList,
 	Separator as CommandSeparator,
 	Shortcut as CommandShortcut,
-	Loading as CommandLoading,
+	Loading as CommandLoading
 };

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

@@ -6,11 +6,11 @@
 
 	type $$Props = DialogPrimitive.ContentProps & {
 		closeButton?: boolean;
-	}
+	};
 
 	let className: $$Props['class'] = undefined;
 	export let transition: $$Props['transition'] = flyAndScale;
-	export let closeButton : $$Props['closeButton'] = true;
+	export let closeButton: $$Props['closeButton'] = true;
 	export let transitionConfig: $$Props['transitionConfig'] = {
 		duration: 200
 	};
@@ -23,19 +23,19 @@
 		{transition}
 		{transitionConfig}
 		class={cn(
-			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
+			'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}
 	>
 		<slot />
 		{#if closeButton}
-		<DialogPrimitive.Close
-			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-		>
-			<X class="h-4 w-4" />
-			<span class="sr-only">Close</span>
-		</DialogPrimitive.Close>
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
+			>
+				<X class="h-4 w-4" />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
 		{/if}
 	</DialogPrimitive.Content>
 </Dialog.Portal>

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

@@ -9,7 +9,7 @@
 </script>
 
 <DialogPrimitive.Description
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...$$restProps}
 >
 	<slot />

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

@@ -16,6 +16,6 @@
 <DialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
+	class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-sm', className)}
 	{...$$restProps}
 />

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

@@ -9,7 +9,7 @@
 </script>
 
 <DialogPrimitive.Title
-	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+	class={cn('text-lg leading-none font-semibold tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -17,7 +17,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
+		'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -14,7 +14,7 @@
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		'relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		inset && 'pl-8',
 		className
 	)}

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -13,7 +13,7 @@
 
 <DropdownMenuPrimitive.RadioItem
 	class={cn(
-		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		className
 	)}
 	{value}

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -9,6 +9,6 @@
 </script>
 
 <DropdownMenuPrimitive.Separator
-	class={cn('-mx-1 my-1 h-px bg-muted', className)}
+	class={cn('bg-muted -mx-1 my-1 h-px', className)}
 	{...$$restProps}
 />

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -18,7 +18,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
+		'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -15,7 +15,7 @@
 
 <DropdownMenuPrimitive.SubTrigger
 	class={cn(
-		'flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
+		'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none',
 		inset && 'pl-8',
 		className
 	)}

frontend/src/lib/components/ui/form/form-description.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <FormPrimitive.Description
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...$$restProps}
 	let:descriptionAttrs
 >

frontend/src/lib/components/ui/form/form-field-errors.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <FormPrimitive.FieldErrors
-	class={cn('text-sm font-medium text-destructive', className)}
+	class={cn('text-destructive text-sm font-medium', className)}
 	{...$$restProps}
 	let:errors
 	let:fieldErrorsAttrs

frontend/src/lib/components/ui/form/form-legend.svelte

@@ -10,7 +10,7 @@
 
 <FormPrimitive.Legend
 	{...$$restProps}
-	class={cn('text-sm font-medium leading-none data-[fs-error]:text-destructive', className)}
+	class={cn('data-[fs-error]:text-destructive text-sm leading-none font-medium', className)}
 	let:legendAttrs
 >
 	<slot {legendAttrs} />

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

@@ -17,7 +17,7 @@
 
 <input
 	class={cn(
-		'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:value

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

@@ -11,7 +11,7 @@
 
 <LabelPrimitive.Root
 	class={cn(
-		'mb-3 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		'mb-3 block text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 		className
 	)}
 	{...$$restProps}

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

@@ -13,7 +13,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+		'bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none',
 		className
 	)}
 	{...$$restProps}

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

@@ -27,7 +27,7 @@
 	{outTransitionConfig}
 	{sideOffset}
 	class={cn(
-		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
+		'bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/select/select-item.svelte

@@ -18,7 +18,7 @@
 	{disabled}
 	{label}
 	class={cn(
-		'relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/select/select-label.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <SelectPrimitive.Label
-	class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+	class={cn('py-1.5 pr-2 pl-8 text-sm font-semibold', className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/select/select-separator.svelte

@@ -8,4 +8,4 @@
 	export { className as class };
 </script>
 
-<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />
+<SelectPrimitive.Separator class={cn('bg-muted -mx-1 my-1 h-px', className)} {...$$restProps} />

frontend/src/lib/components/ui/select/select-trigger.svelte

@@ -12,7 +12,7 @@
 
 <SelectPrimitive.Trigger
 	class={cn(
-		'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground',
+		'border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
 		className
 	)}
 	{...$$restProps}

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

@@ -12,7 +12,7 @@
 
 <SeparatorPrimitive.Root
 	class={cn(
-		'shrink-0 bg-border',
+		'bg-border shrink-0',
 		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
 		className
 	)}

frontend/src/lib/components/ui/table/table-caption.svelte

@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...$$restProps}>
+<caption class={cn('text-muted-foreground mt-4 text-sm', className)} {...$$restProps}>
 	<slot />
 </caption>

frontend/src/lib/components/ui/table/table-footer.svelte

@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...$$restProps}>
+<tfoot class={cn('bg-primary text-primary-foreground font-medium', className)} {...$$restProps}>
 	<slot />
 </tfoot>

frontend/src/lib/components/ui/table/table-head.svelte

@@ -10,7 +10,7 @@
 
 <th
 	class={cn(
-		'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+		'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/table/table-row.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <tr
-	class={cn('border-b transition-colors data-[state=selected]:bg-muted', className)}
+	class={cn('data-[state=selected]:bg-muted border-b transition-colors', className)}
 	{...$$restProps}
 	on:click
 	on:keydown

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

@@ -1,7 +1,7 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 
 const Root = TabsPrimitive.Root;
 
@@ -14,5 +14,5 @@ export {
 	Root as Tabs,
 	Content as TabsContent,
 	List as TabsList,
-	Trigger as TabsTrigger,
+	Trigger as TabsTrigger
 };

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils/style.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = TabsPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
 	export { className as class };
 </script>
 
 <TabsPrimitive.Content
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+		'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 		className
 	)}
 	{value}

frontend/src/lib/components/ui/tabs/tabs-list.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils/style.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = TabsPrimitive.ListProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <TabsPrimitive.List
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
 		className
 	)}
 	{...$$restProps}

frontend/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils/style.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils/style.js';
 
 	type $$Props = TabsPrimitive.TriggerProps;
 	type $$Events = TabsPrimitive.TriggerEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
 	export { className as class };
 </script>
 
 <TabsPrimitive.Trigger
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
 		className
 	)}
 	{value}

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

@@ -19,7 +19,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+		'bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
 		className
 	)}
 	{...$$restProps}

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

@@ -1,21 +1,21 @@
-import type { ApiKey, ApiKeyCreate, ApiKeyResponse } from '$lib/types/api-key.type';
-import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
-import APIService from './api-service';
-
-export default class ApiKeyService extends APIService {
-	async list(options?: SearchPaginationSortRequest) {
-		const res = await this.api.get('/api-keys', {
-			params: options
-		});
-		return res.data as Paginated<ApiKey>;
-	}
-
-	async create(data: ApiKeyCreate): Promise<ApiKeyResponse> {
-		const res = await this.api.post('/api-keys', data);
-		return res.data as ApiKeyResponse;
-	}
-
-	async revoke(id: string): Promise<void> {
-		await this.api.delete(`/api-keys/${id}`);
-	}
-}
+import type { ApiKey, ApiKeyCreate, ApiKeyResponse } from '$lib/types/api-key.type';
+import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
+import APIService from './api-service';
+
+export default class ApiKeyService extends APIService {
+	async list(options?: SearchPaginationSortRequest) {
+		const res = await this.api.get('/api-keys', {
+			params: options
+		});
+		return res.data as Paginated<ApiKey>;
+	}
+
+	async create(data: ApiKeyCreate): Promise<ApiKeyResponse> {
+		const res = await this.api.post('/api-keys', data);
+		return res.data as ApiKeyResponse;
+	}
+
+	async revoke(id: string): Promise<void> {
+		await this.api.delete(`/api-keys/${id}`);
+	}
+}

frontend/src/lib/services/oidc-service.ts

@@ -9,7 +9,6 @@ import type {
 import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import APIService from './api-service';
 
-
 class OidcService extends APIService {
 	async authorize(
 		clientId: string,

frontend/src/lib/types/api-key.type.ts

@@ -1,19 +1,19 @@
-export type ApiKey = {
-	id: string;
-	name: string;
-	description?: string;
-	expiresAt: string;
-	lastUsedAt?: string;
-	createdAt: string;
-};
-
-export type ApiKeyCreate = {
-	name: string;
-	description?: string;
-	expiresAt:  Date;
-};
-
-export type ApiKeyResponse = {
-	apiKey: ApiKey;
-	token: string;
-};
+export type ApiKey = {
+	id: string;
+	name: string;
+	description?: string;
+	expiresAt: string;
+	lastUsedAt?: string;
+	createdAt: string;
+};
+
+export type ApiKeyCreate = {
+	name: string;
+	description?: string;
+	expiresAt: Date;
+};
+
+export type ApiKeyResponse = {
+	apiKey: ApiKey;
+	token: string;
+};

frontend/src/lib/types/audit-log.type.ts

@@ -12,7 +12,7 @@ export type AuditLog = {
 };
 
 export type AuditLogFilter = {
-	userId: string,
-	event: string,
-	clientName: string,
-}
+	userId: string;
+	event: string;
+	clientName: string;
+};

frontend/src/routes/+layout.server.ts

@@ -9,7 +9,7 @@ export const load: LayoutServerLoad = async ({ cookies }) => {
 	const appConfigService = new AppConfigService(accessToken);
 
 	const userPromise = userService.getCurrent().catch(() => null);
-	
+
 	const appConfigPromise = appConfigService.list().catch((e) => {
 		console.error(
 			`Failed to get application configuration: ${e.response?.data.error || e.message}`

frontend/src/routes/authorize/+page.svelte

@@ -84,18 +84,21 @@
 {#if client == null}
 	<p>{m.client_not_found()}</p>
 {:else}
-	<SignInWrapper animate={!$appConfigStore.disableAnimations} showAlternativeSignInMethodButton={$userStore == null}>
+	<SignInWrapper
+		animate={!$appConfigStore.disableAnimations}
+		showAlternativeSignInMethodButton={$userStore == null}
+	>
 		<ClientProviderImages {client} {success} error={!!errorMessage} />
 		<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
 			{m.sign_in_to({ name: client.name })}
 		</h1>
 		{#if errorMessage}
-			<p class="text-muted-foreground mb-10 mt-2">
+			<p class="text-muted-foreground mt-2 mb-10">
 				{errorMessage}.
 			</p>
 		{/if}
 		{#if !authorizationRequired && !errorMessage}
-			<p class="text-muted-foreground mb-10 mt-2">
+			<p class="text-muted-foreground mt-2 mb-10">
 				{@html m.do_you_want_to_sign_in_to_client_with_your_app_name_account({
 					client: client.name,
 					appName: $appConfigStore.appName
@@ -103,7 +106,7 @@
 			</p>
 		{:else if authorizationRequired}
 			<div transition:slide={{ duration: 300 }}>
-				<Card.Root class="mb-10 mt-6">
+				<Card.Root class="mt-6 mb-10">
 					<Card.Header class="pb-5">
 						<p class="text-muted-foreground text-start">
 							{@html m.client_wants_to_access_the_following_information({ client: client.name })}

frontend/src/routes/health/+server.ts

@@ -1,2 +1,2 @@
 // /health is an alias of /healthz, for backwards-compatibility reasons
-export {GET} from '../healthz/+server';
+export { GET } from '../healthz/+server';

frontend/src/routes/healthz/+server.ts

@@ -2,17 +2,15 @@ import type { RequestHandler } from '@sveltejs/kit';
 import axios from 'axios';
 
 export const GET: RequestHandler = async () => {
-	const backendOK = await axios
-		.get(process!.env!.INTERNAL_BACKEND_URL + '/healthz')
-		.then(() => true, () => false);
-
-	return new Response(
-		backendOK ? `{"status":"HEALTHY"}` : `{"status":"UNHEALTHY"}`,
-		{
-			status: backendOK ? 200 : 500,
-			headers: {
-				'content-type': 'application/json'
-			}
-		}
+	const backendOK = await axios.get(process!.env!.INTERNAL_BACKEND_URL + '/healthz').then(
+		() => true,
+		() => false
 	);
+
+	return new Response(backendOK ? `{"status":"HEALTHY"}` : `{"status":"UNHEALTHY"}`, {
+		status: backendOK ? 200 : 500,
+		headers: {
+			'content-type': 'application/json'
+		}
+	});
 };

frontend/src/routes/lc/+page.ts

@@ -8,4 +8,4 @@ export const load: PageLoad = async ({ url }) => {
 		targetPath += `?redirect=${encodeURIComponent(url.searchParams.get('redirect')!)}`;
 	}
 	return redirect(307, targetPath);
-}
+};

frontend/src/routes/lc/[code]/+page.ts

@@ -13,4 +13,4 @@ export const load: PageLoad = async ({ url, params }) => {
 	}
 
 	return redirect(307, `${targetPath}?${searchParams.toString()}`);
-}
+};

frontend/src/routes/login/alternative/code/+page.svelte

@@ -68,7 +68,9 @@
 	>
 		<Input id="Email" class="mt-7" placeholder={m.code()} bind:value={code} type="text" />
 		<div class="mt-8 flex justify-stretch gap-2">
-			<Button variant="secondary" class="w-full" href={"/login/alternative" + page.url.search}>{m.go_back()}</Button>
+			<Button variant="secondary" class="w-full" href={'/login/alternative' + page.url.search}
+				>{m.go_back()}</Button
+			>
 			<Button class="w-full" type="submit" {isLoading}>{m.submit()}</Button>
 		</div>
 	</form>

frontend/src/routes/login/alternative/email/+page.svelte

@@ -53,7 +53,9 @@
 			<Button variant="secondary" class="w-full" href={'/login/alternative' + page.url.search}
 				>{m.go_back()}</Button
 			>
-			<Button class="w-full" href={'/login/alternative/code' + page.url.search}>{m.enter_code()}</Button>
+			<Button class="w-full" href={'/login/alternative/code' + page.url.search}
+				>{m.enter_code()}</Button
+			>
 		</div>
 	{:else}
 		<form

frontend/src/routes/settings/+page.ts

@@ -3,4 +3,4 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
 	throw redirect(307, '/settings/account');
-}
+};

frontend/src/routes/settings/account/+page.svelte

@@ -93,7 +93,6 @@
 	</Alert.Root>
 {/if}
 
-
 <!-- Login code card mobile -->
 <div class="block sm:hidden">
 	<Card.Root>
@@ -167,7 +166,6 @@
 	</Card.Root>
 </div>
 
-
 <!-- Login code card -->
 <div class="hidden sm:block">
 	<Card.Root>

frontend/src/routes/settings/account/login-code-modal.svelte

@@ -56,7 +56,7 @@
 			</CopyToClipboard>
 			<div class="text-muted-foreground my-2 flex items-center justify-center gap-3">
 				<Separator />
-				<p class="text-nowrap text-xs">{m.or_visit()}</p>
+				<p class="text-xs text-nowrap">{m.or_visit()}</p>
 				<Separator />
 			</div>