lighter first load, math reads left-to-right in quizzes, tickets from the server, readable separators

- Every screen but home is its own chunk and preloads when the browser is idle; React and motion get their own long-cached chunks. The app entry goes from 505 kB (160 kB gzip) to 85 kB (27 kB gzip). - Quiz prompts, options and lesson examples go through MathText, so '10 + 3 - 7 - 2' reads from the left; an unpaired bracket at the edge of a math run stays with the Persian sentence. - Support lists tickets from GET /support/tickets instead of this browser's localStorage; a ticket's messages load when it is opened. - '·' next to a Persian zero read as another digit ('فصلِ ۱ · ۰' looked like ۱۰۰); a thin bar separates them now. Notification bodies show Persian digits. - A root or vertex the model already marked with coordinates is no longer labelled a second time on top of it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 21:18:49 +03:30
parent 63f4ea8da0
commit 0957ef476b
15 changed files with 146 additions and 70 deletions
--- a/src/screens/CharactersScreen.tsx
+++ b/src/screens/CharactersScreen.tsx
@@ -6,7 +6,7 @@ import { useAsync } from '@/lib/useAsync';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
 import { SEYAR_INFO, seyarFromSlug } from '@/mascots/seyar';
 import { useToast } from '@/components/Toast';
-import { EmptyState, ErrorState, LoadingState, Screen, ScreenHeader } from '@/components/ui';
+import { EmptyState, ErrorState, LoadingState, Screen, ScreenHeader, Sep } from '@/components/ui';
 import { friendlyError } from '@/lib/errors';
 import { toFa } from '@/lib/format';

@@ -39,7 +39,7 @@ export function CharactersScreen() {
    <Screen>
      <ScreenHeader
        title="همراهت رو انتخاب کن"
-        subtitle={`امتیازِ تو: ${toFa(summary?.xp ?? 0)} · با امتیازِ بیشتر همراه‌های بیشتری باز می‌شن`}
+        subtitle={<>امتیازِ تو: {toFa(summary?.xp ?? 0)}<Sep />با امتیازِ بیشتر همراه‌های بیشتری باز می‌شن</>}
        color="#9B7BFF"
        back
      />
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -7,7 +7,7 @@ import { useNav } from '@/nav/Navigator';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
 import { IslandPath } from '@/components/IslandPath';
 import { IslandSheet } from '@/components/IslandSheet';
-import { EmptyState, ErrorState, LoadingState, Screen } from '@/components/ui';
+import { EmptyState, ErrorState, LoadingState, Screen, Sep } from '@/components/ui';
 import { shade } from '@/lib/color';
 import { toFa } from '@/lib/format';

@@ -109,7 +109,7 @@ export function HomeScreen() {
                  >
                    <div className="min-w-0 flex-1">
                      <div className="text-[11px] font-bold text-white/80">
-                        فصلِ {toFa(i + 1)} · {toFa(p.done)} از {toFa(p.total)} جزیره
+                        فصلِ {toFa(i + 1)}<Sep />{toFa(p.done)} از {toFa(p.total)} جزیره
                        {isCurrentUnit && <span className="mr-1.5 rounded-full bg-white/25 px-2 py-0.5">الان اینجایی</span>}
                      </div>
                      <div className="mt-0.5 truncate text-[15px] font-black">{unit.title.replace(/^فصل\s*\S+\s*[:：]\s*/, '')}</div>
--- a/src/screens/LessonScreen.tsx
+++ b/src/screens/LessonScreen.tsx
@@ -6,8 +6,9 @@ import { useNav } from '@/nav/Navigator';
 import { useAsync } from '@/lib/useAsync';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
 import { moodFromServer } from '@/mascots/seyar';
-import { ErrorState, LoadingState, PrimaryButton, Screen, ScreenBody, ScreenHeader } from '@/components/ui';
+import { ErrorState, LoadingState, PrimaryButton, Screen, ScreenBody, ScreenHeader, Sep } from '@/components/ui';
 import { toFa } from '@/lib/format';
+import { MathText } from '@/lib/MathText';

 /** معرفیِ درس، پیش از تمرین. */
 export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?: string }) {
@@ -29,7 +30,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
          ref && (
            <span className="inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1">
              {/* ترتیبِ lessonIds «درسِ بعدی اول» است، نه ترتیبِ کتاب؛ پس شماره‌ی درس از آن درنمی‌آید. */}
-              <Zap size={11} fill="white" /> {ref.node.title} · {toFa(ref.node.lessonIds.length)} درس
+              <Zap size={11} fill="white" /> {ref.node.title}<Sep />{toFa(ref.node.lessonIds.length)} درس
            </span>
          )
        }
