fix app direction: no more app loops

2026-05-19 21:50:36 +08:00
parent bad60cbf91
commit 76f1b8298a
11 changed files with 0 additions and 0 deletions
@@ -0,0 +1,120 @@
+"use client";
+
+import { MessageSquare, Trash2, MoreHorizontal } from "lucide-react";
+
+function generateMockMessages() {
+  const messages = [
+    {
+      id: 1,
+      character: "Luna",
+      avatar: "🌙",
+      preview: "That sounds interesting...",
+      timestamp: "2 hours ago",
+      unread: true,
+    },
+    {
+      id: 2,
+      character: "Alex",
+      avatar: "⚡",
+      preview: "Hey! How have you been?",
+      timestamp: "5 hours ago",
+      unread: false,
+    },
+    {
+      id: 3,
+      character: "Sage",
+      avatar: "🧙",
+      preview: "The ancient prophecy speaks of...",
+      timestamp: "Yesterday",
+      unread: false,
+    },
+    {
+      id: 4,
+      character: "Nova",
+      avatar: "✨",
+      preview: "Ready for another space adventure?",
+      timestamp: "2 days ago",
+      unread: false,
+    },
+    {
+      id: 5,
+      character: "Echo",
+      avatar: "🔮",
+      preview: "I sensed something in the shadows...",
+      timestamp: "3 days ago",
+      unread: false,
+    },
+    {
+      id: 6,
+      character: "Storm",
+      avatar: "⛈️",
+      preview: "The journey awaits us!",
+      timestamp: "1 week ago",
+      unread: false,
+    },
+  ];
+
+  return messages;
+}
+
+export default function MessagesPage() {
+  const messages = generateMockMessages();
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-2">Messages</h1>
+        <p className="text-gray-600">Your conversations with characters</p>
+      </div>
+
+      {/* Messages List */}
+      <div className="space-y-2">
+        {messages.map((msg) => (
+          <div
+            key={msg.id}
+            className={`border border-gray-200 rounded-xl p-4 hover:bg-gray-50 cursor-pointer transition flex items-center gap-4 group ${
+              msg.unread ? "bg-blue-50" : "bg-white"
+            }`}
+          >
+            {/* Avatar */}
+            <div className="w-12 h-12 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 rounded-full flex items-center justify-center text-xl flex-shrink-0">
+              {msg.avatar}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 mb-1">
+                <h3 className="font-semibold">{msg.character}</h3>
+                {msg.unread && <div className="w-2 h-2 bg-blue-600 rounded-full"></div>}
+              </div>
+              <p className="text-sm text-gray-600 truncate">{msg.preview}</p>
+            </div>
+
+            {/* Meta */}
+            <div className="text-right flex-shrink-0">
+              <p className="text-xs text-gray-500 mb-2">{msg.timestamp}</p>
+              <div className="opacity-0 group-hover:opacity-100 transition flex gap-2">
+                <button className="p-2 hover:bg-gray-200 rounded-lg transition">
+                  <MoreHorizontal className="w-4 h-4" />
+                </button>
+                <button className="p-2 hover:bg-red-100 text-red-600 rounded-lg transition">
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Empty State */}
+      {messages.length === 0 && (
+        <div className="text-center py-16">
+          <MessageSquare className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+          <h3 className="text-lg font-semibold mb-2">No messages yet</h3>
+          <p className="text-gray-600">Start a conversation with a character!</p>
+        </div>
+      )}
+    </div>
+  );
+}