enh: folder filter

src/lib/components/layout/SearchModal.svelte

@@ -29,8 +29,7 @@
 
 	let searchDebounceTimeout;
 
-	let selectedIdx = 0;
-
+	let selectedIdx = null;
 	let selectedChat = null;
 
 	let selectedModels = [''];
@@ -42,7 +41,12 @@
 	}
 
 	const loadChatPreview = async (selectedIdx) => {
-		if (!chatList || chatList.length === 0 || chatList[selectedIdx] === undefined) {
+		if (
+			!chatList ||
+			chatList.length === 0 ||
+			selectedIdx === null ||
+			chatList[selectedIdx] === undefined
+		) {
 			selectedChat = null;
 			messages = null;
 			history = null;
@@ -217,6 +221,10 @@
 				on:input={searchHandler}
 				placeholder={$i18n.t('Search')}
 				showClearButton={true}
+				onFocus={() => {
+					selectedIdx = null;
+					messages = null;
+				}}
 				onKeydown={(e) => {
 					console.log('e', e);
 

src/lib/components/layout/Sidebar.svelte

@@ -10,6 +10,7 @@
 		showSettings,
 		chatId,
 		tags,
+		folders as _folders,
 		showSidebar,
 		showSearch,
 		mobile,
@@ -85,6 +86,7 @@
 			toast.error(`${error}`);
 			return [];
 		});
+		_folders.set(folderList);
 
 		folders = {};
 

src/lib/components/layout/Sidebar/SearchInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getAllTags } from '$lib/apis/chats';
-	import { tags } from '$lib/stores';
+	import { folders, tags } from '$lib/stores';
 	import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import Search from '$lib/components/icons/Search.svelte';
@@ -12,6 +12,8 @@
 	export let placeholder = '';
 	export let value = '';
 	export let showClearButton = false;
+
+	export let onFocus = () => {};
 	export let onKeydown = (e) => {};
 
 	let selectedIdx = 0;
@@ -25,6 +27,10 @@
 			name: 'tag:',
 			description: $i18n.t('search for tags')
 		},
+		{
+			name: 'folder:',
+			description: $i18n.t('search for folders')
+		},
 		{
 			name: 'pinned:',
 			description: $i18n.t('search for pinned chats')
@@ -88,6 +94,30 @@
 						type: 'tag'
 					};
 				});
+		} else if (lastWord.startsWith('folder:')) {
+			filteredItems = [...$folders]
+				.filter((folder) => {
+					const folderName = lastWord.slice(7);
+					if (folderName) {
+						const id = folder.name.replace(' ', '_').toLowerCase();
+						const folderId = folderName.replace(' ', '_').toLowerCase();
+
+						if (id !== folderId) {
+							return id.startsWith(folderId);
+						} else {
+							return false;
+						}
+					} else {
+						return true;
+					}
+				})
+				.map((folder) => {
+					return {
+						id: folder.name.replace(' ', '_').toLowerCase(),
+						name: folder.name,
+						type: 'folder'
+					};
+				});
 		} else if (lastWord.startsWith('pinned:')) {
 			filteredItems = [
 				{
@@ -163,6 +193,7 @@
 				dispatch('input');
 			}}
 			on:focus={() => {
+				onFocus();
 				hovering = false;
 				focused = true;
 				initTags();
@@ -211,6 +242,9 @@
 					selectedIdx = 0;
 				}
 
+				const item = document.querySelector(`[data-selected="true"]`);
+				item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
+
 				if (!document.getElementById('search-options-container')) {
 					onKeydown(e);
 				}
@@ -257,6 +291,7 @@
 								itemIdx
 									? 'bg-gray-100 dark:bg-gray-900'
 									: ''}"
+								data-selected={selectedIdx === itemIdx}
 								id="search-item-{itemIdx}"
 								on:click|stopPropagation={async () => {
 									const words = value.split(' ');