Feat: add highlight animation for recently moved filter checkboxes (#1180)

This PR adds a highlight animation for recently moved filter checkboxes.

### Why?

When filters are moved, users can easily lose track of checkboxees, especially when labels have similar texts. This PR highlights recently moved checkboxes to make changes immediately visible.


| Before | After |
|--------|-------|
| <video src="https://github.com/user-attachments/assets/689556e6-8a10-4c3e-b188-043ebcfa0cea" autoplay loop muted width="200"></video> | <video src="https://github.com/user-attachments/assets/c7edb5a3-5dd0-43d1-8672-a4d399269893" autoplay loop muted width="200"></video> |

Author: elizabetdev

.changeset/spotty-suits-own.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+Feat: add highlight animation for recently moved filter checkboxes

packages/app/src/components/DBSearchPageFilters.tsx

@@ -1,4 +1,13 @@
-import { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import cx from 'classnames';
 import {
   TableMetadata,
   tcFromSource,
@@ -65,6 +74,7 @@ type FilterCheckboxProps = {
   onClickOnly?: VoidFunction;
   onClickExclude?: VoidFunction;
   onClickPin: VoidFunction;
+  className?: string;
 };
 
 export const TextButton = ({
@@ -103,10 +113,11 @@ export const FilterCheckbox = ({
   onClickOnly,
   onClickExclude,
   onClickPin,
+  className,
 }: FilterCheckboxProps) => {
   return (
     <div
-      className={classes.filterCheckbox}
+      className={cx(classes.filterCheckbox, className)}
       data-testid={`filter-checkbox-${label}`}
     >
       <Group
@@ -224,6 +235,8 @@ export const FilterGroup = ({
   const [shouldShowMore, setShowMore] = useState(false);
   // Accordion expanded state
   const [isExpanded, setExpanded] = useState(isDefaultExpanded ?? false);
+  // Track recently moved items for highlight animation
+  const [recentlyMoved, setRecentlyMoved] = useState<Set<string>>(new Set());
 
   useEffect(() => {
     if (isDefaultExpanded) {
@@ -298,6 +311,27 @@ export const FilterGroup = ({
     totalFiltersSize,
   ]);
 
+  // Simple highlight animation when checkbox is checked
+  const handleChange = useCallback(
+    (value: string) => {
+      const wasIncluded = selectedValues.included.has(value);
+
+      // If checking (not unchecking), trigger highlight animation
+      if (!wasIncluded) {
+        setRecentlyMoved(prev => new Set(prev).add(value));
+        setTimeout(() => {
+          setRecentlyMoved(prev => {
+            const newSet = new Set(prev);
+            newSet.delete(value);
+            return newSet;
+          });
+        }, 600);
+      }
+
+      onChange(value);
+    },
+    [onChange, selectedValues],
+  );
   const showShowMoreButton =
     !search &&
     augmentedOptions.length > MAX_FILTER_GROUP_ITEMS &&
@@ -403,14 +437,17 @@ export const FilterGroup = ({
                   key={option.value}
                   label={option.label}
                   pinned={isPinned(option.value)}
+                  className={
+                    recentlyMoved.has(option.value) ? classes.recentlyMoved : ''
+                  }
                   value={
                     selectedValues.included.has(option.value)
                       ? 'included'
                       : selectedValues.excluded.has(option.value)
                         ? 'excluded'
                         : false
                   }
-                  onChange={() => onChange(option.value)}
+                  onChange={() => handleChange(option.value)}
                   onClickOnly={() => onOnlyClick(option.value)}
                   onClickExclude={() => onExcludeClick(option.value)}
                   onClickPin={() => onPinClick(option.value)}

packages/app/styles/SearchPage.module.scss

@@ -130,3 +130,24 @@
     transform: rotate(0deg);
   }
 }
+
+.recentlyMoved {
+  animation: highlight 0.6s ease-out;
+}
+
+@keyframes highlight {
+  0% {
+    background-color: $slate-950;
+    transform: scale(1.02);
+  }
+
+  50% {
+    background-color: $slate-900;
+    transform: scale(1.01);
+  }
+
+  100% {
+    background-color: transparent;
+    transform: scale(1);
+  }
+}