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/StreakScreen.tsx

@@ -0,0 +1,92 @@
+import { Flame } from 'lucide-react';
+import { api } from '@/api';
+import { useAsync } from '@/lib/useAsync';
+import { ErrorState, LoadingState, Screen, ScreenBody, ScreenHeader } from '@/components/ui';
+import { toFa } from '@/lib/format';
+
+const WEEKS = 6;
+const WEEKDAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'];
+
+/** YYYY-MM-DD به وقتِ محلی (سرور روزها را همین‌طور می‌دهد). */
+const isoDay = (d: Date) =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+
+/** شش هفته‌ی اخیر، هفته از شنبه شروع می‌شود. */
+function recentWeeks(today = new Date()): Date[][] {
+  const end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const offsetFromSaturday = (end.getDay() + 1) % 7;
+  const start = new Date(end);
+  start.setDate(end.getDate() - offsetFromSaturday - (WEEKS - 1) * 7);
+  return Array.from({ length: WEEKS }, (_, w) =>
+    Array.from({ length: 7 }, (_, d) => {
+      const day = new Date(start);
+      day.setDate(start.getDate() + w * 7 + d);
+      return day;
+    }),
+  );
+}
+
+const dayOfMonth = (d: Date) => new Intl.DateTimeFormat('fa-IR-u-ca-persian', { day: 'numeric' }).format(d);
+
+export function StreakScreen() {
+  const calendar = useAsync(() => api.streakCalendar(), []);
+  const active = new Set(calendar.data?.activeDays ?? []);
+  const today = isoDay(new Date());
+  const weeks = recentWeeks();
+
+  return (
+    <Screen>
+      <ScreenHeader title="زنجیره‌ی روزها" subtitle="هر روز حداقل یه درس، زنجیره‌ت رو زنده نگه می‌داره" color="#FF7A3D" back mascot={{ char: 'delta', mood: 'excited', size: 56 }} />
+      <ScreenBody className="flex flex-col gap-4">
+        {calendar.loading ? (
+          <LoadingState char="delta" />
+        ) : calendar.error || !calendar.data ? (
+          <ErrorState error={calendar.error} onRetry={calendar.reload} />
+        ) : (
+          <>
+            <div className="grid grid-cols-2 gap-3">
+              {[
+                { label: 'زنجیره‌ی فعلی', value: calendar.data.currentStreak },
+                { label: 'بیشترین زنجیره', value: calendar.data.longestStreak },
+              ].map((s) => (
+                <div key={s.label} className="flex flex-col items-center rounded-3xl border border-line bg-white py-4">
+                  <Flame size={24} className="text-orange" fill="#FF7A3D" />
+                  <span className="mt-1 text-2xl font-black text-ink">{toFa(s.value)}</span>
+                  <span className="text-xs text-muted">{s.label} (روز)</span>
+                </div>
+              ))}
+            </div>
+
+            <div className="rounded-3xl border border-line bg-white p-4">
+              <div className="mb-2 grid grid-cols-7 gap-1.5 text-center text-[10px] font-bold text-muted">
+                {WEEKDAYS.map((d) => <span key={d}>{d}</span>)}
+              </div>
+              <div className="flex flex-col gap-1.5">
+                {weeks.map((week, w) => (
+                  <div key={w} className="grid grid-cols-7 gap-1.5">
+                    {week.map((day) => {
+                      const key = isoDay(day);
+                      const on = active.has(key);
+                      const future = key > today;
+                      return (
+                        <span
+                          key={key}
+                          title={key}
+                          className={`flex aspect-square items-center justify-center rounded-xl text-[11px] font-bold ${
+                            on ? 'bg-orange text-white' : future ? 'text-faint/50' : 'bg-soft text-muted'
+                          } ${key === today ? 'ring-2 ring-orange ring-offset-1' : ''}`}
+                        >
+                          {on ? <Flame size={14} fill="white" /> : dayOfMonth(day)}
+                        </span>
+                      );
+                    })}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+      </ScreenBody>
+    </Screen>
+  );
+}