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>

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}