feat: explain device limit

Thymis-io · Oct 3, 2024 · 3e0f214 · 3e0f214
1 parent 4414e30
commit 3e0f214
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -49,7 +49,8 @@
 		"edit-name-title": "Namen Bearbeiten",
 		"edit-hostname-title": "Ziel Hostnamen Bearbeiten",
 		"edit-tags-title": "Tags Bearbeiten",
-		"new-tag-placeholder": "Neuer Tag..."
+		"new-tag-placeholder": "Neuer Tag...",
+		"limit-explain": "Sie können bis zu {deviceLimit} Geräte verwalten.\nFür größere Projekte bieten wir auf thymis.io/ skalierbare Pläne an, die Ihren Anforderungen entsprechen"
 	},
 	"create-device": {
 		"title": "Neues Gerät Erstellen",

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -49,7 +49,8 @@
 		"edit-name-title": "Edit Name",
 		"edit-hostname-title": "Edit target hostname",
 		"edit-tags-title": "Edit Tags",
-		"new-tag-placeholder": "New Tag..."
+		"new-tag-placeholder": "New Tag...",
+		"limit-explain": "You can manage up to {deviceLimit} devices.\nFor larger projects, we offer scalable plans to meet your needs at thymis.io/"
 	},
 	"create-device": {
 		"title": "Create a new device",

diff --git a/frontend/src/routes/(authenticated)/devices/+page.svelte b/frontend/src/routes/(authenticated)/devices/+page.svelte
@@ -9,7 +9,8 @@
 		TableBodyCell,
 		TableBodyRow,
 		TableHead,
-		TableHeadCell
+		TableHeadCell,
+		Tooltip
 	} from 'flowbite-svelte';
 	import TagIcon from 'lucide-svelte/icons/tag';
 	import GripVertical from 'lucide-svelte/icons/grip-vertical';
@@ -110,6 +111,15 @@
 				}
 			})}
 		</Button>
+		{#if devices.length >= 5}
+			<Tooltip class="z-50 whitespace-pre">
+				{$t('devices.limit-explain', {
+					values: {
+						deviceLimit: 5
+					}
+				})}
+			</Tooltip>
+		{/if}
 	</div>
 	<DeployActions />
 </div>