show redis keys icons

packages/web/src/appobj/AppObjectCore.svelte

@@ -8,8 +8,8 @@
 
   export let icon;
   export let title;
-  export let data;
-  export let module;
+  export let data = null;
+  export let module = null;
 
   export let isBold = false;
   export let isBusy = false;
@@ -24,8 +24,10 @@
   export let onPin = null;
   export let onUnpin = null;
   export let showPinnedInsteadOfUnpin = false;
+  export let indentLevel = 0;
 
-  $: isChecked = checkedObjectsStore && $checkedObjectsStore.find(x => module.extractKey(data) == module.extractKey(x));
+  $: isChecked =
+    checkedObjectsStore && $checkedObjectsStore.find(x => module?.extractKey(data) == module?.extractKey(x));
 
   function handleExpand() {
     dispatch('expand');
@@ -33,7 +35,7 @@
   function handleClick() {
     if (checkedObjectsStore) {
       if (isChecked) {
-        checkedObjectsStore.update(x => x.filter(y => module.extractKey(data) != module.extractKey(y)));
+        checkedObjectsStore.update(x => x.filter(y => module?.extractKey(data) != module?.extractKey(y)));
       } else {
         checkedObjectsStore.update(x => [...x, data]);
       }
@@ -52,12 +54,14 @@
 
   function setChecked(value) {
     if (!value && isChecked) {
-      checkedObjectsStore.update(x => x.filter(y => module.extractKey(data) != module.extractKey(y)));
+      checkedObjectsStore.update(x => x.filter(y => module?.extractKey(data) != module?.extractKey(y)));
     }
     if (value && !isChecked) {
       checkedObjectsStore.update(x => [...x, data]);
     }
   }
+
+  $: console.log(title, indentLevel);
 </script>
 
 <div
@@ -85,6 +89,9 @@
       <FontIcon icon={expandIcon} />
     </span>
   {/if}
+  {#if indentLevel}
+    <span style:margin-right={`${indentLevel * 16}px`} />
+  {/if}
   {#if isBusy}
     <FontIcon icon="icon loading" />
   {:else}
@@ -188,5 +195,4 @@
     float: right;
     color: var(--theme-font-2);
   }
-
 </style>

packages/web/src/icons/FontIcon.svelte

@@ -167,6 +167,16 @@
     'img link': 'mdi mdi-link',
     'img filter': 'mdi mdi-filter',
     'img group': 'mdi mdi-group',
+
+    'img folder': 'mdi mdi-folder color-icon-yellow',
+    'img type-string': 'mdi mdi-alphabetical color-icon-blue',
+    'img type-hash': 'mdi mdi-pound color-icon-blue',
+    'img type-set': 'mdi mdi-format-list-bulleted color-icon-blue',
+    'img type-list': 'mdi mdi-format-list-numbered color-icon-blue',
+    'img type-zset': 'mdi mdi-format-list-checks  color-icon-blue',
+    'img type-stream': 'mdi mdi-view-stream color-icon-blue',
+    'img type-binary': 'mdi mdi-file color-icon-blue',
+    'img type-rejson': 'mdi mdi-color-json color-icon-blue',
   };
 </script>
 

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}