Voice quick card preview (#16)

* Bump mobx-form-lite

* Add voice for card previews opened via the quick card button

* Make IDE refer to implemented properties / methods

package.json

@@ -39,7 +39,7 @@
     "luxon": "^3.4.3",
     "mathml-tag-names": "^3.0.2",
     "mobx": "^6.10.2",
-    "mobx-form-lite": "^0.8.1",
+    "mobx-form-lite": "^0.8.4",
     "mobx-log": "^2.2.3",
     "mobx-persist-store": "^1.1.3",
     "mobx-react-lite": "^4.0.5",

src/screens/deck-catalog/store/deck-catalog-store.ts

@@ -6,9 +6,7 @@ import { TextField } from "mobx-form-lite";
 import { cachePromise } from "../../../lib/cache/cache-promise.ts";
 import { DeckCategoryResponse } from "../../../../functions/deck-categories.ts";
 import { t } from "../../../translations/t.ts";
-import {
-  persistableField
-} from "../../../lib/mobx-form-lite-persistable/persistable-field.ts";
+import { persistableField } from "../../../lib/mobx-form-lite-persistable/persistable-field.ts";
 
 export enum DeckLanguage {
   Any = "any",

src/screens/deck-form/quick-add-card-form-page.tsx

@@ -2,9 +2,28 @@ import { observer } from "mobx-react-lite";
 import React, { useState } from "react";
 import { QuickAddCardFormStore } from "./store/quick-add-card-form-store.ts";
 import { CardFormWrapper } from "./card-form-wrapper.tsx";
+import { deckListStore } from "../../store/deck-list-store.ts";
+import { screenStore } from "../../store/screen-store.ts";
+import { assert } from "../../lib/typescript/assert.ts";
+import { TextField } from "mobx-form-lite";
+
+const createQuickAddCardFormStore = () => {
+  const screen = screenStore.screen;
+  assert(screen.type === "cardQuickAddForm");
+  const deck = deckListStore.searchDeckById(screen.deckId);
+
+  return new QuickAddCardFormStore(
+    deck
+      ? {
+          speakingCardsField: new TextField(deck.speak_field),
+          speakingCardsLocale: new TextField(deck.speak_locale),
+        }
+      : undefined,
+  );
+};
 
 export const QuickAddCardFormPage = observer(() => {
-  const [quickAddCardStore] = useState(() => new QuickAddCardFormStore());
+  const [quickAddCardStore] = useState(createQuickAddCardFormStore);
 
   return <CardFormWrapper cardFormStore={quickAddCardStore} />;
 });

src/screens/deck-form/store/card-form-store-interface.ts

@@ -2,7 +2,7 @@ import { CardFormType } from "./deck-form-store.ts";
 import { BooleanToggle, TextField } from "mobx-form-lite";
 import { DeckSpeakFieldEnum } from "../../../../functions/db/deck/decks-with-cards-schema.ts";
 
-export type CardFormStoreInterface = {
+export interface CardFormStoreInterface {
   cardForm?: CardFormType | null;
   onSaveCard: () => void;
   onBackCard: () => void;
@@ -15,4 +15,4 @@ export type CardFormStoreInterface = {
     speakingCardsLocale: TextField<string | null>;
     speakingCardsField: TextField<DeckSpeakFieldEnum | null>;
   };
-};
+}

src/screens/deck-form/store/deck-form-store.ts

@@ -1,11 +1,7 @@
 import { TextField } from "mobx-form-lite";
 import { validators } from "mobx-form-lite";
 import { action, makeAutoObservable } from "mobx";
-import {
-  isFormEmpty,
-  isFormTouched,
-  isFormValid,
-} from "mobx-form-lite";
+import { isFormEmpty, isFormTouched, isFormValid } from "mobx-form-lite";
 import { assert } from "../../../lib/typescript/assert.ts";
 import { upsertDeckRequest } from "../../../api/api.ts";
 import { screenStore } from "../../../store/screen-store.ts";

src/screens/deck-form/store/quick-add-card-form-store.ts

@@ -5,11 +5,7 @@ import {
   createCardSideField,
 } from "./deck-form-store.ts";
 import { action, makeAutoObservable } from "mobx";
-import {
-  isFormEmpty,
-  isFormTouched,
-  isFormValid,
-} from "mobx-form-lite";
+import { isFormEmpty, isFormTouched, isFormValid } from "mobx-form-lite";
 import { screenStore } from "../../../store/screen-store.ts";
 import { showConfirm } from "../../../lib/telegram/show-confirm.ts";
 import { addCardRequest } from "../../../api/api.ts";
@@ -20,6 +16,7 @@ import { deckListStore } from "../../../store/deck-list-store.ts";
 import { t } from "../../../translations/t.ts";
 import { BooleanToggle } from "mobx-form-lite";
 import { CardFormStoreInterface } from "./card-form-store-interface.ts";
+import { DeckSpeakFieldEnum } from "../../../../functions/db/deck/decks-with-cards-schema.ts";
 
 export class QuickAddCardFormStore implements CardFormStoreInterface {
   cardForm: CardFormType = {
@@ -34,7 +31,12 @@ export class QuickAddCardFormStore implements CardFormStoreInterface {
   isCardPreviewSelected = new BooleanToggle(false);
   isSaveCardButtonActive = true;
 
-  constructor() {
+  constructor(
+    public form?: {
+      speakingCardsLocale: TextField<string | null>;
+      speakingCardsField: TextField<DeckSpeakFieldEnum | null>;
+    },
+  ) {
     makeAutoObservable(this, {}, { autoBind: true });
   }
 

src/screens/folder-form/store/folder-form-store.ts

@@ -1,4 +1,11 @@
-import { TextField, validators, formUnTouchAll, isFormTouched, isFormValid, ListField } from "mobx-form-lite";
+import {
+  TextField,
+  validators,
+  formUnTouchAll,
+  isFormTouched,
+  isFormValid,
+  ListField,
+} from "mobx-form-lite";
 import { t } from "../../../translations/t.ts";
 import { action, makeAutoObservable } from "mobx";
 import { screenStore } from "../../../store/screen-store.ts";

src/screens/share-deck/store/share-deck-form-store.ts

@@ -13,9 +13,7 @@ import {
 import { fromPromise, IPromiseBasedObservable } from "mobx-utils";
 import { DeckAccessesResponse } from "../../../../functions/deck-accesses.ts";
 import { DeckAccessType } from "../../../../functions/db/custom-types.ts";
-import {
-  persistableField
-} from "../../../lib/mobx-form-lite-persistable/persistable-field.ts";
+import { persistableField } from "../../../lib/mobx-form-lite-persistable/persistable-field.ts";
 
 const getRequestFiltersForScreen = () => {
   const screen = screenStore.screen;

src/store/user-store.ts

@@ -6,9 +6,7 @@ import { makePersistable } from "mobx-persist-store";
 import { storageAdapter } from "../lib/telegram/storage-adapter.ts";
 import { BooleanToggle } from "mobx-form-lite";
 import { CardAnswerType } from "../../functions/db/custom-types.ts";
-import {
-  persistableField
-} from "../lib/mobx-form-lite-persistable/persistable-field.ts";
+import { persistableField } from "../lib/mobx-form-lite-persistable/persistable-field.ts";
 
 export class UserStore {
   userInfo?: UserDbType;

src/ui/dropdown.tsx

@@ -71,7 +71,7 @@ export const Dropdown = (props: Props) => {
               className={css({
                 padding: "12px 16px",
                 borderRadius: theme.borderRadius,
-                whiteSpace: 'nowrap',
+                whiteSpace: "nowrap",
                 ...tapScale,
                 ":hover": {
                   backgroundColor: theme.buttonColor,