@@ -15,16 +15,19 @@ import {
1515import capitalize from "lodash/capitalize" ;
1616import { timeFrom } from "utils/time" ;
1717
18+ import { ScrollArea } from "components/ScrollArea/ScrollArea" ;
1819import {
1920ChevronDownIcon ,
2021ChevronUpIcon ,
2122ExternalLinkIcon ,
2223FileIcon ,
2324LayoutGridIcon ,
25+ SquareCheckBigIcon ,
2426} from "lucide-react" ;
2527import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon" ;
2628import { useAppLink } from "modules/apps/useAppLink" ;
2729import { type FC , useState } from "react" ;
30+ import { Link as RouterLink } from "react-router-dom" ;
2831import { truncateURI } from "utils/uri" ;
2932
3033interface AppStatusesProps {
@@ -81,9 +84,9 @@ export const AppStatuses: FC<AppStatusesProps> = ({
8184{ latestStatus . message || capitalize ( latestStatus . state ) }
8285</ span >
8386</ div >
84- < span className = "text-xs text-content-secondary first-letter:uppercase block pl-[26px]" >
87+ < time className = "text-xs text-content-secondary first-letter:uppercase block pl-[26px]" >
8588{ timeFrom ( new Date ( latestStatus . created_at ) , comparisonDate ) }
86- </ span >
89+ </ time >
8790</ div >
8891
8992< div className = "flex items-center gap-2" >
@@ -119,6 +122,13 @@ export const AppStatuses: FC<AppStatusesProps> = ({
119122</ Button >
120123) ) }
121124
125+ < Button asChild size = "sm" variant = "outline" >
126+ < RouterLink to = { `/tasks/${ workspace . owner_name } ${ workspace . name } } >
127+ < SquareCheckBigIcon />
128+ View task
129+ </ RouterLink >
130+ </ Button >
131+
122132< TooltipProvider >
123133< Tooltip >
124134< TooltipTrigger asChild >
@@ -141,35 +151,38 @@ export const AppStatuses: FC<AppStatusesProps> = ({
141151</ div >
142152</ div >
143153
144- { displayStatuses &&
145- otherStatuses . map ( ( status ) => {
146- const statusTime = new Date ( status . created_at ) ;
147- const formattedTimestamp = timeFrom ( statusTime , comparisonDate ) ;
154+ { displayStatuses && (
155+ < ScrollArea className = "h-[200px]" >
156+ { otherStatuses . map ( ( status ) => {
157+ const statusTime = new Date ( status . created_at ) ;
158+ const formattedTimestamp = timeFrom ( statusTime , comparisonDate ) ;
148159
149- return (
150- < div
151- key = { status . id }
152- className = { `
160+ return (
161+ < div
162+ key = { status . id }
163+ className = { `
153164flex items-center justify-between px-4 py-3
154165border-0 [&:not(:last-child)]:border-b border-solid border-border
155166` }
156- >
157- < div className = "flex items-center justify-between w-full text-content-secondary" >
158- < span className = "text-xs flex items-center gap-2" >
159- < AppStatusStateIcon
160- state = { status . state }
161- latest = { false }
162- className = "size-icon-xs w-[18px]"
163- />
164- { status . message || capitalize ( status . state ) }
165- </ span >
166- < span className = "text-2xs text-content-secondary first-letter:uppercase block pl-[26px]" >
167- { formattedTimestamp }
168- </ span >
167+ >
168+ < div className = "flex items-center justify-between w-full text-content-secondary" >
169+ < span className = "text-xs flex items-center gap-2" >
170+ < AppStatusStateIcon
171+ state = { status . state }
172+ latest = { false }
173+ className = "size-icon-xs w-[18px]"
174+ />
175+ { status . message || capitalize ( status . state ) }
176+ </ span >
177+ < span className = "text-2xs text-content-secondary first-letter:uppercase block pl-[26px]" >
178+ { formattedTimestamp }
179+ </ span >
180+ </ div >
169181</ div >
170- </ div >
171- ) ;
172- } ) }
182+ ) ;
183+ } ) }
184+ </ ScrollArea >
185+ ) }
173186</ div >
174187) ;
175188} ;