move search type to settings

web/src/components/overlay/dialog/SearchFilterDialog.tsx

@@ -65,9 +65,7 @@ export default function SearchFilterDialog({
         (currentFilter.min_score ?? 0) > 0.5 ||
         (currentFilter.max_score ?? 1) < 1 ||
         (currentFilter.zones?.length ?? 0) > 0 ||
-        (currentFilter.sub_labels?.length ?? 0) > 0 ||
+        (currentFilter.sub_labels?.length ?? 0) > 0),
-        (!currentFilter.search_type?.includes("similarity") &&
-          (currentFilter.search_type?.length ?? 2) !== 2)),
     [currentFilter],
   );
 
@@ -115,20 +113,6 @@ export default function SearchFilterDialog({
           setCurrentFilter({ ...currentFilter, min_score: min, max_score: max })
         }
       />
-      {config?.semantic_search?.enabled &&
-        !currentFilter?.search_type?.includes("similarity") && (
-          <SearchTypeContent
-            searchSources={
-              currentFilter?.search_type ?? ["thumbnail", "description"]
-            }
-            setSearchSources={(newSearchSource) =>
-              setCurrentFilter({
-                ...currentFilter,
-                search_type: newSearchSource,
-              })
-            }
-          />
-        )}
       {isDesktop && <DropdownMenuSeparator />}
       <div className="flex items-center justify-evenly p-2">
         <Button
@@ -491,59 +475,3 @@ export function ScoreFilterContent({
     </div>
   );
 }
-
-type SearchTypeContentProps = {
-  searchSources: SearchSource[] | undefined;
-  setSearchSources: (sources: SearchSource[] | undefined) => void;
-};
-export function SearchTypeContent({
-  searchSources,
-  setSearchSources,
-}: SearchTypeContentProps) {
-  return (
-    <>
-      <div className="overflow-x-hidden">
-        <DropdownMenuSeparator className="mb-3" />
-        <div className="text-lg">Search Sources</div>
-        <div className="mt-2.5 flex flex-col gap-2.5">
-          <FilterSwitch
-            label="Thumbnail Image"
-            isChecked={searchSources?.includes("thumbnail") ?? false}
-            onCheckedChange={(isChecked) => {
-              const updatedSources = searchSources ? [...searchSources] : [];
-
-              if (isChecked) {
-                updatedSources.push("thumbnail");
-                setSearchSources(updatedSources);
-              } else {
-                if (updatedSources.length > 1) {
-                  const index = updatedSources.indexOf("thumbnail");
-                  if (index !== -1) updatedSources.splice(index, 1);
-                  setSearchSources(updatedSources);
-                }
-              }
-            }}
-          />
-          <FilterSwitch
-            label="Description"
-            isChecked={searchSources?.includes("description") ?? false}
-            onCheckedChange={(isChecked) => {
-              const updatedSources = searchSources ? [...searchSources] : [];
-
-              if (isChecked) {
-                updatedSources.push("description");
-                setSearchSources(updatedSources);
-              } else {
-                if (updatedSources.length > 1) {
-                  const index = updatedSources.indexOf("description");
-                  if (index !== -1) updatedSources.splice(index, 1);
-                  setSearchSources(updatedSources);
-                }
-              }
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-}

web/src/components/settings/SearchSettings.tsx

@@ -13,23 +13,36 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
+import FilterSwitch from "../filter/FilterSwitch";
+import { SearchFilter, SearchSource } from "@/types/search";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
 
 type SearchSettingsProps = {
   className?: string;
   columns: number;
   defaultView: string;
+  filter?: SearchFilter;
   setColumns: (columns: number) => void;
   setDefaultView: (view: string) => void;
+  onUpdateFilter: (filter: SearchFilter) => void;
 };
 export default function SearchSettings({
   className,
   columns,
   setColumns,
   defaultView,
+  filter,
   setDefaultView,
+  onUpdateFilter,
 }: SearchSettingsProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
   const [open, setOpen] = useState(false);
 
+  const [searchSources, setSearchSources] = useState<SearchSource[]>([
+    "thumbnail",
+  ]);
+
   const trigger = (
     <Button className="flex items-center gap-2" size="sm">
       <FaCog className="text-secondary-foreground" />
@@ -94,6 +107,15 @@ export default function SearchSettings({
           </div>
         </>
       )}
+      {config?.semantic_search?.enabled && (
+        <SearchTypeContent
+          searchSources={searchSources}
+          setSearchSources={(sources) => {
+            setSearchSources(sources as SearchSource[]);
+            onUpdateFilter({ ...filter, search_type: sources });
+          }}
+        />
+      )}
     </div>
   );
 
@@ -113,3 +135,65 @@ export default function SearchSettings({
     />
   );
 }
+
+type SearchTypeContentProps = {
+  searchSources: SearchSource[] | undefined;
+  setSearchSources: (sources: SearchSource[] | undefined) => void;
+};
+export function SearchTypeContent({
+  searchSources,
+  setSearchSources,
+}: SearchTypeContentProps) {
+  return (
+    <>
+      <div className="overflow-x-hidden">
+        <DropdownMenuSeparator className="mb-3" />
+        <div className="space-y-0.5">
+          <div className="text-md">Search Source</div>
+          <div className="space-y-1 text-xs text-muted-foreground">
+            Choose whether to search the thumbnails or descriptions of your
+            tracked objects.
+          </div>
+        </div>
+        <div className="mt-2.5 flex flex-col gap-2.5">
+          <FilterSwitch
+            label="Thumbnail Image"
+            isChecked={searchSources?.includes("thumbnail") ?? false}
+            onCheckedChange={(isChecked) => {
+              const updatedSources = searchSources ? [...searchSources] : [];
+
+              if (isChecked) {
+                updatedSources.push("thumbnail");
+                setSearchSources(updatedSources);
+              } else {
+                if (updatedSources.length > 1) {
+                  const index = updatedSources.indexOf("thumbnail");
+                  if (index !== -1) updatedSources.splice(index, 1);
+                  setSearchSources(updatedSources);
+                }
+              }
+            }}
+          />
+          <FilterSwitch
+            label="Description"
+            isChecked={searchSources?.includes("description") ?? false}
+            onCheckedChange={(isChecked) => {
+              const updatedSources = searchSources ? [...searchSources] : [];
+
+              if (isChecked) {
+                updatedSources.push("description");
+                setSearchSources(updatedSources);
+              } else {
+                if (updatedSources.length > 1) {
+                  const index = updatedSources.indexOf("description");
+                  if (index !== -1) updatedSources.splice(index, 1);
+                  setSearchSources(updatedSources);
+                }
+              }
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

web/src/views/search/SearchView.tsx

@@ -373,6 +373,8 @@ export default function SearchView({
                 setColumns={setColumns}
                 defaultView={defaultView}
                 setDefaultView={setDefaultView}
+                filter={searchFilter}
+                onUpdateFilter={onUpdateFilter}
               />
               <ScrollBar orientation="horizontal" className="h-0" />
             </div>