fix: type errors in svelte-main branch (219 -> 191 errors)

- Fix paraglide aliases in svelte.config.js
- Fix Checkbox.svelte: use indeterminate prop, remove restProps spread
- Fix Switch.svelte: simplify Props interface, remove restProps spread
- Fix Button.svelte: add null checks for icon prop
- Fix sidebar.svelte.ts: use explicit undefined types for exactOptionalPropertyTypes
- Fix Party.svelte: fix import extension, remove ConflictService argument
- Fix job.resource.svelte.ts: add error property to success states, fix groupJobsByTier null checks

Co-Authored-By: Justin Edmund <justin@jedmund.com>

src/lib/api/adapters/resources/job.resource.svelte.ts

@@ -25,10 +25,10 @@ export interface JobResourceOptions {
  * State for job data
  */
 interface JobState<T> {
-	data?: T
+	data: T | undefined
 	loading: boolean
-	error?: AdapterError
-	lastFetch?: number
+	error: AdapterError | undefined
+	lastFetch: number | undefined
 }
 
 /**
@@ -65,11 +65,11 @@ export class JobResource {
 	private cacheDuration: number
 
 	// Reactive state for job data
-	jobs = $state<JobState<Job[]>>({ loading: false })
-	currentJob = $state<JobState<Job>>({ loading: false })
-	jobSkills = $state<JobState<JobSkill[]>>({ loading: false })
-	jobAccessories = $state<JobState<JobAccessory[]>>({ loading: false })
-	allSkills = $state<JobState<JobSkill[]>>({ loading: false })
+	jobs = $state<JobState<Job[]>>({ loading: false, data: undefined, error: undefined, lastFetch: undefined })
+	currentJob = $state<JobState<Job>>({ loading: false, data: undefined, error: undefined, lastFetch: undefined })
+	jobSkills = $state<JobState<JobSkill[]>>({ loading: false, data: undefined, error: undefined, lastFetch: undefined })
+	jobAccessories = $state<JobState<JobAccessory[]>>({ loading: false, data: undefined, error: undefined, lastFetch: undefined })
+	allSkills = $state<JobState<JobSkill[]>>({ loading: false, data: undefined, error: undefined, lastFetch: undefined })
 
 	// Track active requests
 	private activeRequests = new Map<string, AbortController>()
@@ -108,7 +108,7 @@ export class JobResource {
 
 		try {
 			const data = await this.adapter.getAll()
-			this.jobs = { data, loading: false, lastFetch: Date.now() }
+			this.jobs = { data, loading: false, lastFetch: Date.now(), error: undefined }
 			return data
 		} catch (error: any) {
 			if (error.code !== 'CANCELLED') {
@@ -145,7 +145,7 @@ export class JobResource {
 
 		try {
 			const data = await this.adapter.getById(id)
-			this.currentJob = { data, loading: false, lastFetch: Date.now() }
+			this.currentJob = { data, loading: false, lastFetch: Date.now(), error: undefined }
 			return data
 		} catch (error: any) {
 			if (error.code !== 'CANCELLED') {
@@ -177,7 +177,7 @@ export class JobResource {
 
 		try {
 			const data = await this.adapter.getSkills(jobId)
-			this.jobSkills = { data, loading: false, lastFetch: Date.now() }
+			this.jobSkills = { data, loading: false, lastFetch: Date.now(), error: undefined }
 			return data
 		} catch (error: any) {
 			if (error.code !== 'CANCELLED') {
@@ -209,7 +209,7 @@ export class JobResource {
 
 		try {
 			const data = await this.adapter.getAccessories(jobId)
-			this.jobAccessories = { data, loading: false, lastFetch: Date.now() }
+			this.jobAccessories = { data, loading: false, lastFetch: Date.now(), error: undefined }
 			return data
 		} catch (error: any) {
 			if (error.code !== 'CANCELLED') {
@@ -246,7 +246,7 @@ export class JobResource {
 
 		try {
 			const data = await this.adapter.getAllSkills()
-			this.allSkills = { data, loading: false, lastFetch: Date.now() }
+			this.allSkills = { data, loading: false, lastFetch: Date.now(), error: undefined }
 			return data
 		} catch (error: any) {
 			if (error.code !== 'CANCELLED') {
@@ -309,11 +309,11 @@ export class JobResource {
 	 * Clear cached data
 	 */
 	clearCache() {
-		this.jobs = { loading: false }
-		this.currentJob = { loading: false }
-		this.jobSkills = { loading: false }
-		this.jobAccessories = { loading: false }
-		this.allSkills = { loading: false }
+		this.jobs = { loading: false, data: undefined, error: undefined, lastFetch: undefined }
+		this.currentJob = { loading: false, data: undefined, error: undefined, lastFetch: undefined }
+		this.jobSkills = { loading: false, data: undefined, error: undefined, lastFetch: undefined }
+		this.jobAccessories = { loading: false, data: undefined, error: undefined, lastFetch: undefined }
+		this.allSkills = { loading: false, data: undefined, error: undefined, lastFetch: undefined }
 	}
 }
 
