From dbfe9ff3837ab75b1ed3301661ca6682542f3b0f Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Wed, 1 Apr 2026 15:30:11 +0200
Subject: [PATCH] Limit size of siblings list and some bug fixes

---
 svelte/src/filesystem/Filesystem.svelte   |  6 ++++--
 svelte/src/filesystem/viewers/File.svelte |  4 ++--
 svelte/src/layout/ToggleButton.svelte     |  3 +++
 svelte/src/wrap/Bookmarks.svelte          |  3 +--
 svelte/src/wrap/MainMenu.svelte           |  1 -
 svelte/src/wrap/MenuEntry.svelte          |  2 +-
 svelte/src/wrap/Tree.svelte               | 23 ++++++++++++++++++-----
 7 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 3ace60a..1d707c6 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/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 === "textarea"
+		(
+			(document.activeElement as any).type === "text" ||
+			(document.activeElement as any).type === "textarea"
+		)
 	) {
 		return // Prevent shortcuts from interfering with input fields
 	}
diff --git a/svelte/src/filesystem/viewers/File.svelte b/svelte/src/filesystem/viewers/File.svelte
index b1e5a2e..845dce5 100644
--- a/svelte/src/filesystem/viewers/File.svelte
+++ b/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
diff --git a/svelte/src/layout/ToggleButton.svelte b/svelte/src/layout/ToggleButton.svelte
index 7fcf567..e14b543 100644
--- a/svelte/src/layout/ToggleButton.svelte
+++ b/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>
diff --git a/svelte/src/wrap/Bookmarks.svelte b/svelte/src/wrap/Bookmarks.svelte
index d77c64a..b5b4ec9 100644
--- a/svelte/src/wrap/Bookmarks.svelte
+++ b/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;
diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte
index f9b5eb5..187740a 100644
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -299,7 +299,6 @@ const set_offset = (off: number) => {
 }
 .username {
 	flex: 1 1 auto;
-	text-align: center;
 	margin: 3px;
 }
 
diff --git a/svelte/src/wrap/MenuEntry.svelte b/svelte/src/wrap/MenuEntry.svelte
index 0a2a6cc..1e2971e 100644
--- a/svelte/src/wrap/MenuEntry.svelte
+++ b/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()}
diff --git a/svelte/src/wrap/Tree.svelte b/svelte/src/wrap/Tree.svelte
index b954fe6..b90f077 100644
--- a/svelte/src/wrap/Tree.svelte
+++ b/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 {