redis key tab name & icon

packages/web/src/icons/FontIcon.svelte

@@ -179,6 +179,7 @@
     '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',
+    'img keydb': 'mdi mdi-key color-icon-blue',
   };
 </script>
 

packages/web/src/tabs/DbKeyDetailTab.svelte

@@ -4,7 +4,13 @@
   const getCurrentEditor = () => getActiveComponent('DbKeyDetailTab');
 
   export const matchingProps = ['conid', 'database', 'isDefaultBrowser'];
-  export const allowAddToFavorites = props => true;
+  export const allowAddToFavorites = props => false;
+
+  function getKeyText(key) {
+    const keySplit = key.split(':');
+    if (keySplit.length > 1) return keySplit[keySplit.length - 1];
+    return key;
+  }
 </script>
 
 <script lang="ts">
@@ -25,7 +31,9 @@
   import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
   import DbKeyAddItemModal from '../modals/DbKeyAddItemModal.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
+  import { changeTab } from '../utility/common';
 
+  export let tabid;
   export let conid;
   export let database;
   export let key;
@@ -39,6 +47,11 @@
   let refreshToken = 0;
   let editedValue = null;
 
+  $: changeTab(tabid, tab => ({
+    ...tab,
+    title: getKeyText(key),
+  }));
+
   function handleChangeTtl(keyInfo) {
     showModal(InputTextModal, {
       value: keyInfo.ttl,

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -148,7 +148,8 @@
     } else {
       openNewTab({
         tabComponent: 'DbKeyDetailTab',
-        title: 'Key: ' + database,
+        title: item.text,
+        icon: 'img keydb',
         props: {
           isDefaultBrowser: true,
           conid,