From 34fce0ef58b39f300624c39bcf25353605142b31 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 25 Sep 2021 13:07:38 +0200
Subject: [PATCH] better quick search UX (preserves expanded state()

---
 packages/web/src/appobj/AppObjectGroup.svelte |  3 +-
 packages/web/src/appobj/AppObjectList.svelte  |  3 +-
 .../web/src/appobj/AppObjectListItem.svelte   | 31 ++++++++++---------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/appobj/AppObjectGroup.svelte b/packages/web/src/appobj/AppObjectGroup.svelte
index 4b87aaa85..b8fdd6253 100644
--- a/packages/web/src/appobj/AppObjectGroup.svelte
+++ b/packages/web/src/appobj/AppObjectGroup.svelte
@@ -52,8 +52,9 @@
     </div>
   {/if}
 
-  {#each filtered as item}
+  {#each items as item}
     <AppObjectListItem
+      isHidden={!item.isMatched}
       {...$$restProps}
       {module}
       data={item.data}
diff --git a/packages/web/src/appobj/AppObjectList.svelte b/packages/web/src/appobj/AppObjectList.svelte
index 8fb6f190e..b17349a3d 100644
--- a/packages/web/src/appobj/AppObjectList.svelte
+++ b/packages/web/src/appobj/AppObjectList.svelte
@@ -69,8 +69,9 @@
     />
   {/each}
 {:else}
-  {#each filtered as data}
+  {#each list as data}
     <AppObjectListItem
+      isHidden={!filtered.includes(data)}
       {module}
       {subItemsComponent}
       {expandOnClick}
diff --git a/packages/web/src/appobj/AppObjectListItem.svelte b/packages/web/src/appobj/AppObjectListItem.svelte
index 4594551f4..b4ff22bee 100644
--- a/packages/web/src/appobj/AppObjectListItem.svelte
+++ b/packages/web/src/appobj/AppObjectListItem.svelte
@@ -10,6 +10,7 @@
   import { tick } from 'svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
 
+  export let isHidden;
   export let filter;
   export let module;
   export let data;
@@ -38,21 +39,23 @@
   $: if (!expandable && isExpanded) isExpanded = false;
 </script>
 
-<svelte:component
-  this={module.default}
-  {data}
-  on:click={handleExpand}
-  on:expand={handleExpandButton}
-  expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
-  {checkedObjectsStore}
-  {module}
-  {disableContextMenu}
-/>
+{#if !isHidden}
+  <svelte:component
+    this={module.default}
+    {data}
+    on:click={handleExpand}
+    on:expand={handleExpandButton}
+    expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
+    {checkedObjectsStore}
+    {module}
+    {disableContextMenu}
+  />
 
-{#if isExpanded && subItemsComponent}
-  <div class="subitems">
-    <svelte:component this={subItemsComponent} {data} {filter} />
-  </div>
+  {#if isExpanded && subItemsComponent}
+    <div class="subitems">
+      <svelte:component this={subItemsComponent} {data} {filter} />
+    </div>
+  {/if}
 {/if}
 
 <style>