move search to top bar

interface/app/$libraryId/Explorer/Search/index.tsx

@@ -100,7 +100,7 @@ const SearchOptions = () => {
 			onMouseLeave={() => {
 				getSearchStore().interactingWithSearchOptions = false;
 			}}
-			className="flex h-[45px] w-full flex-row items-center gap-4 border-b border-app-line/50 bg-app-darkerBox/90 px-4 backdrop-blur"
+			className="flex h-[45px] w-full flex-row items-center gap-4 bg-black/10 px-4"
 		>
 			{/* <OptionContainer className="flex flex-row items-center">
 				<FilterContainer>

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

@@ -18,8 +18,6 @@ import { ExplorerPath, PATH_BAR_HEIGHT } from './View/ExplorerPath';
 
 import 'react-slidedown/lib/slidedown.css';
 
-import { useSearchStore } from './Search/store';
-
 interface Props {
 	emptyNotice?: ExplorerViewProps['emptyNotice'];
 	contextMenu?: () => ReactNode;
@@ -34,7 +32,6 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 	const explorerStore = useExplorerStore();
 	const explorer = useExplorerContext();
 	const layoutStore = useExplorerLayoutStore();
-	const searchStore = useSearchStore();
 
 	const showPathBar = explorer.showPathBar && layoutStore.showPathBar;
 
@@ -91,10 +88,6 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 					>
 						{explorer.items && explorer.items.length > 0 && <DismissibleNotice />}
 
-						<div className="search-options-slide sticky top-0 z-10 ">
-							{searchStore.isSearching && props.showFilterBar && <SearchOptions />}
-						</div>
-
 						<View
 							contextMenu={props.contextMenu ? props.contextMenu() : <ContextMenu />}
 							emptyNotice={

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

@@ -67,7 +67,6 @@ const Layout = () => {
 				onContextMenu={(e) => {
 					// TODO: allow this on some UI text at least / disable default browser context menu
 					e.preventDefault();
-					return false;
 				}}
 			>
 				<Sidebar />

interface/app/$libraryId/TopBar/Layout.tsx

@@ -3,6 +3,7 @@ import { Outlet } from 'react-router';
 import { SearchFilterArgs } from '@sd/client';
 
 import TopBar from '.';
+import { SearchContextProvider } from '../Explorer/Search/Context';
 
 const TopBarContext = createContext<ReturnType<typeof useContextValue> | null>(null);
 
@@ -29,8 +30,10 @@ export const Component = () => {
 
 	return (
 		<TopBarContext.Provider value={value}>
-			<TopBar />
-			<Outlet />
+			<SearchContextProvider>
+				<TopBar />
+				<Outlet />
+			</SearchContextProvider>
 		</TopBarContext.Provider>
 	);
 };

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

@@ -1,12 +1,14 @@
 import { Plus, X } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import { useLayoutEffect, useRef, type Ref } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import { useKey } from 'rooks';
 import useResizeObserver from 'use-resize-observer';
 import { Tooltip } from '@sd/ui';
 import { useKeyMatcher, useOperatingSystem, useShowControls } from '~/hooks';
 import { useTabsContext } from '~/TabsContext';
 
+import SearchOptions from '../Explorer/Search';
+import { useSearchStore } from '../Explorer/Search/store';
 import { useExplorerStore } from '../Explorer/store';
 import { useTopBarContext } from './Layout';
 import { NavigationButtons } from './NavigationButtons';
@@ -17,27 +19,27 @@ const TopBar = () => {
 	const { isDragging } = useExplorerStore();
 	const ref = useRef<HTMLDivElement>(null);
 
-	const topBar = useTopBarContext();
+	const tabs = useTabsContext();
+	const ctx = useTopBarContext();
+	const searchStore = useSearchStore();
 
 	useResizeObserver({
 		ref,
 		box: 'border-box',
 		onResize(bounds) {
 			if (bounds.height === undefined) return;
-			topBar.setTopBarHeight(bounds.height);
+			ctx.setTopBarHeight(bounds.height);
 		}
 	});
 
-	// this is crucial to make sure that the first browser paint takes into account the proper top bar height.
-	// resize observer doesn't run early enough to cause react to rerender before the first browser paint
+	// when the component mounts + crucial state changes, we need to update the height _before_ the browser paints
+	// in order to avoid jank. resize observer doesn't fire early enought to account for this.
 	useLayoutEffect(() => {
-		const height = ref.current!.getBoundingClientRect().height;
-		topBar.setTopBarHeight.call(undefined, height);
-	}, [topBar.setTopBarHeight]);
-
-	const tabs = useTabsContext();
+		searchStore.isSearching;
 
-	const ctx = useTopBarContext();
+		const height = ref.current!.getBoundingClientRect().height;
+		ctx.setTopBarHeight.call(undefined, height);
+	}, [ctx.setTopBarHeight, searchStore.isSearching]);
 
 	return (
 		<div
@@ -69,6 +71,13 @@ const TopBar = () => {
 
 				<div ref={ctx.setRight} className={clsx(ctx.fixedArgs && 'flex-1')} />
 			</div>
+
+			{searchStore.isSearching && (
+				<>
+					<hr className="w-full border-t border-sidebar-divider bg-sidebar-divider" />
+					<SearchOptions />
+				</>
+			)}
 		</div>
 	);
 };

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

@@ -30,7 +30,6 @@ import { useQuickRescan } from '~/hooks/useQuickRescan';
 import Explorer from '../Explorer';
 import { ExplorerContextProvider } from '../Explorer/Context';
 import { usePathsInfiniteQuery } from '../Explorer/queries';
-import { SearchContextProvider } from '../Explorer/Search/Context';
 import { useSearchFilters } from '../Explorer/Search/store';
 import { createDefaultExplorerSettings, filePathOrderingKeysSchema } from '../Explorer/store';
 import { DefaultTopBarOptions } from '../Explorer/TopBarOptions';
@@ -49,11 +48,7 @@ export const Component = () => {
 		suspense: true
 	});
 
-	return (
-		<SearchContextProvider>
-			<LocationExplorer path={path} location={location.data!} />)
-		</SearchContextProvider>
-	);
+	return <LocationExplorer path={path} location={location.data!} />;
 };
 
 const LocationExplorer = ({ location, path }: { location: Location; path?: string }) => {

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

@@ -7,23 +7,14 @@ import { useRouteTitle, useZodRouteParams } from '~/hooks';
 import Explorer from '../Explorer';
 import { ExplorerContextProvider } from '../Explorer/Context';
 import { useObjectsInfiniteQuery } from '../Explorer/queries';
-import { SearchContextProvider } from '../Explorer/Search/Context';
 import { useSearchFilters } from '../Explorer/Search/store';
 import { createDefaultExplorerSettings, objectOrderingKeysSchema } from '../Explorer/store';
 import { DefaultTopBarOptions } from '../Explorer/TopBarOptions';
 import { useExplorer, UseExplorerSettings, useExplorerSettings } from '../Explorer/useExplorer';
 import { EmptyNotice } from '../Explorer/View';
 import { TopBarPortal } from '../TopBar/Portal';
 
-export const Component = () => {
-	return (
-		<SearchContextProvider>
-			<Inner />
-		</SearchContextProvider>
-	);
-};
-
-function Inner() {
+export function Component() {
 	const { id: tagId } = useZodRouteParams(LocationIdParamsSchema);
 	const tag = useLibraryQuery(['tags.get', tagId], { suspense: true });