feat: release v0.1.3 chat, profiles, and media

Keep read receipts for the other person only, and let photos, voice, and files stay cached until they are actually replaced.

frontend/src/app/login/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { 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 { CheckCircle2, Loader2, ShieldCheck, Timer, Zap } from "lucide-react";
 import { BrandMark } from "@/components/brand-mark";
 import { useAuth } from "@/lib/auth-store";
 import { http, toUserError } from "@/lib/api";
@@ -15,6 +15,7 @@ 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";
+import { CaptchaField, type CaptchaChallenge } from "@/components/captcha-field";
 
 const perks = [
   { icon: Timer, text: "زمان تماشای راستی‌آزمایی‌شده — بدون میان‌بر" },
@@ -22,11 +23,6 @@ const perks = [
   { icon: CheckCircle2, text: "لیگ هفتگی، رویداد زنده و منتور یک‌به‌یک" },
 ];
 
-type CaptchaChallenge = {
-  challengeId: string;
-  imageBase64: string;
-};
-
 export default function LoginPage() {
   const router = useRouter();
   const setSession = useAuth((s) => s.setSession);
@@ -34,7 +30,7 @@ export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [captchaAnswer, setCaptchaAnswer] = useState("");
   const [challenge, setChallenge] = useState<CaptchaChallenge | null>(null);
-  const [captchaLoading, setCaptchaLoading] = useState(true);
+  const [captchaKey, setCaptchaKey] = useState(0);
   const [rememberMe, setRememberMe] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -44,29 +40,11 @@ export default function LoginPage() {
     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();
+      setCaptchaKey((k) => k + 1);
       return;
     }
     setLoading(true);
@@ -83,7 +61,7 @@ export default function LoginPage() {
       router.push("/cap");
     } catch (err) {
       setError(toUserError(err, "ورود ناموفق بود"));
-      void loadCaptcha();
+      setCaptchaKey((k) => k + 1);
     } finally {
       setLoading(false);
     }
@@ -153,54 +131,14 @@ export default function LoginPage() {
                   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>
+              <CaptchaField
+                key={captchaKey}
+                id="captcha"
+                value={captchaAnswer}
+                onChange={setCaptchaAnswer}
+                onChallenge={setChallenge}
+                onError={setError}
+              />
               <label className="flex items-center justify-between gap-3 text-sm">
                 <span>مرا به یاد داشته باش</span>
                 <Switch
@@ -215,7 +153,7 @@ export default function LoginPage() {
                 variant="gradient"
                 className="h-12 w-full"
                 size="lg"
-                disabled={loading || captchaLoading || !challenge}
+                disabled={loading || !challenge}
               >
                 {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Zap className="h-4 w-4" />} ورود
               </Button>

frontend/src/app/profile/[id]/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import type { ReactNode } from "react";
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { Flame, Heart, Sparkles, User as UserIcon } from "lucide-react";
+import { http, toUserError } from "@/lib/api";
+import { useAuth } from "@/lib/auth-store";
+import type { PublicProfile } from "@/lib/types";
+import { Panel } from "@/components/panel";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { UserAvatar, avatarPropsOf } from "@/components/ui/user-avatar";
+import { formatFaNumber, formatStreakLabel } from "@/lib/utils";
+
+const AdminProfileManage = dynamic(
+  () => import("@/components/admin/profile-manage").then((m) => m.AdminProfileManage),
+  { ssr: false },
+);
+
+function roleLabel(role: string) {
+  if (role === "mentor") return "منتور";
+  if (role === "admin") return "ادمین";
+  return "هنرجو";
+}
+
+export default function PublicProfilePage() {
+  const params = useParams<{ id: string }>();
+  const id = Number(params.id);
+  const enabled = Number.isFinite(id) && id > 0;
+  const isAdmin = useAuth((s) => s.user?.role === "admin");
+
+  const profileQ = useQuery({
+    queryKey: ["public-profile", id],
+    queryFn: () => http.get<{ user: PublicProfile }>(`/api/users/${id}`),
+    enabled,
+    retry: 1,
+  });
+
+  if (!enabled) {
+    return (
+      <div className="mx-auto max-w-2xl py-16 text-center text-sm text-muted-foreground">
+        کاربر پیدا نشد.
+      </div>
+    );
+  }
+
+  if (profileQ.isPending) {
+    return (
+      <div className="mx-auto max-w-2xl space-y-4" aria-busy="true" aria-label="در حال بارگذاری پروفایل">
+        <Skeleton className="h-40 rounded-2xl" />
+        <div className="grid gap-3 sm:grid-cols-2">
+          {[0, 1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-20 rounded-2xl" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (profileQ.isError || !profileQ.data?.user) {
+    return (
+      <div className="mx-auto max-w-2xl space-y-4 py-16 text-center">
+        <p className="text-sm font-bold text-destructive">
+          {toUserError(profileQ.error, "کاربر پیدا نشد")}
+        </p>
+        <Button asChild variant="outline">
+          <Link href="/unwrap">بازگشت</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const person = profileQ.data.user;
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <Panel
+        title={person.name}
+        description={roleLabel(person.role)}
+        icon={<UserIcon className="h-5 w-5" />}
+        tint="bg-primary/10 text-primary"
+      >
+        <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
+          <UserAvatar name={person.name} className="h-20 w-20" {...avatarPropsOf(person)} />
+          <div className="min-w-0 flex-1 space-y-2 text-center sm:text-start">
+            <h1 className="text-2xl font-black tracking-tight">{person.name}</h1>
+            <p className="font-latin text-sm font-bold" dir="ltr">
+              @{person.username}
+            </p>
+            {person.isLocked && (
+              <p className="text-xs font-bold text-destructive">حساب قفل است</p>
+            )}
+          </div>
+        </div>
+      </Panel>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <Stat icon={<Sparkles className="h-4 w-4 text-gold" />} label="امتیاز" value={formatFaNumber(person.xp)} />
+        <Stat icon={<Heart className="h-4 w-4 text-destructive" />} label="قلب‌ها" value={formatFaNumber(person.hearts)} />
+        <Stat
+          icon={<Flame className="h-4 w-4 text-accent" />}
+          label="زنجیرهٔ فعلی"
+          value={formatStreakLabel(person.streakCurrent)}
+        />
+        <Stat
+          icon={<Flame className="h-4 w-4 text-muted-foreground" />}
+          label="بلندترین زنجیره"
+          value={formatStreakLabel(person.streakLongest)}
+        />
+      </div>
+
+      {isAdmin && <AdminProfileManage userId={person.id} />}
+    </div>
+  );
+}
+
+function Stat({ icon, label, value }: { icon: ReactNode; label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-3 rounded-2xl border border-border bg-card px-4 py-3">
+      {icon}
+      <div>
+        <p className="text-[11px] font-bold text-muted-foreground">{label}</p>
+        <p className="text-lg font-black tabular-nums">{value}</p>
+      </div>
+    </div>
+  );
+}