From 412091ae60892b4635ed4aaaaae63444a19a6f24 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 25 May 2021 15:30:43 +0200
Subject: [PATCH 1/4] Inline some bootstrap-dark styling

---
 ts/deckoptions/BUILD.bazel           |  1 +
 ts/deckoptions/TextInputModal.svelte | 19 +++++++++++++++++--
 ts/deckoptions/textInputModal.ts     | 13 +++++++++++--
 ts/sass/bootstrap-dark.scss          |  9 ---------
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/ts/deckoptions/BUILD.bazel b/ts/deckoptions/BUILD.bazel
index a6a9119c3..b4ab8312e 100644
--- a/ts/deckoptions/BUILD.bazel
+++ b/ts/deckoptions/BUILD.bazel
@@ -70,6 +70,7 @@ ts_library(
         "//ts/lib",
         "//ts/lib:backend_proto",
         "//ts/sveltelib",
+        "//ts/components",
         "@npm//lodash-es",
         "@npm//svelte",
     ],
diff --git a/ts/deckoptions/TextInputModal.svelte b/ts/deckoptions/TextInputModal.svelte
index 7f199a655..d1f24cd02 100644
--- a/ts/deckoptions/TextInputModal.svelte
+++ b/ts/deckoptions/TextInputModal.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     /* eslint
     @typescript-eslint/no-non-null-assertion: "off",
     */
-    import { onMount, onDestroy } from "svelte";
+    import { onMount, onDestroy, getContext } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
     import Modal from "bootstrap/js/dist/modal";
 
     export let title: string;
@@ -44,16 +45,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         container.removeEventListener("shown.bs.modal", onShown);
         container.removeEventListener("hidden.bs.modal", onHidden);
     });
+
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
+<style lang="scss">
+    .default-colors {
+        background-color: var(--window-bg);
+        color: var(--text-fg);
+    }
+
+    .invert {
+        filter: invert(1) grayscale(100%) brightness(200%);
+    }
+</style>
+
 <div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
     <div class="modal-dialog">
-        <div class="modal-content">
+        <div class="modal-content" class:default-colors={nightMode}>
             <div class="modal-header">
                 <h5 class="modal-title" id="modalLabel">{title}</h5>
                 <button
                     type="button"
                     class="btn-close"
+                    class:invert={nightMode}
                     data-bs-dismiss="modal"
                     aria-label="Close" />
             </div>
diff --git a/ts/deckoptions/textInputModal.ts b/ts/deckoptions/textInputModal.ts
index 2e1b26e1a..04ef8d6b0 100644
--- a/ts/deckoptions/textInputModal.ts
+++ b/ts/deckoptions/textInputModal.ts
@@ -7,17 +7,26 @@
 
 import TextInputModal from "./TextInputModal.svelte";
 
+import { checkNightMode } from "lib/nightmode";
+import { nightModeKey } from "components/contextKeys";
+
 export interface TextInputModalProps {
     title: string;
     prompt: string;
     startingValue?: string;
-    onOk: (string) => void;
+    onOk: (text: string) => void;
 }
 
 export function textInputModal(props: TextInputModalProps): TextInputModal {
     const target = document.getElementById("modal")!;
+
+    const nightMode = checkNightMode();
+    const context = new Map();
+    context.set(nightModeKey, nightMode);
+
     return new TextInputModal({
         target,
         props,
-    });
+        context,
+    } as any);
 }
diff --git a/ts/sass/bootstrap-dark.scss b/ts/sass/bootstrap-dark.scss
index 8a03737a2..716119f94 100644
--- a/ts/sass/bootstrap-dark.scss
+++ b/ts/sass/bootstrap-dark.scss
@@ -14,13 +14,4 @@
             background-color: var(--window-bg);
         }
     }
-
-    .modal-content {
-        background-color: var(--window-bg);
-        color: var(--text-fg);
-    }
-
-    .btn-close {
-        filter: invert(1) grayscale(100%) brightness(200%);
-    }
 }

From 5cc6fc7d9be75c8b681d0688faed945589d1593f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 25 May 2021 18:54:58 +0200
Subject: [PATCH 2/4] Use TextInputModal directly from svelte component

* the only important thing is that it is not positioned within elements
  with display: none
* I think we can treat the existence of the modal to be a kind of
  "precondition" that has to be met for the component to be used
