web/SettingsCategory: add ability to mark features as beta

web/i18n/en/settings.json

@@ -123,5 +123,7 @@
     "processing.enable_custom.title": "use a custom processing server",
     "processing.enable_custom.description": "cobalt will use a custom processing server if you choose to. even though cobalt has some security measures in place, we are not responsible for any damage done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.",
 
-    "processing.custom.placeholder": "custom instance domain"
+    "processing.custom.placeholder": "custom instance domain",
+
+    "feature.beta": "BETA"
 }

web/src/components/settings/SettingsCategory.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     import { page } from "$app/stores";
+    import { t } from "$lib/i18n/translations";
 
     export let title: string;
     export let sectionId: string;
 
     export let disabled = false;
+    export let beta = false;
 
     let animate = false;
 
@@ -22,7 +24,12 @@
     class:disabled
     aria-hidden={disabled}
 >
+    <div class="settings-content-header">
         <h3 class="settings-content-title">{title}</h3>
+        {#if beta}
+            <div class="beta-label">{$t("settings.feature.beta")}</div>
+        {/if}
+    </div>
     <slot></slot>
 </section>
 
@@ -75,6 +82,27 @@
         }
     }
 
+    .settings-content-header {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .beta-label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+        padding: 0 5px;
+        background: var(--secondary);
+        color: var(--primary);
+        font-size: 11px;
+        font-weight: 500;
+        line-height: 0;
+        text-transform: uppercase;
+    }
+
     @media screen and (max-width: 750px) {
         .settings-content {
             padding: var(--padding);