@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
22import { createLogger } from '@sim/logger'
33import { X } from 'lucide-react'
44import { Button , Tooltip } from '@/components/emcn'
5+ import { CountdownRing } from '@/components/emcn/components/toast/countdown-ring'
56import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
67import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
78import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
@@ -20,9 +21,6 @@ const STACK_OFFSET_PX = 3
2021const AUTO_DISMISS_MS = 10000
2122const EXIT_ANIMATION_MS = 200
2223
23- const RING_RADIUS = 5.5
24- const RING_CIRCUMFERENCE = 2 * Math . PI * RING_RADIUS
25-
2624const ACTION_LABELS : Record < NotificationAction [ 'type' ] , string > = {
2725 copilot : 'Fix in Copilot' ,
2826 refresh : 'Refresh' ,
@@ -33,38 +31,17 @@ function isAutoDismissable(n: Notification): boolean {
3331 return n . level === 'error' && ! ! n . workflowId
3432}
3533
36- function CountdownRing ( { onPause } : { onPause : ( ) => void } ) {
34+ function NotificationCountdownRing ( { onPause } : { onPause : ( ) => void } ) {
3735 return (
3836 < Tooltip . Root >
3937 < Tooltip . Trigger asChild >
4038 < Button
4139 variant = 'ghost'
4240 onClick = { onPause }
4341 aria-label = 'Keep notifications visible'
44- className = '!p-[4px] -m-[2px] shrink-0 rounded-[5px] hover:bg-[var(--surface-active)]'
42+ className = '!p-[4px] -m-[2px] shrink-0 rounded-[5px] text-[var(--text-icon)] hover:bg-[var(--surface-active)]'
4543 >
46- < svg
47- width = '14'
48- height = '14'
49- viewBox = '0 0 16 16'
50- fill = 'none'
51- xmlns = 'http://www.w3.org/2000/svg'
52- style = { { transform : 'rotate(-90deg) scaleX(-1)' } }
53- >
54- < circle cx = '8' cy = '8' r = { RING_RADIUS } stroke = 'var(--border)' strokeWidth = '1.5' />
55- < circle
56- cx = '8'
57- cy = '8'
58- r = { RING_RADIUS }
59- stroke = 'var(--text-icon)'
60- strokeWidth = '1.5'
61- strokeLinecap = 'round'
62- strokeDasharray = { RING_CIRCUMFERENCE }
63- style = { {
64- animation : `notification-countdown ${ AUTO_DISMISS_MS } ms linear forwards` ,
65- } }
66- />
67- </ svg >
44+ < CountdownRing duration = { AUTO_DISMISS_MS } />
6845 </ Button >
6946 </ Tooltip . Trigger >
7047 < Tooltip . Content >
@@ -266,7 +243,7 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
266243 { notification . message }
267244 </ div >
268245 < div className = 'flex shrink-0 items-start gap-[2px]' >
269- { showCountdown && < CountdownRing onPause = { pauseAll } /> }
246+ { showCountdown && < NotificationCountdownRing onPause = { pauseAll } /> }
270247 < Tooltip . Root >
271248 < Tooltip . Trigger asChild >
272249 < Button
0 commit comments