web/Omnibox: add community instance label

now it's easier for the end user to differentiate if an instance is official or not

web/i18n/en/save.json

@@ -19,5 +19,7 @@
     "tutorial.step.3": "select the respective shortcut in the share sheet.",
     "tutorial.outro": "these shortcuts will work only from the cobalt app, sharing links from other apps will not work.",
     "tutorial.shortcut.photos": "to photos",
-    "tutorial.shortcut.files": "to files"
+    "tutorial.shortcut.files": "to files",
+
+    "label.community_instance": "community instance"
 }

web/src/components/save/Omnibox.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
+    import env from "$lib/env";
+
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
     import { browser } from "$app/environment";
     import { SvelteComponent, tick } from "svelte";
 
     import { t } from "$lib/i18n/translations";
+    import { cachedInfo } from "$lib/api/server-info";
 
     import dialogs from "$lib/state/dialogs";
-
     import { link } from "$lib/state/omnibox";
-    import { cachedInfo } from "$lib/api/server-info";
     import { updateSetting } from "$lib/state/settings";
     import { turnstileLoaded } from "$lib/state/turnstile";
 
@@ -134,6 +135,16 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
+<!--
+    if you want to remove the community instance label,
+    refer to the license first https://github.com/imputnet/cobalt/tree/main/web#license
+-->
+{#if env.DEFAULT_API || $page.url.host !== "cobalt.tools" || !$page.url.host.endsWith(".cobalt.tools")}
+    <div id="instance-label">
+        {$t("save.label.community_instance")}
+    </div>
+{/if}
+
 <div id="omnibox">
     <div
         id="input-container"
@@ -331,6 +342,12 @@
         display: none;
     }
 
+    #instance-label {
+        font-size: 13px;
+        color: var(--gray);
+        font-weight: 500;
+    }
+
     @media screen and (max-width: 440px) {
         #action-container {
             flex-direction: column;