Cards stats for each deck inside folder; autosize textarea

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",

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";

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={() => {

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";

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",

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";

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;

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 && (

src/screens/deck-review/card-field-view.tsx → 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 }) => {

src/screens/deck-review/card-speaker.tsx → 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";

src/screens/deck-review/card.tsx → 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";
 

src/screens/deck-list/my-deck-row.tsx → 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 (

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({

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}

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;

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: