ui: beta flag

apps/ui/src/lib/components/Beta.svelte

@@ -0,0 +1 @@
+<span class="badge bg-coollabs-gradient rounded text-white font-normal"> BETA </span>

apps/ui/src/lib/components/Setting.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Beta from './Beta.svelte';
 	import Explaner from './Explainer.svelte';
 	import Tooltip from './Tooltip.svelte';
 
@@ -6,6 +7,7 @@
 	export let customClass: any = null;
 	export let setting: any;
 	export let title: any;
+	export let isBeta: any = false;
 	export let description: any;
 	export let isCenter = true;
 	export let disabled = false;
@@ -19,6 +21,9 @@
 		<!-- svelte-ignore a11y-label-has-associated-control -->
 		<label>
 			{title}
+			{#if isBeta}
+				<Beta />
+			{/if}
 			{#if description && description !== ''}
 				<Explaner explanation={description} />
 			{/if}

apps/ui/src/lib/components/UpdateAvailable.svelte

@@ -86,7 +86,7 @@
 				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons bg-coollabs-gradient text-white duration-75 hover:scale-105  w-full"
+				class="icons bg-coollabs-gradient text-white duration-75 hover:scale-105 w-full"
 			>
 				{#if updateStatus.loading}
 					<svg

apps/ui/src/lib/components/Usage.svelte

@@ -27,6 +27,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
+	import Beta from './Beta.svelte';
 	async function getStatus() {
 		if (loading.usage) return;
 		loading.usage = true;
@@ -78,7 +79,7 @@
 			<h1 class="font-bold text-lg lg:text-xl truncate">
 				{server.name}
 				{#if server.remoteEngine}
-					<span class="badge bg-coollabs-gradient rounded text-white"> BETA </span>
+					<Beta />
 				{/if}
 			</h1>
 			<div class="text-xs">