Pass selected notetype/deck to editor

ts/lib/components/DeckChooser.svelte

@@ -9,8 +9,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { DeckNameId } from "@generated/anki/decks_pb";
     import * as tr from "@generated/ftl";
 
+    interface Props {
+        selectedDeck: DeckNameId | null;
+        onChange?: (deck: DeckNameId) => void;
+    }
+    let {selectedDeck = $bindable(null), onChange}: Props = $props();
     let decks: DeckNameId[] = $state([]);
-    let selectedDeck: DeckNameId | null = $state(null);
 
     $effect(() => {
         getDeckNames({ skipEmptyDefault: true, includeFiltered: false }).then(
@@ -24,6 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <ItemChooser
     title={tr.qtMiscChooseDeck()}
     bind:selectedItem={selectedDeck}
+    {onChange}
     items={decks}
     icon={mdiBookOutline}
 />

ts/lib/components/ItemChooser.svelte

@@ -2,7 +2,7 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
-<script lang="ts">
+<script lang="ts" generics="Item extends { id: bigint, name: string }">
     import { magnifyIcon, mdiClose } from "./icons";
     import Icon from "./Icon.svelte";
     import IconConstrain from "./IconConstrain.svelte";
@@ -10,10 +10,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Modal from "./Modal.svelte";
     import type { IconData } from "./types";
     import * as tr from "@generated/ftl";
-    interface Item {
-        id: bigint;
-        name: string;
-    }
 
     interface Props {
         title: string;

ts/lib/components/NotetypeChooser.svelte

@@ -10,8 +10,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ItemChooser from "./ItemChooser.svelte";
     import * as tr from "@generated/ftl";
 
+    interface Props {
+        selectedNotetype: NotetypeNameId | null;
+        onChange?: (notetype: NotetypeNameId) => void;
+    }
+    let {selectedNotetype = $bindable(null), onChange}: Props = $props();
     let notetypes: NotetypeNameId[] = $state([]);
-    let selectedNotetype: NotetypeNameId | null = $state(null);
 
     $effect(() => {
         getNotetypeNames({}).then((response) => {
@@ -23,6 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <ItemChooser
     title={tr.qtMiscChooseNoteType()}
     bind:selectedItem={selectedNotetype}
+    {onChange}
     items={notetypes}
     icon={mdiNewspaper}
 />

ts/routes/editor/NoteEditor.svelte

@@ -15,6 +15,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import LabelName from "./LabelName.svelte";
     import { EditorState, type EditorMode } from "./types";
     import { ContextMenu, Item } from "$lib/context-menu";
+    import type { NotetypeNameId } from "@generated/anki/notetypes_pb";
+    import type { DeckNameId } from "@generated/anki/decks_pb";
 
     export interface NoteEditorAPI {
         fields: EditorFieldAPI[];
@@ -295,6 +297,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         clearCodeMirrorHistory();
     }
 
+    export let selectedNotetype: NotetypeNameId | null = null;
+    export let selectedDeck: DeckNameId | null = null;
+
+
+    function onNotetypeChange(notetype: NotetypeNameId) {
+        loadNote(0n, notetype.id, 0, null);
+    }
+
+    function onDeckChange(deck: DeckNameId) {
+        selectedDeck = deck;
+    }
     let notetypeMeta: NotetypeIdAndModTime;
     function setNotetypeMeta(notetype: Notetype): void {
         notetypeMeta = { id: notetype.id, modTime: notetype.mtimeSecs };
@@ -444,8 +457,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     async function onAdd() {
-        // TODO get selected deck
-        await addCurrentNote(1n);
+        await addCurrentNote(selectedDeck!.id);
     }
 
     let historyModal: Modal;
@@ -1196,7 +1208,7 @@ components and functionality for general note editing.
     on:dragover={preventDefaultIfNonLegacy}
     on:drop={checkNonLegacy(handlePickerDrop)}
 >
-    <EditorChoosers />
+    <EditorChoosers bind:selectedNotetype bind:selectedDeck onNotetypeChange={onNotetypeChange} />
 
     <EditorToolbar {size} {wrap} api={toolbar}>
         <svelte:fragment slot="notetypeButtons">

ts/routes/editor/editor-toolbar/EditorChoosers.svelte

@@ -6,18 +6,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import NotetypeChooser from "$lib/components/NotetypeChooser.svelte";
     import DeckChooser from "$lib/components/DeckChooser.svelte";
+    import type { NotetypeNameId } from "@generated/anki/notetypes_pb";
+    import type { DeckNameId } from "@generated/anki/decks_pb";
     import * as tr from "@generated/ftl";
 
+    interface Props {
+        selectedNotetype: NotetypeNameId | null;
+        selectedDeck: DeckNameId | null;
+        onNotetypeChange?: (notetype: NotetypeNameId) => void;
+        onDeckChange?: (deck: DeckNameId) => void;
+    }
+    let {selectedNotetype = $bindable(null), selectedDeck = $bindable(null), onNotetypeChange, onDeckChange}: Props = $props();
+
 </script>
 
 <div class="top-bar">
     <p>{tr.notetypesType()}</p>
     <div class="notetype-chooser">
-        <NotetypeChooser/>
+        <NotetypeChooser bind:selectedNotetype onChange={onNotetypeChange} />
     </div>
     <p>{tr.decksDeck()}</p>
     <div class="deck-chooser">
-        <DeckChooser/>
+        <DeckChooser bind:selectedDeck onChange={onDeckChange} />
     </div>
 </div>