From 630bdfb8ea1ecb864b522d57655d0ab1fd0ec5b2 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 11 Sep 2024 12:31:32 -0600
Subject: [PATCH] Add icons to detail tabs

---
 .../components/overlay/detail/SearchDetailDialog.tsx  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index ad4d259f1..a67ec3b4a 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -34,8 +34,10 @@ import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
+import { FaRegListAlt, FaVideo } from "react-icons/fa";
+import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 
-const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
+const SEARCH_TABS = ["details", "frigate+", "video"] as const;
 type SearchTab = (typeof SEARCH_TABS)[number];
 
 type SearchDetailDialogProps = {
@@ -65,7 +67,7 @@ export default function SearchDetailDialog({
     const views = [...SEARCH_TABS];
 
     if (!config.plus.enabled || !search.has_snapshot) {
-      const index = views.indexOf("Frigate+");
+      const index = views.indexOf("frigate+");
       views.splice(index, 1);
     }
 
@@ -133,6 +135,9 @@ export default function SearchDetailDialog({
                   data-nav-item={item}
                   aria-label={`Select ${item}`}
                 >
+                  {item == "details" && <FaRegListAlt className="size-4" />}
+                  {item == "frigate+" && <FrigatePlusIcon className="size-4" />}
+                  {item == "video" && <FaVideo className="size-4" />}
                   <div className="capitalize">{item}</div>
                 </ToggleGroupItem>
               ))}
@@ -148,7 +153,7 @@ export default function SearchDetailDialog({
             setSimilarity={setSimilarity}
           />
         )}
-        {page == "Frigate+" && (
+        {page == "frigate+" && (
           <FrigatePlusDialog
             upload={search as unknown as Event}
             dialog={false}