diff --git a/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModal.tsx b/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModal.tsx index 62224e427..694daccda 100644 --- a/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModal.tsx +++ b/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModal.tsx @@ -26,13 +26,13 @@ export const GlobalSearchModal = () => { }, [selectedAssets, hasQuery]); const { allResults, isLoading, scrollContainerRef } = useSearchInfinite({ - page_size: 15, + page_size: 20, assetTypes, searchQuery: debouncedSearchQuery, includeAssetAncestors: true, includeScreenshots: true, scrollConfig: { - scrollThreshold: 60, + scrollThreshold: 10, }, mounted: isOpen, }); @@ -45,6 +45,7 @@ export const GlobalSearchModal = () => { loading={isLoading} scrollContainerRef={scrollContainerRef} openSecondaryContent={openSecondaryContent} + selectedAssets={selectedAssets} /> ); }; diff --git a/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModalBase.tsx b/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModalBase.tsx index 4215b7590..011c3f385 100644 --- a/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModalBase.tsx +++ b/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModalBase.tsx @@ -1,4 +1,6 @@ /** biome-ignore-all lint/security/noDangerouslySetInnerHtml: I know what I'm doing */ + +import type { AssetType } from '@buster/server-shared/assets'; import type { SearchTextData, SearchTextResponse } from '@buster/server-shared/search'; import { useNavigate } from '@tanstack/react-router'; import { useMemo, useState } from 'react'; @@ -14,6 +16,7 @@ import type { import { useMemoizedFn } from '@/hooks/useMemoizedFn'; import { timeFromNow } from '@/lib/date'; import { assetTypeToIcon } from '../../icons/assetIcons'; +import { GlobalSearchModalFilters } from './GlobalSearchModalFilters'; import { GlobalSearchSecondaryContent } from './GlobalSearchSecondaryContent'; import { useGlobalSearchStore } from './global-search-store'; @@ -22,6 +25,7 @@ export type GlobalSearchModalBaseProps = 'value' | 'onChangeValue' | 'loading' | 'scrollContainerRef' | 'openSecondaryContent' > & { items: SearchTextResponse['data']; + selectedAssets: AssetType[] | null; }; export const GlobalSearchModalBase = ({ @@ -31,20 +35,28 @@ export const GlobalSearchModalBase = ({ loading, openSecondaryContent, scrollContainerRef, + selectedAssets, }: GlobalSearchModalBaseProps) => { const { isOpen, onClose } = useGlobalSearchStore(); const navigate = useNavigate(); const [viewedItem, setViewedItem] = useState(null); const searchItems: SearchItems[] = useMemo(() => { - const makeItem = (item: SearchTextData, makeTertiary?: boolean): SearchItem => { + const makeItem = (item: SearchTextData, makeSecondary?: boolean): SearchItem => { const Icon = assetTypeToIcon(item.assetType); return { label: , icon: , value: item.assetId, type: 'item', - tertiaryLabel: makeTertiary ? timeFromNow(item.updatedAt) : undefined, + tertiaryLabel: timeFromNow(item.updatedAt), + secondaryLabel: + makeSecondary && item.additionalText ? ( + + ) : undefined, }; }; @@ -90,7 +102,7 @@ export const GlobalSearchModalBase = ({ ([key, value]) => ({ type: 'group', label: translations[key as keyof typeof translations], - items: value.map((item) => makeItem(item, true)), + items: value.map((item) => makeItem(item, false)), display: value.length > 0, }) ), @@ -114,6 +126,10 @@ export const GlobalSearchModalBase = ({ secondaryContent={useMemo(() => { return viewedItem ? : null; }, [viewedItem])} + filterContent={useMemo( + () => , + [selectedAssets] + )} placeholder="Search..." loading={loading} showTopLoading={false} diff --git a/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModalFilters.tsx b/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModalFilters.tsx new file mode 100644 index 000000000..e7e3333ff --- /dev/null +++ b/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModalFilters.tsx @@ -0,0 +1,10 @@ +import type { AssetType } from '@buster/server-shared/assets'; +import React from 'react'; + +export const GlobalSearchModalFilters = ({ + selectedAssets, +}: { + selectedAssets: AssetType[] | null; +}) => { + return
X
; +}; diff --git a/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchSecondaryContent.tsx b/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchSecondaryContent.tsx index e6bcd719e..2f0e5e95a 100644 --- a/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchSecondaryContent.tsx +++ b/apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchSecondaryContent.tsx @@ -282,6 +282,9 @@ const Ancestors = React.memo(