@@ -56,7 +57,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
            {data.example && (
              <section className="rounded-3xl border border-line bg-white p-4">
                <h2 className="mb-2 text-xs font-black text-muted">مثال</h2>
-                <p className="whitespace-pre-line text-sm leading-[1.95] text-ink">{data.example}</p>
+                <p className="whitespace-pre-line text-sm leading-[1.95] text-ink"><MathText text={data.example} /></p>
              </section>
            )}

@@ -69,7 +70,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
                      <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-xs font-black text-white" style={{ backgroundColor: color }}>
                        {toFa(i + 1)}
                      </span>
-                      <span className="flex-1 whitespace-pre-line">{step}</span>
+                      <span className="flex-1 whitespace-pre-line"><MathText text={step} /></span>
                    </li>
                  ))}
                </ol>
--- a/src/screens/MapScreen.tsx
+++ b/src/screens/MapScreen.tsx
@@ -4,7 +4,7 @@ import { useAppData } from '@/state/AppData';
 import { unitColor, unitProgress } from '@/state/curriculum';
 import { useNav } from '@/nav/Navigator';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
-import { EmptyState, ErrorState, LoadingState, ProgressBar, Screen, ScreenHeader } from '@/components/ui';
+import { EmptyState, ErrorState, LoadingState, ProgressBar, Screen, ScreenHeader, Sep } from '@/components/ui';
 import { ZigzagPath, zigzagPositions } from '@/components/ZigzagPath';
 import { iconFor } from '@/components/NodeIcon';
 import { toFa } from '@/lib/format';
