Skip to content

Commit 114f4b9

Browse files
samejrsamejr
committed
Adds nice behaviour if a long stream key is used
1 parent 330ffc8 commit 114f4b9

File tree

1 file changed

+91
-83
lines changed
  • apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey

1 file changed

+91
-83
lines changed

‎apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx‎

Lines changed: 91 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -211,96 +211,104 @@ export function RealtimeStreamViewer({
211211
return (
212212
<div className="flex h-full flex-col overflow-hidden">
213213
{/* Header */}
214-
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-grid-bright bg-background-bright px-3 py-2.5">
215-
<div className="flex items-center gap-1.5">
216-
<TooltipProvider>
217-
<Tooltip>
218-
<TooltipTrigger>
219-
{isConnected ? (
220-
<BoltIcon className={cn("size-3.5 animate-pulse text-success")} />
221-
) : (
222-
<BoltSlashIcon className={cn("size-3.5 text-text-dimmed")} />
223-
)}
224-
</TooltipTrigger>
225-
<TooltipContent side="top" className="text-xs">
226-
{isConnected ? "Connected" : "Disconnected"}
227-
</TooltipContent>
228-
</Tooltip>
229-
</TooltipProvider>
230-
<Paragraph variant="small/bright" className="mb-0">
231-
Stream: <span className="font-mono text-text-dimmed">{streamKey}</span>
232-
</Paragraph>
233-
</div>
234-
<div className="flex flex-wrap items-center gap-3">
235-
<Paragraph variant="small" className="mb-0">
236-
{simplur`${chunks.length} chunk[|s]`}
237-
</Paragraph>
238-
<TooltipProvider>
239-
<Tooltip disableHoverableContent>
240-
<TooltipTrigger
241-
onClick={() => setViewMode(viewMode === "list" ? "compact" : "list")}
242-
className="text-text-dimmed transition-colors focus-custom hover:cursor-pointer hover:text-text-bright"
243-
>
244-
{viewMode === "list" ? (
245-
<SnakedArrowIcon className="size-4" />
246-
) : (
247-
<ListBulletIcon className="size-4" />
248-
)}
249-
</TooltipTrigger>
250-
<TooltipContent side="left" className="text-xs">
251-
{viewMode === "list" ? "Flow as text" : "View as list"}
252-
</TooltipContent>
253-
</Tooltip>
254-
</TooltipProvider>
255-
{chunks.length > 0 && (
214+
<div className="border-b border-grid-bright bg-background-bright @container">
215+
<div className="flex flex-wrap items-center justify-between gap-2 px-3 py-2.5 @[300px]:flex-nowrap">
216+
<div className="flex min-w-0 items-center gap-1.5">
256217
<TooltipProvider>
257-
<Tooltip open={copied || mouseOver} disableHoverableContent>
258-
<TooltipTrigger
259-
onClick={onCopied}
260-
onMouseEnter={() => setMouseOver(true)}
261-
onMouseLeave={() => setMouseOver(false)}
262-
className={cn(
263-
"transition-colors duration-100 focus-custom hover:cursor-pointer",
264-
copied ? "text-success" : "text-text-dimmed hover:text-text-bright"
265-
)}
266-
>
267-
{copied ? (
268-
<ClipboardCheck className="size-4" />
218+
<Tooltip>
219+
<TooltipTrigger>
220+
{isConnected ? (
221+
<BoltIcon className={cn("size-3.5 animate-pulse text-success")} />
269222
) : (
270-
<Clipboard className="size-4" />
223+
<BoltSlashIcon className={cn("size-3.5 text-text-dimmed")} />
271224
)}
272225
</TooltipTrigger>
273-
<TooltipContent side="left" className="text-xs">
274-
{copied ? "Copied" : "Copy"}
226+
<TooltipContent side="top" className="text-xs">
227+
{isConnected ? "Connected" : "Disconnected"}
275228
</TooltipContent>
276229
</Tooltip>
277230
</TooltipProvider>
278-
)}
279-
{chunks.length > 0 && (
280-
<TooltipProvider>
281-
<Tooltip disableHoverableContent>
282-
<TooltipTrigger
283-
onClick={() => {
284-
if (isAtBottom) {
285-
scrollRef.current?.scrollTo({ top: 0, behavior: "smooth" });
286-
} else {
287-
bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
288-
}
289-
}}
290-
className="text-text-dimmed transition-colors focus-custom hover:cursor-pointer hover:text-text-bright"
291-
>
292-
{isAtBottom ? (
293-
<MoveToTopIcon className="size-4" />
294-
) : (
295-
<MoveToBottomIcon className="size-4" />
296-
)}
297-
</TooltipTrigger>
298-
<TooltipContent side="left" className="text-xs">
299-
{isAtBottom ? "Scroll to top" : "Scroll to bottom"}
300-
</TooltipContent>
301-
</Tooltip>
302-
</TooltipProvider>
303-
)}
231+
<Paragraph
232+
variant="small/bright"
233+
className="mb-0 flex min-w-0 items-center gap-1 truncate whitespace-nowrap"
234+
>
235+
<span>Stream:</span>
236+
<span className="truncate font-mono text-text-dimmed">{streamKey}</span>
237+
</Paragraph>
238+
</div>
239+
<div className="flex w-full flex-wrap items-center justify-between gap-3 @[300px]:w-auto @[300px]:flex-nowrap">
240+
<Paragraph variant="small" className="mb-0 whitespace-nowrap">
241+
{simplur`${chunks.length} chunk[|s]`}
242+
</Paragraph>
243+
<div className="flex items-center gap-3">
244+
<TooltipProvider>
245+
<Tooltip disableHoverableContent>
246+
<TooltipTrigger
247+
onClick={() => setViewMode(viewMode === "list" ? "compact" : "list")}
248+
className="text-text-dimmed transition-colors focus-custom hover:cursor-pointer hover:text-text-bright"
249+
>
250+
{viewMode === "list" ? (
251+
<SnakedArrowIcon className="size-4" />
252+
) : (
253+
<ListBulletIcon className="size-4" />
254+
)}
255+
</TooltipTrigger>
256+
<TooltipContent side="left" className="text-xs">
257+
{viewMode === "list" ? "Flow as text" : "View as list"}
258+
</TooltipContent>
259+
</Tooltip>
260+
</TooltipProvider>
261+
{chunks.length > 0 && (
262+
<TooltipProvider>
263+
<Tooltip open={copied || mouseOver} disableHoverableContent>
264+
<TooltipTrigger
265+
onClick={onCopied}
266+
onMouseEnter={() => setMouseOver(true)}
267+
onMouseLeave={() => setMouseOver(false)}
268+
className={cn(
269+
"transition-colors duration-100 focus-custom hover:cursor-pointer",
270+
copied ? "text-success" : "text-text-dimmed hover:text-text-bright"
271+
)}
272+
>
273+
{copied ? (
274+
<ClipboardCheck className="size-4" />
275+
) : (
276+
<Clipboard className="size-4" />
277+
)}
278+
</TooltipTrigger>
279+
<TooltipContent side="left" className="text-xs">
280+
{copied ? "Copied" : "Copy"}
281+
</TooltipContent>
282+
</Tooltip>
283+
</TooltipProvider>
284+
)}
285+
{chunks.length > 0 && (
286+
<TooltipProvider>
287+
<Tooltip disableHoverableContent>
288+
<TooltipTrigger
289+
onClick={() => {
290+
if (isAtBottom) {
291+
scrollRef.current?.scrollTo({ top: 0, behavior: "smooth" });
292+
} else {
293+
bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
294+
}
295+
}}
296+
className="text-text-dimmed transition-colors focus-custom hover:cursor-pointer hover:text-text-bright"
297+
>
298+
{isAtBottom ? (
299+
<MoveToTopIcon className="size-4" />
300+
) : (
301+
<MoveToBottomIcon className="size-4" />
302+
)}
303+
</TooltipTrigger>
304+
<TooltipContent side="left" className="text-xs">
305+
{isAtBottom ? "Scroll to top" : "Scroll to bottom"}
306+
</TooltipContent>
307+
</Tooltip>
308+
</TooltipProvider>
309+
)}
310+
</div>
311+
</div>
304312
</div>
305313
</div>
306314

0 commit comments

Comments
 (0)