Review stream tweaks (#20656)

* add blue dot instead of blue outline

* fix layout for portrait cameras

* fix light mode

web/src/components/timeline/DetailStream.tsx

@@ -291,71 +291,81 @@ function ReviewGroup({
   return (
     <div
       data-review-id={id}
-      className={`cursor-pointer rounded-lg bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] ${
+      className="cursor-pointer rounded-lg bg-secondary py-3"
-        isActive
-          ? "shadow-selected outline-selected"
-          : "outline-transparent duration-500"
-      }`}
     >
       <div
-        className="flex items-center justify-between"
+        className={cn(
+          "flex items-start",
+          open && "border-b border-secondary-highlight pb-4",
+        )}
         onClick={() => {
           onActivate?.();
           onSeek(start);
         }}
       >
-        <div className="ml-1 flex flex-col items-start gap-1.5">
+        <div className="ml-4 mr-2 mt-1.5 flex flex-row items-start">
-          <div className="flex flex-row gap-3">
+          <LuCircle
-            <div className="text-sm font-medium">{displayTime}</div>
+            className={cn(
-            <div className="flex items-center gap-2">
+              "size-3",
-              {iconLabels.slice(0, 5).map((lbl, idx) => (
+              isActive
-                <div
+                ? "fill-selected text-selected"
-                  key={`${lbl}-${idx}`}
+                : "fill-muted duration-500 dark:fill-secondary-highlight dark:text-secondary-highlight",
-                  className="rounded-full bg-muted-foreground p-1"
-                >
-                  {getIconForLabel(lbl, "size-3 text-primary dark:text-white")}
-                </div>
-              ))}
-            </div>
-          </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>
             )}
-            <div className="flex flex-row items-center gap-1.5">
+          />
-              <div className="text-xs text-primary-variant">{reviewInfo}</div>
+        </div>
-
+        <div className="mr-3 flex w-full justify-between">
-              {reviewDuration && (
+          <div className="ml-1 flex flex-col items-start gap-1.5">
-                <>
+            <div className="flex flex-row gap-3">
-                  <span className="text-[5px] text-primary-variant">•</span>
+              <div className="text-sm font-medium">{displayTime}</div>
-                  <div className="text-xs text-primary-variant">
+              <div className="flex items-center gap-2">
-                    {reviewDuration}
+                {iconLabels.slice(0, 5).map((lbl, idx) => (
+                  <div
+                    key={`${lbl}-${idx}`}
+                    className="rounded-full bg-muted-foreground p-1"
+                  >
+                    {getIconForLabel(lbl, "size-3 text-white")}
                   </div>
-                </>
+                ))}
+              </div>
+            </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>
               )}
+              <div className="flex flex-row items-center gap-1.5">
+                <div className="text-xs text-primary-variant">{reviewInfo}</div>
+
+                {reviewDuration && (
+                  <>
+                    <span className="text-[5px] text-primary-variant">•</span>
+                    <div className="text-xs text-primary-variant">
+                      {reviewDuration}
+                    </div>
+                  </>
+                )}
+              </div>
             </div>
           </div>
-        </div>
+          <div
-        <div
+            onClick={(e) => {
-          onClick={(e) => {
+              e.stopPropagation();
-            e.stopPropagation();
+              setOpen((v) => !v);
-            setOpen((v) => !v);
+            }}
-          }}
+            className="ml-2 inline-flex items-center justify-center rounded p-1 hover:bg-secondary/10"
-          aria-label={open ? "Collapse" : "Expand"}
+          >
-          className="ml-2 inline-flex items-center justify-center rounded p-1 hover:bg-secondary/10"
+            {open ? (
-        >
+              <LuChevronDown className="size-4 text-primary-variant" />
-          {open ? (
+            ) : (
-            <LuChevronDown className="size-4 text-primary-variant" />
+              <LuChevronRight className="size-4 text-primary-variant" />
-          ) : (
+            )}
-            <LuChevronRight className="size-4 text-primary-variant" />
+          </div>
-          )}
         </div>
       </div>
 
       {open && (
-        <div className="mt-2 space-y-0.5">
+        <div className="space-y-0.5">
           {shouldFetchEvents && isValidating && !fetchedEvents ? (
             <ActivityIndicator />
           ) : (
@@ -385,10 +395,7 @@ function ReviewGroup({
                 >
                   <div className="ml-1.5 flex items-center gap-2 text-sm font-medium">
                     <div className="rounded-full bg-muted-foreground p-1">
-                      {getIconForLabel(
+                      {getIconForLabel(audioLabel, "size-3 text-white")}
-                        audioLabel,
-                        "size-3 text-primary dark:text-white",
-                      )}
                     </div>
                     <span>{getTranslatedLabel(audioLabel)}</span>
                   </div>
@@ -446,9 +453,9 @@ function EventList({
     <>
       <div
         className={cn(
-          "rounded-md bg-secondary p-2 outline outline-[3px] -outline-offset-[2.8px]",
+          "rounded-md bg-secondary p-2",
           event.id == selectedObjectId
-            ? "bg-secondary-highlight shadow-selected outline-selected"
+            ? "bg-secondary-highlight"
             : "outline-transparent duration-500",
           event.id != selectedObjectId &&
             (effectiveTime ?? 0) >= (event.start_time ?? 0) - 0.5 &&
@@ -476,10 +483,7 @@ function EventList({
                   : "bg-muted-foreground",
               )}
             >
-              {getIconForLabel(
+              {getIconForLabel(event.label, "size-3 text-white")}
-                event.label,
-                "size-3 text-primary dark:text-white",
-              )}
             </div>
             <div className="flex items-end gap-2">
               <span>{getTranslatedLabel(event.label)}</span>
@@ -593,7 +597,9 @@ function LifecycleItem({
       <div className="flex w-full flex-row justify-between">
         <Tooltip>
           <TooltipTrigger>
-            <span>{getLifecycleItemDescription(item)}</span>
+            <div className="flex items-start text-left">
+              {getLifecycleItemDescription(item)}
+            </div>
           </TooltipTrigger>
           <TooltipContent>
             <div className="mt-1 flex flex-wrap items-start gap-3 text-sm text-secondary-foreground">

web/src/views/recording/RecordingView.tsx

@@ -695,7 +695,7 @@ export function RecordingView({
               "flex flex-1 flex-wrap",
               isDesktop
                 ? timelineType === "detail"
-                  ? "w-full"
+                  ? "md:w-[40%] lg:w-[70%] xl:w-full"
                   : "w-[80%]"
                 : "",
             )}
@@ -703,11 +703,9 @@ export function RecordingView({
             <div
               className={cn(
                 "flex size-full items-center",
-                timelineType === "detail" && isDesktop
+                mainCameraAspect == "tall"
-                  ? "flex-col"
+                  ? "flex-row justify-evenly"
-                  : mainCameraAspect == "tall"
+                  : "flex-col justify-center gap-2",
-                    ? "flex-row justify-evenly"
-                    : "flex-col justify-center gap-2",
               )}
             >
               <div
@@ -975,7 +973,7 @@ function Timeline({
       className={cn(
         "relative",
         isDesktop
-          ? `${timelineType == "timeline" ? "w-[100px]" : timelineType == "detail" ? "w-[30%]" : "w-60"} no-scrollbar overflow-y-auto`
+          ? `${timelineType == "timeline" ? "w-[100px]" : timelineType == "detail" ? "w-[30%] min-w-[350px]" : "w-60"} no-scrollbar overflow-y-auto`
           : `overflow-hidden portrait:flex-grow ${timelineType == "timeline" ? "landscape:w-[100px]" : timelineType == "detail" && isDesktop ? "flex-1" : "landscape:w-[300px]"} `,
       )}
     >