add image occlusion page

add side toolbar, top toolbar, mask editor and note editor
- option to switch between mask editor and note editor

Author: krmanik

ts/image-occlusion/ImageOcclusionPage.svelte

@@ -0,0 +1,97 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "@tslib/ftl";
+
+    import Container from "../components/Container.svelte";
+    import type { Decks } from "../lib/proto";
+    import { saveImageNotes } from "./generate";
+    import MasksEditor from "./MaskEditor.svelte";
+    import Notes from "./Notes.svelte";
+    import StickyFooter from "./StickyFooter.svelte";
+
+    export let path: string;
+    export let deckNameIds: Decks.DeckNameId[];
+    export let deckId: number | null;
+
+    async function hideAllGuessOne(): Promise<void> {
+        saveImageNotes(path, deckId!, true);
+    }
+
+    async function hideOneGuessOne(): Promise<void> {
+        saveImageNotes(path, deckId!, false);
+    }
+
+    const items = [
+        { label: tr.notetypesOcclusionMask(), value: 1 },
+        { label: tr.notetypesOcclusionNote(), value: 2 },
+    ];
+
+    let activeTabValue = 1;
+    const tabChange = (tabValue) => () => (activeTabValue = tabValue);
+</script>
+
+<Container class="image-occlusion">
+    <ul>
+        {#each items as item}
+            <li class={activeTabValue === item.value ? "active" : ""}>
+                <span on:click={tabChange(item.value)}>{item.label}</span>
+            </li>
+        {/each}
+    </ul>
+
+    <div hidden={activeTabValue != 1}>
+        <MasksEditor {path} />
+    </div>
+
+    <div hidden={activeTabValue != 2}>
+        <Notes {deckNameIds} bind:deckId />
+        <StickyFooter {hideAllGuessOne} {hideOneGuessOne} />
+    </div>
+</Container>
+
+<style lang="scss">
+    :global(.image-occlusion) {
+        --gutter-inline: 0.5rem;
+
+        :global(.row) {
+            // rows have negative margins by default
+            --bs-gutter-x: 0;
+            // ensure equal spacing between tall rows like
+            // dropdowns, and short rows like checkboxes
+            min-height: 2.5em;
+            align-items: center;
+        }
+    }
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        padding-left: 0;
+        list-style: none;
+        border-bottom: 1px solid #dee2e6;
+    }
+    li {
+        margin-bottom: -1px;
+    }
+
+    span {
+        border: 1px solid transparent;
+        border-top-left-radius: 0.25rem;
+        border-top-right-radius: 0.25rem;
+        display: block;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+    }
+
+    span:hover {
+        border-color: #e9ecef #e9ecef #dee2e6;
+    }
+
+    li.active > span {
+        color: #495057;
+        background-color: #fff;
+        border-color: #dee2e6 #dee2e6 #fff;
+    }
+</style>

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

@@ -0,0 +1,27 @@
+@use "sass/vars";
+@use "sass/bootstrap-dark";
+
+@import "sass/base";
+
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/grid";
+@import "sass/bootstrap-forms";
+
+.night-mode {
+    @include bootstrap-dark.night-mode;
+}
+
+body {
+    width: min(100vw, 70em);
+    margin: 6px auto;
+    // padding: 1em;
+    // pad out the underside of the footer
+    padding-bottom: 5em;
+}
+
+html {
+    overflow: hidden;
+}

ts/image-occlusion/index.ts

@@ -0,0 +1,43 @@
+// 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 "../lib/nightmode";
+import { Decks, decks as decksService } from "../lib/proto";
+import ImageOcclusionPage from "./ImageOcclusionPage.svelte";
+import { getImageClozeMetadata } from "./lib";
+
+const i18n = setupI18n({
+    modules: [
+        ModuleName.IMPORTING,
+        ModuleName.DECKS,
+        ModuleName.EDITING,
+        ModuleName.NOTETYPES,
+    ],
+});
+
+const gettingDecks = decksService.getDeckNames(
+    Decks.GetDeckNamesRequest.create({
+        skipEmptyDefault: false,
+        includeFiltered: false,
+    }),
+);
+
+export async function setupImageOcclusion(path: string): Promise<ImageOcclusionPage> {
+    checkNightMode();
+
+    const gettingmetadata = getImageClozeMetadata(path);
+    const [metadata, decks] = await Promise.all([gettingmetadata, gettingDecks, i18n]);
+
+    return new ImageOcclusionPage({
+        target: document.body,
+        props: {
+            path: path,
+            deckNameIds: decks.entries,
+            deckId: metadata.deckId ? metadata.deckId : null,
+        },
+    });
+}

ts/image-occlusion/notes-toolbar/index.ts

@@ -0,0 +1,6 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import NotesToolbar from "./NotesToolbar.svelte";
+
+export default NotesToolbar;