@flamingo-stack/openframe-frontend-core 0.0.400-snapshot.20260710144905 → 0.0.400

package/src/components/chat/guide-welcome.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { MingoIcon } from '../icons'
-import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
 import { Skeleton } from '../ui/skeleton'
 import { ChatQuickActionRow } from './chat-quick-action-row'
 import { EntityIcon } from '../icon-display'
@@ -101,7 +100,25 @@ export function GuideWelcome({
   // Scroll-fade affordances: a 48px gradient at the top/bottom edge of the
   // scroll region, shown only while content is actually hidden in that
   // direction. (Same behaviour as MingoWelcome.)
-  const { scrollRef, fadeTop, fadeBottom, update: updateScrollFade } = useScrollFade<HTMLDivElement>()
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const [scrollFade, setScrollFade] = React.useState({ top: false, bottom: false })
+  const updateScrollFade = React.useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const top = el.scrollTop > 1
+    const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1
+    setScrollFade((prev) =>
+      prev.top === top && prev.bottom === bottom ? prev : { top, bottom },
+    )
+  }, [])
+  React.useEffect(() => {
+    updateScrollFade()
+    const el = scrollRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(updateScrollFade)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [updateScrollFade])
 
   // Map to the shared `ChatQuickActionRow` chip shape. In `wrap` mode every chip
   // renders (no overflow), and `onHoverStart`/`onHoverEnd` drive the composer
@@ -187,9 +204,30 @@ export function GuideWelcome({
           {children}
         </div>
 
-        {/* Edge scroll-fades — visible only when content is hidden beyond them. */}
-        <ScrollFadeOverlay edge="top" visible={fadeTop} className="h-12" />
-        <ScrollFadeOverlay edge="bottom" visible={fadeBottom} className="h-12" />
+        {/* Top scroll-fade — visible only when content is hidden above. */}
+        <div
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-x-0 top-0 h-12 transition-opacity duration-150',
+            scrollFade.top ? 'opacity-100' : 'opacity-0',
+          )}
+          style={{
+            background:
+              'linear-gradient(0deg, transparent 0%, var(--color-bg) 100%)',
+          }}
+        />
+        {/* Bottom scroll-fade — visible only when content is hidden below. */}
+        <div
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-x-0 bottom-0 h-12 transition-opacity duration-150',
+            scrollFade.bottom ? 'opacity-100' : 'opacity-0',
+          )}
+          style={{
+            background:
+              'linear-gradient(180deg, transparent 0%, var(--color-bg) 100%)',
+          }}
+        />
       </div>
 
       {/* Pinned quick-action chips above the composer — the shared

package/src/components/chat/mingo-chat-history.tsx

@@ -6,7 +6,6 @@ import { useDebounce } from '../../hooks/ui/use-debounce'
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
-import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
 import { Ellipsis01Icon, SearchIcon } from '../icons-v2-generated'
 import type { DialogItem } from './types/component.types'
 
@@ -358,9 +357,24 @@ export function MingoChatHistory({
   const groups = React.useMemo(() => groupDialogs(dialogs), [dialogs])
   const noSearchResults = groups.length === 0 && !!searchQuery?.trim()
 
-  // Scroll-fade affordances — shared ui/scroll-fade (re-measures on resize
-  // and content mutations, so no manual `dialogs` dependency is needed).
-  const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade<HTMLDivElement>()
+  // Scroll-fade affordances (same pattern as MingoWelcome's greeting region).
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const [fade, setFade] = React.useState({ top: false, bottom: false })
+  const updateFade = React.useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const top = el.scrollTop > 1
+    const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1
+    setFade((p) => (p.top === top && p.bottom === bottom ? p : { top, bottom }))
+  }, [])
+  React.useEffect(() => {
+    updateFade()
+    const el = scrollRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(updateFade)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [updateFade, dialogs])
 
   // Infinite scroll — load the next page when the sentinel enters the
   // scroll viewport.
@@ -431,8 +445,28 @@ export function MingoChatHistory({
         </div>
 
         {/* Scroll-fade — only while content is hidden in that direction. */}
