From 9e8c953ca6f3a878ea3370d2869b6a8f4e64315f Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 5 Sep 2024 07:55:30 +0600
Subject: [PATCH] web/Sidebar: mark remux tab as beta

---
 web/src/components/sidebar/Sidebar.svelte    |  2 +-
 web/src/components/sidebar/SidebarTab.svelte | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index f7b97a0a..df03e6ea 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -32,7 +32,7 @@
             <SidebarTab tabName="save" tabLink="/">
                 <IconDownload />
             </SidebarTab>
-            <SidebarTab tabName="remux" tabLink="/remux">
+            <SidebarTab tabName="remux" tabLink="/remux" beta>
                 <IconRepeat />
             </SidebarTab>
         </div>
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index 4ffde52c..89e11e5b 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -5,6 +5,7 @@
 
     export let tabName: string;
     export let tabLink: string;
+    export let beta = false;
 
     const firstTabPage = ["save", "remux", "settings"];
 
@@ -44,6 +45,9 @@
     role="tab"
     aria-selected={isTabActive}
 >
+    {#if beta}
+        <div class="beta-sign">β</div>
+    {/if}
     <slot></slot>
     {$t(`tabs.${tabName}`)}
 </a>
@@ -97,6 +101,12 @@
         transform: none;
     }
 
+    .beta-sign {
+        position: absolute;
+        transform: translateX(16px) translateY(-6px);
+        opacity: 0.7;
+    }
+
     @keyframes pressButton {
         0% {
             transform: scale(0.95);