conditionally display actions for admin role only

web/src/components/filter/ReviewActionGroup.tsx

@@ -19,6 +19,7 @@ import {
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
+import { useIsAdmin } from "@/hooks/use-is-admin";
 
 type ReviewActionGroupProps = {
   selectedReviews: ReviewSegment[];
@@ -33,6 +34,7 @@ export default function ReviewActionGroup({
   pullLatestData,
 }: ReviewActionGroupProps) {
   const { t } = useTranslation(["components/dialog"]);
+  const isAdmin = useIsAdmin();
   const onClearSelected = useCallback(() => {
     setSelectedReviews([]);
   }, [setSelectedReviews]);
@@ -185,21 +187,23 @@ export default function ReviewActionGroup({
               </div>
             )}
           </Button>
-          <Button
-            className="flex items-center gap-2 p-2"
-            aria-label={t("button.delete", { ns: "common" })}
-            size="sm"
-            onClick={handleDelete}
-          >
-            <HiTrash className="text-secondary-foreground" />
-            {isDesktop && (
-              <div className="text-primary">
-                {bypassDialog
-                  ? t("recording.button.deleteNow")
-                  : t("button.delete", { ns: "common" })}
-              </div>
-            )}
-          </Button>
+          {isAdmin && (
+            <Button
+              className="flex items-center gap-2 p-2"
+              aria-label={t("button.delete", { ns: "common" })}
+              size="sm"
+              onClick={handleDelete}
+            >
+              <HiTrash className="text-secondary-foreground" />
+              {isDesktop && (
+                <div className="text-primary">
+                  {bypassDialog
+                    ? t("recording.button.deleteNow")
+                    : t("button.delete", { ns: "common" })}
+                </div>
+              )}
+            </Button>
+          )}
         </div>
       </div>
     </>

web/src/components/filter/SearchActionGroup.tsx

@@ -16,6 +16,7 @@ import {
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { toast } from "sonner";
 import { Trans, useTranslation } from "react-i18next";
+import { useIsAdmin } from "@/hooks/use-is-admin";
 
 type SearchActionGroupProps = {
   selectedObjects: string[];
@@ -28,6 +29,7 @@ export default function SearchActionGroup({
   pullLatestData,
 }: SearchActionGroupProps) {
   const { t } = useTranslation(["components/filter"]);
+  const isAdmin = useIsAdmin();
   const onClearSelected = useCallback(() => {
     setSelectedObjects([]);
   }, [setSelectedObjects]);
@@ -123,23 +125,25 @@ export default function SearchActionGroup({
             {t("button.unselect", { ns: "common" })}
           </div>
         </div>
-        <div className="flex items-center gap-1 md:gap-2">
-          <Button
-            className="flex items-center gap-2 p-2"
-            aria-label={t("button.delete", { ns: "common" })}
-            size="sm"
-            onClick={handleDelete}
-          >
-            <HiTrash className="text-secondary-foreground" />
-            {isDesktop && (
-              <div className="text-primary">
-                {bypassDialog
-                  ? t("button.deleteNow", { ns: "common" })
-                  : t("button.delete", { ns: "common" })}
-              </div>
-            )}
-          </Button>
-        </div>
+        {isAdmin && (
+          <div className="flex items-center gap-1 md:gap-2">
+            <Button
+              className="flex items-center gap-2 p-2"
+              aria-label={t("button.delete", { ns: "common" })}
+              size="sm"
+              onClick={handleDelete}
+            >
+              <HiTrash className="text-secondary-foreground" />
+              {isDesktop && (
+                <div className="text-primary">
+                  {bypassDialog
+                    ? t("button.deleteNow", { ns: "common" })
+                    : t("button.delete", { ns: "common" })}
+                </div>
+              )}
+            </Button>
+          </div>
+        )}
       </div>
     </>
   );

web/src/components/menu/SearchResultActions.tsx

@@ -31,6 +31,7 @@ import {
 import useSWR from "swr";
 import { Trans, useTranslation } from "react-i18next";
 import BlurredIconButton from "../button/BlurredIconButton";
+import { useIsAdmin } from "@/hooks/use-is-admin";
 
 type SearchResultActionsProps = {
   searchResult: SearchResult;
@@ -52,6 +53,7 @@ export default function SearchResultActions({
   children,
 }: SearchResultActionsProps) {
   const { t } = useTranslation(["views/explore"]);
+  const isAdmin = useIsAdmin();
 
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -137,7 +139,8 @@ export default function SearchResultActions({
             <span>{t("itemMenu.findSimilar.label")}</span>
           </MenuItem>
         )}
-      {config?.semantic_search?.enabled &&
+      {isAdmin &&
+        config?.semantic_search?.enabled &&
         searchResult.data.type == "object" && (
           <MenuItem
             aria-label={t("itemMenu.addTrigger.aria")}
@@ -146,12 +149,14 @@ export default function SearchResultActions({
             <span>{t("itemMenu.addTrigger.label")}</span>
           </MenuItem>
         )}
-      <MenuItem
-        aria-label={t("itemMenu.deleteTrackedObject.label")}
-        onClick={() => setDeleteDialogOpen(true)}
-      >
-        <span>{t("button.delete", { ns: "common" })}</span>
-      </MenuItem>
+      {isAdmin && (
+        <MenuItem
+          aria-label={t("itemMenu.deleteTrackedObject.label")}
+          onClick={() => setDeleteDialogOpen(true)}
+        >
+          <span>{t("button.delete", { ns: "common" })}</span>
+        </MenuItem>
+      )}
     </>
   );
 

web/src/components/overlay/detail/DetailActionsMenu.tsx

@@ -15,6 +15,7 @@ import {
 import { HiDotsHorizontal } from "react-icons/hi";
 import { SearchResult } from "@/types/search";
 import { FrigateConfig } from "@/types/frigateConfig";
+import { useIsAdmin } from "@/hooks/use-is-admin";
 
 type Props = {
   search: SearchResult | Event;
@@ -35,6 +36,7 @@ export default function DetailActionsMenu({
   const { t } = useTranslation(["views/explore", "views/faceLibrary"]);
   const navigate = useNavigate();
   const [isOpen, setIsOpen] = useState(false);
+  const isAdmin = useIsAdmin();
 
   const clipTimeRange = useMemo(() => {
     const startTime = (search.start_time ?? 0) - REVIEW_PADDING;
@@ -130,22 +132,24 @@ export default function DetailActionsMenu({
             </DropdownMenuItem>
           )}
 
-          {config?.semantic_search.enabled && search.data.type == "object" && (
-            <DropdownMenuItem
-              onClick={() => {
-                setIsOpen(false);
-                setTimeout(() => {
-                  navigate(
-                    `/settings?page=triggers&camera=${search.camera}&event_id=${search.id}`,
-                  );
-                }, 0);
-              }}
-            >
-              <div className="flex cursor-pointer items-center gap-2">
-                <span>{t("itemMenu.addTrigger.label")}</span>
-              </div>
-            </DropdownMenuItem>
-          )}
+          {isAdmin &&
+            config?.semantic_search.enabled &&
+            search.data.type == "object" && (
+              <DropdownMenuItem
+                onClick={() => {
+                  setIsOpen(false);
+                  setTimeout(() => {
+                    navigate(
+                      `/settings?page=triggers&camera=${search.camera}&event_id=${search.id}`,
+                    );
+                  }, 0);
+                }}
+              >
+                <div className="flex cursor-pointer items-center gap-2">
+                  <span>{t("itemMenu.addTrigger.label")}</span>
+                </div>
+              </DropdownMenuItem>
+            )}
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </DropdownMenu>