search tokenizer

packages/web/src/appobj/AppObjectCore.svelte

@@ -5,6 +5,7 @@
   import CheckboxField from '../forms/CheckboxField.svelte';
   import { copyTextToClipboard } from '../utility/clipboard';
   import { showSnackbarSuccess } from '../utility/snackbar';
+  import TokenizedFilteredText from '../widgets/TokenizedFilteredText.svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -134,7 +135,7 @@
   {#if colorMark}
     <FontIcon style={`color:${colorMark}`} icon="icon square" />
   {/if}
-  {title}
+  <TokenizedFilteredText text={title} {filter} />
   {#if statusIconBefore}
     <span class="status">
       <FontIcon icon={statusIconBefore} />
@@ -156,7 +157,7 @@
   {/if}
   {#if extInfo}
     <span class="ext-info">
-      {extInfo}
+      <TokenizedFilteredText text={extInfo} {filter} />
     </span>
   {/if}
   {#if onPin}

packages/web/src/widgets/SqlObjectList.svelte

@@ -274,7 +274,9 @@
               ? isExpandedBySearch
                 ? SubProcedureLineList
                 : SubProcedureParamList
-              : SubTableColumnList}
+              : isExpandedBySearch && (data.objectTypeField == 'views' || data.objectTypeField == 'matviews')
+                ? SubProcedureLineList
+                : SubTableColumnList}
           isExpandable={data =>
             data.objectTypeField == 'tables' ||
             data.objectTypeField == 'views' ||

packages/web/src/widgets/TokenizedFilteredText.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { tokenizeBySearchFilter } from 'dbgate-tools';
+
+  export let text = '';
+  export let filter = '';
+
+  $: tokenized = filter ? tokenizeBySearchFilter(text, filter) : null;
+</script>
+
+{#if tokenized}
+  {#each tokenized as token}
+    {#if token.isMatch}
+      <span class="highlight">{token.text}</span>
+    {:else}
+      {token.text}
+    {/if}
+  {/each}
+{:else}
+  {text}
+{/if}
+
+<style>
+  .highlight {
+    background-color: var(--theme-bg-orange);
+  }
+</style>