Tweaks (#24484)

* fix long press on mobile in face and classification

the listener was on the image only, so long pressing on any overlaid div/text area would cause iOS to select the text instead of adding the blue outline

* improve navigation to and from explore

when viewing a tracked object in explore from a classification card, triggers, or the detail stream, explore would open and show a single tracked object. on mobile (noted especially on iOS with frigate in HA), there is no obvious way to navigate back, so add a back button in its usual spot.

also, when going back to the classification view from explore, it may not be obvious which thumbnail you were last viewing, so add a temporary blue outline around the card like review and explore already does

* test tweaks

web/src/views/search/SearchView.tsx

@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { SearchFilter, SearchResult, SearchSource } from "@/types/search";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isMobileOnly } from "react-device-detect";
+import { isDesktop, isMobileOnly } from "react-device-detect";
 import { LuImage, LuSearchX, LuText } from "react-icons/lu";
 import useSWR from "swr";
 import ExploreView from "../explore/ExploreView";
@@ -32,7 +32,9 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 import SearchActionGroup from "@/components/filter/SearchActionGroup";
 import { Trans, useTranslation } from "react-i18next";
 import { use24HourTime } from "@/hooks/use-date-utils";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { IoMdArrowRoundBack } from "react-icons/io";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 
 type SearchViewProps = {
@@ -80,6 +82,10 @@ export default function SearchView({
   });
   const is24Hour = use24HourTime(config);
   const navigate = useNavigate();
+  const location = useLocation();
+
+  // set by in-app links, since an iOS home screen app has no back gesture
+  const canGoBack = location.state?.canGoBack === true;
 
   const { data: exploreEvents } = useSWR<SearchResult[]>(
     (!searchFilter || Object.keys(searchFilter).length === 0) &&
@@ -535,17 +541,39 @@ export default function SearchView({
           isMobileOnly && "mb-2 h-auto flex-wrap gap-2 space-y-0",
         )}
       >
-        {config?.semantic_search?.enabled && (
-          <div className={cn("z-[41] w-full lg:absolute lg:top-0 lg:w-1/3")}>
-            <InputWithTags
-              inputFocused={inputFocused}
-              setInputFocused={setInputFocused}
-              filters={searchFilter ?? {}}
-              setFilters={setSearchFilter}
-              search={search}
-              setSearch={setSearch}
-              allSuggestions={suggestionsValues}
-            />
+        {(canGoBack || config?.semantic_search?.enabled) && (
+          <div
+            className={cn(
+              "z-[41] flex w-full flex-row items-start gap-2 lg:absolute lg:top-0 lg:w-1/3",
+            )}
+          >
+            {canGoBack && (
+              <Button
+                className="flex shrink-0 items-center gap-2.5 rounded-lg"
+                aria-label={t("label.back", { ns: "common" })}
+                onClick={() => navigate(-1)}
+              >
+                <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+                {isDesktop && (
+                  <div className="text-primary">
+                    {t("button.back", { ns: "common" })}
+                  </div>
+                )}
+              </Button>
+            )}
+            {config?.semantic_search?.enabled && (
+              <div className="min-w-0 flex-1">
+                <InputWithTags
+                  inputFocused={inputFocused}
+                  setInputFocused={setInputFocused}
+                  filters={searchFilter ?? {}}
+                  setFilters={setSearchFilter}
+                  search={search}
+                  setSearch={setSearch}
+                  allSuggestions={suggestionsValues}
+                />
+              </div>
+            )}
           </div>
         )}