Update

src/components/admin/pages/Edit.svelte

@@ -18,7 +18,9 @@
   -->
 
 <script lang="ts">
-    import {ArrowLeftSolid} from "flowbite-svelte-icons";
+  import { preventDefault } from 'svelte/legacy';
+
+    import {ArrowLeftOutline} from "flowbite-svelte-icons";
     import {Button, Card, Navbar, NavBrand, Spinner} from "flowbite-svelte";
     import {mapToMap, nameRegex} from "../util.ts";
     import TypeAheadSearch from "../components/TypeAheadSearch.svelte";
@@ -26,21 +28,16 @@
     import Editor from "./edit/Editor.svelte";
     import {pageRepo} from "@repo/page.ts";
 
-    $: pagesFuture = $pageRepo.listPages(selectedBranch);
 
-    let selected: number | null = null;
+    let selected: number | null = $state(null);
 
-    let selectedBranch: string = "master";
-    let searchValue: string = "";
-    let dirty = false;
+    let selectedBranch: string = $state("master");
+    let searchValue: string = $state("");
+    let dirty = $state(false);
 
-    let selectedPath: string | null = null;
-    let pathSearchValue: string = "";
+    let selectedPath: string | null = $state(null);
+    let pathSearchValue: string = $state("");
 
-    $: availableBranches = $branches.map((branch) => ({
-        name: branch,
-        value: branch
-    }));
 
     async function createBranch(name: string | null = null): Promise<string> {
         return new Promise(async (resolve) => {
@@ -139,12 +136,17 @@
             alert("Error creating page");
         }
     }
+    let pagesFuture = $derived($pageRepo.listPages(selectedBranch));
+    let availableBranches = $derived($branches.map((branch) => ({
+        name: branch,
+        value: branch
+    })));
 </script>
 
 <div class="flex flex-col h-screen overflow-scroll">
     <Navbar>
         <NavBrand href="#">
-            <ArrowLeftSolid></ArrowLeftSolid>
+            <ArrowLeftOutline></ArrowLeftOutline>
             <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
                 Edit Pages
             </span>
@@ -183,7 +185,7 @@
                                 {@const startIndex = page.path.indexOf(match)}
                                 {@const endIndex = startIndex + match.length}
                                 <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer"
-                                    on:click|preventDefault={() => changePage(page.id)}>
+                                    onclick={preventDefault(() => changePage(page.id))}>
                                     <span class:text-orange-600={selected === page.id}>{page.path.substring(0, startIndex)}</span><span
                                         class="text-white"
                                         class:!text-orange-500={selected === page.id}>{match}</span><span