From a2782da3bd82da5c5e960cf4f79d8d14184bdbcc Mon Sep 17 00:00:00 2001
From: AliReza <zareian.comp@gmail.com>
Date: Fri, 2 Oct 2026 11:51:33 +0330
Subject: [PATCH] tutor: free and purchased question counters in the header,
 larger

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/screens/AskScreen.tsx | 43 ++++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/screens/AskScreen.tsx b/src/screens/AskScreen.tsx
index 535395e..b421c2b 100644
--- a/src/screens/AskScreen.tsx
+++ b/src/screens/AskScreen.tsx
@@ -130,16 +130,19 @@ export function AskScreen({ lessonId, questionId, prompt }: { lessonId?: number;
         back={lessonId !== undefined || prompt !== undefined}
         mascot={{ char: 'pi', mood: busy ? 'excited' : 'idle', size: 60 }}
       >
-        {!empty && (
-          <button
-            type="button"
-            onClick={() => askStore.reset(null)}
-            disabled={busy}
-            className="mt-3 flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1.5 text-xs font-bold disabled:opacity-50"
-          >
-            <MessageSquarePlus size={14} /> گفتگوی تازه
-          </button>
-        )}
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          {quota !== null && <QuotaPills free={quota.free} credits={quota.credits} />}
+          {!empty && (
+            <button
+              type="button"
+              onClick={() => askStore.reset(null)}
+              disabled={busy}
+              className="flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1.5 text-xs font-bold disabled:opacity-50"
+            >
+              <MessageSquarePlus size={14} /> گفتگوی تازه
+            </button>
+          )}
+        </div>
       </ScreenHeader>
 
       <div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-4">
@@ -198,7 +201,6 @@ export function AskScreen({ lessonId, questionId, prompt }: { lessonId?: number;
             <Send size={16} className="-scale-x-100" />
           </button>
         </div>
-        {quota !== null && <QuotaLine free={quota.free} credits={quota.credits} />}
       </form>
     </Screen>
   );
@@ -336,21 +338,24 @@ function Message({
   );
 }
 
-/** شمارنده‌ی زیرِ جعبه‌ی پرسش: رایگانِ امروز و اعتبارِ خریده‌شده، هر دو جدا و روشن. */
-function QuotaLine({ free, credits }: { free: number; credits: number }) {
+/**
+ * شمارنده در سربرگِ دستیار: سوال‌های رایگانِ باقیِ امروز و سوال‌های خریده‌شده، هر کدام جدا و
+ * درشت، تا بچه پیش از پرسیدن بداند چقدر دارد. زدن روی دومی صفحه‌ی بسته‌ها را باز می‌کند.
+ */
+function QuotaPills({ free, credits }: { free: number; credits: number }) {
   const nav = useNav();
   return (
-    <div className="mt-1.5 flex items-center justify-center gap-2 text-[11px]">
-      <span className={`rounded-full px-2.5 py-0.5 font-bold ${free > 0 ? 'bg-[#EAF8F0] text-[#2E7D5B]' : 'bg-soft text-muted'}`}>
-        رایگانِ امروز: {toFa(free)}
+    <>
+      <span className={`rounded-full px-3 py-1.5 text-xs font-black ${free > 0 ? 'bg-white text-[#2E7D5B]' : 'bg-white/15 text-white/80'}`}>
+        {free > 0 ? <>{toFa(free)} سوالِ رایگانِ امروز</> : 'رایگانِ امروز تموم شد'}
       </span>
       <button
         type="button"
         onClick={() => nav.switchTab('subscription')}
-        className={`rounded-full px-2.5 py-0.5 font-bold ${credits > 0 ? 'bg-[#F5F1FF] text-violet' : 'bg-soft text-muted'}`}
+        className={`rounded-full px-3 py-1.5 text-xs font-black ${credits > 0 ? 'bg-white text-violet' : 'bg-white/15 text-white'}`}
       >
-        سوالِ خریده‌شده: {toFa(credits)}{credits === 0 && ' · خرید'}
+        {credits > 0 ? <>{toFa(credits)} سوالِ خریده‌شده</> : '+ خریدِ سوال'}
       </button>
-    </div>
+    </>
   );
 }