From 59e8eb893a6b53f730d921caf69996044b185cad Mon Sep 17 00:00:00 2001
From: Egor Gorbachev <7gorbachevm@gmail.com>
Date: Wed, 10 Jan 2024 10:13:02 +0700
Subject: [PATCH] Cards stats for each deck inside folder; autosize textarea
 (#38)

---
 package-lock.json                             | 25 +++++++++++++++----
 package.json                                  |  6 +++--
 src/screens/deck-catalog/deck-catalog.tsx     |  2 +-
 src/screens/deck-form/card-list.tsx           |  7 ++++--
 src/screens/deck-form/card-preview.tsx        |  2 +-
 src/screens/deck-list/main-screen.tsx         |  8 +++---
 src/screens/deck-review/review.tsx            |  2 +-
 .../deck-review/want-more-cards-button.tsx    |  4 ++-
 src/screens/folder-review/folder-preview.tsx  |  9 +++----
 .../card}/card-field-view.tsx                 |  2 +-
 .../card}/card-speaker.tsx                    |  6 ++---
 .../{deck-review => shared/card}/card.tsx     |  6 ++---
 .../{deck-list => shared}/deck-loading.tsx    |  0
 .../cards-to-review-count.tsx                 |  0
 .../deck-row-with-cards-to-review.tsx}        |  8 +++---
 src/ui/button-side-aligned.tsx                |  3 +++
 src/ui/centered-unstyled-button.tsx           |  3 +++
 src/ui/deck-category-logo.tsx                 |  5 +++-
 src/ui/input.tsx                              | 12 +++++++--
 19 files changed, 74 insertions(+), 36 deletions(-)
 rename src/screens/{deck-review => shared/card}/card-field-view.tsx (76%)
 rename src/screens/{deck-review => shared/card}/card-speaker.tsx (82%)
 rename src/screens/{deck-review => shared/card}/card.tsx (90%)
 rename src/screens/{deck-list => shared}/deck-loading.tsx (100%)
 rename src/screens/{deck-list => shared/deck-row-with-cards-to-review}/cards-to-review-count.tsx (100%)
 rename src/screens/{deck-list/my-deck-row.tsx => shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx} (85%)

diff --git a/package-lock.json b/package-lock.json
index 28afc52f..ad4ca56d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,7 @@
         "@mdi/font": "^5.9.55",
         "@supabase/supabase-js": "^2.38.0",
         "@twa-dev/sdk": "^6.9.0",
-        "@types/luxon": "^3.3.2",
-        "@types/sanitize-html": "^2.9.5",
+        "autosize": "^6.0.1",
         "colord": "^2.9.3",
         "framer-motion": "^10.16.4",
         "grammy": "^1.19.1",
@@ -37,9 +36,12 @@
       "devDependencies": {
         "@cloudflare/workers-types": "^4.20231002.0",
         "@peculiar/webcrypto": "^1.4.3",
+        "@types/autosize": "^4.0.3",
+        "@types/luxon": "^3.4.0",
         "@types/node": "^20.8.0",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
+        "@types/sanitize-html": "^2.9.5",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react": "^4.0.3",
@@ -1393,6 +1395,12 @@
       "resolved": "https://registry.npmjs.org/@twa-dev/types/-/types-6.9.0.tgz",
       "integrity": "sha512-hBkIuJgVtkLAPPhKsNfgyBpgS+15spzUScy5jgpfPJPqXPaaUVDTaWHbeEUU+lUgHmryeQjWyz+UjS7987Pyaw=="
     },
+    "node_modules/@types/autosize": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/autosize/-/autosize-4.0.3.tgz",
+      "integrity": "sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==",
+      "dev": true
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.2.tgz",
@@ -1462,9 +1470,10 @@
       "dev": true
     },
     "node_modules/@types/luxon": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.2.tgz",