-        <ScrollFadeOverlay edge="top" visible={fadeTop} color="var(--color-bg-card)" className="h-12" />
-        <ScrollFadeOverlay edge="bottom" visible={fadeBottom} color="var(--color-bg-card)" className="h-12" />
+        <div
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-x-0 top-0 h-12 transition-opacity duration-150',
+            fade.top ? 'opacity-100' : 'opacity-0',
+          )}
+          style={{
+            background:
+              'linear-gradient(0deg, transparent 0%, var(--color-bg-card) 100%)',
+          }}
+        />
+        <div
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-x-0 bottom-0 h-12 transition-opacity duration-150',
+            fade.bottom ? 'opacity-100' : 'opacity-0',
+          )}
+          style={{
+            background:
+              'linear-gradient(180deg, transparent 0%, var(--color-bg-card) 100%)',
+          }}
+        />
       </div>
     </div>
   )

package/src/components/chat/mingo-welcome.tsx

@@ -7,7 +7,6 @@ import { MingoChatHistorySkeleton } from './mingo-chat-history'
 import { ChatQuickActionRow } from './chat-quick-action-row'
 import { QuickActionChipButton } from './quick-action-chip'
 import { Button } from '../ui/button'
-import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import {
   Rocket01Icon,
@@ -232,9 +231,29 @@ export function MingoWelcome({
     }
   }, [promoStorage, promoStorageKey])
 
-  // Scroll-fade affordances — shared ui/scroll-fade (48px edge gradients shown
-  // only while content is hidden in that direction).
-  const { scrollRef, fadeTop, fadeBottom, update: updateScrollFade } = useScrollFade<HTMLDivElement>()
+  // Scroll-fade affordances: show a 48px gradient at the top/bottom edge of the
+  // scroll region only while content is actually hidden in that direction.
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const [scrollFade, setScrollFade] = React.useState({ top: false, bottom: false })
+  const updateScrollFade = React.useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const top = el.scrollTop > 1
+    const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1
+    setScrollFade((prev) =>
+      prev.top === top && prev.bottom === bottom ? prev : { top, bottom },
+    )
+  }, [])
+  React.useEffect(() => {
+    updateScrollFade()
+    const el = scrollRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    // Recompute when the panel resizes — a taller panel may remove the need
+    // to scroll entirely, a shorter one introduces it.
+    const ro = new ResizeObserver(updateScrollFade)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [updateScrollFade])
 
   const cellCount = featureCards.length
   // Last row's first index — used to drop the bottom divider on the final row.
@@ -346,9 +365,30 @@ export function MingoWelcome({
       )}
       </div>
 
-      {/* Edge scroll-fades — visible only when content is hidden beyond them. */}
-      <ScrollFadeOverlay edge="top" visible={fadeTop} color="var(--color-bg-card)" className="h-12" />
-      <ScrollFadeOverlay edge="bottom" visible={fadeBottom} color="var(--color-bg-card)" className="h-12" />
+      {/* Top scroll-fade — visible only when content is hidden above. */}
+      <div
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-x-0 top-0 h-12 transition-opacity duration-150',
+          scrollFade.top ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{
+          background:
+            'linear-gradient(0deg, transparent 0%, var(--color-bg-card) 100%)',
+        }}
+      />
+      {/* Bottom scroll-fade — visible only when content is hidden below. */}
+      <div
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-x-0 bottom-0 h-12 transition-opacity duration-150',
+          scrollFade.bottom ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{
+          background:
+            'linear-gradient(180deg, transparent 0%, var(--color-bg-card) 100%)',
+        }}
+      />
       </div>
       </>
       ))}

package/src/components/ui/data-table/data-table-header.tsx

