Center and show all filters when semantic search is not enabled

web/src/components/filter/SearchFilterGroup.tsx

@@ -37,7 +37,9 @@ export default function SearchFilterGroup({
   filterList,
   onUpdateFilter,
 }: SearchFilterGroupProps) {
-  const { data: config } = useSWR<FrigateConfig>("config");
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
 
   const allLabels = useMemo<string[]>(() => {
     if (filterList?.labels) {
@@ -147,6 +149,11 @@ export default function SearchFilterGroup({
     [filter, onUpdateFilter],
   );
 
+  const showAllFilters = useMemo(
+    () => isDesktop || !config?.semantic_search?.enabled,
+    [config],
+  );
+
   return (
     <div className="flex justify-center gap-2">
       {filters.includes("cameras") && (
@@ -159,7 +166,7 @@ export default function SearchFilterGroup({
           }}
         />
       )}
-      {isDesktop && filters.includes("date") && (
+      {showAllFilters && filters.includes("date") && (
         <CalendarRangeFilterButton
           range={
             filter?.after == undefined || filter?.before == undefined
@@ -173,7 +180,7 @@ export default function SearchFilterGroup({
           updateSelectedRange={onUpdateSelectedRange}
         />
       )}
-      {isDesktop && filters.includes("general") && (
+      {showAllFilters && filters.includes("general") && (
         <GeneralFilterButton
           allLabels={filterValues.labels}
           selectedLabels={filter?.labels}
@@ -193,7 +200,7 @@ export default function SearchFilterGroup({
           }
         />
       )}
-      {isMobile && mobileSettingsFeatures.length > 0 && (
+      {!showAllFilters && mobileSettingsFeatures.length > 0 && (
         <MobileReviewSettingsDrawer
           features={mobileSettingsFeatures}
           filter={filter}

web/src/views/search/SearchView.tsx

@@ -11,6 +11,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import { SearchFilter, SearchResult } from "@/types/search";
 import { useCallback, useMemo, useState } from "react";
@@ -24,6 +25,7 @@ import {
   LuXCircle,
 } from "react-icons/lu";
 import { Link } from "react-router-dom";
+import useSWR from "swr";
 
 type SearchViewProps = {
   search: string;
@@ -51,6 +53,10 @@ export default function SearchView({
   onUpdateFilter,
   onOpenSearch,
 }: SearchViewProps) {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
   // remove duplicate event ids
 
   const uniqueResults = useMemo(() => {
@@ -112,28 +118,37 @@ export default function SearchView({
         }
       />
 
-      <div className="relative mb-2 flex h-11 items-center justify-between pl-2 pr-2 md:pl-3">
-        <div
-          className={cn(
-            "relative w-full",
-            hasExistingSearch ? "mr-3 md:w-1/3" : "md:ml-[25%] md:w-1/2",
-          )}
-        >
-          <Input
-            className="text-md w-full bg-muted pr-10"
-            placeholder={
-              isMobileOnly ? "Search" : "Search for a detected object..."
-            }
-            value={similaritySearch ? "" : search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-          {search && (
-            <LuXCircle
-              className="absolute right-2 top-1/2 h-5 w-5 -translate-y-1/2 cursor-pointer text-muted-foreground hover:text-primary"
-              onClick={() => setSearch("")}
+      <div
+        className={cn(
+          "relative mb-2 flex h-11 items-center pl-2 pr-2 md:pl-3",
+          config?.semantic_search?.enabled
+            ? "justify-between"
+            : "justify-center",
+        )}
+      >
+        {config?.semantic_search?.enabled && (
+          <div
+            className={cn(
+              "relative w-full",
+              hasExistingSearch ? "mr-3 md:w-1/3" : "md:ml-[25%] md:w-1/2",
+            )}
+          >
+            <Input
+              className="text-md w-full bg-muted pr-10"
+              placeholder={
+                isMobileOnly ? "Search" : "Search for a detected object..."
+              }
+              value={similaritySearch ? "" : search}
+              onChange={(e) => setSearch(e.target.value)}
             />
-          )}
-        </div>
+            {search && (
+              <LuXCircle
+                className="absolute right-2 top-1/2 h-5 w-5 -translate-y-1/2 cursor-pointer text-muted-foreground hover:text-primary"
+                onClick={() => setSearch("")}
+              />
+            )}
+          </div>
+        )}
 
         {hasExistingSearch && (
           <SearchFilterGroup