Move search bar into modal

svelte/src/filesystem/Filesystem.svelte

@@ -10,6 +10,7 @@ import { global_navigator } from "./FSNavigator"
 import { css_from_path } from "filesystem/edit_window/Branding";
 import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
 import { current_page_store } from "wrap/RouterStore";
+import SearchBar from "./SearchBar.svelte";
 
 let file_preview: FilePreview = $state()
 let toolbar: Toolbar = $state()
@@ -18,6 +19,7 @@ let details_visible = $state(false)
 let edit_window: EditWindow = $state()
 let edit_visible = $state(false)
 let details_window: DetailsWindow = $state()
+let search_bar: SearchBar = $state()
 
 const nav = global_navigator
 
@@ -85,6 +87,9 @@ const keydown = (e: KeyboardEvent) => {
 		case "r":
 			nav.shuffle = !nav.shuffle
 			break;
+		case "/":
+			search_bar.open()
+			break;
 		case "a":
 		case "ArrowLeft":
 			nav.open_sibling(-1)
@@ -146,6 +151,7 @@ const keydown = (e: KeyboardEvent) => {
 			upload_widget={upload_widget}
 			edit_window={edit_window}
 			details_window={details_window}
+			search_bar={search_bar}
 		/>
 	</div>
 
@@ -158,6 +164,8 @@ const keydown = (e: KeyboardEvent) => {
 	/>
 </div>
 
+<SearchBar bind:this={search_bar} nav={nav}/>
+
 <DetailsWindow nav={nav} bind:this={details_window} bind:visible={details_visible} />
 
 <EditWindow nav={nav} bind:this={edit_window} bind:visible={edit_visible} />
@@ -183,8 +191,7 @@ const keydown = (e: KeyboardEvent) => {
 .filesystem {
 	display: flex;
 	flex-direction: column;
-	height: 100vh;
-	width: 100%;
+	flex: 1 1 auto; /* auto grow */
 }
 
 .file_preview {