Remind user to study new cards (#19)

* Remind user to study new cards

src/screens/deck-review/deck-finished.tsx

@@ -8,6 +8,7 @@ import { useMount } from "../../lib/react/use-mount.ts";
 import { screenStore } from "../../store/screen-store.ts";
 import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
+import { theme } from "../../ui/theme.tsx";
 
 const encouragingMessages = [
   "Consistency is the key to mastery, and each step you take brings you closer to your learning goals",
@@ -28,10 +29,11 @@ const encouragingMessages = [
 
 type Props = {
   type: "deck" | "repeat_all";
+  newCardsCount?: number;
 };
 
 export const DeckFinished = observer((props: Props) => {
-  const { type } = props;
+  const { type, newCardsCount } = props;
   const reviewStore = useReviewStore();
 
   useMount(() => {
@@ -56,8 +58,24 @@ export const DeckFinished = observer((props: Props) => {
             ? `You have finished this deck for now 🎉`
             : `You have repeated all the cards for today 🎉`}
         </p>
-
-        <p>{random(encouragingMessages)} 😊</p>
+        {type === "repeat_all" && newCardsCount && newCardsCount > 1 ? (
+          <p>
+            Want more? You have{" "}
+            <span
+              className={css({
+                color: theme.linkColor,
+              })}
+              onClick={() => {
+                screenStore.go({ type: "main" });
+              }}
+            >
+              {newCardsCount}
+            </span>{" "}
+            new cards to study
+          </p>
+        ) : (
+          <p>{random(encouragingMessages)} 😊</p>
+        )}
       </div>
     </DeckFinishedModal>
   );

src/screens/deck-review/repeat-all-screen.tsx

@@ -18,7 +18,12 @@ export const RepeatAllScreen = observer(() => {
   });
 
   if (reviewStore.isFinished) {
-    return <DeckFinished type={"repeat_all"} />;
+    return (
+      <DeckFinished
+        type={"repeat_all"}
+        newCardsCount={deckListStore.newCardsCount}
+      />
+    );
   } else if (reviewStore.currentCardId) {
     return <Review />;
   }

src/store/deck-list-store.test.ts

@@ -124,6 +124,7 @@ describe("deck list store", () => {
 
     expect(deckListStore.myId).toBe(111);
     expect(deckListStore.publicDecks).toHaveLength(0);
+    expect(deckListStore.newCardsCount).toBe(3);
     expect(deckListStore.selectedDeck?.cardsToReview).toMatchInlineSnapshot(`
       [
         {

src/store/deck-list-store.ts

@@ -240,6 +240,14 @@ export class DeckListStore {
     );
   }
 
+  get newCardsCount() {
+    return this.myDecks.reduce((acc, deck) => {
+      return (
+        acc + deck.cardsToReview.filter((card) => card.type === "new").length
+      );
+    }, 0);
+  }
+
   removeDeck() {
     const deck = this.selectedDeck;
     if (!deck) {