feat(frontend): wire App Router pages for the LMS flows
Connect login, learning path, quiz, profile, community, and admin routes to the shared feature components.
This commit is contained in:
@@ -0,0 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { AdminStudio } from "@/components/admin-studio";
|
||||
|
||||
export default function AdminPage() {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<AdminStudio />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1,219 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Loader2, Package } from "lucide-react";
|
||||
import { CertificateCard } from "@/components/certificate-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { http, toUserError } from "@/lib/api";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import type { Certificate, CertificatePhysicalOrder, PhysicalCertSettings } from "@/lib/types";
|
||||
import { toast } from "@/components/providers";
|
||||
import { formatFaNumber } from "@/lib/utils";
|
||||
import { clampPhoneInput, normalizePhone, PHONE_INPUT_MAX_LEN } from "@/lib/validation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type PublicCertResponse = {
|
||||
certificate: { publicId: string; fullName: string; issuedAt: string };
|
||||
course: string;
|
||||
};
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
requested: "درخواست‌شده — منتظر تأیید پرداخت",
|
||||
paid: "پرداخت تأیید شد — در صف ارسال",
|
||||
shipped: "ارسال شد",
|
||||
cancelled: "لغو شده",
|
||||
};
|
||||
|
||||
export default function CertificatePage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const publicId = params?.id ?? "";
|
||||
const authUser = useAuth((s) => s.user);
|
||||
const qc = useQueryClient();
|
||||
const [requesting, setRequesting] = useState(false);
|
||||
const [form, setForm] = useState({
|
||||
recipientName: "",
|
||||
phone: "",
|
||||
address: "",
|
||||
city: "",
|
||||
postalCode: "",
|
||||
});
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["certificate", publicId],
|
||||
queryFn: () => http.get<PublicCertResponse>(`/api/certificates/${publicId}`),
|
||||
enabled: !!publicId,
|
||||
meta: { silentError: true },
|
||||
});
|
||||
|
||||
const { data: mine } = useQuery({
|
||||
queryKey: ["me", "certificate"],
|
||||
queryFn: () =>
|
||||
http.get<{
|
||||
certificate: Certificate | null;
|
||||
physicalOrder: CertificatePhysicalOrder | null;
|
||||
physical: PhysicalCertSettings;
|
||||
}>("/api/me/certificate"),
|
||||
enabled: !!authUser,
|
||||
});
|
||||
|
||||
const isOwner = !!authUser && mine?.certificate?.publicId === publicId;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOwner || !authUser) return;
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
recipientName: f.recipientName || authUser.name || "",
|
||||
phone: f.phone || authUser.phone || "",
|
||||
}));
|
||||
}, [isOwner, authUser]);
|
||||
|
||||
const requestPhysical = async () => {
|
||||
setRequesting(true);
|
||||
try {
|
||||
await http.post("/api/me/certificate/physical", {
|
||||
...form,
|
||||
phone: normalizePhone(form.phone),
|
||||
});
|
||||
toast.success("درخواست ثبت شد — پس از واریز با ادمین هماهنگ کنید");
|
||||
qc.invalidateQueries({ queryKey: ["me", "certificate"] });
|
||||
} catch (e) {
|
||||
toast.error(toUserError(e));
|
||||
} finally {
|
||||
setRequesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[60vh] items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !data?.certificate) {
|
||||
return (
|
||||
<div className="mx-auto max-w-lg px-4 py-16 text-center">
|
||||
<p className="text-lg font-bold">گواهینامه پیدا نشد</p>
|
||||
<Button asChild className="mt-4" variant="outline">
|
||||
<Link href="/">بازگشت</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const cert = data.certificate;
|
||||
const order = isOwner ? mine?.physicalOrder : null;
|
||||
const physical = isOwner ? mine?.physical : null;
|
||||
const windowEndsAt = mine?.certificate?.issuedAt
|
||||
? new Date(mine.certificate.issuedAt).getTime() + (physical?.windowDays ?? 30) * 86400000
|
||||
: 0;
|
||||
const windowStillOpen = !windowEndsAt || Date.now() < windowEndsAt;
|
||||
const windowOpen =
|
||||
physical?.enabled &&
|
||||
windowStillOpen &&
|
||||
(!order || order.status === "cancelled") &&
|
||||
!!mine?.certificate;
|
||||
|
||||
return (
|
||||
<CertificateCard
|
||||
cert={{
|
||||
publicId: cert.publicId,
|
||||
fullName: cert.fullName,
|
||||
issuedAt: cert.issuedAt,
|
||||
course: data.course,
|
||||
}}
|
||||
showOwnerLinks={!!authUser}
|
||||
>
|
||||
{isOwner && physical?.enabled && (
|
||||
<div className="mt-8 space-y-3 border-t border-border pt-6">
|
||||
<p className="flex items-center gap-2 text-sm font-bold">
|
||||
<Package className="h-4 w-4" /> نسخه فیزیکی
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
قیمت حدودی {formatFaNumber(physical.priceIrr)} ریال · مهلت درخواست{" "}
|
||||
{formatFaNumber(physical.windowDays)} روز از صدور
|
||||
{windowEndsAt ? ` (تا ${new Date(windowEndsAt).toLocaleDateString("fa-IR")})` : ""}.
|
||||
پرداخت آنلاین در سامانه نداریم. پس از واریز بیرونی با ادمین هماهنگ کنید تا وضعیت سفارش به‌روز شود.
|
||||
</p>
|
||||
{order && order.status !== "cancelled" ? (
|
||||
<div className="space-y-2 rounded-xl border border-border bg-muted/30 p-3 text-sm">
|
||||
<p>
|
||||
وضعیت: <span className="font-medium">{STATUS_LABEL[order.status] ?? order.status}</span>
|
||||
</p>
|
||||
{order.trackingCode && (
|
||||
<p className="font-mono text-xs" dir="ltr">
|
||||
کد پیگیری: {order.trackingCode}
|
||||
</p>
|
||||
)}
|
||||
{order.city && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
ارسال به {order.recipientName || "—"} · {order.city}
|
||||
</p>
|
||||
)}
|
||||
{order.note && <p className="text-xs text-muted-foreground">یادداشت ادمین: {order.note}</p>}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true } }))
|
||||
}
|
||||
>
|
||||
هماهنگی با تیم
|
||||
</Button>
|
||||
</div>
|
||||
) : windowOpen ? (
|
||||
<div className="space-y-2">
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
<Input
|
||||
placeholder="نام گیرنده"
|
||||
value={form.recipientName}
|
||||
onChange={(e) => setForm((f) => ({ ...f, recipientName: e.target.value }))}
|
||||
/>
|
||||
<Input
|
||||
placeholder="موبایل"
|
||||
value={form.phone}
|
||||
onChange={(e) => setForm((f) => ({ ...f, phone: clampPhoneInput(e.target.value) }))}
|
||||
dir="ltr"
|
||||
inputMode="tel"
|
||||
maxLength={PHONE_INPUT_MAX_LEN}
|
||||
className="text-left"
|
||||
/>
|
||||
<Input
|
||||
placeholder="شهر"
|
||||
value={form.city}
|
||||
onChange={(e) => setForm((f) => ({ ...f, city: e.target.value }))}
|
||||
/>
|
||||
<Input
|
||||
placeholder="کد پستی"
|
||||
value={form.postalCode}
|
||||
onChange={(e) => setForm((f) => ({ ...f, postalCode: e.target.value }))}
|
||||
dir="ltr"
|
||||
/>
|
||||
</div>
|
||||
<textarea
|
||||
className="min-h-[72px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
placeholder="آدرس کامل پستی"
|
||||
value={form.address}
|
||||
onChange={(e) => setForm((f) => ({ ...f, address: e.target.value }))}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={requesting || !form.address.trim() || !form.city.trim()}
|
||||
onClick={() => void requestPhysical()}
|
||||
>
|
||||
{requesting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Package className="h-3.5 w-3.5" />}
|
||||
ثبت درخواست نسخه فیزیکی
|
||||
</Button>
|
||||
</div>
|
||||
) : !windowStillOpen ? (
|
||||
<p className="text-sm text-muted-foreground">مهلت درخواست نسخه فیزیکی به پایان رسیده است.</p>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</CertificateCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
/** Certificate share links are unlisted — never index or follow. */
|
||||
export const metadata: Metadata = {
|
||||
robots: {
|
||||
index: false,
|
||||
follow: false,
|
||||
nocache: true,
|
||||
noarchive: true,
|
||||
nosnippet: true,
|
||||
googleBot: {
|
||||
index: false,
|
||||
follow: false,
|
||||
noimageindex: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function CertificateLayout({ children }: { children: React.ReactNode }) {
|
||||
return children;
|
||||
}
|
||||
@@ -0,0 +1,459 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Suspense, useEffect, useRef } from "react";
|
||||
import {
|
||||
Award,
|
||||
ArrowLeft,
|
||||
BookOpenCheck,
|
||||
CheckCircle2,
|
||||
CalendarDays,
|
||||
Flame,
|
||||
Heart,
|
||||
Lock,
|
||||
MessageSquare,
|
||||
Package,
|
||||
PlayCircle,
|
||||
Sparkles,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
} from "lucide-react";
|
||||
import { SkillTree } from "@/components/skill-tree";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { http, toUserError } from "@/lib/api";
|
||||
import type { Certificate, CertificatePhysicalOrder, MeetingEvent, PhysicalCertSettings, TreeData, TreeLesson } from "@/lib/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import { cn, formatFaNumber, formatStreakLabel } from "@/lib/utils";
|
||||
import { clampHearts, hasInfiniteHearts, INFINITE_HEARTS_LABEL, MAX_HEARTS } from "@/lib/hearts";
|
||||
import { toast } from "@/components/providers";
|
||||
|
||||
export default function CapPage() {
|
||||
return (
|
||||
<Suspense fallback={<CapSkeleton />}>
|
||||
<CapPageInner />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function CapPageInner() {
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const user = useAuth((s) => s.user);
|
||||
const qc = useQueryClient();
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["tree"],
|
||||
queryFn: () => http.get<TreeData>("/api/tree"),
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
|
||||
const { data: eventsData } = useQuery({
|
||||
queryKey: ["events", "upcoming-cap"],
|
||||
queryFn: () => http.get<{ events: MeetingEvent[] }>("/api/events"),
|
||||
staleTime: 60_000,
|
||||
});
|
||||
|
||||
const allLessons = (data?.chapters ?? []).flatMap((ch) => ch.lessons ?? []);
|
||||
const completedCount = allLessons.filter((l) => l.progress?.passedQuiz).length;
|
||||
const curriculumDone = allLessons.length > 0 && completedCount === allLessons.length;
|
||||
|
||||
useEffect(() => {
|
||||
const lesson = params.get("lesson");
|
||||
if (lesson && rootRef.current) {
|
||||
rootRef.current.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}, [params]);
|
||||
|
||||
const { data: certData } = useQuery({
|
||||
queryKey: ["me", "certificate"],
|
||||
queryFn: () =>
|
||||
http.get<{
|
||||
certificate: Certificate | null;
|
||||
physicalOrder: CertificatePhysicalOrder | null;
|
||||
physical: PhysicalCertSettings;
|
||||
}>("/api/me/certificate"),
|
||||
enabled: !!user && curriculumDone,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!curriculumDone || !user) return;
|
||||
void http
|
||||
.post("/api/me/certificate/issue", {})
|
||||
.then(() => qc.invalidateQueries({ queryKey: ["me", "certificate"] }))
|
||||
.catch((e) => toast.error(toUserError(e, "صدور گواهینامه ممکن نشد")));
|
||||
}, [curriculumDone, user, qc]);
|
||||
|
||||
if (isLoading) {
|
||||
return <CapSkeleton />;
|
||||
}
|
||||
|
||||
const me = data?.me;
|
||||
const all = allLessons;
|
||||
const lockedCount = all.filter((l) => l.locked).length;
|
||||
const inProgress = all.filter(
|
||||
(l) => !l.locked && !l.progress?.passedQuiz && (l.progress?.watchedPct ?? 0) > 0 && !l.progress?.quizUnlocked,
|
||||
);
|
||||
const readyQuiz = all.filter((l) => !l.locked && !l.progress?.passedQuiz && !!l.progress?.quizUnlocked);
|
||||
const openAndNew = all.filter((l) => !l.locked && !l.progress?.passedQuiz);
|
||||
const firstLocked = all.find((l) => l.locked);
|
||||
const done = curriculumDone;
|
||||
|
||||
const pct = all.length ? Math.round((completedCount / all.length) * 100) : 0;
|
||||
const hearts = clampHearts(me?.hearts ?? user?.hearts ?? MAX_HEARTS);
|
||||
const lowHearts = !hasInfiniteHearts(user?.role) && hearts > 0 && hearts <= 1;
|
||||
const nextEvent = (eventsData?.events ?? [])[0];
|
||||
const physicalOpen =
|
||||
done &&
|
||||
certData?.physical?.enabled &&
|
||||
!!certData.certificate &&
|
||||
(!certData.physicalOrder || certData.physicalOrder.status === "cancelled") &&
|
||||
(!certData.certificate.issuedAt ||
|
||||
Date.now() <
|
||||
new Date(certData.certificate.issuedAt).getTime() +
|
||||
(certData.physical.windowDays || 30) * 24 * 60 * 60 * 1000);
|
||||
|
||||
const next = nextAction(inProgress, readyQuiz, openAndNew, firstLocked, done);
|
||||
|
||||
return (
|
||||
<div className="space-y-8" ref={rootRef}>
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<p className="section-kicker">مسیر شما</p>
|
||||
<h1 className="mt-2 text-3xl font-black tracking-tight sm:text-5xl">
|
||||
درخت <span className="text-primary">مهارت</span>
|
||||
</h1>
|
||||
<p className="mt-2 max-w-xl text-sm text-muted-foreground">
|
||||
الان روی گام بعدی تمرکز کنید — تماشا، آزمون، رویداد یا گواهینامه.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-accent/10 px-3 py-1.5 text-sm font-bold text-accent">
|
||||
<Flame className="h-4 w-4" /> {formatStreakLabel(me?.streak ?? user?.streakCurrent ?? 0)}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-gold/10 px-3 py-1.5 text-sm font-bold text-gold">
|
||||
<Sparkles className="h-4 w-4" /> {formatFaNumber(me?.xp ?? user?.xp ?? 0)} امتیاز
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-bold",
|
||||
lowHearts ? "bg-destructive/15 text-destructive" : "bg-primary/10 text-primary",
|
||||
)}
|
||||
>
|
||||
<Heart className="h-4 w-4 fill-current" />{" "}
|
||||
{hasInfiniteHearts(user?.role)
|
||||
? `${INFINITE_HEARTS_LABEL} جان`
|
||||
: `${formatFaNumber(hearts)} جان`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{lowHearts && (
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border-2 border-destructive/30 bg-destructive/5 px-5 py-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
|
||||
<div>
|
||||
<p className="text-sm font-extrabold text-destructive">فقط {formatFaNumber(hearts)} جان مانده</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
یک اشتباه دیگر حساب را قفل می‌کند. قبل از آزمون مطمئن شوید؛ اگر گیر کردید با منتور حرف بزنید.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true } }))
|
||||
}
|
||||
>
|
||||
<MessageSquare className="h-4 w-4" /> منتور
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{done && (
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border-2 border-primary/30 bg-primary/5 px-5 py-4">
|
||||
<div>
|
||||
<p className="text-sm font-extrabold">دوره را تمام کردید</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
گواهینامه دیجیتال آماده است
|
||||
{physicalOpen ? " — می‌توانید نسخه فیزیکی هم درخواست کنید." : "."}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
onClick={() => {
|
||||
const id = certData?.certificate?.publicId;
|
||||
if (id) router.push(`/c/${id}`);
|
||||
else {
|
||||
void http
|
||||
.post<{ certificate: { publicId: string } }>("/api/me/certificate/issue", {})
|
||||
.then((r) => {
|
||||
if (r.certificate?.publicId) router.push(`/c/${r.certificate.publicId}`);
|
||||
})
|
||||
.catch((e) => toast.error(toUserError(e, "صدور گواهینامه ممکن نشد")));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Award className="h-4 w-4" /> مشاهده گواهینامه
|
||||
</Button>
|
||||
{physicalOpen && certData?.certificate?.publicId && (
|
||||
<Button variant="outline" onClick={() => router.push(`/c/${certData.certificate!.publicId}`)}>
|
||||
<Package className="h-4 w-4" /> نسخه فیزیکی
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-5">
|
||||
<div className="rounded-2xl border-2 border-border bg-card p-5 shadow-offset-sm md:col-span-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="flex items-center gap-2 text-sm font-extrabold">
|
||||
<TrendingUp className="h-4 w-4 text-primary" /> پیشرفت کل
|
||||
</p>
|
||||
<span className="text-2xl font-black tabular-nums text-primary">{pct}٪</span>
|
||||
</div>
|
||||
<div className="mt-3 h-3.5 w-full overflow-hidden rounded-full bg-muted">
|
||||
<div className="h-full rounded-full bg-primary transition-all" style={{ width: `${Math.max(pct, 3)}%` }} />
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-3 gap-2 text-center">
|
||||
<div className="rounded-xl bg-success/10 px-2 py-2.5">
|
||||
<p className="text-lg font-black text-success">{completedCount}</p>
|
||||
<p className="text-[11px] font-bold text-muted-foreground">تکمیل‌شده</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-primary/10 px-2 py-2.5">
|
||||
<p className="text-lg font-black text-primary">{inProgress.length}</p>
|
||||
<p className="text-[11px] font-bold text-muted-foreground">در جریان</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-muted px-2 py-2.5">
|
||||
<p className="text-lg font-black text-muted-foreground">{lockedCount}</p>
|
||||
<p className="text-[11px] font-bold text-muted-foreground">قفل‌شده</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-1.5">
|
||||
{(data?.chapters ?? []).map((ch) => {
|
||||
const chDone = ch.lessons.filter((l) => l.progress?.passedQuiz).length;
|
||||
return (
|
||||
<div key={ch.id} className="flex items-center justify-between text-xs">
|
||||
<span className="font-bold text-muted-foreground">{ch.title}</span>
|
||||
<span
|
||||
className={cn(
|
||||
"font-black tabular-nums",
|
||||
chDone === ch.lessons.length ? "text-success" : "text-foreground",
|
||||
)}
|
||||
>
|
||||
{chDone}/{ch.lessons.length}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{nextEvent && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push("/unwrap?tab=events")}
|
||||
className="mt-4 flex w-full items-start gap-2 rounded-xl border border-border/70 bg-muted/40 px-3 py-2.5 text-start transition hover:border-primary/40"
|
||||
>
|
||||
<CalendarDays className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
|
||||
<span className="min-w-0">
|
||||
<span className="block text-[10px] font-extrabold text-primary">رویداد نزدیک</span>
|
||||
<span className="block truncate text-xs font-bold">{nextEvent.title}</span>
|
||||
<span className="block text-[10px] text-muted-foreground">
|
||||
{new Date(nextEvent.startsAt).toLocaleString("fa-IR")}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col justify-between rounded-2xl border-2 p-5 md:col-span-3",
|
||||
next.locked
|
||||
? "border-border bg-muted/40"
|
||||
: "border-primary/40 bg-primary/5"
|
||||
)}
|
||||
>
|
||||
<p
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-xs font-extrabold tracking-wider",
|
||||
next.locked ? "text-muted-foreground" : "text-primary"
|
||||
)}
|
||||
>
|
||||
{next.locked ? <Lock className="h-4 w-4" /> : <ZapIcon className="h-4 w-4" />}
|
||||
{next.locked ? "هنوز قفل است" : "گام بعدی شما"}
|
||||
</p>
|
||||
<div className="mt-3 flex flex-1 flex-col items-start justify-center">
|
||||
<h2 className="text-xl font-black leading-snug sm:text-2xl">{next.title}</h2>
|
||||
<p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{next.desc}</p>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{next.cta ? (
|
||||
<Button size="lg" onClick={() => router.push(next.cta!)} className="gap-2">
|
||||
{next.icon} {next.label}
|
||||
</Button>
|
||||
) : next.prereqId ? (
|
||||
<Button size="lg" variant="secondary" onClick={() => router.push(`/player/${next.prereqId}`)} className="gap-2">
|
||||
<PlayCircle className="h-5 w-5" /> رفتن به پیش‌نیاز
|
||||
</Button>
|
||||
) : (
|
||||
<div className="inline-flex items-center gap-2 rounded-xl bg-muted px-3.5 py-2.5 text-sm font-bold text-muted-foreground">
|
||||
<Lock className="h-4 w-4" /> ابتدا درس پیش‌نیاز را کامل کنید
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true } }))
|
||||
}
|
||||
>
|
||||
<MessageSquare className="h-5 w-5" /> منتور
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data && <SkillTree data={data} onSelect={(id) => router.push(`/player/${id}`)} />}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-xs font-bold text-muted-foreground">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<CheckCircle2 className="h-4 w-4 text-success" /> تکمیل‌شده
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<PlayCircle className="h-4 w-4 text-primary" /> در دسترس
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<BookOpenCheck className="h-4 w-4 text-gold" /> آمادهٔ آزمون
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<Lock className="h-4 w-4 text-muted-foreground" /> قفل‌شده
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function nextAction(
|
||||
inProgress: TreeLesson[],
|
||||
readyQuiz: TreeLesson[],
|
||||
openAndNew: TreeLesson[],
|
||||
firstLocked: TreeLesson | undefined,
|
||||
done: boolean,
|
||||
) {
|
||||
if (readyQuiz[0]) {
|
||||
const lesson = readyQuiz[0];
|
||||
return {
|
||||
title: `آزمون «${lesson.title}» منتظر شماست`,
|
||||
desc: "آموخته‌هایتان را محک بزنید؛ هر پاسخ اشتباه یک جان کم می‌کند.",
|
||||
label: "شروع آزمون",
|
||||
cta: `/quiz/${lesson.id}`,
|
||||
icon: <BookOpenCheck className="h-5 w-5" />,
|
||||
locked: false,
|
||||
prereqId: null as number | null,
|
||||
};
|
||||
}
|
||||
if (inProgress[0]) {
|
||||
const lesson = inProgress[0];
|
||||
const pct = Math.round(lesson.progress?.watchedPct ?? 0);
|
||||
return {
|
||||
title: `ادامهٔ تماشای «${lesson.title}»`,
|
||||
desc: `${formatFaNumber(pct)}٪ تماشا شده — با رسیدن به آستانه، آزمون باز می‌شود.`,
|
||||
label: "ادامهٔ تماشا",
|
||||
cta: `/player/${lesson.id}`,
|
||||
icon: <PlayCircle className="h-5 w-5" />,
|
||||
locked: false,
|
||||
prereqId: null as number | null,
|
||||
};
|
||||
}
|
||||
if (openAndNew[0]) {
|
||||
const lesson = openAndNew[0];
|
||||
return {
|
||||
title: `شروع «${lesson.title}»`,
|
||||
desc: `${formatFaNumber(lesson.durationSeconds)} ثانیه تماشای تأییدشده · ${formatFaNumber(lesson.xpReward)} امتیاز پاداش در صورت تکمیل.`,
|
||||
label: "شروع درس",
|
||||
cta: `/player/${lesson.id}`,
|
||||
icon: <PlayCircle className="h-5 w-5" />,
|
||||
locked: false,
|
||||
prereqId: null as number | null,
|
||||
};
|
||||
}
|
||||
if (firstLocked) {
|
||||
return {
|
||||
title: `«${firstLocked.title}» قفل است`,
|
||||
desc: "بعد از تکمیل صادقانهٔ درس پیش‌نیاز و قبولی در آزمونش، این شاخه باز می‌شود.",
|
||||
label: "",
|
||||
cta: null as string | null,
|
||||
icon: null,
|
||||
locked: true,
|
||||
prereqId: firstLocked.requiresLessonId ?? null,
|
||||
};
|
||||
}
|
||||
if (done) {
|
||||
return {
|
||||
title: "همهٔ شاخه‌ها را آزاد کردید",
|
||||
desc: "تمام دروس تکمیل‌شده‌اند. گواهینامه را ببینید یا لیگ این هفته را فتح کنید.",
|
||||
label: "رفتن به لیگ‌ها",
|
||||
cta: "/leaderboard",
|
||||
icon: <ArrowLeft className="h-5 w-5" />,
|
||||
locked: false,
|
||||
prereqId: null as number | null,
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: "مسیر آماده است",
|
||||
desc: "داده‌ای برای نمایش نیست.",
|
||||
label: "",
|
||||
cta: null as string | null,
|
||||
icon: null,
|
||||
locked: false,
|
||||
prereqId: null as number | null,
|
||||
};
|
||||
}
|
||||
|
||||
function CapSkeleton() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div className="space-y-2.5">
|
||||
<Skeleton className="h-3.5 w-36" />
|
||||
<Skeleton className="h-10 w-64" />
|
||||
<Skeleton className="h-4 w-96 max-w-full" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-8 w-24 rounded-full" />
|
||||
<Skeleton className="h-8 w-24 rounded-full" />
|
||||
<Skeleton className="h-8 w-24 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-5 md:grid-cols-5">
|
||||
<div className="space-y-4 rounded-2xl border-2 border-border bg-card p-5 shadow-offset-sm md:col-span-2">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<Skeleton className="h-3.5 w-full rounded-full" />
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-16 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border-2 border-primary/40 bg-primary/5 p-5 md:col-span-3">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="mt-3 h-7 w-3/4" />
|
||||
<Skeleton className="mt-2 h-4 w-1/2" />
|
||||
<Skeleton className="mt-6 h-11 w-40 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ZapIcon(props: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M13 2 4.5 13.5H11l-.8 8.5L18.5 10H12l1-8z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
/** Shortcut so /community never 404s. */
|
||||
export default function CommunityRedirectPage() {
|
||||
const router = useRouter();
|
||||
useEffect(() => {
|
||||
router.replace("/unwrap?tab=community");
|
||||
}, [router]);
|
||||
return null;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,647 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
/* enable dark-variant & class-based theming */
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* ============================================================
|
||||
Pargar design system — soft pastel, a touch of glass,
|
||||
calm shadows, gentle motion.
|
||||
============================================================ */
|
||||
:root {
|
||||
--background: #f4f5fb;
|
||||
--foreground: #2a2745;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #2a2745;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #2a2745;
|
||||
--primary: #6d63f0;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #5a6380;
|
||||
--secondary-foreground: #ffffff;
|
||||
--muted: #edeef7;
|
||||
--muted-foreground: #6b6c8a;
|
||||
--accent: #ec6fa9;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #e05c70;
|
||||
--destructive-foreground: #ffffff;
|
||||
--success: #3ec98a;
|
||||
--success-foreground: #ffffff;
|
||||
--gold: #f2a437;
|
||||
--gold-foreground: #3f2a04;
|
||||
--border: #d9dbe9;
|
||||
--input: #c9cbdf;
|
||||
--ring: #6d63f0;
|
||||
--radius: 0.5rem;
|
||||
/* inverted editorial band (dark in light mode, light in dark mode) */
|
||||
--invert-bg: #211f3e;
|
||||
--invert-fg: #f6f5fb;
|
||||
/* soft motion tokens */
|
||||
--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-soft-in-out: cubic-bezier(0.45, 0.05, 0.25, 1);
|
||||
--dur-fast: 280ms;
|
||||
--dur-med: 420ms;
|
||||
--dur-slow: 700ms;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #12111d;
|
||||
--foreground: #ecebf6;
|
||||
--card: #191830;
|
||||
--card-foreground: #ecebf6;
|
||||
--popover: #201f3a;
|
||||
--popover-foreground: #ecebf6;
|
||||
--primary: #9189fb;
|
||||
--primary-foreground: #161129;
|
||||
--secondary: #8d95ab;
|
||||
--secondary-foreground: #10131e;
|
||||
--muted: #262442;
|
||||
--muted-foreground: #a7a8c9;
|
||||
--accent: #f095c4;
|
||||
--accent-foreground: #2a0f1f;
|
||||
--destructive: #f47b8c;
|
||||
--destructive-foreground: #2a0a0f;
|
||||
--success: #63e0a5;
|
||||
--success-foreground: #06210f;
|
||||
--gold: #fab653;
|
||||
--gold-foreground: #2a1a02;
|
||||
--border: #353360;
|
||||
--input: #4d4a7e;
|
||||
--ring: #9189fb;
|
||||
--radius: 0.25rem;
|
||||
--invert-bg: #f0eff8;
|
||||
--invert-fg: #18162e;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
/* next/font: FD default + plain Latin face for English-only fields */
|
||||
/* Prefer Apple Color Emoji first; chat also renders Apple PNGs for Linux hosts. */
|
||||
--font-sans: var(--font-vazirmatn), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
|
||||
sans-serif;
|
||||
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
|
||||
--font-latin: var(--font-vazirmatn-latin), var(--font-vazirmatn), Tahoma, "Segoe UI", Arial,
|
||||
sans-serif;
|
||||
/* Technical / English strings keep Latin digits */
|
||||
--font-mono: var(--font-vazirmatn-latin), ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
|
||||
Consolas, monospace;
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-success: var(--success);
|
||||
--color-success-foreground: var(--success-foreground);
|
||||
--color-gold: var(--gold);
|
||||
--color-gold-foreground: var(--gold-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 10px;
|
||||
--radius-xl: 14px;
|
||||
--radius-2xl: 20px;
|
||||
--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--default-transition-duration: 350ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
html {
|
||||
color-scheme: light;
|
||||
scroll-behavior: smooth;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background);
|
||||
background-image:
|
||||
radial-gradient(1100px 540px at 85% -8%, color-mix(in srgb, var(--color-accent) 11%, transparent), transparent 62%),
|
||||
radial-gradient(1000px 520px at -8% 26%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 60%),
|
||||
radial-gradient(800px 420px at 50% 110%, color-mix(in srgb, var(--color-gold) 7%, transparent), transparent 60%);
|
||||
background-attachment: fixed;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
/*
|
||||
* Form controls: UA + Tailwind preflight use `font: inherit`, which is flaky.
|
||||
* Pin family so Vazirmatn FD (Persian digits) paints the same as surrounding UI.
|
||||
*/
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-family: var(--font-sans) !important;
|
||||
font-feature-settings: normal !important;
|
||||
}
|
||||
input::placeholder,
|
||||
textarea::placeholder,
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
font-family: var(--font-sans) !important;
|
||||
font-feature-settings: normal !important;
|
||||
}
|
||||
/*
|
||||
* English-only typing surfaces: passwords, usernames, email, captcha, URLs, codes.
|
||||
* Use plain Vazirmatn (non-FD) so Latin digits stay Latin.
|
||||
*/
|
||||
.font-latin,
|
||||
input.font-latin,
|
||||
textarea.font-latin,
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[dir="ltr"],
|
||||
textarea[dir="ltr"],
|
||||
input[autocomplete="username"],
|
||||
input[autocomplete="email"],
|
||||
input[autocomplete="current-password"],
|
||||
input[autocomplete="new-password"],
|
||||
input[autocomplete="one-time-code"],
|
||||
input[id*="captcha" i],
|
||||
input[name*="captcha" i],
|
||||
input[id*="password" i],
|
||||
input[name*="password" i],
|
||||
input[id*="username" i],
|
||||
input[name*="username" i] {
|
||||
font-family: var(--font-latin) !important;
|
||||
font-feature-settings: normal !important;
|
||||
font-variant-numeric: lining-nums !important;
|
||||
}
|
||||
.font-latin::placeholder,
|
||||
input.font-latin::placeholder,
|
||||
textarea.font-latin::placeholder,
|
||||
input[type="password"]::placeholder,
|
||||
input[type="email"]::placeholder,
|
||||
input[type="url"]::placeholder,
|
||||
input[type="tel"]::placeholder,
|
||||
input[dir="ltr"]::placeholder,
|
||||
textarea[dir="ltr"]::placeholder {
|
||||
font-family: var(--font-latin) !important;
|
||||
}
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea:-webkit-autofill,
|
||||
select:-webkit-autofill {
|
||||
font-family: var(--font-sans) !important;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--color-primary) 22%, transparent);
|
||||
color: inherit;
|
||||
}
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875em;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent);
|
||||
border-radius: 999px;
|
||||
border: 2px solid var(--color-background);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.chat-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: color-mix(in srgb, var(--color-muted-foreground) 35%, transparent) transparent;
|
||||
}
|
||||
.chat-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.chat-scroll::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--color-muted-foreground) 35%, transparent);
|
||||
border-radius: 999px;
|
||||
border-width: 0;
|
||||
}
|
||||
.section-kicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.section-kicker::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1.75rem;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
/* kicker sitting on a solid primary panel — bar & text follow the opposing tone */
|
||||
.section-kicker.on-primary {
|
||||
color: var(--color-primary-foreground);
|
||||
}
|
||||
.section-kicker.on-primary::before {
|
||||
background: var(--color-primary-foreground);
|
||||
}
|
||||
.card-hover {
|
||||
transition:
|
||||
border-color 150ms ease,
|
||||
box-shadow 250ms ease,
|
||||
transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.card-hover:hover {
|
||||
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
|
||||
box-shadow:
|
||||
0 2px 6px rgba(41, 39, 70, 0.05),
|
||||
0 22px 44px -18px rgba(75, 66, 200, 0.22);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.dark .card-hover:hover {
|
||||
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.4),
|
||||
0 22px 44px -18px color-mix(in srgb, var(--color-primary) 40%, transparent);
|
||||
}
|
||||
.shadow-soft {
|
||||
box-shadow:
|
||||
0 2px 6px rgba(41, 39, 70, 0.05),
|
||||
0 20px 44px -22px rgba(41, 39, 70, 0.2);
|
||||
}
|
||||
.dark .shadow-soft {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 22px 48px -22px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
/* signature offset shadow — softened for the pastel identity */
|
||||
.shadow-offset {
|
||||
box-shadow: 5px 5px 0 0 var(--invert-fg);
|
||||
}
|
||||
.shadow-offset-sm {
|
||||
box-shadow: 4px 4px 0 0 var(--invert-fg);
|
||||
}
|
||||
/* in dark mode the offset shadow must stay visible against the dark canvas */
|
||||
.dark .shadow-offset {
|
||||
box-shadow: 5px 5px 0 0 rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
.dark .shadow-offset-sm {
|
||||
box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
/* inverted editorial band */
|
||||
.band-invert {
|
||||
background:
|
||||
radial-gradient(900px 400px at 90% -20%, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 60%),
|
||||
var(--invert-bg);
|
||||
color: var(--invert-fg);
|
||||
}
|
||||
.chip-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.dot-grid {
|
||||
background-image: radial-gradient(
|
||||
color-mix(in srgb, currentColor 16%, transparent) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
.dot-grid-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* frosted glass — a touch: soft, restrained */
|
||||
.glass {
|
||||
background: linear-gradient(150deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.28));
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.3);
|
||||
backdrop-filter: blur(14px) saturate(1.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
||||
0 16px 36px -22px rgba(41, 39, 70, 0.3);
|
||||
}
|
||||
.dark .glass {
|
||||
background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.09),
|
||||
0 16px 36px -22px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* frosted glow variants per status (colored ambience) */
|
||||
.glass-glow-primary,
|
||||
.glass-glow-accent,
|
||||
.glass-glow-gold,
|
||||
.glass-glow-success,
|
||||
.glass-glow-neutral {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
||||
0 14px 34px -12px rgba(41, 39, 70, 0.3);
|
||||
}
|
||||
.glass-glow-primary {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
||||
0 14px 34px -12px color-mix(in srgb, var(--color-primary) 42%, transparent);
|
||||
}
|
||||
.glass-glow-accent {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
||||
0 14px 34px -12px color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
}
|
||||
.glass-glow-gold {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
||||
0 14px 34px -12px color-mix(in srgb, var(--color-gold) 40%, transparent);
|
||||
}
|
||||
.glass-glow-success {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
||||
0 14px 34px -12px color-mix(in srgb, var(--color-success) 40%, transparent);
|
||||
}
|
||||
|
||||
/* glass navigation bar */
|
||||
.nav-glass {
|
||||
background: color-mix(in srgb, var(--color-background) 82%, transparent);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(1.5);
|
||||
backdrop-filter: blur(16px) saturate(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* legacy aliases now render soft + calm */
|
||||
.bg-gradient-brand {
|
||||
background-color: var(--color-primary);
|
||||
background-image: none;
|
||||
}
|
||||
.text-gradient-brand {
|
||||
color: var(--color-primary);
|
||||
-webkit-background-clip: initial;
|
||||
background-clip: initial;
|
||||
}
|
||||
.shadow-glow,
|
||||
.shadow-glow-cyan {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ---------- motion system (soft by default) ---------- */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.85s var(--ease-soft) forwards;
|
||||
}
|
||||
.reveal-1 { animation-delay: 0.08s; }
|
||||
.reveal-2 { animation-delay: 0.16s; }
|
||||
.reveal-3 { animation-delay: 0.24s; }
|
||||
.reveal-4 { animation-delay: 0.32s; }
|
||||
.reveal-5 { animation-delay: 0.4s; }
|
||||
.reveal-scale {
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.7s var(--ease-soft) forwards;
|
||||
}
|
||||
.hover-lift {
|
||||
transition:
|
||||
transform var(--dur-med) var(--ease-soft),
|
||||
box-shadow var(--dur-med) var(--ease-soft);
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 2px 6px rgba(41, 39, 70, 0.05),
|
||||
0 20px 40px -18px color-mix(in srgb, var(--color-primary) 26%, transparent);
|
||||
}
|
||||
.dark .hover-lift:hover {
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.35),
|
||||
0 20px 40px -18px color-mix(in srgb, var(--color-primary) 32%, transparent);
|
||||
}
|
||||
.press {
|
||||
transition: transform var(--dur-fast) var(--ease-soft);
|
||||
}
|
||||
.press:active {
|
||||
transform: translateY(1px) scale(0.985);
|
||||
}
|
||||
.press-flat:active {
|
||||
transform: translateY(0.5px) scale(0.99);
|
||||
}
|
||||
.float-slow {
|
||||
animation: floatY 9s var(--ease-soft-in-out) infinite;
|
||||
}
|
||||
.animate-pulse-soft {
|
||||
animation: pulseSoft 3s var(--ease-soft-in-out) infinite;
|
||||
}
|
||||
|
||||
/* Soften common Tailwind transition utilities */
|
||||
.transition,
|
||||
.transition-all,
|
||||
.transition-colors,
|
||||
.transition-opacity,
|
||||
.transition-shadow,
|
||||
.transition-transform {
|
||||
transition-timing-function: var(--ease-soft);
|
||||
}
|
||||
.duration-75 { transition-duration: 180ms; }
|
||||
.duration-100 { transition-duration: 220ms; }
|
||||
.duration-150 { transition-duration: 280ms; }
|
||||
.duration-200 { transition-duration: 350ms; }
|
||||
.duration-300 { transition-duration: 420ms; }
|
||||
.ease-out { transition-timing-function: var(--ease-soft); }
|
||||
.ease-in-out { transition-timing-function: var(--ease-soft-in-out); }
|
||||
|
||||
/* Soften snappy active scales */
|
||||
.active\:scale-90:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal,
|
||||
.reveal-scale {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
.float-slow,
|
||||
.hover-lift,
|
||||
.press,
|
||||
.animate-pulse-soft,
|
||||
.chat-msg-glow {
|
||||
transition: none;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* keyframes live at root so they always exist regardless of layers */
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.985);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@keyframes floatY {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
}
|
||||
@keyframes pulseSoft {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes chatMsgGlow {
|
||||
0% {
|
||||
filter: drop-shadow(0 0 0 transparent);
|
||||
}
|
||||
35% {
|
||||
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-gold) 55%, transparent))
|
||||
drop-shadow(0 0 28px color-mix(in srgb, var(--color-gold) 28%, transparent));
|
||||
}
|
||||
100% {
|
||||
filter: drop-shadow(0 0 0 transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-msg-glow {
|
||||
animation: chatMsgGlow 1.85s var(--ease-soft) forwards;
|
||||
will-change: filter;
|
||||
}
|
||||
|
||||
@keyframes metaprog {
|
||||
0% {
|
||||
transform: translateX(-120%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(420%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Soften Tailwind ping / pulse defaults for this app */
|
||||
@keyframes softPing {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.55;
|
||||
}
|
||||
75%,
|
||||
100% {
|
||||
transform: scale(1.45);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.animate-ping {
|
||||
animation: softPing 1.6s var(--ease-soft-in-out) infinite;
|
||||
}
|
||||
|
||||
@keyframes softPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.72;
|
||||
}
|
||||
}
|
||||
.animate-pulse {
|
||||
animation: softPulse 2.8s var(--ease-soft-in-out) infinite;
|
||||
}
|
||||
|
||||
/* ---- skeleton shimmer ------------------------------------------------ */
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-muted);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.skeleton::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--color-foreground) 8%, transparent),
|
||||
transparent
|
||||
);
|
||||
animation: skeletonShimmer 2s var(--ease-soft-in-out) infinite;
|
||||
}
|
||||
@keyframes skeletonShimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- global motion safety --------------------------------------------- */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,59 @@
|
||||
import type { Metadata } from "next";
|
||||
import localFont from "next/font/local";
|
||||
import "./globals.css";
|
||||
import { Providers } from "@/components/providers";
|
||||
import { AppShell } from "@/components/app-shell";
|
||||
import { PageTransition } from "@/components/page-transition";
|
||||
|
||||
/** Vazirmatn FD — default UI; Latin digits render as Persian glyphs. */
|
||||
const vazirmatnFd = localFont({
|
||||
src: [
|
||||
{ path: "./fonts/Vazirmatn-FD-Thin.woff2", weight: "100", style: "normal" },
|
||||
{ path: "./fonts/Vazirmatn-FD-ExtraLight.woff2", weight: "200", style: "normal" },
|
||||
{ path: "./fonts/Vazirmatn-FD-Light.woff2", weight: "300", style: "normal" },
|
||||
{ path: "./fonts/Vazirmatn-FD-Regular.woff2", weight: "400", style: "normal" },
|
||||
{ path: "./fonts/Vazirmatn-FD-Medium.woff2", weight: "500", style: "normal" },
|
||||
{ path: "./fonts/Vazirmatn-FD-SemiBold.woff2", weight: "600", style: "normal" },
|
||||
{ path: "./fonts/Vazirmatn-FD-Bold.woff2", weight: "700", style: "normal" },
|
||||
{ path: "./fonts/Vazirmatn-FD-ExtraBold.woff2", weight: "800", style: "normal" },
|
||||
{ path: "./fonts/Vazirmatn-FD-Black.woff2", weight: "900", style: "normal" },
|
||||
],
|
||||
display: "swap",
|
||||
variable: "--font-vazirmatn",
|
||||
fallback: ["Tahoma", "Segoe UI", "Arial", "sans-serif"],
|
||||
});
|
||||
|
||||
/** Plain Vazirmatn — Latin digits stay Latin (passwords, usernames, captcha, URLs…). */
|
||||
const vazirmatnLatin = localFont({
|
||||
src: "./fonts/Vazirmatn-Variable.woff2",
|
||||
weight: "100 900",
|
||||
display: "swap",
|
||||
variable: "--font-vazirmatn-latin",
|
||||
fallback: ["Tahoma", "Segoe UI", "Arial", "sans-serif"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "پرگار",
|
||||
description: "مسیر یادگیری واقعی پرگار",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html
|
||||
lang="fa"
|
||||
dir="rtl"
|
||||
className={`${vazirmatnFd.variable} ${vazirmatnLatin.variable}`}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<body
|
||||
className={`${vazirmatnFd.className} min-h-screen bg-background font-sans text-foreground antialiased`}
|
||||
>
|
||||
<Providers>
|
||||
<AppShell>
|
||||
<PageTransition>{children}</PageTransition>
|
||||
</AppShell>
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { Trophy } from "lucide-react";
|
||||
import { LeaderboardPanel } from "@/components/leaderboard-panel";
|
||||
import { PageHeader } from "@/components/page-header";
|
||||
|
||||
export default function LeaderboardPage() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<PageHeader
|
||||
align="center"
|
||||
kicker="رقابت هفتگی"
|
||||
title={
|
||||
<>
|
||||
لیگ <span className="text-gradient-brand">هفتگی</span>
|
||||
</>
|
||||
}
|
||||
description="با تکمیل صادقانه دروس امتیاز بگیرید. لیگ هر دوشنبه صفر می‌شود — استمرار از شدت مهم‌تر است."
|
||||
actions={
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
|
||||
<Trophy className="h-6 w-6" />
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<Suspense fallback={null}>
|
||||
<LeaderboardPanel />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Heart, Lock, MessageSquare, Send, Loader2 } from "lucide-react";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import { api, http, toUserError } from "@/lib/api";
|
||||
import { MAX_HEARTS, clampHearts, hasInfiniteHearts } from "@/lib/hearts";
|
||||
import type { Mentor, User } from "@/lib/types";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "@/components/providers";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export default function LockoutPage() {
|
||||
const router = useRouter();
|
||||
const user = useAuth((s) => s.user);
|
||||
const [note, setNote] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [requested, setRequested] = useState(false);
|
||||
const [mentorId, setMentorId] = useState<number | null>(null);
|
||||
|
||||
const syncUser = useCallback(async () => {
|
||||
try {
|
||||
const res = await api<{ user: User }>("/api/auth/me");
|
||||
useAuth.getState().setUser(res.user);
|
||||
if (!res.user.isLocked || hasInfiniteHearts(res.user.role)) {
|
||||
router.replace("/cap");
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && (!user.isLocked || hasInfiniteHearts(user.role))) {
|
||||
router.replace("/cap");
|
||||
return;
|
||||
}
|
||||
const onFocus = () => void syncUser();
|
||||
window.addEventListener("focus", onFocus);
|
||||
void syncUser();
|
||||
return () => {
|
||||
window.removeEventListener("focus", onFocus);
|
||||
};
|
||||
}, [syncUser, user, router]);
|
||||
|
||||
useEffect(() => {
|
||||
void http
|
||||
.get<{ mentors: Mentor[] }>("/api/mentors")
|
||||
.then((r) => {
|
||||
const first = r.mentors?.[0];
|
||||
if (first) setMentorId(first.id);
|
||||
})
|
||||
.catch(() => undefined);
|
||||
}, []);
|
||||
|
||||
const requestUnlock = async () => {
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await http.post<{ message?: string }>("/api/me/request-unlock", { note });
|
||||
setRequested(true);
|
||||
toast.success(res.message || "درخواست ثبت شد");
|
||||
} catch (e) {
|
||||
toast.error(toUserError(e));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openMentorChat = () => {
|
||||
const draft =
|
||||
"سلام، حسابم بعد از اتمام جان‌ها قفل شده. لطفاً برای رفع محدودیت راهنمایی‌ام کنید.";
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("pargar:chat", {
|
||||
detail: { open: true, with: mentorId ?? undefined, draft },
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const hearts = clampHearts(user?.hearts ?? 0);
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex min-h-[70vh] max-w-lg flex-col items-center justify-center px-4 text-center">
|
||||
<div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-destructive/15">
|
||||
<Lock className="h-11 w-11 text-destructive" />
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-bold tracking-wider text-destructive">حساب قفل شد</p>
|
||||
<h1 className="mt-2 text-3xl font-bold tracking-tight">جان‌هایتان تمام شد</h1>
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
|
||||
هر پاسخ اشتباه در آزمون یک جان کم می‌کند. با تمام شدن سه جان، یادگیری و آزمون قفل می‌شود تا
|
||||
تیم مسیر را بررسی کند — خودتان نمی‌توانید قفل را باز کنید.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex items-center gap-2">
|
||||
{Array.from({ length: MAX_HEARTS }).map((_, i) =>
|
||||
i < hearts ? (
|
||||
<span key={i} className="grid h-9 w-9 place-items-center rounded-full bg-destructive/15 text-destructive">
|
||||
<Heart className="h-5 w-5 fill-current" />
|
||||
</span>
|
||||
) : (
|
||||
<span key={i} className="grid h-9 w-9 place-items-center rounded-full bg-muted text-muted-foreground/40">
|
||||
<Heart className="h-5 w-5" />
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card className="mt-6 w-full space-y-3 border-destructive/30 bg-destructive/5 p-4 text-start text-sm text-muted-foreground">
|
||||
<p className="font-bold text-foreground">گام بعدی</p>
|
||||
<ol className="list-decimal space-y-1.5 pe-4 text-xs leading-relaxed">
|
||||
<li>از طریق گفتگو با منتور وضعیت را توضیح دهید.</li>
|
||||
<li>درخواست بررسی را برای تیم ثبت کنید (حداکثر یک‌بار در ۱۲ ساعت).</li>
|
||||
<li>بعد از تأیید متصدی، ۳ جان برمی‌گردد و مسیر دوباره باز می‌شود.</li>
|
||||
</ol>
|
||||
</Card>
|
||||
|
||||
<div className="mt-5 w-full space-y-2">
|
||||
<textarea
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
maxLength={500}
|
||||
rows={3}
|
||||
dir="rtl"
|
||||
placeholder="اختیاری: چه آزمونی گیر کردید؟ چه کمکی لازم دارید؟"
|
||||
className="w-full rounded-xl border-2 border-border bg-background px-3 py-2 text-sm outline-none focus-visible:border-primary/50"
|
||||
/>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<Button className="flex-1" disabled={busy || requested} onClick={() => void requestUnlock()}>
|
||||
{busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
|
||||
{requested ? "درخواست ارسال شد" : "درخواست رفع قفل"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={openMentorChat}
|
||||
>
|
||||
<MessageSquare className="h-4 w-4" /> گفتگو با منتور
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className={cn("w-full text-muted-foreground")}
|
||||
onClick={() => router.push("/unwrap?tab=community")}
|
||||
>
|
||||
جامعه و حمایت
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { CheckCircle2, Loader2, RefreshCw, ShieldCheck, Timer, Zap } from "lucide-react";
|
||||
import { BrandMark } from "@/components/brand-mark";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import { http, toUserError } from "@/lib/api";
|
||||
import type { User } from "@/lib/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { PasswordInput } from "@/components/ui/password-input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
|
||||
const perks = [
|
||||
{ icon: Timer, text: "زمان تماشای راستی‌آزمایی‌شده — بدون میان‌بر" },
|
||||
{ icon: ShieldCheck, text: "قفل‌شدن پس از سه اشتباه، تا وقتی واقعاً یاد بگیرید" },
|
||||
{ icon: CheckCircle2, text: "لیگ هفتگی، رویداد زنده و منتور یک‌به‌یک" },
|
||||
];
|
||||
|
||||
type CaptchaChallenge = {
|
||||
challengeId: string;
|
||||
imageBase64: string;
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
const setSession = useAuth((s) => s.setSession);
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [captchaAnswer, setCaptchaAnswer] = useState("");
|
||||
const [challenge, setChallenge] = useState<CaptchaChallenge | null>(null);
|
||||
const [captchaLoading, setCaptchaLoading] = useState(true);
|
||||
const [rememberMe, setRememberMe] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { data: registerStatus } = useQuery({
|
||||
queryKey: ["auth", "register-status"],
|
||||
queryFn: () => http.get<{ enabled: boolean }>("/api/auth/register-status"),
|
||||
});
|
||||
|
||||
const loadCaptcha = useCallback(async () => {
|
||||
setCaptchaLoading(true);
|
||||
setCaptchaAnswer("");
|
||||
try {
|
||||
const data = await http.get<CaptchaChallenge>("/api/auth/captcha");
|
||||
setChallenge(data);
|
||||
} catch (err) {
|
||||
setChallenge(null);
|
||||
setError(toUserError(err, "بارگذاری کد امنیتی ممکن نشد"));
|
||||
} finally {
|
||||
setCaptchaLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadCaptcha();
|
||||
}, [loadCaptcha]);
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!challenge) {
|
||||
setError("ابتدا کد امنیتی را بارگذاری کنید");
|
||||
void loadCaptcha();
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await http.post<{ accessToken: string; refreshToken: string; user: User }>("/api/auth/login", {
|
||||
username: email,
|
||||
password,
|
||||
challengeId: challenge.challengeId,
|
||||
captchaAnswer,
|
||||
rememberMe,
|
||||
});
|
||||
setSession(data.accessToken, data.refreshToken, data.user);
|
||||
router.push("/cap");
|
||||
} catch (err) {
|
||||
setError(toUserError(err, "ورود ناموفق بود"));
|
||||
void loadCaptcha();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex min-h-[80vh] max-w-4xl flex-col justify-center px-4 py-8">
|
||||
<div className="grid overflow-hidden rounded-2xl border border-border bg-card shadow-soft md:grid-cols-2">
|
||||
{/* brand panel */}
|
||||
<aside className="relative hidden flex-col justify-between overflow-hidden bg-primary p-7 text-primary-foreground md:flex">
|
||||
<div className="dot-grid pointer-events-none absolute -end-20 -top-20 h-72 w-72 rotate-12 text-primary-foreground opacity-50" aria-hidden />
|
||||
<span className="pointer-events-none absolute end-8 top-8 h-6 w-6 rotate-12 rounded-md bg-accent" aria-hidden />
|
||||
<div className="relative">
|
||||
<BrandMark locale="fa" size="lg" className="text-primary-foreground [&_span]:text-accent" />
|
||||
<p className="section-kicker on-primary mt-5">بوت‌کمپ دگرگونی</p>
|
||||
<h2 className="mt-3 text-2xl font-bold leading-snug">
|
||||
سیستم، میان‌بر ندارد.
|
||||
<br />
|
||||
شما هم ندارید.
|
||||
</h2>
|
||||
<p className="mt-2.5 text-sm leading-relaxed text-primary-foreground/80">
|
||||
یادگیری را قابل کنترل و قابل اثبات می‌کند — برای خودتان هم که شده.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="relative mt-6 space-y-2.5">
|
||||
{perks.map((p) => (
|
||||
<li key={p.text} className="flex items-start gap-2.5 text-sm">
|
||||
<p.icon className="mt-0.5 h-4 w-4 shrink-0 text-primary-foreground/90" />
|
||||
<span className="leading-relaxed text-primary-foreground/90">{p.text}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
{/* form panel */}
|
||||
<div className="flex flex-col justify-center bg-card p-6 sm:p-8">
|
||||
<CardHeader className="items-center space-y-1.5 px-0 pb-5 pt-0 text-center">
|
||||
<div className="mb-1 flex justify-center md:hidden">
|
||||
<BrandMark locale="fa" size="lg" logoOnly />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">خوش برگشتید</CardTitle>
|
||||
<CardDescription>برای ادامه مسیر خود وارد شوید.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="mx-auto w-full max-w-md px-0 pt-0">
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username">شناسه کاربری</Label>
|
||||
<Input
|
||||
id="username"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
dir="ltr"
|
||||
className="text-left"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">رمز عبور</Label>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
placeholder="رمز عبور"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Label htmlFor="captcha">کد امنیتی</Label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void loadCaptcha()}
|
||||
disabled={captchaLoading}
|
||||
className="inline-flex items-center gap-1 text-xs font-medium text-primary underline-offset-4 hover:underline disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`h-3.5 w-3.5 ${captchaLoading ? "animate-spin" : ""}`} />
|
||||
تازه‌سازی
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-stretch gap-3">
|
||||
<div
|
||||
className="relative flex h-14 min-w-[9.5rem] shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-muted/60 shadow-inner"
|
||||
aria-live="polite"
|
||||
>
|
||||
{captchaLoading || !challenge?.imageBase64 ? (
|
||||
<span className="text-sm text-muted-foreground">…</span>
|
||||
) : (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={`data:image/png;base64,${challenge.imageBase64}`}
|
||||
alt="کد امنیتی"
|
||||
width={160}
|
||||
height={52}
|
||||
className="h-full w-full object-contain select-none"
|
||||
draggable={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Input
|
||||
id="captcha"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
autoCapitalize="characters"
|
||||
spellCheck={false}
|
||||
value={captchaAnswer}
|
||||
onChange={(e) => setCaptchaAnswer(e.target.value.toUpperCase())}
|
||||
required
|
||||
dir="ltr"
|
||||
className="h-14 text-center font-mono tracking-widest uppercase placeholder:text-center"
|
||||
placeholder="کد تصویر"
|
||||
maxLength={6}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label className="flex items-center justify-between gap-3 text-sm">
|
||||
<span>مرا به یاد داشته باش</span>
|
||||
<Switch
|
||||
checked={rememberMe}
|
||||
onCheckedChange={setRememberMe}
|
||||
aria-label="مرا به یاد داشته باش"
|
||||
/>
|
||||
</label>
|
||||
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="gradient"
|
||||
className="h-12 w-full"
|
||||
size="lg"
|
||||
disabled={loading || captchaLoading || !challenge}
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Zap className="h-4 w-4" />} ورود
|
||||
</Button>
|
||||
</form>
|
||||
<p className="mt-6 text-center text-sm text-muted-foreground">
|
||||
{registerStatus?.enabled ? (
|
||||
<>
|
||||
حساب ندارید؟{" "}
|
||||
<Link href="/register" className="font-medium text-primary underline-offset-4 hover:underline">
|
||||
ثبت‌نام
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
"حساب شما توسط متصدی بوت‌کمپ ساخته و اعلام می‌شود."
|
||||
)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { BrandMark } from "@/components/brand-mark";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth, useAuthHydrated } from "@/lib/auth-store";
|
||||
import { Home, LogIn, Trees } from "lucide-react";
|
||||
|
||||
export default function NotFound() {
|
||||
const hydrated = useAuthHydrated();
|
||||
const user = useAuth((s) => s.user);
|
||||
const loggedIn = hydrated && !!user;
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex max-w-lg flex-col items-center px-4 py-16 text-center">
|
||||
<div className="relative w-full overflow-hidden rounded-2xl border-2 border-border bg-card px-8 py-14 shadow-offset">
|
||||
<div className="dot-grid dot-grid-primary pointer-events-none absolute -end-10 -top-10 h-40 w-40 opacity-60" aria-hidden />
|
||||
<p className="text-7xl font-black tabular-nums text-primary/25">۴۰۴</p>
|
||||
<div className="mt-4 flex justify-center">
|
||||
<BrandMark locale="fa" size="lg" />
|
||||
</div>
|
||||
<h1 className="mt-6 text-2xl font-black tracking-tight">این مسیر پیدا نشد</h1>
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
|
||||
{loggedIn
|
||||
? "این آدرس در سامانه نیست. از درخت مهارت یا مرکز ادامه دهید."
|
||||
: "صفحه‌ای که دنبالش بودید پیدا نشد. می‌توانید به خانه برگردید یا وارد حساب شوید."}
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||
{loggedIn ? (
|
||||
<>
|
||||
<Button asChild className="gap-2">
|
||||
<Link href="/cap">
|
||||
<Trees className="h-4 w-4" /> درخت مهارت
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="gap-2">
|
||||
<Link href="/unwrap?tab=community">مرکز · حمایت</Link>
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button asChild className="gap-2">
|
||||
<Link href="/">
|
||||
<Home className="h-4 w-4" /> خانه
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="gap-2">
|
||||
<Link href="/login">
|
||||
<LogIn className="h-4 w-4" /> ورود
|
||||
</Link>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
import { BellRing, Loader2, Save } from "lucide-react";
|
||||
import { http } from "@/lib/api";
|
||||
import type { NotificationPrefs } from "@/lib/types";
|
||||
import { NotificationsPanel } from "@/components/notifications-panel";
|
||||
import { PageHeader } from "@/components/page-header";
|
||||
import { Panel } from "@/components/panel";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const prefsMeta: { key: keyof NotificationPrefs; title: string; desc: string }[] = [
|
||||
{ key: "progress", title: "پیشرفت و باز شدن دروس", desc: "باز شدن آزمون، تکمیل درس، شاخه‌های جدید." },
|
||||
{ key: "gamification", title: "بازی‌سازی", desc: "امتیاز، زنجیرهٔ فعالیت، لیگ‌ها و هشدار قلب." },
|
||||
{ key: "mentor", title: "منتور و گفتگو", desc: "پاسخ منتور، پیام هم‌دوره‌ای، تایید رفع قفل." },
|
||||
{ key: "event", title: "رویدادها و اطلاعیه‌ها", desc: "تایید ثبت‌نام و یادآوری ۱۵ دقیقه قبل از شروع." },
|
||||
];
|
||||
|
||||
export default function NotificationsPage() {
|
||||
const qc = useQueryClient();
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["prefs"],
|
||||
queryFn: () => http.get<{ prefs: NotificationPrefs }>("/api/notifications/preferences"),
|
||||
});
|
||||
const [draft, setDraft] = useState<NotificationPrefs | null>(null);
|
||||
const [prefs, setPrefs] = useState<{ prefs: NotificationPrefs }>();
|
||||
|
||||
const prefsValue = draft ?? prefs?.prefs ?? data?.prefs;
|
||||
|
||||
const save = useMutation({
|
||||
mutationFn: (p: NotificationPrefs) => http.put<{ prefs: NotificationPrefs }>("/api/notifications/preferences", p),
|
||||
onSuccess: (res) => {
|
||||
setPrefs(res);
|
||||
setDraft(null);
|
||||
qc.invalidateQueries({ queryKey: ["prefs"] });
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-8">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-3.5 w-32" />
|
||||
<Skeleton className="h-8 w-44" />
|
||||
<Skeleton className="h-4 w-72" />
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-card p-6 shadow-soft">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-10 w-10 rounded-xl" />
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-3 w-64" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 space-y-6">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center justify-between gap-4">
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-3 w-64" />
|
||||
</div>
|
||||
<Skeleton className="h-6 w-11 rounded-full" />
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-end border-t border-border/70 pt-5">
|
||||
<Skeleton className="h-10 w-36 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-16 rounded-2xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const toggle = (key: keyof NotificationPrefs) => {
|
||||
if (!prefsValue) return;
|
||||
setDraft({ ...prefsValue, [key]: !prefsValue[key] });
|
||||
};
|
||||
|
||||
const dirty = draft != null;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-8">
|
||||
<PageHeader
|
||||
kicker="صندوق پیام و تنظیمات"
|
||||
title="اعلان‌ها"
|
||||
description="همه‌چیز درون‌برنامه و بی‌درنگ ارسال می‌شود — نیازی به ایمیل نیست."
|
||||
/>
|
||||
|
||||
<Panel
|
||||
title="دسته‌بندی اعلان‌ها"
|
||||
description="هر دسته را همان‌جا بی‌صدا کنید. تغییرات پس از ذخیره اعمال می‌شود."
|
||||
icon={<BellRing className="h-5 w-5" />}
|
||||
tint="bg-primary/10 text-primary"
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{prefsValue &&
|
||||
prefsMeta.map((m) => (
|
||||
<div key={m.key} className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<Label htmlFor={`pref-${m.key}`} className="font-medium">{m.title}</Label>
|
||||
<p className="text-xs text-muted-foreground">{m.desc}</p>
|
||||
</div>
|
||||
<Switch
|
||||
id={`pref-${m.key}`}
|
||||
checked={!!prefsValue[m.key]}
|
||||
onCheckedChange={() => toggle(m.key)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-end border-t border-border/70 pt-5">
|
||||
<Button
|
||||
className="gap-1.5"
|
||||
disabled={!dirty || save.isPending}
|
||||
onClick={() => draft && save.mutate(draft)}
|
||||
>
|
||||
{save.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||||
ذخیره تنظیمات
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<NotificationsPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,305 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
BookOpenCheck,
|
||||
Clock3,
|
||||
Flag,
|
||||
PlayCircle,
|
||||
Sparkles,
|
||||
Timer,
|
||||
UnlockKeyhole,
|
||||
Users2,
|
||||
Zap,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BrandMark } from "@/components/brand-mark";
|
||||
import { Reveal } from "@/components/reveal";
|
||||
import Link from "next/link";
|
||||
import { http } from "@/lib/api";
|
||||
|
||||
const stats = [
|
||||
{ value: "۱۲", label: "هفته مسیر", tile: "bg-primary text-primary-foreground" },
|
||||
{ value: "۶", label: "درس ویدیویی", tile: "bg-accent text-accent-foreground" },
|
||||
{ value: "۳", label: "فصل مهارتی", tile: "bg-gold text-gold-foreground" },
|
||||
{ value: "۱۸", label: "سوال آزمون", tile: "bg-success text-success-foreground" },
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
icon: PlayCircle,
|
||||
step: "۰۱",
|
||||
title: "تماشای کامل",
|
||||
desc: "ویدیو را همان‌طور واقعی تماشا کنید؛ زمان، به‌راستی تأیید می‌شود.",
|
||||
tile: "bg-primary text-primary-foreground",
|
||||
},
|
||||
{
|
||||
icon: BookOpenCheck,
|
||||
step: "۰۲",
|
||||
title: "قبولی در آزمون",
|
||||
desc: "آزمون همان درس را باز می‌کند؛ هر اشتباه یک قلب هزینه دارد.",
|
||||
tile: "bg-accent text-accent-foreground",
|
||||
},
|
||||
{
|
||||
icon: UnlockKeyhole,
|
||||
step: "۰۳",
|
||||
title: "باز شدن شاخه‌ها",
|
||||
desc: "با هر قبولی، شاخه‌های بعدی درخت مهارت آزاد می‌شوند.",
|
||||
tile: "bg-gold text-gold-foreground",
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Timer,
|
||||
title: "تماشای تاییدشده",
|
||||
desc: "زمان تماشا با ضربان‌های دوره‌ای راستی‌آزمایی می‌شود؛ میان‌بر و پرش سریع جواب نمی‌دهد.",
|
||||
tile: "bg-primary/10 text-primary",
|
||||
},
|
||||
{
|
||||
icon: Users2,
|
||||
title: "آزمون با قلب‌ها",
|
||||
desc: "هر پاسخ اشتباه یک قلب کم می‌کند. با سه اشتباه، حساب قفل می‌شود — مجبورید واقعاً یاد بگیرید.",
|
||||
tile: "bg-accent/10 text-accent",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "جامعه و منتور",
|
||||
desc: "رویدادهای زنده، لیگ هفتگی و گفتگوی یک‌به‌یک با منتور برای وقتی که به مانع می‌خورید.",
|
||||
tile: "bg-gold/10 text-gold",
|
||||
},
|
||||
];
|
||||
|
||||
const principles = [
|
||||
"پیش‌نیازهای واقعی — هر شاخه فقط بعد از قبولی در والدش باز می‌شود",
|
||||
"بدون میان‌بر — پرش سریع و چندبرابری، غیرفعال است",
|
||||
"قفل پس از سه اشتباه؛ رفع قفل فقط با بررسی مدیریت",
|
||||
"لیگ هفتگی که هر دوشنبه از نو آغاز می‌شود",
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const router = useRouter();
|
||||
const user = useAuth((s) => s.user);
|
||||
|
||||
const { data: sponsorsData } = useQuery({
|
||||
queryKey: ["sponsors"],
|
||||
queryFn: () => http.get<{ sponsors: { name: string; url?: string; blurb?: string }[] }>("/api/sponsors"),
|
||||
staleTime: 60_000,
|
||||
});
|
||||
const sponsors = sponsorsData?.sponsors ?? [];
|
||||
|
||||
const goCap = () => router.push("/cap");
|
||||
const goLogin = () => router.push("/login");
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex max-w-5xl flex-col items-center">
|
||||
{/* hero */}
|
||||
<section className="relative w-full overflow-hidden rounded-2xl border-2 border-border bg-card px-6 py-16 text-center shadow-offset sm:px-12 sm:py-24">
|
||||
<div className="dot-grid dot-grid-primary pointer-events-none absolute -end-16 -top-16 h-72 w-72 opacity-70" aria-hidden />
|
||||
<span className="pointer-events-none absolute end-8 top-8 hidden h-8 w-8 rotate-12 rounded-lg bg-accent sm:block" aria-hidden />
|
||||
<div className="relative mx-auto flex max-w-2xl flex-col items-center text-center">
|
||||
<div className="reveal reveal-1">
|
||||
<BrandMark size="lg" />
|
||||
</div>
|
||||
<div className="reveal reveal-2 mt-6 flex flex-wrap items-center justify-center gap-2">
|
||||
{["بدون میان‌بر", "۱۲ هفته", "منتور ۱:۱"].map((c) => (
|
||||
<span key={c} className="chip-outline border-primary text-primary bg-primary/5">
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="section-kicker reveal reveal-3 mt-6 justify-center">بوت‌کمپ ۱۲ هفته‌ای دگرگونی</p>
|
||||
<h1 className="reveal reveal-4 mt-4 text-5xl font-black leading-[1.05] tracking-tight sm:text-6xl">
|
||||
با انضباط،{" "}
|
||||
<span className="relative inline-block whitespace-nowrap">
|
||||
<span className="text-primary">متحول</span>
|
||||
<span className="absolute inset-x-0 -bottom-1 h-4 rounded-sm bg-accent/20" aria-hidden />
|
||||
</span>{" "}
|
||||
شو
|
||||
</h1>
|
||||
<p className="reveal reveal-5 mt-6 max-w-xl text-base leading-relaxed text-muted-foreground">
|
||||
پلتفرمی که خودش حرف نمی‌زند — زمان تماشا، آزمون‌ها و قفل‌شدن را جدا از قضاوت خودتان کنترل
|
||||
می‌کند تا یادگیری واقعاً رخ بدهد.
|
||||
</p>
|
||||
<div className="reveal reveal-5 mt-9 flex flex-wrap items-center justify-center gap-3">
|
||||
{user ? (
|
||||
<Button size="lg" onClick={goCap} className="gap-2 px-8">
|
||||
<Zap className="h-5 w-5" /> ادامه مسیر
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button size="lg" onClick={goLogin} className="gap-2 px-8">
|
||||
ورود
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" onClick={goLogin} className="gap-2 px-8">
|
||||
<Zap className="h-5 w-5" /> شروع مسیر
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* stats strip — solid color blocks */}
|
||||
<section className="mt-8 w-full">
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
{stats.map((s, i) => (
|
||||
<Reveal
|
||||
key={s.label}
|
||||
delay={i * 0.07}
|
||||
className={`${s.tile} flex flex-col items-center justify-center rounded-2xl px-6 py-8 text-center shadow-offset-sm hover-lift`}
|
||||
>
|
||||
<p className="text-4xl font-black tabular-nums">{s.value}</p>
|
||||
<p className="mt-1.5 text-xs font-bold opacity-90">{s.label}</p>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* how it works */}
|
||||
<section className="mt-20 w-full">
|
||||
<div className="mx-auto max-w-md space-y-3 text-center">
|
||||
<p className="section-kicker justify-center">چگونه کار می‌کند</p>
|
||||
<h2 className="text-3xl font-black tracking-tight sm:text-4xl">مسیری که گریز ندارد</h2>
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">
|
||||
بقای شما در بوت‌کمپ صفر و یک است؛ سیستم نمی‌پذیرد که فقط «خوب دیدن کردم» بگویید.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-10 grid gap-5 md:grid-cols-3">
|
||||
{steps.map((s, i) => (
|
||||
<Reveal key={s.step} delay={i * 0.1} className="group relative flex flex-col rounded-2xl border-2 border-border bg-card p-6 shadow-offset-sm hover-lift">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`flex h-12 w-12 items-center justify-center rounded-2xl ${s.tile} shadow-offset-sm`}>
|
||||
<s.icon className="h-6 w-6" />
|
||||
</span>
|
||||
<span className="text-3xl font-black tabular-nums text-muted-foreground/30">{s.step}</span>
|
||||
</div>
|
||||
<h3 className="mt-5 text-lg font-extrabold">{s.title}</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{s.desc}</p>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* features */}
|
||||
<section className="mt-20 w-full">
|
||||
<h2 className="text-center text-3xl font-black tracking-tight sm:text-4xl">
|
||||
چرا منحصربه‌فرد <span className="text-accent">است</span>
|
||||
</h2>
|
||||
<div className="mt-10 grid gap-5 md:grid-cols-3">
|
||||
{features.map((f, i) => (
|
||||
<Reveal key={f.title} delay={i * 0.1} className="card-hover rounded-2xl border-2 border-border bg-card p-6">
|
||||
<span className={`flex h-12 w-12 items-center justify-center rounded-2xl ${f.tile}`}>
|
||||
<f.icon className="h-6 w-6" />
|
||||
</span>
|
||||
<h3 className="mt-5 text-lg font-extrabold">{f.title}</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{f.desc}</p>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* principles — inverted editorial band */}
|
||||
<section className="band-invert mt-20 w-full rounded-2xl p-8 sm:p-12">
|
||||
<div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="lg:sticky lg:top-24 lg:max-w-xs">
|
||||
<p className="section-kicker text-accent">
|
||||
<span className="text-accent">اصول غیرقابل مذاکره</span>
|
||||
</p>
|
||||
<h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
|
||||
مهم نیست قول
|
||||
<br />
|
||||
بدهید؛ سیستم
|
||||
<br />
|
||||
<span className="text-accent">ثبت می‌کند.</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:flex-1">
|
||||
{principles.map((p, i) => (
|
||||
<Reveal key={p} delay={i * 0.08} className="flex items-start gap-3 rounded-2xl border-2 border-border/60 p-5">
|
||||
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-success/20">
|
||||
<Flag className="h-4 w-4 text-success" />
|
||||
</span>
|
||||
<p className="text-sm font-medium leading-relaxed opacity-90">{p}</p>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{sponsors.length > 0 && (
|
||||
<section className="mt-20 w-full">
|
||||
<div className="mx-auto max-w-md space-y-3 text-center">
|
||||
<p className="section-kicker justify-center">حامیان</p>
|
||||
<h2 className="text-3xl font-black tracking-tight sm:text-4xl">اسپانسرهای پرگار</h2>
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">
|
||||
سازمان‌ها و افرادی که مسیر یادگیری را ممکن می‌کنند.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{sponsors.map((sp, i) => {
|
||||
const inner = (
|
||||
<Reveal
|
||||
delay={i * 0.08}
|
||||
className="flex h-full flex-col rounded-2xl border-2 border-border bg-card p-6 shadow-offset-sm transition hover-lift"
|
||||
>
|
||||
<p className="text-lg font-extrabold">{sp.name}</p>
|
||||
{sp.blurb && (
|
||||
<p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">{sp.blurb}</p>
|
||||
)}
|
||||
{sp.url && (
|
||||
<span className="mt-4 inline-flex items-center gap-1 text-xs font-bold text-primary">
|
||||
مشاهده <ExternalLink className="h-3.5 w-3.5" />
|
||||
</span>
|
||||
)}
|
||||
</Reveal>
|
||||
);
|
||||
return sp.url ? (
|
||||
<a key={`${sp.name}-${i}`} href={sp.url} target="_blank" rel="noopener noreferrer" className="block">
|
||||
{inner}
|
||||
</a>
|
||||
) : (
|
||||
<div key={`${sp.name}-${i}`}>{inner}</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* final CTA */}
|
||||
<section className="mt-20 w-full pb-4 text-center">
|
||||
<Reveal>
|
||||
<span className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-accent/10 shadow-offset-sm float-slow">
|
||||
<Clock3 className="h-7 w-7 text-accent" />
|
||||
</span>
|
||||
<h2 className="mt-5 text-3xl font-black tracking-tight sm:text-4xl">آماده آغازید؟</h2>
|
||||
<p className="mt-3 text-base text-muted-foreground">۱۲ هفته اثر — و سیستم کنترل را خودش بر عهده می‌گیرد.</p>
|
||||
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||
{user ? (
|
||||
<Button size="lg" onClick={goCap} className="gap-2 px-8">
|
||||
<PlayCircle className="h-5 w-5" /> ادامه مسیر
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button size="lg" asChild className="gap-2 px-8">
|
||||
<Link href="/login">ورود</Link>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild className="gap-2 px-8">
|
||||
<Link href="/login">
|
||||
<PlayCircle className="h-5 w-5" /> شروع مسیر
|
||||
</Link>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-10 text-xs text-muted-foreground">
|
||||
<BrandMark locale="fa" size="sm" className="align-middle" /> — نسخهٔ نمایشی · توسعه‌یافته توسط امیرحسین پناهی‌فر
|
||||
</p>
|
||||
</Reveal>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ArrowRight, Lock, TreePine } from "lucide-react";
|
||||
import { VideoPlayer } from "@/components/video-player";
|
||||
import { ApiError, http, toUserError } from "@/lib/api";
|
||||
import type { Lesson, LessonProgress } from "@/lib/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import { formatFaNumber } from "@/lib/utils";
|
||||
import { hasInfiniteHearts } from "@/lib/hearts";
|
||||
|
||||
function isLessonLockedError(error: unknown): boolean {
|
||||
if (!(error instanceof ApiError)) return false;
|
||||
if (error.status !== 403) return false;
|
||||
return error.message.includes("قفل");
|
||||
}
|
||||
|
||||
export default function PlayerPage() {
|
||||
const { lessonId } = useParams<{ lessonId: string }>();
|
||||
const id = Number(lessonId);
|
||||
const router = useRouter();
|
||||
const user = useAuth((s) => s.user);
|
||||
|
||||
const { data, isLoading, isError, error, refetch } = useQuery({
|
||||
queryKey: ["lesson", id],
|
||||
queryFn: () =>
|
||||
http.get<{
|
||||
lesson: Lesson;
|
||||
videoUrl: string;
|
||||
videoIsSample?: boolean;
|
||||
progress: LessonProgress | null;
|
||||
quizStatus: string;
|
||||
}>(`/api/lessons/${id}`),
|
||||
enabled: !!user && (!user.isLocked || hasInfiniteHearts(user.role)),
|
||||
staleTime: 5 * 60_000,
|
||||
retry: (count, err) => {
|
||||
if (isLessonLockedError(err)) return false;
|
||||
return count < 2;
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.isLocked && !hasInfiniteHearts(user.role)) router.replace("/lockout");
|
||||
}, [user?.isLocked, user?.role, router]);
|
||||
|
||||
if (user?.isLocked && !hasInfiniteHearts(user.role)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-10 w-10 rounded-xl" />
|
||||
<div className="space-y-1.5">
|
||||
<Skeleton className="h-6 w-64" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-8 w-28 rounded-full" />
|
||||
</div>
|
||||
<Skeleton className="aspect-video w-full rounded-2xl" />
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<Skeleton className="h-4 w-72" />
|
||||
<Skeleton className="h-10 w-32 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !data) {
|
||||
if (isLessonLockedError(error)) {
|
||||
return <LockedLessonState onBack={() => router.push("/cap")} />;
|
||||
}
|
||||
return (
|
||||
<div className="mx-auto max-w-lg space-y-4 py-16 text-center">
|
||||
<p className="font-medium text-destructive">{toUserError(error, "بارگذاری درس ممکن نشد")}</p>
|
||||
<div className="flex justify-center gap-2">
|
||||
<Button variant="outline" onClick={() => router.push("/cap")}>
|
||||
بازگشت به درخت
|
||||
</Button>
|
||||
<Button onClick={() => refetch()}>تلاش دوباره</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { lesson, videoUrl, videoIsSample, progress, quizStatus } = data;
|
||||
const passed = !!progress?.passedQuiz;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="outline" size="icon" onClick={() => router.push("/cap")} aria-label="بازگشت به درخت مهارت">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{lesson.title}</h1>
|
||||
<p className="text-sm text-muted-foreground">{lesson.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{videoIsSample && (
|
||||
<Badge variant="outline" className="px-3 py-1 text-muted-foreground">
|
||||
نمونهٔ موقت
|
||||
</Badge>
|
||||
)}
|
||||
{passed ? (
|
||||
<Badge variant="success" className="px-3 py-1">تکمیل شده</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary" className="px-3 py-1">{formatFaNumber(lesson.xpReward)} امتیاز پاداش</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{videoUrl ? (
|
||||
<div className="space-y-2">
|
||||
<VideoPlayer
|
||||
lessonId={id}
|
||||
videoUrl={videoUrl}
|
||||
duration={lesson.durationSeconds}
|
||||
completionThresholdPct={lesson.completionThresholdPct}
|
||||
initialProgress={progress}
|
||||
/>
|
||||
{videoIsSample && (
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
ویدیوی اختصاصی هنوز وصل نشده — <span className="font-bold">sample.mp4</span> به‌عنوان حداقل پخش
|
||||
نمایش داده می‌شود تا پلیر خالی نماند.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-xl border border-dashed border-border p-10 text-center text-muted-foreground">
|
||||
این درس هنوز ویدیو ندارد.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between gap-4 text-sm">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Lock className="h-4 w-4" />
|
||||
آزمون با {`≥${lesson.completionThresholdPct}`}٪ زمان تماشای تاییدشده باز می‌شود.
|
||||
{quizStatus === "failed" && (
|
||||
<span className="text-destructive">تلاش قبلی ناموفق بود — هر وقت آماده بودید دوباره تلاش کنید.</span>
|
||||
)}
|
||||
</div>
|
||||
{passed && (
|
||||
<Button asChild variant="gradient">
|
||||
<Link href="/cap">ادامه مسیر</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LockedLessonState({ onBack }: { onBack: () => void }) {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-lg flex-col items-center px-2 py-10 text-center sm:py-16">
|
||||
<div className="relative mb-6">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 -m-6 rounded-full bg-muted/80 blur-2xl"
|
||||
/>
|
||||
<div className="relative grid h-20 w-20 place-items-center rounded-3xl border-2 border-border bg-card shadow-offset-sm">
|
||||
<Lock className="h-9 w-9 text-muted-foreground" strokeWidth={1.75} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] font-extrabold tracking-wider text-muted-foreground">پیش‌نیاز باز نشده</p>
|
||||
<h1 className="mt-2 text-2xl font-black tracking-tight sm:text-3xl">این درس هنوز قفل است</h1>
|
||||
<p className="mt-3 max-w-sm text-sm leading-relaxed text-muted-foreground">
|
||||
اول درس قبلی را کامل تماشا کنید و در آزمونش قبول شوید؛ بعد این شاخه خودش باز می‌شود.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex w-full max-w-xs flex-col gap-2.5">
|
||||
<Button size="lg" onClick={onBack} className="gap-2">
|
||||
<TreePine className="h-4 w-4" />
|
||||
بازگشت به درخت مهارت
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true } }))
|
||||
}
|
||||
>
|
||||
پرسیدن از منتور
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Flame, Heart, Sparkles, Trophy, User as UserIcon } from "lucide-react";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import { http, toUserError } from "@/lib/api";
|
||||
import type { LeaderboardData } from "@/lib/types";
|
||||
import { Panel } from "@/components/panel";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { UserAvatar, avatarPropsOf } from "@/components/ui/user-avatar";
|
||||
import { ProfileCertificateSlot } from "@/components/profile-certificate-slot";
|
||||
import { ChallengeCards } from "@/components/challenge-cards";
|
||||
import { AvatarStudio } from "@/components/avatar-studio";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { formatFaNumber, formatStreakLabel } from "@/lib/utils";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const user = useAuth((s) => s.user);
|
||||
const [studioOpen, setStudioOpen] = useState(false);
|
||||
const { data: lb, isError: lbError, error: lbErr } = useQuery({
|
||||
queryKey: ["leaderboard"],
|
||||
queryFn: () => http.get<LeaderboardData>("/api/leaderboard/weekly"),
|
||||
enabled: !!user,
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl py-16 text-center">
|
||||
<p className="text-muted-foreground">برای مشاهدهٔ پروفایل وارد شوید.</p>
|
||||
<Button asChild className="mt-4">
|
||||
<Link href="/login">ورود</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-6">
|
||||
<Panel
|
||||
title="پروفایل من"
|
||||
description="هویت، آمار یادگیری، چالش‌ها و گواهینامه در یک نگاه."
|
||||
icon={<UserIcon className="h-5 w-5" />}
|
||||
tint="bg-primary/10 text-primary"
|
||||
actions={
|
||||
<Button variant="outline" size="sm" onClick={() => setStudioOpen(true)}>
|
||||
ویرایش آواتار
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
|
||||
<UserAvatar name={user.name} className="h-20 w-20" {...avatarPropsOf(user)} />
|
||||
<div className="min-w-0 flex-1 space-y-2 text-center sm:text-start">
|
||||
<h1 className="text-2xl font-black tracking-tight">{user.name}</h1>
|
||||
<dl className="mt-1 space-y-2 text-sm">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<dt className="shrink-0 text-xs text-muted-foreground">نام کاربری</dt>
|
||||
<dd className="min-w-0 font-latin font-bold tracking-tight" dir="ltr">
|
||||
@{user.username}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<dt className="shrink-0 text-xs text-muted-foreground">ایمیل</dt>
|
||||
<dd className="min-w-0 break-all font-latin font-medium" dir="ltr">
|
||||
{user.email}
|
||||
</dd>
|
||||
</div>
|
||||
{user.phone && (
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<dt className="shrink-0 text-xs text-muted-foreground">تلفن</dt>
|
||||
<dd className="min-w-0 font-latin font-medium" dir="ltr">
|
||||
{user.phone}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<dt className="shrink-0 text-xs text-muted-foreground">عضویت از</dt>
|
||||
<dd className="min-w-0 font-medium">
|
||||
{new Date(user.createdAt).toLocaleDateString("fa-IR", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<StatCard icon={<Sparkles className="h-4 w-4 text-gold" />} label="امتیاز کل" value={formatFaNumber(user.xp)} />
|
||||
<StatCard icon={<Heart className="h-4 w-4 text-destructive" />} label="قلب‌ها" value={formatFaNumber(user.hearts)} />
|
||||
<StatCard
|
||||
icon={<Flame className="h-4 w-4 text-accent" />}
|
||||
label="زنجیرهٔ فعلی"
|
||||
value={formatStreakLabel(user.streakCurrent)}
|
||||
/>
|
||||
<StatCard
|
||||
icon={<Flame className="h-4 w-4 text-muted-foreground" />}
|
||||
label="بلندترین زنجیره"
|
||||
value={formatStreakLabel(user.streakLongest)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex items-center gap-3 p-4">
|
||||
<Trophy className="h-5 w-5 text-gold" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-bold">رتبهٔ لیگ این هفته</p>
|
||||
{lbError ? (
|
||||
<p className="text-xs text-destructive">{toUserError(lbErr)}</p>
|
||||
) : lb?.me && lb.me.rank > 0 ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
رتبه {formatFaNumber(lb.me.rank)} با {formatFaNumber(Math.round(lb.me.xp))} امتیاز هفتگی
|
||||
</p>
|
||||
) : lb ? (
|
||||
<p className="text-xs text-muted-foreground">هنوز در رتبه‌بندی این هفته نیستید</p>
|
||||
) : (
|
||||
<Skeleton className="mt-1 h-3 w-40" />
|
||||
)}
|
||||
</div>
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<Link href="/leaderboard">لیگ‌ها</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div>
|
||||
<h2 className="mb-2 text-sm font-black text-muted-foreground">چالش‌های فعال</h2>
|
||||
<ChallengeCards />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="mb-2 text-sm font-black text-muted-foreground">گواهینامه</h2>
|
||||
<ProfileCertificateSlot />
|
||||
</div>
|
||||
|
||||
<Dialog open={studioOpen} onOpenChange={setStudioOpen}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-center">ویرایش آواتار</DialogTitle>
|
||||
</DialogHeader>
|
||||
<AvatarStudio user={user} onClose={() => setStudioOpen(false)} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex items-center gap-3 p-4">
|
||||
<div className="grid h-9 w-9 place-items-center rounded-lg bg-muted">{icon}</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
<p className="text-lg font-black tabular-nums">{value}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/lib/auth-store";
|
||||
import { hasInfiniteHearts } from "@/lib/hearts";
|
||||
import { QuizExperience } from "@/components/quiz-experience";
|
||||
|
||||
export default function QuizPage() {
|
||||
const { lessonId } = useParams<{ lessonId: string }>();
|
||||
const id = Number(lessonId);
|
||||
const router = useRouter();
|
||||
const user = useAuth((s) => s.user);
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.isLocked && !hasInfiniteHearts(user.role)) {
|
||||
router.replace("/lockout");
|
||||
}
|
||||
}, [user?.isLocked, user?.role, router]);
|
||||
|
||||
if (user?.isLocked && !hasInfiniteHearts(user.role)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-2">
|
||||
<QuizExperience lessonId={id} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
/** Self-service password recovery is disabled for students. */
|
||||
export default function RecoveryPage() {
|
||||
redirect("/login");
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Loader2, Lock, Ticket } from "lucide-react";
|
||||
import { BrandMark } from "@/components/brand-mark";
|
||||
import { RegisterForm } from "@/components/register-form";
|
||||
import { http, ApiError } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
type InviteStatus = {
|
||||
valid: boolean;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
export default function InviteRegisterPage() {
|
||||
const params = useParams<{ token: string }>();
|
||||
const token = params?.token ?? "";
|
||||
|
||||
const { data: invite, isLoading, error, isError } = useQuery({
|
||||
queryKey: ["auth", "register-invite", token],
|
||||
queryFn: () => http.get<InviteStatus>(`/api/auth/register-invite/${encodeURIComponent(token)}`),
|
||||
enabled: !!token,
|
||||
retry: false,
|
||||
meta: { silentError: true },
|
||||
});
|
||||
|
||||
const closedMessage = (() => {
|
||||
if (!isError) return null;
|
||||
if (error instanceof ApiError) return error.message;
|
||||
return "این لینک عضویت قابل استفاده نیست.";
|
||||
})();
|
||||
|
||||
if (!token || isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[60vh] items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (closedMessage || !invite?.valid) {
|
||||
return (
|
||||
<div className="mx-auto flex min-h-[70vh] max-w-md flex-col justify-center px-4">
|
||||
<div className="rounded-2xl border border-border bg-card p-8 text-center shadow-soft">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted">
|
||||
<Lock className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<BrandMark locale="fa" size="lg" logoOnly className="mx-auto mb-4" />
|
||||
<h1 className="text-xl font-bold">لینک عضویت بسته است</h1>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
||||
{closedMessage ?? "این لینک عضویت قابل استفاده نیست."}
|
||||
</p>
|
||||
<Button asChild className="mt-6 w-full" variant="gradient">
|
||||
<Link href="/login">ورود به حساب</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex min-h-[80vh] max-w-4xl flex-col justify-center py-8">
|
||||
<div className="grid overflow-hidden rounded-2xl border border-border bg-card shadow-soft md:grid-cols-2">
|
||||
<aside className="relative hidden flex-col justify-between overflow-hidden bg-primary p-8 text-primary-foreground md:flex">
|
||||
<div
|
||||
className="dot-grid pointer-events-none absolute -end-20 -top-20 h-72 w-72 rotate-12 text-primary-foreground opacity-50"
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="relative">
|
||||
<BrandMark locale="fa" size="lg" className="text-primary-foreground [&_span]:text-accent" />
|
||||
<p className="section-kicker on-primary mt-6">عضویت با دعوت</p>
|
||||
<h2 className="mt-4 text-2xl font-bold leading-snug">
|
||||
{invite.label || "لینک اختصاصی"}
|
||||
</h2>
|
||||
<p className="mt-3 text-sm leading-relaxed text-primary-foreground/80">
|
||||
با این دعوت می‌توانید حساب عضویت بسازید.
|
||||
</p>
|
||||
<p className="mt-2 text-sm leading-relaxed text-primary-foreground/70">
|
||||
شماره تلفن و شبکه شما فقط یک‌بار برای ثبت‌نام قابل استفاده‌اند.
|
||||
</p>
|
||||
</div>
|
||||
<p className="relative flex items-center gap-2 text-xs text-primary-foreground/70">
|
||||
<Ticket className="h-3.5 w-3.5" />
|
||||
پس از ثبت‌نام، پیامک را خودتان برای تیم ارسال کنید؛ سامانه پیامک خودکار ندارد.
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<div className="bg-card p-8 sm:p-10">
|
||||
<CardHeader className="items-center px-0 pb-4 pt-0 text-center">
|
||||
<div className="mb-2 flex justify-center md:hidden">
|
||||
<BrandMark locale="fa" size="lg" logoOnly />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">ساخت حساب با دعوت</CardTitle>
|
||||
<CardDescription>
|
||||
{invite.label ? invite.label : "فرم ثبت‌نام با لینک دعوت"}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-0 pt-0">
|
||||
<RegisterForm
|
||||
endpoint={`/api/auth/register-invite/${encodeURIComponent(token)}`}
|
||||
submitLabel="ثبت‌نام با دعوت"
|
||||
/>
|
||||
</CardContent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Loader2, Lock } from "lucide-react";
|
||||
import { BrandMark } from "@/components/brand-mark";
|
||||
import { RegisterForm } from "@/components/register-form";
|
||||
import { http } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const { data: status, isLoading: statusLoading } = useQuery({
|
||||
queryKey: ["auth", "register-status"],
|
||||
queryFn: () => http.get<{ enabled: boolean }>("/api/auth/register-status"),
|
||||
});
|
||||
|
||||
if (statusLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[60vh] items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!status?.enabled) {
|
||||
return (
|
||||
<div className="mx-auto flex min-h-[70vh] max-w-md flex-col justify-center px-4">
|
||||
<div className="rounded-2xl border border-border bg-card p-8 text-center shadow-soft">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted">
|
||||
<Lock className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<BrandMark locale="fa" size="lg" logoOnly className="mx-auto mb-4" />
|
||||
<h1 className="text-xl font-bold">ثبت‌نام عمومی بسته است</h1>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
||||
در حال حاضر امکان ساخت حساب از این صفحه وجود ندارد. اگر حساب دارید وارد شوید،
|
||||
یا منتظر اعلام متصدی بمانید.
|
||||
</p>
|
||||
<Button asChild className="mt-6 w-full" variant="gradient">
|
||||
<Link href="/login">ورود به حساب</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex min-h-[80vh] max-w-4xl flex-col justify-center px-4 py-8">
|
||||
<div className="grid overflow-hidden rounded-2xl border border-border bg-card shadow-soft md:grid-cols-2">
|
||||
<aside className="relative hidden flex-col justify-between overflow-hidden bg-primary p-7 text-primary-foreground md:flex">
|
||||
<div
|
||||
className="dot-grid pointer-events-none absolute -end-20 -top-20 h-72 w-72 rotate-12 text-primary-foreground opacity-50"
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="relative">
|
||||
<BrandMark locale="fa" size="lg" className="text-primary-foreground [&_span]:text-accent" />
|
||||
<p className="section-kicker on-primary mt-5">ثبت‌نام</p>
|
||||
<h2 className="mt-3 text-2xl font-bold leading-snug">
|
||||
یک حساب.
|
||||
<br />
|
||||
یک مسیر.
|
||||
</h2>
|
||||
<p className="mt-2.5 text-sm leading-relaxed text-primary-foreground/80">
|
||||
شماره تلفن شما یک‌بار مصرف است — هر شبکه فقط یک ثبت‌نام.
|
||||
</p>
|
||||
</div>
|
||||
<p className="relative text-xs text-primary-foreground/70">
|
||||
پس از ثبت‌نام، پیامک را خودتان برای تیم ارسال کنید؛ سامانه پیامک خودکار ندارد.
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<div className="bg-card p-6 sm:p-8">
|
||||
<CardHeader className="items-center space-y-1.5 px-0 pb-4 pt-0 text-center">
|
||||
<div className="mb-1 flex justify-center md:hidden">
|
||||
<BrandMark locale="fa" size="lg" logoOnly />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">ساخت حساب</CardTitle>
|
||||
<CardDescription>در سه گام کوتاه حساب بسازید.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-0 pt-0">
|
||||
<RegisterForm endpoint="/api/auth/register" submitLabel="ثبت‌نام" />
|
||||
</CardContent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { MetadataRoute } from "next";
|
||||
|
||||
/** Keep certificate share URLs out of search indexes (unlisted-by-link). */
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: {
|
||||
userAgent: "*",
|
||||
disallow: ["/c/", "/api/certificates/"],
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Award, CalendarDays, HeartHandshake, MessageSquareHeart, Sparkles } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { PageHeader } from "@/components/page-header";
|
||||
import { EventsPanel } from "@/components/events-panel";
|
||||
import { LeaderboardPanel } from "@/components/leaderboard-panel";
|
||||
import { CommunityPanel } from "@/components/community-panel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { UserAvatar, avatarPropsOf } from "@/components/ui/user-avatar";
|
||||
import { Skeleton, SkeletonAvatar } from "@/components/ui/skeleton";
|
||||
import { Panel } from "@/components/panel";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { Mentor } from "@/lib/types";
|
||||
import { http } from "@/lib/api";
|
||||
import type { ChatMessage, Conversation } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Tab = "events" | "chats" | "leagues" | "community";
|
||||
|
||||
const TABS: Tab[] = ["events", "chats", "leagues", "community"];
|
||||
|
||||
function parseTab(raw: string | null): Tab {
|
||||
if (raw && (TABS as string[]).includes(raw)) {
|
||||
return raw as Tab;
|
||||
}
|
||||
return "events";
|
||||
}
|
||||
|
||||
export default function UnwrapPage() {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<HubTabs />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function HubTabs() {
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
const [tab, setTab] = useState<Tab>(() => parseTab(params.get("tab")));
|
||||
|
||||
useEffect(() => {
|
||||
const raw = params.get("tab");
|
||||
const next = parseTab(raw);
|
||||
setTab(next);
|
||||
// Invalid / unknown ?tab=… → clean URL so content isn't blank.
|
||||
if (raw != null && raw !== next) {
|
||||
router.replace(next === "events" ? "/unwrap" : `/unwrap?tab=${next}`, { scroll: false });
|
||||
}
|
||||
}, [params, router]);
|
||||
|
||||
const onTab = (value: string) => {
|
||||
const next = parseTab(value);
|
||||
setTab(next);
|
||||
const url = next === "events" ? "/unwrap" : `/unwrap?tab=${next}`;
|
||||
router.replace(url, { scroll: false });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
kicker="مرکز"
|
||||
title={
|
||||
<>
|
||||
جامعه، <span className="text-gradient-brand">استمرار و منتورها</span>
|
||||
</>
|
||||
}
|
||||
description="رویدادهای زنده برای تقویت مهارت، لیگ‌های هفتگی برای ثبات، گفتگو با منتور، و هماهنگی حمایت مالی."
|
||||
className="mb-0"
|
||||
/>
|
||||
|
||||
<Tabs value={tab} onValueChange={onTab} className="w-full space-y-5">
|
||||
<TabsList className="grid h-auto w-full grid-cols-2 gap-1 p-1.5 sm:grid-cols-4">
|
||||
<TabsTrigger value="events" className="h-10 gap-1.5 px-2 sm:px-3">
|
||||
<CalendarDays className="h-4 w-4 shrink-0" />
|
||||
<span className="truncate">رویدادها</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="chats" className="h-10 gap-1.5 px-2 sm:px-3">
|
||||
<MessageSquareHeart className="h-4 w-4 shrink-0" />
|
||||
<span className="truncate">گفتگو با منتور</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="leagues" className="h-10 gap-1.5 px-2 sm:px-3">
|
||||
<Award className="h-4 w-4 shrink-0" />
|
||||
<span className="truncate">لیگ‌ها</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="community" className="h-10 gap-1.5 px-2 sm:px-3">
|
||||
<HeartHandshake className="h-4 w-4 shrink-0" />
|
||||
<span className="truncate">حمایت</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="events" className="mt-0 space-y-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onTab("community")}
|
||||
className="flex w-full items-center gap-3 rounded-2xl border-2 border-accent/30 bg-accent/5 px-4 py-3.5 text-start transition hover:bg-accent/10"
|
||||
>
|
||||
<span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-accent/15 text-accent">
|
||||
<HeartHandshake className="h-5 w-5" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block text-sm font-extrabold">حمایت مالی</span>
|
||||
<span className="mt-0.5 block text-xs text-muted-foreground">
|
||||
هماهنگی دونیت از طریق گفتگو با تیم
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<EventsPanel />
|
||||
</TabsContent>
|
||||
<TabsContent value="chats" className="mt-0">
|
||||
<ChatsLauncher />
|
||||
</TabsContent>
|
||||
<TabsContent value="leagues" className="mt-0">
|
||||
<LeaderboardPanel />
|
||||
</TabsContent>
|
||||
<TabsContent value="community" className="mt-0">
|
||||
<CommunityPanel />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function openChat(withId?: number) {
|
||||
window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true, with: withId } }));
|
||||
}
|
||||
|
||||
function ChatsLauncher() {
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["mentors"],
|
||||
queryFn: () => http.get<{ mentors: Mentor[] }>("/api/mentors"),
|
||||
});
|
||||
const { data: convData, isLoading: convLoading } = useQuery({
|
||||
queryKey: ["conversations"],
|
||||
queryFn: () => http.get<{ conversations: Conversation[] }>("/api/chats/conversations"),
|
||||
});
|
||||
const mentors = data?.mentors ?? [];
|
||||
const conversations = convData?.conversations ?? [];
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<Panel className="justify-center text-center" title="گفتگوها" description="یک پنجرهٔ شناور شیشه‌ای در تمام صفحات — با صدا، عکس، ویدیو و پیام صوتی.">
|
||||
<div className="flex flex-col items-center gap-4 pt-1">
|
||||
<div className="grid h-14 w-14 place-items-center rounded-2xl bg-primary/10">
|
||||
<MessageSquareHeart className="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
<p className="max-w-sm text-sm text-muted-foreground">
|
||||
گفتگو همیشه در دکمهٔ شناور پایین صفحه در دسترس شماست؛ گفتگوها خصوصی هستند و پاسخ منتورها معمولاً کمتر از یک روز طول می‌کشد.
|
||||
</p>
|
||||
<Button onClick={() => openChat()} className="gap-2">
|
||||
<Sparkles className="h-4 w-4" /> باز کردن گفتگوها
|
||||
</Button>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<Panel title="گفتگوهای شما" description="مکالمات جاری با منتورها — روی هر کدام بزنید تا باز شود.">
|
||||
<div className="space-y-1.5 pt-1">
|
||||
{convLoading && (
|
||||
<div className="space-y-2">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i} className="flex items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5">
|
||||
<SkeletonAvatar />
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-3 w-14" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-2/3" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{conversations.map((c) => (
|
||||
<button
|
||||
key={c.partner.id}
|
||||
onClick={() => openChat(c.partner.id)}
|
||||
className="flex w-full items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5 text-right transition-colors hover:border-primary/50 hover:bg-primary/5"
|
||||
>
|
||||
<UserAvatar name={c.partner.name} className="h-10 w-10" {...avatarPropsOf(c.partner)} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="truncate font-bold">{c.partner.name}</p>
|
||||
{c.lastMessage && (
|
||||
<span className="shrink-0 text-[10px] text-muted-foreground">{timeAgo(c.lastMessage.createdAt)}</span>
|
||||
)}
|
||||
</div>
|
||||
<p
|
||||
dir="auto"
|
||||
className={cn(
|
||||
"truncate text-xs [unicode-bidi:plaintext]",
|
||||
c.unreadCount > 0 ? "font-bold text-foreground" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{c.lastMessage ? messagePreview(c.lastMessage) : "پیامی ندارد"}
|
||||
</p>
|
||||
</div>
|
||||
{c.unreadCount > 0 && (
|
||||
<Badge variant="accent" className="h-5 min-w-5 justify-center rounded-full px-1.5">
|
||||
{c.unreadCount}
|
||||
</Badge>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
{!convLoading && conversations.length === 0 && (
|
||||
<p className="px-1 text-sm text-muted-foreground">
|
||||
هنوز گفتگویی ندارید — از «شروع سریع» یک منتور انتخاب کنید.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<Panel title="شروع سریع با منتور" description="یک گفتگو را مستقیم باز کنید.">
|
||||
<div className="space-y-1 pt-1">
|
||||
{isLoading && (
|
||||
<div className="space-y-2">
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5">
|
||||
<SkeletonAvatar />
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-3 w-16" />
|
||||
</div>
|
||||
<Skeleton className="h-5 w-20 rounded-full" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{mentors.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => openChat(m.id)}
|
||||
className="flex w-full items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5 text-right transition-colors hover:border-primary/50 hover:bg-primary/5"
|
||||
>
|
||||
<UserAvatar name={m.name} className="h-10 w-10" {...avatarPropsOf(m)} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-bold">{m.name}</p>
|
||||
<p className="text-xs text-muted-foreground">منتور</p>
|
||||
</div>
|
||||
<span className="inline-flex items-center gap-1.5 text-xs font-bold text-success">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-success" /> در دسترس
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{!isLoading && mentors.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">هنوز منتوری در دسترس نیست.</p>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function messagePreview(m: ChatMessage) {
|
||||
if (m.body) return m.body;
|
||||
if (m.attachment) {
|
||||
const labels: Record<string, string> = { image: "📷 عکس", video: "🎬 ویدیو", audio: "🎵 پیام صوتی" };
|
||||
return labels[m.attachment.type] ?? `📎 ${m.attachment.name}`;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function timeAgo(iso: string) {
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
const m = Math.floor(diff / 60_000);
|
||||
if (m < 1) return "الان";
|
||||
if (m < 60) return `${m} دقیقه قبل`;
|
||||
const h = Math.floor(m / 60);
|
||||
if (h < 24) return `${h} ساعت قبل`;
|
||||
return new Date(iso).toLocaleDateString("fa-IR");
|
||||
}
|
||||
Reference in New Issue
Block a user