Show review title in review card

This commit is contained in:
Nicolas Mowen 2025-11-05 08:33:40 -07:00
parent c25d5f431f
commit 4719bff854
3 changed files with 41 additions and 26 deletions

View File

@ -38,6 +38,7 @@ import { Button, buttonVariants } from "../ui/button";
import { Trans, useTranslation } from "react-i18next";
import { cn } from "@/lib/utils";
import { LuCircle } from "react-icons/lu";
import { MdAutoAwesome } from "react-icons/md";
type ReviewCardProps = {
event: ReviewSegment;
@ -164,8 +165,7 @@ export default function ReviewCard({
<div className="flex items-center justify-between">
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center justify-evenly gap-1">
<>
<div className="flex items-center gap-2">
<LuCircle
className={cn(
"size-2",
@ -174,19 +174,24 @@ export default function ReviewCard({
: "fill-severity_detection text-severity_detection",
)}
/>
{event.data.objects.map((object) => {
return getIconForLabel(
object,
"size-3 text-primary dark:text-white",
);
})}
{event.data.audio.map((audio) => {
return getIconForLabel(
audio,
"size-3 text-primary dark:text-white",
);
})}
</>
<div className="flex items-center gap-1">
{event.data.objects.map((object, idx) => (
<div
key={`${object}-${idx}`}
className="rounded-full bg-muted-foreground p-1"
>
{getIconForLabel(object, "size-3 text-white")}
</div>
))}
{event.data.audio.map((audio, idx) => (
<div
key={`${audio}-${idx}`}
className="rounded-full bg-muted-foreground p-1"
>
{getIconForLabel(audio, "size-3 text-white")}
</div>
))}
</div>
<div className="font-extra-light text-xs">{formattedDate}</div>
</div>
</TooltipTrigger>
@ -213,6 +218,14 @@ export default function ReviewCard({
dense
/>
</div>
{event.data.metadata?.title && (
<div className="flex items-center gap-1.5 rounded bg-secondary/50">
<MdAutoAwesome className="size-3 shrink-0 text-primary" />
<span className="truncate text-xs text-primary">
{event.data.metadata.title}
</span>
</div>
)}
</div>
);

View File

@ -22,6 +22,7 @@ import {
LuChevronRight,
LuSettings,
} from "react-icons/lu";
import { MdAutoAwesome } from "react-icons/md";
import { getTranslatedLabel } from "@/utils/i18n";
import EventMenu from "@/components/timeline/EventMenu";
import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
@ -410,8 +411,9 @@ function ReviewGroup({
</div>
<div className="flex flex-col gap-0.5">
{review.data.metadata?.title && (
<div className="mb-1 text-sm text-primary-variant">
{review.data.metadata.title}
<div className="mb-1 flex items-center gap-1 text-sm text-primary-variant">
<MdAutoAwesome className="size-3 shrink-0" />
<span className="truncate">{review.data.metadata.title}</span>
</div>
)}
<div className="flex flex-row items-center gap-1.5">

View File

@ -974,7 +974,7 @@ function Timeline({
? "w-[100px] flex-shrink-0"
: timelineType == "detail"
? "min-w-[20rem] max-w-[30%] flex-shrink-0 flex-grow-0 basis-[30rem] md:min-w-[20rem] md:max-w-[25%] lg:min-w-[30rem] lg:max-w-[33%]"
: "w-60 flex-shrink-0",
: "w-80 flex-shrink-0",
)
: cn(
timelineType == "timeline"