dynamic promo widget

packages/web/src/jsonui/JsonUiContentRenderer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import JsonUiHeading from './JsonUiHeading.svelte';
+  import JsonUiLinkButton from './JsonUiLinkButton.svelte';
+  import JsonUiTextBlock from './JsonUiTextBlock.svelte';
+  import JsonUiTickList from './JsonUiTickList.svelte';
+  import { JsonUiBlock } from './jsonuitypes';
+
+  export let blocks: JsonUiBlock[] = [];
+
+  const componentMap = {
+    text: JsonUiTextBlock,
+    heading: JsonUiHeading,
+    ticklist: JsonUiTickList,
+    button: JsonUiLinkButton,
+  } as const;
+</script>
+
+{#each blocks as block, i}
+  {#if block.type in componentMap}
+    <svelte:component this={componentMap[block.type]} {...block} />
+  {/if}
+{/each}

packages/web/src/jsonui/JsonUiHeading.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let text: string;
+  export let level: 1|2|3|4|5|6 = 2;
+  const tag = `h${level}` as keyof HTMLElementTagNameMap;
+</script>
+
+<svelte:element this={tag}>{text}</svelte:element>
+
+<style>
+h2 {
+  text-align: center;
+}
+</style>

packages/web/src/jsonui/JsonUiLinkButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import { openWebLink } from '../utility/simpleTools';
+
+  export let text: string;
+  export let link: string;
+  export let newTab: boolean = true;
+
+  // very light url guard
+  const safe = /^(https?:)?\/\//i.test(link) || link.startsWith('/');
+</script>
+
+<div class="center">
+  <FormStyledButton on:click={() => openWebLink(link)} value={text} skipWidth />
+</div>
+
+<style>
+  .center {
+    text-align: center;
+  }
+</style>

packages/web/src/jsonui/JsonUiTextBlock.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let text: string;
+</script>
+
+<p>{text}</p>
+
+<style>
+  p {
+    margin: 10px;
+  }
+</style>

packages/web/src/jsonui/JsonUiTickList.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let items: string[] = [];
+</script>
+
+<ul class="ticklist">
+  {#each items as item}
+    <li>{item}</li>
+  {/each}
+</ul>
+
+<style>
+  .ticklist {
+    margin: 10px;
+    padding: 0;
+    list-style: none;
+    padding-left: 0;
+  }
+  .ticklist li::before {
+    content: '✔︎ ';
+    color: var(--theme-icon-green);
+  }
+</style>

packages/web/src/jsonui/jsonuitypes.ts

@@ -0,0 +1,5 @@
+export type JsonUiBlock =
+  | { type: 'text'; text: string }
+  | { type: 'heading'; text: string; level?: 1|2|3|4|5|6 }
+  | { type: 'ticklist'; items: string[] }
+  | { type: 'button'; text: string; link: string; newTab?: boolean };

packages/web/src/widgets/AdminPremiumPromoWidget.svelte

@@ -1,55 +1,59 @@
-<script>
+<script lang='ts'>
-  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import JsonUiContentRenderer from '../jsonui/JsonUiContentRenderer.svelte';
-  import { openWebLink } from '../utility/simpleTools';
+  import { JsonUiBlock } from '../jsonui/jsonuitypes';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  const data: JsonUiBlock[] = [
+    { type: 'heading', text: 'Try DbGate Premium' },
+    { type: 'text', text: 'Upgrade to get exclusive features:' },
+    {
+      type: 'ticklist',
+      items: [
+        'Query designer',
+        'AI powered database chat',
+        'Unlimited DbGate Cloud storage',
+        'Shared cloud folders',
+        'Charts from query result',
+        'Compare database models',
+        'Synchronize database structure',
+        'Backup & restore database',
+        'Advanced ER diagram settings',
+        'Export database model',
+        'Firestore, libSQL, Turso, CosmosDB, Redshift support',
+        'Amazon and Azure identity providers',
+        'E-mail support',
+      ],
+    },
+
+    { type: 'heading', text: 'Download DbGate Premium' },
+    {
+      type: 'ticklist',
+      items: ['Free 30 day trial', 'DbGate Premium will reuse your connections and files from DbGate Community'],
+    },
+    { type: 'button', text: 'Download', link: 'https://www.dbgate.io/download' },
+
+    { type: 'heading', text: 'Purchase DbGate Premium' },
+    {
+      type: 'ticklist',
+      items: ['Use monthly or yearly subscription'],
+    },
+    { type: 'button', text: 'Purchase', link: 'https://www.dbgate.io/purchase/premium' },
+
+    { type: 'heading', text: 'Get PREMIUM license for free' },
+    {
+      type: 'text',
+      text: 'Your feedback is very valuable for us. We have time-limited offers available for users who provide feedback.',
+    },
+    {
+      type: 'button',
+      text: 'View current offer',
+      link: 'https://www.dbgate.io/review?utm_campaign=communityWidget',
+    },
+  ];
 </script>
 
 <WidgetsInnerContainer>
-  <h2>Try DbGate Premium</h2>
+  <JsonUiContentRenderer blocks={data} />
-
-  <p>Upgrade to get exclusive features:</p>
-
-  <ul>
-    <li>Query designer</li>
-    <li>AI powered database chat</li>
-    <li>Unlimited DbGate Cloud storage</li>
-    <li>Shared cloud folders</li>
-    <li>Charts from query result</li>
-    <li>Compare database models</li>
-    <li>Synchronize database structure</li>
-    <li>Backup &amp; restore database</li>
-    <li>Advanced ER diagram settings</li>
-    <li>Export database model</li>
-    <li>Firestore, 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://www.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://www.dbgate.io/purchase/premium')} value="Purchase" />
-  </div>
-
-  <h2>Get PREMIUM license for free</h2>
-  <p>Your feedback is very valuable for us. We have time-limited offers available for users who provide feedback.</p>
-
-  <div class="center">
-    <FormStyledButton on:click={() => openWebLink('https://www.dbgate.io/review?utm_campaign=communityWidget')} value="View current offer" skipWidth />
-  </div>
 </WidgetsInnerContainer>
 
 <style>