Create search and days writable in GraphsPage to allow browserSearch to work

ts/graphs/BrowserSearch.svelte

@@ -1,10 +0,0 @@
-<script lang="typescript">
-    import { bridgeCommand } from "anki/bridgecommand";
-
-    export let search: Readable<string>;
-    export let query: string;
-
-    $: {
-        bridgeCommand(`browserSearch: ${$search} ${query}`);
-    }
-</script>

ts/graphs/GraphsPage.svelte

@@ -2,10 +2,11 @@
     import "../sass/core.css";
 
     import type { SvelteComponent } from "svelte/internal";
+    import { writable } from "svelte/store";
     import type { I18n } from "anki/i18n";
+    import { bridgeCommand } from "anki/bridgecommand";
 
     import WithGraphData from "./WithGraphData.svelte";
-    import BrowserSearch from "./BrowserSearch.svelte";
 
     export let i18n: I18n;
     export let nightMode: boolean;
@@ -15,11 +16,12 @@
     export let initialDays: number;
     export let controller: SvelteComponent | null;
 
-    let query: string;
+    const search = writable(initialSearch);
+    const days = writable(initialDays);
 
-    const activateBrowserSearch = (event: CustomEvent): void => {
+    function browserSearch(event: CustomEvent) {
-        query = event.detail.query;
+        bridgeCommand(`browserSearch: ${$search} ${event.detail.query}`);
-    };
+    }
 </script>
 
 <style lang="scss">
@@ -32,10 +34,8 @@
 
 <div>
     <WithGraphData
-        {initialSearch}
+        {search}
-        {initialDays}
+        {days}
-        let:search
-        let:days
         let:loading
         let:sourceData
         let:preferences
@@ -53,10 +53,8 @@
                     {revlogRange}
                     {i18n}
                     {nightMode}
-                    on:search={activateBrowserSearch} />
+                    on:search={browserSearch} />
             {/each}
         {/if}
-
-        <BrowserSearch {search} {query} />
     </WithGraphData>
 </div>

ts/graphs/RangeBox.svelte

@@ -20,7 +20,8 @@
     export let search: Writable<string>;
 
     let revlogRange = daysToRevlogRange($days);
-    let searchRange = $search === "deck:current"
+    let searchRange =
+        $search === "deck:current"
             ? SearchRange.Deck
             : $search === ""
             ? SearchRange.Collection

ts/graphs/WithGraphData.svelte

@@ -1,52 +1,40 @@
 <script lang="typescript">
-    import { onMount } from "svelte";
-    import { writable } from "svelte/store";
     import useAsync from "./async";
     import useAsyncReactive from "./asyncReactive";
 
     import { getGraphData, RevlogRange, daysToRevlogRange } from "./graph-helpers";
     import { getPreferences } from "./preferences";
 
-    export let initialSearch: string;
+    export let search: Writable<string>;
-    export let initialDays: number;
+    export let days: Writable<number>;
-
-    const search = writable(initialSearch);
-    const days = writable(initialDays);
 
     const {
         loading: graphLoading,
         error: graphError,
         value: graphValue,
-    } = useAsyncReactive(() => getGraphData($search, $days), [
+    } = useAsyncReactive(() => getGraphData($search, $days), [search, days]);
-        search,
-        days,
-    ]);
 
     const preferencesPromise = getPreferences();
-    const {
+    const { loading: prefsLoading, error: prefsError, value: prefsValue } = useAsync(
-        loading: prefsLoading,
+        () => preferencesPromise
-        error: prefsError,
+    );
-        value: prefsValue,
-    } = useAsync(() => preferencesPromise);
 
     $: revlogRange = daysToRevlogRange($days);
 
     $: {
         if ($graphError) {
-            alert($graphError)
+            alert($graphError);
         }
     }
 
     $: {
         if ($prefsError) {
-            alert($prefsError)
+            alert($prefsError);
         }
     }
 </script>
 
 <slot
-    {search}
-    {days}
     {revlogRange}
     loading={$graphLoading || $prefsLoading}
     sourceData={$graphValue}

ts/graphs/asyncReactive.ts

@@ -11,7 +11,11 @@ function useAsyncReactive<T, E>(
     asyncFunction: () => Promise<T>,
     dependencies: [Readable<unknown>, ...Readable<unknown>[]]
 ): AsyncReativeData<T, E> {
-    const promise = derived(dependencies, (_, set) => set(asyncFunction()), asyncFunction());
+    const promise = derived(
+        dependencies,
+        (_, set) => set(asyncFunction()),
+        asyncFunction()
+    );
 
     const value = derived(
         promise,