fix mac tab navigation

functions/db/deck/decks-with-cards-schema.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-const deckCard = z.object({
+export const deckCardSchema = z.object({
   id: z.number(),
   created_at: z.string(),
   deck_id: z.number(),
@@ -21,11 +21,11 @@ export const deckSchema = z.object({
 
 export const deckWithCardsSchema = deckSchema.merge(
   z.object({
-    deck_card: z.array(deckCard),
+    deck_card: z.array(deckCardSchema),
   }),
 );
 
 export const decksWithCardsSchema = z.array(deckWithCardsSchema);
 
 export type DeckWithCardsDbType = z.infer<typeof deckWithCardsSchema>;
-export type DeckCardDbType = z.infer<typeof deckCard>;
+export type DeckCardDbType = z.infer<typeof deckCardSchema>;

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

@@ -12,6 +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";
 
 export const DeckForm = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -28,6 +29,7 @@ export const DeckForm = observer(() => {
     deckFormStore.onDeckBack();
   });
   useTelegramProgress(() => deckFormStore.isSending);
+  useMacTabNavigationFix();
 
   if (!deckFormStore.form) {
     return null;

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

@@ -5,6 +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";
 
 export const QuickAddCardForm = observer(() => {
   const [quickAddCardStore] = useState(() => new QuickAddCardFormStore());
@@ -16,6 +17,7 @@ export const QuickAddCardForm = observer(() => {
     quickAddCardStore.onBack();
   });
   useTelegramProgress(() => quickAddCardStore.isSending);
+  useMacTabNavigationFix();
 
   return <CardFormView cardForm={quickAddCardStore.form} />;
 });

src/screens/deck-list/deck-loading.tsx

@@ -12,7 +12,7 @@ export const DeckLoading = () => {
         cursor: "pointer",
         gap: 4,
         borderRadius: theme.borderRadius,
-        padding: "13px 12px",
+        padding: "14px 12px",
         background: theme.secondaryBgColor,
       })}
     >

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

@@ -1,6 +1,5 @@
 import { observer } from "mobx-react-lite";
 import { deckListStore } from "../../store/deck-list-store.ts";
-import { assert } from "../../lib/typescript/assert.ts";
 import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
 import React from "react";
@@ -14,8 +13,6 @@ import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 
 export const DeckPreview = observer(() => {
   const reviewStore = useReviewStore();
-  const deck = deckListStore.selectedDeck;
-  assert(deck, "Deck should not be empty before preview");
 
   useBackButton(() => {
     screenStore.go({ type: "main" });
@@ -29,6 +26,11 @@ export const DeckPreview = observer(() => {
     () => deckListStore.canReview,
   );
 
+  const deck = deckListStore.selectedDeck;
+  if (!deck) {
+    return null;
+  }
+
   return (
     <div
       className={css({

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.version !== "6.0") {
+  if (WebApp.isVersionAtLeast('6.1')) {
     return null;
   }
 
@@ -28,7 +28,7 @@ export const VersionWarning = () => {
           fontSize: 12,
         })}
       >
-        Please update your Telegram to ensure stable functioning of this bot.
+        Please update your Telegram to ensure stable functioning of this app.
       </div>
     </div>
   );

src/screens/useMacTabNavigationFix.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+
+const isMacOS = /Mac OS X/i.test(navigator.userAgent);
+
+// Custom hook for handling tab navigation in Safari on macOS
+// It's either a bug of Telegram for Mac or some issues with Safari WebView
+export const useMacTabNavigationFix = () => {
+  useEffect(() => {
+    if (!isMacOS) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Tab") {
+        event.preventDefault();
+
+        const inputs = Array.from(document.querySelectorAll("input, textarea"));
+        const activeElement = document.activeElement;
+        // @ts-expect-error
+        const currentIndex = inputs.indexOf(activeElement);
+        if (currentIndex === -1) {
+          // No input is currently focused, focus the first input
+          if (inputs.length > 0) {
+            // @ts-expect-error
+            inputs[0].focus();
+          }
+        } else {
+          if (event.shiftKey && currentIndex > 0) {
+            // Shift + Tab was pressed
+            // @ts-expect-error
+            inputs[currentIndex - 1].focus();
+          } else if (!event.shiftKey && currentIndex >= 0 && currentIndex < inputs.length - 1) {
+            // Only Tab was pressed
+            // @ts-expect-error
+            inputs[currentIndex + 1].focus();
+          }
+        }
+      }
+    };
+
+    // Only keyup works here, events like keydown and keypress don't
+    document.addEventListener("keyup", handleKeyDown);
+    return () => {
+      document.removeEventListener("keyup", handleKeyDown);
+    };
+  }, []);
+};

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

@@ -12,8 +12,9 @@ export const SettingsRow = observer((props: Props) => {
       className={css({
         backgroundColor: theme.secondaryBgColor,
         borderRadius: theme.borderRadius,
-        height: 40,
-        padding: "0px 12px",
+        height: 48,
+        boxSizing: 'border-box',
+        padding: 12,
         display: "flex",
         justifyContent: "space-between",
         alignItems: "center",

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

@@ -1,26 +1,93 @@
 import { observer } from "mobx-react-lite";
 import { useUserSettingsStore } from "../../store/user-settings-store-context.tsx";
 import { deckListStore } from "../../store/deck-list-store.ts";
-import { UserSettingsScreen } from "../../store/user-settings-store.tsx";
-import { UserReviewNotificationSettings } from "./user-review-notification-settings.tsx";
 import React from "react";
-import { UserSettings } from "./user-settings.tsx";
 import { useMount } from "../../lib/react/use-mount.ts";
+import { generateTimeRange } from "./generate-time-range.tsx";
+import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
+import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
+import { ListHeader } from "../../ui/list-header.tsx";
+import { SettingsRow } from "./settings-row.tsx";
+import { RadioSwitcher } from "../../ui/radio-switcher.tsx";
+import { theme } from "../../ui/theme.tsx";
+import { Select } from "../../ui/select.tsx";
+import { Hint } from "../../ui/hint.tsx";
+import { css } from "@emotion/css";
+
+export const timeRanges = generateTimeRange();
 
 export const UserSettingsMain = observer(() => {
   const userSettingsStore = useUserSettingsStore();
-
   useMount(() => {
     userSettingsStore.load();
   });
 
+  useMainButton(
+    "Save",
+    () => userSettingsStore.submit(),
+    () => userSettingsStore.isSaveVisible,
+  );
+
+  useTelegramProgress(() => userSettingsStore.isSending);
+
   if (deckListStore.myInfo?.state !== "fulfilled") {
     return null;
   }
 
-  if (userSettingsStore.screen === UserSettingsScreen.UserReviewSettings) {
-    return <UserReviewNotificationSettings />;
+  if (!userSettingsStore.form) {
+    return null;
   }
 
-  return <UserSettings />;
+  const { isRemindNotifyEnabled, time } = userSettingsStore.form;
+
+  return (
+    <div>
+      <ListHeader text={"Review notification settings"} />
+
+      <div
+        className={css({
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+        })}
+      >
+        <SettingsRow>
+          <span>Notifications</span>
+          <span
+            className={css({
+              transform: "translateY(3px)",
+              position: "relative",
+            })}
+          >
+            <RadioSwitcher
+              isOn={isRemindNotifyEnabled.value}
+              onToggle={isRemindNotifyEnabled.toggle}
+            />
+          </span>
+        </SettingsRow>
+        {isRemindNotifyEnabled.value && (
+          <SettingsRow>
+            <span>Time</span>
+            <div className={css({ color: theme.linkColor })}>
+              <Select
+                value={time.value.toString()}
+                onChange={(value) => {
+                  time.onChange(value);
+                }}
+                options={timeRanges.map((range) => ({
+                  value: range,
+                  label: range,
+                }))}
+              />
+            </div>
+          </SettingsRow>
+        )}
+
+        <Hint>
+          ⭐ Daily reminders help you keep up with your reviews, making it
+          easier for you to remember the information
+        </Hint>
+      </div>
+    </div>
+  );
 });