Migrate to spa-router

Author: t348575

frontend/bun.lockb

@@ -36,6 +36,7 @@
     "mode-watcher": "^0.3.0",
     "openapi-fetch": "^0.9.3",
     "svelte-sonner": "^0.3.22",
+    "svelte-spa-router": "^4.0.1",
     "tailwind-merge": "^2.2.2",
     "tailwind-variants": "^0.2.1",
     "vaul-svelte": "^0.3.0"

frontend/package.json

@@ -1,32 +1,42 @@
 <script lang="ts">
   import { ModeWatcher, toggleMode } from "mode-watcher";
   import { Sun, Moon } from "lucide-svelte";
-  import * as Tabs from "$lib/components/ui/tabs";
   import { Button } from "$lib/components/ui/button";
-  import Points from "./Points.svelte";
-  import Setup from "./Setup.svelte";
-  import Predictions from "./Predictions.svelte";
+  import Points from "./routes/Points.svelte";
+  import Setup from "./routes/Setup.svelte";
+  import Predictions from "./routes/Predictions.svelte";
   import { onMount } from "svelte";
   import { get_streamers, streamers } from "./common";
-  import Logs from "./Logs.svelte";
+  import Logs from "./routes/Logs.svelte";
+  import Router, { location } from "svelte-spa-router";
 
   onMount(async () => {
     streamers.set(await get_streamers());
   });
+
+  const routes = {
+    '/': Points,
+    '/predictions': Predictions,
+    '/setup': Setup,
+    '/logs': Logs
+  }
+
+  const tab_class = "data-[state=active]:bg-background data-[state=active]:text-foreground rounded-sm px-3 py-1.5 text-sm shadow-sm inline-flex items-center justify-center h-8";
 </script>
 
 <main class="container min-w-full min-h-full pt-4 font-sans">
   <ModeWatcher />
-  <Tabs.Root value="Points">
-    <Tabs.List>
-      <Tabs.Trigger value="Points">Points</Tabs.Trigger>
-      <Tabs.Trigger value="Predictions">Predictions</Tabs.Trigger>
-      <Tabs.Trigger value="Setup">Setup</Tabs.Trigger>
-      <Tabs.Trigger value="Logs">Logs</Tabs.Trigger>
-    </Tabs.List>
-    <div class="flex justify-between items-center">
-      <div></div>
-      <h1 class="text-4xl mb-4 inline">Twitch points miner</h1>
+  <div class="flex justify-center">
+    <div class="flex justify-start w-full">
+      <div class="bg-muted rounded-md p-1 h-10 inline-flex items-center text-muted-foreground">
+        <Button variant="ghost" class={tab_class} data-state={$location === '/' ? 'active' : 'inactive'} href="#/">Points</Button>
+        <Button variant="ghost" class={tab_class} data-state={$location === '/predictions' ? 'active' : 'inactive'} href="#/predictions">Predictions</Button>
+        <Button variant="ghost" class={tab_class} data-state={$location === '/setup' ? 'active' : 'inactive'} href="#/setup">Setup</Button>
+        <Button variant="ghost" class={tab_class} data-state={$location === '/logs' ? 'active' : 'inactive'} href="#/logs">Logs</Button>
+      </div>
+    </div>
+    <h1 class="text-4xl mb-4 w-full text-center">Twitch points miner</h1>
+    <div class="flex justify-end w-full">
       <Button
         on:click={toggleMode}
         variant="outline"
@@ -42,17 +52,6 @@
         <span class="sr-only">Toggle theme</span>
       </Button>
     </div>
-    <Tabs.Content value="Points">
-      <Points />
-    </Tabs.Content>
-    <Tabs.Content value="Predictions">
-      <Predictions />
-    </Tabs.Content>
-    <Tabs.Content value="Setup">
-      <Setup />
-    </Tabs.Content>
-    <Tabs.Content value="Logs">
-      <Logs />
-    </Tabs.Content>
-  </Tabs.Root>
+  </div>
+  <Router {routes}/>
 </main>

frontend/src/App.svelte

@@ -5,13 +5,13 @@
   import { Button } from "$lib/components/ui/button";
   import { Separator } from "$lib/components/ui/separator";
   import { Plus, X } from "lucide-svelte";
-  import DetailedStrategy from "./strategy/DetailedStrategy.svelte";
-  import { type FilterType, type ValidateStrategy } from "./common";
-  import type { components } from "./api";
+  import DetailedStrategy from "../../../strategy/DetailedStrategy.svelte";
+  import { type FilterType, type ValidateStrategy } from "../../../common";
+  import type { components } from "../../../api";
   import {
     DETAILED_STRATEGY_ODDS_COMPARISON_TYPES,
     detailed_strategy_stringify,
-  } from "./strategy/strategy";
+  } from "../../../strategy/strategy";
     import type { Selected } from "bits-ui";
 
   export let filters: FilterType[];

frontend/src/Config.svelte renamed to frontend/src/lib/components/ui/Config.svelte

@@ -9,7 +9,7 @@
     set_watch_priority,
     streamers,
     type Streamer,
-  } from "./common";
+  } from "../../../common";
   import { Menu } from "lucide-svelte";
   import { Toaster, toast } from "svelte-sonner";
   import type { Selected } from "bits-ui";

frontend/src/WatchPriority.svelte renamed to frontend/src/lib/components/ui/WatchPriority.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import * as Card from "$lib/components/ui/card";
   import { onMount } from "svelte";
-  import { get_logs } from "./common";
+  import { get_logs } from "../common";
   import { ScrollArea } from "$lib/components/ui/scroll-area";
   import { Button } from "$lib/components/ui/button";
   import { ChevronLeft, ChevronRight, RefreshCcw } from "lucide-svelte";

frontend/src/lib/components/ui/tabs/index.ts

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { components } from "./api";
+  import type { components } from "../api";
   import { Button } from "$lib/components/ui/button";
   import { Calendar } from "lucide-svelte";
   import {
@@ -22,7 +22,7 @@
   import { writable } from "svelte/store";
   import * as Select from "$lib/components/ui/select";
   import type { Selected } from "bits-ui";
-  import { get_timeline, streamers, type Streamer } from "./common";
+  import { get_timeline, streamers, type Streamer } from "../common";
   let margin = {top: 50};
 
   let streamers_name: Streamer[] = [];

frontend/src/lib/components/ui/tabs/tabs-content.svelte

@@ -12,9 +12,9 @@
     get_live_streamers,
     get_last_prediction,
     place_bet_streamer,
-  } from "./common";
+  } from "../common";
   import { get } from "svelte/store";
-  import type { components } from "./api";
+  import type { components } from "../api";
   import type { Selected } from "bits-ui";
   import { RefreshCcw } from "lucide-svelte";
 

frontend/src/lib/components/ui/tabs/tabs-list.svelte

@@ -30,11 +30,11 @@
     add_or_update_preset,
     delete_preset,
     get_watching,
-  } from "./common";
+  } from "../common";
   import { ArrowUpDown, SlidersHorizontal, X } from "lucide-svelte";
-  import Config from "./Config.svelte";
-  import type { components } from "./api";
-  import WatchPriority from "./WatchPriority.svelte";
+  import Config from "../lib/components/ui/Config.svelte";
+  import type { components } from "../api";
+  import WatchPriority from "../lib/components/ui/WatchPriority.svelte";
   import { ScrollArea } from "$lib/components/ui/scroll-area";
 
   let data = writable<Streamer[]>([]);