@open-mercato/ui 0.6.4-develop.4121.1.0d7f20d229 → 0.6.4-develop.4133.1.48fc6c8f7b

package/src/backend/progress/ProgressTopBar.tsx

@@ -5,6 +5,7 @@ import { Button } from '../../primitives/button'
 import { Progress } from '../../primitives/progress'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useProgress } from './useProgress'
+import { useAutoHideCompletedJobs } from './useAutoHideCompletedJobs'
 import type { ProgressJobDto } from './useProgressPoll'
 import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 import { apiCall } from '../utils/apiCall'
@@ -12,10 +13,17 @@ import { apiCall } from '../utils/apiCall'
 export type ProgressTopBarProps = {
   className?: string
   t: TranslateFn
+  /**
+   * How long (ms) to keep successfully completed jobs visible before auto-hiding.
+   * Set to `false` or `0` to disable auto-hide. Defaults to 10 000 ms.
+   * Failed and cancelled jobs are never auto-hidden.
+   */
+  completedAutoHideMs?: number | false
 }
 
-export function ProgressTopBar({ className, t }: ProgressTopBarProps) {
+export function ProgressTopBar({ className, t, completedAutoHideMs }: ProgressTopBarProps) {
   const { activeJobs, recentlyCompleted, refresh } = useProgress()
+  const visibleCompleted = useAutoHideCompletedJobs(recentlyCompleted, completedAutoHideMs)
   const [expanded, setExpanded] = React.useState(false)
 
   React.useEffect(() => {
@@ -28,7 +36,7 @@ export function ProgressTopBar({ className, t }: ProgressTopBarProps) {
   }, [expanded])
 
   const hasActiveJobs = activeJobs.length > 0
-  const hasRecentJobs = recentlyCompleted.length > 0
+  const hasRecentJobs = visibleCompleted.length > 0
 
   if (!hasActiveJobs && !hasRecentJobs) return null
 
@@ -60,7 +68,7 @@ export function ProgressTopBar({ className, t }: ProgressTopBarProps) {
             <>
               <CheckCircle className="h-4 w-4 text-status-success-icon" />
               <span className="text-muted-foreground">
-                {t('progress.recentlyCompleted', '{count} operations completed', { count: recentlyCompleted.length })}
+                {t('progress.recentlyCompleted', '{count} operations completed', { count: visibleCompleted.length })}
               </span>
             </>
           )}
@@ -77,7 +85,7 @@ export function ProgressTopBar({ className, t }: ProgressTopBarProps) {
           {activeJobs.map((job) => (
             <ProgressJobCard key={job.id} job={job} t={t} onCancel={refresh} />
           ))}
-          {recentlyCompleted.map((job) => (
+          {visibleCompleted.map((job) => (
             <ProgressJobCard key={job.id} job={job} t={t} />
           ))}
         </div>

package/src/backend/progress/useAutoHideCompletedJobs.ts

@@ -0,0 +1,100 @@
+"use client"
+import * as React from 'react'
+import type { ProgressJobDto } from './useProgressPoll'
+
+/** Default auto-hide delay for successfully completed progress jobs (ms). */
+export const DEFAULT_AUTO_HIDE_MS = 10_000
+
+function safeParseMs(isoString: string | null | undefined): number | null {
+  if (!isoString) return null
+  const ms = new Date(isoString).getTime()
+  return isNaN(ms) ? null : ms
+}
+
+/**
+ * Hides successfully completed progress jobs after a configurable timeout.
+ *
+ * Uses `finishedAt` so a job that finished 8s ago with a 10s timeout
+ * disappears in 2s instead of a full new 10s window — works correctly
+ * after panel collapse/expand or page focus restore.
+ *
+ * Pass `timeoutMs={false}` or `timeoutMs={0}` to disable auto-hide.
+ * Failed and cancelled jobs are never hidden automatically.
+ *
+ * Each completed job ID is scheduled at most once. If the same job ID
+ * reappears in the list after its timer has already fired (which should
+ * not occur in normal server behaviour), it remains hidden.
+ */
+export function useAutoHideCompletedJobs(
+  completed: ProgressJobDto[],
+  timeoutMs: number | false = DEFAULT_AUTO_HIDE_MS,
+): ProgressJobDto[] {
+  const [expiredIds, setExpiredIds] = React.useState<ReadonlySet<string>>(new Set())
+  // Tracks IDs for which a hide-timer has been scheduled to prevent double-scheduling
+  // on poll/SSE refresh cycles. IDs remain here after the timer fires so a reappearing
+  // job (should not happen) stays hidden rather than restarting the countdown.
+  const scheduledRef = React.useRef<Set<string>>(new Set())
+  const timersRef = React.useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())
+
+  // Clear all pending timers on unmount
+  React.useEffect(() => {
+    return () => {
+      for (const t of timersRef.current.values()) clearTimeout(t)
+      timersRef.current.clear()
+      scheduledRef.current.clear()
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (timeoutMs === false || timeoutMs <= 0) return
+
+    const now = Date.now()
+    const timeout = timeoutMs as number
+
+    for (const job of completed) {
+      if (job.status !== 'completed') continue
+      if (scheduledRef.current.has(job.id)) continue
+
+      scheduledRef.current.add(job.id)
+
+      const finishedAt = safeParseMs(job.finishedAt) ?? now
+      const elapsed = now - finishedAt
+      const remaining = Math.max(0, timeout - elapsed)
+
+      if (remaining === 0) {
+        // Already past the timeout window (e.g. page reload with stale job)
+        setExpiredIds((prev) => {
+          const next = new Set(prev)
+          next.add(job.id)
+          return next
+        })
+        continue
+      }
+
+      const t = setTimeout(() => {
+        setExpiredIds((prev) => {
+          const next = new Set(prev)
+          next.add(job.id)
+          return next
+        })
+        timersRef.current.delete(job.id)
+      }, remaining)
+      timersRef.current.set(job.id, t)
+    }
+  }, [completed, timeoutMs])
+
+  if (timeoutMs === false || timeoutMs <= 0) return completed
+
+  const timeout = timeoutMs as number
+  const now = Date.now()
+
+  return completed.filter((job) => {
+    if (job.status !== 'completed') return true
+    if (expiredIds.has(job.id)) return false
+    // Safety: hide jobs whose finishedAt is already past the window
+    // (handles panel remount or page reload without relying solely on expiredIds)
+    const finishedAt = safeParseMs(job.finishedAt)
+    if (finishedAt !== null && now - finishedAt >= timeout) return false
+    return true
+  })
+}

package/src/primitives/__tests__/date-picker.test.tsx

@@ -177,6 +177,18 @@ describe('DatePicker primitive', () => {
       expect(dayCellButton.className).not.toMatch(/focus-visible:ring-2/)
     }
   })
+
+  it('opens on the month of the selected value, not the current month (regression)', async () => {
+    // A value far from any plausible "today" so the assertion stays deterministic.
+    // react-day-picker v10 derives the initial month from `month`/`defaultMonth`
+    // (falling back to today) and ignores `selected`, so DatePicker must pass
+    // `defaultMonth` or the selected day is never rendered.
+    renderWithI18n(<DatePicker value={new Date(2020, 0, 15)} onChange={() => {}} footer="none" />)
+    await openPopover()
+    const selectedCell = document.querySelector('td[data-selected="true"]')
+    expect(selectedCell).not.toBeNull()
+    expect((selectedCell as HTMLElement).className).toMatch(/!bg-primary/)
+  })
 })
 
 describe('DatePicker backwards-compat shims', () => {

package/src/primitives/date-picker.tsx

@@ -230,6 +230,7 @@ export function DatePicker({
         <Calendar
           mode="single"
           selected={selectedDate ?? undefined}
+          defaultMonth={selectedDate ?? undefined}
           onSelect={handleDaySelect}
           locale={locale}
           disabled={disabledMatcher}