Fix/unapplied scss (#4103)

* deck options + change notetype

* graphs

* image occlusion

* congrats

* imports

* ./check

* style

* $lib

* delete unused index.ts files

ts/routes/change-notetype/ChangeNotetypePage.svelte

@@ -3,6 +3,8 @@ 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";
 

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;

ts/routes/change-notetype/index.ts

@@ -1,41 +0,0 @@
-// 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));
-}

ts/routes/congrats/CongratsPage.svelte

@@ -3,6 +3,8 @@ 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";

ts/routes/congrats/index.ts

@@ -6,8 +6,6 @@
 // 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";

ts/routes/deck-options/DeckOptionsPage.svelte

@@ -3,6 +3,8 @@ 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";

ts/routes/deck-options/index.ts

@@ -1,65 +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-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);
-// }

ts/routes/graphs/GraphsPage.svelte

@@ -3,6 +3,8 @@ 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";

ts/routes/graphs/index.ts

@@ -1,72 +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-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,
-};

ts/routes/image-occlusion/ImageOcclusionPage.svelte

@@ -3,6 +3,8 @@ 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";

ts/routes/image-occlusion/image-occlusion-base.scss

@@ -1,14 +1,14 @@
-@use "../lib/sass/vars";
+@use "../../lib/sass/vars";
-@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;

ts/routes/image-occlusion/index.ts

@@ -1,59 +0,0 @@
-// 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 });
-}

ts/routes/import-anki-package/ImportAnkiPackagePage.svelte

@@ -3,6 +3,8 @@ 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";

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-forms";
-@import "../lib/sass/bootstrap-tooltip";
+@import "$lib/sass/bootstrap-tooltip";
 
 .night-mode {
     @include bootstrap-dark.night-mode;

ts/routes/import-anki-package/index.ts

@@ -1,52 +0,0 @@
-// 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);
-}

ts/routes/import-csv/ImportCsvPage.svelte

@@ -3,6 +3,8 @@ 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";

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-forms";
-@import "../lib/sass/bootstrap-tooltip";
+@import "$lib/sass/bootstrap-tooltip";
 
 .night-mode {
     @include bootstrap-dark.night-mode;

ts/routes/import-csv/index.ts

@@ -1,62 +0,0 @@
-// 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);
-} */

ts/routes/import-page/ImportPage.svelte

@@ -9,6 +9,8 @@ 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";
 

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 {

ts/routes/import-page/index.ts

@@ -1,54 +0,0 @@
-// 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 });
-}