Card input mode (#39)

* Card input mode

src/api/api.ts

@@ -69,6 +69,15 @@ import {
   AiSpeechGenerateRequest,
   AiSpeechGenerateResponse,
 } from "../../functions/ai-speech-generate.ts";
+import {
+  AiSingleCardRequest,
+  AiSingleCardResponse,
+} from "../../functions/ai-single-card-generate.ts";
+import { CardInputModeListResponse } from "../../functions/card-input-mode-list.ts";
+import {
+  CardInputModeChangeRequest,
+  CardInputModeChangeResponse,
+} from "../../functions/card-input-mode-change.ts";
 
 export const healthRequest = () => {
   return request<HealthResponse>("/health");
@@ -263,3 +272,25 @@ export const aiSpeechGenerateRequest = (body: AiSpeechGenerateRequest) => {
     body,
   );
 };
+
+export const aiSingleCardGenerateRequest = (body: AiSingleCardRequest) => {
+  return request<AiSingleCardResponse, AiSingleCardRequest>(
+    "/ai-single-card-generate",
+    "POST",
+    body,
+  );
+};
+
+export const cardInputModeListRequest = () => {
+  return request<CardInputModeListResponse>("/card-input-mode-list");
+};
+
+export const deckChangeInputModeRequest = (
+  body: CardInputModeChangeRequest,
+) => {
+  return request<CardInputModeChangeResponse, CardInputModeChangeRequest>(
+    "/card-input-mode-change",
+    "PUT",
+    body,
+  );
+};

src/lib/platform/browser/browser-platform.ts

@@ -2,7 +2,7 @@ import { Platform, PlatformTheme } from "../platform.ts";
 import { makeAutoObservable } from "mobx";
 import { assert } from "../../typescript/assert.ts";
 import { BooleanToggle } from "mobx-form-lite";
-import { PlatformSchemaType } from "../../../../functions/services/get-user.ts";
+import { PlatformSchemaType } from "../../../../functions/services/get-telegram-user.ts";
 import { Language } from "../../../translations/t.ts";
 
 const cssVariables = {

src/lib/platform/browser/use-main-button-progress-browser.ts → src/lib/platform/browser/use-progress-browser.ts

@@ -4,7 +4,7 @@ import { platform } from "../platform.ts";
 import { assert } from "../../typescript/assert.ts";
 import { BrowserPlatform } from "./browser-platform.ts";
 
-export const useMainButtonProgressBrowser = (cb: () => boolean) => {
+export const useProgressBrowser = (cb: () => boolean) => {
   useMount(() => {
     return autorun(() => {
       if (cb()) {

src/lib/platform/platform.ts

@@ -1,7 +1,7 @@
 import { TelegramPlatform } from "./telegram/telegram-platform.ts";
 import { BrowserPlatform } from "./browser/browser-platform.ts";
 import { isRunningWithinTelegram } from "./is-running-within-telegram.ts";
-import { PlatformSchemaType } from "../../../functions/services/get-user.ts";
+import { PlatformSchemaType } from "../../../functions/services/get-telegram-user.ts";
 import { Language } from "../../translations/t.ts";
 
 export type PlatformTheme = {

src/lib/platform/telegram/telegram-platform.ts

@@ -1,7 +1,7 @@
 import WebApp from "@twa-dev/sdk";
 import { Platform, PlatformTheme } from "../platform.ts";
 import { cssVarToValue } from "./css-var-to-value.ts";
-import { PlatformSchemaType } from "../../../../functions/services/get-user.ts";
+import { PlatformSchemaType } from "../../../../functions/services/get-telegram-user.ts";
 import { Language } from "../../../translations/t.ts";
 
 const buttonColor = "var(--tg-theme-button-color)";

src/lib/platform/telegram/use-main-button-progress-telegram.tsx → src/lib/platform/telegram/use-progress-telegram.tsx

@@ -2,7 +2,7 @@ import { useMount } from "../../react/use-mount.ts";
 import { autorun } from "mobx";
 import WebApp from "@twa-dev/sdk";
 
-export const useMainButtonProgressTelegram = (cb: () => boolean) => {
+export const useProgressTelegram = (cb: () => boolean) => {
   return useMount(() => {
     return autorun(() => {
       if (cb()) {

src/lib/platform/use-progress.tsx

@@ -0,0 +1,9 @@
+import { platform } from "./platform.ts";
+import { TelegramPlatform } from "./telegram/telegram-platform.ts";
+import { useProgressTelegram } from "./telegram/use-progress-telegram.tsx";
+import { useProgressBrowser } from "./browser/use-progress-browser.ts";
+
+export const useProgress =
+  platform instanceof TelegramPlatform
+    ? useProgressTelegram
+    : useProgressBrowser;

src/lib/request/request.ts

@@ -1,7 +1,7 @@
 import { trimEnd, trimStart } from "../string/trim.ts";
 import { platform } from "../platform/platform.ts";
 import { collectClientData } from "./collect-client-data.ts";
-import { UserHeaders } from "../../../functions/services/get-user.ts";
+import { UserHeaders } from "../../../functions/services/get-telegram-user.ts";
 
 const baseUrl = import.meta.env.VITE_API_URL || "";
 

src/main.tsx

@@ -4,6 +4,9 @@ import { App } from "./screens/app.tsx";
 import "./index.css";
 import "@mdi/font/css/materialdesignicons.min.css";
 import { platform } from "./lib/platform/platform.ts";
+import { applyFormatters } from "mobx-log";
+
+applyFormatters();
 
 platform.initialize();
 

src/screens/ai-mass-creation/ai-mass-creation-form.tsx

@@ -12,7 +12,7 @@ import { Input } from "../../ui/input.tsx";
 import React from "react";
 import { ValidationError } from "../../ui/validation-error.tsx";
 import { useMainButton } from "../../lib/platform/use-main-button.ts";
-import { useMainButtonProgress } from "../../lib/platform/use-main-button-progress.tsx";
+import { useProgress } from "../../lib/platform/use-progress.tsx";
 import { useBackButton } from "../../lib/platform/use-back-button.ts";
 import { screenStore } from "../../store/screen-store.ts";
 
@@ -28,7 +28,7 @@ export const AiMassCreationForm = observer(() => {
     screenStore.back();
   });
 
-  useMainButtonProgress(() => store.aiMassGenerateRequest.isLoading);
+  useProgress(() => store.aiMassGenerateRequest.isLoading);
 
   return (
     <Screen title={t("ai_cards_title")}>

src/screens/ai-mass-creation/api-keys-screen.tsx

@@ -14,7 +14,7 @@ import { theme } from "../../ui/theme.tsx";
 import { Flex } from "../../ui/flex.tsx";
 import { chatGptModels } from "./store/ai-mass-creation-store.ts";
 import { useBackButton } from "../../lib/platform/use-back-button.ts";
-import { useMainButtonProgress } from "../../lib/platform/use-main-button-progress.tsx";
+import { useProgress } from "../../lib/platform/use-progress.tsx";
 import { TextField } from "mobx-form-lite";
 
 export const ApiKeysScreen = observer(() => {
@@ -29,7 +29,7 @@ export const ApiKeysScreen = observer(() => {
     store.screen.onChange(null);
   });
 
-  useMainButtonProgress(() => store.upsertUserAiCredentialsRequest.isLoading);
+  useProgress(() => store.upsertUserAiCredentialsRequest.isLoading);
 
   const isRegularInput = store.isApiKeyRegularInput;
 

src/screens/ai-mass-creation/cards-generated-screen.tsx

@@ -12,7 +12,7 @@ import { theme } from "../../ui/theme.tsx";
 import React from "react";
 import { t } from "../../translations/t.ts";
 import { screenStore } from "../../store/screen-store.ts";
-import { useMainButtonProgress } from "../../lib/platform/use-main-button-progress.tsx";
+import { useProgress } from "../../lib/platform/use-progress.tsx";
 import { CardNumber } from "../../ui/card-number.tsx";
 import { translateAddCards } from "./translations.ts";
 
@@ -37,7 +37,7 @@ export const CardsGeneratedScreen = observer(() => {
     },
   );
 
-  useMainButtonProgress(() => store.addCardsMultipleRequest.isLoading);
+  useProgress(() => store.addCardsMultipleRequest.isLoading);
 
   return (
     <Screen

src/screens/ai-mass-creation/generated-card-preview-screen.tsx

@@ -2,8 +2,8 @@ import { observer } from "mobx-react-lite";
 import { useAiMassCreationStore } from "./store/ai-mass-creation-store-provider.tsx";
 import { assert } from "../../lib/typescript/assert.ts";
 import { useState } from "react";
-import { createMockCardPreviewForm } from "../deck-form/create-mock-card-preview-form.ts";
-import { CardPreview } from "../deck-form/card-preview.tsx";
+import { createMockCardPreviewForm } from "../deck-form/card-form/create-mock-card-preview-form.ts";
+import { CardPreview } from "../deck-form/card-form/card-preview.tsx";
 
 type Props = {
   card: { front: string; back: string; example?: string };

src/screens/ai-mass-creation/previous-prompts-screen.tsx

@@ -1,4 +1,4 @@
-import { observer, useLocalStore } from "mobx-react-lite";
+import { observer, useLocalObservable } from "mobx-react-lite";
 import { Screen } from "../shared/screen.tsx";
 import { useAiMassCreationStore } from "./store/ai-mass-creation-store-provider.tsx";
 import { useMount } from "../../lib/react/use-mount.ts";
@@ -16,7 +16,7 @@ import { EmptyState } from "../../ui/empty-state.tsx";
 
 export const PreviousPromptsScreen = observer(() => {
   const store = useAiMassCreationStore();
-  const localStore = useLocalStore(() => ({
+  const localStore = useLocalObservable(() => ({
     selectedIndex: new TextField<number | null>(null),
     get isMainButtonVisible() {
       return localStore.selectedIndex.value !== null;
@@ -41,7 +41,7 @@ export const PreviousPromptsScreen = observer(() => {
 
   return (
     <Screen title={t("ai_cards_previous_prompts")}>
-      <Flex direction={"column"} gap={4}>
+      <Flex direction={"column"} gap={8}>
         {store.userPreviousPromptsRequest.isLoading && <ScreenLoader />}
         {store.userPreviousPromptsRequest.result.status === "success" &&
           store.userPreviousPromptsRequest.result.data.length === 0 && (
@@ -72,7 +72,7 @@ export const PreviousPromptsScreen = observer(() => {
                     }),
                     isSelected &&
                       css({
-                        border: `2px solid ${theme.buttonColor}`,
+                        outline: `2px solid ${theme.buttonColor}`,
                       }),
                   )}
                   key={i}

src/screens/ai-mass-creation/store/ai-mass-creation-store.ts

@@ -270,10 +270,12 @@ export class AiMassCreationStore {
       return;
     }
 
-    assert(screenStore.screen.type === "aiMassCreation", "Invalid screen type");
+    const { screen } = screenStore;
+
+    assert(screen.type === "aiMassCreation", "Invalid screen type");
 
     const result = await this.addCardsMultipleRequest.execute({
-      deckId: screenStore.screen.deckId,
+      deckId: screen.deckId,
       cards: this.massCreationForm.cards.value,
     });
 
@@ -284,9 +286,10 @@ export class AiMassCreationStore {
 
     notifySuccess(t("ai_cards_added"));
     deckListStore.replaceDeck(result.data.deck);
+    deckListStore.updateCardsToReview(result.data.cardsToReview);
     screenStore.go({
       type: "deckForm",
-      deckId: screenStore.screen.deckId,
+      deckId: screen.deckId,
     });
   }
 }

src/screens/ai-mass-creation/translations.ts

@@ -76,13 +76,13 @@ export const translateHowMassCreationWorksText = () => {
       example2: "Пример 2",
       description:
         "Генерируйте множество карточек за раз с использованием ИИ и вашего собственного ключа API",
-      promptExample1: "Сгенерировать 3 карточки со столицами мира",
+      promptExample1: "Сгенерируй 3 карточки со столицами мира",
       frontExample1: "Страна",
       backExample1: "Столица",
       resultExample1:
         "Пример результата: Германия - Берлин, Франция - Париж, Канада - Оттава",
       promptExample2:
-        "Сгенерировать 2 карточки с русскими и французскими словами на тему фруктов",
+        "Сгенерируй 2 карточки с русскими и французскими словами на тему фруктов",
       frontExample2: "Фрукт на русском",
       backExample2: "Фрукт на французском",
       resultExample2: "Пример результата: Яблоко - Pomme, Банан - Banane",

src/screens/app.tsx

@@ -3,9 +3,9 @@ import { MainScreen } from "./deck-list/main-screen.tsx";
 import { DeckScreen } from "./deck-review/deck-screen.tsx";
 import { ReviewStoreProvider } from "./deck-review/store/review-store-context.tsx";
 import { screenStore } from "../store/screen-store.ts";
-import { DeckFormScreen } from "./deck-form/deck-form-screen.tsx";
-import { DeckFormStoreProvider } from "./deck-form/store/deck-form-store-context.tsx";
-import { QuickAddCardFormPage } from "./deck-form/quick-add-card-form-page.tsx";
+import { DeckFormScreen } from "./deck-form/deck-form/deck-form-screen.tsx";
+import { DeckFormStoreProvider } from "./deck-form/deck-form/store/deck-form-store-context.tsx";
+import { QuickAddCardFormPage } from "./deck-form/card-form/quick-add-card-form-page.tsx";
 import { VersionWarning } from "./shared/version-warning.tsx";
 import React from "react";
 import { deckListStore } from "../store/deck-list-store.ts";
@@ -40,6 +40,7 @@ import { SnackbarProviderWrapper } from "./shared/snackbar/snackbar-provider-wra
 import { Debug } from "./debug/debug.tsx";
 import { BrowserHeader } from "./shared/browser-platform/browser-header.tsx";
 import { BrowserMainButton } from "./shared/browser-platform/browser-main-button.tsx";
+import { CardInputModeScreen } from "./card-input-mode/card-input-mode-screen.tsx";
 
 export const App = observer(() => {
   useRestoreFullScreenExpand();
@@ -169,6 +170,11 @@ export const App = observer(() => {
           </AiMassCreationStoreProvider>
         </PreventTelegramSwipeDownClosingIos>
       )}
+      {screenStore.screen.type === "cardInputMode" && (
+        <PreventTelegramSwipeDownClosingIos>
+          <CardInputModeScreen />
+        </PreventTelegramSwipeDownClosingIos>
+      )}
       <BrowserMainButton />
     </div>
   );

src/screens/card-input-mode/card-input-mode-screen.tsx

@@ -0,0 +1,59 @@
+import { observer } from "mobx-react-lite";
+import { Screen } from "../shared/screen.tsx";
+import { useBackButton } from "../../lib/platform/use-back-button.ts";
+import { screenStore } from "../../store/screen-store.ts";
+import { useState } from "react";
+import { CardInputModeStore } from "./store/card-input-mode-store.ts";
+import { useMount } from "../../lib/react/use-mount.ts";
+import { FullScreenLoader } from "../../ui/full-screen-loader.tsx";
+import { RadioList } from "../../ui/radio-list/radio-list.tsx";
+import { useMainButton } from "../../lib/platform/use-main-button.ts";
+import { useProgress } from "../../lib/platform/use-progress.tsx";
+import { t } from "../../translations/t.ts";
+
+export const CardInputModeScreen = observer(() => {
+  const [store] = useState(() => new CardInputModeStore());
+
+  useBackButton(() => {
+    screenStore.back();
+  });
+
+  useMount(() => {
+    store.load();
+  });
+
+  useMainButton(t("save"), () => {
+    store.submit();
+  });
+
+  useProgress(() => {
+    return store.cardInputModesRequest.isLoading;
+  });
+
+  return (
+    <Screen title={t('card_input_mode_screen')}>
+      {store.cardInputModesRequest.result.status === "loading" ? (
+        <FullScreenLoader />
+      ) : null}
+      {store.cardInputModesRequest.result.status === "success" ? (
+        <div>
+          <RadioList
+            selectedId={store.modeId?.value}
+            options={[
+              { id: null, title: "Manual input" } as {
+                id: string | null;
+                title: string;
+              },
+            ].concat(
+              store.cardInputModesRequest.result.data.map((inputMode) => ({
+                id: inputMode.id,
+                title: inputMode.title,
+              })),
+            )}
+            onChange={store.modeId.onChange}
+          />
+        </div>
+      ) : null}
+    </Screen>
+  );
+});