feat: implement 8 features across full stack

- Leaderboard: rank-based percentile tiers (champion/gold/silver/bronze),
    deterministic tie-breaking (xp DESC, user_id ASC)
  - Mentor chat: md: breakpoints, safe-area-inset-bottom padding
  - Learning progress: server-side progressPct, curriculum expansion safety
  - Physical orders: hard-disabled with 410 Gone
  - Certificate approval: pending/issued flow, admin issue/revoke endpoints,
    certificate_requires_approval setting (migration 0031)
  - Draft/publish: is_published on lessons and chapters, admin publish UI
    (migration 0030)
  - Video panel: static thumbnails (no preload), client-side pagination
  - Rich editor: TipTap + tiptap-markdown for lesson descriptions,
    marked + DOMPurify for SafeMarkdown rendering

frontend/src/components/ui/rich-editor.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
+import { Bold, Code, Heading2, Heading3, Italic, List, ListOrdered } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+export function RichEditor({ value, onChange, placeholder, className }: Props) {
+  const [tab, setTab] = useState<"edit" | "preview">("edit");
+  const [preview, setPreview] = useState("");
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ codeBlock: false }),
+      Placeholder.configure({ placeholder: placeholder ?? "توضیحات را اینجا بنویسید…" }),
+      Markdown.configure({ transformPastedText: true }),
+    ],
+    content: value,
+    immediatelyRender: false,
+    onUpdate({ editor: e }) {
+      const md = e.storage.markdown?.getMarkdown?.() ?? e.getText();
+      onChange(md);
+    },
+  });
+
+  // Sync external value changes (e.g. when a new lesson is loaded).
+  useEffect(() => {
+    if (!editor) return;
+    const current = editor.storage.markdown?.getMarkdown?.() ?? editor.getText();
+    if (current !== value) {
+      editor.commands.setContent(value, false);
+    }
+  }, [value, editor]);
+
+  useEffect(() => {
+    if (tab !== "preview") return;
+    import("marked").then(async ({ marked }) => {
+      const DOMPurify = (await import("dompurify")).default;
+      const html = await marked(value);
+      setPreview(DOMPurify.sanitize(html));
+    });
+  }, [tab, value]);
+
+  const ToolBtn = ({
+    onClick,
+    active,
+    title,
+    children,
+  }: {
+    onClick: () => void;
+    active?: boolean;
+    title: string;
+    children: React.ReactNode;
+  }) => (
+    <button
+      type="button"
+      onMouseDown={(e) => {
+        e.preventDefault();
+        onClick();
+      }}
+      title={title}
+      className={cn(
+        "grid h-7 w-7 place-items-center rounded transition-colors",
+        active
+          ? "bg-primary/15 text-primary"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+      )}
+    >
+      {children}
+    </button>
+  );
+
+  return (
+    <div className={cn("rounded-md border border-input bg-background", className)}>
+      {/* Tab bar */}
+      <div className="flex items-center justify-between gap-1 border-b border-input px-2 py-1">
+        <div className="flex gap-0.5">
+          {editor && (
+            <>
+              <ToolBtn
+                onClick={() => editor.chain().focus().toggleBold().run()}
+                active={editor.isActive("bold")}
+                title="توپر"
+              >
+                <Bold className="h-3.5 w-3.5" />
+              </ToolBtn>
+              <ToolBtn
+                onClick={() => editor.chain().focus().toggleItalic().run()}
+                active={editor.isActive("italic")}
+                title="مورب"
+              >
+                <Italic className="h-3.5 w-3.5" />
+              </ToolBtn>
+              <ToolBtn
+                onClick={() => editor.chain().focus().toggleCode().run()}
+                active={editor.isActive("code")}
+                title="کد درون‌خطی"
+              >
+                <Code className="h-3.5 w-3.5" />
+              </ToolBtn>
+              <ToolBtn
+                onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                active={editor.isActive("heading", { level: 2 })}
+                title="سرتیتر ۲"
+              >
+                <Heading2 className="h-3.5 w-3.5" />
+              </ToolBtn>
+              <ToolBtn
+                onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+                active={editor.isActive("heading", { level: 3 })}
+                title="سرتیتر ۳"
+              >
+                <Heading3 className="h-3.5 w-3.5" />
+              </ToolBtn>
+              <ToolBtn
+                onClick={() => editor.chain().focus().toggleBulletList().run()}
+                active={editor.isActive("bulletList")}
+                title="فهرست"
+              >
+                <List className="h-3.5 w-3.5" />
+              </ToolBtn>
+              <ToolBtn
+                onClick={() => editor.chain().focus().toggleOrderedList().run()}
+                active={editor.isActive("orderedList")}
+                title="فهرست عددی"
+              >
+                <ListOrdered className="h-3.5 w-3.5" />
+              </ToolBtn>
+            </>
+          )}
+        </div>
+        <div className="flex gap-1 text-xs">
+          <button
+            type="button"
+            onClick={() => setTab("edit")}
+            className={cn(
+              "rounded px-2 py-0.5 transition-colors",
+              tab === "edit" ? "bg-primary/15 text-primary font-medium" : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            ویرایش
+          </button>
+          <button
+            type="button"
+            onClick={() => setTab("preview")}
+            className={cn(
+              "rounded px-2 py-0.5 transition-colors",
+              tab === "preview" ? "bg-primary/15 text-primary font-medium" : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            پیش‌نمایش
+          </button>
+        </div>
+      </div>
+
+      {/* Editor / Preview */}
+      {tab === "edit" ? (
+        <EditorContent
+          editor={editor}
+          dir="auto"
+          className="prose prose-sm max-w-none px-3 py-2 text-sm focus-within:outline-none [&_.ProseMirror]:min-h-[80px] [&_.ProseMirror]:outline-none [&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground/50 [&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.ProseMirror_p.is-editor-empty:first-child::before]:float-right [&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none"
+        />
+      ) : (
+        <div
+          dir="auto"
+          className="prose prose-sm max-w-none px-3 py-2 text-sm"
+          dangerouslySetInnerHTML={{ __html: preview || "<p class='text-muted-foreground text-sm'>پیش‌نمایشی نیست.</p>" }}
+        />
+      )}
+    </div>
+  );
+}