From a10ea1f28e5901472005a38c60c7a57f5a96358c Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 3 Jan 2026 06:19:29 -0700
Subject: [PATCH] Add images to case folder view

---
 web/src/components/card/ExportCard.tsx | 27 ++++++++++++++++++++++----
 web/src/pages/Exports.tsx              |  4 ++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index fc7964c18..c8d9c4c65 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -1,6 +1,6 @@
 import ActivityIndicator from "../indicators/activity-indicator";
 import { Button } from "../ui/button";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { FiMoreVertical } from "react-icons/fi";
 import { Skeleton } from "../ui/skeleton";
@@ -32,18 +32,37 @@ import { FaFolder } from "react-icons/fa";
 type CaseCardProps = {
   className: string;
   exportCase: ExportCase;
+  exports: Export[];
   onSelect: () => void;
 };
-export function CaseCard({ className, exportCase, onSelect }: CaseCardProps) {
+export function CaseCard({
+  className,
+  exportCase,
+  exports,
+  onSelect,
+}: CaseCardProps) {
+  const firstExport = useMemo(
+    () => exports.find((exp) => exp.thumb_path && exp.thumb_path.length > 0),
+    [exports],
+  );
+
   return (
     <div
       className={cn(
-        "relative flex aspect-video size-full cursor-pointer items-center justify-center rounded-lg bg-secondary md:rounded-2xl",
+        "relative flex aspect-video size-full cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-secondary md:rounded-2xl",
         className,
       )}
       onClick={() => onSelect()}
     >
-      <div className="absolute bottom-2 left-2 flex items-center justify-start gap-2">
+      {firstExport && (
+        <img
+          className="absolute inset-0 size-full object-cover"
+          src={`${baseUrl}${firstExport.thumb_path.replace("/media/frigate/", "")}`}
+          alt=""
+        />
+      )}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16 bg-gradient-to-t from-black/60 to-transparent" />
+      <div className="absolute bottom-2 left-2 z-20 flex items-center justify-start gap-2 text-white">
         <FaFolder />
         <div className="capitalize">{exportCase.name}</div>
       </div>
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 5b4a3ef3a..2f4cbd53d 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -321,6 +321,7 @@ function Exports() {
           search={search}
           cases={filteredCases}
           exports={exports}
+          exportsByCase={exportsByCase}
           setSelectedCaseId={setSelectedCaseId}
           setSelected={setSelected}
           renameClip={onHandleRename}
@@ -337,6 +338,7 @@ type AllExportsViewProps = {
   search: string;
   cases?: ExportCase[];
   exports: Export[];
+  exportsByCase: { [caseId: string]: Export[] };
   setSelectedCaseId: (id: string) => void;
   setSelected: (e: Export) => void;
   renameClip: (id: string, update: string) => void;
@@ -348,6 +350,7 @@ function AllExportsView({
   search,
   cases,
   exports,
+  exportsByCase,
   setSelectedCaseId,
   setSelected,
   renameClip,
@@ -404,6 +407,7 @@ function AllExportsView({
                         : "hidden"
                     }
                     exportCase={item}
+                    exports={exportsByCase[item.id] || []}
                     onSelect={() => {
                       setSelectedCaseId(item.id);
                     }}