handle readonly connection in UI

packages/web/src/widgets/StatusBar.svelte

@@ -12,7 +12,7 @@
   import { findCommand } from '../commands/runCommand';
   import { useConnectionColor } from '../utility/useConnectionColor';
   import { apiCall } from '../utility/api';
-import { statusBarTabInfo } from '../utility/statusBarStore';
+  import { statusBarTabInfo } from '../utility/statusBarStore';
 
   $: databaseName = $currentDatabase && $currentDatabase.name;
   $: connection = $currentDatabase && $currentDatabase.connection;
@@ -44,7 +44,11 @@ import { statusBarTabInfo } from '../utility/statusBarStore';
   <div class="container">
     {#if databaseName}
       <div class="item">
-        <FontIcon icon="icon database" padRight />
+        {#if connection?.isReadOnly}
+          <FontIcon icon="icon lock" padRight />
+        {:else}
+          <FontIcon icon="icon database" padRight />
+        {/if}
         {databaseName}
       </div>
       {#if dbid}

packages/web/src/widgets/TabsPanel.svelte

@@ -390,6 +390,9 @@
           <div class="db-name-inner">
             <FontIcon icon={getDbIcon(tabGroup.tabDbKey)} />
             {tabGroup.tabDbName}
+            {#if $connectionList?.find(x => x._id == tabGroup.tabs[0]?.props?.conid)?.isReadOnly}
+              <FontIcon icon="icon lock" />
+            {/if}
           </div>
 
           <div