better search

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

@@ -10,6 +10,7 @@ export function useContextValue() {
 	const [children, setChildren] = useState<HTMLDivElement | null>(null);
 	const [fixedArgs, setFixedArgs] = useState<SearchFilterArgs[] | null>(null);
 	const [topBarHeight, setTopBarHeight] = useState(0);
+	const [isSearchExpanded, setIsSearchExpanded] = useState(false);
 
 	return {
 		left,
@@ -23,7 +24,9 @@ export function useContextValue() {
 		fixedArgs,
 		setFixedArgs,
 		topBarHeight,
-		setTopBarHeight
+		setTopBarHeight,
+		isSearchExpanded,
+		setIsSearchExpanded
 	};
 }
 

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

@@ -1,6 +1,6 @@
 import { Plus, X } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { useSelector } from '@sd/client';
 import { Tooltip } from '@sd/ui';
@@ -75,7 +75,7 @@ const TopBar = () => {
 			<div
 				data-tauri-drag-region
 				className={clsx(
-					'flex h-12 items-center gap-3.5 overflow-hidden px-3.5',
+					'flex h-[50px] items-center gap-3.5 overflow-hidden px-3.5',
 					'duration-250 transition-[background-color,border-color] ease-out',
 					isDragSelecting && 'pointer-events-none',
 					platform === 'macOS' &&
@@ -84,17 +84,31 @@ const TopBar = () => {
 						'pl-20'
 				)}
 			>
+				<NavigationButtons />
+
 				<div
 					data-tauri-drag-region
-					className="flex flex-1 items-center gap-3.5 overflow-hidden"
+					className={clsx(
+						'flex items-center gap-3.5 overflow-hidden',
+						ctx.isSearchExpanded ? 'w-0 opacity-0' : 'flex-1'
+					)}
 				>
-					<NavigationButtons />
 					<div ref={ctx.setLeft} className="overflow-hidden" />
 				</div>
 
-				<div ref={ctx.setCenter} />
+				<div
+					className={clsx(
+						'transition-all duration-200',
+						ctx.isSearchExpanded ? 'absolute inset-x-14 z-10' : 'relative w-auto'
+					)}
+				>
+					<div ref={(node) => node && ctx.setCenter(node)} />
+				</div>
 
-				<div ref={ctx.setRight} className="flex-1" />
+				<div
+					ref={ctx.setRight}
+					className={clsx('flex-1', ctx.isSearchExpanded ? 'w-0 opacity-0' : 'visible')}
+				/>
 			</div>
 
 			{tabs && <Tabs />}

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

@@ -161,12 +161,12 @@ const LocationExplorer = ({ location }: { location: Location; path?: string }) =
 						/>
 					}
 				>
-					{search.open && (
+					{/* {search.open && (
 						<>
 							<hr className="w-full border-t border-sidebar-divider bg-sidebar-divider" />
 							<SearchOptions />
 						</>
-					)}
+					)} */}
 				</TopBarPortal>
 			</SearchContextProvider>
 			{isLocationIndexing ? (

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

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { createSearchParams } from 'react-router-dom';
@@ -7,6 +9,7 @@ import { Input, ModifierKeys, Shortcut } from '@sd/ui';
 import { useLocale, useOperatingSystem } from '~/hooks';
 import { keybindForOs } from '~/util/keybinds';
 
+import { useTopBarContext } from '../TopBar/Context';
 import { useSearchContext } from './context';
 import { useSearchStore } from './store';
 import { SearchTarget } from './useSearch';
@@ -23,6 +26,7 @@ export default ({ redirectToSearch, defaultFilters, defaultTarget }: Props) => {
 	const navigate = useNavigate();
 	const searchStore = useSearchStore();
 	const locationState: { focusSearch?: boolean } = useLocation().state;
+	const topBarCtx = useTopBarContext();
 
 	const os = useOperatingSystem(true);
 	const keybind = keybindForOs(os);
@@ -67,6 +71,7 @@ export default ({ redirectToSearch, defaultFilters, defaultTarget }: Props) => {
 	}, [blurHandler, focusHandler]);
 
 	const [value, setValue] = useState(search.rawSearch);
+	const [isAnimating, setIsAnimating] = useState(false);
 
 	useEffect(() => {
 		if (search.rawSearch !== undefined) setValue(search.rawSearch);
@@ -105,43 +110,64 @@ export default ({ redirectToSearch, defaultFilters, defaultTarget }: Props) => {
 	const { t } = useLocale();
 
 	return (
-		<Input
-			ref={searchRef}
-			placeholder={t('search')}
-			className="mx-2 w-48 transition-all duration-200 focus-within:w-60"
-			size="sm"
-			value={value}
-			onChange={(e) => {
-				updateValue(e.target.value);
+		<motion.div
+			layout
+			className="mx-auto"
+			style={{ width: topBarCtx.isSearchExpanded ? 'calc(100% - 40px)' : '300px' }}
+			transition={{
+				type: 'spring',
+				stiffness: 300,
+				damping: 30
 			}}
-			autoFocus={locationState?.focusSearch || false}
-			onBlur={() => {
-				if (search.rawSearch === '' && !searchStore.interactingWithSearchOptions) {
-					clearValue();
-					search.setSearchBarFocused(false);
+			onAnimationStart={() => setIsAnimating(true)}
+			onAnimationComplete={() => setIsAnimating(false)}
+		>
+			<Input
+				ref={searchRef}
+				placeholder={
+					isAnimating
+						? ''
+						: topBarCtx.isSearchExpanded
+							? t('Find all files created today')
+							: t('search')
 				}
-			}}
-			onFocus={() => {
-				search.setSearchBarFocused(true);
-				search.setFilters?.((f) => {
-					if (!f) return defaultFilters ?? [];
-					else return f;
-				});
-				search.setTarget?.(search.target ?? defaultTarget);
-			}}
-			right={
-				<div className="pointer-events-none flex h-7 items-center space-x-1 opacity-70 group-focus-within:hidden">
-					{
-						<Shortcut
-							chars={keybind([ModifierKeys.Control], ['F'])}
-							aria-label={`Press ${
-								os === 'macOS' ? 'Command' : ModifierKeys.Control
-							}-F to focus search bar`}
-							className="border-none"
-						/>
+				className={clsx('mx-2', topBarCtx.isSearchExpanded ? '!rounded-xl' : '!rounded-lg')}
+				size={topBarCtx.isSearchExpanded ? 'md' : 'sm'}
+				value={value}
+				onChange={(e) => {
+					updateValue(e.target.value);
+				}}
+				autoFocus={locationState?.focusSearch || false}
+				onBlur={() => {
+					if (search.rawSearch === '' && !searchStore.interactingWithSearchOptions) {
+						clearValue();
+						search.setSearchBarFocused(false);
+						topBarCtx.setIsSearchExpanded(false);
 					}
-				</div>
-			}
-		/>
+				}}
+				onFocus={() => {
+					search.setSearchBarFocused(true);
+					search.setFilters?.((f) => {
+						if (!f) return defaultFilters ?? [];
+						else return f;
+					});
+					search.setTarget?.(search.target ?? defaultTarget);
+					topBarCtx.setIsSearchExpanded(true);
+				}}
+				right={
+					<div className="pointer-events-none flex h-7 items-center space-x-1 opacity-70 group-focus-within:hidden">
+						{
+							<Shortcut
+								chars={keybind([ModifierKeys.Control], ['F'])}
+								aria-label={`Press ${
+									os === 'macOS' ? 'Command' : ModifierKeys.Control
+								}-F to focus search bar`}
+								className="border-none"
+							/>
+						}
+					</div>
+				}
+			/>
+		</motion.div>
 	);
 };