From 542f37febca1a8a0861be4fdd77b82e24ab9f5f6 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 27 Mar 2024 16:51:30 -0600
Subject: [PATCH] Fix list views

---
 .../components/overlay/SaveExportOverlay.tsx  |  2 +-
 web/src/views/events/RecordingView.tsx        | 66 +++++++++----------
 2 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/web/src/components/overlay/SaveExportOverlay.tsx b/web/src/components/overlay/SaveExportOverlay.tsx
index 4ccbc1053..25d625d0d 100644
--- a/web/src/components/overlay/SaveExportOverlay.tsx
+++ b/web/src/components/overlay/SaveExportOverlay.tsx
@@ -1,4 +1,4 @@
-import { LuDisc, LuDisc2, LuDisc3, LuX } from "react-icons/lu";
+import { LuX } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { FaCompactDisc } from "react-icons/fa";
 
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 511a3ee80..225e4bc85 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -385,7 +385,9 @@ export function RecordingView({
         <Timeline
           contentRef={contentRef}
           mainCamera={mainCamera}
-          timelineType={timelineType ?? "timeline"}
+          timelineType={
+            (exportRange == undefined ? timelineType : "timeline") ?? "timeline"
+          }
           timeRange={timeRange}
           mainCameraReviewItems={mainCameraReviewItems}
           currentTime={currentTime}
@@ -448,15 +450,17 @@ function Timeline({
     }
   }, [exportRange, exportStart, exportEnd, setExportRange, setCurrentTime]);
 
-  if (exportRange != undefined || timelineType == "timeline") {
-    return (
-      <div
-        className={
-          isDesktop
-            ? "w-[100px] mt-2 overflow-y-auto no-scrollbar"
-            : "flex-grow overflow-hidden"
-        }
-      >
+  return (
+    <div
+      className={`${
+        isDesktop
+          ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} mt-2 overflow-y-auto no-scrollbar`
+          : "flex-grow overflow-hidden"
+      } relative`}
+    >
+      <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
+      <div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
+      {timelineType == "timeline" ? (
         <MotionReviewTimeline
           segmentDuration={30}
           timestampSpread={15}
@@ -477,32 +481,24 @@ function Timeline({
           contentRef={contentRef}
           onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
         />
-      </div>
-    );
-  }
+      ) : (
+        <div className="h-full flex flex-col gap-4 overflow-auto p-4 bg-secondary">
+          {mainCameraReviewItems.map((review) => {
+            if (review.severity == "significant_motion") {
+              return;
+            }
 
-  return (
-    <div
-      className={`${isDesktop ? "w-60" : "w-full"} h-full relative p-4 flex flex-col gap-4 bg-secondary`}
-    >
-      <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
-      <div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
-      <div className="h-full overflow-auto">
-        {mainCameraReviewItems.map((review) => {
-          if (review.severity == "significant_motion") {
-            return;
-          }
-
-          return (
-            <ReviewCard
-              key={review.id}
-              event={review}
-              currentTime={currentTime}
-              onClick={() => setCurrentTime(review.start_time)}
-            />
-          );
-        })}
-      </div>
+            return (
+              <ReviewCard
+                key={review.id}
+                event={review}
+                currentTime={currentTime}
+                onClick={() => setCurrentTime(review.start_time)}
+              />
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }