Center and show all filters when semantic search is not enabled

This commit is contained in:
Nicolas Mowen 2024-09-09 15:33:14 -06:00
parent ce39ae26b8
commit 8ee10f6656
2 changed files with 47 additions and 25 deletions

View File

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

View File

@ -11,6 +11,7 @@ import {
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { FrigateConfig } from "@/types/frigateConfig";
import { Preview } from "@/types/preview"; import { Preview } from "@/types/preview";
import { SearchFilter, SearchResult } from "@/types/search"; import { SearchFilter, SearchResult } from "@/types/search";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
@ -24,6 +25,7 @@ import {
LuXCircle, LuXCircle,
} from "react-icons/lu"; } from "react-icons/lu";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import useSWR from "swr";
type SearchViewProps = { type SearchViewProps = {
search: string; search: string;
@ -51,6 +53,10 @@ export default function SearchView({
onUpdateFilter, onUpdateFilter,
onOpenSearch, onOpenSearch,
}: SearchViewProps) { }: SearchViewProps) {
const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false,
});
// remove duplicate event ids // remove duplicate event ids
const uniqueResults = useMemo(() => { const uniqueResults = useMemo(() => {
@ -112,7 +118,15 @@ 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 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 <div
className={cn( className={cn(
"relative w-full", "relative w-full",
@ -134,6 +148,7 @@ export default function SearchView({
/> />
)} )}
</div> </div>
)}
{hasExistingSearch && ( {hasExistingSearch && (
<SearchFilterGroup <SearchFilterGroup