SYNC: grayed scripts for non active database

packages/web/src/appobj/AppObjectCore.svelte

@@ -15,6 +15,7 @@
   export let module = null;
 
   export let isBold = false;
+  export let isGrayed = false;
   export let isChoosed = false;
   export let isBusy = false;
   export let statusIcon = undefined;
@@ -93,6 +94,7 @@
 <div
   class="main"
   class:isBold
+  class:isGrayed
   class:isChoosed
   class:disableHover
   draggable={true}
@@ -209,6 +211,10 @@
   .isBold {
     font-weight: bold;
   }
+    .isGrayed {
+    color: var(--theme-font-3);
+  }
+
   .isChoosed {
     background-color: var(--theme-bg-3);
   }

packages/web/src/appobj/PublicCloudFileAppObject.svelte

@@ -12,6 +12,8 @@
   import { apiCall } from '../utility/api';
   import newQuery from '../query/newQuery';
   import { filterName } from 'dbgate-tools';
+  import { currentActiveCloudTags } from '../stores';
+  import _ from 'lodash';
 
   export let data;
 
@@ -34,6 +36,7 @@
   title={data.title}
   menu={createMenu}
   on:click={handleOpenSqlFile}
+  isGrayed={_.intersection($currentActiveCloudTags, data.tags || []).length == 0}
 >
   {#if data.description}
     <div class="info">

packages/web/src/stores.ts

@@ -463,4 +463,26 @@ cloudConnectionsStore.subscribe(value => {
 });
 export const getCloudConnectionsStore = () => cloudConnectionsStoreValue;
 
+export const currentActiveCloudTags = derived(currentDatabase, $currentDatabase => {
+  if (!$currentDatabase || !$currentDatabase.connection) return [];
+  const engine = $currentDatabase.connection?.engine;
+  const [shortName, packageName] = engine.split('@');
+  const tags = [shortName];
+  const res = [...tags];
+
+  if (tags.includes('mariadb')) {
+    res.push('mysql');
+  }
+  if (tags.includes('mysql')) {
+    res.push('mariadb');
+  }
+  if (tags.includes('cockroach')) {
+    res.push('postgres');
+  }
+  if (tags.includes('libsql')) {
+    res.push('sqlite');
+  }
+  return res;
+});
+
 window['__changeCurrentTheme'] = theme => currentTheme.set(theme);