Enhance FilterInput Component with Improved Styling and Structure

- Refactored FilterInput component to utilize CSS classes for operand icons, tags, and chips, improving maintainability and readability.
- Added new CSS styles in App.css for filter input elements, enhancing visual consistency and user experience.
- Updated component structure to streamline rendering and improve performance, including adjustments to the property filter layout and scrollbar handling.

assets/stylesheets/App.css

@@ -2358,3 +2358,189 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 .ant-table-wrapper tfoot > tr > td {
   padding: 12px 8px;
 }
+
+/* FilterInput */
+.filter-input-operand-icon {
+  font-size: 8px;
+}
+
+.filter-input-operand-icon--chevron {
+  font-size: 11px;
+}
+
+.filter-input-operand-icon--gt {
+  margin-left: 1px;
+}
+
+.filter-input-operand-icon--lt {
+  margin-right: 1px;
+}
+
+.filter-input-wildcard,
+[data-wildcard] {
+  color: var(--color-primary);
+}
+
+.filter-input-operand-tag {
+  margin-inline-end: 0;
+  margin-right: 0;
+  height: 18px;
+  cursor: default;
+  padding: 0 4px;
+  margin-top: -2px;
+  line-height: 1.37;
+  user-select: none;
+  pointer-events: none;
+  flex-shrink: 0;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.filter-input-operand-chip {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  margin: 0 2px;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.filter-input-property-filter {
+  display: flex;
+  flex-direction: column;
+  max-width: 280px;
+  margin: 0;
+  vertical-align: top;
+  overflow: hidden;
+  --property-filter-panel-max-height: 220px;
+}
+
+.filter-input-property-filter-quick {
+  flex-shrink: 0;
+}
+
+.filter-input-property-filter-divider {
+  margin: 4px 0;
+  flex-shrink: 0;
+}
+
+.filter-input-property-filter
+  > .filter-input-property-filter-scroll.scrollbox-inner {
+  height: auto !important;
+  max-height: var(--property-filter-panel-max-height);
+  max-width: 280px;
+  flex-shrink: 1;
+  min-height: 0;
+}
+
+.filter-input-property-filter
+  > .filter-input-property-filter-scroll.scrollbox-inner
+  .simplebar-wrapper {
+  max-height: var(--property-filter-panel-max-height);
+}
+
+.filter-input-property-filter .simplebar-content-wrapper {
+  max-width: none;
+}
+
+.filter-input-property-filter .simplebar-content {
+  display: inline-block;
+}
+
+.filter-input-property-filter-body {
+  padding: 12px 26px 12px 16px;
+  max-width: 280px;
+  box-sizing: border-box;
+}
+
+.filter-input-property-filter-content {
+  width: max-content;
+  max-width: 100%;
+}
+
+.filter-input-affix {
+  width: 100%;
+  display: inline-flex;
+  position: relative;
+}
+
+.filter-input-affix:not(.filter-input-affix--disabled) {
+  cursor: text;
+}
+
+.filter-input-affix--disabled {
+  cursor: not-allowed;
+}
+
+.filter-input-affix--elevated {
+  z-index: 3 !important;
+}
+
+.filter-input-editor::-webkit-scrollbar {
+  display: none;
+  height: 0;
+}
+
+.filter-input-editor {
+  display: block;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  background: transparent;
+  flex: auto;
+  min-width: 0;
+  width: 100%;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  word-break: keep-all;
+  overflow-wrap: normal;
+  caret-color: var(--ant-color-text, inherit);
+  cursor: text;
+}
+
+.filter-input-affix--disabled .filter-input-editor {
+  cursor: not-allowed;
+}
+
+.filter-input-placeholder {
+  position: absolute;
+  inset-inline-start: var(--ant-input-padding-inline, 11px);
+  inset-inline-end: var(--ant-input-padding-inline, 11px);
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  color: var(--ant-color-text-placeholder, rgba(0, 0, 0, 0.25));
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  z-index: 1;
+}
+
+.filter-input-affix--has-clear .filter-input-placeholder {
+  inset-inline-end: calc(var(--ant-input-padding-inline, 11px) + 22px);
+}
+
+.filter-input-popover .ant-popover-inner {
+  padding: 4px;
+}
+
+.filter-input-popover-anchor {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 0;
+  pointer-events: none;
+}

src/components/Dashboard/common/FilterInput.jsx

@@ -6,7 +6,7 @@ import {
   useRef,
   useState
 } from 'react'
-import { ConfigProvider, Popover, Tag, theme } from 'antd'
+import { ConfigProvider, Popover, Tag } from 'antd'
 import { CloseCircleFilled } from '@ant-design/icons'
 import PropTypes from 'prop-types'
 import { createRoot } from 'react-dom/client'
@@ -28,8 +28,6 @@ import NotEqualIcon from '../../Icons/NotEqualIcon'
 import EqualIcon from '../../Icons/EqualIcon'
 import { Divider } from 'antd'
 
-const operandIconStyle = { fontSize: 8 }
-
 const PROPERTY_FILTER_PANEL_MAX_HEIGHT = 220
 
 // Longer symbols first so ".." / "<>" / ">=" match before "." / "<" / ">".
@@ -39,22 +37,24 @@ const WILDCARDS = new Set(['*', '?'])
 const OPERANDS = [
   {
     symbol: '..',
-    label: <ChevronRightIcon style={{ ...operandIconStyle, fontSize: 11 }} />,
+    label: (
+      <ChevronRightIcon className='filter-input-operand-icon filter-input-operand-icon--chevron' />
+    ),
     color: 'purple'
   },
   {
     symbol: '<>',
-    label: <NotEqualIcon style={operandIconStyle} />,
+    label: <NotEqualIcon className='filter-input-operand-icon' />,
     color: 'magenta'
   },
   {
     symbol: '>=',
-    label: <GreaterThanOrEqualToIcon style={operandIconStyle} />,
+    label: <GreaterThanOrEqualToIcon className='filter-input-operand-icon' />,
     color: 'volcano'
   },
   {
     symbol: '<=',
-    label: <LessThanOrEqualToIcon style={operandIconStyle} />,
+    label: <LessThanOrEqualToIcon className='filter-input-operand-icon' />,
     color: 'volcano'
   },
   { symbol: '|', label: 'OR', color: 'cyan' },
@@ -62,18 +62,20 @@ const OPERANDS = [
   {
     symbol: '>',
     label: (
-      <GreaterThanIcon style={{ ...operandIconStyle, marginLeft: '1px' }} />
+      <GreaterThanIcon className='filter-input-operand-icon filter-input-operand-icon--gt' />
     ),
     color: 'orange'
   },
   {
     symbol: '<',
-    label: <LessThanIcon style={{ ...operandIconStyle, marginRight: '1px' }} />,
+    label: (
+      <LessThanIcon className='filter-input-operand-icon filter-input-operand-icon--lt' />
+    ),
     color: 'orange'
   },
   {
     symbol: '=',
-    label: <EqualIcon style={operandIconStyle} />,
+    label: <EqualIcon className='filter-input-operand-icon' />,
     color: 'green'
   }
 ]
@@ -119,7 +121,7 @@ const tokenize = (raw = '') => {
 const renderWildcardNode = (char) => {
   const span = document.createElement('span')
   span.setAttribute('data-wildcard', char)
-  span.style.color = 'var(--color-primary)'
+  span.className = 'filter-input-wildcard'
   span.textContent = char
   return span
 }
@@ -452,7 +454,6 @@ const FilterInput = ({
 }) => {
   const { getPrefixCls, direction } = useContext(ConfigProvider.ConfigContext)
   const prefixCls = getPrefixCls('input')
-  const { token } = theme.useToken()
   const { themeConfig } = useThemeContext()
   const themeConfigRef = useRef(themeConfig)
   themeConfigRef.current = themeConfig
@@ -479,6 +480,7 @@ const FilterInput = ({
   const [internalValue, setInternalValue] = useState(value ?? '')
   const [quickFiltersHeight, setQuickFiltersHeight] = useState(0)
   const [quickFilterModalOpen, setQuickFilterModalOpen] = useState(false)
+  const [hover, setHover] = useState(false)
 
   const clearTagRoots = useCallback(() => {
     tagRootsRef.current.forEach((root) => {
@@ -502,22 +504,7 @@ const FilterInput = ({
         <Tag
           color={operand?.color ?? 'default'}
           bordered={false}
-          style={{
+          className='filter-input-operand-tag'
-            marginInlineEnd: 0,
-            marginRight: 0,
-            height: '18px',
-            cursor: 'default',
-            padding: '0 4px',
-            marginTop: '-2px',
-            lineHeight: 1.37,
-            userSelect: 'none',
-            pointerEvents: 'none',
-            flexShrink: 0,
-            fontWeight: 700,
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
         >
           {operand?.label ?? symbol}
         </Tag>
@@ -530,12 +517,7 @@ const FilterInput = ({
       const wrapper = document.createElement('span')
       wrapper.setAttribute('data-operand', symbol)
       wrapper.setAttribute('contenteditable', 'false')
-      wrapper.style.display = 'inline-flex'
+      wrapper.className = 'filter-input-operand-chip'
-      wrapper.style.alignItems = 'center'
-      wrapper.style.verticalAlign = 'middle'
-      wrapper.style.margin = '0 2px'
-      wrapper.style.userSelect = 'none'
-      wrapper.style.flexShrink = '0'
 
       const root = createRoot(wrapper)
       root.render(renderTagNode(symbol, themeConfigRef.current))
@@ -922,16 +904,10 @@ const FilterInput = ({
       }}
       className='filter-input-property-filter'
       style={{
-        display: 'inline-flex',
+        '--filter-input-property-filter-max-height': `${quickFiltersHeight + PROPERTY_FILTER_PANEL_MAX_HEIGHT}px`
-        flexDirection: 'column',
-        maxWidth: 280,
-        maxHeight: quickFiltersHeight + PROPERTY_FILTER_PANEL_MAX_HEIGHT,
-        margin: -4,
-        verticalAlign: 'top',
-        overflow: 'hidden'
       }}
     >
-      <div ref={quickFiltersRef} style={{ flexShrink: 0 }}>
+      <div ref={quickFiltersRef} className='filter-input-property-filter-quick'>
         <QuickPropertyFilters
           modelType={propertyFilter.modelType}
           propertyName={propertyFilter.propertyName}
@@ -941,24 +917,16 @@ const FilterInput = ({
           useCard={false}
         />
       </div>
-      <Divider style={{ margin: '4px 0' }} />
+      <div>
+        <Divider className='filter-input-property-filter-divider' />
+      </div>
       <ScrollBox
         inner
         smallPadding
-        style={{
+        className='filter-input-property-filter-scroll'
-          flexShrink: 0,
-          maxHeight: PROPERTY_FILTER_PANEL_MAX_HEIGHT,
-          maxWidth: 280
-        }}
       >
-        <div
+        <div className='filter-input-property-filter-body'>
-          style={{
+          <div className='filter-input-property-filter-content'>
-            padding: '12px 26px 12px 16px',
-            maxWidth: 280,
-            boxSizing: 'border-box'
-          }}
-        >
-          <div style={{ width: 'max-content', maxWidth: '100%' }}>
             <SimplePropertyFilter
               modelType={propertyFilter.modelType}
               propertyName={propertyFilter.propertyName}
@@ -1062,20 +1030,18 @@ const FilterInput = ({
   const showPlaceholder = !internalValue && !focused
   const showClear = allowClear && !!internalValue && !disabled
   const affixCls = `${prefixCls}-affix-wrapper`
-  const placeholderPaddingInline =
-    mergedSize === 'large'
-      ? (token.paddingInlineLG ?? token.paddingSM + 4)
-      : mergedSize === 'small'
-        ? (token.paddingInlineSM ?? token.paddingXS)
-        : (token.paddingInline ?? token.paddingSM)
 
   const input = (
     <span
       className={classNames(
         affixCls,
+        'filter-input-affix',
         {
           [`${affixCls}-focused`]: focused,
           [`${affixCls}-disabled`]: disabled,
+          'filter-input-affix--disabled': disabled,
+          'filter-input-affix--elevated': focused || hover,
+          'filter-input-affix--has-clear': showClear,
           [`${affixCls}-sm`]: mergedSize === 'small',
           [`${affixCls}-lg`]: mergedSize === 'large',
           [`${affixCls}-rtl`]: direction === 'rtl',
@@ -1087,55 +1053,21 @@ const FilterInput = ({
         hashId,
         className
       )}
-      style={{
+      style={style}
-        width: '100%',
-        cursor: disabled ? 'not-allowed' : 'text',
-        ...style,
-        // Affix ::before strut needs inline-flex; display:block stacks it and inflates height.
-        display: 'inline-flex',
-        // Stay above Compact siblings so the focus ring isn't covered by Select/Button.
-        position: 'relative',
-        zIndex: focused ? 3 : style?.zIndex
-      }}
       onClick={() => {
         if (!disabled && !quickFilterModalOpenRef.current) {
           editorRef.current?.focus()
         }
       }}
+      onMouseEnter={() => {
+        setHover(true)
+      }}
+      onMouseLeave={() => {
+        setHover(false)
+      }}
     >
-      <style>{`
-        .filter-input-editor::-webkit-scrollbar {
-          display: none;
-          height: 0;
-        }
-        .filter-input-property-filter .simplebar-content-wrapper {
-          max-width: none;
-        }
-        .filter-input-property-filter .simplebar-content {
-          display: inline-block;
-        }
-      `}</style>
       {showPlaceholder && (
-        <span
+        <span aria-hidden className='filter-input-placeholder'>
-          aria-hidden
-          style={{
-            position: 'absolute',
-            insetInlineStart: placeholderPaddingInline,
-            insetInlineEnd: showClear
-              ? placeholderPaddingInline + 22
-              : placeholderPaddingInline,
-            top: 0,
-            bottom: 0,
-            display: 'flex',
-            alignItems: 'center',
-            color: token.colorTextPlaceholder,
-            pointerEvents: 'none',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            zIndex: 1
-          }}
-        >
           {placeholder}
         </span>
       )}
@@ -1182,31 +1114,6 @@ const FilterInput = ({
           if (next !== valueRef.current) emitChange(next)
           onBlur?.(event)
         }}
-        style={{
-          // Match antd's `> input.ant-input` resets inside affix-wrapper
-          display: 'block',
-          padding: 0,
-          border: 'none',
-          borderRadius: 0,
-          outline: 'none',
-          boxShadow: 'none',
-          background: 'transparent',
-          flex: 'auto',
-          minWidth: 0,
-          width: '100%',
-          fontSize: 'inherit',
-          lineHeight: 'inherit',
-          color: 'inherit',
-          whiteSpace: 'nowrap',
-          overflowX: 'auto',
-          overflowY: 'hidden',
-          scrollbarWidth: 'none',
-          msOverflowStyle: 'none',
-          wordBreak: 'keep-all',
-          overflowWrap: 'normal',
-          caretColor: token.colorText,
-          cursor: disabled ? 'not-allowed' : 'text'
-        }}
       />
       {showClear && (
         <span className={`${prefixCls}-suffix`}>
@@ -1231,24 +1138,10 @@ const FilterInput = ({
           placement='bottomLeft'
           arrow={false}
           trigger={[]}
-          styles={{
+          classNames={{ root: 'filter-input-popover' }}
-            body: {
-              padding: 8
-            }
-          }}
         >
           {/* Anchor only — keep Popover from wrapping the Compact item (z-index/focus ring). */}
-          <span
+          <span aria-hidden className='filter-input-popover-anchor' />
-            aria-hidden
-            style={{
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              height: 0,
-              pointerEvents: 'none'
-            }}
-          />
         </Popover>
       )}
     </span>