From 9107c9581d10af18ffe1ffa7570de3ec709b1f35 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 4 Jun 2026 10:02:31 -0500
Subject: [PATCH] change desktop and mobile edit camera groups icon to pencil
 and add desktop tooltip

---
 web/public/locales/en/components/camera.json  |  1 +
 .../components/filter/CameraGroupSelector.tsx | 29 +++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/web/public/locales/en/components/camera.json b/web/public/locales/en/components/camera.json
index d07413dd80..3f6afc6420 100644
--- a/web/public/locales/en/components/camera.json
+++ b/web/public/locales/en/components/camera.json
@@ -5,6 +5,7 @@
     "showAll": "Show all camera groups",
     "showLess": "Show less",
     "edit": "Edit Camera Group",
+    "editGroups": "Edit Camera Groups",
     "delete": {
       "label": "Delete Camera Group",
       "confirm": {
diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 35998d1118..8f32846fc1 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -283,7 +283,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
             afterSelect?.();
           }}
         >
-          <LuPlus className="size-5 text-primary" />
+          <LuPencil className="size-5 text-primary" />
         </Button>,
       );
     }
@@ -366,14 +366,25 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
           })}
 
           {isAdmin && (
-            <Button
-              className="bg-secondary text-muted-foreground"
-              aria-label={t("group.add")}
-              size="xs"
-              onClick={() => setAddGroup(true)}
-            >
-              <LuPlus className="size-4 text-primary" />
-            </Button>
+            <Tooltip open={tooltip == "edit"}>
+              <TooltipTrigger asChild>
+                <Button
+                  className="bg-secondary text-muted-foreground"
+                  aria-label={t("group.editGroups")}
+                  size="xs"
+                  onClick={() => setAddGroup(true)}
+                  onMouseEnter={() => showTooltip("edit")}
+                  onMouseLeave={() => showTooltip(undefined)}
+                >
+                  <LuPencil className="size-4 text-primary" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipPortal>
+                <TooltipContent side="right">
+                  {t("group.editGroups")}
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
           )}
         </div>
       ) : (