From 7a867906704ab00db52f4866c9de44c8700ac15d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 1 Dec 2025 03:17:17 -0800
Subject: [PATCH] weapons: add recruits character search field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add CharacterTypeahead component for async character search using Svelecte.
The component debounces input and queries the search API for matching
characters. Added recruits field to weapon creation page.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/ui/CharacterTypeahead.svelte   | 191 ++++++++++++++++++
 .../(app)/database/weapons/new/+page.svelte   |   7 +
 2 files changed, 198 insertions(+)
 create mode 100644 src/lib/components/ui/CharacterTypeahead.svelte

diff --git a/src/lib/components/ui/CharacterTypeahead.svelte b/src/lib/components/ui/CharacterTypeahead.svelte
new file mode 100644
index 00000000..a8aa39ba
--- /dev/null
+++ b/src/lib/components/ui/CharacterTypeahead.svelte
@@ -0,0 +1,191 @@
+<!-- CharacterTypeahead Component - Async character search with Svelecte -->
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import Svelecte from 'svelecte'
+	import { searchAdapter, type SearchResult } from '$lib/api/adapters/search.adapter'
+
+	interface CharacterOption {
+		id: string
+		label: string
+		granblueId: string
+		element?: number
+	}
+
+	interface Props {
+		/** Selected character ID */
+		value?: string | null
+		/** Callback when value changes */
+		onValueChange?: (characterId: string | null) => void
+		/** Placeholder text */
+		placeholder?: string
+		/** Disabled state */
+		disabled?: boolean
+		/** Component size */
+		size?: 'small' | 'medium' | 'large'
+		/** Clear button visible */
+		clearable?: boolean
+		/** Minimum characters before search */
+		minQuery?: number
+	}
+
+	let {
+		value = $bindable(null),
+		onValueChange,
+		placeholder = 'Search characters...',
+		disabled = false,
+		size = 'medium',
+		clearable = true,
+		minQuery = 2
+	}: Props = $props()
+
+	let options = $state<CharacterOption[]>([])
+	let isLoading = $state(false)
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+	const typeaheadClasses = $derived(
+		['character-typeahead', size, disabled && 'disabled'].filter(Boolean).join(' ')
+	)
+
+	async function searchCharacters(query: string) {
+		if (query.length < minQuery) {
+			options = []
+			return
+		}
+
+		isLoading = true
+		try {
+			const response = await searchAdapter.searchCharacters({
+				query,
+				per: 20,
+				locale: 'en'
+			})
+
+			options = response.results.map((result: SearchResult) => ({
+				id: result.id,
+				label: result.name?.en || result.name?.ja || result.granblueId,
+				granblueId: result.granblueId,
+				element: result.element
+			}))
+		} catch (error) {
+			console.error('Character search error:', error)
+			options = []
+		} finally {
+			isLoading = false
+		}
+	}
+
+	function handleInput(event: CustomEvent) {
+		const query = (event.detail as { inputValue?: string })?.inputValue ?? ''
+
+		// Debounce the search
+		if (searchTimeout) {
+			clearTimeout(searchTimeout)
+		}
+
+		searchTimeout = setTimeout(() => {
+			searchCharacters(query)
+		}, 300)
+	}
+
+	function handleChange(event: CustomEvent) {
+		// Svelecte emits the selected option directly in event.detail
+		const selected = event.detail as CharacterOption | null
+		const newValue = selected?.id || null
+		value = newValue
+		onValueChange?.(newValue)
+	}
+
+	// Compute current value for Svelecte display
+	const displayValue = $derived.by(() => {
+		if (!value) return null
+		const found = options.find((o) => o.id === value)
+		if (found) return found
+		// If we have a value but it's not in options, show placeholder
+		return { id: value, label: value, granblueId: '' } as CharacterOption
+	})
+</script>
+
+<div class={typeaheadClasses}>
+	<Svelecte
+		{options}
+		value={displayValue}
+		labelField="label"
+		valueField="id"
+		searchable={true}
+		{placeholder}
+		{disabled}
+		{clearable}
+		on:input={handleInput}
+		on:change={handleChange}
+		keepSelectionInList={false}
+	/>
+	{#if isLoading}
+		<span class="loading-indicator">...</span>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/layout' as *;
+
+	.character-typeahead {
+		position: relative;
+		width: 100%;
+
+		// Svelecte overrides
+		--sv-bg: var(--input-bg);
+		--sv-border-color: transparent;
+		--sv-border: 2px solid var(--sv-border-color);
+		--sv-active-border: 2px solid #{$blue};
+		--sv-active-outline: none;
+		--sv-border-radius: #{$input-corner};
+		--sv-min-height: calc(#{$unit} * 5.5);
+		--sv-placeholder-color: var(--text-tertiary);
+		--sv-color: var(--text-primary);
+
+		--sv-dropdown-bg: var(--dialog-bg);
+		--sv-dropdown-border-radius: #{$card-corner};
+		--sv-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		--sv-dropdown-offset: #{$unit-half};
+
+		--sv-item-color: var(--text-primary);
+		--sv-item-active-bg: var(--option-bg-hover);
+		--sv-item-selected-bg: var(--option-bg-hover);
+
+		--sv-icon-color: var(--text-secondary);
+		--sv-icon-hover-color: var(--text-primary);
+
+		&.disabled {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+	}
+
+	.character-typeahead.small {
+		--sv-min-height: calc(#{$unit} * 3.5);
+		--sv-font-size: #{$font-small};
+	}
+
+	.character-typeahead.medium {
+		--sv-min-height: calc(#{$unit} * 5.5);
+		--sv-font-size: #{$font-regular};
+	}
+
+	.character-typeahead.large {
+		--sv-min-height: calc(#{$unit} * 6.5);
+		--sv-font-size: #{$font-large};
+	}
+
+	.loading-indicator {
+		position: absolute;
+		right: $unit-3x;
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--text-tertiary);
+		font-size: $font-small;
+		pointer-events: none;
+	}
+</style>
diff --git a/src/routes/(app)/database/weapons/new/+page.svelte b/src/routes/(app)/database/weapons/new/+page.svelte
index 1b945126..af297be1 100644
--- a/src/routes/(app)/database/weapons/new/+page.svelte
+++ b/src/routes/(app)/database/weapons/new/+page.svelte
@@ -14,6 +14,7 @@
 	import Button from '$lib/components/ui/Button.svelte'
 	import ValidatedInput from '$lib/components/ui/ValidatedInput.svelte'
 	import TagInput from '$lib/components/ui/TagInput.svelte'
+	import CharacterTypeahead from '$lib/components/ui/CharacterTypeahead.svelte'
 	import { entityAdapter } from '$lib/api/adapters/entity.adapter'
 	import { getRarityOptions } from '$lib/utils/rarity'
 
@@ -285,6 +286,12 @@
 			</DetailItem>
 		</DetailsContainer>
 
+		<DetailsContainer title="Recruits">
+			<DetailItem label="Recruits Character" sublabel="Character recruited by this weapon">
+				<CharacterTypeahead bind:value={editData.recruits} placeholder="Search for character..." />
+			</DetailItem>
+		</DetailsContainer>
+
 		<DetailsContainer title="Dates">
 			<DetailItem
 				label="Release Date"