From c4629057f7f1bd16ca84061f5014cce8a0129602 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 16 Aug 2023 12:52:23 +0100
Subject: [PATCH] add experimental label & fix breadcrumb clearing visual bug

---
 src/lib/commandCenter/panels/ai.svelte       | 35 +++++++++++++++++++-
 src/lib/commandCenter/panels/template.svelte | 11 +++++-
 src/routes/+layout.svelte                    | 20 +++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index eb5296f9f..7aac568a6 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -94,7 +94,9 @@
     clearOnCallback={false}
     fullheight
     --command-panel-max-height="40rem">
-    <div slot="search" />
+    <div slot="search">
+        <span class="experimental border-gradient">EXPERIMENTAL</span>
+    </div>
 
     <div slot="option" let:option class="u-flex u-cross-center u-gap-8">
         <i class="icon-question-mark-circle" />
@@ -208,4 +210,35 @@
             background-color: hsl(var(--color-neutral-150));
         }
     }
+
+    .experimental {
+        display: flex;
+        padding: 0.09375rem 0.25rem;
+        align-items: center;
+
+        color: var(--light-neutrals-30, #e8e9f0);
+        text-align: center;
+        font-family: Inter;
+        font-size: 0.625rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 150%; /* 0.9375rem */
+        letter-spacing: 0.075rem;
+        text-transform: uppercase;
+
+        background: rgba(240, 46, 101, 0.24);
+        --border-gradient: linear-gradient(
+                to bottom,
+                rgba(240, 46, 101, 0.48) 0%,
+                rgba(240, 46, 101, 0) 150%
+            )
+            border-box;
+        --border-size: 0.03rem;
+        --border-radius: 0.25rem;
+        border-radius: var(--border-radius);
+    }
+
+    :global(.theme-light) .experimental {
+        color: rgba(240, 46, 101, 1);
+    }
 </style>
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index c277528b5..db648efb1 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -179,7 +179,16 @@
 
     const castOption = (option: IndexedOption) => option as Option;
 
-    $: breadcrumbs = $subPanels.filter((panel) => panel.name !== 'root').map((panel) => panel.name);
+    function getBreadcrumbs(subPanels: typeof $subPanels) {
+        return subPanels.filter((panel) => panel.name !== 'root').map((panel) => panel.name);
+    }
+
+    let breadcrumbs = getBreadcrumbs($subPanels);
+
+    // Avoid clearing subpanels before the closing transition is finished
+    $: if ($subPanels.length) {
+        breadcrumbs = getBreadcrumbs($subPanels);
+    }
 
     const handleCrumbClick = (index: number) => {
         if (index === breadcrumbs.length - 1) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2bffdc9c4..f8d9f93f4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -184,4 +184,24 @@
     [type='checkbox']:where(:checked)::before {
         content: '\ea38';
     }
+
+    .border-gradient {
+        position: relative;
+    }
+
+    .border-gradient::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: var(--border-radius);
+        border: var(--border-size) solid transparent;
+        background: var(--border-gradient) border-box;
+        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: destination-out;
+        mask-composite: exclude;
+        pointer-events: none;
+    }
 </style>