feat: scroll up on search and empty state handling

- 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.

Author: Swiftwork

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;

packages/browser-sdk/src/toolbar/Features.tsx

@@ -19,17 +19,29 @@ 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
   const searchedFeatures =
     searchQuery === null
       ? features
       : [...features].sort((a, _b) => (a.key.includes(searchQuery) ? -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}

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}

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>
+  );
 }