11import * as React from 'react'
22import { createContext , forwardRef , useCallback , useContext , useEffect , useState } from 'react'
33
4+ import { Icon as CanaryIcon , ScrollArea } from '@/components'
45import * as AccordionPrimitive from '@radix-ui/react-accordion'
5- import { ScrollArea } from '@radix-ui/react-scroll-area'
66import { cn } from '@utils/cn'
77import { ExecutionState } from '@views/repo/pull-request'
88
9- import { Icon as CanaryIcon } from '../components/icon'
10-
119type ExecutionDetail = {
1210 status : ExecutionState
1311 /* formatted duration */
@@ -17,14 +15,18 @@ type ExecutionDetail = {
1715const getStatusIcon = ( status : ExecutionState ) : React . ReactElement => {
1816 switch ( status ) {
1917 case ExecutionState . RUNNING :
20- return < CanaryIcon size = { 16 } name = "running" className = "animate-spin text-warning" />
18+ return < CanaryIcon size = { 20 } name = "running" className = "animate-spin text-warning" />
2119 case ExecutionState . SUCCESS :
2220 return < CanaryIcon name = "success" size = { 16 } className = "text-foreground-success" />
2321 case ExecutionState . FAILURE :
2422 return < CanaryIcon name = "fail" size = { 16 } />
2523 case ExecutionState . WAITING_ON_DEPENDENCIES :
2624 case ExecutionState . PENDING :
27- return < CanaryIcon name = "pending-clock" size = { 16 } />
25+ return (
26+ < div className = "flex size-5 items-center justify-center" >
27+ < span className = "size-4 rounded-full border border-icons-7" />
28+ </ div >
29+ )
2830 case ExecutionState . SKIPPED :
2931 case ExecutionState . UNKNOWN :
3032 default :
@@ -46,8 +48,6 @@ type TreeContextProps = {
4648 handleExpand : ( id : string ) => void
4749 selectItem : ( id : string ) => void
4850 setExpendedItems ?: React . Dispatch < React . SetStateAction < string [ ] | undefined > >
49- openIcon ?: React . ReactNode
50- closeIcon ?: React . ReactNode
5151 direction : 'rtl' | 'ltr'
5252}
5353
@@ -73,21 +73,7 @@ type TreeViewProps = {
7373} & React . HTMLAttributes < HTMLDivElement >
7474
7575const Tree = forwardRef < HTMLDivElement , TreeViewProps > (
76- (
77- {
78- className,
79- elements,
80- initialSelectedId,
81- initialExpendedItems,
82- children,
83- indicator = true ,
84- openIcon,
85- closeIcon,
86- dir,
87- ...props
88- } ,
89- ref
90- ) => {
76+ ( { className, elements, initialSelectedId, initialExpendedItems, children, indicator = true , dir, ...props } ) => {
9177 const [ selectedId , setSelectedId ] = useState < string | undefined > ( initialSelectedId )
9278 const [ expendedItems , setExpendedItems ] = useState < string [ ] | undefined > ( initialExpendedItems )
9379
@@ -149,26 +135,24 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
149135 selectItem,
150136 setExpendedItems,
151137 indicator,
152- openIcon,
153- closeIcon,
154138 direction
155139 } }
156140 >
157- < div className = { cn ( 'size-full' , className ) } >
158- < ScrollArea ref = { ref } className = "relative h -full px-2" dir = { dir as Direction } >
141+ < ScrollArea className = "pt-4" dir = { dir as Direction } >
142+ < div className = { cn ( 'size -full' , className ) } >
159143 < AccordionPrimitive . Root
160144 { ...props }
161145 type = "multiple"
162146 defaultValue = { expendedItems }
163147 value = { expendedItems }
164- className = "flex flex-col gap-1 "
148+ className = "flex flex-col gap-3 "
165149 onValueChange = { value => setExpendedItems ( prev => [ ...( prev ?? [ ] ) , value [ 0 ] ] ) }
166150 dir = { dir as Direction }
167151 >
168152 { children }
169153 </ AccordionPrimitive . Root >
170- </ ScrollArea >
171- </ div >
154+ </ div >
155+ </ ScrollArea >
172156 </ TreeContext . Provider >
173157 )
174158 }
@@ -201,45 +185,51 @@ type FolderProps = {
201185 element : string
202186 isSelectable ?: boolean
203187 isSelect ?: boolean
188+ level : number
204189} & React . ComponentPropsWithoutRef < typeof AccordionPrimitive . Item > &
205190 ExecutionDetail
206191
207192const Folder = forwardRef < HTMLDivElement , FolderProps & React . HTMLAttributes < HTMLDivElement > > (
208- ( { className, element, value, isSelectable = true , isSelect, children, status, duration, ...props } ) => {
209- const { direction, handleExpand, expendedItems, indicator , setExpendedItems, openIcon , closeIcon } = useTree ( )
193+ ( { className, element, value, isSelectable = true , isSelect, children, status, duration, level , ...props } ) => {
194+ const { direction, handleExpand, expendedItems, setExpendedItems } = useTree ( )
210195
211196 return (
212- < AccordionPrimitive . Item { ...props } value = { value } className = "relative size-full overflow-hidden" >
197+ < AccordionPrimitive . Item { ...props } value = { value } className = "relative -mb-3 size-full overflow-hidden pb-3 " >
213198 < AccordionPrimitive . Trigger
214- className = { cn ( `flex w-full items-center gap-1 rounded-md pb-1.5 text-sm` , className , {
215- 'rounded-md' : isSelect && isSelectable ,
216- 'cursor-pointer' : isSelectable ,
217- 'cursor-not-allowed opacity-50' : ! isSelectable
218- } ) }
199+ className = { cn (
200+ `flex w-full items-center gap-1 rounded-md text-sm px-5` ,
201+ className ,
202+ {
203+ 'rounded-md' : isSelect && isSelectable ,
204+ 'cursor-pointer' : isSelectable ,
205+ 'cursor-not-allowed opacity-50' : ! isSelectable
206+ } ,
207+ level >= 2 && 'pl-14' ,
208+ level === 1 && 'pl-7'
209+ ) }
219210 disabled = { ! isSelectable }
220211 onClick = { ( ) => handleExpand ( value ) }
221212 >
222- < div className = "mt-1 pt-1" >
223- { expendedItems ?. includes ( value )
224- ? ( openIcon ?? < CanaryIcon name = "chevron-down" className = "size-4" height = { 12 } /> )
225- : ( closeIcon ?? < CanaryIcon name = "chevron-right" className = " size-4" height = { 12 } /> ) }
226- </ div >
227- < div className = "mr-1 mt-1 flex w-full items-baseline justify-between" >
228- < div className = "flex items-baseline " >
229- < div className = "mr-1 flex self-center" > { getStatusIcon ( status ) } </ div >
230- < span className = "ml-1 text-sm font-normal " >
231- { element } < span className = "text-muted- foreground" > ({ React . Children . count ( children ) } )</ span >
213+ < CanaryIcon
214+ name = "chevron-right"
215+ className = { cn ( 'text-icons-1' , expendedItems ?. includes ( value ) && 'rotate-90' ) }
216+ size = { 12 }
217+ / >
218+ < div className = "flex w-full items-center justify-between" >
219+ < div className = "flex items-center " >
220+ { getStatusIcon ( status ) }
221+ < span className = "ml-1 leading-tight text-foreground-8 " >
222+ { element } < span className = "text-foreground-5 " > ({ React . Children . count ( children ) } )</ span >
232223 </ span >
233224 </ div >
234- < span className = "text-muted- foreground" > { duration ?? '--' } </ span >
225+ < span className = "text-foreground-4 " > { duration ?? '--' } </ span >
235226 </ div >
236227 </ AccordionPrimitive . Trigger >
237- < AccordionPrimitive . Content className = "relative h-full overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" >
238- { element && indicator && < TreeIndicator aria-hidden = "true" /> }
228+ < AccordionPrimitive . Content className = "relative h-full overflow-visible px-5 text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" >
239229 < AccordionPrimitive . Root
240230 dir = { direction }
241231 type = "multiple"
242- className = "flex flex-col gap-1 pl-5 rtl:mr-5"
232+ className = "mt-3 flex flex-col gap-3 rtl:mr-5"
243233 defaultValue = { expendedItems }
244234 value = { expendedItems }
245235 onValueChange = { value => {
@@ -264,6 +254,7 @@ const File = forwardRef<
264254 isSelectable ?: boolean
265255 isSelect ?: boolean
266256 fileIcon ?: React . ReactNode
257+ level : number
267258 } & React . ComponentPropsWithoutRef < typeof AccordionPrimitive . Trigger > &
268259 ExecutionDetail
269260> (
@@ -278,6 +269,7 @@ const File = forwardRef<
278269 children,
279270 status,
280271 duration,
272+ level,
281273 ...props
282274 } ,
283275 ref
@@ -293,22 +285,27 @@ const File = forwardRef<
293285 disabled = { ! isSelectable }
294286 aria-label = "File"
295287 className = { cn (
296- 'flex w-full cursor-pointer items-center gap-1 rounded-md px-1 py-1 text-sm duration-200 ease-in-out rtl:pl-1 rtl:pr-0' ,
297- { [ 'bg-[#18181B] px-2' ] : isSelected } ,
288+ 'flex relative w-full cursor-pointer items-center gap-1 rounded-md text-sm duration-200 ease-in-out rtl:pl-1 rtl:pr-0' ,
289+ {
290+ [ 'after:absolute after:bg-background-4 after:-inset-x-1 after:-inset-y-1.5 after:-z-10 after:rounded' ] :
291+ isSelected
292+ } ,
298293 isSelectable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50' ,
294+ level >= 2 && 'pl-14' ,
295+ level === 1 && 'pl-7' ,
299296 className
300297 ) }
301298 onClick = { ( ) => {
302299 handleSelect ?.( value )
303300 selectItem ( value )
304301 } }
305302 >
306- < div className = "flex w-full items-baseline justify-between" >
307- < div className = "flex items-baseline " >
308- < div className = "mr-1 flex size-4 self-center" > { getStatusIcon ( status ) } </ div >
309- < span className = "ml-1 text-sm font-normal " > { children } </ span >
303+ < div className = "relative flex w-full items-center justify-between pl-4 " >
304+ < div className = "flex items-center " >
305+ { getStatusIcon ( status ) }
306+ < span className = "ml-1 leading-tight text-foreground-8 " > { children } </ span >
310307 </ div >
311- < span className = "text-muted- foreground" > { duration ?? '--' } </ span >
308+ < span className = "text-foreground-4 " > { duration ?? '--' } </ span >
312309 </ div >
313310 </ AccordionPrimitive . Trigger >
314311 </ AccordionPrimitive . Item >
0 commit comments