optimize inputs

src/screens/useMacTabNavigationFix.tsx → src/lib/keyboard/useMacTabNavigationFix.tsx

@@ -28,7 +28,11 @@ export const useMacTabNavigationFix = () => {
             // Shift + Tab was pressed
             // @ts-expect-error
             inputs[currentIndex - 1].focus();
-          } else if (!event.shiftKey && currentIndex >= 0 && currentIndex < inputs.length - 1) {
+          } else if (
+            !event.shiftKey &&
+            currentIndex >= 0 &&
+            currentIndex < inputs.length - 1
+          ) {
             // Only Tab was pressed
             // @ts-expect-error
             inputs[currentIndex + 1].focus();

src/screens/deck-form/card-form-view.tsx

@@ -24,15 +24,15 @@ export const CardFormView = observer((props: Props) => {
     >
       <h3 className={css({ textAlign: "center" })}>Add card</h3>
       <Label text={"Front"} isRequired>
-        <Input {...cardForm.front.props} rows={5} type={"textarea"} />
+        <Input field={cardForm.front} rows={5} type={"textarea"} />
       </Label>
 
       <Label text={"Back"} isRequired>
-        <Input {...cardForm.back.props} rows={5} type={"textarea"} />
+        <Input field={cardForm.back} rows={5} type={"textarea"} />
       </Label>
 
       <Label text={"Example / Note"}>
-        <Input {...cardForm.example.props} rows={3} type={"textarea"} />
+        <Input field={cardForm.example} rows={3} type={"textarea"} />
       </Label>
     </div>
   );

src/screens/deck-form/deck-form.tsx

@@ -12,7 +12,7 @@ import { useMount } from "../../lib/react/use-mount.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
 import { assert } from "../../lib/typescript/assert.ts";
-import { useMacTabNavigationFix } from "../useMacTabNavigationFix.tsx";
+import { useMacTabNavigationFix } from "../../lib/keyboard/useMacTabNavigationFix.tsx";
 
 export const DeckForm = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -49,12 +49,12 @@ export const DeckForm = observer(() => {
         {screen.deckId ? "Edit deck" : "Add deck"}
       </h3>
       <Label text={"Title"} isRequired>
-        <Input {...deckFormStore.form.title.props} />
+        <Input field={deckFormStore.form.title} />
       </Label>
 
       <Label text={"Description"}>
         <Input
-          {...deckFormStore.form.description.props}
+          field={deckFormStore.form.description}
           rows={5}
           type={"textarea"}
         />

src/screens/deck-form/quick-add-card-form.tsx

@@ -5,7 +5,7 @@ import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { QuickAddCardFormStore } from "../../store/quick-add-card-form-store.ts";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
-import { useMacTabNavigationFix } from "../useMacTabNavigationFix.tsx";
+import { useMacTabNavigationFix } from "../../lib/keyboard/useMacTabNavigationFix.tsx";
 
 export const QuickAddCardForm = observer(() => {
   const [quickAddCardStore] = useState(() => new QuickAddCardFormStore());

src/screens/shared/version-warning.tsx

@@ -3,7 +3,7 @@ import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
 
 export const VersionWarning = () => {
-  if (WebApp.isVersionAtLeast('6.1')) {
+  if (WebApp.isVersionAtLeast("6.1")) {
     return null;
   }
 

src/screens/user-settings/settings-row.tsx

@@ -13,7 +13,7 @@ export const SettingsRow = observer((props: Props) => {
         backgroundColor: theme.secondaryBgColor,
         borderRadius: theme.borderRadius,
         height: 48,
-        boxSizing: 'border-box',
+        boxSizing: "border-box",
         padding: 12,
         display: "flex",
         justifyContent: "space-between",

src/screens/user-settings/user-settings-main.tsx

@@ -13,6 +13,8 @@ import { theme } from "../../ui/theme.tsx";
 import { Select } from "../../ui/select.tsx";
 import { Hint } from "../../ui/hint.tsx";
 import { css } from "@emotion/css";
+import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
+import { screenStore } from "../../store/screen-store.ts";
 
 export const timeRanges = generateTimeRange();
 
@@ -28,6 +30,9 @@ export const UserSettingsMain = observer(() => {
     () => userSettingsStore.isSaveVisible,
   );
 
+  useBackButton(() => {
+    screenStore.go({ type: "main" });
+  });
   useTelegramProgress(() => userSettingsStore.isSending);
 
   if (deckListStore.myInfo?.state !== "fulfilled") {
@@ -83,10 +88,7 @@ export const UserSettingsMain = observer(() => {
           </SettingsRow>
         )}
 
-        <Hint>
-          ⭐ Daily reminders help you keep up with your reviews, making it
-          easier for you to remember the information
-        </Hint>
+        <Hint>⭐ Daily reminders will help you remember to repeat cards</Hint>
       </div>
     </div>
   );

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

@@ -9,7 +9,7 @@ vi.mock("./screen-store", () => {
     screenStore: {
       screen: {
         type: "deckForm",
-        deckFormId: 1,
+        deckId: 1,
       },
     },
   };

src/store/deck-form-store.ts

@@ -34,7 +34,7 @@ export const createDeckTitleField = (value: string) => {
   );
 };
 
-const createCardSideField = (value: string) => {
+export const createCardSideField = (value: string) => {
   return new TextField(value, validators.required());
 };
 

src/store/quick-add-card-form-store.ts

@@ -1,4 +1,8 @@
-import { CardFormType, createDeckTitleField } from "./deck-form-store.ts";
+import {
+  CardFormType,
+  createCardSideField,
+  createDeckTitleField,
+} from "./deck-form-store.ts";
 import { action, makeAutoObservable } from "mobx";
 import {
   formTouchAll,
@@ -16,8 +20,8 @@ import { deckListStore } from "./deck-list-store.ts";
 
 export class QuickAddCardFormStore {
   form: CardFormType = {
-    back: createDeckTitleField(""),
-    front: createDeckTitleField(""),
+    back: createCardSideField(""),
+    front: createCardSideField(""),
     example: new TextField(""),
   };
   isSending = false;

src/ui/input.tsx

@@ -1,21 +1,20 @@
 import { ChangeEvent } from "react";
 import { css } from "@emotion/css";
 import { theme } from "./theme.tsx";
+import { TextField } from "../lib/mobx-form/mobx-form.ts";
+import { observer } from "mobx-react-lite";
 
 interface Props {
-  value: string;
   placeholder?: string;
-  onChange: (value: string) => void;
   type?: "input" | "textarea";
-  isTouched?: boolean;
-  onBlur: () => void;
-  error?: string;
+  field: TextField<string>;
   rows?: number;
 }
 
-export const Input = (props: Props) => {
-  const { onChange, value, placeholder, type, rows, isTouched, error, onBlur } =
-    props;
+export const Input = observer((props: Props) => {
+  const { field, placeholder, type, rows } = props;
+  const { onChange, value, isTouched, error, onBlur } = field.props;
+
   const handleInputChange = (
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -58,4 +57,4 @@ export const Input = (props: Props) => {
       ) : null}
     </div>
   );
-};
+});