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

package/src/components/chat/chat-ticket-list.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { cn } from '../../utils/cn'
+import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
 import { ChatTicketItem, type ChatTicketItemData } from './entity-cards/chat-ticket-item'
 
 export interface ChatTicketListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -15,21 +16,9 @@ export interface ChatTicketListProps extends React.HTMLAttributes<HTMLDivElement
 
 const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
   ({ className, tickets, onTicketClick, isLoading = false, skeletonCount = 5, ...props }, ref) => {
-    const scrollRef = React.useRef<HTMLDivElement>(null)
-    const [fadeTop, setFadeTop] = React.useState(false)
-    const [fadeBottom, setFadeBottom] = React.useState(false)
-
-    const updateFade = React.useCallback(() => {
-      const el = scrollRef.current
-      if (!el) return
-      setFadeTop(el.scrollTop > 0)
-      setFadeBottom(el.scrollHeight - el.scrollTop - el.clientHeight > 1)
-    }, [])
-
-    const ticketCount = tickets.length
-    React.useLayoutEffect(() => {
-      updateFade()
-    }, [ticketCount, updateFade])
+    // Shared scroll-shadow tracking (ui/scroll-fade) — re-measures on resize
+    // and content changes, so no manual ticket-count effect is needed.
+    const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade<HTMLDivElement>()
 
     if (isLoading) {
       return (
@@ -68,27 +57,10 @@ const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
           </div>
 
           {/* Scroll-fade overlays — tinted with the page background so edge
-              tickets fade into the surface behind the list in BOTH themes. The
-              token flips with `data-theme` (light #fafafa, dark #161616),
-              unlike the previous alpha mask. Card-coloured fade (#ffffff) was
-              invisible in light theme against the items' own bg. Same token as
-              guide-welcome. */}
-          <div
-            aria-hidden
-            className={cn(
-              'pointer-events-none absolute inset-x-0 top-0 h-16 transition-opacity duration-150',
-              fadeTop ? 'opacity-100' : 'opacity-0',
-            )}
-            style={{ background: 'linear-gradient(0deg, transparent 0%, var(--color-bg) 100%)' }}
-          />
-          <div
-            aria-hidden
-            className={cn(
-              'pointer-events-none absolute inset-x-0 bottom-0 h-16 transition-opacity duration-150',
-              fadeBottom ? 'opacity-100' : 'opacity-0',
-            )}
-            style={{ background: 'linear-gradient(180deg, transparent 0%, var(--color-bg) 100%)' }}
-          />
+              tickets fade into the surface behind the list in BOTH themes
+              (`--color-bg` flips with `data-theme`). Shared ui/scroll-fade. */}
+          <ScrollFadeOverlay edge="top" visible={fadeTop} />
+          <ScrollFadeOverlay edge="bottom" visible={fadeBottom} />
         </div>
       </div>
     )

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

@@ -3,6 +3,7 @@
 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'
@@ -100,25 +101,7 @@ 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 = 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])
+  const { scrollRef, fadeTop, fadeBottom, update: updateScrollFade } = useScrollFade<HTMLDivElement>()
 
   // Map to the shared `ChatQuickActionRow` chip shape. In `wrap` mode every chip
   // renders (no overflow), and `onHoverStart`/`onHoverEnd` drive the composer
@@ -204,30 +187,9 @@ export function GuideWelcome({
           {children}
         </div>
 
-        {/* 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%)',
-          }}
-        />
+        {/* 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" />
       </div>
 
       {/* Pinned quick-action chips above the composer — the shared

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

@@ -6,6 +6,7 @@ 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'
 
@@ -357,24 +358,9 @@ export function MingoChatHistory({
   const groups = React.useMemo(() => groupDialogs(dialogs), [dialogs])
   const noSearchResults = groups.length === 0 && !!searchQuery?.trim()
 
-  // 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])
+  // 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>()
 
   // Infinite scroll — load the next page when the sentinel enters the
   // scroll viewport.
@@ -445,28 +431,8 @@ export function MingoChatHistory({
         </div>
 
         {/* Scroll-fade — only while content is hidden in that direction. */}
-        <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%)',
-          }}
-        />
+        <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>
     </div>
   )

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

