Combobox

<script lang="ts">
	import Combobox from '#lib/ui/Combobox.svelte';

	let city = $state('');
	const cities = [
		'Aleppo',
		'Baghdad',
		'Balkh',
		'Basra',
		'Bukhara',
		'Cairo',
		'Córdoba',
		'Damascus',
		'Fez',
		'Isfahan',
		'Kairouan',
		'Merv',
		'Nīshāpūr',
		'Palermo',
		'Rayy',
		'Samarkand',
		'Toledo'
	].map((label) => ({ value: label.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase(), label }));
</script>

<Combobox
	label="City of study"
	placeholder="Search cities"
	options={cities}
	bind:value={city}
	name="city"
/>

<script lang="ts">
	import Combobox from '#lib/ui/Combobox.svelte';

	let scholar = $state('ibn-sina');
	const scholars = [
		{ value: 'khwarizmi', label: 'Al-Khwārizmī', description: 'Algebra · Baghdad' },
		{ value: 'kindi', label: 'Al-Kindī', description: 'Philosophy · Baghdad' },
		{ value: 'razi', label: 'Al-Rāzī', description: 'Medicine · Rayy' },
		{ value: 'ibn-sina', label: 'Ibn Sīnā', description: 'Medicine · Bukhara' },
		{ value: 'haytham', label: 'Ibn al-Haytham', description: 'Optics · Cairo' },
		{ value: 'biruni', label: 'Al-Bīrūnī', description: 'Astronomy · Ghazni' },
		{ value: 'zahrawi', label: 'Al-Zahrāwī', description: 'Surgery · Córdoba' },
		{ value: 'khayyam', label: 'Omar Khayyām', description: 'Mathematics · Nīshāpūr' },
		{ value: 'idrisi', label: 'Al-Idrīsī', description: 'Geography · Palermo' },
		{
			value: 'ibn-battuta',
			label: 'Ibn Baṭṭūṭa',
			description: 'Away on a journey',
			disabled: true
		}
	];
</script>

<Combobox
	label="Scholar"
	options={scholars}
	bind:value={scholar}
	hint="Try “sina” or “haytham”: accents don't matter."
/>

<script lang="ts">
	import CustomSelect from '#lib/ui/CustomSelect.svelte';

	const scholars = [
		['Abbas ibn Firnas', 'Flight, Córdoba'],
		['Al-Battani', 'Astronomy, Raqqa'],
		['Al-Biruni', 'Astronomy, Ghazni'],
		['Al-Farabi', 'Philosophy, Baghdad'],
		['Al-Idrisi', 'Geography, Palermo'],
		['Al-Jazari', 'Engineering, Diyarbakır'],
		['Al-Khwarizmi', 'Mathematics, Baghdad'],
		['Al-Kindi', 'Philosophy, Baghdad'],
		['Al-Razi', 'Medicine, Rayy'],
		['Al-Zahrawi', 'Surgery, Córdoba'],
		['Banu Musa', 'Mechanics, Baghdad'],
		['Fatima al-Fihri', 'Founded al-Qarawiyyin, Fez'],
		['Ibn al-Haytham', 'Optics, Cairo'],
		['Ibn Battuta', 'Travel, Tangier'],
		['Ibn Khaldun', 'History, Tunis'],
		['Ibn Rushd', 'Philosophy, Córdoba'],
		['Ibn Sina', 'Medicine, Bukhara'],
		['Maryam al-Ijliya', 'Astrolabes, Aleppo'],
		['Nasir al-Din al-Tusi', 'Astronomy, Maragheh'],
		['Omar Khayyam', 'Mathematics, Nishapur'],
		['Sutayta al-Mahamali', 'Mathematics, Baghdad'],
		['Thabit ibn Qurra', 'Mathematics, Baghdad']
	].map(([label, description]) => ({
		value: label.toLowerCase().replace(/\W+/g, '-'),
		label,
		description
	}));
	let mentor = $state('');
</script>

<CustomSelect
	label="Mentor"
	options={scholars}
	bind:value={mentor}
	placeholder="Choose a scholar"
	searchable
	searchLabel="Search scholars"
	empty="No scholar by that name"
/>

<script lang="ts">
	import { QueryClient, createInfiniteQuery } from '@tanstack/svelte-query';
	import Combobox from '#lib/ui/Combobox.svelte';

	// Stands in for your API: 10,000 catalog entries, searched on the "server", 40 to a page.
	const subjects = [
		'Optics',
		'Algebra',
		'Medicine',
		'Astronomy',
		'Geography',
		'Poetry',
		'Logic',
		'Music'
	];
	const cities = [
		'Baghdad',
		'Cairo',
		'Córdoba',
		'Fez',
		'Damascus',
		'Bukhara',
		'Samarkand',
		'Isfahan'
	];
	const catalog = Array.from({ length: 10_000 }, (_, i) => ({
		value: `ms-${i + 1}`,
		label: `${subjects[i % 8]}, ${cities[Math.floor(i / 8) % 8]} copy ${Math.floor(i / 64) + 1}`,
		description: `Shelf ${(i % 400) + 1}`
	}));
	const fold = (s: string) => s.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
	async function fetchPage(search: string, page: number) {
		await new Promise((r) => setTimeout(r, 350));
		const q = fold(search.trim());
		const hits = q ? catalog.filter((m) => fold(m.label).includes(q)) : catalog;
		const next = (page + 1) * 40 < hits.length ? page + 1 : undefined;
		return { items: hits.slice(page * 40, page * 40 + 40), next };
	}

	const client = new QueryClient();
	let search = $state('');
	let timer: ReturnType<typeof setTimeout>;
	// A short pause after typing, so a word is one request rather than one per letter.
	const onsearch = (q: string) => {
		clearTimeout(timer);
		timer = setTimeout(() => (search = q), 200);
	};

	const query = createInfiniteQuery(
		() => ({
			queryKey: ['catalog', search],
			queryFn: ({ pageParam }) => fetchPage(search, pageParam),
			initialPageParam: 0,
			getNextPageParam: (last) => last.next
		}),
		() => client
	);
	const options = $derived(query.data?.pages.flatMap((p) => p.items) ?? []);
	let manuscript = $state('');
</script>

<Combobox
	label="Manuscript"
	placeholder="Search the catalog"
	hint="10,000 entries, loaded 40 at a time as you scroll."
	{options}
	bind:value={manuscript}
	{onsearch}
	onloadmore={() => query.hasNextPage && !query.isFetchingNextPage && query.fetchNextPage()}
	loading={query.isFetching}
/>

<script lang="ts">
	import Combobox from '#lib/ui/Combobox.svelte';

	let room = $state('');
	const rooms = [
		{ value: 'bayt', label: 'Bayt al-Ḥikma, Baghdad' },
		{ value: 'qarawiyyin', label: 'Al-Qarawiyyīn, Fez' },
		{ value: 'azhar', label: 'Al-Azhar, Cairo' }
	];
</script>

<Combobox
	label="Reading room"
	options={rooms}
	bind:value={room}
	error={room ? undefined : 'Choose where to collect the manuscript.'}
/>