feat(chat): add private message unlock flow

2026-06-23 13:21:57 +08:00
parent c9d75b6fe6
commit ebd44c4980
20 changed files with 455 additions and 29 deletions
@@ -0,0 +1,38 @@
+"use client";
+
+import { LockKeyhole } from "lucide-react";
+
+import styles from "./private-message-card.module.css";
+
+export interface PrivateMessageCardProps {
+  hint?: string | null;
+  isUnlocking?: boolean;
+  onUnlock?: () => void;
+}
+
+export function PrivateMessageCard({
+  hint,
+  isUnlocking = false,
+  onUnlock,
+}: PrivateMessageCardProps) {
+  return (
+    <div className={styles.card} role="group" aria-label="Locked private message">
+      <div className={styles.iconWrap} aria-hidden="true">
+        <LockKeyhole className={styles.icon} size={22} />
+      </div>
+      <p className={styles.hint}>
+        {hint && hint.length > 0
+          ? hint
+          : "Elio has a private message for you."}
+      </p>
+      <button
+        type="button"
+        className={styles.button}
+        disabled={isUnlocking || !onUnlock}
+        onClick={onUnlock}
+      >
+        {isUnlocking ? "Unlocking..." : "Unlock private message"}
+      </button>
+    </div>
+  );
+}