@@ -7,6 +7,7 @@ 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,
@@ -231,29 +232,9 @@ export function MingoWelcome({
     }
   }, [promoStorage, promoStorageKey])
 
-  // 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])
+  // 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>()
 
   const cellCount = featureCards.length
   // Last row's first index — used to drop the bottom divider on the final row.
@@ -365,30 +346,9 @@ export function MingoWelcome({
       )}
       </div>
 
-      {/* 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%)',
-        }}
-      />
+      {/* 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" />
       </div>
       </>
       ))}

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

@@ -69,7 +69,8 @@ export function DataTableHeader({
   const hasVisibleHeaderCell = headerGroup.headers.some(header => {
     if (header.isPlaceholder) return false
     if (isLgUp) return true
-    return Boolean(header.column.columnDef.meta?.filter)
+    const meta = header.column.columnDef.meta
+    return Boolean(meta?.filter) || meta?.alwaysShowHeader === true
   })
 
   return (
@@ -122,6 +123,8 @@ 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.
@@ -130,7 +133,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 && !hasFilter) return null
+  if (!isLgUp && !keepOnTablet) return null
 
   return (
     <div
@@ -139,7 +142,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)
-        !(hasFilter && !isLgUp) && getHideClasses(meta?.hideAt),
+        !(keepOnTablet && !isLgUp) && getHideClasses(meta?.hideAt),
       )}
     >
       {hasFilter ? (

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

@@ -16,6 +16,12 @@ 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,6 +150,14 @@ 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" &&
@@ -168,7 +176,11 @@ function DatePickerCalendar({
     if (!triggerDate) return;
 
     if (!draftRange?.from || draftRange.to) {
-      setDraftRange({ from: triggerDate, to: undefined });
+      // 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);
       return;
     }
     // Second click closes the range, ordering the two ends.
@@ -981,6 +993,89 @@ 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)
 // ============================================================================
@@ -999,14 +1094,21 @@ 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. */
+  /** Fired when the user presses Apply with the drafted selection. Also fired
+   *  by Reset with a cleared selection so the consumer refetches unfiltered data. */
   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. */
@@ -1029,16 +1131,21 @@ export interface DateFilterMenuProps {
 
 /**
  * DateFilterMenu — a calendar-icon-triggered popover combining a sort-direction
- * selector and a date / date-range calendar, with Close and Apply actions.
- * Selections are drafted internally and only committed via `onApply`.
+ * 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.
  */
 export function DateFilterMenu({
   mode = "range",
   sort = "desc",
+  defaultSort = "desc",
   date,
   range,
   onApply,
   onClose,
+  trigger,
   disabled = false,
   fromDate,
   toDate,
@@ -1085,18 +1192,39 @@ 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>
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          disabled={disabled}
-          aria-label={ariaLabel}
-          className={className}
-          leftIcon={<Calendar className="size-6" />}
-        />
+        {trigger ?? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            disabled={disabled}
+            aria-label={ariaLabel}
+            className={className}
+            leftIcon={<Calendar className="size-6" />}
+          />
+        )}
       </Popover.Trigger>
 
       <Popover.Portal>
@@ -1112,38 +1240,18 @@ export function DateFilterMenu({
           sideOffset={8}
           align={align}
         >
-          {/* 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
+          {/* Sort + calendar (shared panel) */}
+          <DateFilterPanel
             mode={mode}
+            sort={draftSort}
+            onSortChange={setDraftSort}
             selected={draftSelected}
             onSelect={setDraftSelected}
-            numberOfMonths={1}
             fromDate={fromDate}
             toDate={toDate}
             locale={locale}
-            fluid
+            ascLabel={ascLabel}
+            descLabel={descLabel}
           />
 
           {/* Actions */}
@@ -1152,9 +1260,9 @@ export function DateFilterMenu({
               type="button"
               variant="outline"
               fullWidth
-              onClick={handleClose}
+              onClick={hasChanges ? handleReset : handleClose}
             >
-              Close
+              {hasChanges ? "Reset" : "Close"}
             </Button>
             <Button
               type="button"