show redis keys icons

packages/web/src/widgets/DbKeysSubTree.svelte

@@ -6,10 +6,11 @@
   export let database;
 
   export let root;
+  export let indentLevel = 0;
 
   $: items = useDatabaseKeys({ conid, database, root });
 </script>
 
 {#each $items || [] as item}
-  <DbKeysTreeNode {conid} {database} {root} {item} />
+  <DbKeysTreeNode {conid} {database} {root} {item} {indentLevel} />
 {/each}

packages/web/src/widgets/DbKeysTree.svelte

@@ -1,8 +1,29 @@
 <script lang="ts">
+  import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
+  import InlineButton from '../buttons/InlineButton.svelte';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+
   import DbKeysSubTree from './DbKeysSubTree.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
   export let conid;
   export let database;
+
+  let filter;
+
+  function handleRefreshDatabase() {}
 </script>
 
-<DbKeysSubTree {conid} {database} root="" />
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search keys" bind:value={filter} />
+  <CloseSearchButton bind:filter />
+  <InlineButton on:click={handleRefreshDatabase} title="Refresh key list">
+    <FontIcon icon="icon refresh" />
+  </InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <DbKeysSubTree {conid} {database} root="" />
+</WidgetsInnerContainer>

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+  import AppObjectCore from '../appobj/AppObjectCore.svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
+  import FontIcon from '../icons/FontIcon.svelte';
+
   import DbKeysSubTree from './DbKeysSubTree.svelte';
 
   export let conid;
@@ -7,14 +11,52 @@
   export let root;
 
   export let item;
+  export let indentLevel = 0;
 
   let isExpanded;
+
+  function getIconForType(type) {
+    switch (type) {
+      case 'dir':
+        return 'img folder';
+      case 'string':
+        return 'img type-string';
+      case 'hash':
+        return 'img type-hash';
+      case 'set':
+        return 'img type-set';
+      case 'list':
+        return 'img type-list';
+      case 'zset':
+        return 'img type-zset';
+      case 'stream':
+        return 'img type-stream';
+      case 'binary':
+        return 'img type-binary';
+      case 'ReJSON-RL':
+        return 'img type-rejson';
+      default:
+        return null;
+    }
+  }
+
+  // $: console.log(item.text, indentLevel);
 </script>
 
-<div on:click={() => (isExpanded = !isExpanded)}>
+<AppObjectCore
+  icon={getIconForType(item.type)}
+  title={item.text}
+  expandIcon={item.type == 'dir' ? plusExpandIcon(isExpanded) : 'icon invisible-box'}
+  on:expand={() => {
+    isExpanded = !isExpanded;
+  }}
+  {indentLevel}
+/>
+<!-- <div on:click={() => (isExpanded = !isExpanded)}>
+  <FontIcon icon={} />
   {item.text}
-</div>
+</div> -->
 
 {#if isExpanded}
-  <DbKeysSubTree {conid} {database} root={item.root} />
+  <DbKeysSubTree {conid} {database} root={item.root} indentLevel={indentLevel + 1} />
 {/if}