Replace event dispatcher with a callback in filemanager

svelte/src/wrap/Bookmarks.svelte

@@ -1,22 +1,50 @@
 <script lang="ts">
 import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
-import { fs_encode_path } from "lib/FilesystemAPI";
+import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import { highlight_current_page } from "lib/HighlightCurrentPage";
+
+let editing = $state(false)
+
+const toggle_edit = () => {
+	editing = !editing
+}
 </script>
 
+<div class="title">
+	<div class="hide_small">Bookmarks</div>
+	<button onclick={() => toggle_edit()} class:button_highlight={editing}>
+		<i class="icon">edit</i>
+	</button>
+</div>
+
 {#each $bookmarks_store as bookmark}
 	<div class="row">
 		<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
 			<i class="icon">{bookmark.icon}</i>
 			<span class="hide_small">{bookmark.label}</span>
 		</a>
-		<button onclick={() => bookmark_del(bookmark.id)}>
-			<i class="icon">delete</i>
-		</button>
+		{#if editing}
+			<button onclick={() => bookmark_del(bookmark.id)}>
+				<i class="icon">delete</i>
+			</button>
+		{/if}
 	</div>
 {/each}
 
 <style>
+.title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	border-bottom: 1px solid var(--separator);
+}
+.title > div {
+	flex: 1 1 auto;
+	text-align: center;
+}
+.title > button {
+	flex: 0 0 auto;
+}
 .row {
 	display: flex;
 	flex-direction: row;