From 1fa4216b18e010765ae22750ad76eb7ec007eee2 Mon Sep 17 00:00:00 2001
From: "SPRINX0\\prochazka" <jan.prochazka@sprinx.com>
Date: Fri, 17 Oct 2025 14:04:08 +0200
Subject: [PATCH] dynamic promo widget

---
 .../src/jsonui/JsonUiContentRenderer.svelte   |  22 ++++
 packages/web/src/jsonui/JsonUiHeading.svelte  |  13 +++
 .../web/src/jsonui/JsonUiLinkButton.svelte    |  21 ++++
 .../web/src/jsonui/JsonUiTextBlock.svelte     |  11 ++
 packages/web/src/jsonui/JsonUiTickList.svelte |  22 ++++
 packages/web/src/jsonui/jsonuitypes.ts        |   5 +
 .../widgets/AdminPremiumPromoWidget.svelte    | 100 +++++++++---------
 7 files changed, 146 insertions(+), 48 deletions(-)
 create mode 100644 packages/web/src/jsonui/JsonUiContentRenderer.svelte
 create mode 100644 packages/web/src/jsonui/JsonUiHeading.svelte
 create mode 100644 packages/web/src/jsonui/JsonUiLinkButton.svelte
 create mode 100644 packages/web/src/jsonui/JsonUiTextBlock.svelte
 create mode 100644 packages/web/src/jsonui/JsonUiTickList.svelte
 create mode 100644 packages/web/src/jsonui/jsonuitypes.ts

diff --git a/packages/web/src/jsonui/JsonUiContentRenderer.svelte b/packages/web/src/jsonui/JsonUiContentRenderer.svelte
new file mode 100644
index 000000000..b1562d16d
--- /dev/null
+++ b/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}
diff --git a/packages/web/src/jsonui/JsonUiHeading.svelte b/packages/web/src/jsonui/JsonUiHeading.svelte
new file mode 100644
index 000000000..4217c7555
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/web/src/jsonui/JsonUiLinkButton.svelte b/packages/web/src/jsonui/JsonUiLinkButton.svelte
new file mode 100644
index 000000000..fe3ac24f5
--- /dev/null
+++ b/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>
diff --git a/packages/web/src/jsonui/JsonUiTextBlock.svelte b/packages/web/src/jsonui/JsonUiTextBlock.svelte
new file mode 100644
index 000000000..222cbca2a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/web/src/jsonui/JsonUiTickList.svelte b/packages/web/src/jsonui/JsonUiTickList.svelte
new file mode 100644
index 000000000..4cff70e97
--- /dev/null
+++ b/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>
diff --git a/packages/web/src/jsonui/jsonuitypes.ts b/packages/web/src/jsonui/jsonuitypes.ts
new file mode 100644
index 000000000..37848b9a2
--- /dev/null
+++ b/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 };
diff --git a/packages/web/src/widgets/AdminPremiumPromoWidget.svelte b/packages/web/src/widgets/AdminPremiumPromoWidget.svelte
index ea274d411..b6717c27c 100644
--- a/packages/web/src/widgets/AdminPremiumPromoWidget.svelte
+++ b/packages/web/src/widgets/AdminPremiumPromoWidget.svelte
@@ -1,55 +1,59 @@
-<script>
-  import FormStyledButton from '../buttons/FormStyledButton.svelte';
-  import { openWebLink } from '../utility/simpleTools';
+<script lang='ts'>
+  import JsonUiContentRenderer from '../jsonui/JsonUiContentRenderer.svelte';
+  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>
-
-  <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>
+  <JsonUiContentRenderer blocks={data} />
 </WidgetsInnerContainer>
 
 <style>