@@ -22,7 +22,7 @@ export function MapScreen() {
    <Screen className="bg-[#f7f8ff]">
      <ScreenHeader
        title="نقشه‌ی فصل‌ها"
-        subtitle={`${gradeTitle ? `${gradeTitle} · ` : ''}${toFa(overall)}٪ از کلِ مسیر`}
+        subtitle={<>{gradeTitle && <>{gradeTitle}<Sep /></>}{toFa(overall)}٪ از کلِ مسیر</>}
        color="#91ADC6"
        mascot={{ char: 'sigma', mood: overall > 0 ? 'happy' : 'idle' }}
      >
--- a/src/screens/NotificationsScreen.tsx
+++ b/src/screens/NotificationsScreen.tsx
@@ -4,7 +4,7 @@ import { useAppData } from '@/state/AppData';
 import { useAsync } from '@/lib/useAsync';
 import { useToast } from '@/components/Toast';
 import { EmptyState, ErrorState, LoadingState, Screen, ScreenHeader } from '@/components/ui';
-import { relativeTime } from '@/lib/format';
+import { relativeTime, toFa } from '@/lib/format';

 const STYLE: Record<string, { icon: LucideIcon; color: string; bg: string }> = {
  xp_earned: { icon: Star, color: '#E8A400', bg: '#FFF8E1' },
@@ -83,7 +83,7 @@ export function NotificationsScreen() {
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className={`block text-sm ${n.isRead ? 'text-muted' : 'font-bold text-ink'}`}>{n.title}</span>
-                      {n.body && <span className="mt-0.5 block whitespace-pre-line text-xs leading-6 text-body">{n.body}</span>}
+                      {n.body && <span className="mt-0.5 block whitespace-pre-line text-xs leading-6 text-body">{toFa(n.body)}</span>}
                      <span className="mt-1 block text-[10px] text-faint">{relativeTime(n.createdAt)}</span>
                    </span>
                    {!n.isRead && <span className="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-coral" />}
--- a/src/screens/QuizScreen.tsx
+++ b/src/screens/QuizScreen.tsx
@@ -14,6 +14,7 @@ import { useToast } from '@/components/Toast';
 import { ErrorState, InlineError, LoadingState, PrimaryButton, SecondaryButton, Screen } from '@/components/ui';
 import { friendlyError } from '@/lib/errors';
 import { timeUntil, toFa } from '@/lib/format';
+import { MathText } from '@/lib/MathText';
 import { sounds } from '@/lib/sound';

 type Phase =
@@ -272,7 +273,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
              <Flag size={12} /> گزارشِ ایراد
            </button>
          </div>
-          <h2 className="whitespace-pre-line text-base font-bold leading-8 text-ink">{question.prompt}</h2>
+          <h2 className="whitespace-pre-line text-base font-bold leading-8 text-ink"><MathText text={question.prompt} /></h2>
        </div>

        <div className={shortOptions ? 'grid grid-cols-2 gap-2.5' : 'flex flex-col gap-2.5'}>
@@ -285,7 +286,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
              whileTap={{ scale: selected === null ? 0.95 : 1 }}
              className={`flex min-h-14 items-center justify-center gap-1.5 rounded-2xl border-2 border-b-4 px-3 py-3 font-black transition-colors ${shortOptions ? 'text-xl' : 'text-base'} ${optionClass(option.id)}`}
            >
-              <span dir="auto">{option.value}</span>
+              <span><MathText text={option.value} /></span>
              {answer && option.id === answer.correctOptionId && <Check size={16} className="text-green-500" strokeWidth={3} />}
              {answer && option.id === selected && !answer.correct && <X size={16} className="text-red-400" strokeWidth={3} />}
            </motion.button>
--- a/src/screens/SupportScreen.tsx
+++ b/src/screens/SupportScreen.tsx
@@ -1,10 +1,9 @@
 import { useState } from 'react';
 import { Bug, MessageCircle, Send } from 'lucide-react';
-import { api, type Ticket } from '@/api';
+import { api, type TicketSummary } from '@/api';
 import { useAsync } from '@/lib/useAsync';
-import { KEYS, store } from '@/lib/storage';
 import { useToast } from '@/components/Toast';
-import { InlineError, PrimaryButton, Screen, ScreenBody, ScreenHeader } from '@/components/ui';
+import { InlineError, PrimaryButton, Screen, ScreenBody, ScreenHeader, Sep } from '@/components/ui';
 import { friendlyError } from '@/lib/errors';
 import { toFa } from '@/lib/format';

@@ -22,15 +21,6 @@ const STATUS_LABEL: Record<string, string> = {
  closed: 'بسته',
 };

-/** سرور فهرستِ تیکت‌ها را نمی‌دهد؛ شناسه‌ها را همین‌جا نگه می‌داریم. */
-function savedTicketIds(): string[] {
-  try {
-    return JSON.parse(store.get(KEYS.ticketIds) ?? '[]') as string[];
-  } catch {
-    return [];
-  }
-}
-
 export function SupportScreen() {
  const toast = useToast();
  const [mode, setMode] = useState<'ticket' | 'bug'>('ticket');
@@ -39,7 +29,8 @@ export function SupportScreen() {
  const [text, setText] = useState('');
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');
-  const [ticketIds, setTicketIds] = useState(savedTicketIds);
+  // فهرست از سرور می‌آید، پس تیکت و پاسخش با عوض شدنِ گوشی هم دیده می‌شود.
+  const tickets = useAsync(() => api.support.tickets(), []);

  async function submit() {
    if (!subject.trim() || !text.trim()) return;
@@ -52,9 +43,7 @@ export function SupportScreen() {
      } else {
        const t = await api.support.createTicket(subject.trim(), category);
        await api.support.reply(t.ticketId, text.trim());
-        const ids = [t.ticketId, ...ticketIds].slice(0, 20);
-        store.set(KEYS.ticketIds, JSON.stringify(ids));
-        setTicketIds(ids);
+        tickets.reload();
        toast('پیامت رسید؛ جواب همین‌جا و در اعلان‌ها میاد.', 'success');
      }
      setSubject('');
@@ -116,11 +105,11 @@ export function SupportScreen() {
          <Send size={16} className="-scale-x-100" /> ارسال
        </PrimaryButton>

-        {ticketIds.length > 0 && (
+        {!!tickets.data?.length && (
          <section>
            <h2 className="mb-2 mt-2 text-sm font-black text-ink">پیام‌های قبلیِ تو</h2>
            <div className="flex flex-col gap-2">
-              {ticketIds.map((id) => <TicketCard key={id} ticketId={id} />)}
+              {tickets.data.map((t) => <TicketCard key={t.ticketId} summary={t} />)}
            </div>
          </section>
        )}
@@ -129,26 +118,24 @@ export function SupportScreen() {
  );
 }

-function TicketCard({ ticketId }: { ticketId: string }) {
+function TicketCard({ summary }: { summary: TicketSummary }) {
  const toast = useToast();
-  const ticket = useAsync(() => api.support.ticket(ticketId), [ticketId]);
  const [open, setOpen] = useState(false);
+  // پیام‌ها فقط وقتی کارت باز شود گرفته می‌شوند؛ فهرست خودش خلاصه را دارد.
+  const detail = useAsync(() => (open ? api.support.ticket(summary.ticketId) : Promise.resolve(null)), [open, summary.ticketId]);
  const [reply, setReply] = useState('');
  const [sending, setSending] = useState(false);
-
-  if (ticket.error || !ticket.data) {
-    return ticket.loading ? <div className="h-14 animate-pulse rounded-2xl bg-soft" /> : null;
-  }
-  const t: Ticket = ticket.data;
-  const staffReplies = t.messages.filter((m) => m.sender !== 'user').length;
+  const t = detail.data;
+  const status = t?.status ?? summary.status;
+  const staffReplies = t ? t.messages.filter((m) => m.sender !== 'user').length : summary.supportReplies;

  async function send() {
    if (!reply.trim()) return;
    setSending(true);
    try {
-      await api.support.reply(ticketId, reply.trim());
+      await api.support.reply(summary.ticketId, reply.trim());
      setReply('');
-      ticket.reload();
+      detail.reload();
    } catch (err) {
      toast(friendlyError(err), 'error');
    } finally {
@@ -160,16 +147,20 @@ function TicketCard({ ticketId }: { ticketId: string }) {
    <div className="rounded-2xl border border-line bg-white">
      <button type="button" onClick={() => setOpen((o) => !o)} className="flex w-full items-center gap-3 p-3.5 text-right">
        <span className="min-w-0 flex-1">
-          <span className="block truncate text-sm font-bold text-ink">{t.subject}</span>
+          <span className="block truncate text-sm font-bold text-ink">{summary.subject}</span>
          <span className="text-[11px] text-muted">
-            {STATUS_LABEL[t.status] ?? t.status}
-            {staffReplies > 0 && ` · ${toFa(staffReplies)} پاسخ`}
+            {STATUS_LABEL[status] ?? status}
+            {staffReplies > 0 && <><Sep />{toFa(staffReplies)} پاسخ</>}
          </span>
        </span>
+        {staffReplies > 0 && !open && <span className="h-2 w-2 flex-shrink-0 rounded-full bg-indigo" aria-hidden />}
      </button>
      {open && (
        <div className="flex flex-col gap-2 border-t border-line p-3.5">
-          {t.messages.map((m) => (
+          {!t && (detail.error
+            ? <InlineError>{friendlyError(detail.error)}</InlineError>
+            : <div className="h-10 animate-pulse rounded-2xl bg-soft" />)}
+          {t?.messages.map((m) => (
            <div
              key={m.id}
              className={`whitespace-pre-line rounded-2xl px-3.5 py-2.5 text-xs leading-6 ${m.sender === 'user' ? 'mr-8 bg-soft text-body' : 'ml-8 bg-[#EEF1FF] text-ink'}`}
@@ -177,7 +168,7 @@ function TicketCard({ ticketId }: { ticketId: string }) {
              {m.text}
            </div>
          ))}
-          {t.status !== 'closed' && (
+          {t && status !== 'closed' && (
            <div className="mt-1 flex gap-2">
              <input
                value={reply}