@@ -69,8 +69,7 @@ export function DataTableHeader({
   const hasVisibleHeaderCell = headerGroup.headers.some(header => {
     if (header.isPlaceholder) return false
     if (isLgUp) return true
-    const meta = header.column.columnDef.meta
-    return Boolean(meta?.filter) || meta?.alwaysShowHeader === true
+    return Boolean(header.column.columnDef.meta?.filter)
   })
 
   return (
@@ -123,8 +122,6 @@ function HeaderCell({ header, isLgUp, sort, onSortChange }: HeaderCellProps) {
   const column = header.column
   const meta = column.columnDef.meta
   const hasFilter = Boolean(meta?.filter)
-  // Tablet visibility: filterable columns and explicit opt-ins stay rendered.
-  const keepOnTablet = hasFilter || meta?.alwaysShowHeader === true
   const align = meta?.align ?? 'left'
   // Sort is opt-in via `meta.sortable`. Direction is fully consumer-driven via
   // the `sort` prop; we do not consult TanStack's sort APIs here.
@@ -133,7 +130,7 @@ function HeaderCell({ header, isLgUp, sort, onSortChange }: HeaderCellProps) {
     sort?.id === column.id ? (sort.desc ? 'desc' : 'asc') : false
 
   // Mobile (md, below lg): hide non-filter columns so only filters are accessible.
-  if (!isLgUp && !keepOnTablet) return null
+  if (!isLgUp && !hasFilter) return null
 
   return (
     <div
@@ -142,7 +139,7 @@ function HeaderCell({ header, isLgUp, sort, onSortChange }: HeaderCellProps) {
         isLgUp && (meta?.width || 'flex-1 min-w-0'),
         meta?.headerClassName,
         // Don't apply hide classes if column is filterable on tablet (keep filter accessible)
-        !(keepOnTablet && !isLgUp) && getHideClasses(meta?.hideAt),
+        !(hasFilter && !isLgUp) && getHideClasses(meta?.hideAt),
       )}
     >
       {hasFilter ? (

package/src/components/ui/data-table/types.ts

@@ -16,12 +16,6 @@ declare module '@tanstack/react-table' {
     align?: 'left' | 'center' | 'right'
     /** Hide column at/below these Tailwind breakpoints. */
     hideAt?: TailwindBreakpoint | TailwindBreakpoint[]
-    /**
-     * Keep this header visible on tablet (md, below lg) even without
-     * `meta.filter` — for custom headers hosting their own filter UI
-     * (e.g. the date filter calendar trigger).
-     */
-    alwaysShowHeader?: boolean
     /** If present, header renders a filter dropdown with these options. */
     filter?: {
       options: DataTableFilterOption[]

package/src/components/ui/date-picker.tsx

@@ -150,14 +150,6 @@ function DatePickerCalendar({
   );
   const [hoveredDate, setHoveredDate] = React.useState<Date | undefined>(undefined);
 
-  // Keep the internal range in sync when the consumer changes `selected`
-  // externally (e.g. DateFilterMenu Reset while the popover stays open).
-  React.useEffect(() => {
-    if (mode === "range") {
-      setDraftRange(selected as DateRange | undefined);
-    }
-  }, [mode, selected]);
-
   const rangeSelected = draftRange;
   const hasCompleteRange =
     mode === "range" &&
@@ -176,11 +168,7 @@ function DatePickerCalendar({
     if (!triggerDate) return;
 
     if (!draftRange?.from || draftRange.to) {
-      // First click starts the range — propagate it so consumers can already
-      // act on a single-day selection (e.g. DateFilterMenu Apply/Reset).
-      const started: DateRange = { from: triggerDate, to: undefined };
-      setDraftRange(started);
-      onSelect(started);
+      setDraftRange({ from: triggerDate, to: undefined });
       return;
     }
     // Second click closes the range, ordering the two ends.
@@ -993,89 +981,6 @@ export function DatePickerInputSimple({
   );
 }
 
-// ============================================================================
-// DateFilterPanel Component (sort select + fluid calendar)
-// ============================================================================
-
-export interface DateFilterPanelProps {
-  /** Selection mode for the calendar. Defaults to "range". */
-  mode?: DatePickerMode;
-  /** Current sort direction shown in the select. */
-  sort: SortDirection;
-  onSortChange: (sort: SortDirection) => void;
-  /** Current calendar selection. */
-  selected: Date | DateRange | undefined;
-  onSelect: (value: Date | DateRange | undefined) => void;
-  /** Minimum selectable date. */
-  fromDate?: Date;
-  /** Maximum selectable date. */
-  toDate?: Date;
-  /** Locale for the calendar. */
-  locale?: DayPickerProps["locale"];
-  /** Label for the ascending sort option. */
-  ascLabel?: string;
-  /** Label for the descending sort option. */
-  descLabel?: string;
-  className?: string;
-}
-
-/**
- * DateFilterPanel — the controlled sort-direction select + fluid calendar
- * block shared by DateFilterMenu (popover) and FilterModal (mobile "Sort and
- * Filter"). Owns no state: the consumer drafts and commits the values.
- */
-export function DateFilterPanel({
-  mode = "range",
-  sort,
-  onSortChange,
-  selected,
-  onSelect,
-  fromDate,
-  toDate,
-  locale,
-  ascLabel = "Sort by Ascending",
-  descLabel = "Sort by Descending",
-  className,
-}: DateFilterPanelProps) {
-  return (
-    <div className={cn("flex flex-col gap-4", className)}>
-      {/* Sort direction selector */}
-      <Select
-        value={sort}
-        onValueChange={(value) => onSortChange(value as SortDirection)}
-      >
-        <SelectTrigger className="gap-2" aria-label="Sort direction">
-          {/* Wrapper is a <div> (not <span>) so SelectTrigger's
-              `[&>span]:line-clamp-1` rule doesn't force it to a vertical
-              -webkit-box and stack the icon/label into a column. */}
-          <div className="flex min-w-0 flex-1 items-center gap-2">
-            <ArrowUpDown className="size-6 shrink-0 text-ods-text-secondary" />
-            <span className="truncate">
-              <SelectValue />
-            </span>
-          </div>
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="asc">{ascLabel}</SelectItem>
-          <SelectItem value="desc">{descLabel}</SelectItem>
-        </SelectContent>
-      </Select>
-
-      {/* Calendar */}
-      <DatePickerCalendar
-        mode={mode}
-        selected={selected}
-        onSelect={onSelect}
-        numberOfMonths={1}
-        fromDate={fromDate}
-        toDate={toDate}
-        locale={locale}
-        fluid
-      />
-    </div>
-  );
-}
-
 // ============================================================================
 // DateFilterMenu Component (sort + calendar filter popover from Figma)
 // ============================================================================
@@ -1094,21 +999,14 @@ export interface DateFilterMenuProps {
   mode?: DatePickerMode;
   /** Current (applied) sort direction. Defaults to "desc". */
   sort?: SortDirection;
-  /** Baseline sort direction — Reset restores it, and a draft that differs
-   *  from it counts as an active change (shows Reset). Defaults to "desc". */
-  defaultSort?: SortDirection;
   /** Current (applied) single date — used when mode === "single". */
   date?: Date;
   /** Current (applied) range — used when mode === "range". */
   range?: DateRange;
-  /** Fired when the user presses Apply with the drafted selection. Also fired
-   *  by Reset with a cleared selection so the consumer refetches unfiltered data. */
+  /** Fired when the user presses Apply with the drafted selection. */
   onApply?: (result: DateFilterResult) => void;
   /** Fired when the menu closes (Close button, outside click, Esc). */
   onClose?: () => void;
-  /** Custom trigger element (rendered via Radix `asChild` — must accept a ref,
-   *  e.g. a native button). Defaults to the outline calendar icon Button. */
-  trigger?: React.ReactNode;
   /** Disable the trigger. */
   disabled?: boolean;
   /** Minimum selectable date. */
@@ -1131,21 +1029,16 @@ export interface DateFilterMenuProps {
 
 /**
  * DateFilterMenu — a calendar-icon-triggered popover combining a sort-direction
- * selector and a date / date-range calendar, with Close/Reset and Apply actions.
- * The sort and date selection are drafted internally and committed via
- * `onApply`. While a date is selected, Close is replaced by Reset, which
- * clears and commits the empty selection (fires `onApply`) so the consumer
- * drops the filter.
+ * selector and a date / date-range calendar, with Close and Apply actions.
+ * Selections are drafted internally and only committed via `onApply`.
  */
 export function DateFilterMenu({
   mode = "range",
   sort = "desc",
-  defaultSort = "desc",
   date,
   range,
   onApply,
   onClose,
-  trigger,
   disabled = false,
   fromDate,
   toDate,
@@ -1192,39 +1085,18 @@ export function DateFilterMenu({
     setOpen(false);
   };
 
-  // Anything to reset? A calendar selection or a non-default sort — drives Close vs Reset.
-  const hasSelection =
-    mode === "single"
-      ? Boolean(draftSelected)
-      : Boolean((draftSelected as DateRange | undefined)?.from);
-  const hasChanges = hasSelection || draftSort !== defaultSort;
-
-  // Reset restores the defaults and commits them so the consumer drops the
-  // filter and refetches; the menu stays open with the button back to Close.
-  const handleReset = () => {
-    setDraftSort(defaultSort);
-    setDraftSelected(undefined);
-    onApply?.(
-      mode === "single"
-        ? { sort: defaultSort, date: undefined }
-        : { sort: defaultSort, range: undefined }
-    );
-  };
-
   return (
     <Popover.Root open={open} onOpenChange={handleOpenChange}>
       <Popover.Trigger asChild>
-        {trigger ?? (
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            disabled={disabled}
-            aria-label={ariaLabel}
-            className={className}
-            leftIcon={<Calendar className="size-6" />}
-          />
-        )}
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          disabled={disabled}
+          aria-label={ariaLabel}
+          className={className}
+          leftIcon={<Calendar className="size-6" />}
+        />
       </Popover.Trigger>
 
       <Popover.Portal>
@@ -1240,18 +1112,38 @@ export function DateFilterMenu({
           sideOffset={8}
           align={align}
         >
-          {/* Sort + calendar (shared panel) */}
-          <DateFilterPanel
+          {/* Sort direction selector */}
+          <Select
+            value={draftSort}
+            onValueChange={(value) => setDraftSort(value as SortDirection)}
+          >
+            <SelectTrigger className="gap-2" aria-label="Sort direction">
+              {/* Wrapper is a <div> (not <span>) so SelectTrigger's
+                  `[&>span]:line-clamp-1` rule doesn't force it to a vertical
+                  -webkit-box and stack the icon/label into a column. */}
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <ArrowUpDown className="size-6 shrink-0 text-ods-text-secondary" />
+                <span className="truncate">
+                  <SelectValue />
+                </span>
+              </div>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="asc">{ascLabel}</SelectItem>
+              <SelectItem value="desc">{descLabel}</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Calendar */}
+          <DatePickerCalendar
             mode={mode}
-            sort={draftSort}
-            onSortChange={setDraftSort}
             selected={draftSelected}
             onSelect={setDraftSelected}
+            numberOfMonths={1}
             fromDate={fromDate}
             toDate={toDate}
             locale={locale}
-            ascLabel={ascLabel}
-            descLabel={descLabel}
+            fluid
           />
 
           {/* Actions */}
@@ -1260,9 +1152,9 @@ export function DateFilterMenu({
               type="button"
               variant="outline"
               fullWidth
-              onClick={hasChanges ? handleReset : handleClose}
+              onClick={handleClose}
             >
-              {hasChanges ? "Reset" : "Close"}
+              Close
             </Button>
             <Button
               type="button"

package/src/components/ui/filter-modal.tsx

@@ -6,9 +6,7 @@ import { cn } from '../../utils/cn'
 import { Filter02Icon } from '../icons-v2-generated/sort-and-filter/filter-02-icon'
 import { Button } from './button'
 import { FilterCheckboxItem } from './filter-checkbox-item'
-import { DateFilterPanel, type DateFilterResult, type DateRange } from './date-picker'
 import { ModalV2, ModalV2Content, ModalV2Footer, ModalV2Header, ModalV2Title } from './modal-v2'
-import { ScrollFadeOverlay, useScrollFade } from './scroll-fade'
 import { Skeleton } from './skeleton'
 import { SortColumnItem, type SortConfig, type SortDirection } from './sort-column-item'
 import { TagKeyValueFilter, type TagKeyConfig } from './tag-key-value-filter'
@@ -53,20 +51,6 @@ export interface FilterModalProps {
   tagFilterTitle?: string
   /** Show skeleton loading state */
   isLoading?: boolean
-  /** Date sort + range filter rendered as the last section. Drafted with the
-   *  other filters and committed via `onChange` on Apply (defaults on Reset). */
-  dateFilter?: {
-    /** Section title. Defaults to 'Date'. */
-    title?: string
-    /** Applied sort direction. Defaults to `defaultSort`. */
-    sort?: SortDirection
-    /** Baseline sort direction restored by Reset. Defaults to 'desc'. */
-    defaultSort?: SortDirection
-    /** Applied date range. */
-    range?: DateRange
-    /** Fired on Apply with the drafted values, and on Reset with the defaults. */
-    onChange: (result: DateFilterResult) => void
-  }
   /** Text shown in empty state title */
   emptyStateTitle?: string
   /** Text shown in empty state description */
@@ -90,7 +74,6 @@ export function FilterModal({
   selectedTags,
   onTagsChange,
   tagFilterTitle,
-  dateFilter,
   isLoading = false,
   emptyStateTitle = 'No filters available',
   emptyStateDescription = 'There are no filter options to display at the moment',
@@ -100,20 +83,10 @@ export function FilterModal({
   })
   const [pendingTags, setPendingTags] = useState<string[]>(selectedTags ?? [])
 
-  const dateDefaultSort: SortDirection = dateFilter?.defaultSort ?? 'desc'
-  const [draftDateSort, setDraftDateSort] = useState<SortDirection>(dateFilter?.sort ?? dateDefaultSort)
-  const [draftDateRange, setDraftDateRange] = useState<DateRange | undefined>(dateFilter?.range)
-
-  // Scroll shadows: bottom fade by default while content continues below,
-  // top fade once scrolled (same pattern as the chat lists).
-  const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade<HTMLDivElement>()
-
   useEffect(() => {
     if (isOpen) {
       setSelectedFilters({ ...currentFilters })
       setPendingTags(selectedTags ?? [])
-      setDraftDateSort(dateFilter?.sort ?? dateDefaultSort)
-      setDraftDateRange(dateFilter?.range)
     }
   }, [isOpen, JSON.stringify(currentFilters), JSON.stringify(selectedTags)])
 
@@ -136,14 +109,12 @@ export function FilterModal({
   const handleReset = () => {
     onFilterChange({})
     onTagsChange?.([])
-    dateFilter?.onChange({ sort: dateDefaultSort, range: undefined })
     onClose()
   }
 
   const handleApply = () => {
     onFilterChange(selectedFilters)
     onTagsChange?.(pendingTags)
-    dateFilter?.onChange({ sort: draftDateSort, range: draftDateRange })
     onClose()
   }
 
@@ -154,7 +125,7 @@ export function FilterModal({
   const hasSort = !!sortConfig && sortConfig.columns.length > 0
   const hasFilterGroups = filterGroups.length > 0
   const hasTagFilter = !!tagFilterKeys && tagFilterKeys.length > 0 && !!onTagsChange
-  const isEmpty = !isLoading && !hasSort && !hasFilterGroups && !hasTagFilter && !dateFilter
+  const isEmpty = !isLoading && !hasSort && !hasFilterGroups && !hasTagFilter
 
   return (
     <ModalV2
@@ -172,12 +143,7 @@ export function FilterModal({
           !isEmpty && 'md:bg-ods-bg md:border md:border-ods-border md:rounded-md md:px-3',
         )}
       >
-        <div className="relative flex-1 min-h-0 flex flex-col">
-        <div
-          ref={scrollRef}
-          onScroll={updateFade}
-          className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-4 md:py-3"
-        >
+        <div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-4 md:py-3">
         {isLoading ? (
           <>
             {[0, 1].map((group) => (
@@ -263,31 +229,10 @@ export function FilterModal({
             onTagsChange={setPendingTags}
             keysTitle={tagFilterTitle}
           />
-        )}
-        {/* Date sort + range filter */}
-        {dateFilter && (
-          <div className="flex flex-col gap-1">
-            <span className="text-h5 text-ods-text-secondary">
-              {dateFilter.title ?? 'Date'}
-            </span>
-            <DateFilterPanel
-              mode="range"
-              sort={draftDateSort}
-              onSortChange={setDraftDateSort}
-              selected={draftDateRange}
-              onSelect={(value) => setDraftDateRange(value as DateRange | undefined)}
-              className="gap-[var(--spacing-system-xxs)]"
-            />
-          </div>
         )}
           </>
         )}
         </div>
-
-        {/* Scroll shadows over the filter list edges */}
-        <ScrollFadeOverlay edge="top" visible={fadeTop} />
-        <ScrollFadeOverlay edge="bottom" visible={fadeBottom} />
-        </div>
       </ModalV2Content>
 
       <ModalV2Footer>

package/src/components/ui/index.ts

@@ -24,7 +24,6 @@ export * from './no-data'
 export * from './page-loader'
 export * from './progress-bar'
 export * from './radio-group'
-export * from './scroll-fade'
 export * from './select'
 export * from './switch'
 export * from './tag-select-dropdown'