Limit size of siblings list and some bug fixes

svelte/src/filesystem/Filesystem.svelte

@@ -56,8 +56,10 @@ const keydown = (e: KeyboardEvent) => {
 		return // prevent custom shortcuts from interfering with system shortcuts
 	} else if (
 		(document.activeElement as any).type !== undefined &&
-		(document.activeElement as any).type === "text" &&
+		(
+			(document.activeElement as any).type === "text" ||
 			(document.activeElement as any).type === "textarea"
+		)
 	) {
 		return // Prevent shortcuts from interfering with input fields
 	}

svelte/src/filesystem/viewers/File.svelte

@@ -34,7 +34,7 @@ let {
 	</button>
 </IconBlock>
 
-{#if node.name === ".search_index.gz"}
+{#if node.name === ".search_index.zstd"}
 	<TextBlock>
 		<p>
 			Congratulations! You have found the search index. One of the
@@ -50,7 +50,7 @@ let {
 			have a lot of repetitive elements it compresses incredibly well.
 			You'd be hard-pressed to grow this index over even 1 MB. Honestly,
 			this search system is incredibly efficient, I'd be surprised if
-			EleasticSearch could even match it.
+			ElasticSearch could even match it.
 		</p>
 		<p>
 			This file is updated 10 minutes after the last time you modify a

svelte/src/layout/ToggleButton.svelte

@@ -7,6 +7,7 @@ let {
 	group_middle = false,
 	group_last = false,
 	highlight = true,
+	flat = false,
 	action,
 	children,
 }: {
@@ -17,6 +18,7 @@ let {
 	group_middle?: boolean;
 	group_last?: boolean;
 	highlight?: boolean;
+	flat?: boolean;
 	action?: (e: MouseEvent) => void;
 	children?: import('svelte').Snippet;
 } = $props();
@@ -37,6 +39,7 @@ const click = (e: MouseEvent) => {
 	class:group_first
 	class:group_middle
 	class:group_last
+	class:flat
 >
 	{#if on}
 		<i class="icon">{icon_on}</i>

svelte/src/wrap/Bookmarks.svelte

@@ -79,7 +79,7 @@ const drop = (e: DragEvent, drop_idx: number) => {
 	<MenuEntry id="bookmarks" collapsed={menu_collapsed}>
 		{#snippet title()}
 			<div class="title">Bookmarks</div>
-			<button onclick={toggle_edit} class:button_highlight={editing}>
+			<button onclick={toggle_edit} class:button_highlight={editing} class="button flat">
 				{#if editing}
 					<i class="icon">save</i>
 				{:else}
@@ -129,7 +129,6 @@ const drop = (e: DragEvent, drop_idx: number) => {
 <style>
 .title {
 	flex: 1 1 auto;
-	text-align: center;
 }
 .row {
 	display: flex;

svelte/src/wrap/MainMenu.svelte

@@ -299,7 +299,6 @@ const set_offset = (off: number) => {
 }
 .username {
 	flex: 1 1 auto;
-	text-align: center;
 	margin: 3px;
 }
 

svelte/src/wrap/MenuEntry.svelte

@@ -44,7 +44,7 @@ const toggle = (e: MouseEvent) => {
 </script>
 
 <div class="title">
-	<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_drop_up" highlight={false}/>
+	<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_drop_up" highlight={false} flat/>
 
 	{#if !collapsed}
 		{@render title()}

svelte/src/wrap/Tree.svelte

@@ -10,7 +10,21 @@ let siblings: FSNode[] = $state([])
 
 onMount(() => {
 	return global_navigator.subscribe(async () => {
-		siblings = await global_navigator.get_siblings()
+		const all_siblings = await global_navigator.get_siblings()
+
+		// Find the base
+		let base_idx = 0
+		for (let i = 0; i < all_siblings.length; i++) {
+			if (global_navigator.base.id === all_siblings[i].id) {
+				base_idx = i
+				break
+			}
+		}
+
+		siblings = all_siblings.slice(
+			Math.max(base_idx-50,0),
+			Math.min(base_idx+50, all_siblings.length),
+		)
 	})
 })
 </script>
@@ -18,7 +32,7 @@ onMount(() => {
 <MenuEntry id="tree_parents" collapsed={menu_collapsed}>
 	{#snippet title()}
 		<div class="title">Parent directories</div>
-		<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
+		<button title="Navigate up" onclick={() => global_navigator.navigate_up()} class="button flat">
 			<i class="icon">north</i>
 		</button>
 	{/snippet}
@@ -40,10 +54,10 @@ onMount(() => {
 <MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
 	{#snippet title()}
 		<div class="title">Siblings</div>
-	<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
+	<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)} class="button flat">
 		<i class="icon">west</i>
 	</button>
-	<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
+	<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)} class="button flat">
 		<i class="icon">east</i>
 	</button>
 	{/snippet}
@@ -65,7 +79,6 @@ onMount(() => {
 <style>
 .title {
 	flex: 1 1 auto;
-	text-align: center;
 	margin: 3px;
 }
 .row {