diff --git a/webclient/src/components/sidebar/AppSidebar.vue b/webclient/src/components/sidebar/AppSidebar.vue index 630b80b..0a7c26d 100644 --- a/webclient/src/components/sidebar/AppSidebar.vue +++ b/webclient/src/components/sidebar/AppSidebar.vue @@ -33,6 +33,7 @@ :class="{ 'is-loading': sessionsStore.loading && sessionsStore.searchActive }" > chatStore.currentProfileId, @@ -142,10 +151,12 @@ // Toggle search UI function toggleSearch() { searchOpen.value = !searchOpen.value - if (searchOpen.value && sessionsStore.searchQuery) { - searchInput.value = sessionsStore.searchQuery - sessionsStore.setSearch(sessionsStore.searchQuery) - sessionsStore.fetchSessions() + if (searchOpen.value) { + setTimeout(focusSearchInput, 50) + if (sessionsStore.searchQuery) { + searchInput.value = sessionsStore.searchQuery + sessionsStore.restoreSearch() + } } } @@ -258,7 +269,7 @@ } &.is-loading :deep(.input-group-addon .ph) { - visibility: hidden; + opacity: 0; } &.is-loading :deep(.input-group-addon)::after { diff --git a/webclient/src/components/sidebar/SessionList.vue b/webclient/src/components/sidebar/SessionList.vue index 67f8953..d3c505f 100644 --- a/webclient/src/components/sidebar/SessionList.vue +++ b/webclient/src/components/sidebar/SessionList.vue @@ -36,6 +36,7 @@ { + const prefix = sessionsStore.searchActive ? 'search' : 'all' + const firstId = sessionsStore.sessions[0]?.session_id ?? 'none' + return `${prefix}-${firstId}-${sessionsStore.sessions.length}` +}) + watch( () => profilesStore.selectedProfileId, (profileId) => { diff --git a/webclient/src/stores/sessions.js b/webclient/src/stores/sessions.js index 371b71a..a0bd586 100644 --- a/webclient/src/stores/sessions.js +++ b/webclient/src/stores/sessions.js @@ -12,6 +12,7 @@ const currentProfileId = ref(null) const searchQuery = ref('') const searchActive = ref(false) + const searchCache = ref(null) async function fetchSessions(profileId = null) { currentProfileId.value = profileId @@ -27,6 +28,14 @@ sessions.value = items hasMore.value = Array.isArray(page) ? false : page.has_more nextOffset.value = Array.isArray(page) ? items.length : page.next_offset + if (searchActive.value) { + searchCache.value = { + query: searchQuery.value, + items: [...items], + hasMore: hasMore.value, + nextOffset: nextOffset.value + } + } } finally { loading.value = false } @@ -50,6 +59,14 @@ ] hasMore.value = Array.isArray(page) ? false : page.has_more nextOffset.value = Array.isArray(page) ? sessions.value.length : page.next_offset + if (searchActive.value) { + searchCache.value = { + query: searchQuery.value, + items: [...sessions.value], + hasMore: hasMore.value, + nextOffset: nextOffset.value + } + } } finally { loadingMore.value = false } @@ -60,9 +77,22 @@ searchActive.value = query.length > 0 } + function restoreSearch() { + if (!searchQuery.value) return + searchActive.value = true + if (searchCache.value && searchCache.value.query === searchQuery.value) { + sessions.value = searchCache.value.items + hasMore.value = searchCache.value.hasMore + nextOffset.value = searchCache.value.nextOffset + } else { + fetchSessions() + } + } + function clearSearch() { searchQuery.value = '' searchActive.value = false + searchCache.value = null } function exitSearch() { @@ -128,7 +158,9 @@ updatePreview, updateName, setSearch, + restoreSearch, clearSearch, - exitSearch + exitSearch, + searchCache } })