1<script lang="ts">
 2	import { Search, SquarePen, X } from '@lucide/svelte';
 3	import { KeyboardShortcutInfo } from '$lib/components/app';
 4	import { Button } from '$lib/components/ui/button';
 5	import { Input } from '$lib/components/ui/input';
 6
 7	interface Props {
 8		handleMobileSidebarItemClick: () => void;
 9		isSearchModeActive: boolean;
10		searchQuery: string;
11	}
12
13	let {
14		handleMobileSidebarItemClick,
15		isSearchModeActive = $bindable(),
16		searchQuery = $bindable()
17	}: Props = $props();
18
19	let searchInput: HTMLInputElement | null = $state(null);
20
21	function handleSearchModeDeactivate() {
22		isSearchModeActive = false;
23		searchQuery = '';
24	}
25
26	$effect(() => {
27		if (isSearchModeActive) {
28			searchInput?.focus();
29		}
30	});
31</script>
32
33<div class="space-y-0.5">
34	{#if isSearchModeActive}
35		<div class="relative">
36			<Search class="absolute top-2.5 left-2 h-4 w-4 text-muted-foreground" />
37
38			<Input
39				bind:ref={searchInput}
40				bind:value={searchQuery}
41				onkeydown={(e) => e.key === 'Escape' && handleSearchModeDeactivate()}
42				placeholder="Search conversations..."
43				class="pl-8"
44			/>
45
46			<X
47				class="cursor-pointertext-muted-foreground absolute top-2.5 right-2 h-4 w-4"
48				onclick={handleSearchModeDeactivate}
49			/>
50		</div>
51	{:else}
52		<Button
53			class="w-full justify-between hover:[&>kbd]:opacity-100"
54			href="?new_chat=true#/"
55			onclick={handleMobileSidebarItemClick}
56			variant="ghost"
57		>
58			<div class="flex items-center gap-2">
59				<SquarePen class="h-4 w-4" />
60				New chat
61			</div>
62
63			<KeyboardShortcutInfo keys={['shift', 'cmd', 'o']} />
64		</Button>
65
66		<Button
67			class="w-full justify-between hover:[&>kbd]:opacity-100"
68			onclick={() => {
69				isSearchModeActive = true;
70			}}
71			variant="ghost"
72		>
73			<div class="flex items-center gap-2">
74				<Search class="h-4 w-4" />
75				Search conversations
76			</div>
77
78			<KeyboardShortcutInfo keys={['cmd', 'k']} />
79		</Button>
80	{/if}
81</div>