reflagcom · laander · Sep 5, 2025 · Sep 5, 2025 · Sep 5, 2025 · Sep 5, 2025
diff --git a/packages/browser-sdk/example/typescript/app.ts b/packages/browser-sdk/example/typescript/app.ts
@@ -1,6 +1,6 @@
 import { ReflagClient, CheckEvent, RawFlags } from "../../src";
 
-const urlParams = new URLSearchParams(window.location.search);
+const urlParams = new URLSearchParams(window?.location?.search);
 const publishableKey = urlParams.get("publishableKey");
 const flagKey = urlParams.get("flagKey") ?? "huddles";
 

diff --git a/packages/browser-sdk/index.html b/packages/browser-sdk/index.html
@@ -7,7 +7,7 @@
     <meta name="color-scheme" content="light dark" />
     <title>Reflag Browser SDK</title>
   </head>
-  <body style="background-color: black">
+  <body style="background-color: white">
     <div id="app"></div>
     <span id="loading">Loading...</span>
 

diff --git a/packages/browser-sdk/package.json b/packages/browser-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reflag/browser-sdk",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
   "repository": {

diff --git a/packages/browser-sdk/src/toolbar/Flags.css b/packages/browser-sdk/src/toolbar/Flags.css
@@ -4,6 +4,7 @@
   color: white;
   width: 100%;
   font-size: var(--text-size);
+  height: 28px;
 
   &::placeholder {
     color: var(--gray500);
@@ -44,29 +45,19 @@
 }
 
 .flag-row {
-  opacity: 0;
-  transform: translateY(-7px);
-  transition-property: opacity, transform;
-  transition-duration: 0.075s;
-  transition-timing-function: cubic-bezier(0.75, -0.015, 0.565, 1.055);
-
-  &.show-on-open {
-    opacity: 1;
-    transform: translateY(0);
-    /* stagger effect where first item (i=0) has no delay,
-       and delay is based on item count (n) so total animation time always is 509ms */
-    transition-delay: calc(0.05s * var(--i) / max(var(--n) - 1, 1));
-  }
-
   &.not-visible {
     visibility: hidden;
   }
 }
 
-.flag-empty-cell {
-  width: 100%;
+.flags-table-empty {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
   color: var(--gray500);
-  padding: 6px 0;
+  padding: 12px 12px;
+  line-height: 1.5;
 }
 
 .flag-name-cell {

diff --git a/packages/browser-sdk/src/toolbar/Flags.tsx b/packages/browser-sdk/src/toolbar/Flags.tsx
@@ -1,39 +1,50 @@
-import { h } from "preact";
-import { useEffect, useState } from "preact/hooks";
+import { Fragment, h } from "preact";
 
 import { Switch } from "./Switch";
 import { FlagItem } from "./Toolbar";
 
+const isFound = (flagKey: string, searchQuery: string | null) => {
+  return flagKey.toLocaleLowerCase().includes(searchQuery ?? "");
+};
+
 export function FlagsTable({
   flags,
   searchQuery,
   appBaseUrl,
-  isOpen,
   setIsEnabledOverride,
 }: {
   flags: FlagItem[];
   searchQuery: string | null;
   appBaseUrl: string;
-  isOpen: boolean;
   setIsEnabledOverride: (key: string, isEnabled: boolean | null) => void;
 }) {
   const hasFlags = flags.length > 0;
   const hasShownFlags = flags.some((flag) =>
-    flag.flagKey
-      .toLocaleLowerCase()
-      .includes(searchQuery?.toLocaleLowerCase() ?? ""),
+    isFound(flag.flagKey, searchQuery),
   );
 
   // List flags that match the search query first then alphabetically
   const searchedFlags =
     searchQuery === null
       ? flags
       : [...flags].sort((a, b) => {
-          const aMatches = a.flagKey.includes(searchQuery);
-          const bMatches = b.flagKey.includes(searchQuery);
+          const aMatches = isFound(a.flagKey, searchQuery);
+          const bMatches = isFound(b.flagKey, searchQuery);
 
           // If both match or both don't match, sort alphabetically
           if (aMatches === bMatches) {
+            const aStartsWith = a.flagKey
+              .toLocaleLowerCase()
+              .startsWith(searchQuery);
+            const bStartsWith = b.flagKey
+              .toLocaleLowerCase()
+              .startsWith(searchQuery);
+
+            // If one starts with search query and the other doesn't, prioritize the one that starts with it
+            if (aStartsWith && !bStartsWith) return -1;
+            if (bStartsWith && !aStartsWith) return 1;
+
+            // Otherwise sort alphabetically
             return a.flagKey.localeCompare(b.flagKey);
           }
 
@@ -42,67 +53,51 @@ export function FlagsTable({
         });
 
   return (
-    <table class="flags-table" style={{ "--n": searchedFlags.length }}>
-      <tbody>
-        {(!hasFlags || !hasShownFlags) && (
-          <tr>
-            <td class="flag-empty-cell" colSpan={3}>
-              No flags {!hasShownFlags ? `matching "${searchQuery} "` : ""}
-              found
-            </td>
-          </tr>
-        )}
-        {searchedFlags.map((flag, index) => (
-          <FlagRow
-            key={flag.flagKey}
-            appBaseUrl={appBaseUrl}
-            flag={flag}
-            index={index}
-            isNotVisible={
-              searchQuery !== null &&
-              !flag.flagKey
-                .toLocaleLowerCase()
-                .includes(searchQuery.toLocaleLowerCase())
-            }
-            isOpen={isOpen}
-            setEnabledOverride={(override) =>
-              setIsEnabledOverride(flag.flagKey, override)
-            }
-          />
-        ))}
-      </tbody>
-    </table>
+    <Fragment>
+      {(!hasFlags || !hasShownFlags) && (
+        <div class="flags-table-empty">
+          No flags {hasFlags ? `matching "${searchQuery}"` : "found"}
+        </div>
+      )}
+      <table class="flags-table">
+        <tbody>
+          {searchedFlags.map((flag, index) => (
+            <FlagRow
+              key={flag.flagKey}
+              appBaseUrl={appBaseUrl}
+              flag={flag}
+              index={index}
+              isNotVisible={
+                searchQuery !== null && !isFound(flag.flagKey, searchQuery)
+              }
+              setEnabledOverride={(override) =>
+                setIsEnabledOverride(flag.flagKey, override)
+              }
+            />
+          ))}
+        </tbody>
+      </table>
+    </Fragment>
   );
 }
 
 function FlagRow({
   setEnabledOverride,
   appBaseUrl,
   flag,
-  isOpen,
   index,
   isNotVisible,
 }: {
   flag: FlagItem;
   appBaseUrl: string;
   setEnabledOverride: (isEnabled: boolean | null) => void;
-  isOpen: boolean;
   index: number;
   isNotVisible: boolean;
 }) {
-  const [showOnOpen, setShowOnOpen] = useState(isOpen);
-  useEffect(() => {
-    setShowOnOpen(isOpen);
-  }, [isOpen]);
   return (
     <tr
       key={flag.flagKey}
-      class={[
-        "flag-row",
-        showOnOpen ? "show-on-open" : undefined,
-        isNotVisible ? "not-visible" : undefined,
-      ].join(" ")}
-      style={{ "--i": index }}
+      class={["flag-row", isNotVisible ? "not-visible" : undefined].join(" ")}
     >
       <td class="flag-name-cell">
         <a

diff --git a/packages/browser-sdk/src/toolbar/Switch.css b/packages/browser-sdk/src/toolbar/Switch.css
@@ -24,8 +24,8 @@
 }
 
 .switch-input:focus-visible + .switch-track {
-  outline: none;
-  box-shadow: 0 0 0 1px #fff;
+  outline: 1px solid #fff;
+  outline-offset: 1px;
 }
 
 .switch[data-enabled="true"] .switch-track {