Scroll up on search and improved empty state handling (#456)

Swiftwork · web-flow · commit 820cdcc5f9db · 2025-08-11T14:13:15.000Z
- Added a new CSS class for empty feature cells to improve styling. - Updated the FeaturesTable component to display a message when no features match the search query, enhancing user experience. - Introduced a ref for the dialog content to enable scrolling to the top when a search is performed. https://github.com/user-attachments/assets/7b37372b-e573-48de-ae07-6cdcff741ad3
diff --git a/packages/browser-sdk/package.json b/packages/browser-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bucketco/browser-sdk",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
   "repository": {
diff --git a/packages/browser-sdk/src/toolbar/Features.css b/packages/browser-sdk/src/toolbar/Features.css
@@ -63,6 +63,12 @@
   }
 }
 
+.feature-empty-cell {
+  width: 100%;
+  color: var(--gray500);
+  padding: 6px 0;
+}
+
 .feature-name-cell {
   white-space: nowrap;
   overflow: hidden;
diff --git a/packages/browser-sdk/src/toolbar/Features.tsx b/packages/browser-sdk/src/toolbar/Features.tsx
@@ -19,17 +19,42 @@ export function FeaturesTable({
   isOpen: boolean;
   setIsEnabledOverride: (key: string, isEnabled: boolean | null) => void;
 }) {
+  const hasFeatures = features.length > 0;
+  const hasShownFeatures = features.some((feature) =>
+    feature.key
+      .toLocaleLowerCase()
+      .includes(searchQuery?.toLocaleLowerCase() ?? ""),
+  );
+
+  // List features that match the search query first then alphabetically
   const searchedFeatures =
     searchQuery === null
       ? features
-      : [...features].sort((a, _b) => (a.key.includes(searchQuery) ? -1 : 1));
+      : [...features].sort((a, b) => {
+          const aMatches = a.key.includes(searchQuery);
+          const bMatches = b.key.includes(searchQuery);
+
+          // If both match or both don't match, sort alphabetically
+          if (aMatches === bMatches) {
+            return a.key.localeCompare(b.key);
+          }
+
+          // Otherwise, matching features come first
+          return aMatches ? -1 : 1;
+        });
 
-  if (searchedFeatures.length === 0) {
-    return <div style={{ color: "var(--gray500)" }}>No features found</div>;
-  }
   return (
     <table class="features-table" style={{ "--n": searchedFeatures.length }}>
       <tbody>
+        {(!hasFeatures || !hasShownFeatures) && (
+          <tr>
+            <td class="feature-empty-cell" colSpan={3}>
+              No features{" "}
+              {!hasShownFeatures ? `matching "${searchQuery} "` : ""}
+              found
+            </td>
+          </tr>
+        )}
         {searchedFeatures.map((feature, index) => (
           <FeatureRow
             key={feature.key}
diff --git a/packages/browser-sdk/src/toolbar/Toolbar.tsx b/packages/browser-sdk/src/toolbar/Toolbar.tsx
@@ -37,6 +37,7 @@ export default function Toolbar({
   position: ToolbarPosition;
 }) {
   const toggleToolbarRef = useRef<HTMLDivElement>(null);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
   const [features, setFeatures] = useState<Feature[]>([]);
 
   const updateFeatures = useCallback(() => {
@@ -67,6 +68,7 @@ export default function Toolbar({
   const [search, setSearch] = useState<string | null>(null);
   const onSearch = (val: string) => {
     setSearch(val === "" ? null : val);
+    dialogContentRef.current?.scrollTo({ top: 0 });
   };
 
   const sortedFeatures = [...features].sort((a, b) =>
@@ -102,7 +104,7 @@ export default function Toolbar({
         <DialogHeader>
           <FeatureSearch onSearch={onSearch} />
         </DialogHeader>
-        <DialogContent>
+        <DialogContent innerRef={dialogContentRef}>
           <FeaturesTable
             appBaseUrl={appBaseUrl}
             features={sortedFeatures}
diff --git a/packages/browser-sdk/src/ui/Dialog.tsx b/packages/browser-sdk/src/ui/Dialog.tsx
@@ -257,16 +257,28 @@ function DialogArrow({
 
 export function DialogHeader({
   children,
+  innerRef,
 }: {
   children: preact.ComponentChildren;
+  innerRef?: Ref<HTMLElement>;
 }) {
-  return <header class="dialog-header">{children}</header>;
+  return (
+    <header ref={innerRef} class="dialog-header">
+      {children}
+    </header>
+  );
 }
 
 export function DialogContent({
   children,
+  innerRef,
 }: {
   children: preact.ComponentChildren;
+  innerRef?: Ref<HTMLDivElement>;
 }) {
-  return <div class="dialog-content">{children}</div>;
+  return (
+    <div ref={innerRef} class="dialog-content">
+      {children}
+    </div>
+  );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -683,7 +683,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@bucketco/browser-sdk@npm:3.3.1, @bucketco/browser-sdk@workspace:packages/browser-sdk":
+"@bucketco/browser-sdk@npm:3.3.1":
+  version: 3.3.1
+  resolution: "@bucketco/browser-sdk@npm:3.3.1"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.6.8"
+    canonical-json: "npm:^0.0.4"
+    js-cookie: "npm:^3.0.5"
+    preact: "npm:^10.22.1"
+  checksum: 10c0/30bd1fa0f084c7eee0a22f917bfe488667243013711787bc36c9befa0d3aa27a4aed6f0576416a098b3d3d64ff1cf873587022d4d9c07198e11d4f81f31380de
+  languageName: node
+  linkType: hard
+
+"@bucketco/browser-sdk@workspace:packages/browser-sdk":
   version: 0.0.0-use.local
   resolution: "@bucketco/browser-sdk@workspace:packages/browser-sdk"
   dependencies:

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@bucketco/browser-sdk",`
`3`		`- "version": "3.3.1",`
	`3`	`+ "version": "3.3.2",`
`4`	`4`	`"packageManager": "[email protected]",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"repository": {`
Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,12 @@`
`63`	`63`	`}`
`64`	`64`	`}`
`65`	`65`
	`66`	`+.feature-empty-cell {`
	`67`	`+ width: 100%;`
	`68`	`+ color: var(--gray500);`
	`69`	`+ padding: 6px 0;`
	`70`	`+}`
	`71`	`+`
`66`	`72`	`.feature-name-cell {`
`67`	`73`	`white-space: nowrap;`
`68`	`74`	`overflow: hidden;`