feat(frontend): draft/publish, certificate approval UI, contributors, leaderboard tiers
- admin-studio: chapter/lesson publish toggle with Draft/Published badges; per-chapter accordion - cap/page: remove auto-issue effect; student requests, admin approves - learning-panel: admin issue-certificate action per student - site-settings: contributors editor with avatar upload (ContributorAvatarPicker, TagInput) - community-panel: render contributors section below social links - leaderboard-panel: TierBadge, totalParticipants, tier on entries and self - page.tsx: fix "شروع مسیر" routing to /register instead of /login - navbar: correct icons (Settings, Palette) in user dropdown - types: Contributor, LeaderboardTier, Certificate status field, updated LeaderboardData/Entry - layout: PWA icon metadata (192, 512, apple-touch-icon)
This commit is contained in:
Generated
+46
@@ -42,6 +42,7 @@
|
||||
"zustand": "^5.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.64.1",
|
||||
"@tailwindcss/postcss": "^4.0.0",
|
||||
"@types/node": "^22.10.0",
|
||||
"@types/react": "^19.0.0",
|
||||
@@ -796,6 +797,22 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/test": {
|
||||
"version": "1.64.1",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.64.1.tgz",
|
||||
"integrity": "sha512-IaYGml/nSOiZWROfPtuIL7neuu9qDOZ3TNvNljUIrhDMxiGTgPjzj/g9p9RxpS2tSepPDRY+UwAaEeiKtUvIAg==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright": "1.64.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/primitive": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.7.tgz",
|
||||
@@ -2973,6 +2990,35 @@
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.64.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.64.1.tgz",
|
||||
"integrity": "sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright-core": "1.64.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.64.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.64.1.tgz",
|
||||
"integrity": "sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.28",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
|
||||
|
||||
@@ -46,6 +46,7 @@
|
||||
"zustand": "^5.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.64.1",
|
||||
"@tailwindcss/postcss": "^4.0.0",
|
||||
"@types/node": "^22.10.0",
|
||||
"@types/react": "^19.0.0",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 253 KiB |
@@ -73,13 +73,6 @@ function CapPageInner() {
|
||||
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 />;
|
||||
|
||||
@@ -35,6 +35,14 @@ const vazirmatnLatin = localFont({
|
||||
export const metadata: Metadata = {
|
||||
title: "پرگار",
|
||||
description: "مسیر یادگیری واقعی پرگار",
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: "/favicon.ico" },
|
||||
{ url: "/icon-192.png", sizes: "192x192", type: "image/png" },
|
||||
{ url: "/icon-512.png", sizes: "512x512", type: "image/png" },
|
||||
],
|
||||
apple: { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
|
||||
@@ -93,6 +93,7 @@ export default function Home() {
|
||||
|
||||
const goCap = () => router.push("/cap");
|
||||
const goLogin = () => router.push("/login");
|
||||
const goRegister = () => router.push("/register");
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex max-w-5xl flex-col items-center">
|
||||
@@ -134,7 +135,7 @@ export default function Home() {
|
||||
<Button size="lg" onClick={goLogin} className="gap-2 px-8">
|
||||
ورود
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" onClick={goLogin} className="gap-2 px-8">
|
||||
<Button size="lg" variant="outline" onClick={goRegister} className="gap-2 px-8">
|
||||
<Zap className="h-5 w-5" /> شروع مسیر
|
||||
</Button>
|
||||
</>
|
||||
@@ -288,7 +289,7 @@ export default function Home() {
|
||||
<Link href="/login">ورود</Link>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild className="gap-2 px-8">
|
||||
<Link href="/login">
|
||||
<Link href="/register">
|
||||
<PlayCircle className="h-5 w-5" /> شروع مسیر
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
Copy,
|
||||
Cpu,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Flag,
|
||||
GitBranch,
|
||||
Globe,
|
||||
@@ -21,6 +22,7 @@ import {
|
||||
Loader2,
|
||||
Lock,
|
||||
MapPin,
|
||||
MoreHorizontal,
|
||||
Pencil,
|
||||
Plus,
|
||||
Rocket,
|
||||
@@ -59,6 +61,15 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { PasswordInput } from "@/components/ui/password-input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
@@ -685,7 +696,11 @@ function CurriculumPanel() {
|
||||
|
||||
const [lessonModal, setLessonModal] = useState<Lesson | null>(null);
|
||||
const [chapterModal, setChapterModal] = useState<Chapter | null>(null);
|
||||
const [dragIdx, setDragIdx] = useState<{ chapter: number; from: number; over?: number } | null>(null);
|
||||
const [activeChapter, setActiveChapter] = useState<number | null>(null);
|
||||
const [dragIdx, setDragIdx] = useState<{ chapter: number; from: number } | null>(null);
|
||||
|
||||
const toggleChapter = (id: number) =>
|
||||
setActiveChapter((prev) => (prev === id ? null : id));
|
||||
|
||||
const persistChapterOrder = async (list: Chapter[]) => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
@@ -772,12 +787,14 @@ function CurriculumPanel() {
|
||||
}
|
||||
};
|
||||
|
||||
const newLesson = (chapterId: number) =>
|
||||
const newLesson = (chapterId: number) => {
|
||||
setActiveChapter(chapterId);
|
||||
setLessonModal({
|
||||
id: 0, chapterId, title: "", description: "", videoKey: "",
|
||||
durationSeconds: 45, completionThresholdPct: 85, requiresLessonId: undefined,
|
||||
x: lessons.filter((l) => l.chapterId === chapterId).length, y: 0, sortOrder: 1, xpReward: 50, isActive: true, isPublished: false,
|
||||
});
|
||||
};
|
||||
|
||||
const duplicateLesson = async (l: Lesson) => {
|
||||
try {
|
||||
@@ -812,6 +829,7 @@ function CurriculumPanel() {
|
||||
}
|
||||
try {
|
||||
await http.del(`/api/admin/chapters/${ch.id}`);
|
||||
if (activeChapter === ch.id) setActiveChapter(null);
|
||||
qc.invalidateQueries({ queryKey: ["admin", "lessons"] });
|
||||
qc.invalidateQueries({ queryKey: ["admin", "stats"] });
|
||||
toast.success("فصل حذف شد");
|
||||
@@ -820,70 +838,159 @@ function CurriculumPanel() {
|
||||
}
|
||||
};
|
||||
|
||||
const publishedChapters = chapters.filter((c) => c.isPublished).length;
|
||||
const publishedLessons = lessons.filter((l) => l.isPublished).length;
|
||||
|
||||
return (
|
||||
<>
|
||||
{dialog}
|
||||
<Card>
|
||||
<CardHeader className="flex-row items-center justify-between gap-4">
|
||||
<div>
|
||||
<CardTitle className="text-base">فصلها و درخت مهارت</CardTitle>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{chapters.length} فصل · {lessons.length} درس · ترتیب با کشیدن یا فلش · موقعیت x,y
|
||||
</p>
|
||||
|
||||
{/* Course overview header */}
|
||||
<div className="mb-4 flex flex-wrap items-start justify-between gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-bold">دوره آموزشی</p>
|
||||
<div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
|
||||
<span>{chapters.length} فصل</span>
|
||||
<span>{lessons.length} درس</span>
|
||||
<span className="text-success">{publishedChapters} فصل منتشر</span>
|
||||
<span className="text-success">{publishedLessons} درس منتشر</span>
|
||||
</div>
|
||||
<Button className="gap-1.5 rounded-2xl" onClick={() => setChapterModal({ id: 0, title: "", description: "", icon: "terminal", sortOrder: chapters.length + 1, isPublished: false })}>
|
||||
<Plus className="h-4 w-4" /> فصل جدید
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{isLoading && <Loader />}
|
||||
{chapters.map((ch, ci) => {
|
||||
const ls = lessons.filter((l) => l.chapterId === ch.id);
|
||||
const ChIcon = chapterIconOf(ch.icon);
|
||||
return (
|
||||
<div key={ch.id} className={cn("rounded-xl border border-border bg-muted/20", dragIdx !== null && dragIdx?.chapter === ch.id && "border-primary/50")}>
|
||||
<div className="flex items-center gap-2 p-3 pb-2">
|
||||
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary">
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
className="shrink-0"
|
||||
onClick={() => setChapterModal({ id: 0, title: "", description: "", icon: "terminal", sortOrder: chapters.length + 1, isPublished: false })}
|
||||
>
|
||||
<Plus className="h-4 w-4" /> فصل جدید
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Chapter list */}
|
||||
{isLoading && <Loader />}
|
||||
|
||||
<div className="space-y-2">
|
||||
{chapters.map((ch, ci) => {
|
||||
const ls = lessons.filter((l) => l.chapterId === ch.id);
|
||||
const ChIcon = chapterIconOf(ch.icon);
|
||||
const isOpen = activeChapter === ch.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ch.id}
|
||||
className={cn(
|
||||
"overflow-hidden rounded-xl border border-border transition-colors",
|
||||
isOpen && "border-primary/40 shadow-sm",
|
||||
)}
|
||||
>
|
||||
{/* Chapter header row */}
|
||||
<div className="flex items-center gap-2 px-3 py-2.5">
|
||||
{/* Expand toggle + identity — takes full remaining width */}
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`chapter-${ch.id}-lessons`}
|
||||
className="flex min-w-0 flex-1 items-center gap-2.5 rounded-md py-0.5 text-start outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
onClick={() => toggleChapter(ch.id)}
|
||||
>
|
||||
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary">
|
||||
<ChIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="truncate font-bold">{ch.title}</h3>
|
||||
{ch.description && <p className="truncate text-xs text-muted-foreground">{ch.description}</p>}
|
||||
<p className="truncate text-sm font-bold">{ch.title}</p>
|
||||
{ch.description && (
|
||||
<p className="truncate text-[11px] text-muted-foreground">{ch.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant="outline" className="shrink-0">{ls.length} درس</Badge>
|
||||
<Badge variant={ch.isPublished ? "success" : "secondary"} className="shrink-0 px-1.5 text-[10px]">
|
||||
{ch.isPublished ? "منتشر" : "پیشنویس"}
|
||||
</Badge>
|
||||
<GroupNav
|
||||
onUp={ci > 0 ? () => moveChapter(ci, -1) : undefined}
|
||||
onDown={ci < chapters.length - 1 ? () => moveChapter(ci, 1) : undefined}
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
|
||||
isOpen && "rotate-180",
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
<Button size="sm" variant="outline" className="h-7 gap-1 text-xs" onClick={() => setChapterModal(ch)}>
|
||||
<Pencil className="h-3 w-3" /> فصل
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 gap-1 text-xs"
|
||||
onClick={() => publishChapter(ch, !ch.isPublished)}
|
||||
title={ch.isPublished ? "برگشت به پیشنویس" : "انتشار فصل"}
|
||||
>
|
||||
{ch.isPublished ? "برگشت" : "انتشار"}
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="h-7 gap-1 text-xs" onClick={() => newLesson(ch.id)}>
|
||||
<Plus className="h-3.5 w-3.5" /> درس
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-7 w-7 px-0 text-destructive" onClick={() => delChapter(ch)} title="حذف فصل">
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
{ls.length === 0 ? (
|
||||
<p className="px-3 pb-3 text-xs text-muted-foreground">هنوز درسی نیست. «+ درس» را بزنید.</p>
|
||||
) : (
|
||||
<div className="px-3 pb-3">
|
||||
<div className="grid gap-1.5 sm:grid-cols-2">
|
||||
</button>
|
||||
|
||||
{/* Status badges */}
|
||||
<Badge variant="outline" className="shrink-0 px-2 text-[10px]">
|
||||
{ls.length} درس
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={ch.isPublished ? "success" : "secondary"}
|
||||
className="hidden shrink-0 px-1.5 text-[10px] sm:inline-flex"
|
||||
>
|
||||
{ch.isPublished ? "منتشر" : "پیشنویس"}
|
||||
</Badge>
|
||||
|
||||
{/* Chapter actions menu */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 shrink-0 px-0"
|
||||
aria-label={`اقدامات فصل ${ch.title}`}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuLabel>فصل {ci + 1}</DropdownMenuLabel>
|
||||
<DropdownMenuItem onClick={() => setChapterModal(ch)}>
|
||||
<Pencil className="h-3.5 w-3.5" /> ویرایش فصل
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setActiveChapter(ch.id);
|
||||
newLesson(ch.id);
|
||||
}}
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" /> درس جدید
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
{ci > 0 && (
|
||||
<DropdownMenuItem onClick={() => moveChapter(ci, -1)}>
|
||||
<ChevronUp className="h-3.5 w-3.5" /> جابجا به بالا
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{ci < chapters.length - 1 && (
|
||||
<DropdownMenuItem onClick={() => moveChapter(ci, 1)}>
|
||||
<ChevronDown className="h-3.5 w-3.5" /> جابجا به پایین
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={() => publishChapter(ch, !ch.isPublished)}>
|
||||
{ch.isPublished ? (
|
||||
<><EyeOff className="h-3.5 w-3.5" /> برگشت به پیشنویس</>
|
||||
) : (
|
||||
<><Globe className="h-3.5 w-3.5" /> انتشار فصل</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => delChapter(ch)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" /> حذف فصل
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* Lessons panel (progressive disclosure) */}
|
||||
{isOpen && (
|
||||
<div
|
||||
id={`chapter-${ch.id}-lessons`}
|
||||
className="border-t border-border/70"
|
||||
>
|
||||
{ls.length === 0 ? (
|
||||
<div className="px-4 py-5 text-center text-sm text-muted-foreground">
|
||||
هنوز درسی نیست — از دکمه زیر درس اضافه کنید.
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-border/60">
|
||||
{ls.map((l, li) => {
|
||||
const cols = ls.filter((o) => o.x === l.x && o.y === l.y && o.id !== l.id);
|
||||
const collision = ls.some(
|
||||
(o) => o.x === l.x && o.y === l.y && o.id !== l.id,
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={l.id}
|
||||
@@ -892,80 +999,150 @@ function CurriculumPanel() {
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "move";
|
||||
setDragIdx((d) => (d ? { ...d, over: li, chapter: ch.id } : d));
|
||||
}}
|
||||
onDrop={() => {
|
||||
if (dragIdx && dragIdx.chapter === ch.id && dragIdx.from !== li) {
|
||||
const idx = dragIdx.from;
|
||||
const next = reorderArray(ls, idx, li);
|
||||
const next = reorderArray(ls, dragIdx.from, li);
|
||||
persistLessonOrder(next).catch(() => {});
|
||||
}
|
||||
setDragIdx(null);
|
||||
}}
|
||||
onDragEnd={() => setDragIdx(null)}
|
||||
className={cn(
|
||||
"group flex cursor-grab items-center gap-2 rounded-lg border border-border bg-card px-3 py-2.5 transition-colors active:cursor-grabbing",
|
||||
"flex items-center gap-2 px-3 py-2.5 transition-colors hover:bg-muted/40",
|
||||
dragIdx?.from === li && dragIdx.chapter === ch.id && "opacity-40",
|
||||
!l.videoKey && "border-dashed"
|
||||
)}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 shrink-0 text-muted-foreground/50" />
|
||||
<span className="shrink-0 text-xs font-bold tabular-nums text-muted-foreground">L{l.id}</span>
|
||||
{/* Grip handle */}
|
||||
<GripVertical className="h-4 w-4 shrink-0 cursor-grab text-muted-foreground/40 active:cursor-grabbing" aria-hidden />
|
||||
|
||||
{/* Lesson identity */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">{l.title}</p>
|
||||
<div className="flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground">
|
||||
<Timer className="h-3 w-3" /> {formatDur(l.durationSeconds)}
|
||||
<Sparkles className="h-3 w-3 text-gold" /> +{formatFaNumber(l.xpReward)}
|
||||
<MapPin className="h-3 w-3" /> {l.x},{l.y}
|
||||
<p className="truncate text-sm font-medium leading-tight">
|
||||
{l.title}
|
||||
</p>
|
||||
<div className="mt-0.5 flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
|
||||
<span className="inline-flex items-center gap-0.5">
|
||||
<Timer className="h-3 w-3" />
|
||||
{formatDur(l.durationSeconds)}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-0.5 text-gold">
|
||||
<Sparkles className="h-3 w-3" />
|
||||
+{formatFaNumber(l.xpReward)}
|
||||
</span>
|
||||
{l.videoKey ? (
|
||||
<span className="inline-flex items-center gap-0.5 text-success"><Video className="h-3 w-3" /> ویدیو</span>
|
||||
<span className="inline-flex items-center gap-0.5 text-success">
|
||||
<Video className="h-3 w-3" /> ویدیو
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-warning">بدون ویدیو</span>
|
||||
)}
|
||||
{cols.length > 0 && <Badge variant="destructive" className="px-1 text-[9px]">تداخل</Badge>}
|
||||
{collision && (
|
||||
<Badge variant="destructive" className="px-1 text-[9px]">
|
||||
تداخل موقعیت
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant={l.isPublished ? "success" : "secondary"} className="shrink-0 px-1.5 text-[10px]">
|
||||
|
||||
{/* Publish badge */}
|
||||
<Badge
|
||||
variant={l.isPublished ? "success" : "secondary"}
|
||||
className="hidden shrink-0 px-1.5 text-[10px] sm:inline-flex"
|
||||
>
|
||||
{l.isPublished ? "منتشر" : "پیشنویس"}
|
||||
</Badge>
|
||||
<div className="flex shrink-0 gap-0.5">
|
||||
<GroupNav onUp={li > 0 ? () => moveLesson(ch.id, li, -1) : undefined} onDown={li < ls.length - 1 ? () => moveLesson(ch.id, li, 1) : undefined} compact />
|
||||
<Button size="sm" variant="ghost" className="h-7 px-1.5" title="تکثیر" onClick={() => duplicateLesson(l)}>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-7 px-1.5" onClick={() => setLessonModal(l)} title="ویرایش">
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 px-1.5 text-[10px]"
|
||||
title={l.isPublished ? "برگشت به پیشنویس" : "انتشار درس"}
|
||||
onClick={() => publishLesson(l, !l.isPublished)}
|
||||
>
|
||||
{l.isPublished ? "برگشت" : "انتشار"}
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-7 w-7 px-0 text-destructive opacity-60 hover:opacity-100" onClick={() => delLesson(l)} title="حذف درس">
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Up/down reorder (accessible) */}
|
||||
<GroupNav
|
||||
onUp={li > 0 ? () => moveLesson(ch.id, li, -1) : undefined}
|
||||
onDown={li < ls.length - 1 ? () => moveLesson(ch.id, li, 1) : undefined}
|
||||
compact
|
||||
/>
|
||||
|
||||
{/* Edit (primary action) */}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 shrink-0 px-0"
|
||||
title="ویرایش درس"
|
||||
aria-label={`ویرایش ${l.title}`}
|
||||
onClick={() => setLessonModal(l)}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
|
||||
{/* Secondary actions menu */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 shrink-0 px-0"
|
||||
aria-label={`اقدامات ${l.title}`}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-44">
|
||||
<DropdownMenuLabel className="truncate">L{l.id}</DropdownMenuLabel>
|
||||
<DropdownMenuItem onClick={() => duplicateLesson(l)}>
|
||||
<Copy className="h-3.5 w-3.5" /> تکثیر
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => publishLesson(l, !l.isPublished)}>
|
||||
{l.isPublished ? (
|
||||
<><EyeOff className="h-3.5 w-3.5" /> برگشت به پیشنویس</>
|
||||
) : (
|
||||
<><Globe className="h-3.5 w-3.5" /> انتشار درس</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => delLesson(l)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" /> حذف درس
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add lesson footer */}
|
||||
<div className="border-t border-border/60 px-3 py-2.5">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="gap-1.5"
|
||||
onClick={() => newLesson(ch.id)}
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" /> درس جدید در این فصل
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{chapters.length === 0 && !isLoading && (
|
||||
<div className="rounded-xl border border-dashed border-border p-8 text-center">
|
||||
<p className="font-bold">هنوز فصلی نیست</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">با «فصل جدید» شروع کنید؛ درسهای هر فصل روی درخت مهارت هنرجو نمایش داده میشود.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{chapters.length === 0 && !isLoading && (
|
||||
<div className="rounded-xl border border-dashed border-border p-10 text-center">
|
||||
<p className="font-bold">هنوز فصلی نیست</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
با «فصل جدید» شروع کنید؛ درسهای هر فصل روی درخت مهارت هنرجو نمایش داده میشود.
|
||||
</p>
|
||||
<Button
|
||||
className="mt-4"
|
||||
onClick={() => setChapterModal({ id: 0, title: "", description: "", icon: "terminal", sortOrder: 1, isPublished: false })}
|
||||
>
|
||||
<Plus className="h-4 w-4" /> فصل جدید
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ChapterDialog chapter={chapterModal} onClose={() => setChapterModal(null)} onSave={saveChapter} />
|
||||
<LessonDialog
|
||||
@@ -1437,11 +1614,11 @@ function EventDialog({ event, onClose, onSave }: { event: AdminEvent | null; onC
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>توضیحات</Label>
|
||||
<textarea
|
||||
<Textarea
|
||||
value={draft.description}
|
||||
onChange={(e) => set({ description: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
className="resize-y"
|
||||
placeholder="شرح کوتاه رویداد (اختیاری)…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -148,7 +148,7 @@ export function LearningPanel() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{(overviewQ.isError || studentsQ.isError) && (
|
||||
<div className="flex flex-wrap items-center gap-3 rounded-2xl border border-destructive/40 bg-destructive/5 px-4 py-3 text-sm">
|
||||
<div className="flex flex-wrap items-center gap-3 rounded-2xl border-2 border-destructive/40 bg-destructive/5 px-4 py-3 text-sm">
|
||||
<AlertTriangle className="h-4 w-4 shrink-0 text-destructive" />
|
||||
<p className="min-w-0 flex-1 font-bold text-destructive">
|
||||
{toUserError(overviewQ.error ?? studentsQ.error, "بارگذاری داشبورد یادگیری ممکن نشد")}
|
||||
|
||||
@@ -1,21 +1,139 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Heart, Loader2, Package, Save, Settings2, Share2, Sparkles } from "lucide-react";
|
||||
import { http, toUserError } from "@/lib/api";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Camera, Heart, Loader2, Package, Save, Settings2, Share2, Sparkles, Trash2, Users } from "lucide-react";
|
||||
import { apiForm, http, toUserError } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { TagInput } from "@/components/ui/tag-input";
|
||||
import { AvatarCropDialog } from "@/components/avatar-crop";
|
||||
import { toast } from "@/components/providers";
|
||||
import type { AdminTabId } from "@/components/admin/nav";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SettingsMap = Record<string, string>;
|
||||
|
||||
type SponsorDraft = { name: string; url: string; blurb: string };
|
||||
type SocialDraft = { name: string; url: string };
|
||||
type ContributorDraft = { name: string; role: string; bio: string; url: string; avatar: string; contributions: string[] };
|
||||
|
||||
function ContributorAvatarPicker({
|
||||
value,
|
||||
name,
|
||||
onChange,
|
||||
}: {
|
||||
value: string;
|
||||
name: string;
|
||||
onChange: (url: string) => void;
|
||||
}) {
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [pending, setPending] = useState<File | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const initials = name
|
||||
.split(" ")
|
||||
.map((w) => w[0])
|
||||
.slice(0, 2)
|
||||
.join("")
|
||||
.toUpperCase() || "؟";
|
||||
|
||||
const onUpload = async (blob: Blob) => {
|
||||
setUploading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append("file", new File([blob], "avatar.png", { type: "image/png" }), "avatar.png");
|
||||
const { url } = await apiForm<{ url: string }>("/api/admin/contributor-avatar", form);
|
||||
onChange(url);
|
||||
setPending(null);
|
||||
} catch (e) {
|
||||
setError(toUserError(e, "خطا در آپلود"));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative shrink-0">
|
||||
{value ? (
|
||||
<img
|
||||
src={value}
|
||||
alt={name}
|
||||
className="h-14 w-14 rounded-full border-2 border-border object-cover"
|
||||
/>
|
||||
) : (
|
||||
<span className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-border bg-muted text-sm font-bold text-muted-foreground">
|
||||
{initials}
|
||||
</span>
|
||||
)}
|
||||
{uploading && (
|
||||
<span className="absolute inset-0 flex items-center justify-center rounded-full bg-background/70">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-primary" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
disabled={uploading}
|
||||
onClick={() => fileRef.current?.click()}
|
||||
className={cn(
|
||||
"flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-bold text-primary-foreground disabled:opacity-50",
|
||||
)}
|
||||
>
|
||||
<Camera className="h-3 w-3" />
|
||||
{value ? "تغییر" : "آپلود"}
|
||||
</button>
|
||||
{value && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={uploading}
|
||||
onClick={() => onChange("")}
|
||||
className="flex items-center gap-1 rounded-md bg-destructive/10 px-2.5 py-1 text-xs font-bold text-destructive disabled:opacity-50"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
حذف
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{error && <p className="text-[11px] text-destructive">{error}</p>}
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (f) setPending(f);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<AvatarCropDialog
|
||||
file={pending}
|
||||
busy={uploading}
|
||||
error={error}
|
||||
onCancel={() => {
|
||||
if (uploading) return;
|
||||
setPending(null);
|
||||
setError(null);
|
||||
}}
|
||||
onInvalid={() => {
|
||||
setPending(null);
|
||||
setError("خواندن این عکس ممکن نشد. JPEG، PNG یا WebP را انتخاب کنید.");
|
||||
}}
|
||||
onCrop={(blob) => onUpload(blob)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionHeading({
|
||||
icon: Icon,
|
||||
@@ -46,6 +164,7 @@ export function SiteSettingsPanel({
|
||||
const [draft, setDraft] = useState<SettingsMap>({});
|
||||
const [sponsors, setSponsors] = useState<SponsorDraft[]>([]);
|
||||
const [socials, setSocials] = useState<SocialDraft[]>([]);
|
||||
const [contributors, setContributors] = useState<ContributorDraft[]>([]);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
@@ -76,6 +195,25 @@ export function SiteSettingsPanel({
|
||||
} catch {
|
||||
setSocials([]);
|
||||
}
|
||||
try {
|
||||
const parsed = JSON.parse(data.settings.contributors || "[]") as Array<Record<string, unknown>>;
|
||||
setContributors(
|
||||
Array.isArray(parsed)
|
||||
? parsed.map((c) => ({
|
||||
name: typeof c.name === "string" ? c.name : "",
|
||||
role: typeof c.role === "string" ? c.role : "",
|
||||
bio: typeof c.bio === "string" ? c.bio : "",
|
||||
url: typeof c.url === "string" ? c.url : "",
|
||||
avatar: typeof c.avatar === "string" ? c.avatar : "",
|
||||
contributions: Array.isArray(c.contributions)
|
||||
? (c.contributions as unknown[]).filter((x): x is string => typeof x === "string")
|
||||
: [],
|
||||
}))
|
||||
: [],
|
||||
);
|
||||
} catch {
|
||||
setContributors([]);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const set = (key: string, value: string) => setDraft((d) => ({ ...d, [key]: value }));
|
||||
@@ -126,11 +264,24 @@ export function SiteSettingsPanel({
|
||||
blurb: s.blurb.trim(),
|
||||
})),
|
||||
),
|
||||
contributors: JSON.stringify(
|
||||
contributors
|
||||
.filter((c) => c.name.trim())
|
||||
.map((c) => ({
|
||||
name: c.name.trim(),
|
||||
role: c.role.trim(),
|
||||
bio: c.bio.trim(),
|
||||
url: c.url.trim(),
|
||||
avatar: c.avatar.trim(),
|
||||
contributions: c.contributions.map((s) => s.trim()).filter(Boolean),
|
||||
})),
|
||||
),
|
||||
};
|
||||
await http.put("/api/admin/settings", { settings });
|
||||
toast.success("تنظیمات ذخیره شد");
|
||||
qc.invalidateQueries({ queryKey: ["admin", "settings"] });
|
||||
qc.invalidateQueries({ queryKey: ["community"] });
|
||||
qc.invalidateQueries({ queryKey: ["contributors"] });
|
||||
qc.invalidateQueries({ queryKey: ["sponsors"] });
|
||||
qc.invalidateQueries({ queryKey: ["auth", "register-status"] });
|
||||
} catch (e) {
|
||||
@@ -327,6 +478,97 @@ export function SiteSettingsPanel({
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<div className="flex items-end justify-between gap-3">
|
||||
<SectionHeading
|
||||
icon={Users}
|
||||
title="مشارکتکنندگان"
|
||||
hint="افرادی که در ساخت پرگار سهیم بودهاند. در زبانه جامعه نمایش داده میشود."
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="mb-2 shrink-0"
|
||||
onClick={() =>
|
||||
setContributors((list) => [
|
||||
...list,
|
||||
{ name: "", role: "", bio: "", url: "", avatar: "", contributions: [] },
|
||||
])
|
||||
}
|
||||
>
|
||||
افزودن
|
||||
</Button>
|
||||
</div>
|
||||
{contributors.length === 0 && (
|
||||
<p className="rounded-xl border border-dashed border-border px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
هنوز مشارکتکنندهای ثبت نشده. با «افزودن» شروع کنید.
|
||||
</p>
|
||||
)}
|
||||
{contributors.map((c, i) => (
|
||||
<div key={i} className="space-y-3 rounded-xl border border-border p-3">
|
||||
<ContributorAvatarPicker
|
||||
value={c.avatar}
|
||||
name={c.name || "مشارکتکننده"}
|
||||
onChange={(url) =>
|
||||
setContributors((list) => list.map((x, j) => (j === i ? { ...x, avatar: url } : x)))
|
||||
}
|
||||
/>
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
<Input
|
||||
placeholder="نام"
|
||||
value={c.name}
|
||||
onChange={(e) =>
|
||||
setContributors((list) => list.map((x, j) => (j === i ? { ...x, name: e.target.value } : x)))
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
placeholder="نقش (مثال: بنیانگذار)"
|
||||
value={c.role}
|
||||
onChange={(e) =>
|
||||
setContributors((list) => list.map((x, j) => (j === i ? { ...x, role: e.target.value } : x)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Textarea
|
||||
placeholder="بیوگرافی کوتاه (اختیاری)"
|
||||
value={c.bio}
|
||||
rows={2}
|
||||
onChange={(e) =>
|
||||
setContributors((list) => list.map((x, j) => (j === i ? { ...x, bio: e.target.value } : x)))
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
placeholder="لینک پروفایل (اختیاری، https://…)"
|
||||
value={c.url}
|
||||
dir="ltr"
|
||||
onChange={(e) =>
|
||||
setContributors((list) => list.map((x, j) => (j === i ? { ...x, url: e.target.value } : x)))
|
||||
}
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<p className="text-[11px] text-muted-foreground">دستههای مشارکت — Enter یا کاما برای افزودن</p>
|
||||
<TagInput
|
||||
value={c.contributions}
|
||||
onChange={(tags) =>
|
||||
setContributors((list) => list.map((x, j) => (j === i ? { ...x, contributions: tags } : x)))
|
||||
}
|
||||
placeholder="توسعه، طراحی، محتوا…"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => setContributors((list) => list.filter((_, j) => j !== i))}
|
||||
>
|
||||
حذف مشارکتکننده
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
رمزها، دیتابیس و JWT همچنان در فایل محیط (.env) میمانند — اینجا فقط تنظیمات قابلتغییر
|
||||
روزمره است.
|
||||
|
||||
@@ -1,17 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ExternalLink, Share2 } from "lucide-react";
|
||||
import { ExternalLink, Share2, Tag, Users } from "lucide-react";
|
||||
import { http, toUserError } from "@/lib/api";
|
||||
import { Panel } from "@/components/panel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { Contributor } from "@/lib/types";
|
||||
|
||||
export type SocialLink = { name: string; url: string };
|
||||
|
||||
export type CommunityPayload = {
|
||||
socials: SocialLink[];
|
||||
contributors: Contributor[];
|
||||
};
|
||||
|
||||
function ContributorAvatar({ contributor }: { contributor: Contributor }) {
|
||||
if (contributor.avatar) {
|
||||
return (
|
||||
<img
|
||||
src={contributor.avatar}
|
||||
alt={contributor.name}
|
||||
className="h-12 w-12 shrink-0 rounded-full border-2 border-border object-cover"
|
||||
onError={(e) => {
|
||||
(e.currentTarget as HTMLImageElement).style.display = "none";
|
||||
(e.currentTarget.nextElementSibling as HTMLElement | null)?.removeAttribute("hidden");
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const initials = contributor.name
|
||||
.split(" ")
|
||||
.map((w) => w[0])
|
||||
.slice(0, 2)
|
||||
.join("")
|
||||
.toUpperCase();
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-2 border-border bg-primary/10 text-sm font-bold text-primary"
|
||||
>
|
||||
{initials}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function CommunityPanel() {
|
||||
const { data, isLoading, isError, error, refetch } = useQuery({
|
||||
queryKey: ["community"],
|
||||
@@ -19,12 +52,17 @@ export function CommunityPanel() {
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="h-72 animate-pulse rounded-2xl border-2 border-border bg-muted/40" />;
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-4">
|
||||
<div className="h-40 animate-pulse rounded-2xl border-2 border-border bg-muted/40" />
|
||||
<div className="h-64 animate-pulse rounded-2xl border-2 border-border bg-muted/40" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="mx-auto max-w-xl rounded-2xl border-2 border-destructive/30 bg-destructive/5 p-8 text-center">
|
||||
<div className="mx-auto max-w-2xl rounded-2xl border-2 border-destructive/30 bg-destructive/5 p-8 text-center">
|
||||
<p className="font-medium text-destructive">{toUserError(error)}</p>
|
||||
<Button className="mt-4" variant="outline" onClick={() => refetch()}>
|
||||
تلاش دوباره
|
||||
@@ -34,9 +72,11 @@ export function CommunityPanel() {
|
||||
}
|
||||
|
||||
const socials = data?.socials ?? [];
|
||||
const contributors = data?.contributors ?? [];
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-xl">
|
||||
<div className="mx-auto max-w-2xl space-y-4">
|
||||
{/* Social links */}
|
||||
<Panel
|
||||
title="شبکههای پرگار"
|
||||
description="راههای رسمی ارتباط با برنامه. لینک شخصی هر کاربر روی پروفایل خودش است."
|
||||
@@ -63,6 +103,61 @@ export function CommunityPanel() {
|
||||
</ul>
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
{/* Contributors */}
|
||||
<Panel
|
||||
title="مشارکتکنندگان"
|
||||
description="افرادی که در ساخت پرگار سهیم بودهاند. ممنون از هر کمکی."
|
||||
icon={<Users className="h-5 w-5" />}
|
||||
tint="bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"
|
||||
>
|
||||
{contributors.length === 0 ? (
|
||||
<p className="py-8 text-center text-sm text-muted-foreground">اطلاعات مشارکتکنندگان هنوز ثبت نشده است.</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-border/60">
|
||||
{contributors.map((c, i) => (
|
||||
<li key={i} className="flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start">
|
||||
<ContributorAvatar contributor={c} />
|
||||
<div className="min-w-0 flex-1 space-y-1.5">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{c.url ? (
|
||||
<a
|
||||
href={c.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center gap-1 font-bold hover:text-primary hover:underline"
|
||||
>
|
||||
{c.name}
|
||||
<ExternalLink className="h-3 w-3 shrink-0 text-muted-foreground" />
|
||||
</a>
|
||||
) : (
|
||||
<span className="font-bold">{c.name}</span>
|
||||
)}
|
||||
{c.role && (
|
||||
<span className="text-xs text-muted-foreground">{c.role}</span>
|
||||
)}
|
||||
</div>
|
||||
{c.bio && <p className="text-sm leading-relaxed text-muted-foreground">{c.bio}</p>}
|
||||
{c.contributions.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{c.contributions.map((cat) => (
|
||||
<Badge
|
||||
key={cat}
|
||||
variant="secondary"
|
||||
className="gap-1 px-2 py-0.5 text-xs"
|
||||
>
|
||||
<Tag className="h-3 w-3" />
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@ export function LeaderboardPanel() {
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl rounded-xl border border-destructive/30 bg-destructive/5 p-6 text-center">
|
||||
<div className="mx-auto max-w-2xl rounded-xl border-2 border-destructive/30 bg-destructive/5 p-6 text-center">
|
||||
<p className="font-medium text-destructive">{toUserError(error)}</p>
|
||||
<Button className="mt-3" variant="outline" onClick={() => refetch()}>
|
||||
تلاش دوباره
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { Flame, Heart, LogOut, Sparkles, User, UserCog } from "lucide-react";
|
||||
import { Flame, Heart, LogOut, Palette, Settings, Sparkles, User, UserCog } from "lucide-react";
|
||||
import { NotificationBell } from "@/components/notification-bell";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { BrandMark } from "@/components/brand-mark";
|
||||
@@ -28,7 +28,6 @@ import {
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn, formatFaNumber } from "@/lib/utils";
|
||||
import { GlobalSearch } from "@/components/global-search";
|
||||
import { isVerifiedRole, VerifiedBadge } from "@/components/verified-badge";
|
||||
|
||||
const navLinks = [
|
||||
@@ -65,7 +64,6 @@ export function Navbar() {
|
||||
<BrandMark />
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<GlobalSearch />
|
||||
<ThemeToggle />
|
||||
{pathname !== "/login" && (
|
||||
<Button asChild size="sm" className="font-bold">
|
||||
@@ -188,10 +186,10 @@ export function Navbar() {
|
||||
<User /> پروفایل من
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => router.push("/settings")}>
|
||||
<User /> تنظیمات
|
||||
<Settings /> تنظیمات
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onSelect={() => setStudioOpen(true)}>
|
||||
<User /> ویرایش آواتار
|
||||
<Palette /> ویرایش آواتار
|
||||
</DropdownMenuItem>
|
||||
{liveUser.role === "admin" && (
|
||||
<DropdownMenuItem onClick={() => router.push("/admin")}>
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface TagInputProps {
|
||||
value: string[];
|
||||
onChange: (tags: string[]) => void;
|
||||
placeholder?: string;
|
||||
maxTags?: number;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function TagInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "افزودن برچسب…",
|
||||
maxTags = 20,
|
||||
className,
|
||||
disabled,
|
||||
}: TagInputProps) {
|
||||
const [input, setInput] = useState("");
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const add = (raw: string) => {
|
||||
const tag = raw.trim();
|
||||
if (!tag) return;
|
||||
if (value.some((t) => t.toLowerCase() === tag.toLowerCase())) return;
|
||||
if (value.length >= maxTags) return;
|
||||
onChange([...value, tag]);
|
||||
setInput("");
|
||||
};
|
||||
|
||||
const remove = (index: number) => {
|
||||
onChange(value.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" || e.key === ",") {
|
||||
e.preventDefault();
|
||||
add(input);
|
||||
} else if (e.key === "Backspace" && !input && value.length > 0) {
|
||||
remove(value.length - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex min-h-9 flex-wrap gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
|
||||
disabled && "cursor-not-allowed opacity-50",
|
||||
className,
|
||||
)}
|
||||
onClick={() => inputRef.current?.focus()}
|
||||
>
|
||||
{value.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground"
|
||||
>
|
||||
{tag}
|
||||
{!disabled && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
remove(i);
|
||||
}}
|
||||
className="ml-0.5 rounded-sm opacity-60 transition-opacity hover:opacity-100"
|
||||
aria-label={`حذف ${tag}`}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
{!disabled && value.length < maxTags && (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
onBlur={() => add(input)}
|
||||
placeholder={value.length === 0 ? placeholder : ""}
|
||||
className="min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
|
||||
dir="auto"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,14 @@
|
||||
export type Role = "student" | "mentor" | "admin";
|
||||
|
||||
export interface Contributor {
|
||||
name: string;
|
||||
role: string;
|
||||
bio: string;
|
||||
url: string;
|
||||
avatar: string;
|
||||
contributions: string[];
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number;
|
||||
email: string;
|
||||
|
||||
Reference in New Issue
Block a user