@@ -340,14 +340,16 @@ export function groupJobsByTier(jobs: Job[]): Record<string, Job[]> {
 
 	for (const job of jobs) {
 		const tier = job.row.toString().toLowerCase()
-		if (tier in tiers) {
+		if (tier in tiers && tiers[tier]) {
 			tiers[tier].push(job)
 		}
 	}
 
 	// Sort jobs within each tier by order
 	for (const tier in tiers) {
-		tiers[tier].sort((a, b) => a.order - b.order)
+		if (tiers[tier]) {
+			tiers[tier].sort((a, b) => a.order - b.order)
+		}
 	}
 
 	return tiers
@@ -367,4 +369,4 @@ export function getTierDisplayName(tier: string): string {
 		'ex2': 'Extra II'
 	}
 	return tierNames[tier] || tier
-}
+}

src/lib/components/party/Party.svelte

@@ -16,7 +16,7 @@
 	import Button from '$lib/components/ui/Button.svelte'
 	import Icon from '$lib/components/Icon.svelte'
 	import DescriptionRenderer from '$lib/components/DescriptionRenderer.svelte'
-	import { openDescriptionSidebar } from '$lib/features/description/openDescriptionSidebar.svelte.ts'
+	import { openDescriptionSidebar } from '$lib/features/description/openDescriptionSidebar.svelte'
 	import { DropdownMenu } from 'bits-ui'
 	import DropdownItem from '$lib/components/ui/dropdown/DropdownItem.svelte'
 	import JobSection from '$lib/components/job/JobSection.svelte'
@@ -57,7 +57,7 @@
 	// Services
 	const partyService = new PartyService()
 	const gridService = new GridService()