-      "integrity": "sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.4.0.tgz",
+      "integrity": "sha512-PEVoA4MOfSsFNaPrZjIUGUZujBDxnO/tj2A2N9KfzlR+pNgpBdDuk0TmRvSMAVUP5q4q8IkMEZ8UOp3MIr+QgA==",
+      "dev": true
     },
     "node_modules/@types/node": {
       "version": "20.8.0",
@@ -1511,6 +1520,7 @@
       "version": "2.9.5",
       "resolved": "https://registry.npmjs.org/@types/sanitize-html/-/sanitize-html-2.9.5.tgz",
       "integrity": "sha512-2Sr1vd8Dw+ypsg/oDDfZ57OMSG2Befs+l2CMyCC5bVSK3CpE7lTB2aNlbbWzazgVA+Qqfuholwom6x/mWd1qmw==",
+      "dev": true,
       "dependencies": {
         "htmlparser2": "^8.0.0"
       }
@@ -2035,6 +2045,11 @@
         "node": "*"
       }
     },
+    "node_modules/autosize": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/autosize/-/autosize-6.0.1.tgz",
+      "integrity": "sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ=="
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
diff --git a/package.json b/package.json
index 99c501db..b572c996 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,7 @@
     "@mdi/font": "^5.9.55",
     "@supabase/supabase-js": "^2.38.0",
     "@twa-dev/sdk": "^6.9.0",
-    "@types/luxon": "^3.3.2",
-    "@types/sanitize-html": "^2.9.5",
+    "autosize": "^6.0.1",
     "colord": "^2.9.3",
     "framer-motion": "^10.16.4",
     "grammy": "^1.19.1",
@@ -54,9 +53,12 @@
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20231002.0",
     "@peculiar/webcrypto": "^1.4.3",
+    "@types/autosize": "^4.0.3",
+    "@types/luxon": "^3.4.0",
     "@types/node": "^20.8.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/sanitize-html": "^2.9.5",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
diff --git a/src/screens/deck-catalog/deck-catalog.tsx b/src/screens/deck-catalog/deck-catalog.tsx
index c6f2e18b..99fab0d5 100644
--- a/src/screens/deck-catalog/deck-catalog.tsx
+++ b/src/screens/deck-catalog/deck-catalog.tsx
@@ -13,7 +13,7 @@ import {
 } from "./store/deck-catalog-store.ts";
 import { DeckListItemWithDescription } from "../../ui/deck-list-item-with-description.tsx";
 import { range } from "../../lib/array/range.ts";
-import { DeckLoading } from "../deck-list/deck-loading.tsx";
+import { DeckLoading } from "../shared/deck-loading.tsx";
 import { NoDecksMatchingFilters } from "./no-decks-matching-filters.tsx";
 import { deckListStore } from "../../store/deck-list-store.ts";
 import { DeckAddedLabel } from "./deck-added-label.tsx";
diff --git a/src/screens/deck-form/card-list.tsx b/src/screens/deck-form/card-list.tsx
index 361a8825..01a3209c 100644
--- a/src/screens/deck-form/card-list.tsx
+++ b/src/screens/deck-form/card-list.tsx
@@ -11,6 +11,8 @@ import React from "react";
 import { reset } from "../../ui/reset.ts";
 import { t } from "../../translations/t.ts";
 import { Screen } from "../shared/screen.tsx";
