Generated card preview (#36)

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

@@ -5,8 +5,8 @@ import { AiMassCreationForm } from "./ai-mass-creation-form.tsx";
 import { HowMassCreationWorksScreen } from "./how-mass-creation-works-screen.tsx";
 import { ApiKeysScreen } from "./api-keys-screen.tsx";
 import { useMount } from "../../lib/react/use-mount.ts";
-import { CardsGeneratedScreen } from "./cards-generated-screen.tsx";
 import { PreviousPromptsScreen } from "./previous-prompts-screen.tsx";
+import { CardsGeneratedScreenWrapper } from "./cards-generated-screen-wrapper.tsx";
 
 export const AiMassCreationScreen = observer(() => {
   const store = useAiMassCreationStore();
@@ -22,7 +22,7 @@ export const AiMassCreationScreen = observer(() => {
     return <ApiKeysScreen />;
   }
   if (store.screen.value === "cardsGenerated") {
-    return <CardsGeneratedScreen />;
+    return <CardsGeneratedScreenWrapper />;
   }
   if (store.screen.value === "previousPrompts") {
     return <PreviousPromptsScreen />;

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

@@ -0,0 +1,19 @@
+import { observer } from "mobx-react-lite";
+import { useAiMassCreationStore } from "./store/ai-mass-creation-store-provider.tsx";
+import { assert } from "../../lib/typescript/assert.ts";
+import { GeneratedCardPreviewScreen } from "./generated-card-preview-screen.tsx";
+import React from "react";
+import { CardsGeneratedScreen } from "./cards-generated-screen.tsx";
+
+export const CardsGeneratedScreenWrapper = observer(() => {
+  const store = useAiMassCreationStore();
+  assert(store.massCreationForm);
+
+  if (store.massCreationFormPreviewCard) {
+    return (
+      <GeneratedCardPreviewScreen card={store.massCreationFormPreviewCard} />
+    );
+  }
+
+  return <CardsGeneratedScreen />;
+});

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

@@ -64,8 +64,11 @@ export const CardsGeneratedScreen = observer(() => {
       <div>
         <ListHeader text={t("ai_cards_by_ai")} />
         <List
-          animateTap={false}
           items={store.massCreationForm.cards.value.map((card, i) => ({
+            onClick: () => {
+              assert(store.massCreationForm);
+              store.massCreationForm.selectedCardIndex.onChange(i);
+            },
             text: (
               <div>
                 <div>
@@ -88,7 +91,8 @@ export const CardsGeneratedScreen = observer(() => {
                   reset.button,
                   css({ paddingTop: 4, fontSize: 16 }),
                 )}
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                   store.deleteGeneratedCard(i);
                 }}
               >

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

@@ -0,0 +1,27 @@
+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";
+
+type Props = {
+  card: { front: string; back: string; example?: string };
+};
+
+export const GeneratedCardPreviewScreen = observer((props: Props) => {
+  const store = useAiMassCreationStore();
+  assert(store.massCreationForm);
+  const { card } = props;
+  const [form] = useState(createMockCardPreviewForm(card));
+
+  return (
+    <CardPreview
+      form={form}
+      onBack={() => {
+        assert(store.massCreationForm);
+        store.massCreationForm.selectedCardIndex.onChange(null);
+      }}
+    />
+  );
+});

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

@@ -91,6 +91,7 @@ export class AiMassCreationStore {
   };
 
   massCreationForm?: {
+    selectedCardIndex: TextField<null | number>;
     cards: ListField<{
       front: string;
       back: string;
@@ -150,6 +151,28 @@ export class AiMassCreationStore {
     });
   }
 
+  get massCreationFormPreviewCard() {
+    if (!this.massCreationForm) {
+      return null;
+    }
+    if (this.massCreationForm.selectedCardIndex.value === null) {
+      return null;
+    }
+
+    const card =
+      this.massCreationForm.cards.value[
+        this.massCreationForm.selectedCardIndex.value
+      ];
+    if (!card) {
+      return null;
+    }
+
+    return {
+      ...card,
+      example: card.example || undefined,
+    };
+  }
+
   async deleteGeneratedCard(index: number) {
     if (!this.canDeleteGeneratedCard) {
       return;
@@ -223,6 +246,7 @@ export class AiMassCreationStore {
     const innerResult = result.data;
     if (innerResult.data) {
       this.massCreationForm = {
+        selectedCardIndex: new TextField<number | null>(null),
         cards: new ListField(
           innerResult.data.cards.map((card) => ({
             front: card.front,

src/screens/component-catalog/card-preview-story.tsx

@@ -1,37 +1,6 @@
 import { CardPreview } from "../deck-form/card-preview.tsx";
 import { useState } from "react";
-import {
-  CardFormStoreInterface,
-  CardInnerScreenType,
-} from "../deck-form/store/card-form-store-interface.ts";
-import { ListField, TextField } from "mobx-form-lite";
-import { CardAnswerType } from "../../../functions/db/custom-types.ts";
-import { CardAnswerFormType } from "../deck-form/store/deck-form-store.ts";
-
-const createCardPreviewForm = (card: {
-  front: string;
-  back: string;
-  example?: string;
-}): CardFormStoreInterface => {
-  return {
-    cardForm: {
-      front: new TextField<string>(card.front),
-      back: new TextField<string>(card.back),
-      example: new TextField<string>(card.example ?? ""),
-      answerType: new TextField<CardAnswerType>("remember"),
-      answerFormType: "new",
-      options: null,
-      answers: new ListField<CardAnswerFormType>([]),
-      answerId: "0",
-    },
-    form: undefined,
-    cardInnerScreen: new TextField<CardInnerScreenType>(null),
-    onBackCard: () => {},
-    onSaveCard: () => {},
-    isSending: false,
-    markCardAsRemoved: () => {},
-  };
-};
+import { createMockCardPreviewForm } from "../deck-form/create-mock-card-preview-form.ts";
 
 export const CardPreviewStory = (props: {
   card: {
@@ -40,7 +9,7 @@ export const CardPreviewStory = (props: {
     example?: string;
   };
 }) => {
-  const [form] = useState(createCardPreviewForm(props.card));
+  const [form] = useState(createMockCardPreviewForm(props.card));
 
   return <CardPreview form={form} onBack={() => {}} />;
 };

src/screens/component-catalog/components.tsx

@@ -5,6 +5,7 @@ import { SelectStory } from "./select-story.tsx";
 import { PieChartCanvasStory } from "./pie-chart-canvas-story.tsx";
 import { SnackbarStory } from "./snackbar-story.tsx";
 import { ListStory } from "./list-story.tsx";
+import { ListStoryMultipleIcons } from "./list-story-multiple-icons.tsx";
 
 export type Component = {
   name: string;
@@ -61,4 +62,8 @@ export const components: Array<Component> = [
     name: ListStory.name,
     component: <ListStory />,
   },
+  {
+    name: ListStoryMultipleIcons.name,
+    component: <ListStoryMultipleIcons />,
+  },
 ];

src/screens/component-catalog/list-story-multiple-icons.tsx

@@ -0,0 +1,62 @@
+import { CardNumber } from "../../ui/card-number.tsx";
+import { css, cx } from "@emotion/css";
+import { theme } from "../../ui/theme.tsx";
+import { reset } from "../../ui/reset.ts";
+import { List } from "../../ui/list.tsx";
+import React from "react";
+import { Flex } from "../../ui/flex.tsx";
+
+export const ListStoryMultipleIcons = () => {
+  return (
+    <List
+      animateTap={false}
+      items={Array(3)
+        .fill(null)
+        .map((card, i) => ({
+          text: (
+            <div>
+              <div>
+                <CardNumber number={i + 1} />
+                Test title
+              </div>
+              <div
+                className={css({
+                  color: theme.hintColor,
+                  fontSize: 14,
+                })}
+              >
+                Test description Test description Test description Test
+                description Test description
+              </div>
+            </div>
+          ),
+          right: (
+            <Flex gap={8}>
+              <button
+                className={cx(reset.button, css({ fontSize: 16 }))}
+                onClick={() => {}}
+              >
+                <i
+                  className={cx(
+                    "mdi mdi-eye-check-outline mdi-24px",
+                    css({ color: theme.buttonColor }),
+                  )}
+                />
+              </button>
+              <button
+                className={cx(reset.button, css({ fontSize: 16 }))}
+                onClick={() => {}}
+              >
+                <i
+                  className={cx(
+                    "mdi mdi-delete-circle mdi-24px",
+                    css({ color: theme.danger }),
+                  )}
+                />
+              </button>
+            </Flex>
+          ),
+        }))}
+    />
+  );
+};

src/screens/deck-form/create-mock-card-preview-form.ts

@@ -0,0 +1,32 @@
+import {
+  CardFormStoreInterface,
+  CardInnerScreenType,
+} from "./store/card-form-store-interface.ts";
+import { ListField, TextField } from "mobx-form-lite";
+import { CardAnswerType } from "../../../functions/db/custom-types.ts";
+import { CardAnswerFormType } from "./store/deck-form-store.ts";
+
+export const createMockCardPreviewForm = (card: {
+  front: string;
+  back: string;
+  example?: string;
+}): CardFormStoreInterface => {
+  return {
+    cardForm: {
+      front: new TextField<string>(card.front),
+      back: new TextField<string>(card.back),
+      example: new TextField<string>(card.example ?? ""),
+      answerType: new TextField<CardAnswerType>("remember"),
+      answerFormType: "new",
+      options: null,
+      answers: new ListField<CardAnswerFormType>([]),
+      answerId: "0",
+    },
+    form: undefined,
+    cardInnerScreen: new TextField<CardInnerScreenType>(null),
+    onBackCard: () => {},
+    onSaveCard: () => {},
+    isSending: false,
+    markCardAsRemoved: () => {},
+  };
+};

src/screens/shared/card/card.tsx

@@ -84,12 +84,14 @@ export const Card = observer((props: Props) => {
         >
           <Dropdown
             items={[
-              {
-                text: t("hide_card_forever"),
-                onClick: () => {
-                  onHideCardForever?.();
-                },
-              },
+              onHideCardForever
+                ? {
+                    text: t("hide_card_forever"),
+                    onClick: () => {
+                      onHideCardForever();
+                    },
+                  }
+                : undefined,
               card.canSpeak
                 ? {
                     text: userStore.isSpeakingCardsMuted.value