premium info in community

packages/web/src/icons/FontIcon.svelte

@@ -217,6 +217,8 @@
     'icon autocommit-on': 'mdi mdi-check-circle',
     'icon autocommit-off': 'mdi mdi-check-circle-outline',
 
+    'icon premium': 'mdi mdi-star',
+
     'img ok': 'mdi mdi-check-circle color-icon-green',
     'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',
     'img alert': 'mdi mdi-alert-circle color-icon-blue',

packages/web/src/widgets/AdminPremiumPromoWidget.svelte

@@ -0,0 +1,79 @@
+<script>
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import { openWebLink } from '../utility/simpleTools';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+</script>
+
+<WidgetsInnerContainer>
+  <h2>Try DbGate Premium</h2>
+
+  <p>Upgrade to get exclusive features:</p>
+
+  <ul>
+    <li>Query designer</li>
+    <li>Compare database models</li>
+    <li>Synchronize database structure</li>
+    <li>Backup &amp; restore database</li>
+    <li>Export database model</li>
+    <li>AI assistant</li>
+    <li>libSQL, Turso, CosmosDB, Redshift support</li>
+    <li>Amazon and Azure identity providers</li>
+    <li>E-mail support</li>
+  </ul>
+
+  <h2>Download DbGate Premium</h2>
+  <ul>
+    <li>Free 30 day trial</li>
+    <li>DbGate Premium will reuse your connections and files from DbGate Community</li>
+  </ul>
+
+  <div class="center">
+    <FormStyledButton on:click={() => openWebLink('https://dbgate.io/download')} value="Download" />
+  </div>
+
+  <h2>Purchase DbGate Premium</h2>
+  <ul>
+    <li>Use monthly or yearly subscription</li>
+  </ul>
+
+  <div class="center">
+    <FormStyledButton on:click={() => openWebLink('https://dbgate.io/purchase/premium')} value="Purchase" />
+  </div>
+</WidgetsInnerContainer>
+
+<style>
+  h2 {
+    text-align: center;
+  }
+
+  p {
+    margin: 10px;
+  }
+
+  ul {
+    margin: 10px;
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    position: relative;
+    padding-left: 1rem;
+    margin-bottom: 0.2rem;
+  }
+
+  li:before {
+    content: '\F0E1E';
+    font-family: 'Material Design Icons';
+    color: var(--theme-icon-green);
+
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .center {
+    text-align: center;
+  }
+</style>

packages/web/src/widgets/WidgetContainer.svelte

@@ -8,6 +8,7 @@
   import HistoryWidget from './HistoryWidget.svelte';
   import AppWidget from './AppWidget.svelte';
   import AdminMenuWidget from './AdminMenuWidget.svelte';
+  import AdminPremiumPromoWidget from './AdminPremiumPromoWidget.svelte';
 </script>
 
 <DatabaseWidget hidden={$visibleSelectedWidget != 'database'} />
@@ -33,3 +34,6 @@
 {#if $visibleSelectedWidget == 'admin'}
   <AdminMenuWidget />
 {/if}
+{#if $visibleSelectedWidget == 'premium'}
+  <AdminPremiumPromoWidget />
+{/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -12,6 +12,7 @@
   } from '../stores';
   import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
   import hasPermission from '../utility/hasPermission';
+  import { isProApp } from '../utility/proTools';
 
   let domSettings;
   let domMainMenu;
@@ -61,6 +62,12 @@
       name: 'app',
       title: 'Application layers',
     },
+    {
+      icon: 'icon premium',
+      name: 'premium',
+      title: 'Premium promo',
+      isPremiumPromo: true,
+    },
     // {
     //   icon: 'icon settings',
     //   name: 'settings',
@@ -104,7 +111,9 @@
       <FontIcon icon="icon menu" />
     </div>
   {/if}
-  {#each widgets.filter(x => x && hasPermission(`widgets/${x.name}`)) as item}
+  {#each widgets
+    .filter(x => x && hasPermission(`widgets/${x.name}`))
+    .filter(x => !x.isPremiumPromo || !isProApp()) as item}
     <div
       class="wrapper"
       class:selected={item.name == $visibleSelectedWidget}
@@ -112,6 +121,9 @@
       on:click={() => handleChangeWidget(item.name)}
     >
       <FontIcon icon={item.icon} title={item.title} />
+      {#if item.isPremiumPromo}
+        <div class="premium-promo">Premium</div>
+      {/if}
     </div>
   {/each}
 
@@ -141,6 +153,7 @@
     align-items: center;
     justify-content: center;
     color: var(--theme-font-inv-2);
+    position: relative;
   }
   .wrapper:hover {
     color: var(--theme-font-inv-1);
@@ -154,4 +167,15 @@
     flex: 1;
     flex-direction: column;
   }
+
+  .premium-promo {
+    position: absolute;
+    text-transform: uppercase;
+    font-size: 6pt;
+    background: var(--theme-bg-inv-3);
+    color: var(--theme-font-inv-2);
+    padding: 1px 3px;
+    border-radius: 3px;
+    bottom: 0;
+  }
 </style>