From 834d7fdbe9eae1706746a843aec9e828f80bae79 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 18 Oct 2024 12:34:25 -0500
Subject: [PATCH] use shadcn toggle group instead of custom component

---
 .../overlay/dialog/SearchFilterDialog.tsx     | 76 ++++++++++++-------
 web/src/components/ui/toggle-button.tsx       | 29 -------
 2 files changed, 48 insertions(+), 57 deletions(-)
 delete mode 100644 web/src/components/ui/toggle-button.tsx

diff --git a/web/src/components/overlay/dialog/SearchFilterDialog.tsx b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
index ef0d5bd26..fdc80eefd 100644
--- a/web/src/components/overlay/dialog/SearchFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
@@ -26,7 +26,7 @@ import { cn } from "@/lib/utils";
 import { DualThumbSlider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
-import ToggleButton from "@/components/ui/toggle-button";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 type SearchFilterDialogProps = {
   config?: FrigateConfig;
@@ -536,7 +536,7 @@ function SnapshotClipFilterContent({
       <DropdownMenuSeparator className="mb-3" />
       <div className="mb-3 text-lg">Features</div>
 
-      <div className="my-2.5 space-y-4">
+      <div className="my-2.5 space-y-1">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-2">
             <Checkbox
@@ -547,8 +547,9 @@ function SnapshotClipFilterContent({
                 setIsSnapshotFilterActive(checked as boolean);
                 if (checked) {
                   setSnapshotClip(true, hasClip);
+                } else {
+                  setSnapshotClip(undefined, hasClip);
                 }
-                if (!checked) setSnapshotClip(undefined, hasClip);
               }}
             />
             <Label
@@ -558,22 +559,32 @@ function SnapshotClipFilterContent({
               Has a snapshot
             </Label>
           </div>
-          <div className="flex space-x-2">
-            <ToggleButton
-              active={hasSnapshot === true}
-              onClick={() => setSnapshotClip(true, hasClip)}
-              disabled={!isSnapshotFilterActive}
+          <ToggleGroup
+            type="single"
+            value={
+              hasSnapshot === undefined ? undefined : hasSnapshot ? "yes" : "no"
+            }
+            onValueChange={(value) => {
+              if (value === "yes") setSnapshotClip(true, hasClip);
+              else if (value === "no") setSnapshotClip(false, hasClip);
+            }}
+            disabled={!isSnapshotFilterActive}
+          >
+            <ToggleGroupItem
+              value="yes"
+              aria-label="Yes"
+              className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
             >
               Yes
-            </ToggleButton>
-            <ToggleButton
-              active={hasSnapshot === false}
-              onClick={() => setSnapshotClip(false, hasClip)}
-              disabled={!isSnapshotFilterActive}
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="no"
+              aria-label="No"
+              className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
             >
               No
-            </ToggleButton>
-          </div>
+            </ToggleGroupItem>
+          </ToggleGroup>
         </div>
 
         <div className="flex items-center justify-between">
@@ -586,8 +597,9 @@ function SnapshotClipFilterContent({
                 setIsClipFilterActive(checked as boolean);
                 if (checked) {
                   setSnapshotClip(hasSnapshot, true);
+                } else {
+                  setSnapshotClip(hasSnapshot, undefined);
                 }
-                if (!checked) setSnapshotClip(hasSnapshot, undefined);
               }}
             />
             <Label
@@ -597,22 +609,30 @@ function SnapshotClipFilterContent({
               Has a video clip
             </Label>
           </div>
-          <div className="flex space-x-2">
-            <ToggleButton
-              active={hasClip === true}
-              onClick={() => setSnapshotClip(hasSnapshot, true)}
-              disabled={!isClipFilterActive}
+          <ToggleGroup
+            type="single"
+            value={hasClip === undefined ? undefined : hasClip ? "yes" : "no"}
+            onValueChange={(value) => {
+              if (value === "yes") setSnapshotClip(hasSnapshot, true);
+              else if (value === "no") setSnapshotClip(hasSnapshot, false);
+            }}
+            disabled={!isClipFilterActive}
+          >
+            <ToggleGroupItem
+              value="yes"
+              aria-label="Yes"
+              className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
             >
               Yes
-            </ToggleButton>
-            <ToggleButton
-              active={hasClip === false}
-              onClick={() => setSnapshotClip(hasSnapshot, false)}
-              disabled={!isClipFilterActive}
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="no"
+              aria-label="No"
+              className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
             >
               No
-            </ToggleButton>
-          </div>
+            </ToggleGroupItem>
+          </ToggleGroup>
         </div>
       </div>
     </div>
diff --git a/web/src/components/ui/toggle-button.tsx b/web/src/components/ui/toggle-button.tsx
deleted file mode 100644
index bd1f91f26..000000000
--- a/web/src/components/ui/toggle-button.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cn } from "@/lib/utils";
-
-export default function ToggleButton({
-  active,
-  onClick,
-  children,
-  disabled,
-}: {
-  active: boolean;
-  onClick: () => void;
-  children: React.ReactNode;
-  disabled: boolean;
-}) {
-  return (
-    <button
-      className={cn(
-        "rounded-md px-3 py-1 text-sm font-medium transition-colors",
-        active && !disabled
-          ? "bg-selected text-white"
-          : "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        disabled && "cursor-not-allowed opacity-50",
-      )}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-}