Starting guac clients

src/components/DebouncedInput.tsx

@@ -1,7 +1,5 @@
-import { ActionIcon, TextInput } from '@mantine/core';
+import { TextInput, type TextInputProps } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import { FiX } from 'react-icons/fi';
-import { textInputClasses } from 'styles';
 
 export function DebouncedInput({
 	value: initialValue,
@@ -12,7 +10,7 @@ export function DebouncedInput({
 	value: string | number;
 	onChange: (value: string | number) => void;
 	debounce?: number;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
+} & Omit<TextInputProps, 'onChange'>) {
 	const [value, setValue] = useState(initialValue);
 
 	useEffect(() => {
@@ -25,43 +23,14 @@ export function DebouncedInput({
 		}, debounce);
 
 		return () => clearTimeout(timeout);
-	}, [value, debounce, onChange]);
+	}, [value]);
 
 	return (
 		<TextInput
 			{...props}
 			value={value}
-			size='sm'
-			p={0}
 			onClick={(e) => e.stopPropagation()}
 			onChange={(e) => setValue(e.target.value)}
-			classNames={textInputClasses}
-			styles={{
-				input: {
-					borderRadius: 0,
-					borderStyle: 'none',
-					color: 'var(--mantine-color-primary-0)',
-					'&::placeholder': {
-						color: 'red !important',
-					},
-				},
-				wrapper: {
-					'&::placeholder': {
-						color: 'red !important',
-					},
-				},
-			}}
-			rightSection={
-				value && (
-					<ActionIcon
-						onClick={() => {
-							setValue('');
-						}}
-					>
-						<FiX />
-					</ActionIcon>
-				)
-			}
 		/>
 	);
 }

src/components/SettingsHeader.tsx

@@ -7,7 +7,6 @@ import {
 	Stack,
 	Switch,
 	Text,
-	TextInput,
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
@@ -20,6 +19,7 @@ import {
 	textClasses,
 	textInputClasses,
 } from 'styles';
+import { DebouncedInput } from './DebouncedInput';
 
 export function SettingsHeader({
 	setDragging,
@@ -40,8 +40,8 @@ export function SettingsHeader({
 		highlightList: string[];
 		description: string;
 	};
-	searchValue: string | undefined;
-	setSearchValue: (searchValue: string) => void;
+	searchValue: string | number;
+	setSearchValue: (searchValue: string | number) => void;
 	searchPlaceholder: string | undefined;
 	isLoading: boolean;
 	setIsLoading: (isLoading: boolean) => void;
@@ -120,7 +120,7 @@ export function SettingsHeader({
 				)}
 			</Group>
 			{searchValue !== undefined && (
-				<TextInput
+				<DebouncedInput
 					disabled={disabled}
 					w={isMobile ? undefined : '35%'}
 					pos={isMobile ? undefined : 'absolute'}
@@ -129,9 +129,9 @@ export function SettingsHeader({
 					autoFocus={!isMobile}
 					placeholder={searchPlaceholder ?? 'Search...'}
 					value={searchValue}
-					onInput={(event: any) => {
-						setIsLoading(true);
-						setSearchValue(event.target.value);
+					onInput={() => setIsLoading(true)}
+					onChange={(value: any) => {
+						setSearchValue(value);
 					}}
 					style={{
 						zIndex: 100,