From 2b26c63a7db4949784fa05b43c08c3cbf8baf39e Mon Sep 17 00:00:00 2001
From: Lasse Boisen Andersen <la@laander.com>
Date: Fri, 28 Feb 2025 15:12:39 +0100
Subject: [PATCH] add iocn

---
 packages/browser-sdk/src/toolbar/Features.css |  9 +++++++++
 packages/browser-sdk/src/toolbar/Features.tsx |  3 +++
 packages/browser-sdk/src/toolbar/Toolbar.css  |  3 ++-
 packages/browser-sdk/src/ui/icons/Feature.tsx | 19 +++++++++++++++++++
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/browser-sdk/src/ui/icons/Feature.tsx

diff --git a/packages/browser-sdk/src/toolbar/Features.css b/packages/browser-sdk/src/toolbar/Features.css
index 1083e987..b5dca03a 100644
--- a/packages/browser-sdk/src/toolbar/Features.css
+++ b/packages/browser-sdk/src/toolbar/Features.css
@@ -65,6 +65,15 @@
   text-overflow: ellipsis;
   width: auto;
   padding: 6px 6px 6px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .feature-icon {
+    height: 15px;
+    width: 15px;
+    color: var(--dimmed-color);
+  }
 }
 
 .feature-link {
diff --git a/packages/browser-sdk/src/toolbar/Features.tsx b/packages/browser-sdk/src/toolbar/Features.tsx
index ec50bf66..f751e637 100644
--- a/packages/browser-sdk/src/toolbar/Features.tsx
+++ b/packages/browser-sdk/src/toolbar/Features.tsx
@@ -1,6 +1,8 @@
 import { h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
+import { Feature } from "../ui/icons/Feature";
+
 import { Switch } from "./Switch";
 import { FeatureItem } from "./Toolbar";
 
@@ -60,6 +62,7 @@ function FeatureRow({
       style={{ "--i": index }}
     >
       <td class="feature-name-cell">
+        <Feature class="feature-icon" />
         <a
           class="feature-link"
           href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}
diff --git a/packages/browser-sdk/src/toolbar/Toolbar.css b/packages/browser-sdk/src/toolbar/Toolbar.css
index 08f74ccf..1836a9a8 100644
--- a/packages/browser-sdk/src/toolbar/Toolbar.css
+++ b/packages/browser-sdk/src/toolbar/Toolbar.css
@@ -59,6 +59,7 @@
   --bg-color: hsla(230, 9%, 8%, 0.85);
   --bg-light-color: hsla(230, 9%, 6%, 0.85);
   --border-color: hsla(0, 0%, 100%, 0.1);
+  --dimmed-color: hsla(230, 9%, 40%, 1);
   --bg-blur: 3px;
 
   --logo-color: white;
@@ -97,7 +98,7 @@
     inset 0px 1px rgba(255, 255, 255, 0.1);
   border-radius: 7px;
   z-index: 999999;
-  min-width: 200px;
+  min-width: 220px;
   padding: 0;
 
   --visible-features: 15;
diff --git a/packages/browser-sdk/src/ui/icons/Feature.tsx b/packages/browser-sdk/src/ui/icons/Feature.tsx
new file mode 100644
index 00000000..14ae8a41
--- /dev/null
+++ b/packages/browser-sdk/src/ui/icons/Feature.tsx
@@ -0,0 +1,19 @@
+import { FunctionComponent, h } from "preact";
+
+export const Feature: FunctionComponent<h.JSX.SVGAttributes<SVGSVGElement>> = (
+  props,
+) => (
+  <svg
+    fill="none"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.7474 1.72518C11.5222 1.2766 12.4778 1.27661 13.2526 1.72518L20.2526 5.77782C21.0246 6.22479 21.5 7.04929 21.5 7.94138V16.0586C21.5 16.9507 21.0246 17.7752 20.2526 18.2222L13.2526 22.2748C12.4778 22.7234 11.5222 22.7234 10.7474 22.2748L3.74741 18.2222C2.97537 17.7752 2.5 16.9507 2.5 16.0586V7.94138C2.5 7.04929 2.97537 6.22479 3.74741 5.77782L10.7474 1.72518ZM5.49388 7.0777L12.0001 10.8444L18.5062 7.07774L12 3.311L5.49388 7.0777ZM4.5 8.81329V16.3469L11.0001 20.1101V12.5765L4.5 8.81329ZM13.0001 20.11L19.5 16.3469V8.81337L13.0001 12.5765V20.11Z"
+      fill="currentColor"
+    />
+  </svg>
+);