spacing tweaks and add link to explore for plate

This commit is contained in:
Josh Hawkins 2025-10-26 06:52:19 -05:00
parent 2c480b9a89
commit 6e87fffdfb

View File

@ -22,6 +22,7 @@ import EventMenu from "@/components/timeline/EventMenu";
import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog"; import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { Link } from "react-router-dom";
type DetailStreamProps = { type DetailStreamProps = {
reviewItems?: ReviewSegment[]; reviewItems?: ReviewSegment[];
@ -499,15 +500,22 @@ function EventList({
}} }}
role="button" role="button"
> >
<span className="capitalize">{label}</span> <div className="flex gap-2">
{event.data?.recognized_license_plate && ( <span className="capitalize">{label}</span>
<> {event.data?.recognized_license_plate && (
·{" "} <>
<span className="text-sm text-secondary-foreground"> <span className="text-secondary-foreground">·</span>
{event.data.recognized_license_plate} <div className="text-sm text-secondary-foreground">
</span> <Link
</> to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
)} className="text-sm"
>
{event.data.recognized_license_plate}
</Link>
</div>
</>
)}
</div>
</div> </div>
</div> </div>
<div className="mr-2 flex flex-row justify-end"> <div className="mr-2 flex flex-row justify-end">
@ -615,10 +623,11 @@ function LifecycleItem({
)} )}
/> />
</div> </div>
<div className="flex w-full flex-row justify-between">
<div className="ml-0.5 flex min-w-0 flex-1">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<div className="flex items-start text-left"> <div className="flex items-start break-words text-left">
{getLifecycleItemDescription(item)} {getLifecycleItemDescription(item)}
</div> </div>
</TooltipTrigger> </TooltipTrigger>
@ -638,7 +647,9 @@ function LifecycleItem({
</span> </span>
{areaPx !== undefined && areaPct !== undefined ? ( {areaPx !== undefined && areaPct !== undefined ? (
<span className="font-medium text-foreground"> <span className="font-medium text-foreground">
{areaPx} {t("pixels", { ns: "common" })} · {areaPct}% {areaPx} {t("pixels", { ns: "common" })}{" "}
<span className="text-secondary-foreground">·</span>{" "}
{areaPct}%
</span> </span>
) : ( ) : (
<span>N/A</span> <span>N/A</span>
@ -648,7 +659,10 @@ function LifecycleItem({
</div> </div>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
<div className={cn("p-1 text-xs")}>{formattedEventTimestamp}</div> </div>
<div className="ml-3 flex-shrink-0 px-1 text-right text-xs text-primary-variant">
<div className="whitespace-nowrap">{formattedEventTimestamp}</div>
</div> </div>
</div> </div>
); );