feat: manual cert gating, chat layout overhaul, and video player UX fixes

- Certificate: Hardcode approval gate — completely removed the auto-issue path; `certRequiresApproval()` now strictly returns `true`, ignoring DB configuration. - Certificate: Quiz completion now queues a pending record and triggers a "Pending approval" notification instead of falsely confirming issuance. - Certificate: Public endpoints now enforce a guard on `status=issued`; frontend strips the auto-issue side effect and claim button (issuance restricted to admins). - Chats tab: Refactor layout into a full-width centered banner above two equal-height side-by-side panels (`grid-cols-1 lg:grid-cols-2`), utilizing `max-h` and `overflow-y-auto` to eliminate whitespace bleed. - Video player: Fix settings flyout prematurely closing on mouse movement (removed `setSettingsOpen` from `poke`); add a click-outside listener via `mousedown`. - Video player: Deduplicate controls — the speed pill now directly cycles playback speed, leaving the gear icon as the single entry point for settings (eliminating overlapping popovers). - Video player: Implement full-bleed theater mode using the `-mx-[50vw] w-screen` technique, keeping the progress strip constrained to `max-w-5xl` below.
2026-10-18 12:09:30 +03:30
5 changed files with 250 additions and 234 deletions
@@ -28,13 +28,13 @@ func (s *Server) certEnabled(ctx context.Context) bool {
 	return true
 }

-func (s *Server) certRequiresApproval(ctx context.Context) bool {
-	if v, err := s.store.GetSetting(ctx, "certificate_requires_approval"); err == nil {
-		return v == "true" || v == "1"
-	}
-	return true
-}
+// certRequiresApproval always returns true — certificates are never auto-issued.
+// The DB setting is kept for observability but cannot override the hard gate.
+func (s *Server) certRequiresApproval(_ context.Context) bool { return true }

