From e26a54930f0c80ea1735a4e706b056a13cbfb042 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 24 Oct 2025 16:35:58 -0500
Subject: [PATCH] add blue dot instead of blue outline

---
 web/src/components/timeline/DetailStream.tsx | 119 +++++++++++--------
 1 file changed, 67 insertions(+), 52 deletions(-)

diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index 6669522ae..b025e5126 100644
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@@ -291,71 +291,84 @@ function ReviewGroup({
   return (
     <div
       data-review-id={id}
-      className={`cursor-pointer rounded-lg bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] ${
-        isActive
-          ? "shadow-selected outline-selected"
-          : "outline-transparent duration-500"
-      }`}
+      className="cursor-pointer rounded-lg bg-secondary py-3"
     >
       <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="flex flex-row gap-3">
-            <div className="text-sm font-medium">{displayTime}</div>
-            <div className="flex items-center gap-2">
-              {iconLabels.slice(0, 5).map((lbl, idx) => (
-                <div
-                  key={`${lbl}-${idx}`}
-                  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="ml-4 mr-2 mt-1.5 flex flex-row items-start">
+          <LuCircle
+            className={cn(
+              "size-3",
+              isActive
+                ? "fill-selected text-selected"
+                : "fill-secondary-highlight text-secondary-highlight duration-500",
             )}
-            <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 className="mr-3 flex w-full justify-between">
+          <div className="ml-1 flex flex-col items-start gap-1.5">
+            <div className="flex flex-row gap-3">
+              <div className="text-sm font-medium">{displayTime}</div>
+              <div className="flex items-center gap-2">
+                {iconLabels.slice(0, 5).map((lbl, idx) => (
+                  <div
+                    key={`${lbl}-${idx}`}
+                    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>
+
+                {reviewDuration && (
+                  <>
+                    <span className="text-[5px] text-primary-variant">•</span>
+                    <div className="text-xs text-primary-variant">
+                      {reviewDuration}
+                    </div>
+                  </>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            setOpen((v) => !v);
-          }}
-          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" />
-          ) : (
-            <LuChevronRight className="size-4 text-primary-variant" />
-          )}
+          <div
+            onClick={(e) => {
+              e.stopPropagation();
+              setOpen((v) => !v);
+            }}
+            className="ml-2 inline-flex items-center justify-center rounded p-1 hover:bg-secondary/10"
+          >
+            {open ? (
+              <LuChevronDown 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 />
           ) : (
@@ -446,9 +459,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 &&
@@ -593,7 +606,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">