+import { motion } from "framer-motion";
+import { whileTap } from "../../ui/animations.ts";
 
 export const CardList = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -82,7 +84,8 @@ export const CardList = observer(() => {
         </>
       )}
       {deckFormStore.filteredCards.map((cardForm, i) => (
-        <div
+        <motion.div
+          whileTap={whileTap}
           onClick={() => {
             deckFormStore.editCardFormById(cardForm.id);
           }}
@@ -98,7 +101,7 @@ export const CardList = observer(() => {
           <div className={css({ color: theme.hintColor })}>
             {cardForm.back.value}
           </div>
-        </div>
+        </motion.div>
       ))}
       <Button
         onClick={() => {
diff --git a/src/screens/deck-form/card-preview.tsx b/src/screens/deck-form/card-preview.tsx
index 4aab75a0..52ea74dd 100644
--- a/src/screens/deck-form/card-preview.tsx
+++ b/src/screens/deck-form/card-preview.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Screen } from "../shared/screen.tsx";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
-import { Card } from "../deck-review/card.tsx";
+import { Card } from "../shared/card/card.tsx";
 import { css } from "@emotion/css";
 import { t } from "../../translations/t.ts";
 import { CardFormType } from "./store/deck-form-store.ts";
diff --git a/src/screens/deck-list/main-screen.tsx b/src/screens/deck-list/main-screen.tsx
index bb200a9e..e94d16d0 100644
--- a/src/screens/deck-list/main-screen.tsx
+++ b/src/screens/deck-list/main-screen.tsx
@@ -2,14 +2,14 @@ import React, { Fragment } from "react";
 import { observer } from "mobx-react-lite";
 import { css, cx } from "@emotion/css";
 import { PublicDeck } from "./public-deck.tsx";
-import { MyDeckRow } from "./my-deck-row.tsx";
+import { DeckRowWithCardsToReview } from "../shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx";
 import { deckListStore } from "../../store/deck-list-store.ts";
 import { useMount } from "../../lib/react/use-mount.ts";
 import { Hint } from "../../ui/hint.tsx";
 import { theme } from "../../ui/theme.tsx";
 import { screenStore } from "../../store/screen-store.ts";
 import { Button } from "../../ui/button.tsx";
-import { DeckLoading } from "./deck-loading.tsx";
+import { DeckLoading } from "../shared/deck-loading.tsx";
 import WebApp from "@twa-dev/sdk";
 import { ListHeader } from "../../ui/list-header.tsx";
 import { range } from "../../lib/array/range.ts";
@@ -56,7 +56,7 @@ export const MainScreen = observer(() => {
             ? deckListStore.myDeckItemsVisible.map((listItem) => {
                 return (
                   <Fragment key={listItem.id}>
-                    <MyDeckRow
+                    <DeckRowWithCardsToReview
                       onClick={() => {
                         if (listItem.type === "deck") {
                           screenStore.go({
@@ -78,7 +78,7 @@ export const MainScreen = observer(() => {
                       ? listItem.decks.map((deck) => {
                           return (
                             <div className={css({ marginLeft: 24 })}>
-                              <MyDeckRow
+                              <DeckRowWithCardsToReview
                                 onClick={() => {
                                   screenStore.go({
                                     type: "deckMine",
diff --git a/src/screens/deck-review/review.tsx b/src/screens/deck-review/review.tsx
index f1fd1375..50686f20 100644
--- a/src/screens/deck-review/review.tsx
+++ b/src/screens/deck-review/review.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useMotionValue, useTransform } from "framer-motion";
-import { Card, cardSize } from "./card.tsx";
+import { Card, cardSize } from "../shared/card/card.tsx";
 import { observer } from "mobx-react-lite";
 import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
diff --git a/src/screens/deck-review/want-more-cards-button.tsx b/src/screens/deck-review/want-more-cards-button.tsx
index 93cea831..cf6417c7 100644
--- a/src/screens/deck-review/want-more-cards-button.tsx
+++ b/src/screens/deck-review/want-more-cards-button.tsx
@@ -6,7 +6,9 @@ import { screenStore } from "../../store/screen-store.ts";
 import { translateNewCardsCount } from "../../translations/translate-new-cards-count.tsx";
 import React from "react";
 
-type Props = { newCardsCount?: number | null };
+type Props = {
+  newCardsCount?: number | null;
+};
 
 export const WantMoreCardsButton = observer((props: Props) => {
   const { newCardsCount } = props;
diff --git a/src/screens/folder-review/folder-preview.tsx b/src/screens/folder-review/folder-preview.tsx
index 39e13001..8ded29d7 100644
--- a/src/screens/folder-review/folder-preview.tsx
+++ b/src/screens/folder-review/folder-preview.tsx
@@ -12,10 +12,10 @@ import { ButtonSideAligned } from "../../ui/button-side-aligned.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
 import { t } from "../../translations/t.ts";
 import { useReviewStore } from "../deck-review/store/review-store-context.tsx";
-import { CardRow } from "../../ui/card-row.tsx";
 import { ListHeader } from "../../ui/list-header.tsx";
 import { assert } from "../../lib/typescript/assert.ts";
 import { userStore } from "../../store/user-store.ts";
+import { DeckRowWithCardsToReview } from "../shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx";
 
 export const FolderPreview = observer(() => {
   const reviewStore = useReviewStore();
@@ -187,14 +187,13 @@ export const FolderPreview = observer(() => {
         <ListHeader text={t("decks")} />
         {folder.decks.map((deck, i) => {
           return (
-            <CardRow
+            <DeckRowWithCardsToReview
               key={i}
+              item={deck}
               onClick={() => {
                 deckListStore.goDeckById(deck.id);
               }}
-            >
-              {deck.name}
-            </CardRow>
+            />
           );
         })}
         {folder.cardsToReview.length === 0 && (
diff --git a/src/screens/deck-review/card-field-view.tsx b/src/screens/shared/card/card-field-view.tsx
similarity index 76%
rename from src/screens/deck-review/card-field-view.tsx
rename to src/screens/shared/card/card-field-view.tsx
index 9288fac2..eea6a54d 100644
--- a/src/screens/deck-review/card-field-view.tsx
+++ b/src/screens/shared/card/card-field-view.tsx
@@ -1,4 +1,4 @@
-import { sanitize } from "../../lib/sanitize-html/sanitize.ts";
+import { sanitize } from "../../../lib/sanitize-html/sanitize.ts";
 import React from "react";
 
 export const CardFieldView = (props: { text: string }) => {
diff --git a/src/screens/deck-review/card-speaker.tsx b/src/screens/shared/card/card-speaker.tsx
similarity index 82%
rename from src/screens/deck-review/card-speaker.tsx
rename to src/screens/shared/card/card-speaker.tsx
index 32fe24b5..ff407058 100644
--- a/src/screens/deck-review/card-speaker.tsx
+++ b/src/screens/shared/card/card-speaker.tsx
@@ -1,7 +1,7 @@
-import { isSpeechSynthesisSupported } from "../../lib/voice-playback/speak.ts";
-import { throttle } from "../../lib/throttle/throttle.ts";
+import { isSpeechSynthesisSupported } from "../../../lib/voice-playback/speak.ts";
+import { throttle } from "../../../lib/throttle/throttle.ts";
 import { css, cx } from "@emotion/css";
-import { theme } from "../../ui/theme.tsx";
+import { theme } from "../../../ui/theme.tsx";
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { LimitedCardUnderReviewStore } from "./card.tsx";
diff --git a/src/screens/deck-review/card.tsx b/src/screens/shared/card/card.tsx
similarity index 90%
rename from src/screens/deck-review/card.tsx
rename to src/screens/shared/card/card.tsx
index d97b3536..d8ca3bdd 100644
--- a/src/screens/deck-review/card.tsx
+++ b/src/screens/shared/card/card.tsx
@@ -1,10 +1,10 @@
 import { motion, MotionProps } from "framer-motion";
 import { css } from "@emotion/css";
 import React from "react";
-import { theme } from "../../ui/theme.tsx";
+import { theme } from "../../../ui/theme.tsx";
 import { observer } from "mobx-react-lite";
-import { CardUnderReviewStore } from "./store/card-under-review-store.ts";
-import { HorizontalDivider } from "../../ui/horizontal-divider.tsx";
+import { CardUnderReviewStore } from "../../deck-review/store/card-under-review-store.ts";
+import { HorizontalDivider } from "../../../ui/horizontal-divider.tsx";
 import { CardSpeaker } from "./card-speaker.tsx";
 import { CardFieldView } from "./card-field-view.tsx";
 
diff --git a/src/screens/deck-list/deck-loading.tsx b/src/screens/shared/deck-loading.tsx
similarity index 100%
rename from src/screens/deck-list/deck-loading.tsx
rename to src/screens/shared/deck-loading.tsx
diff --git a/src/screens/deck-list/cards-to-review-count.tsx b/src/screens/shared/deck-row-with-cards-to-review/cards-to-review-count.tsx
similarity index 100%
rename from src/screens/deck-list/cards-to-review-count.tsx
rename to src/screens/shared/deck-row-with-cards-to-review/cards-to-review-count.tsx
diff --git a/src/screens/deck-list/my-deck-row.tsx b/src/screens/shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx
similarity index 85%
rename from src/screens/deck-list/my-deck-row.tsx
rename to src/screens/shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx
index f0d5ad75..e11663be 100644
--- a/src/screens/deck-list/my-deck-row.tsx
+++ b/src/screens/shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx
@@ -1,10 +1,10 @@
 import { observer } from "mobx-react-lite";
 import { css } from "@emotion/css";
-import { theme } from "../../ui/theme.tsx";
+import { theme } from "../../../ui/theme.tsx";
 import React from "react";
 import { motion } from "framer-motion";
-import { whileTap } from "../../ui/animations.ts";
-import { DeckCardDbTypeWithType } from "../../store/deck-list-store.ts";
+import { whileTap } from "../../../ui/animations.ts";
+import { DeckCardDbTypeWithType } from "../../../store/deck-list-store.ts";
 import { CardsToReviewCount } from "./cards-to-review-count.tsx";
 
 type Props = {
@@ -16,7 +16,7 @@ type Props = {
   onClick: () => void;
 };
 
-export const MyDeckRow = observer((props: Props) => {
+export const DeckRowWithCardsToReview = observer((props: Props) => {
   const { item, onClick } = props;
 
   return (
diff --git a/src/ui/button-side-aligned.tsx b/src/ui/button-side-aligned.tsx
index 39f4b74d..04d3cded 100644
--- a/src/ui/button-side-aligned.tsx
+++ b/src/ui/button-side-aligned.tsx
@@ -55,6 +55,9 @@ export const ButtonSideAligned = (props: Props) => {
           position: "relative",
           transitionTimingFunction: "ease-in-out",
           transitionProperty: "background-color, border, box-shadow, color",
+          ":active": {
+            transform: "scale(0.97)",
+          },
         }),
         outline &&
           css({
diff --git a/src/ui/centered-unstyled-button.tsx b/src/ui/centered-unstyled-button.tsx
index a14ce701..1a233550 100644
--- a/src/ui/centered-unstyled-button.tsx
+++ b/src/ui/centered-unstyled-button.tsx
@@ -21,6 +21,9 @@ export const CenteredUnstyledButton = (props: Props) => {
           fontSize: 14,
           paddingTop: 6,
           textTransform: "uppercase",
+          ":active": {
+            transform: "scale(0.97)",
+          },
         }),
       )}
       onClick={onClick}
diff --git a/src/ui/deck-category-logo.tsx b/src/ui/deck-category-logo.tsx
index 276d2faa..17083dde 100644
--- a/src/ui/deck-category-logo.tsx
+++ b/src/ui/deck-category-logo.tsx
@@ -15,7 +15,10 @@ export const replaceFlagEmojiOnWindows = (logo: string) => {
 
 const supportsEmojiFlag = WebApp.platform !== "tdesktop";
 
-type Props = { logo: string; categoryName: string };
+type Props = {
+  logo: string;
+  categoryName: string;
+};
 
 export const DeckCategoryLogo = (props: Props) => {
   const { logo, categoryName } = props;
diff --git a/src/ui/input.tsx b/src/ui/input.tsx
index 3da637d1..d30dc39c 100644
--- a/src/ui/input.tsx
+++ b/src/ui/input.tsx
@@ -1,8 +1,9 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, useEffect, useRef } from "react";
 import { css } from "@emotion/css";
 import { theme } from "./theme.tsx";
 import { TextField } from "../lib/mobx-form/text-field.ts";
 import { observer } from "mobx-react-lite";
+import autosize from "autosize";
 
 interface Props {
   placeholder?: string;
@@ -14,6 +15,7 @@ interface Props {
 export const Input = observer((props: Props) => {
   const { field, placeholder, type, rows } = props;
   const { onChange, value, isTouched, error, onBlur } = field;
+  const inputRef = useRef<HTMLTextAreaElement | HTMLInputElement | null>(null);
 
   const handleInputChange = (
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -23,14 +25,20 @@ export const Input = observer((props: Props) => {
 
   const Tag = type === "textarea" ? "textarea" : "input";
 
+  useEffect(() => {
+    if (type === "textarea" && inputRef.current) {
+      autosize(inputRef.current);
+    }
+  }, [type]);
+
   return (
     <div className={css({ display: "flex", flexDirection: "column", gap: 4 })}>
       <Tag
+        ref={inputRef as any}
         className={css({
           display: "flex",
           padding: 10,
           fontSize: 16,
-          flex: 1,
           borderWidth: 1,
           borderStyle: "solid",
           borderColor: