ui: mockup layout

src/lib/ToolBar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { beforeNavigate } from '$app/navigation';
+
   const icons = {
     back: '/icons/leftarrow.png',
     forward: '/icons/rightarrow.png',
@@ -6,13 +8,56 @@
     search: '/icons/internet.png',
     globe: '/icons/github.svg'
   };
+
+  let history: string[] = $state([]);
+  let currentIndex = $state(-1);
+
+  beforeNavigate((navigation) => {
+    if (navigation.to?.url.pathname) {
+      // Remove any forward history when navigating to a new page
+      history = history.slice(0, currentIndex + 1);
+      history.push(navigation.to.url.pathname);
+      currentIndex = history.length - 1;
+    }
+  });
+
+  function goBack() {
+    if (currentIndex > 0) {
+      currentIndex--;
+      window.history.back();
+    }
+  }
+
+  function goForward() {
+    if (currentIndex < history.length - 1) {
+      currentIndex++;
+      window.history.forward();
+    }
+  }
+
+  $effect(() => {
+    if (history.length === 0 && typeof window !== 'undefined') {
+      history = [window.location.pathname];
+      currentIndex = 0;
+    }
+  });
 </script>
 
 <div class="toolbar">
-  <button class="toolbar-button" disabled title="Back">
+  <button
+    class="toolbar-button"
+    disabled={currentIndex <= 0}
+    title="Back"
+    onclick={goBack}
+  >
     <img src={icons.back} alt="Back" />
   </button>
-  <button class="toolbar-button" disabled title="Forward">
+  <button
+    class="toolbar-button"
+    disabled={currentIndex >= history.length - 1}
+    title="Forward"
+    onclick={goForward}
+  >
     <img src={icons.forward} alt="Forward" />
   </button>