fix(sidebar): allow collapsing search results

This commit is contained in:
t8y2
2026-05-10 14:43:49 +08:00
parent f5b36a0f60
commit 1cd358f3c1
2 changed files with 19 additions and 1 deletions
+16 -1
View File
@@ -21,6 +21,7 @@ const store = useConnectionStore();
const searchQuery = ref("");
const deferredSearchQuery = ref("");
const selectedTypes = ref<string[]>([]);
const searchCollapsedIds = ref<Set<string>>(new Set());
let searchTimer: number | undefined;
watch(
@@ -41,6 +42,7 @@ watch(
{ flush: "sync" },
);
const isSearching = computed(() => !!deferredSearchQuery.value);
const isFiltering = computed(() => !!searchQuery.value.trim() || hasTypeFilter.value);
const typeStats = computed(() => {
@@ -100,7 +102,11 @@ function filterTree(nodes: TreeNode[], q: string): TreeNode[] {
filteredNodes.push(node);
} else {
const children = filteredChildren ?? [];
filteredNodes.push({ ...node, children, isExpanded: children.length > 0 });
filteredNodes.push({
...node,
children,
isExpanded: children.length > 0 && !searchCollapsedIds.value.has(node.id),
});
}
}
}
@@ -145,6 +151,14 @@ function createNewGroup() {
const groupId = store.createConnectionGroup(t("connectionGroup.newGroupDefault"));
pendingRenameGroupId.value = groupId;
}
function onSearchToggle(node: TreeNode) {
if (!isSearching.value || !node.children) return;
const next = new Set(searchCollapsedIds.value);
if (node.isExpanded) next.add(node.id);
else next.delete(node.id);
searchCollapsedIds.value = next;
}
</script>
<template>
@@ -219,6 +233,7 @@ function createNewGroup() {
:depth="0"
:drag-disabled="isFiltering"
:pending-rename="pendingRenameGroupId === node.id"
@search-toggle="onSearchToggle"
@rename-started="pendingRenameGroupId = null"
/>
<div v-if="store.treeNodes.length === 0" class="px-3 py-8 text-center text-muted-foreground text-xs">
+3
View File
@@ -106,6 +106,7 @@ const props = defineProps<{
const emit = defineEmits<{
"rename-started": [];
"search-toggle": [node: TreeNode];
}>();
const isExportingDatabase = ref(false);
@@ -212,6 +213,7 @@ function isGroupLabel(node: TreeNode): boolean {
async function toggle() {
const node = props.node;
if (node.isLoading) return;
emit("search-toggle", node);
if (node.type === "connection-group") {
node.isExpanded = !node.isExpanded;
@@ -1396,6 +1398,7 @@ const isDragging = computed(() => dragState.active && dragState.draggedId === pr
:node="child"
:depth="depth + 1"
:drag-disabled="dragDisabled"
@search-toggle="emit('search-toggle', $event)"
/>
<div
v-if="hasMoreChildren"