Merge 12f6092a5b into 097673b845

* chore: i18n use cache key

* Fix indentation in Dockerfile for pip command

* Add build argument for GIT_COMMIT_HASH in CI workflow

* Add short-sha output to action.yml

* Update build args to use short SHA output

* build: use vite .env

* Remove unnecessary newline in Dockerfile

* Define proxy host variable in vite.config.ts

Add a new line to define the proxy host variable.

.gitignore

@@ -15,6 +15,7 @@ frigate/version.py
 web/build
 web/node_modules
 web/coverage
+web/.env
 core
 !/web/**/*.ts
 .idea/*

Makefile

@@ -14,6 +14,7 @@ push-boards: $(BOARDS:%=push-%)
 
 version:
 	echo 'VERSION = "$(VERSION)-$(COMMIT_HASH)"' > frigate/version.py
+	echo 'VITE_GIT_COMMIT_HASH=$(COMMIT_HASH)' > web/.env
 
 local: version
 	docker buildx build --target=frigate --file docker/main/Dockerfile . \

docs/docs/configuration/license_plate_recognition.md

@@ -3,18 +3,18 @@ id: license_plate_recognition
 title: License Plate Recognition (LPR)
 ---
 
-Frigate can recognize license plates on vehicles and automatically add the detected characters to the `recognized_license_plate` field or a known name as a `sub_label` to tracked objects of type `car` or `motorcycle`. A common use case may be to read the license plates of cars pulling into a driveway or cars passing by on a street.
+Frigate can recognize license plates on vehicles and automatically add the detected characters to the `recognized_license_plate` field or a [known](#matching) name as a `sub_label` to tracked objects of type `car` or `motorcycle`. A common use case may be to read the license plates of cars pulling into a driveway or cars passing by on a street.
 
 LPR works best when the license plate is clearly visible to the camera. For moving vehicles, Frigate continuously refines the recognition process, keeping the most confident result. When a vehicle becomes stationary, LPR continues to run for a short time after to attempt recognition.
 
 When a plate is recognized, the details are:
 
-- Added as a `sub_label` (if known) or the `recognized_license_plate` field (if unknown) to a tracked object.
+- Added as a `sub_label` (if [known](#matching)) or the `recognized_license_plate` field (if unknown) to a tracked object.
-- Viewable in the Review Item Details pane in Review (sub labels).
+- Viewable in the Details pane in Review/History.
 - Viewable in the Tracked Object Details pane in Explore (sub labels and recognized license plates).
 - Filterable through the More Filters menu in Explore.
-- Published via the `frigate/events` MQTT topic as a `sub_label` (known) or `recognized_license_plate` (unknown) for the `car` or `motorcycle` tracked object.
+- Published via the `frigate/events` MQTT topic as a `sub_label` ([known](#matching)) or `recognized_license_plate` (unknown) for the `car` or `motorcycle` tracked object.
-- Published via the `frigate/tracked_object_update` MQTT topic with `name` (if known) and `plate`.
+- Published via the `frigate/tracked_object_update` MQTT topic with `name` (if [known](#matching)) and `plate`.
 
 ## Model Requirements
 
@@ -31,6 +31,7 @@ In the default mode, Frigate's LPR needs to first detect a `car` or `motorcycle`
 ## Minimum System Requirements
 
 License plate recognition works by running AI models locally on your system. The YOLOv9 plate detector model and the OCR models ([PaddleOCR](https://github.com/PaddlePaddle/PaddleOCR)) are relatively lightweight and can run on your CPU or GPU, depending on your configuration. At least 4GB of RAM is required.
+
 ## Configuration
 
 License plate recognition is disabled by default. Enable it in your config file:
@@ -73,8 +74,8 @@ Fine-tune the LPR feature using these optional parameters at the global level of
   - Default: `small`
   - This can be `small` or `large`.
   - The `small` model is fast and identifies groups of Latin and Chinese characters.
-  - The `large` model identifies Latin characters only, but uses an enhanced text detector and is more capable at finding characters on multi-line plates. It is significantly slower than the `small` model. Note that using the `large` model does not improve _text recognition_, but it may improve _text detection_.
+  - The `large` model identifies Latin characters only, and uses an enhanced text detector to find characters on multi-line plates. It is significantly slower than the `small` model.
-  - For most users, the `small` model is recommended.
+  - If your country or region does not use multi-line plates, you should use the `small` model as performance is much better for single-line plates.
 
 ### Recognition
 
@@ -305,7 +306,7 @@ With this setup:
 - Review items will always be classified as a `detection`.
 - Snapshots will always be saved.
 - Zones and object masks are **not** used.
-- The `frigate/events` MQTT topic will **not** publish tracked object updates with the license plate bounding box and score, though `frigate/reviews` will publish if recordings are enabled. If a plate is recognized as a known plate, publishing will occur with an updated `sub_label` field. If characters are recognized, publishing will occur with an updated `recognized_license_plate` field.
+- The `frigate/events` MQTT topic will **not** publish tracked object updates with the license plate bounding box and score, though `frigate/reviews` will publish if recordings are enabled. If a plate is recognized as a [known](#matching) plate, publishing will occur with an updated `sub_label` field. If characters are recognized, publishing will occur with an updated `recognized_license_plate` field.
 - License plate snapshots are saved at the highest-scoring moment and appear in Explore.
 - Debug view will not show `license_plate` bounding boxes.
 

docs/docs/configuration/semantic_search.md

@@ -141,7 +141,7 @@ Triggers are best configured through the Frigate UI.
      Check the `Add Attribute` box to add the trigger's internal ID (e.g., "red_car_alert") to a data attribute on the tracked object that can be processed via the API or MQTT.
 5. Save the trigger to update the configuration and store the embedding in the database.
 
-When a trigger fires, the UI highlights the trigger with a blue dot for 3 seconds for easy identification.
+When a trigger fires, the UI highlights the trigger with a blue dot for 3 seconds for easy identification. Additionally, the UI will show the last date/time and tracked object ID that activated your trigger. The last triggered timestamp is not saved to the database or persisted through restarts of Frigate.
 
 ### Usage and Best Practices
 

frigate/api/event.py

@@ -1781,9 +1781,8 @@ def create_trigger_embedding(
                 logger.debug(
                     f"Writing thumbnail for trigger with data {body.data} in {camera_name}."
                 )
-            except Exception as e:
+            except Exception:
-                logger.error(e.with_traceback())
+                logger.exception(
-                logger.error(
                     f"Failed to write thumbnail for trigger with data {body.data} in {camera_name}"
                 )
 
@@ -1807,8 +1806,8 @@ def create_trigger_embedding(
             status_code=200,
         )
 
-    except Exception as e:
+    except Exception:
-        logger.error(e.with_traceback())
+        logger.exception("Error creating trigger embedding")
         return JSONResponse(
             content={
                 "success": False,
@@ -1917,9 +1916,8 @@ def update_trigger_embedding(
                     logger.debug(
                         f"Deleted thumbnail for trigger with data {trigger.data} in {camera_name}."
                     )
-                except Exception as e:
+                except Exception:
-                    logger.error(e.with_traceback())
+                    logger.exception(
-                    logger.error(
                         f"Failed to delete thumbnail for trigger with data {trigger.data} in {camera_name}"
                     )
 
@@ -1958,9 +1956,8 @@ def update_trigger_embedding(
                 logger.debug(
                     f"Writing thumbnail for trigger with data {body.data} in {camera_name}."
                 )
-            except Exception as e:
+            except Exception:
-                logger.error(e.with_traceback())
+                logger.exception(
-                logger.error(
                     f"Failed to write thumbnail for trigger with data {body.data} in {camera_name}"
                 )
 
@@ -1972,8 +1969,8 @@ def update_trigger_embedding(
             status_code=200,
         )
 
-    except Exception as e:
+    except Exception:
-        logger.error(e.with_traceback())
+        logger.exception("Error updating trigger embedding")
         return JSONResponse(
             content={
                 "success": False,
@@ -2033,9 +2030,8 @@ def delete_trigger_embedding(
             logger.debug(
                 f"Deleted thumbnail for trigger with data {trigger.data} in {camera_name}."
             )
-        except Exception as e:
+        except Exception:
-            logger.error(e.with_traceback())
+            logger.exception(
-            logger.error(
                 f"Failed to delete thumbnail for trigger with data {trigger.data} in {camera_name}"
             )
 
@@ -2047,8 +2043,8 @@ def delete_trigger_embedding(
             status_code=200,
         )
 
-    except Exception as e:
+    except Exception:
-        logger.error(e.with_traceback())
+        logger.exception("Error deleting trigger embedding")
         return JSONResponse(
             content={
                 "success": False,

web/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

web/src/components/menu/SearchResultActions.tsx

@@ -4,9 +4,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { baseUrl } from "@/api/baseUrl";
 import { toast } from "sonner";
 import axios from "axios";
-import { LuCamera, LuDownload, LuTrash2 } from "react-icons/lu";
 import { FiMoreVertical } from "react-icons/fi";
-import { MdImageSearch } from "react-icons/md";
 import { buttonVariants } from "@/components/ui/button";
 import {
   ContextMenu,
@@ -31,11 +29,8 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import useSWR from "swr";
-
 import { Trans, useTranslation } from "react-i18next";
-import { BsFillLightningFill } from "react-icons/bs";
 import BlurredIconButton from "../button/BlurredIconButton";
-import { PiPath } from "react-icons/pi";
 
 type SearchResultActionsProps = {
   searchResult: SearchResult;
@@ -98,7 +93,6 @@ export default function SearchResultActions({
             href={`${baseUrl}api/events/${searchResult.id}/clip.mp4`}
             download={`${searchResult.camera}_${searchResult.label}.mp4`}
           >
-            <LuDownload className="mr-2 size-4" />
             <span>{t("itemMenu.downloadVideo.label")}</span>
           </a>
         </MenuItem>
@@ -110,7 +104,6 @@ export default function SearchResultActions({
             href={`${baseUrl}api/events/${searchResult.id}/snapshot.jpg`}
             download={`${searchResult.camera}_${searchResult.label}.jpg`}
           >
-            <LuCamera className="mr-2 size-4" />
             <span>{t("itemMenu.downloadSnapshot.label")}</span>
           </a>
         </MenuItem>
@@ -120,44 +113,31 @@ export default function SearchResultActions({
           aria-label={t("itemMenu.viewTrackingDetails.aria")}
           onClick={showTrackingDetails}
         >
-          <PiPath className="mr-2 size-4" />
           <span>{t("itemMenu.viewTrackingDetails.label")}</span>
         </MenuItem>
       )}
-      {config?.semantic_search?.enabled && isContextMenu && (
-        <MenuItem
-          aria-label={t("itemMenu.findSimilar.aria")}
-          onClick={findSimilar}
-        >
-          <MdImageSearch className="mr-2 size-4" />
-          <span>{t("itemMenu.findSimilar.label")}</span>
-        </MenuItem>
-      )}
-      {config?.semantic_search?.enabled &&
-        searchResult.data.type == "object" && (
-          <MenuItem
-            aria-label={t("itemMenu.addTrigger.aria")}
-            onClick={addTrigger}
-          >
-            <BsFillLightningFill className="mr-2 size-4" />
-            <span>{t("itemMenu.addTrigger.label")}</span>
-          </MenuItem>
-        )}
       {config?.semantic_search?.enabled &&
         searchResult.data.type == "object" && (
           <MenuItem
             aria-label={t("itemMenu.findSimilar.aria")}
             onClick={findSimilar}
           >
-            <MdImageSearch className="mr-2 size-4" />
             <span>{t("itemMenu.findSimilar.label")}</span>
           </MenuItem>
         )}
+      {config?.semantic_search?.enabled &&
+        searchResult.data.type == "object" && (
+          <MenuItem
+            aria-label={t("itemMenu.addTrigger.aria")}
+            onClick={addTrigger}
+          >
+            <span>{t("itemMenu.addTrigger.label")}</span>
+          </MenuItem>
+        )}
       <MenuItem
         aria-label={t("itemMenu.deleteTrackedObject.label")}
         onClick={() => setDeleteDialogOpen(true)}
       >
-        <LuTrash2 className="mr-2 size-4" />
         <span>{t("button.delete", { ns: "common" })}</span>
       </MenuItem>
     </>

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -12,6 +12,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
@@ -20,7 +21,6 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { isDesktop, isMobile } from "react-device-detect";
-import { LuPlus, LuScanFace } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import React, { ReactNode, useMemo, useState } from "react";
@@ -89,27 +89,26 @@ export default function FaceSelectionDialog({
             <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>
             <div
               className={cn(
-                "flex max-h-[40dvh] flex-col overflow-y-auto",
+                "flex max-h-[40dvh] flex-col overflow-y-auto overflow-x-hidden",
                 isMobile && "gap-2 pb-4",
               )}
             >
-              <SelectorItem
-                className="flex cursor-pointer gap-2 smart-capitalize"
-                onClick={() => setNewFace(true)}
-              >
-                <LuPlus />
-                {t("createFaceLibrary.new")}
-              </SelectorItem>
               {faceNames.sort().map((faceName) => (
                 <SelectorItem
                   key={faceName}
                   className="flex cursor-pointer gap-2 smart-capitalize"
                   onClick={() => onTrainAttempt(faceName)}
                 >
-                  <LuScanFace />
                   {faceName}
                 </SelectorItem>
               ))}
+              <DropdownMenuSeparator />
+              <SelectorItem
+                className="flex cursor-pointer gap-2 smart-capitalize"
+                onClick={() => setNewFace(true)}
+              >
+                {t("createFaceLibrary.new")}
+              </SelectorItem>
             </div>
           </SelectorContent>
         </Selector>

web/src/components/overlay/ImagePicker.tsx

@@ -171,6 +171,18 @@ export default function ImagePicker({
                       alt={selectedImage?.label || "Selected image"}
                       className="size-16 rounded object-cover"
                       onLoad={() => handleImageLoad(selectedImageId || "")}
+                      onError={(e) => {
+                        // If trigger thumbnail fails to load, fall back to event thumbnail
+                        if (!selectedImage) {
+                          const target = e.target as HTMLImageElement;
+                          if (
+                            target.src.includes("clips/triggers") &&
+                            selectedImageId
+                          ) {
+                            target.src = `${apiHost}api/events/${selectedImageId}/thumbnail.webp`;
+                          }
+                        }
+                      }}
                       loading="lazy"
                     />
                     {selectedImageId && !loadedImages.has(selectedImageId) && (

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

@@ -1,5 +1,6 @@
 import useSWR from "swr";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeObserver } from "@/hooks/resize-observer";
 import { Event } from "@/types/event";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { TrackingDetailsSequence } from "@/types/timeline";
@@ -89,9 +90,16 @@ export function TrackingDetails({
   }, [manualOverride, currentTime, annotationOffset]);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const timelineContainerRef = useRef<HTMLDivElement | null>(null);
+  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
   const [_selectedZone, setSelectedZone] = useState("");
   const [_lifecycleZones, setLifecycleZones] = useState<string[]>([]);
   const [seekToTimestamp, setSeekToTimestamp] = useState<number | null>(null);
+  const [lineBottomOffsetPx, setLineBottomOffsetPx] = useState<number>(32);
+  const [lineTopOffsetPx, setLineTopOffsetPx] = useState<number>(8);
+  const [blueLineHeightPx, setBlueLineHeightPx] = useState<number>(0);
+
+  const [timelineSize] = useResizeObserver(timelineContainerRef);
 
   const aspectRatio = useMemo(() => {
     if (!config) {
@@ -225,7 +233,6 @@ export function TrackingDetails({
     if (effectiveTime === undefined || event.start_time === undefined) {
       return false;
     }
-
     // If an event has not ended yet, fall back to last timestamp in eventSequence
     let eventEnd = event.end_time;
     if (eventEnd == null && eventSequence && eventSequence.length > 0) {
@@ -238,57 +245,58 @@ export function TrackingDetails({
     if (eventEnd == null) {
       return false;
     }
-
     return effectiveTime >= event.start_time && effectiveTime <= eventEnd;
   }, [effectiveTime, event.start_time, event.end_time, eventSequence]);
 
-  // Calculate how far down the blue line should extend based on effectiveTime
+  // Dynamically compute pixel offsets so the timeline line starts at the
-  const calculateLineHeight = useCallback(() => {
+  // first row midpoint and ends at the last row midpoint. For accuracy,
-    if (!eventSequence || eventSequence.length === 0 || !isWithinEventRange) {
+  // measure the center Y of each lifecycle row and interpolate the current
-      return 0;
+  // effective time into a pixel position; then set the blue line height
-    }
+  // so it reaches the center dot at the same time the dot becomes active.
+  useEffect(() => {
+    if (!timelineContainerRef.current || !eventSequence) return;
 
-    const currentTime = effectiveTime ?? 0;
+    const containerRect = timelineContainerRef.current.getBoundingClientRect();
+    const validRefs = rowRefs.current.filter((r) => r !== null);
+    if (validRefs.length === 0) return;
 
-    // Find which events have been passed
+    const centers = validRefs.map((n) => {
-    let lastPassedIndex = -1;
+      const r = n.getBoundingClientRect();
-    for (let i = 0; i < eventSequence.length; i++) {
+      return r.top + r.height / 2 - containerRect.top;
-      if (currentTime >= (eventSequence[i].timestamp ?? 0)) {
+    });
-        lastPassedIndex = i;
+
-      } else {
+    const topOffset = Math.max(0, centers[0]);
-        break;
+    const bottomOffset = Math.max(
+      0,
+      containerRect.height - centers[centers.length - 1],
+    );
+
+    setLineTopOffsetPx(Math.round(topOffset));
+    setLineBottomOffsetPx(Math.round(bottomOffset));
+
+    const eff = effectiveTime ?? 0;
+    const timestamps = eventSequence.map((s) => s.timestamp ?? 0);
+
+    let pixelPos = centers[0];
+    if (eff <= timestamps[0]) {
+      pixelPos = centers[0];
+    } else if (eff >= timestamps[timestamps.length - 1]) {
+      pixelPos = centers[centers.length - 1];
+    } else {
+      for (let i = 0; i < timestamps.length - 1; i++) {
+        const t1 = timestamps[i];
+        const t2 = timestamps[i + 1];
+        if (eff >= t1 && eff <= t2) {
+          const ratio = t2 > t1 ? (eff - t1) / (t2 - t1) : 0;
+          pixelPos = centers[i] + ratio * (centers[i + 1] - centers[i]);
+          break;
+        }
       }
     }
 
-    // No events passed yet
+    const bluePx = Math.round(Math.max(0, pixelPos - topOffset));
-    if (lastPassedIndex < 0) return 0;
+    setBlueLineHeightPx(bluePx);
-
+  }, [eventSequence, timelineSize.width, timelineSize.height, effectiveTime]);
-    // All events passed
-    if (lastPassedIndex >= eventSequence.length - 1) return 100;
-
-    // Calculate percentage based on item position, not time
-    // Each item occupies an equal visual space regardless of time gaps
-    const itemPercentage = 100 / (eventSequence.length - 1);
-
-    // Find progress between current and next event for smooth transition
-    const currentEvent = eventSequence[lastPassedIndex];
-    const nextEvent = eventSequence[lastPassedIndex + 1];
-    const currentTimestamp = currentEvent.timestamp ?? 0;
-    const nextTimestamp = nextEvent.timestamp ?? 0;
-
-    // Calculate interpolation between the two events
-    const timeBetween = nextTimestamp - currentTimestamp;
-    const timeElapsed = currentTime - currentTimestamp;
-    const interpolation = timeBetween > 0 ? timeElapsed / timeBetween : 0;
-
-    // Base position plus interpolated progress to next item
-    return Math.min(
-      100,
-      lastPassedIndex * itemPercentage + interpolation * itemPercentage,
-    );
-  }, [eventSequence, effectiveTime, isWithinEventRange]);
-
-  const blueLineHeight = calculateLineHeight();
 
   const videoSource = useMemo(() => {
     // event.start_time and event.end_time are in DETECT stream time
@@ -545,12 +553,21 @@ export function TrackingDetails({
                     {t("detail.noObjectDetailData", { ns: "views/events" })}
                   </div>
                 ) : (
-                  <div className="-pb-2 relative mx-0">
+                  <div
-                    <div className="absolute -top-2 bottom-8 left-6 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground" />
+                    className="-pb-2 relative mx-0"
+                    ref={timelineContainerRef}
+                  >
+                    <div
+                      className="absolute -top-2 left-6 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground"
+                      style={{ bottom: lineBottomOffsetPx }}
+                    />
                     {isWithinEventRange && (
                       <div
-                        className="absolute left-6 top-2 z-[5] max-h-[calc(100%-3rem)] w-0.5 -translate-x-1/2 bg-selected transition-all duration-300"
+                        className="absolute left-6 z-[5] w-0.5 -translate-x-1/2 bg-selected transition-all duration-300"
-                        style={{ height: `${blueLineHeight}%` }}
+                        style={{
+                          top: `${lineTopOffsetPx}px`,
+                          height: `${blueLineHeightPx}px`,
+                        }}
                       />
                     )}
                     <div className="space-y-2">
@@ -603,20 +620,26 @@ export function TrackingDetails({
                             : undefined;
 
                         return (
-                          <LifecycleIconRow
+                          <div
                             key={`${item.timestamp}-${item.source_id ?? ""}-${idx}`}
-                            item={item}
+                            ref={(el) => {
-                            isActive={isActive}
+                              rowRefs.current[idx] = el;
-                            formattedEventTimestamp={formattedEventTimestamp}
+                            }}
-                            ratio={ratio}
+                          >
-                            areaPx={areaPx}
+                            <LifecycleIconRow
-                            areaPct={areaPct}
+                              item={item}
-                            onClick={() => handleLifecycleClick(item)}
+                              isActive={isActive}
-                            setSelectedZone={setSelectedZone}
+                              formattedEventTimestamp={formattedEventTimestamp}
-                            getZoneColor={getZoneColor}
+                              ratio={ratio}
-                            effectiveTime={effectiveTime}
+                              areaPx={areaPx}
-                            isTimelineActive={isWithinEventRange}
+                              areaPct={areaPct}
-                          />
+                              onClick={() => handleLifecycleClick(item)}
+                              setSelectedZone={setSelectedZone}
+                              getZoneColor={getZoneColor}
+                              effectiveTime={effectiveTime}
+                              isTimelineActive={isWithinEventRange}
+                            />
+                          </div>
                         );
                       })}
                     </div>

web/src/pages/FaceLibrary.tsx

@@ -57,7 +57,6 @@ import { Trans, useTranslation } from "react-i18next";
 import {
   LuFolderCheck,
   LuImagePlus,
-  LuPencil,
   LuRefreshCw,
   LuScanFace,
   LuTrash2,
@@ -580,9 +579,7 @@ function LibrarySelector({
                         e.stopPropagation();
                         setRenameFace(face);
                       }}
-                    >
+                    ></Button>
-                      <LuPencil className="size-4 text-primary" />
-                    </Button>
                   </TooltipTrigger>
                   <TooltipPortal>
                     <TooltipContent>{t("button.renameFace")}</TooltipContent>
@@ -598,9 +595,7 @@ function LibrarySelector({
                         e.stopPropagation();
                         setConfirmDelete(face);
                       }}
-                    >
+                    ></Button>
-                      <LuTrash2 className="size-4 text-destructive" />
-                    </Button>
                   </TooltipTrigger>
                   <TooltipPortal>
                     <TooltipContent>{t("button.deleteFace")}</TooltipContent>

web/src/utils/i18n.ts

@@ -33,7 +33,7 @@ i18n
     fallbackLng: "en", // use en if detected lng is not available
 
     backend: {
-      loadPath: "locales/{{lng}}/{{ns}}.json",
+      loadPath: `locales/{{lng}}/{{ns}}.json?v=${import.meta.env.VITE_GIT_COMMIT_HASH || "unknown"}`,
     },
 
     ns: [

web/src/views/classification/ModelSelectionView.tsx

@@ -16,7 +16,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaFolderPlus } from "react-icons/fa";
 import { MdModelTraining } from "react-icons/md";
-import { LuPencil, LuTrash2 } from "react-icons/lu";
 import { FiMoreVertical } from "react-icons/fi";
 import useSWR from "swr";
 import Heading from "@/components/ui/heading";
@@ -352,11 +351,9 @@ function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
               onClick={(e) => e.stopPropagation()}
             >
               <DropdownMenuItem onClick={handleEditClick}>
-                <LuPencil className="mr-2 size-4" />
                 <span>{t("button.edit", { ns: "common" })}</span>
               </DropdownMenuItem>
               <DropdownMenuItem onClick={handleDeleteClick}>
-                <LuTrash2 className="mr-2 size-4" />
                 <span>{t("button.delete", { ns: "common" })}</span>
               </DropdownMenuItem>
             </DropdownMenuContent>

web/src/views/settings/TriggerView.tsx

@@ -201,12 +201,17 @@ export default function TriggerView({
               .then((configResponse) => {
                 if (configResponse.status === 200) {
                   updateConfig();
+                  const displayName =
+                    friendly_name && friendly_name !== ""
+                      ? `${friendly_name} (${name})`
+                      : name;
+
                   toast.success(
                     t(
                       isEdit
                         ? "triggers.toast.success.updateTrigger"
                         : "triggers.toast.success.createTrigger",
-                      { name },
+                      { name: displayName },
                     ),
                     { position: "top-center" },
                   );
@@ -351,8 +356,19 @@ export default function TriggerView({
               .then((configResponse) => {
                 if (configResponse.status === 200) {
                   updateConfig();
+                  const friendly =
+                    config?.cameras?.[selectedCamera]?.semantic_search
+                      ?.triggers?.[name]?.friendly_name;
+
+                  const displayName =
+                    friendly && friendly !== ""
+                      ? `${friendly} (${name})`
+                      : name;
+
                   toast.success(
-                    t("triggers.toast.success.deleteTrigger", { name }),
+                    t("triggers.toast.success.deleteTrigger", {
+                      name: displayName,
+                    }),
                     {
                       position: "top-center",
                     },
@@ -381,7 +397,7 @@ export default function TriggerView({
           setIsLoading(false);
         });
     },
-    [t, updateConfig, selectedCamera, setUnsavedChanges],
+    [t, updateConfig, selectedCamera, setUnsavedChanges, config],
   );
 
   useEffect(() => {
@@ -843,7 +859,14 @@ export default function TriggerView({
       />
       <DeleteTriggerDialog
         show={showDelete}
-        triggerName={selectedTrigger?.name ?? ""}
+        triggerName={
+          selectedTrigger
+            ? selectedTrigger.friendly_name &&
+              selectedTrigger.friendly_name !== ""
+              ? `${selectedTrigger.friendly_name} (${selectedTrigger.name})`
+              : selectedTrigger.name
+            : ""
+        }
         isLoading={isLoading}
         onCancel={() => {
           setShowDelete(false);

web/src/views/settings/UiSettingsView.tsx

@@ -157,7 +157,7 @@ export default function UiSettingsView() {
                   checked={cameraNames}
                   onCheckedChange={setCameraName}
                 />
-                <Label className="cursor-pointer" htmlFor="auto-live">
+                <Label className="cursor-pointer" htmlFor="camera-names">
                   {t("general.liveDashboard.displayCameraNames.label")}
                 </Label>
               </div>