---
 ts/components/contextKeys.ts          |  1 +
 ts/deckoptions/BUILD.bazel            |  2 --
 ts/deckoptions/ConfigSelector.svelte  | 31 ++++++++++++++++--
 ts/deckoptions/DeckOptionsPage.svelte | 18 +----------
 ts/deckoptions/SaveButton.svelte      | 43 ++++++++++---------------
 ts/deckoptions/TextInputModal.svelte  | 46 ++++++++++++++-------------
 ts/deckoptions/index.ts               |  5 ++-
 ts/deckoptions/textInputModal.ts      | 32 -------------------
 8 files changed, 76 insertions(+), 102 deletions(-)
 delete mode 100644 ts/deckoptions/textInputModal.ts

diff --git a/ts/components/contextKeys.ts b/ts/components/contextKeys.ts
index 10979427f..008569399 100644
--- a/ts/components/contextKeys.ts
+++ b/ts/components/contextKeys.ts
@@ -6,3 +6,4 @@ export const disabledKey = Symbol("disabled");
 export const buttonToolbarKey = Symbol("buttonToolbar");
 export const buttonGroupKey = Symbol("buttonGroup");
 export const dropdownKey = Symbol("dropdown");
+export const modalsKey = Symbol("modals");
diff --git a/ts/deckoptions/BUILD.bazel b/ts/deckoptions/BUILD.bazel
index b4ab8312e..ce2c723ee 100644
--- a/ts/deckoptions/BUILD.bazel
+++ b/ts/deckoptions/BUILD.bazel
@@ -61,11 +61,9 @@ ts_library(
         "lib.ts",
         "steps.ts",
         "strings.ts",
-        "textInputModal.ts",
     ],
     module_name = "deckoptions",
     deps = [
-        "TextInputModal",
         "//ts:image_module_support",
         "//ts/lib",
         "//ts/lib:backend_proto",
diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deckoptions/ConfigSelector.svelte
index 836f53559..d75918f05 100644
--- a/ts/deckoptions/ConfigSelector.svelte
+++ b/ts/deckoptions/ConfigSelector.svelte
@@ -6,8 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import type { DeckOptionsState, ConfigListEntry } from "./lib";
 
-    import WithTheming from "components/WithTheming.svelte";
+    import TextInputModal from "./TextInputModal.svelte";
     import StickyBar from "components/StickyBar.svelte";
+    import WithTheming from "components/WithTheming.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
     import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
@@ -20,6 +21,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let state: DeckOptionsState;
     let configList = state.configList;
 
+    let addModalKey: string;
+    let renameModalKey: string;
+
     function configLabel(entry: ConfigListEntry): string {
         const count = tr.deckConfigUsedByDecks({ decks: entry.useCount });
         return `${entry.name} (${count})`;
@@ -28,8 +32,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function blur(event: Event): void {
         state.setCurrentIndex(parseInt((event.target! as HTMLSelectElement).value));
     }
+
+    function onAddConfig(text: string): void {
+        const trimmed = text.trim();
+        if (trimmed.length) {
+            state.addConfig(trimmed);
+        }
+    }
+
+    function onRenameConfig(text: string): void {
+        state.setCurrentName(text);
+    }
 </script>
 
+<TextInputModal
+    title="Add Config"
+    prompt="Name"
+    onOk={onAddConfig}
+    bind:modalKey={addModalKey} />
+<TextInputModal
+    title="Rename Config"
+    prompt="Name"
+    onOk={onRenameConfig}
+    value={state.getCurrentName()}
+    bind:modalKey={renameModalKey} />
+
 <StickyBar>
     <WithTheming style="--toolbar-size: 2.3rem; --toolbar-wrap: nowrap">
         <ButtonToolbar class="justify-content-between">
@@ -50,7 +77,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </ButtonToolbarItem>
 
             <ButtonToolbarItem>
-                <SaveButton {state} />
+                <SaveButton {state} {addModalKey} {renameModalKey} />
             </ButtonToolbarItem>
         </ButtonToolbar>
     </WithTheming>
diff --git a/ts/deckoptions/DeckOptionsPage.svelte b/ts/deckoptions/DeckOptionsPage.svelte
index 809c93bda..32eacae6d 100644
--- a/ts/deckoptions/DeckOptionsPage.svelte
+++ b/ts/deckoptions/DeckOptionsPage.svelte
@@ -41,21 +41,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onDestroy(() => registerCleanup?.());
 </script>
 
-<style lang="scss">
-    .editor {
-        // without this, the initial viewport can be wrong
-        overflow-x: hidden;
-    }
-</style>
-
 <ConfigSelector {state} />
-
-<div>
-    <div id="modal">
-        <!-- filled in later-->
-    </div>
-
-    <div class="editor">
-        <ConfigEditor {state} />
-    </div>
-</div>
+<ConfigEditor {state} />
diff --git a/ts/deckoptions/SaveButton.svelte b/ts/deckoptions/SaveButton.svelte
index 9bc6d1f31..28a79dc5a 100644
--- a/ts/deckoptions/SaveButton.svelte
+++ b/ts/deckoptions/SaveButton.svelte
@@ -4,8 +4,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import { textInputModal } from "./textInputModal";
+    import { modalsKey } from "components/contextKeys";
+    import { getContext } from "svelte";
     import type { DeckOptionsState } from "./lib";
+    import type Modal from "bootstrap/js/dist/modal";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -18,29 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let state: DeckOptionsState;
 
-    function addConfig(): void {
-        textInputModal({
-            title: "Add Config",
-            prompt: "Name:",
-            onOk: (text: string) => {
-                const trimmed = text.trim();
-                if (trimmed.length) {
-                    state.addConfig(trimmed);
-                }
-            },
-        });
-    }
-
-    function renameConfig(): void {
-        textInputModal({
-            title: "Rename Config",
-            prompt: "Name:",
-            startingValue: state.getCurrentName(),
-            onOk: (text: string) => {
-                state.setCurrentName(text);
-            },
-        });
-    }
+    const modals = getContext<Map<string, Modal>>(modalsKey);
 
     function removeConfig(): void {
         // show pop-up after dropdown has gone away
@@ -67,6 +47,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function save(applyToChildDecks: boolean): void {
         state.save(applyToChildDecks);
     }
+
+    export let addModalKey: string;
+    export let renameModalKey: string;
+
+    function showAddModal() {
+        modals.get(addModalKey)!.show();
+    }
+
+    function showRenameModal() {
+        modals.get(renameModalKey)!.show();
+    }
 </script>
 
 <ButtonGroup>
@@ -78,8 +69,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
             <LabelButton on:mount={createDropdown} on:click={activateDropdown} />
             <DropdownMenu id={menuId}>
-                <DropdownItem on:click={addConfig}>Add Config</DropdownItem>
-                <DropdownItem on:click={renameConfig}>Rename Config</DropdownItem>
+                <DropdownItem on:click={showAddModal}>Add Config</DropdownItem>
+                <DropdownItem on:click={showRenameModal}>Rename Config</DropdownItem>
                 <DropdownItem on:click={removeConfig}>Remove Config</DropdownItem>
                 <DropdownDivider />
                 <DropdownItem on:click={() => save(true)}>
diff --git a/ts/deckoptions/TextInputModal.svelte b/ts/deckoptions/TextInputModal.svelte
index d1f24cd02..e694f8736 100644
--- a/ts/deckoptions/TextInputModal.svelte
+++ b/ts/deckoptions/TextInputModal.svelte
@@ -7,43 +7,40 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @typescript-eslint/no-non-null-assertion: "off",
     */
     import { onMount, onDestroy, getContext } from "svelte";
-    import { nightModeKey } from "components/contextKeys";
+    import { nightModeKey, modalsKey } from "components/contextKeys";
     import Modal from "bootstrap/js/dist/modal";
 
     export let title: string;
     export let prompt: string;
-    export let startingValue = "";
+    export let value = "";
     export let onOk: (text: string) => void;
 
-    let inputRef: HTMLInputElement;
+    export const modalKey: string = Math.random().toString(36).substring(2);
+
+    const modals = getContext<Map<string, Modal>>(modalsKey);
+
+    let modalRef: HTMLDivElement;
     let modal: Modal;
 
-    function onShown(): void {
-        inputRef.focus();
-    }
-
-    function onHidden(): void {
-        const container = document.getElementById("modal")!;
-        container.removeChild(container.firstElementChild!);
-    }
+    let inputRef: HTMLInputElement;
 
     function onOkClicked(): void {
         onOk(inputRef.value);
         modal.hide();
     }
 
+    function onShown(): void {
+        inputRef.focus();
+    }
+
     onMount(() => {
-        const container = document.getElementById("modal")!;
-        container.addEventListener("shown.bs.modal", onShown);
-        container.addEventListener("hidden.bs.modal", onHidden);
-        modal = new Modal(container.firstElementChild!, {});
-        modal.show();
+        modalRef.addEventListener("shown.bs.modal", onShown);
+        modal = new Modal(modalRef);
+        modals.set(modalKey, modal);
     });
 
     onDestroy(() => {
-        const container = document.getElementById("modal")!;
-        container.removeEventListener("shown.bs.modal", onShown);
-        container.removeEventListener("hidden.bs.modal", onHidden);
+        modalRef.removeEventListener("shown.bs.modal", onShown);
     });
 
     const nightMode = getContext<boolean>(nightModeKey);
@@ -60,7 +57,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+<div
+    bind:this={modalRef}
+    class="modal fade"
+    tabindex="-1"
+    aria-labelledby="modalLabel"
+    aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content" class:default-colors={nightMode}>
             <div class="modal-header">
@@ -77,13 +79,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     <div class="mb-3">
                         <label
                             for="prompt-input"
-                            class="col-form-label">{prompt}</label>
+                            class="col-form-label">{prompt}:</label>
                         <input
                             id="prompt-input"
                             bind:this={inputRef}
                             type="text"
                             class="form-control"
-                            value={startingValue} />
+                            bind:value />
                     </div>
                 </form>
             </div>
diff --git a/ts/deckoptions/index.ts b/ts/deckoptions/index.ts
index fd622204f..8cf110c8c 100644
--- a/ts/deckoptions/index.ts
+++ b/ts/deckoptions/index.ts
@@ -14,7 +14,7 @@ import SpinBoxFloat from "./SpinBoxFloat.svelte";
 import EnumSelector from "./EnumSelector.svelte";
 import CheckBox from "./CheckBox.svelte";
 
-import { nightModeKey } from "components/contextKeys";
+import { nightModeKey, modalsKey } from "components/contextKeys";
 
 export async function deckOptions(
     target: HTMLDivElement,
@@ -35,6 +35,9 @@ export async function deckOptions(
     const context = new Map();
     context.set(nightModeKey, nightMode);
 
+    const modals = new Map();
+    context.set(modalsKey, modals);
+
     const state = new DeckOptionsState(deckId, info);
     return new DeckOptionsPage({
         target,
diff --git a/ts/deckoptions/textInputModal.ts b/ts/deckoptions/textInputModal.ts
deleted file mode 100644
index 04ef8d6b0..000000000
--- a/ts/deckoptions/textInputModal.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-/* eslint
-@typescript-eslint/no-non-null-assertion: "off",
- */
-
-import TextInputModal from "./TextInputModal.svelte";
-
-import { checkNightMode } from "lib/nightmode";
-import { nightModeKey } from "components/contextKeys";
-
-export interface TextInputModalProps {
-    title: string;
-    prompt: string;
-    startingValue?: string;
-    onOk: (text: string) => void;
-}
-
-export function textInputModal(props: TextInputModalProps): TextInputModal {
-    const target = document.getElementById("modal")!;
-
-    const nightMode = checkNightMode();
-    const context = new Map();
-    context.set(nightModeKey, nightMode);
-
-    return new TextInputModal({
-        target,
-        props,
-        context,
-    } as any);
-}

From c074ca9159fe50bcb0a3414ba7da7e01b7e4cb5c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 25 May 2021 19:18:25 +0200
Subject: [PATCH 3/4] Fix TextInputModal preset value

---
 ts/deckoptions/ConfigSelector.svelte | 25 ++++++++++++++++++++-----
 ts/deckoptions/SaveButton.svelte     | 25 +++++++------------------
 ts/deckoptions/TextInputModal.svelte |  1 +
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deckoptions/ConfigSelector.svelte
index d75918f05..fdd7681a0 100644
--- a/ts/deckoptions/ConfigSelector.svelte
+++ b/ts/deckoptions/ConfigSelector.svelte
@@ -4,7 +4,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import { getContext } from "svelte";
+    import { modalsKey } from "components/contextKeys";
     import type { DeckOptionsState, ConfigListEntry } from "./lib";
+    import type Modal from "bootstrap/js/dist/modal";
 
     import TextInputModal from "./TextInputModal.svelte";
     import StickyBar from "components/StickyBar.svelte";
@@ -21,9 +24,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let state: DeckOptionsState;
     let configList = state.configList;
 
-    let addModalKey: string;
-    let renameModalKey: string;
-
     function configLabel(entry: ConfigListEntry): string {
         const count = tr.deckConfigUsedByDecks({ decks: entry.useCount });
         return `${entry.name} (${count})`;
@@ -43,6 +43,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onRenameConfig(text: string): void {
         state.setCurrentName(text);
     }
+
+    const modals = getContext<Map<string, Modal>>(modalsKey);
+
+    let addModalKey: string;
+    let renameModalKey: string;
+    let oldName = "";
+
+    function onAdd() {
+        modals.get(addModalKey)!.show();
+    }
+
+    function onRename() {
+        oldName = state.getCurrentName();
+        modals.get(renameModalKey)!.show();
+    }
 </script>
 
 <TextInputModal
@@ -54,7 +69,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     title="Rename Config"
     prompt="Name"
     onOk={onRenameConfig}
-    value={state.getCurrentName()}
+    value={oldName}
     bind:modalKey={renameModalKey} />
 
 <StickyBar>
@@ -77,7 +92,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </ButtonToolbarItem>
 
             <ButtonToolbarItem>
-                <SaveButton {state} {addModalKey} {renameModalKey} />
+                <SaveButton {state} on:add={onAdd} on:rename={onRename} />
             </ButtonToolbarItem>
         </ButtonToolbar>
     </WithTheming>
diff --git a/ts/deckoptions/SaveButton.svelte b/ts/deckoptions/SaveButton.svelte
index 28a79dc5a..5a5002f38 100644
--- a/ts/deckoptions/SaveButton.svelte
+++ b/ts/deckoptions/SaveButton.svelte
@@ -4,10 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import { modalsKey } from "components/contextKeys";
-    import { getContext } from "svelte";
+    import { createEventDispatcher } from "svelte";
     import type { DeckOptionsState } from "./lib";
-    import type Modal from "bootstrap/js/dist/modal";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -18,9 +16,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import DropdownDivider from "components/DropdownDivider.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
 
-    export let state: DeckOptionsState;
+    const dispatch = createEventDispatcher();
 
-    const modals = getContext<Map<string, Modal>>(modalsKey);
+    export let state: DeckOptionsState;
 
     function removeConfig(): void {
         // show pop-up after dropdown has gone away
@@ -47,17 +45,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function save(applyToChildDecks: boolean): void {
         state.save(applyToChildDecks);
     }
-
-    export let addModalKey: string;
-    export let renameModalKey: string;
-
-    function showAddModal() {
-        modals.get(addModalKey)!.show();
-    }
-
-    function showRenameModal() {
-        modals.get(renameModalKey)!.show();
-    }
 </script>
 
 <ButtonGroup>
@@ -69,8 +56,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
             <LabelButton on:mount={createDropdown} on:click={activateDropdown} />
             <DropdownMenu id={menuId}>
-                <DropdownItem on:click={showAddModal}>Add Config</DropdownItem>
-                <DropdownItem on:click={showRenameModal}>Rename Config</DropdownItem>
+                <DropdownItem on:click={() => dispatch('add')}>Add Config</DropdownItem>
+                <DropdownItem on:click={() => dispatch('rename')}>
+                    Rename Config
+                </DropdownItem>
                 <DropdownItem on:click={removeConfig}>Remove Config</DropdownItem>
                 <DropdownDivider />
                 <DropdownItem on:click={() => save(true)}>
diff --git a/ts/deckoptions/TextInputModal.svelte b/ts/deckoptions/TextInputModal.svelte
index e694f8736..8d132941b 100644
--- a/ts/deckoptions/TextInputModal.svelte
+++ b/ts/deckoptions/TextInputModal.svelte
@@ -27,6 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onOkClicked(): void {
         onOk(inputRef.value);
         modal.hide();
+        value = "";
     }
 
     function onShown(): void {

From 5761d19c6489fed4503c5686cc50f36c14be0ebe Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 25 May 2021 19:34:19 +0200
Subject: [PATCH 4/4] Satisfy svelte_check

---
 ts/deckoptions/BUILD.bazel | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ts/deckoptions/BUILD.bazel b/ts/deckoptions/BUILD.bazel
index ce2c723ee..cb6d275fb 100644
--- a/ts/deckoptions/BUILD.bazel
+++ b/ts/deckoptions/BUILD.bazel
@@ -132,10 +132,12 @@ svelte_check(
         "*.ts",
         "*.svelte",
     ]) + [
+        "//ts/sass:button_mixins_lib",
+        "//ts/sass/bootstrap",
         "@npm//@types/bootstrap",
         "@npm//@types/lodash-es",
         "@npm//@types/marked",
-        "//ts/components:svelte_components",
+        "//ts/components",
     ],
 )