From 5c23ac5a867665b4f683697360281d6f23e2c9d1 Mon Sep 17 00:00:00 2001
From: Damien Elmes <dae@users.noreply.github.com>
Date: Sun, 29 Jun 2025 14:40:56 +0700
Subject: [PATCH] Revert "Fix/unapplied scss (#4103)" (#4136)

This reverts commit ae6cf98f4083e75bb0ee69eee80480ece536225f.
---
 .../change-notetype/ChangeNotetypePage.svelte |  2 -
 .../change-notetype/change-notetype-base.scss |  6 +-
 ts/routes/change-notetype/index.ts            | 41 +++++++++++
 ts/routes/congrats/CongratsPage.svelte        |  2 -
 ts/routes/congrats/index.ts                   |  2 +
 ts/routes/deck-options/DeckOptionsPage.svelte |  2 -
 ts/routes/deck-options/index.ts               | 65 +++++++++++++++++
 ts/routes/graphs/GraphsPage.svelte            |  2 -
 ts/routes/graphs/index.ts                     | 72 +++++++++++++++++++
 .../image-occlusion/ImageOcclusionPage.svelte |  2 -
 .../image-occlusion/image-occlusion-base.scss |  8 +--
 ts/routes/image-occlusion/index.ts            | 59 +++++++++++++++
 .../ImportAnkiPackagePage.svelte              |  2 -
 .../import-anki-package-base.scss             |  8 +--
 ts/routes/import-anki-package/index.ts        | 52 ++++++++++++++
 ts/routes/import-csv/ImportCsvPage.svelte     |  2 -
 ts/routes/import-csv/import-csv-base.scss     |  8 +--
 ts/routes/import-csv/index.ts                 | 62 ++++++++++++++++
 ts/routes/import-page/ImportPage.svelte       |  2 -
 ts/routes/import-page/import-page-base.scss   |  6 +-
 ts/routes/import-page/index.ts                | 54 ++++++++++++++
 21 files changed, 425 insertions(+), 34 deletions(-)
 create mode 100644 ts/routes/change-notetype/index.ts
 create mode 100644 ts/routes/deck-options/index.ts
 create mode 100644 ts/routes/graphs/index.ts
 create mode 100644 ts/routes/image-occlusion/index.ts
 create mode 100644 ts/routes/import-anki-package/index.ts
 create mode 100644 ts/routes/import-csv/index.ts
 create mode 100644 ts/routes/import-page/index.ts

diff --git a/ts/routes/change-notetype/ChangeNotetypePage.svelte b/ts/routes/change-notetype/ChangeNotetypePage.svelte
index e07d088fb..db25aea2e 100644
--- a/ts/routes/change-notetype/ChangeNotetypePage.svelte
+++ b/ts/routes/change-notetype/ChangeNotetypePage.svelte
@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import "./change-notetype-base.scss";
-
     import * as tr from "@generated/ftl";
     import { renderMarkdown } from "@tslib/helpers";
 
diff --git a/ts/routes/change-notetype/change-notetype-base.scss b/ts/routes/change-notetype/change-notetype-base.scss
index 594b73f14..22aeed358 100644
--- a/ts/routes/change-notetype/change-notetype-base.scss
+++ b/ts/routes/change-notetype/change-notetype-base.scss
@@ -1,13 +1,13 @@
-@use "$lib/sass/bootstrap-dark";
+@use "../lib/sass/bootstrap-dark";
 
-@import "$lib/sass/base";
+@import "../lib/sass/base";
 
 @import "bootstrap/scss/alert";
 @import "bootstrap/scss/buttons";
 @import "bootstrap/scss/button-group";
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/grid";
-@import "$lib/sass/bootstrap-forms";
+@import "../lib/sass/bootstrap-forms";
 
 .night-mode {
     @include bootstrap-dark.night-mode;
diff --git a/ts/routes/change-notetype/index.ts b/ts/routes/change-notetype/index.ts
new file mode 100644
index 000000000..4fd56507a
--- /dev/null
+++ b/ts/routes/change-notetype/index.ts
@@ -0,0 +1,41 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import "./change-notetype-base.scss";
+
+import { getChangeNotetypeInfo, getNotetypeNames } from "@generated/backend";
+import { ModuleName, setupI18n } from "@tslib/i18n";
+import { checkNightMode } from "@tslib/nightmode";
+
+import ChangeNotetypePage from "./ChangeNotetypePage.svelte";
+import { ChangeNotetypeState } from "./lib";
+
+const notetypeNames = getNotetypeNames({});
+const i18n = setupI18n({
+    modules: [ModuleName.ACTIONS, ModuleName.CHANGE_NOTETYPE, ModuleName.KEYBOARD],
+});
+
+export async function setupChangeNotetypePage(
+    oldNotetypeId: bigint,
+    newNotetypeId: bigint,
+): Promise<ChangeNotetypePage> {
+    const changeNotetypeInfo = getChangeNotetypeInfo({
+        oldNotetypeId,
+        newNotetypeId,
+    });
+    const [names, info] = await Promise.all([notetypeNames, changeNotetypeInfo, i18n]);
+
+    checkNightMode();
+
+    const state = new ChangeNotetypeState(names, info);
+    return new ChangeNotetypePage({
+        target: document.body,
+        props: { state },
+    });
+}
+
+// use #testXXXX where XXXX is notetype ID to test
+if (window.location.hash.startsWith("#test")) {
+    const ntid = parseInt(window.location.hash.substring("#test".length), 10);
+    setupChangeNotetypePage(BigInt(ntid), BigInt(ntid));
+}
diff --git a/ts/routes/congrats/CongratsPage.svelte b/ts/routes/congrats/CongratsPage.svelte
index c5af98adf..94187479e 100644
--- a/ts/routes/congrats/CongratsPage.svelte
+++ b/ts/routes/congrats/CongratsPage.svelte
@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import "./congrats-base.scss";
-
     import type { CongratsInfoResponse } from "@generated/anki/scheduler_pb";
     import { congratsInfo } from "@generated/backend";
     import * as tr from "@generated/ftl";
diff --git a/ts/routes/congrats/index.ts b/ts/routes/congrats/index.ts
index 6ce54544e..995b82c8f 100644
--- a/ts/routes/congrats/index.ts
+++ b/ts/routes/congrats/index.ts
@@ -6,6 +6,8 @@
 // page, and mounts into a div with 'id=congrats'. Unlike the desktop, it does not
 // auto-refresh (to reduce the load on AnkiWeb).
 
+import "./congrats-base.scss";
+
 import { congratsInfo } from "@generated/backend";
 import { ModuleName, setupI18n } from "@tslib/i18n";
 import { checkNightMode } from "@tslib/nightmode";
diff --git a/ts/routes/deck-options/DeckOptionsPage.svelte b/ts/routes/deck-options/DeckOptionsPage.svelte
index 67fb9bd87..2201493b2 100644
--- a/ts/routes/deck-options/DeckOptionsPage.svelte
+++ b/ts/routes/deck-options/DeckOptionsPage.svelte
@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import "./deck-options-base.scss";
-
     import type { Writable } from "svelte/store";
 
     import "$lib/sveltelib/export-runtime";
diff --git a/ts/routes/deck-options/index.ts b/ts/routes/deck-options/index.ts
new file mode 100644
index 000000000..3b88c4d0c
--- /dev/null
+++ b/ts/routes/deck-options/index.ts
@@ -0,0 +1,65 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+/* eslint
+@typescript-eslint/no-explicit-any: "off",
+ */
+
+import "$lib/sveltelib/export-runtime";
+import "./deck-options-base.scss";
+
+import { getDeckConfigsForUpdate } from "@generated/backend";
+import { ModuleName, setupI18n } from "@tslib/i18n";
+import { checkNightMode } from "@tslib/nightmode";
+
+import { modalsKey, touchDeviceKey } from "$lib/components/context-keys";
+import EnumSelectorRow from "$lib/components/EnumSelectorRow.svelte";
+import SwitchRow from "$lib/components/SwitchRow.svelte";
+import TitledContainer from "$lib/components/TitledContainer.svelte";
+
+import DeckOptionsPage from "./DeckOptionsPage.svelte";
+import { DeckOptionsState } from "./lib";
+import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
+import SpinBoxRow from "./SpinBoxRow.svelte";
+
+const i18n = setupI18n({
+    modules: [
+        ModuleName.HELP,
+        ModuleName.SCHEDULING,
+        ModuleName.ACTIONS,
+        ModuleName.DECK_CONFIG,
+        ModuleName.KEYBOARD,
+        ModuleName.STUDYING,
+        ModuleName.DECKS,
+    ],
+});
+
+export async function setupDeckOptions(did_: number): Promise<DeckOptionsPage> {
+    const did = BigInt(did_);
+    const [info] = await Promise.all([getDeckConfigsForUpdate({ did }), i18n]);
+
+    checkNightMode();
+
+    const context = new Map();
+    context.set(modalsKey, new Map());
+    context.set(touchDeviceKey, "ontouchstart" in document.documentElement);
+
+    const state = new DeckOptionsState(BigInt(did), info);
+    return new DeckOptionsPage({
+        target: document.body,
+        props: { state },
+        context,
+    });
+}
+
+export const components = {
+    TitledContainer,
+    SpinBoxRow,
+    SpinBoxFloatRow,
+    EnumSelectorRow,
+    SwitchRow,
+};
+
+// if (window.location.hash.startsWith("#test")) {
+//     setupDeckOptions(1);
+// }
diff --git a/ts/routes/graphs/GraphsPage.svelte b/ts/routes/graphs/GraphsPage.svelte
index 44c48bfae..7ae4d966d 100644
--- a/ts/routes/graphs/GraphsPage.svelte
+++ b/ts/routes/graphs/GraphsPage.svelte
@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import "./graphs-base.scss";
-
     import { bridgeCommand } from "@tslib/bridgecommand";
     import type { SvelteComponent } from "svelte";
     import { writable } from "svelte/store";
diff --git a/ts/routes/graphs/index.ts b/ts/routes/graphs/index.ts
new file mode 100644
index 000000000..6909bdb8b
--- /dev/null
+++ b/ts/routes/graphs/index.ts
@@ -0,0 +1,72 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+/* eslint
+@typescript-eslint/no-explicit-any: "off",
+ */
+
+import "./graphs-base.scss";
+
+import { ModuleName, setupI18n } from "@tslib/i18n";
+import { checkNightMode } from "@tslib/nightmode";
+import type { SvelteComponent } from "svelte";
+
+import GraphsPage from "./GraphsPage.svelte";
+
+const i18n = setupI18n({ modules: [ModuleName.STATISTICS, ModuleName.SCHEDULING] });
+
+export async function setupGraphs(
+    graphs: typeof SvelteComponent<any>[],
+    {
+        search = "deck:current",
+        days = 365,
+        controller = null satisfies typeof SvelteComponent<any> | null,
+    } = {},
+): Promise<GraphsPage> {
+    checkNightMode();
+    await i18n;
+
+    return new GraphsPage({
+        target: document.body,
+        props: {
+            initialSearch: search,
+            initialDays: days,
+            graphs,
+            controller,
+        },
+    });
+}
+
+import AddedGraph from "./AddedGraph.svelte";
+import ButtonsGraph from "./ButtonsGraph.svelte";
+import CalendarGraph from "./CalendarGraph.svelte";
+import CardCounts from "./CardCounts.svelte";
+import DifficultyGraph from "./DifficultyGraph.svelte";
+import EaseGraph from "./EaseGraph.svelte";
+import FutureDue from "./FutureDue.svelte";
+import { RevlogRange } from "./graph-helpers";
+import HourGraph from "./HourGraph.svelte";
+import IntervalsGraph from "./IntervalsGraph.svelte";
+import RangeBox from "./RangeBox.svelte";
+import RetrievabilityGraph from "./RetrievabilityGraph.svelte";
+import ReviewsGraph from "./ReviewsGraph.svelte";
+import StabilityGraph from "./StabilityGraph.svelte";
+import TodayStats from "./TodayStats.svelte";
+
+export const graphComponents = {
+    TodayStats,
+    FutureDue,
+    CalendarGraph,
+    ReviewsGraph,
+    CardCounts,
+    IntervalsGraph,
+    StabilityGraph,
+    EaseGraph,
+    DifficultyGraph,
+    RetrievabilityGraph,
+    HourGraph,
+    ButtonsGraph,
+    AddedGraph,
+    RangeBox,
+    RevlogRange,
+};
diff --git a/ts/routes/image-occlusion/ImageOcclusionPage.svelte b/ts/routes/image-occlusion/ImageOcclusionPage.svelte
index 61d3e6f1e..aad104ad6 100644
--- a/ts/routes/image-occlusion/ImageOcclusionPage.svelte
+++ b/ts/routes/image-occlusion/ImageOcclusionPage.svelte
@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import "./image-occlusion-base.scss";
-
     import * as tr from "@generated/ftl";
 
     import Container from "$lib/components/Container.svelte";
diff --git a/ts/routes/image-occlusion/image-occlusion-base.scss b/ts/routes/image-occlusion/image-occlusion-base.scss
index 7ad980a3d..33836a9c4 100644
--- a/ts/routes/image-occlusion/image-occlusion-base.scss
+++ b/ts/routes/image-occlusion/image-occlusion-base.scss
@@ -1,14 +1,14 @@
-@use "../../lib/sass/vars";
-@use "../../lib/sass/bootstrap-dark";
+@use "../lib/sass/vars";
+@use "../lib/sass/bootstrap-dark";
 
-@import "../../lib/sass/base";
+@import "../lib/sass/base";
 
 @import "bootstrap/scss/alert";
 @import "bootstrap/scss/buttons";
 @import "bootstrap/scss/button-group";
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/grid";
-@import "../../lib/sass/bootstrap-forms";
+@import "../lib/sass/bootstrap-forms";
 
 .night-mode {
     @include bootstrap-dark.night-mode;
diff --git a/ts/routes/image-occlusion/index.ts b/ts/routes/image-occlusion/index.ts
new file mode 100644
index 000000000..59720b1e0
--- /dev/null
+++ b/ts/routes/image-occlusion/index.ts
@@ -0,0 +1,59 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import "./image-occlusion-base.scss";
+
+import { ModuleName, setupI18n } from "@tslib/i18n";
+import { checkNightMode } from "@tslib/nightmode";
+import { get } from "svelte/store";
+
+import { addOrUpdateNote } from "./add-or-update-note.svelte";
+import ImageOcclusionPage from "./ImageOcclusionPage.svelte";
+import type { IOMode } from "./lib";
+import { hideAllGuessOne } from "./store";
+
+globalThis.anki = globalThis.anki || {};
+
+const i18n = setupI18n({
+    modules: [
+        ModuleName.IMPORTING,
+        ModuleName.DECKS,
+        ModuleName.EDITING,
+        ModuleName.NOTETYPES,
+        ModuleName.ACTIONS,
+        ModuleName.BROWSING,
+        ModuleName.UNDO,
+    ],
+});
+
+export async function setupImageOcclusion(mode: IOMode, target = document.body): Promise<ImageOcclusionPage> {
+    checkNightMode();
+    await i18n;
+
+    async function addNote(): Promise<void> {
+        addOrUpdateNote(mode, get(hideAllGuessOne));
+    }
+
+    // for adding note from mobile devices
+    globalThis.anki.imageOcclusion = {
+        mode,
+        addNote,
+    };
+
+    return new ImageOcclusionPage({
+        target: target,
+        props: {
+            mode,
+        },
+    });
+}
+
+if (window.location.hash.startsWith("#test-")) {
+    const imagePath = window.location.hash.replace("#test-", "");
+    setupImageOcclusion({ kind: "add", imagePath, notetypeId: 0 });
+}
+
+if (window.location.hash.startsWith("#testforedit-")) {
+    const noteId = parseInt(window.location.hash.replace("#testforedit-", ""));
+    setupImageOcclusion({ kind: "edit", noteId });
+}
diff --git a/ts/routes/import-anki-package/ImportAnkiPackagePage.svelte b/ts/routes/import-anki-package/ImportAnkiPackagePage.svelte
index c4f84ad2a..cc75fda3e 100644
--- a/ts/routes/import-anki-package/ImportAnkiPackagePage.svelte
+++ b/ts/routes/import-anki-package/ImportAnkiPackagePage.svelte
@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import "./import-anki-package-base.scss";
-
     import type { ImportAnkiPackageOptions } from "@generated/anki/import_export_pb";
     import { importAnkiPackage } from "@generated/backend";
     import * as tr from "@generated/ftl";
diff --git a/ts/routes/import-anki-package/import-anki-package-base.scss b/ts/routes/import-anki-package/import-anki-package-base.scss
index 8a8a59453..58cc5daa6 100644
--- a/ts/routes/import-anki-package/import-anki-package-base.scss
+++ b/ts/routes/import-anki-package/import-anki-package-base.scss
@@ -1,6 +1,6 @@
-@use "$lib/sass/bootstrap-dark";
+@use "../lib/sass/bootstrap-dark";
 
-@import "$lib/sass/base";
+@import "../lib/sass/base";
 
 @import "bootstrap/scss/alert";
 @import "bootstrap/scss/buttons";
@@ -10,8 +10,8 @@
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/modal";
 @import "bootstrap/scss/carousel";
-@import "$lib/sass/bootstrap-forms";
-@import "$lib/sass/bootstrap-tooltip";
+@import "../lib/sass/bootstrap-forms";
+@import "../lib/sass/bootstrap-tooltip";
 
 .night-mode {
     @include bootstrap-dark.night-mode;
diff --git a/ts/routes/import-anki-package/index.ts b/ts/routes/import-anki-package/index.ts
new file mode 100644
index 000000000..f709fe50c
--- /dev/null
+++ b/ts/routes/import-anki-package/index.ts
@@ -0,0 +1,52 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import "./import-anki-package-base.scss";
+
+import { getImportAnkiPackagePresets } from "@generated/backend";
+import { ModuleName, setupI18n } from "@tslib/i18n";
+import { checkNightMode } from "@tslib/nightmode";
+
+import { modalsKey } from "$lib/components/context-keys";
+
+import ImportAnkiPackagePage from "./ImportAnkiPackagePage.svelte";
+
+const i18n = setupI18n({
+    modules: [
+        ModuleName.IMPORTING,
+        ModuleName.ACTIONS,
+        ModuleName.HELP,
+        ModuleName.DECK_CONFIG,
+        ModuleName.ADDING,
+        ModuleName.EDITING,
+        ModuleName.KEYBOARD,
+    ],
+});
+
+export async function setupImportAnkiPackagePage(
+    path: string,
+): Promise<ImportAnkiPackagePage> {
+    const [_, options] = await Promise.all([
+        i18n,
+        getImportAnkiPackagePresets({}),
+    ]);
+
+    const context = new Map();
+    context.set(modalsKey, new Map());
+    checkNightMode();
+
+    return new ImportAnkiPackagePage({
+        target: document.body,
+        props: {
+            path,
+            options,
+        },
+        context,
+    });
+}
+
+// eg http://localhost:40000/_anki/pages/import-anki-package.html#test-/home/dae/foo.apkg
+if (window.location.hash.startsWith("#test-")) {
+    const apkgPath = window.location.hash.replace("#test-", "");
+    setupImportAnkiPackagePage(apkgPath);
+}
diff --git a/ts/routes/import-csv/ImportCsvPage.svelte b/ts/routes/import-csv/ImportCsvPage.svelte
index 83dee12ec..f7d8c0f88 100644
--- a/ts/routes/import-csv/ImportCsvPage.svelte
+++ b/ts/routes/import-csv/ImportCsvPage.svelte
@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import "./import-csv-base.scss";
-
     import Row from "$lib/components/Row.svelte";
 
     import ImportPage from "../import-page/ImportPage.svelte";
diff --git a/ts/routes/import-csv/import-csv-base.scss b/ts/routes/import-csv/import-csv-base.scss
index 8a8a59453..58cc5daa6 100644
--- a/ts/routes/import-csv/import-csv-base.scss
+++ b/ts/routes/import-csv/import-csv-base.scss
@@ -1,6 +1,6 @@
-@use "$lib/sass/bootstrap-dark";
+@use "../lib/sass/bootstrap-dark";
 
-@import "$lib/sass/base";
+@import "../lib/sass/base";
 
 @import "bootstrap/scss/alert";
 @import "bootstrap/scss/buttons";
@@ -10,8 +10,8 @@
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/modal";
 @import "bootstrap/scss/carousel";
-@import "$lib/sass/bootstrap-forms";
-@import "$lib/sass/bootstrap-tooltip";
+@import "../lib/sass/bootstrap-forms";
+@import "../lib/sass/bootstrap-tooltip";
 
 .night-mode {
     @include bootstrap-dark.night-mode;
diff --git a/ts/routes/import-csv/index.ts b/ts/routes/import-csv/index.ts
new file mode 100644
index 000000000..743aa4e7e
--- /dev/null
+++ b/ts/routes/import-csv/index.ts
@@ -0,0 +1,62 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import "./import-csv-base.scss";
+
+import { getCsvMetadata, getDeckNames, getNotetypeNames } from "@generated/backend";
+import { ModuleName, setupI18n } from "@tslib/i18n";
+import { checkNightMode } from "@tslib/nightmode";
+
+import { modalsKey } from "$lib/components/context-keys";
+import ErrorPage from "$lib/components/ErrorPage.svelte";
+
+import ImportCsvPage from "./ImportCsvPage.svelte";
+import { ImportCsvState } from "./lib";
+
+const i18n = setupI18n({
+    modules: [
+        ModuleName.ACTIONS,
+        ModuleName.CHANGE_NOTETYPE,
+        ModuleName.DECKS,
+        ModuleName.EDITING,
+        ModuleName.IMPORTING,
+        ModuleName.KEYBOARD,
+        ModuleName.NOTETYPES,
+        ModuleName.STUDYING,
+        ModuleName.ADDING,
+        ModuleName.HELP,
+        ModuleName.DECK_CONFIG,
+    ],
+});
+
+export async function setupImportCsvPage(path: string): Promise<ImportCsvPage | ErrorPage> {
+    const context = new Map();
+    context.set(modalsKey, new Map());
+    checkNightMode();
+
+    return Promise.all([
+        getNotetypeNames({}),
+        getDeckNames({
+            skipEmptyDefault: false,
+            includeFiltered: false,
+        }),
+        getCsvMetadata({ path }, { alertOnError: false }),
+        i18n,
+    ]).then(([notetypes, decks, metadata]) => {
+        return new ImportCsvPage({
+            target: document.body,
+            props: {
+                state: new ImportCsvState(path, notetypes, decks, metadata),
+            },
+            context,
+        });
+    }).catch((error) => {
+        return new ErrorPage({ target: document.body, props: { error } });
+    });
+}
+
+/* // use #testXXXX where XXXX is notetype ID to test
+if (window.location.hash.startsWith("#test")) {
+    const ntid = parseInt(window.location.hash.substr("#test".length), 10);
+    setupCsvImportPage(ntid, ntid);
+} */
diff --git a/ts/routes/import-page/ImportPage.svelte b/ts/routes/import-page/ImportPage.svelte
index 6abb3d0b7..f3aec8f66 100644
--- a/ts/routes/import-page/ImportPage.svelte
+++ b/ts/routes/import-page/ImportPage.svelte
@@ -9,8 +9,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import "./import-page-base.scss";
-
     import type { ImportResponse } from "@generated/anki/import_export_pb";
     import { importDone } from "@generated/backend";
 
diff --git a/ts/routes/import-page/import-page-base.scss b/ts/routes/import-page/import-page-base.scss
index 402692aa9..fe96efcac 100644
--- a/ts/routes/import-page/import-page-base.scss
+++ b/ts/routes/import-page/import-page-base.scss
@@ -1,8 +1,8 @@
-@use "$lib/sass/bootstrap-dark";
+@use "../lib/sass/bootstrap-dark";
 
-@import "$lib/sass/base";
+@import "../lib/sass/base";
 
-@import "$lib/sass/bootstrap-tooltip";
+@import "../lib/sass/bootstrap-tooltip";
 @import "bootstrap/scss/buttons";
 
 .night-mode {
diff --git a/ts/routes/import-page/index.ts b/ts/routes/import-page/index.ts
new file mode 100644
index 000000000..68e03ed9e
--- /dev/null
+++ b/ts/routes/import-page/index.ts
@@ -0,0 +1,54 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import "./import-page-base.scss";
+
+import { importJsonFile, importJsonString } from "@generated/backend";
+import { ModuleName, setupI18n } from "@tslib/i18n";
+import { checkNightMode } from "@tslib/nightmode";
+
+import ImportPage from "./ImportPage.svelte";
+import type { LogParams } from "./types";
+
+const i18n = setupI18n({
+    modules: [
+        ModuleName.IMPORTING,
+        ModuleName.ADDING,
+        ModuleName.EDITING,
+        ModuleName.ACTIONS,
+        ModuleName.KEYBOARD,
+    ],
+});
+
+const postOptions = { alertOnError: false };
+
+export async function setupImportPage(
+    params: LogParams,
+): Promise<ImportPage> {
+    await i18n;
+
+    checkNightMode();
+
+    return new ImportPage({
+        target: document.body,
+        props: {
+            path: params.path,
+            noOptions: true,
+            importer: {
+                doImport: () => {
+                    switch (params.type) {
+                        case "json_file":
+                            return importJsonFile({ val: params.path }, postOptions);
+                        case "json_string":
+                            return importJsonString({ val: params.json }, postOptions);
+                    }
+                },
+            },
+        },
+    });
+}
+
+if (window.location.hash.startsWith("#test-")) {
+    const path = window.location.hash.replace("#test-", "");
+    setupImportPage({ type: "json_file", path });
+}