Don't error on missing search filters + add default search target (#2438)

* don't error on missing search filters + add default search target

* Auto fmt/lint

---------

Co-authored-by: Vítor Vasconcellos <vasconcellos.dev@gmail.com>

interface/app/$libraryId/favorites.tsx

@@ -26,7 +26,7 @@ export function Component() {
 		orderingKeys: objectOrderingKeysSchema
 	});
 
-	const search = useSearchFromSearchParams();
+	const search = useSearchFromSearchParams({ defaultTarget: 'objects' });
 
 	const defaultFilter = { object: { favorite: true } };
 
@@ -52,7 +52,7 @@ export function Component() {
 		<ExplorerContextProvider explorer={explorer}>
 			<SearchContextProvider search={search}>
 				<TopBarPortal
-					center={<SearchBar defaultFilters={[defaultFilter]} />}
+					center={<SearchBar defaultFilters={[defaultFilter]} defaultTarget="objects" />}
 					left={
 						<div className="flex flex-row items-center gap-2">
 							<span className="truncate text-sm font-medium">{t('favorites')}</span>

interface/app/$libraryId/labels.tsx

@@ -30,7 +30,7 @@ export function Component() {
 		orderingKeys: objectOrderingKeysSchema
 	});
 
-	const search = useSearchFromSearchParams();
+	const search = useSearchFromSearchParams({ defaultTarget: 'objects' });
 
 	const explorer = useExplorer({
 		items: labels.data || null,

interface/app/$libraryId/location/$id.tsx

@@ -71,7 +71,7 @@ const LocationExplorer = ({ location }: { location: Location; path?: string }) =
 		[location.id]
 	);
 
-	const search = useSearchFromSearchParams();
+	const search = useSearchFromSearchParams({ defaultTarget: 'paths' });
 
 	const searchFiltersAreDefault = useMemo(
 		() => JSON.stringify(defaultFilters) !== JSON.stringify(search.filters),

interface/app/$libraryId/overview/index.tsx

@@ -24,7 +24,7 @@ export const Component = () => {
 
 	const { data: node } = useBridgeQuery(['nodeState']);
 
-	const search = useSearchFromSearchParams();
+	const search = useSearchFromSearchParams({ defaultTarget: 'paths' });
 
 	const stats = useLibraryQuery(['library.statistics']);
 

interface/app/$libraryId/recents.tsx

@@ -24,7 +24,7 @@ export function Component() {
 		orderingKeys: objectOrderingKeysSchema
 	});
 
-	const search = useSearchFromSearchParams();
+	const search = useSearchFromSearchParams({ defaultTarget: 'paths' });
 
 	const { t } = useLocale();
 
@@ -52,7 +52,7 @@ export function Component() {
 		<ExplorerContextProvider explorer={explorer}>
 			<SearchContextProvider search={search}>
 				<TopBarPortal
-					center={<SearchBar defaultFilters={[defaultFilters]} />}
+					center={<SearchBar defaultFilters={[defaultFilters]} defaultTarget="paths" />}
 					left={
 						<div className="flex flex-row items-center gap-2">
 							<span className="truncate text-sm font-medium">{t('recents')}</span>

interface/app/$libraryId/search/Filters.tsx

@@ -2,6 +2,7 @@ import {
 	CircleDashed,
 	Cube,
 	Folder,
+	Heart,
 	Icon,
 	SelectionSlash,
 	Tag,
@@ -569,6 +570,24 @@ export const filterRegistry = [
 			];
 		},
 		Render: ({ filter, search }) => <FilterOptionBoolean filter={filter} search={search} />
+	}),
+	createBooleanFilter({
+		name: 'Favorite',
+		icon: Heart,
+		extract: (arg) => {
+			if ('object' in arg && 'favorite' in arg.object) return arg.object.favorite;
+		},
+		create: (favorite) => ({ object: { favorite } }),
+		useOptions: () => {
+			return [
+				{
+					name: 'Favorite',
+					value: true,
+					icon: 'Heart' // Spacedrive folder icon
+				}
+			];
+		},
+		Render: ({ filter, search }) => <FilterOptionBoolean filter={filter} search={search} />
 	})
 	// createInOrNotInFilter({
 	// 	name: 'Label',

interface/app/$libraryId/search/index.tsx

@@ -31,7 +31,7 @@ export function Component() {
 
 	const { t } = useLocale();
 
-	const search = useSearchFromSearchParams();
+	const search = useSearchFromSearchParams({ defaultTarget: 'paths' });
 
 	const items = useSearchExplorerQuery({
 		search,

interface/app/$libraryId/search/store.tsx

@@ -68,7 +68,8 @@ export const useRegisterSearchFilterOptions = (
 
 export function argsToOptions(args: SearchFilterArgs[], options: Map<string, FilterOption[]>) {
 	return args.flatMap((fixedArg) => {
-		const filter = filterRegistry.find((f) => f.extract(fixedArg))!;
+		const filter = filterRegistry.find((f) => f.extract(fixedArg));
+		if (!filter) return [];
 
 		return filter
 			.argsToOptions(filter.extract(fixedArg) as any, options)

interface/app/$libraryId/search/useSearch.ts

@@ -22,7 +22,7 @@ export interface UseSearchProps<TSource extends UseSearchSource> {
 	source: TSource;
 }
 
-export function useSearchParamsSource() {
+export function useSearchParamsSource(props: { defaultTarget: SearchTarget }) {
 	const [searchParams, setSearchParams] = useRawSearchParams();
 
 	const filtersSearchParam = searchParams.get('filters');
@@ -60,7 +60,7 @@ export function useSearchParamsSource() {
 		);
 	}
 
-	const target = (searchParams.get('target') ?? 'paths') as SearchTarget;
+	const target = (searchParams.get('target') as SearchTarget | null) ?? props.defaultTarget;
 
 	return {
 		filters,
@@ -201,9 +201,9 @@ export function useSearch<TSource extends UseSearchSource>(props: UseSearchProps
 	};
 }
 
-export function useSearchFromSearchParams() {
+export function useSearchFromSearchParams(props: { defaultTarget: SearchTarget }) {
 	return useSearch({
-		source: useSearchParamsSource()
+		source: useSearchParamsSource(props)
 	});
 }
 

interface/app/$libraryId/tag/$id.tsx

@@ -20,7 +20,7 @@ import { TopBarPortal } from '../TopBar/Portal';
 export function Component() {
 	const { id: tagId } = useZodRouteParams(LocationIdParamsSchema);
 	const result = useLibraryQuery(['tags.get', tagId], { suspense: true });
-	const tag = result.data;
+	const tag = result.data!;
 
 	const { t } = useLocale();
 
@@ -28,9 +28,9 @@ export function Component() {
 
 	const { explorerSettings, preferences } = useTagExplorerSettings(tag!);
 
-	const search = useSearchFromSearchParams();
+	const search = useSearchFromSearchParams({ defaultTarget: 'objects' });
 
-	const defaultFilters = useMemo(() => [{ object: { tags: { in: [tag!.id] } } }], [tag!.id]);
+	const defaultFilters = useMemo(() => [{ object: { tags: { in: [tag.id] } } }], [tag.id]);
 
 	const items = useSearchExplorerQuery({
 		search,
@@ -45,7 +45,7 @@ export function Component() {
 		isFetchingNextPage: items.query.isFetchingNextPage,
 		isLoadingPreferences: preferences.isLoading,
 		settings: explorerSettings,
-		parent: { type: 'Tag', tag: tag! }
+		parent: { type: 'Tag', tag: tag }
 	});
 
 	return (