upgrade button

packages/web/src/tabpanel/TabsPanel.svelte

@@ -358,6 +358,8 @@
   import { handleAfterTabClick } from '../utility/changeCurrentDbByTab';
   import { getBoolSettingsValue } from '../settings/settingsTools';
   import NewObjectModal from '../modals/NewObjectModal.svelte';
+  import { isProApp } from '../utility/proTools';
+  import { openWebLink } from '../utility/simpleTools';
 
   export let multiTabIndex;
   export let shownTab;
@@ -583,7 +585,13 @@
 </script>
 
 <div class="root">
-  <div class="tabs" class:can-split={allowSplitTab} on:wheel={handleTabsWheel} bind:this={domTabs}>
+  <div
+    class="tabs"
+    class:can-split={allowSplitTab && isProApp()}
+    class:tabs-upgrade-button={!isProApp()}
+    on:wheel={handleTabsWheel}
+    bind:this={domTabs}
+  >
     {#each groupedTabs as tabGroup}
       <div class="db-wrapper">
         {#if !$lockedDatabaseMode}
@@ -713,7 +721,7 @@
     {/each}
   </div>
   <div class="icons-wrapper">
-    {#if allowSplitTab}
+    {#if allowSplitTab && isProApp()}
       <div
         class="icon-button"
         on:click={() => splitTab(multiTabIndex)}
@@ -723,6 +731,20 @@
         <FontIcon icon="icon split" />
       </div>
     {/if}
+
+    {#if !isProApp()}
+      <div
+        class="upgrade-button"
+        on:click={() => {
+          openWebLink('https://www.dbgate.io/purchase/premium/?utm_campaign=premiumUpgradeButton');
+        }}
+        title="Upgrade to Premium"
+        data-testid="TabsPanel_buttonUpgrade"
+      >
+        <FontIcon icon="icon premium" padRight /> Upgrade
+      </div>
+    {/if}
+
     <div
       class="icon-button"
       on:click={() => showModal(NewObjectModal, { multiTabIndex })}
@@ -756,6 +778,18 @@
     color: var(--theme-font-2);
     cursor: pointer;
   }
+  .upgrade-button {
+    background: linear-gradient(135deg, #1686c8, #8a25b1);
+    border: 1px solid var(--theme-border);
+    border-radius: 10px;
+    color: white;
+    cursor: pointer;
+    font-size: 10pt;
+    padding: 5px;
+  }
+  .upgrade-button:hover {
+    background: linear-gradient(135deg, #0f5a85, #5c1870);
+  }
   .icon-button:hover {
     color: var(--theme-font-1);
   }
@@ -769,6 +803,10 @@
     right: 35px;
     bottom: 0;
   }
+
+  .tabs-upgrade-button {
+    right: 120px;
+  }
   .tabs.can-split {
     right: 60px;
   }