feat: Labs interface backend

pylib/anki/config.py

@@ -37,13 +37,18 @@
 class ConfigManager:
     def __init__(self, col: anki.collection.Collection):
         self.col = col.weakref()
+        # Saved when the collection is loaded to prevent changes before restart.
+        self._experiments: dict[str, bool] = self.get_immutable("experimentalFeatures")
 
     def get_immutable(self, key: str) -> Any:
         try:
             return from_json_bytes(self.col._backend.get_config_json(key))
         except NotFoundError as exc:
             raise KeyError from exc
 
+    def experiment_enabled(self, key: str) -> bool:
+        return self._experiments.get(key, False)
+
     def set(self, key: str, val: Any) -> None:
         self.col._backend.set_config_json_no_undo(
             key=key,

qt/aqt/main.py

@@ -527,6 +527,8 @@ def _onsuccess(synced: bool) -> None:
                 onsuccess()
             if not self.safeMode:
                 self.maybe_check_for_addon_updates(self.setup_auto_update)
+            if self.col.conf.experiment_enabled("ping"):
+                showInfo("You have the \"ping\" experiment enabled")
 
         last_day_cutoff = self.col.sched.day_cutoff
 

qt/aqt/mediasrv.py

@@ -766,6 +766,9 @@ def save_custom_colours() -> bytes:
     # DeckConfigService
     "get_ignored_before_count",
     "get_retention_workload",
+    # ConfigService
+    "set_config_json",
+    "get_config_json",
 ]
 
 

qt/aqt/webview.py

@@ -143,6 +143,7 @@ def _profileForPage(self, kind: AnkiWebViewKind) -> QWebEngineProfile:
             AnkiWebViewKind.IMPORT_ANKI_PACKAGE,
             AnkiWebViewKind.IMPORT_CSV,
             AnkiWebViewKind.IMPORT_LOG,
+            AnkiWebViewKind.PREFERENCES,
         )
 
         global _profile_with_api_access, _profile_without_api_access

rslib/src/backend/config.rs

@@ -57,8 +57,14 @@ impl From<StringKeyProto> for StringKey {
 
 impl crate::services::ConfigService for Collection {
     fn get_config_json(&mut self, input: generic::String) -> Result<generic::Json> {
-        let val: Option<Value> = self.get_config_optional(input.val.as_str());
-        val.or_not_found(input.val)
+        let key = input.val.as_str();
+        let val: Option<Value> = self.get_config_optional(key);
+        let default = match key {
+            "experimentalFeatures" => Some(serde_json::from_str("{}").unwrap()),
+            _ => None,
+        };
+        val.or(default)
+            .or_not_found(key)
             .and_then(|v| serde_json::to_vec(&v).map_err(Into::into))
             .map(Into::into)
     }

ts/lib/components/Switch.svelte

@@ -20,6 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:nightMode={$pageTheme.isDark}
         bind:checked={value}
         {disabled}
+        on:input
     />
 </div>
 

ts/routes/preferences/+page.svelte

@@ -2,10 +2,14 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
-<script>
+<script lang="ts">
     import "../deck-options/deck-options-base.scss";
     import Warning from "../deck-options/Warning.svelte";
     import LabItem from "./LabItem.svelte";
+    import type { PreferenceStore } from "$lib/sveltelib/preferences";
+
+    export let data: { labPerfs: PreferenceStore<any> };
+    const labPerfs = data.labPerfs;
 </script>
 
 <div class="container">
@@ -17,13 +21,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <LabItem
             title="Svelte note editor"
             description="Replaces the legacy editor with a new Svelte-based implementation. May affect addon compatibility."
+            key="svelte-editor"
+            {labPerfs}
         ></LabItem>
-        <LabItem title="Example 2"></LabItem>
         <LabItem
-            title="Example 3"
-            description="This is a long winded description to help demonstrate the tiling of these elements. They should remain in line because I have used the css grid rather than flex boxes for easy use."
+            title="Ping"
+            description="Enable this experiment and see an alert every time you load this profile. Used for testing the experiment interface."
+            key="ping"
+            {labPerfs}
         ></LabItem>
-        <LabItem title="Example 4"></LabItem>
     </div>
 </div>
 

ts/routes/preferences/+page.ts

@@ -0,0 +1,16 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import { autoSavingPrefs } from "$lib/sveltelib/preferences";
+import type { PageLoad } from "./$types";
+import { getConfigJsonObject, setConfigJsonObject } from "./json";
+
+const CONFIG_KEY = "experimentalFeatures";
+
+export const load = (async () => {
+    const labPerfs = await autoSavingPrefs(
+        () => getConfigJsonObject(CONFIG_KEY),
+        ($config) => setConfigJsonObject(CONFIG_KEY, $config),
+    );
+
+    return { labPerfs };
+}) satisfies PageLoad;

ts/routes/preferences/LabItem.svelte

@@ -4,16 +4,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import Switch from "$lib/components/Switch.svelte";
+    import type { PreferenceStore } from "$lib/sveltelib/preferences";
 
     export let title: string;
     export let description = "";
+    export let key: string;
+    export let labPerfs: PreferenceStore<any>;
+    let value = $labPerfs[key];
+
+    function onInput(e: Event) {
+        const target = e.target as HTMLInputElement;
+        $labPerfs = { ...$labPerfs, [key]: target.checked };
+    }
 </script>
 
 <label>
     <div class="header">
         <b>{title}</b>
         <div class="switch">
-            <Switch id={title} value={false}></Switch>
+            <Switch id={title} bind:value on:input={onInput}></Switch>
         </div>
     </div>
     {description}

ts/routes/preferences/json.ts

@@ -0,0 +1,21 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import { getConfigJson, setConfigJson } from "@generated/backend";
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+export async function getConfigJsonObject(key: string) {
+    const resp = await getConfigJson({ val: key });
+    const json_string = decoder.decode(resp.json);
+    if (json_string.length > 0) {
+        return JSON.parse(json_string);
+    } else {
+        return {};
+    }
+}
+
+export async function setConfigJsonObject(key: string, value: any, undoable = false) {
+    value = JSON.stringify(value);
+    return await setConfigJson({ key, valueJson: encoder.encode(value), undoable });
+}