now there are actual pages for each window

package.json

@@ -15,12 +15,13 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tauri-apps/cli": "^1.5.8",
     "@tsconfig/svelte": "^5.0.2",
     "svelte": "^4.2.8",
     "svelte-check": "^3.4.6",
+    "svelte-routing": "^2.11.0",
     "tslib": "^2.6.0",
     "typescript": "^5.0.2",
-    "vite": "^5.0.0",
-    "@tauri-apps/cli": "^1.5.8"
+    "vite": "^5.0.0"
   }
 }

src-tauri/tauri.conf.json

@@ -39,6 +39,7 @@
     "windows": [
       {
         "label": "timeline",
+        "url": "timeline",
         "maximized": false,
         "decorations": false,
         "resizable": false,
@@ -48,6 +49,7 @@
       },
       {
         "label": "search",
+        "url": "search",
         "maximized": false,
         "decorations": false,
         "resizable": false,

src/App.svelte

@@ -1,39 +1,17 @@
 <script lang="ts">
-  import Greet from './lib/Greet.svelte'
+  import { Router, Route } from 'svelte-routing';
+  import Search from './routes/search/+page.svelte';
+  import Timeline from './routes/timeline/+page.svelte';
+  import Home from './routes/+page.svelte';
 </script>
 
 <main class="container">
-  <h1>Welcome to Tauri!</h1>
-
-  <div class="row">
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo vite" alt="Vite Logo" />
-    </a>
-    <a href="https://tauri.app" target="_blank">
-      <img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank">
-      <img src="/svelte.svg" class="logo svelte" alt="Svelte Logo" />
-    </a>
-  </div>
-
-  <p>
-    Click on the Tauri, Vite, and Svelte logos to learn more.
-  </p>
-
-  <div class="row">
-    <Greet />
-  </div>
-
-
+  <Router>
+    <Route path="" component={Home} />
+    <Route path="search" component={Search} />
+    <Route path="timeline" component={Timeline} />
+  </Router>
 </main>
 
 <style>
-  .logo.vite:hover {
-    filter: drop-shadow(0 0 2em #747bff);
-  }
-
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00);
-  }
-</style>
+</style>

src/routes/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Greet from '../lib/Greet.svelte'
+</script>
+
+<main class="container">
+  <h1>Welcome to Tauri!</h1>
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="/vite.svg" class="logo vite" alt="Vite Logo" />
+    </a>
+    <a href="https://tauri.app" target="_blank">
+      <img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank">
+      <img src="/svelte.svg" class="logo svelte" alt="Svelte Logo" />
+    </a>
+  </div>
+
+  <p>
+    Click on the Tauri, Vite, and Svelte logos to learn more.
+  </p>
+
+  <div class="row">
+    <Greet />
+  </div>
+
+</main>
+
+<style>
+  .logo.vite:hover {
+    filter: drop-shadow(0 0 2em #747bff);
+  }
+
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00);
+  }
+</style>

src/routes/search/+page.svelte

@@ -0,0 +1 @@
+<h1>Search</h1>

src/routes/timeline/+page.svelte

@@ -0,0 +1 @@
+<h1>Timeline</h1>