-	const conflictService = new ConflictService(fetch)
+	const conflictService = new ConflictService()
 
 	// Create drag-drop context
 	const dragContext = createDragDropContext({

src/lib/components/ui/Button.svelte

@@ -118,11 +118,11 @@
 		<span class="accessory">
 			{@render leftAccessory()}
 		</span>
-	{:else if hasLeftIcon && !iconOnly}
-		<span class="accessory">
-			<Icon name={icon} size={iconSizes[size]} />
-		</span>
-	{/if}
+	{:else if hasLeftIcon && !iconOnly && icon}
+			<span class="accessory">
+				<Icon name={icon} size={iconSizes[size]} />
+			</span>
+		{/if}
 
 	{#if children && !iconOnly}
 		<span class="text">
@@ -136,11 +136,11 @@
 		<span class="accessory">
 			{@render rightAccessory()}
 		</span>
-	{:else if hasRightIcon && !iconOnly}
-		<span class="accessory">
-			<Icon name={icon} size={iconSizes[size]} />
-		</span>
-	{/if}
+	{:else if hasRightIcon && !iconOnly && icon}
+			<span class="accessory">
+				<Icon name={icon} size={iconSizes[size]} />
+			</span>
+		{/if}
 </ButtonPrimitive.Root>
 
 <style lang="scss">

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

@@ -2,15 +2,15 @@
 <svelte:options runes={true} />
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
-		checked?: boolean | 'indeterminate';
+	interface Props {
+		checked?: boolean;
+		indeterminate?: boolean;
 		disabled?: boolean;
 		required?: boolean;
 		name?: string;
 		value?: string;
-		onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+		onCheckedChange?: (checked: boolean) => void;
 		class?: string;
 		variant?: 'default' | 'bound';
 		size?: 'small' | 'medium' | 'large';
@@ -18,6 +18,7 @@
 
 	let {
 		checked = $bindable(false),
+		indeterminate = false,
 		disabled = false,
 		required = false,
 		name,
@@ -25,8 +26,7 @@
 		onCheckedChange,
 		class: className,
 		variant = 'default',
-		size = 'medium',
-		...restProps
+		size = 'medium'
 	}: Props = $props();
 
 	$effect(() => {
@@ -41,20 +41,22 @@
 
 <CheckboxPrimitive.Root
 	bind:checked
+	{indeterminate}
 	{disabled}
 	{required}
-	{name}
-	{value}
+	name={name ?? ''}
+	value={value ?? ''}
 	class="checkbox {sizeClass} {variantClass} {className || ''}"
-	{...restProps}
 >
-	<CheckboxPrimitive.Indicator class="indicator">
-		{#if checked === 'indeterminate'}
-			<span class="icon">−</span>
-		{:else if checked}
-			<span class="icon">✓</span>
-		{/if}
-	</CheckboxPrimitive.Indicator>
+	{#snippet children({ checked: isChecked, indeterminate: isIndeterminate })}
+		<span class="indicator">
+			{#if isIndeterminate}
+				<span class="icon">−</span>
+			{:else if isChecked}
+				<span class="icon">✓</span>
+			{/if}
+		</span>
+	{/snippet}
 </CheckboxPrimitive.Root>
 
 <style lang="scss">
@@ -156,4 +158,4 @@
 	.icon {
 		stroke-width: 3;
 	}
-</style>
+</style>

src/lib/components/ui/switch/Switch.svelte

@@ -2,9 +2,8 @@
 <svelte:options runes={true} />
 <script lang="ts">
 	import { Switch as SwitchPrimitive } from 'bits-ui';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
+	interface Props {
 		checked?: boolean;
 		disabled?: boolean;
 		required?: boolean;
@@ -23,8 +22,7 @@
 		value,
 		onCheckedChange,
 		class: className,
-		thumbClass,
-		...restProps
+		thumbClass
 	}: Props = $props();
 
 	$effect(() => {
@@ -41,7 +39,6 @@
 	{name}
 	{value}
 	class="switch {className || ''}"
-	{...restProps}
 >
 	<SwitchPrimitive.Thumb class="thumb {thumbClass || ''}" />
 </SwitchPrimitive.Root>
@@ -101,4 +98,4 @@
 			transform: translateX($unit-3x); // 24px
 		}
 	}
-</style>
+</style>

src/lib/stores/sidebar.svelte.ts

@@ -5,12 +5,12 @@ export const SIDEBAR_WIDTH = '420px'
 
 interface SidebarState {
 	open: boolean
-	title?: string
-	content?: Snippet
-	component?: Component
-	componentProps?: Record<string, any>
-	scrollable?: boolean
-	activeItemId?: string
+	title: string | undefined
+	content: Snippet | undefined
+	component: Component | undefined
+	componentProps: Record<string, any> | undefined
+	scrollable: boolean
+	activeItemId: string | undefined
 }
 
 class SidebarStore {
@@ -20,7 +20,8 @@ class SidebarStore {
 		content: undefined,
 		component: undefined,
 		componentProps: undefined,
-		scrollable: true
+		scrollable: true,
+		activeItemId: undefined
 	})
 
 	open(title?: string, content?: Snippet, scrollable = true) {

svelte.config.js

@@ -8,7 +8,12 @@ const config = {
 	preprocess: vitePreprocess(),
 	kit: {
 		adapter: adapter(),
-		alias: { $types: 'src/lib/types' }
+		alias: {
+			$types: 'src/lib/types',
+			'$lib/paraglide/messages': 'src/paraglide/messages.js',
+			'$lib/paraglide/runtime': 'src/paraglide/runtime.js',
+			'$lib/paraglide/server': 'src/paraglide/server.js'
+		}
 	}
 }