rebuild the app on a typed, modular structure wired to the real API

The whole app lived in one 3,071-line App.tsx on a Figma scaffold (60 unused
packages, 45 unused UI components, no type-check). The live site could not
reach the backend, Persian-keyboard digits were erased from the phone field,
guests were signed out after an hour, "mark read" hit a method the server
does not accept (405), and iOS Safari blocked the payment window.

What changed:
- src/ split into api/ (one typed client: timeouts, GET retry, single-flight
  refresh, SSE), screens/ (one file each), components/, state/, nav/, lib/.
- The API address is configuration only: public/config.js at runtime, then
  VITE_API_BASE_URL at build time, then same-origin /api. No domain in code.
- Responsive shell instead of a fixed 390x844 phone frame; self-hosted
  Vazirmatn instead of Google Fonts; strict TypeScript, `npm run build`
  type-checks first.
- Everything on the handoff list: tutor answers keep their line breaks, have
  thumbs up/down, follow-ups, "from the book" badge, retry, history that
  survives tab switches and reloads, "why was I wrong" from a wrong answer
  with questionId; question reports; hearts with maxHearts/unlimited and a
  no-hearts screen with the refill time; result screen and a visible error
  when lesson completion fails; subscription status, badge, discount code
  before the gateway and the payment-return message; guest refresh token;
  6-digit OTP with resend timer; age saved as a Jalali birthYear; PATCH
  read-all; leaderboard refetched on open with "you" highlighted; selected
  companion shown across the app; logout that revokes the refresh token.
- New screens for endpoints that had none: profile, streak calendar,
  support tickets and bug reports, parents, invite-a-friend (with ?ref=
  tracking), guest-to-phone upgrade.
- Browser/phone back button walks the screen stack.

Checked with a headless-Chrome walkthrough against a local backend at
390x844 and 360x740 (fresh guest: onboarding, setup, a full lesson, map,
island sheet, every tab and sub-screen, one real tutor question, reload,
logout): no console errors, no failed API calls. Real SMS login and a real
Zarinpal payment were not exercised.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/screens/InviteScreen.tsx

@@ -0,0 +1,85 @@
+import { Copy, Gift, Share2, Users } from 'lucide-react';
+import { api } from '@/api';
+import { useAsync } from '@/lib/useAsync';
+import { useToast } from '@/components/Toast';
+import { ErrorState, LoadingState, PrimaryButton, Screen, ScreenBody, ScreenHeader } from '@/components/ui';
+import { formatToman, toFa } from '@/lib/format';
+
+/** لینکِ دعوت: هر کس با آن بیاید و شماره ثبت کند، معرفیِ تو حساب می‌شود. */
+export function inviteLink(code: string): string {
+  return `${window.location.origin}/?ref=${encodeURIComponent(code)}`;
+}
+
+export function InviteScreen() {
+  const toast = useToast();
+  const me = useAsync(() => api.affiliate.me(), []);
+
+  async function share(code: string) {
+    const url = inviteLink(code);
+    const text = 'با تدریسینو ریاضی رو قدم‌به‌قدم یاد بگیر:';
+    if (navigator.share) {
+      try {
+        await navigator.share({ title: 'تدریسینو', text, url });
+        return;
+      } catch {
+        /* کاربر لغو کرد؛ می‌رویم سراغِ کپی */
+      }
+    }
+    try {
+      await navigator.clipboard.writeText(`${text} ${url}`);
+      toast('لینک کپی شد', 'success');
+    } catch {
+      toast(url);
+    }
+  }
+
+  return (
+    <Screen>
+      <ScreenHeader title="معرفی به دوستان" subtitle="دوستات رو بیار، با هم ریاضی بخونید" color="#5FBF8F" back mascot={{ char: 'delta', mood: 'happy', size: 56 }} />
+      <ScreenBody className="flex flex-col gap-4">
+        {me.loading ? (
+          <LoadingState />
+        ) : me.error || !me.data ? (
+          <ErrorState error={me.error} onRetry={me.reload} />
+        ) : (
+          <>
+            <div className="flex flex-col items-center gap-2 rounded-3xl border border-line bg-white p-5 text-center">
+              <Gift size={28} className="text-mint" />
+              <span className="text-xs text-muted">کدِ معرفیِ تو</span>
+              <button
+                type="button"
+                onClick={() => void navigator.clipboard?.writeText(me.data!.referralCode).then(() => toast('کد کپی شد', 'success'))}
+                className="flex items-center gap-2 rounded-2xl bg-soft px-5 py-2.5 text-xl font-black tracking-widest text-ink"
+                dir="ltr"
+              >
+                {me.data.referralCode} <Copy size={16} className="text-muted" />
+              </button>
+            </div>
+
+            <div className="grid grid-cols-3 gap-2">
+              {[
+                { label: 'معرفی‌شده', value: toFa(me.data.referredCount) },
+                { label: 'خرید کرده', value: toFa(me.data.paidCount) },
+                { label: 'پورسانت', value: formatToman(me.data.totalCommission) },
+              ].map((s) => (
+                <div key={s.label} className="flex flex-col items-center rounded-2xl border border-line bg-white px-1 py-3 text-center">
+                  <span className="text-sm font-black text-ink">{s.value}</span>
+                  <span className="mt-0.5 text-[10px] text-muted">{s.label}</span>
+                </div>
+              ))}
+            </div>
+
+            <p className="flex items-start gap-2 rounded-2xl bg-[#EAF8F0] p-3.5 text-xs leading-6 text-body">
+              <Users size={16} className="mt-0.5 flex-shrink-0 text-mint" />
+              دوستت باید با لینکِ تو وارد بشه و شماره‌ش رو ثبت کنه. اگه اشتراک خرید، {toFa(Math.round(me.data.commissionRate * 100))}٪ مبلغ پورسانتِ توئه.
+            </p>
+
+            <PrimaryButton color="#5FBF8F" onClick={() => void share(me.data!.referralCode)}>
+              <Share2 size={17} /> فرستادنِ لینکِ دعوت
+            </PrimaryButton>
+          </>
+        )}
+      </ScreenBody>
+    </Screen>
+  );
+}