From 53414f8b7c1a652206c4871bd0975aeb1f9b955f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 18 Sep 2025 16:41:30 +0100
Subject: [PATCH 1/2] feat: Add highlight animation for recently moved filter
 checkboxes

---
 .../src/components/DBSearchPageFilters.tsx    | 43 +++++++++++++++++--
 packages/app/styles/SearchPage.module.scss    | 21 +++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 8cf571aec..bf38c7495 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/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,
@@ -50,6 +59,7 @@ type FilterCheckboxProps = {
   onClickOnly?: VoidFunction;
   onClickExclude?: VoidFunction;
   onClickPin: VoidFunction;
+  className?: string;
 };
 
 export const TextButton = ({
@@ -85,9 +95,10 @@ export const FilterCheckbox = ({
   onClickOnly,
   onClickExclude,
   onClickPin,
+  className,
 }: FilterCheckboxProps) => {
   return (
-    <div className={classes.filterCheckbox}>
+    <div className={cx(classes.filterCheckbox, className)}>
       <Group
         gap={8}
         onClick={() => onChange?.(!value)}
@@ -189,6 +200,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) {
@@ -263,6 +276,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 &&
@@ -367,6 +401,9 @@ 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'
@@ -374,7 +411,7 @@ export const FilterGroup = ({
                         ? 'excluded'
                         : false
                   }
-                  onChange={() => onChange(option.value)}
+                  onChange={() => handleChange(option.value)}
                   onClickOnly={() => onOnlyClick(option.value)}
                   onClickExclude={() => onExcludeClick(option.value)}
                   onClickPin={() => onPinClick(option.value)}
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
index 9854b17d8..cb664da39 100644
--- a/packages/app/styles/SearchPage.module.scss
+++ b/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);
+  }
+}

From e05c8b17d4508dcb1c31eb9d7393317fd896a6a1 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 18 Sep 2025 16:45:53 +0100
Subject: [PATCH 2/2] feat: Add highlight animation for recently moved filter
 checkboxes

---
 .changeset/spotty-suits-own.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/spotty-suits-own.md

diff --git a/.changeset/spotty-suits-own.md b/.changeset/spotty-suits-own.md
new file mode 100644
index 000000000..65e20d100
--- /dev/null
+++ b/.changeset/spotty-suits-own.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+Feat: add highlight animation for recently moved filter checkboxes