From a6e1008904c4200913032ed100d8144a2dd4746a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 3 Feb 2025 14:10:25 +0000
Subject: [PATCH] Add 'new' badges to binding and state panels

---
 .../[screenId]/_components/LeftPanel.svelte   | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index ba08804a3f..574cc7f707 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -28,7 +28,12 @@
           selected={activeTab === tab}
           on:click={() => (activeTab = tab)}
         >
-          {tab}
+          <div class="tab-label">
+            {tab}
+            {#if tab !== Tabs.Components}
+              <div class="new">NEW</div>
+            {/if}
+          </div>
         </ActionButton>
       {/each}
     </div>
@@ -49,7 +54,7 @@
 <style>
   .panel {
     display: flex;
-    min-width: 270px;
+    min-width: 310px;
     width: 310px;
     height: 100%;
   }
@@ -78,6 +83,19 @@
     overflow-x: hidden;
     padding: var(--spacing-l);
   }
+  .tab-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .new {
+    font-size: 8px;
+    background: var(--bb-indigo);
+    border-radius: 2px;
+    padding: 1px 3px;
+    color: white;
+    font-weight: bold;
+  }
 
   .divider {
     position: relative;