Class SearchBox

src/bases/components/SearchBox.ts:10–221

 * Follows Single Responsibility Principle - only handles UI rendering and user interaction.
 */
export class SearchBox {
	private container: HTMLElement;
	private onSearch: (term: string) => void;
	private debounceMs: number;
	
	private searchBoxEl: HTMLElement | null = null;
	private inputEl: HTMLInputElement | null = null;
	private clearBtnEl: HTMLElement | null = null;

	private debouncedSearch: ((term: string) => void) | null = null;
	private destroyed = false;

	/**
	 * @param container - Parent container element
	 * @param onSearch - Callback function called when search term changes
	 * @param debounceMs - Debounce delay in milliseconds (default: 300)
	 */
	constructor(
		container: HTMLElement,
		onSearch: (term: string) => void,
		debounceMs = 300
	) {
		this.container = container;
		this.onSearch = onSearch;
		this.debounceMs = debounceMs;

		// Create debounced search handler with destroyed check
		this.debouncedSearch = debounce(
			(term: string) => {
				// Don't execute if component has been destroyed
				if (!this.destroyed) {
					this.onSearch(term);
				}
			},
			this.debounceMs,
			false // trailing debounce
		);
	}

	/**
	 * Render the search box UI
	 */
	render(): HTMLElement {
		// Use container's document for pop-out window support
		const doc = this.container.ownerDocument;

		// Create main container
		this.searchBoxEl = doc.createElement('div');
		this.searchBoxEl.className = 'tn-search-box';

		// Create input wrapper
		const inputWrapper = doc.createElement('div');
		inputWrapper.className = 'tn-search-box__input-wrapper';

		// Create search icon using Lucide icon (like Obsidian)
		const icon = doc.createElement('div');
		icon.className = 'tn-search-box__icon';
		setIcon(icon, 'search');