fix: avoid global state, use context for savedFilters

.forgejo/workflows/ci.yaml

@@ -50,6 +50,7 @@ jobs:
         id: e2etest
         run: |
           pnpm run build -l silent
+          npx playwright install chromium
           pnpm run test:e2e
       - name: 💢 Upload E2E report
         if: ${{ failure() && steps.e2etest.conclusion == 'failure' }}

src/lib/components/filter/SavedFilters.svelte

@@ -8,12 +8,14 @@
   import { toastError, toastInfo } from "$lib/shared/util/toast";
 
   import Icon from "$lib/components/ui/Icon.svelte";
-  import { savedFilters } from "$lib/stores";
+  import { getSavedFilters } from "$lib/stores";
 
   import Chip from "./SavedFilterChip.svelte";
 
   export let view: string;
 
+  const savedFilters = getSavedFilters();
+
   $: filters = $savedFilters[view] ?? [];
 
   function getQuery(): string {

src/lib/components/table/PatientTable.svelte

@@ -37,7 +37,7 @@
         >
           <td
           ><a
-            class="btn btn-xs btn-primary"
+            class="btn btn-xs btn-primary btn-id"
             aria-label="Eintrag anzeigen"
             href="/patient/{patient.id}">{patient.id}</a
           ></td

src/lib/stores/index.ts

@@ -1,3 +1,4 @@
+import { getContext } from "svelte";
 import { derived, writable, type Writable } from "svelte/store";
 
 import type { SavedFilter } from "$lib/shared/model";
@@ -6,4 +7,6 @@ import type { SavedFilter } from "$lib/shared/model";
 export const screenWidth = writable(0);
 export const screenWidthSmall = derived(screenWidth, ($mainWidth) => $mainWidth < 500);
 
-export const savedFilters: Writable<Record<string, SavedFilter[]>> = writable({});
+// Context key: "savedFilters"
+export type SavedFilters = Writable<Record<string, SavedFilter[]>>;
+export const getSavedFilters: () => SavedFilters = () => getContext("savedFilters");

src/routes/(app)/+layout.svelte

@@ -3,16 +3,22 @@
   import type { LayoutData } from "./$types";
 
   import { mdiAccount, mdiHome } from "@mdi/js";
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   import { defaultFilterUrl, defaultVisitUrl } from "$lib/shared/util";
 
   import Icon from "$lib/components/ui/Icon.svelte";
   import NavLink from "$lib/components/ui/NavLink.svelte";
-  import { savedFilters } from "$lib/stores";
+  import type { SavedFilters } from "$lib/stores";
 
   export let data: LayoutData;
 
+  const savedFilters: SavedFilters = writable();
+
   $: savedFilters.set(data.savedFilters);
+
+  setContext("savedFilters", savedFilters);
 </script>
 
 <div class="navbar-outer">

src/routes/(app)/+page.svelte

@@ -4,9 +4,11 @@
 
   import { defaultFilterUrl } from "$lib/shared/util";
 
-  import { savedFilters } from "$lib/stores";
+  import { getSavedFilters } from "$lib/stores";
 
   export let data: PageData;
+
+  const savedFilters = getSavedFilters();
 </script>
 
 <svelte:head>

src/routes/(app)/rooms/+page.svelte

@@ -27,7 +27,7 @@
     <tbody>
       {#each data.rooms as room (room.id)}
         <tr>
-          <td><a class="btn btn-sm" href="/room/{room.id}">{room.name}</a></td>
+          <td><a class="btn btn-sm btn-id" href="/room/{room.id}">{room.name}</a></td>
           <td>{room.station.name}</td>
         </tr>
       {/each}

src/routes/(app)/stations/+page.svelte

@@ -27,7 +27,7 @@
       {#each data.stations as station (station.id)}
         <tr>
           <td>
-            <a class="btn btn-sm" href="/station/{station.id}">{station.name}</a>
+            <a class="btn btn-sm btn-id" href="/station/{station.id}">{station.name}</a>
           </td>
         </tr>
       {/each}