Hook up cardCountsSeparateInactive to PreferenceStore

ts/graphs/CardCounts.svelte

@@ -2,13 +2,16 @@
     import { defaultGraphBounds } from "./graph-helpers";
     import { gatherData, renderCards } from "./card-counts";
     import type { GraphData, TableDatum } from "./card-counts";
+    import type { PreferenceStore } from "./preferences";
     import type pb from "anki/backend_proto";
     import type { I18n } from "anki/i18n";
     import SeparateInactiveCheckbox from "./SeparateInactiveCheckbox.svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut;
     export let i18n: I18n;
+    export let preferences: PreferenceStore;
 
+    let { cardCountsSeparateInactive } = preferences;
     let svg = null as HTMLElement | SVGElement | null;
 
     let bounds = defaultGraphBounds();
@@ -17,10 +20,9 @@
 
     let graphData = (null as unknown) as GraphData;
     let tableData = (null as unknown) as TableDatum[];
-    let cardCountsSeparateInactive = false;
 
     $: {
-        graphData = gatherData(sourceData, cardCountsSeparateInactive, i18n);
+        graphData = gatherData(sourceData, $cardCountsSeparateInactive, i18n);
         tableData = renderCards(svg as any, bounds, graphData);
     }
 
@@ -56,7 +58,7 @@
     <h1>{graphData.title}</h1>
 
     <div class="range-box-inner">
-        <SeparateInactiveCheckbox {i18n} bind:cardCountsSeparateInactive />
+        <SeparateInactiveCheckbox {i18n} {cardCountsSeparateInactive} />
     </div>
 
     <div class="counts-outer">

ts/graphs/GraphsPage.svelte

@@ -62,6 +62,7 @@
             <svelte:component
                 this={graph}
                 {sourceData}
+                {preferences}
                 {revlogRange}
                 {i18n}
                 {nightMode} />

ts/graphs/SeparateInactiveCheckbox.svelte

@@ -1,13 +1,14 @@
 <script lang="typescript">
     import type { I18n } from "anki/i18n";
+    import type { CustomStore } from "./preferences";
 
     export let i18n: I18n;
-    export let cardCountsSeparateInactive: boolean;
+    export let cardCountsSeparateInactive: CustomStore<boolean>;
 
     const label = i18n.tr(i18n.TR.STATISTICS_COUNTS_SEPARATE_SUSPENDED_BURIED_CARDS);
 </script>
 
 <label>
-    <input type="checkbox" bind:checked={cardCountsSeparateInactive} />
+    <input type="checkbox" bind:checked={$cardCountsSeparateInactive} />
     {label}
 </label>

ts/graphs/preferences.ts

@@ -1,11 +1,10 @@
 import { getGraphPreferences } from "./graph-helpers";
-import { writable } from "svelte/store";
+import { writable, get } from "svelte/store";
 import type pb from "anki/backend_proto";
 
-interface CustomStore<T> {
+export interface CustomStore<T> {
     subscribe: (getter: (value: T) => void) => () => void;
     set: (value: T) => void;
-    get: () => T;
 }
 
 export type PreferenceStore = {
@@ -26,11 +25,6 @@ function createPreference<T>(
             set(v);
             savePreferences();
         },
-        get: (): T => {
-            let result: any /* T */;
-            subscribe((value: T) => (result = value))();
-            return result;
-        },
     };
 }
 
@@ -43,7 +37,7 @@ function preparePreferences(
     function constructPreferences(): pb.BackendProto.GraphsPreferencesOut {
         const payload: Partial<pb.BackendProto.GraphsPreferencesOut> = {};
         for (const [key, pref] of Object.entries(preferences as PreferenceStore)) {
-            payload[key] = pref.get();
+            payload[key] = get(pref as any);
         }
         return payload as pb.BackendProto.GraphsPreferencesOut;
     }