+// issueCertificateIfEligible creates a pending certificate row when the user has
+// completed the curriculum. It never issues (publishes) the certificate directly;
+// that step requires explicit admin action via handleAdminIssueCertificate.
 func (s *Server) issueCertificateIfEligible(ctx context.Context, user *models.User) (*models.Certificate, bool, error) {
 	if !s.certEnabled(ctx) {
 		return nil, false, nil
@@ -53,22 +53,12 @@ func (s *Server) issueCertificateIfEligible(ctx context.Context, user *models.Us
 	} else if err != store.ErrNotFound {
 		return nil, false, err
 	}
-	if s.certRequiresApproval(ctx) {
+	// Always create a pending row — never auto-issue.
 	cert, err := s.store.CreatePendingCertificate(ctx, user.ID, user.Name)
 	if err != nil {
 		return nil, false, err
 	}
 	return cert, cert.Status == "pending", nil
-	}
-	publicID, err := newPublicID()
-	if err != nil {
-		return nil, false, err
-	}
-	cert, err := s.store.CreateCertificate(ctx, user.ID, publicID, user.Name)
-	if err != nil {
-		return nil, false, err
-	}
-	return cert, true, nil
 }

 func (s *Server) handleIssueCertificate(w http.ResponseWriter, r *http.Request) {
@@ -124,7 +114,7 @@ func (s *Server) handlePublicCertificate(w http.ResponseWriter, r *http.Request)
 		return
 	}
 	cert, err := s.store.GetCertificateByPublicID(r.Context(), publicID)
-	if err != nil || cert.RevokedAt != nil {
+	if err != nil || cert.RevokedAt != nil || cert.Status != "issued" {
 		writeErr(w, http.StatusNotFound, "گواهینامه پیدا نشد")
 		return
 	}
@@ -158,9 +158,10 @@ func (s *Server) handleQuizSubmit(w http.ResponseWriter, r *http.Request) {
 				return
 			}
 			if cert, created, cerr := s.issueCertificateIfEligible(r.Context(), activeUser); cerr == nil && created && cert != nil {
-				observability.Activity("certificate.issued", "user_id", u.ID, "public_id", cert.PublicID)
-				_ = s.notify.Notify(r.Context(), u.ID, "progress", "certificate_issued",
-					"گواهینامه آماده است", "دوره را به پایان رساندید. گواهینامه دیجیتال شما صادر شد.", "/c/"+cert.PublicID, nil)
+				observability.Activity("certificate.pending", "user_id", u.ID)
+				_ = s.notify.Notify(r.Context(), u.ID, "progress", "certificate_pending",
+					"درخواست گواهینامه ثبت شد", "دوره را با موفقیت به پایان رساندید. درخواست گواهینامه شما ثبت شد و پس از تأیید مدیریت صادر خواهد شد.", "/profile", nil)
+				_ = cert // pending; no publicId yet
 			}
 			s.notifyQuizPassed(u.ID, lesson.Title, id, activeUser.StreakCurrent)
 			_ = s.notifyUnlockedLessons(u.ID, id)
@@ -152,23 +152,26 @@ function ChatsLauncher() {
  const convTotal = convData?.total ?? conversations.length;

  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 className="space-y-4">
+      {/* ── Centered header banner ── */}
+      <div className="flex flex-col items-center gap-3 rounded-2xl border border-border bg-card px-6 py-6 text-center">
+        <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary backdrop-blur-sm">
+          <MessageSquareHeart className="h-4 w-4 shrink-0" />
+          یک پنجرهٔ شناور شیشه‌ای در تمام صفحات — با صدا، عکس، ویدیو و پیام صوتی.
        </div>
-          <p className="max-w-sm text-sm text-muted-foreground">
+        <Button onClick={() => openChat()} className="gap-2">
+          <Sparkles className="h-4 w-4" /> باز کردن گفتگوها ✨
+        </Button>
+        <p className="max-w-md text-sm text-muted-foreground">
          گفتگو همیشه در دکمهٔ شناور پایین صفحه در دسترس شماست؛ گفتگوها خصوصی هستند و پاسخ منتورها معمولاً کمتر از یک روز طول می‌کشد.
        </p>
-          <Button onClick={() => openChat()} className="gap-2">
-            <Sparkles className="h-4 w-4" /> باز کردن گفتگوها
-          </Button>
      </div>
-      </Panel>

+      {/* ── Side-by-side panels ── */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        {/* Conversations panel */}
        <Panel title="گفتگوهای شما" description="مکالمات جاری — روی هر کدام بزنید تا باز شود.">
-        <div className="space-y-1.5 pt-1">
+          <div className="max-h-[32rem] overflow-y-auto space-y-1.5 pt-1 pb-1">
            {convLoading && (
              <div className="space-y-2">
                {[0, 1, 2].map((i) => (
@@ -244,6 +247,7 @@ function ChatsLauncher() {
          </div>
        </Panel>

+        {/* Start chat panel */}
        <Panel
          title={staff ? "شروع گفتگو" : "شروع سریع با منتور"}
          description="نقش هر نفر روی ردیف نوشته شده است."
@@ -253,7 +257,7 @@ function ChatsLauncher() {
            </Button>
          }
        >
-        <div className="space-y-1 pt-1">
+          <div className="max-h-[32rem] overflow-y-auto space-y-1 pt-1 pb-1">
            {isLoading && (
              <div className="space-y-2">
                {[0, 1, 2, 3].map((i) => (
@@ -312,6 +316,7 @@ function ChatsLauncher() {
          </div>
        </Panel>
      </div>
+    </div>
  );
 }

@@ -1,8 +1,8 @@
 "use client";

-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Award, Clock, Copy, ExternalLink, Loader2, Lock } from "lucide-react";
 import { http, toUserError } from "@/lib/api";
 import type { Certificate } from "@/lib/types";
@@ -17,9 +17,6 @@ type MineCertificateResponse = {

 export function ProfileCertificateSlot() {
  const router = useRouter();
-  const qc = useQueryClient();
-  const [issuing, setIssuing] = useState(false);
-  const autoIssueTried = useRef(false);

  const { data, isLoading, isError, error, refetch } = useQuery({
    queryKey: ["me", "certificate"],
@@ -29,18 +26,6 @@ export function ProfileCertificateSlot() {
  const cert = data?.certificate ?? null;
  const eligible = !!data?.eligible;

-  // Auto-issue once when the student becomes eligible (same path as /cap).
-  useEffect(() => {
-    if (!eligible || cert || autoIssueTried.current) return;
-    autoIssueTried.current = true;
-    setIssuing(true);
-    void http
-      .post<{ certificate: Certificate }>("/api/me/certificate/issue", {})
-      .then(() => qc.invalidateQueries({ queryKey: ["me", "certificate"] }))
-      .catch((e) => toast.error(toUserError(e, "صدور خودکار گواهینامه ممکن نشد — دستی تلاش کنید")))
-      .finally(() => setIssuing(false));
-  }, [eligible, cert, qc]);
-
  const copyLink = async () => {
    if (!cert?.publicId) return;
    const url = `${window.location.origin}/c/${cert.publicId}`;
@@ -57,21 +42,6 @@ export function ProfileCertificateSlot() {
    router.push(`/c/${cert.publicId}`);
  };

-  const claim = async () => {
-    setIssuing(true);
-    try {
-      const res = await http.post<{ certificate: Certificate }>("/api/me/certificate/issue", {});
-      await qc.invalidateQueries({ queryKey: ["me", "certificate"] });
-      if (res.certificate?.publicId) {
-        router.push(`/c/${res.certificate.publicId}`);
-      }
-    } catch (e) {
-      toast.error(toUserError(e, "صدور گواهینامه ممکن نشد"));
-    } finally {
-      setIssuing(false);
-    }
-  };
-
  return (
    <section
      aria-label="جایگاه گواهینامه"
@@ -94,7 +64,7 @@ export function ProfileCertificateSlot() {
            تلاش دوباره
          </Button>
        </div>
-      ) : isLoading || (eligible && !cert && issuing) ? (
+      ) : isLoading ? (
        <div className="flex items-center gap-2 py-3 text-xs text-muted-foreground">
          <Loader2 className="h-3.5 w-3.5 animate-spin" />
          در حال بارگذاری…
@@ -132,14 +102,14 @@ export function ProfileCertificateSlot() {
          </div>
        </div>
      ) : eligible ? (
-        <div className="space-y-2.5">
-          <p className="text-[11px] leading-relaxed text-muted-foreground">
-            دوره را تمام کرده‌اید. گواهینامه دیجیتال آمادهٔ صدور است.
+        <div className="flex items-start gap-2 rounded-lg border border-border/70 bg-background/60 px-3 py-2.5">
+          <Clock className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
+          <div>
+            <p className="text-[11px] font-bold text-foreground">در انتظار تأیید</p>
+            <p className="mt-0.5 text-[10px] leading-relaxed text-muted-foreground">
+              درخواست گواهینامه ثبت شد و پس از بررسی توسط تیم آموزش صادر می‌شود.
            </p>
-          <Button type="button" size="sm" className="h-8 w-full" disabled={issuing} onClick={() => void claim()}>
-            {issuing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Award className="h-3.5 w-3.5" />}
-            دریافت گواهینامه
-          </Button>
+          </div>
        </div>
      ) : (
        <div
@@ -125,6 +125,8 @@ export function VideoPlayer({
  const [seekIndicator, setSeekIndicator] = useState<"back" | null>(null);

  const hideTimer = useRef<number | null>(null);
+  const settingsPanelRef = useRef<HTMLDivElement>(null);
+  const settingsBtnRef = useRef<HTMLButtonElement>(null);

  // ── Utilities ───────────────────────────────────────────────────────────────
  const warnSeekBlocked = useCallback(() => {
@@ -161,7 +163,6 @@ export function VideoPlayer({

  const poke = useCallback(() => {
    setUiIdle(false);
-    setSettingsOpen(false);
    if (hideTimer.current) window.clearTimeout(hideTimer.current);
    const v = videoRef.current;
    if (v && !v.paused && !v.ended) {
@@ -202,6 +203,12 @@ export function VideoPlayer({
    if (v) v.playbackRate = s;
  }, []);

+  const cycleSpeed = useCallback(() => {
+    const idx = ALLOWED_SPEEDS.indexOf(userSpeedRef.current);
+    const next = ALLOWED_SPEEDS[(idx + 1) % ALLOWED_SPEEDS.length];
+    changeSpeed(next);
+  }, [changeSpeed]);
+
  const toggleAmbient = useCallback(() => {
    setAmbientMode((prev) => {
      writeStorage("pargar:ambient", !prev);
@@ -485,6 +492,19 @@ export function VideoPlayer({
    return () => window.removeEventListener("keydown", onKey);
  }, [toggle, skipBack, warnSeekBlocked, poke, toggleFullscreen]);

+  // ── Settings click-outside close ────────────────────────────────────────────
+  useEffect(() => {
+    if (!settingsOpen) return;
+    const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (settingsPanelRef.current?.contains(target)) return;
+      if (settingsBtnRef.current?.contains(target)) return;
+      setSettingsOpen(false);
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, [settingsOpen]);
+
  // ── Cleanup timers ──────────────────────────────────────────────────────────
  useEffect(() => {
    return () => {
@@ -588,13 +608,21 @@ export function VideoPlayer({
  const VolumeIcon = muted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;

  return (
-    <div className={cn("space-y-4", theaterMode && "max-w-none")}>
+    <div
+      className={cn(
+        "space-y-4",
+        // Theater mode: break out of the page's max-w container with a full-bleed trick
+        theaterMode && "relative left-1/2 right-1/2 -mx-[50vw] w-screen",
+      )}
+    >
      {/* ── Player container ─── */}
      <div
        ref={containerRef}
        className={cn(
-          "group relative overflow-hidden rounded-xl border border-border bg-black shadow-soft",
-          theaterMode && "rounded-none border-x-0",
+          "group relative overflow-hidden bg-black shadow-soft",
+          theaterMode
+            ? "rounded-none border-y border-border"
+            : "rounded-xl border border-border",
        )}
        onMouseMove={poke}
        onPointerDown={handlePointerDown}
@@ -777,8 +805,13 @@ export function VideoPlayer({
              <input type="range" min={0} max={1} step={0.05} value={muted ? 0 : volume} onChange={(e) => { const v = parseFloat(e.target.value); setVolume(v); if (v > 0 && muted) setMuted(false); }} className="h-1 w-16 cursor-pointer accent-white opacity-80 hover:opacity-100" aria-label="میزان صدا" />
            </div>

-            {/* Speed pill */}
-            <button type="button" onClick={() => setSettingsOpen((o) => !o)} className="inline-flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-2 text-xs font-bold text-white transition hover:bg-white/20 min-h-[44px]" title="تنظیمات">
+            {/* Speed pill — click cycles through speeds */}
+            <button
+              type="button"
+              onClick={cycleSpeed}
+              title={`سرعت پخش: ${speed}× — کلیک برای تغییر`}
+              className="inline-flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-2 text-xs font-bold text-white transition hover:bg-white/20 min-h-[44px]"
+            >
              <Gauge className="h-4 w-4" />
              <span>{speed}×</span>
            </button>
@@ -789,9 +822,16 @@ export function VideoPlayer({
            {/* Watched pct */}
            <span className="hidden text-xs text-white/70 sm:inline">{Math.round(watchedPct)}٪</span>

-            {/* Settings gear */}
-            <button type="button" onClick={() => setSettingsOpen((o) => !o)} className="rounded-full bg-white/10 p-2.5 text-white transition hover:bg-white/20 min-w-[44px] min-h-[44px] flex items-center justify-center" title="تنظیمات (settings)">
-              <Settings className={cn("h-5 w-5 transition-transform", settingsOpen && "rotate-45")} />
+            {/* Settings gear — opens ambient / global settings only */}
+            <button
+              ref={settingsBtnRef}
+              type="button"
+              onClick={() => setSettingsOpen((o) => !o)}
+              className="rounded-full bg-white/10 p-2.5 text-white transition hover:bg-white/20 min-w-[44px] min-h-[44px] flex items-center justify-center"
+              title="تنظیمات پخش"
+              aria-expanded={settingsOpen}
+            >
+              <Settings className={cn("h-5 w-5 transition-transform duration-200", settingsOpen && "rotate-45")} />
            </button>

            {/* Theater mode */}
@@ -806,27 +846,31 @@ export function VideoPlayer({
          </div>
        </div>

-        {/* Settings flyout */}
+        {/* Settings flyout — anchored above the controls bar, closes only on outside click */}
        <AnimatePresence>
          {settingsOpen && (
            <motion.div
+              ref={settingsPanelRef}
              key="settings"
-              initial={{ opacity: 0, y: 8, scale: 0.96 }}
+              initial={{ opacity: 0, y: 6, scale: 0.97 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: 8, scale: 0.96 }}
-              transition={{ duration: 0.15 }}
-              className="absolute bottom-[5.5rem] end-3 z-30 min-w-[180px] rounded-xl border border-white/10 bg-black/90 p-2 text-sm text-white backdrop-blur-md"
+              exit={{ opacity: 0, y: 6, scale: 0.97 }}
+              transition={{ duration: 0.13 }}
+              className="absolute bottom-[4.5rem] end-3 z-40 min-w-[200px] rounded-xl border border-white/10 bg-neutral-900/95 p-2 text-sm text-white shadow-xl backdrop-blur-md"
+              onPointerDown={(e) => e.stopPropagation()}
            >
-              {/* Playback speed */}
-              <p className="mb-1 px-2 text-[11px] font-bold uppercase tracking-widest text-white/50">سرعت پخش</p>
-              <div className="mb-3 flex flex-wrap gap-1">
+              <p className="mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-white/40">تنظیمات پخش</p>
+
+              {/* Speed picker (full grid) */}
+              <p className="mb-1 px-2 text-[11px] font-semibold text-white/60">سرعت</p>
+              <div className="mb-2 grid grid-cols-3 gap-1">
                {ALLOWED_SPEEDS.map((s) => (
                  <button
                    key={s}
                    type="button"
-                    onClick={() => changeSpeed(s)}
+                    onClick={() => { changeSpeed(s); setSettingsOpen(false); }}
                    className={cn(
-                      "rounded-lg px-3 py-1.5 text-xs font-bold transition-colors min-h-[36px]",
+                      "rounded-lg py-1.5 text-xs font-bold transition-colors",
                      speed === s
                        ? "bg-primary text-primary-foreground"
                        : "bg-white/10 hover:bg-white/20",
@@ -836,17 +880,20 @@ export function VideoPlayer({
                  </button>
                ))}
              </div>
+
+              <div className="my-1.5 border-t border-white/10" />
+
              {/* Ambient toggle */}
              <button
                type="button"
                onClick={toggleAmbient}
                className={cn(
-                  "flex w-full items-center gap-2 rounded-lg px-2 py-2 text-xs font-bold transition-colors min-h-[40px]",
+                  "flex w-full items-center gap-2 rounded-lg px-2 py-2 text-xs font-bold transition-colors",
                  ambientMode ? "bg-primary/20 text-primary" : "hover:bg-white/10",
                )}
              >
-                <Zap className="h-4 w-4" />
-                حالت محیطی (Ambient)
+                <Zap className="h-4 w-4 shrink-0" />
+                <span>حالت محیطی</span>
                <span className={cn("ms-auto text-[10px]", ambientMode ? "text-primary" : "text-white/40")}>
                  {ambientMode ? "فعال" : "غیرفعال"}
                </span>
@@ -873,7 +920,10 @@ export function VideoPlayer({
      </div>

      {/* ── Progress strip below player ─── */}
-      <div className="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-border bg-card p-4">
+      <div className={cn(
+        "flex flex-wrap items-center justify-between gap-4 rounded-xl border border-border bg-card p-4",
+        theaterMode && "mx-auto max-w-5xl px-6",
+      )}>
        <div className="min-w-0 flex-1">
          <p className="text-sm font-medium">پیشرفت تماشای تاییدشده</p>
          <p className="text-xs text-muted-foreground">