<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>校园墙 Pro - 自定义Logo版</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.2.1/compressor.min.js"></script>
    <script src="./js/tailwindcss.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/supabase.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        'bounce-short': 'bounce-short 0.5s ease-in-out 1',
                        'fade-in-up': 'fadeInUp 0.3s ease-out forwards',
                    },
                    keyframes: {
                        'bounce-short': {
                            '0%, 100%': { transform: 'scale(1)' },
                            '50%': { transform: 'scale(1.2)' },
                        },
                        fadeInUp: {
                            'from': { opacity: '0', transform: 'translateY(10px)' },
                            'to': { opacity: '1', transform: 'translateY(0)' },
                        }
                    }
                }
            }
        }
    </script>

    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f3f4f6; -webkit-tap-highlight-color: transparent; }
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
        .safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom) + 70px); }
        [v-cloak] { display: none !important; }
        .premium-border { position: relative; z-index: 0; }
        .premium-border::before { content: ''; position: absolute; z-index: -1; inset: -2px; background: linear-gradient(45deg, #ff00cc, #333399, #00ccff); background-size: 200% 200%; animation: border-flow 3s ease infinite; border-radius: 14px; opacity: 0.7; }
        .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; }
        @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        @keyframes border-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .custom-scroll::-webkit-scrollbar { width: 4px; }
        .custom-scroll::-webkit-scrollbar-track { background: transparent; }
        .custom-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
    </style>
</head>
<body>
    <div id="app" class="min-h-screen flex flex-col" v-cloak>
        
        <div class="fixed top-4 left-1/2 transform -translate-x-1/2 z-[300] flex flex-col items-center space-y-2 pointer-events-none">
            <transition-group enter-active-class="transition ease-out duration-300" enter-from-class="transform -translate-y-5 opacity-0" leave-active-class="transition ease-in duration-200" leave-to-class="opacity-0 scale-90">
                <div v-for="toast in toasts" :key="toast.id" :class="toast.type === 'error' ? 'bg-red-500' : 'bg-gray-800'" class="text-white px-6 py-2.5 rounded-full shadow-xl flex items-center space-x-2 text-sm font-medium backdrop-blur-md bg-opacity-90">
                    <i :class="toast.type === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'"></i>
                    <span>{{ toast.msg }}</span>
                </div>
            </transition-group>
        </div>

        <nav class="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-200 shadow-sm transition-all duration-300">
            <div class="max-w-5xl mx-auto px-4 h-14 flex justify-between items-center">
                <div class="flex items-center space-x-2 cursor-pointer" @click="goHome">
                    <img src="./img/ico_tit.png" class="w-8 h-8 rounded-lg shadow-lg object-cover" onerror="this.src='https://via.placeholder.com/64?text=Logo'">
                    <span class="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">小酒盅</span>
                </div>
                
                <div class="flex items-center space-x-4">
                    <button v-if="user" @click="showPostModal = true" class="hidden md:block bg-gray-900 hover:bg-black text-white px-4 py-1.5 rounded-full text-xs font-bold transition shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                        <i class="fas fa-plus mr-1"></i> 发帖
                    </button>

                    <div v-if="user" @click="activeTab = 'mine'" class="cursor-pointer flex items-center group relative">
                        <div :class="activeTab === 'mine' ? 'ring-2 ring-blue-500 ring-offset-2' : ''" class="w-9 h-9 bg-gradient-to-tr from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-md transition-all duration-200 group-hover:scale-105">
                            {{ getUserDisplay()[0].toUpperCase() }}
                        </div>
                        <span v-if="activeTab !== 'mine'" class="absolute -bottom-1 -right-1 w-3 h-3 bg-white rounded-full flex items-center justify-center">
                            <span class="w-1.5 h-1.5 bg-gray-300 rounded-full group-hover:bg-blue-500 transition-colors"></span>
                        </span>
                    </div>

                    <button v-else @click="showLoginModal = true" class="text-blue-600 font-bold hover:bg-blue-50 px-3 py-1.5 rounded-full transition text-sm">
                        登录
                    </button>
                </div>
            </div>
        </nav>

        <main class="flex-1 w-full max-w-5xl mx-auto p-4 safe-bottom md:py-6">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
                
                <div class="hidden md:block md:col-span-3 sticky top-20">
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-4">
                        <div class="p-4">
                            <div class="space-y-1">
                                <button @click="goHome" :class="activeTab === 'home' ? 'bg-blue-50 text-blue-600 font-bold' : 'text-gray-600 hover:bg-gray-50'" class="w-full text-left px-4 py-3 rounded-xl text-sm transition flex items-center"><i class="fas fa-compass w-6 text-center mr-3"></i> 广场动态</button>
                                <button v-if="user" @click="activeTab = 'mine'" :class="activeTab === 'mine' ? 'bg-blue-50 text-blue-600 font-bold' : 'text-gray-600 hover:bg-gray-50'" class="w-full text-left px-4 py-3 rounded-xl text-sm transition flex items-center"><i class="fas fa-user w-6 text-center mr-3"></i> 个人中心</button>
                                <button v-if="user" @click="activeTab = 'chat'" :class="activeTab === 'chat' ? 'bg-blue-50 text-blue-600 font-bold' : 'text-gray-600 hover:bg-gray-50'" class="w-full text-left px-4 py-3 rounded-xl text-sm transition flex items-center justify-between">
                                    <div class="flex items-center"><i class="fas fa-comment-alt w-6 text-center mr-3"></i> 消息</div>
                                    <span v-if="unreadCount > 0" class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">{{ unreadCount }}</span>
                                </button>
                            </div>
                            
                            <a :href="donateUrl" target="_blank" class="w-full mt-4 bg-pink-50 text-pink-500 hover:bg-pink-100 px-4 py-2.5 rounded-xl font-bold text-sm transition flex items-center justify-center border border-pink-100 hover:shadow-sm">
                                <i class="fas fa-bolt mr-2"></i> 咖啡吧
                            </a>

                            <button v-if="user" @click="logout" class="w-full mt-2 text-left px-4 py-2 text-xs text-gray-400 hover:text-red-500 rounded-xl transition flex items-center justify-center">
                                退出登录
                            </button>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <p class="text-[10px] text-gray-400">如有任何问题或建议，请发送邮件至<br>minecraftdragon666@outlook.com</p>
                    </div>
                </div>

                <div class="col-span-1 md:col-span-9 min-h-[80vh]">
                    
                    <div v-if="activeTab === 'home' || activeTab === 'mine'">
                        
                        <div v-if="activeTab === 'mine'" class="mb-6 animate-fade-in-up">
                            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col md:flex-row items-center md:items-start gap-6 relative overflow-hidden">
                                <div class="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-bl-full -mr-10 -mt-10 opacity-50 pointer-events-none"></div>
                                <div class="w-20 h-20 bg-gradient-to-tr from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-3xl font-bold text-white shadow-lg z-10">
                                    {{ getUserDisplay()[0].toUpperCase() }}
                                </div>
                                <div class="text-center md:text-left flex-1 z-10">
                                    <div class="flex items-center justify-center md:justify-start gap-2">
                                        <div v-if="!editingProfile" class="flex items-center">
                                            <h2 class="text-2xl font-bold text-gray-800">{{ getUserDisplay() }}</h2>
                                            <button @click="startEditProfile" class="ml-2 text-gray-400 hover:text-blue-600 transition"><i class="fas fa-pen text-xs"></i></button>
                                        </div>
                                        <div v-else class="flex items-center animate-fade-in-up">
                                            <input v-model="tempNickname" type="text" class="bg-gray-100 border border-blue-200 rounded-lg px-2 py-1 text-sm text-gray-800 outline-none w-32 font-bold" placeholder="新昵称">
                                            <button @click="saveProfile" class="ml-2 text-blue-600 hover:bg-blue-50 px-2 py-1 rounded-lg text-xs font-bold transition">保存</button>
                                            <button @click="editingProfile = false" class="ml-1 text-gray-400 hover:text-gray-600 px-2 py-1 text-xs">取消</button>
                                        </div>
                                    </div>
                                    
                                    <p class="text-gray-400 text-sm mt-1">
                                        小酒盅 | {{ user.email && user.email.endsWith('@campus.wall') ? '手机用户' : '邮箱用户' }}
                                    </p>
                                    
                                    <div class="flex justify-center md:justify-start gap-6 mt-4">
                                        <div class="text-center"><div class="text-xl font-bold text-gray-800">{{ myPosts.length }}</div><div class="text-xs text-gray-400">动态</div></div>
                                        <div class="text-center"><div class="text-xl font-bold text-gray-800">{{ myTotalLikes }}</div><div class="text-xs text-gray-400">获赞</div></div>
                                    </div>
                                    
                                    <div class="md:hidden mt-4">
                                        <a :href="donateUrl" target="_blank" class="inline-flex bg-pink-50 text-pink-500 hover:bg-pink-100 px-4 py-2 rounded-full font-bold text-xs transition items-center border border-pink-100">
                                            <i class="fas fa-bolt mr-1"></i> 支持开发者
                                        </a>
                                    </div>
                                </div>
                                <button @click="logout" class="md:hidden absolute top-4 right-4 bg-gray-100 text-gray-500 px-3 py-1 rounded-full text-xs hover:bg-red-50 hover:text-red-500 transition font-bold">退出</button>
                            </div>
                        </div>

                        <div v-if="activeTab === 'home'" class="sticky top-[58px] z-40 bg-[#f3f4f6]/95 backdrop-blur py-2 mb-2 flex space-x-2 overflow-x-auto hide-scroll">
                            <button v-for="cat in categories" :key="cat.id" @click="activeCategory = cat.id" 
                                :class="activeCategory === cat.id ? 'bg-gray-900 text-white shadow-lg scale-105' : 'bg-white text-gray-600 border border-gray-200 shadow-sm'"
                                class="px-5 py-2 rounded-full text-xs font-bold whitespace-nowrap transition transform active:scale-95">
                                {{ cat.name }}
                            </button>
                        </div>

                        <div v-if="loading" class="space-y-4">
                            <div v-for="i in 3" :key="i" class="bg-white p-5 rounded-2xl shadow-sm border border-gray-100">
                                <div class="flex items-center space-x-3 mb-4">
                                    <div class="w-10 h-10 rounded-full skeleton"></div>
                                    <div class="flex-1 space-y-2"><div class="w-1/3 h-4 rounded skeleton"></div><div class="w-1/4 h-3 rounded skeleton"></div></div>
                                </div>
                                <div class="w-full h-24 rounded-xl skeleton mb-4"></div>
                                <div class="flex justify-between"><div class="w-16 h-4 rounded skeleton"></div><div class="w-16 h-4 rounded skeleton"></div></div>
                            </div>
                        </div>

                        <div v-else class="space-y-5 pb-20">
                            <div v-if="displayPosts.length === 0" class="text-center py-20">
                                <div class="bg-white w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm">
                                    <i class="fas fa-wind text-4xl text-gray-300"></i>
                                </div>
                                <p class="text-gray-500 font-medium">{{ activeTab === 'mine' ? '你还没有发布过内容' : '这里空空如也' }}</p>
                                <button v-if="activeTab === 'mine'" @click="showPostModal = true" class="mt-4 text-blue-600 font-bold hover:underline">去发布第一条动态</button>
                            </div>

                            <div v-for="post in displayPosts" :key="post.id" class="bg-white rounded-2xl shadow-sm border transition duration-200 hover:shadow-md" :class="post.pinned_until > Date.now() ? 'border-transparent premium-border' : 'border-gray-100'">
                                <div class="p-5 relative bg-white rounded-2xl h-full">
                                    <div class="flex justify-between items-start mb-3">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white mr-2" :class="getAvatarColor(post.author_name)">
                                                {{ post.author_name ? post.author_name[0] : '匿' }}
                                            </div>
                                            <div>
                                                <div class="flex items-center">
                                                    <span class="font-bold text-gray-800 text-sm mr-2">{{ post.author_name || '匿名同学' }}</span>
                                                    <span v-if="post.pinned_until > Date.now()" class="bg-gradient-to-r from-yellow-400 to-orange-400 text-white text-[10px] px-1.5 py-0.5 rounded font-bold shadow-sm mr-1">置顶</span>
                                                    <span :class="getCatColor(post.category)" class="text-white text-[10px] px-1.5 py-0.5 rounded opacity-80">{{ getCatName(post.category) }}</span>
                                                </div>
                                                <div class="text-[10px] text-gray-400">{{ formatTimeAgo(post.created_at) }}</div>
                                            </div>
                                        </div>
                                        <button v-if="user && post.user_id === user.id" @click="deletePost(post.id)" class="text-gray-300 hover:text-red-500 transition px-2"><i class="fas fa-trash-alt"></i></button>
                                    </div>
                                    
                                    <p class="text-gray-800 text-[15px] leading-relaxed mb-3 whitespace-pre-wrap">{{ post.content }}</p>
                                    
                                    <div v-if="post.image_url" class="mb-4 group relative inline-block overflow-hidden rounded-xl border border-gray-100">
                                        <img :src="post.image_url" loading="lazy" @click.stop="previewImage(post.image_url)" class="max-h-64 object-cover cursor-zoom-in transition duration-500 group-hover:scale-105">
                                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition pointer-events-none"></div>
                                    </div>

                                    <div class="flex justify-between items-center border-t border-gray-50 pt-3 mt-2">
                                        <div class="flex space-x-6">
                                            <button @click="toggleLike(post)" :class="isLiked(post.id) ? 'text-pink-500' : 'text-gray-400 hover:text-pink-500'" class="flex items-center space-x-1.5 transition group">
                                                <i :class="[isLiked(post.id) ? 'fas' : 'far', isLiked(post.id) ? 'animate-bounce-short' : '']" class="fa-heart text-lg"></i>
                                                <span class="text-xs font-bold">{{ post.likes || 0 }}</span>
                                            </button>
                                            <button @click="toggleComments(post.id)" class="flex items-center space-x-1.5 text-gray-400 hover:text-blue-500 transition">
                                                <i class="far fa-comment-dots text-lg"></i>
                                                <span class="text-xs font-bold">{{ (postComments[post.id] || []).length > 0 ? (postComments[post.id] || []).length : '评论' }}</span>
                                            </button>
                                        </div>
                                        <button v-if="user?.id !== post.user_id" @click="startChat(post.user_id, post.author_name)" class="text-xs bg-gray-100 text-gray-600 px-3 py-1.5 rounded-full font-bold hover:bg-blue-100 hover:text-blue-600 transition flex items-center">
                                            私信 <i class="fas fa-angle-right ml-1"></i>
                                        </button>
                                    </div>
                                </div>

                                <div v-if="expandedPosts.includes(post.id)" class="bg-gray-50/50 border-t border-gray-100 p-4 animate-fade-in-up rounded-b-2xl">
                                    <div v-if="postComments[post.id] && postComments[post.id].length > 0" class="space-y-3 mb-4 max-h-60 overflow-y-auto pr-1 custom-scroll">
                                        <div v-for="comment in postComments[post.id]" :key="comment.id" class="flex gap-2 text-xs group">
                                            <span class="font-bold text-gray-700 whitespace-nowrap">{{ comment.author_name || '匿名同学' }}:</span>
                                            <span class="text-gray-600 flex-1 break-words">{{ comment.content }}</span>
                                            <button v-if="user && user.id === comment.user_id" @click="deleteComment(post.id, comment.id)" class="text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition"><i class="fas fa-times"></i></button>
                                        </div>
                                    </div>
                                    <div class="flex gap-2 relative items-center">
                                        <input v-model="commentAuthors[post.id]" type="text" placeholder="昵称" class="w-20 bg-white border border-gray-200 rounded-full px-3 py-2 text-xs outline-none focus:border-blue-500 transition text-center text-gray-600 placeholder-gray-400" title="选填，不填则显示匿名">
                                        <input v-model="commentInputs[post.id]" type="text" placeholder="写下你的评论..." class="flex-1 bg-white border border-gray-200 rounded-full px-4 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition" @keyup.enter="submitComment(post.id)">
                                        <button @click="submitComment(post.id)" class="text-blue-600 font-bold text-sm px-2 hover:bg-blue-50 rounded-lg transition">发送</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="md:hidden text-center mt-12 pb-6 border-t border-gray-200/50 pt-6">
                                <p class="text-[10px] text-gray-300 font-bold mb-1">如有任何问题或建议，请发送邮件至</p>
                                <p class="text-[10px] text-gray-400 font-mono select-all">minecraftdragon666@outlook.com</p>
                            </div>
                            </div>
                    </div>
					
                    <div v-if="activeTab === 'chat'" class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden h-[calc(100vh-140px)] flex">
                        <div class="w-full md:w-1/3 border-r border-gray-100 flex flex-col bg-gray-50" :class="{'hidden md:flex': currentChatUser}">
                            <div class="p-4 font-bold text-gray-700 bg-white border-b border-gray-100 shadow-sm z-10">私信列表</div>
                            <div class="flex-1 overflow-y-auto">
                                <div v-if="contacts.length === 0" class="text-center py-10 text-gray-400 text-xs">暂无私信记录</div>
                                <div v-for="c in contacts" :key="c.id" @click="openChatWindow(c)" :class="currentChatUser?.id === c.id ? 'bg-white border-l-4 border-blue-500 shadow-sm' : 'hover:bg-white border-l-4 border-transparent'" class="p-4 cursor-pointer transition border-b border-gray-100/50">
                                    <div class="flex justify-between items-center mb-1"><span class="font-bold text-gray-800 text-sm">{{ c.name }}</span><span class="text-[10px] text-gray-300">{{ formatTimeAgo(c.created_at) }}</span></div>
                                    <div class="text-xs text-gray-500 truncate">{{ c.lastMsg || '点击查看消息' }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-2/3 flex flex-col bg-white" :class="{'hidden md:flex': !currentChatUser}">
                            <div v-if="!currentChatUser" class="flex-1 flex flex-col items-center justify-center text-gray-300">
                                <i class="far fa-paper-plane text-5xl mb-4 opacity-50"></i>
                                <p class="text-sm">选择左侧联系人开始聊天</p>
                            </div>
                            <div v-else class="flex flex-col h-full">
                                <div class="h-14 px-4 bg-white border-b border-gray-100 flex items-center justify-between shadow-sm z-20">
                                    <div class="flex items-center">
                                        <button @click="currentChatUser = null" class="md:hidden mr-3 text-gray-600 hover:bg-gray-100 p-1 rounded-full"><i class="fas fa-arrow-left"></i></button>
                                        <div class="font-bold text-gray-800">{{ currentChatUser.name }}</div>
                                    </div>
                                </div>
                                <div class="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50" id="msgContainer">
                                    <div v-for="msg in chatMessages" :key="msg.id" class="flex" :class="msg.sender_id === user.id ? 'justify-end' : 'justify-start'">
                                        <div :class="msg.sender_id === user.id ? 'bg-blue-600 text-white rounded-br-none' : 'bg-white text-gray-800 border border-gray-200 rounded-bl-none shadow-sm'" class="max-w-[80%] px-4 py-2.5 rounded-2xl text-sm break-words animate-fade-in-up">{{ msg.content }}</div>
                                    </div>
                                </div>
                                <div class="p-3 bg-white border-t border-gray-100 flex items-center space-x-2">
                                    <input v-model="inputMsg" @keyup.enter="sendMsg" type="text" placeholder="输入消息..." class="flex-1 bg-gray-100 rounded-full px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-blue-100 transition">
                                    <button @click="sendMsg" :disabled="!inputMsg.trim()" class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center disabled:bg-gray-300 disabled:cursor-not-allowed hover:bg-blue-700 transition shadow-lg transform active:scale-95"><i class="fas fa-paper-plane text-xs"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <nav class="md:hidden fixed bottom-0 w-full bg-white/95 backdrop-blur border-t border-gray-200 flex justify-around items-center pb-[env(safe-area-inset-bottom)] pt-2 z-40 text-[10px] font-medium text-gray-400">
            <button @click="goHome" :class="activeTab === 'home' ? 'text-blue-600' : ''" class="flex flex-col items-center p-2 w-16 transition">
                <i class="fas fa-compass text-xl mb-1" :class="activeTab === 'home' ? 'animate-bounce-short' : ''"></i><span>广场</span>
            </button>
            <button @click="user ? showPostModal = true : showLoginModal = true" class="w-12 h-12 bg-gray-900 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-gray-400/50 active:scale-90 transition -mt-5 border-4 border-[#f3f4f6]">
                <i class="fas fa-plus text-xl"></i>
            </button>
            <button v-if="user" @click="activeTab = 'chat'" :class="activeTab === 'chat' ? 'text-blue-600' : ''" class="flex flex-col items-center p-2 w-16 transition relative">
                <i class="fas fa-comment-dots text-xl mb-1" :class="activeTab === 'chat' ? 'animate-bounce-short' : ''"></i>
                <span>消息</span>
                <span v-if="unreadCount > 0" class="absolute top-1 right-3 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
            </button>
            <button v-else @click="showLoginModal = true" class="flex flex-col items-center p-2 w-16">
                <i class="fas fa-comment-dots text-xl mb-1"></i><span>消息</span>
            </button>
        </nav>

        <transition enter-active-class="transition duration-300 ease-out" enter-from-class="opacity-0 scale-95" leave-active-class="transition duration-200 ease-in" leave-to-class="opacity-0 scale-95">
            <div v-show="fullScreenImage" class="fixed inset-0 z-[200] bg-black/95 backdrop-blur-sm flex items-center justify-center p-2" @click="closePreview">
                <img :src="fullScreenImage" class="max-w-full max-h-full rounded-lg shadow-2xl object-contain" @click.stop>
                <button class="absolute top-8 right-6 w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white hover:bg-white/30 transition backdrop-blur-md" @click="closePreview"><i class="fas fa-times"></i></button>
            </div>
        </transition>

        <div v-if="showLoginModal" class="fixed inset-0 z-[100] flex items-center justify-center p-6">
            <div class="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity" @click="showLoginModal = false"></div>
            <div class="relative bg-white w-full max-w-sm rounded-3xl p-8 shadow-2xl transform transition-all animate-fade-in-up">
                
                <div class="flex justify-center mb-6 border-b border-gray-100 pb-2">
                    <button @click="loginMethod = 'phone'" :class="loginMethod === 'phone' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-400'" class="pb-2 px-6 font-bold transition">手机登录</button>
                    <button @click="loginMethod = 'email'" :class="loginMethod === 'email' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-400'" class="pb-2 px-6 font-bold transition">邮箱登录</button>
                </div>
                
                <div v-if="loginMethod === 'phone'" class="space-y-4 animate-fade-in-up">
                    <div class="bg-gray-50 border border-transparent focus-within:bg-white focus-within:border-blue-500 rounded-xl p-3 flex items-center transition">
                        <div class="text-gray-500 font-bold border-r border-gray-300 pr-3 mr-3">+86</div>
                        <input v-model="authForm.phone" type="tel" placeholder="请输入手机号" class="flex-1 bg-transparent outline-none font-medium">
                    </div>
                    <div class="bg-gray-50 border border-transparent focus-within:bg-white focus-within:border-blue-500 rounded-xl p-3 flex items-center transition">
                        <i class="fas fa-lock text-gray-400 mr-3 ml-1"></i>
                        <input v-model="authForm.password" type="password" placeholder="请输入密码" class="flex-1 bg-transparent outline-none font-medium">
                    </div>
                </div>

                <div v-if="loginMethod === 'email'" class="space-y-4 animate-fade-in-up">
                    <div class="bg-gray-50 border border-transparent focus-within:bg-white focus-within:border-blue-500 rounded-xl p-3 flex items-center transition">
                        <i class="fas fa-envelope text-gray-400 mr-3 ml-1"></i>
                        <input v-model="authForm.email" type="email" placeholder="请输入邮箱" class="flex-1 bg-transparent outline-none font-medium">
                    </div>
                    <div class="bg-gray-50 border border-transparent focus-within:bg-white focus-within:border-blue-500 rounded-xl p-3 flex items-center transition">
                        <i class="fas fa-lock text-gray-400 mr-3 ml-1"></i>
                        <input v-model="authForm.password" type="password" placeholder="请输入密码" class="flex-1 bg-transparent outline-none font-medium">
                    </div>
                </div>

                <div class="flex gap-4 mt-8">
                    <button @click="handleAuth('login')" class="flex-1 bg-gray-900 text-white py-3.5 rounded-xl font-bold hover:bg-black hover:shadow-lg transition">登录</button>
                    <button @click="handleAuth('register')" class="flex-1 bg-white border border-gray-200 text-gray-700 py-3.5 rounded-xl font-bold hover:bg-gray-50 transition">注册</button>
                </div>
            </div>
        </div>
        
        <div v-if="showPostModal" class="fixed inset-0 z-[100] flex items-end md:items-center justify-center sm:p-4 pb-0 md:pb-4">
            <div class="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showPostModal = false"></div>
            <div class="relative bg-white w-full md:w-[580px] rounded-t-3xl md:rounded-2xl shadow-2xl animate-fade-in-up max-h-[85vh] flex flex-col overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-100 flex justify-between items-center bg-white z-10 shrink-0">
                    <h3 class="font-bold text-lg text-gray-800">发布新动态</h3>
                    <button @click="showPostModal = false" class="w-8 h-8 rounded-full bg-gray-50 hover:bg-gray-100 flex items-center justify-center transition text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
                </div>
                <div class="p-5 overflow-y-auto custom-scroll flex-1">
                    <div class="flex gap-4">
                        <div class="hidden md:flex w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 text-white rounded-full items-center justify-center font-bold shadow-sm shrink-0">{{ getUserDisplay()[0].toUpperCase() }}</div>
                        <div class="flex-1 w-full">
                            <div class="mb-4 flex items-center bg-gray-50/80 rounded-xl px-4 py-2 border border-transparent focus-within:bg-white focus-within:border-blue-200 transition"><i class="fas fa-user-tag text-gray-400 mr-3 text-sm"></i><input v-model="newPost.author" type="text" placeholder="设置昵称 (默认: 匿名同学)" class="bg-transparent text-sm w-full outline-none text-gray-700 font-medium"></div>
                            <textarea v-model="newPost.content" class="w-full bg-gray-50/80 hover:bg-white focus:bg-white border border-transparent focus:border-blue-200 rounded-xl p-4 mb-4 outline-none min-h-[120px] transition resize-none text-base leading-relaxed" placeholder="分享校园里的新鲜事..."></textarea>
                            <div v-if="imagePreview" class="mb-2 relative rounded-xl overflow-hidden bg-gray-50 border border-gray-100 group">
                                <div class="absolute top-2 left-2 bg-black/60 text-white text-[10px] px-2 py-1 rounded backdrop-blur-md z-10 shadow-sm"><span v-if="compressionStats">压缩: {{ compressionStats.before }} -> <span class="text-green-400 font-bold">{{ compressionStats.after }}</span></span><span v-else>图片处理中...</span></div>
                                <img :src="imagePreview" class="w-full h-48 object-cover"><button @click="clearImage" class="absolute top-2 right-2 bg-white/90 text-gray-700 rounded-full w-7 h-7 flex items-center justify-center shadow-md hover:text-red-500 transition opacity-80 group-hover:opacity-100"><i class="fas fa-trash-alt text-xs"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-4 bg-gray-50 border-t border-gray-100 shrink-0">
                    <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                         <div class="flex items-center w-full md:w-auto gap-3 overflow-x-auto hide-scroll pb-1 md:pb-0">
                            <label class="cursor-pointer text-gray-600 hover:text-blue-600 transition flex items-center px-3 py-2 rounded-xl bg-white border border-gray-200 hover:border-blue-200 hover:bg-blue-50 flex-shrink-0 shadow-sm active:scale-95"><i class="fas fa-image text-lg mr-2 text-blue-500"></i> <span class="text-xs font-bold">配图</span><input type="file" accept="image/*" class="hidden" @change="handleFileSelect"></label>
                            <div class="flex bg-white rounded-xl border border-gray-200 p-1 shadow-sm flex-shrink-0"><button v-for="cat in categories.slice(1)" :key="cat.id" @click="newPost.category = cat.id" :class="newPost.category === cat.id ? 'bg-blue-100 text-blue-700 shadow-sm' : 'text-gray-500 hover:bg-gray-50'" class="px-3 py-1.5 rounded-lg text-xs font-bold transition whitespace-nowrap">{{ cat.name }}</button></div>
                         </div>
                         <div class="flex items-center w-full md:w-auto gap-3 border-t md:border-t-0 border-gray-200 pt-3 md:pt-0">
                             <button @click="submitPost" :disabled="submitting || uploadingImage" class="flex-1 md:flex-none bg-gray-900 hover:bg-black text-white px-8 py-2.5 rounded-xl font-bold shadow-lg shadow-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition flex items-center justify-center min-w-[100px] active:scale-95"><i v-if="submitting" class="fas fa-spinner fa-spin mr-2"></i>{{ submitting ? (uploadingImage ? '处理图片...' : '发布中') : '发布' }}</button>
                         </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        const { createApp, ref, computed, onMounted, nextTick, watch } = Vue;
        createApp({
            setup() {
                // ================= 配置区 =================
                const SUPABASE_URL = 'https://ygjzvoqqstbqcjtrsayw.supabase.co'; 
                const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inlnanp2b3Fxc3RicWNqdHJzYXl3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3Njk3Nzg1NTMsImV4cCI6MjA4NTM1NDU1M30.1euggQ6iafBTZpf8Sbm5cKvYGA4z-q2yUu1HA9FiRlI'; 
                
                // 🔴 🔴 🔴 在这里填入你的爱发电主页链接 (或任何其他收款页链接) 🔴 🔴 🔴
                const DONATE_URL = 'https://afdian.com/item/3f4f2ace037311f19b2152540025c377';
                // ==========================================
               
                const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
                const user = ref(null);
                const activeTab = ref('home');
                
                const categories = [
                    { id: 'all', name: '全部' },
                    { id: 'misc', name: '讨论交流' },
                    { id: 'lost', name: '寻物&招领' },
                    { id: 'confess', name: '表白墙' }
                ];
                
                const activeCategory = ref('all');
                const posts = ref([]);
                const loading = ref(true);
                const contacts = ref([]);
                const currentChatUser = ref(null);
                const chatMessages = ref([]);
                const inputMsg = ref('');
                const unreadCount = ref(0);
                const toasts = ref([]);
                
                const showLoginModal = ref(false);
                const showPostModal = ref(false);
                const loginMethod = ref('phone');
                const authForm = ref({phone:'', email:'', password:''});
                
                const newPost = ref({content:'', category:'misc', author: '', isPinnedRequest: false});
                const submitting = ref(false);
                const likedPosts = ref(JSON.parse(localStorage.getItem('cw_liked') || '[]'));
                const fullScreenImage = ref(null);
                
                const selectedFile = ref(null);
                const imagePreview = ref(null);
                const uploadingImage = ref(false);
                const compressionStats = ref(null);

                const expandedPosts = ref([]); 
                const postComments = ref({});
                const commentInputs = ref({});
                const commentAuthors = ref({}); 

                const editingProfile = ref(false);
                const tempNickname = ref('');

                const sensitiveWords = ref([]);

                const loadSensitiveWords = async () => {
                    try {
                        const response = await fetch('./sensitive_words.txt');
                        if (!response.ok) throw new Error('无法读取敏感词文件');
                        const text = await response.text();
                        sensitiveWords.value = text.split('\n').map(line => line.trim()).filter(line => line);
                    } catch (error) {
                        console.error('敏感词加载失败:', error);
                        sensitiveWords.value = ['坏蛋', '笨蛋', '傻瓜', '垃圾', '混蛋', '暴力', '色情', '赌博']; 
                    }
                };

                const validateText = async (text) => {
                    if (!text) return { valid: true };
                    for (const word of sensitiveWords.value) {
                        if (text.includes(word)) return { valid: false, msg: `内容包含敏感词: "${word}"，请文明发言` };
                    }
                    return { valid: true };
                };

                const showToast = (msg, type = 'success') => {
                    const id = Date.now();
                    toasts.value.push({ id, msg, type });
                    setTimeout(() => { toasts.value = toasts.value.filter(t => t.id !== id); }, 3000);
                };

                const formatSize = (bytes) => {
                    if(bytes === 0) return '0 B';
                    const k = 1024, sizes = ['B', 'KB', 'MB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
                };

                onMounted(async () => {
                    loadSensitiveWords();
                    const { data } = await supabase.auth.getSession();
                    user.value = data.session?.user || null;
                    if(user.value) updateDefaultNicknames();

                    supabase.auth.onAuthStateChange((_, _session) => { 
                        user.value = _session?.user || null; 
                        if(user.value) { fetchContacts(); subscribeToMessages(); updateDefaultNicknames(); }
                    });
                    fetchPosts();
                    if(user.value) { fetchContacts(); subscribeToMessages(); }
                });

                const updateDefaultNicknames = () => {
                    const nick = getUserDisplay();
                    newPost.value.author = nick; 
                };

                const fetchPosts = async () => {
                    loading.value = true;
                    setTimeout(async () => {
                        let { data } = await supabase.from('posts').select('*').order('created_at', { ascending: false });
                        posts.value = data || [];
                        loading.value = false;
                    }, 500);
                };

                const handleAuth = async (type) => { 
                    let emailToUse = '';
                    if (loginMethod.value === 'phone') {
                        if(!authForm.value.phone || !authForm.value.password) return showToast('请输入手机号和密码', 'error');
                        emailToUse = authForm.value.phone + '@campus.wall';
                    } else {
                        if(!authForm.value.email || !authForm.value.password) return showToast('请输入邮箱和密码', 'error');
                        emailToUse = authForm.value.email;
                    }
                    const { data, error } = type === 'register' 
                        ? await supabase.auth.signUp({ email: emailToUse, password: authForm.value.password, options: { data: { nickname: '新同学' } } }) 
                        : await supabase.auth.signInWithPassword({ email: emailToUse, password: authForm.value.password });
                    
                    if(!error) { 
                        showLoginModal.value = false; showToast('欢迎回来');
                        if(type === 'register') showToast('注册成功', 'success');
                    } else showToast(error.message, 'error');
                };

                const getUserDisplay = () => {
                    if(!user.value) return '未登录';
                    if(user.value.user_metadata?.nickname) return user.value.user_metadata.nickname;
                    if(user.value.email && user.value.email.endsWith('@campus.wall')) return user.value.email.split('@')[0];
                    return user.value.email.split('@')[0];
                };

                const startEditProfile = () => { tempNickname.value = getUserDisplay(); editingProfile.value = true; };

                const saveProfile = async () => {
                    if(!tempNickname.value.trim()) return showToast('昵称不能为空', 'error');
                    const check = await validateText(tempNickname.value);
                    if (!check.valid) return showToast(check.msg, 'error');
                    const { data, error } = await supabase.auth.updateUser({ data: { nickname: tempNickname.value } });
                    if(error) showToast('保存失败: ' + error.message, 'error');
                    else { user.value = data.user; editingProfile.value = false; updateDefaultNicknames(); showToast('昵称修改成功'); }
                };

                const handleFileSelect = (event) => {
                    const file = event.target.files[0];
                    if (!file) return;
                    const originalSize = file.size;
                    new Compressor(file, {
                        quality: 0.6, maxWidth: 1600,
                        success(result) { selectedFile.value = result; imagePreview.value = URL.createObjectURL(result); compressionStats.value = { before: formatSize(originalSize), after: formatSize(result.size) }; },
                        error(err) { console.error(err); showToast('图片处理失败', 'error'); },
                    });
                };

                const clearImage = () => { selectedFile.value = null; imagePreview.value = null; compressionStats.value = null; };
                
                const submitPost = async () => { 
                    if(!user.value) return showLoginModal.value = true;
                    if(!newPost.value.content && !selectedFile.value) return showToast('写点内容或发张图吧', 'error');
                    
                    const contentCheck = await validateText(newPost.value.content);
                    if (!contentCheck.valid) return showToast(contentCheck.msg, 'error');
                    const authorCheck = await validateText(newPost.value.author);
                    if (!authorCheck.valid) return showToast(authorCheck.msg, 'error');

                    submitting.value = true;
                    let finalImageUrl = null;
                    
                    if (selectedFile.value) {
                        uploadingImage.value = true;
                        const fileName = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}.jpg`;
                        const { data, error: uploadError } = await supabase.storage.from('post_images').upload(fileName, selectedFile.value);
                        if (uploadError) { showToast('上传失败: ' + uploadError.message, 'error'); submitting.value = false; uploadingImage.value = false; return; }
                        const { data: { publicUrl } } = supabase.storage.from('post_images').getPublicUrl(fileName);
                        finalImageUrl = publicUrl;
                        uploadingImage.value = false;
                    }

                    const { error } = await supabase.from('posts').insert({
                        content: newPost.value.content || '', category: newPost.value.category, 
                        author_name: newPost.value.author || getUserDisplay(), image_url: finalImageUrl,
                        pinned_until: null, 
                        user_id: user.value.id 
                    });

                    if (error) showToast(error.message, 'error'); 
                    else { newPost.value.content = ''; clearImage(); showPostModal.value = false; fetchPosts(); showToast('发布成功！'); }
                    submitting.value = false;
                };

                const toggleComments = async (postId) => {
                    if (expandedPosts.value.includes(postId)) expandedPosts.value = expandedPosts.value.filter(id => id !== postId);
                    else {
                        expandedPosts.value.push(postId);
                        if (!postComments.value[postId]) {
                            const { data } = await supabase.from('comments').select('*').eq('post_id', postId).order('created_at', { ascending: true });
                            postComments.value[postId] = data || [];
                        }
                    }
                };

                const submitComment = async (postId) => {
                    if (!user.value) return showLoginModal.value = true;
                    const content = commentInputs.value[postId];
                    const author = commentAuthors.value[postId] ? commentAuthors.value[postId].trim() : getUserDisplay();
                    if (!content || !content.trim()) return;

                    const contentCheck = await validateText(content);
                    if (!contentCheck.valid) return showToast(contentCheck.msg, 'error');
                    const authorCheck = await validateText(author);
                    if (!authorCheck.valid) return showToast(authorCheck.msg, 'error');

                    const { error } = await supabase.from('comments').insert({ post_id: postId, content: content, author_name: author, user_id: user.value.id });
                    if (!error) {
                        commentInputs.value[postId] = '';
                        const { data } = await supabase.from('comments').select('*').eq('post_id', postId).order('created_at', { ascending: true });
                        postComments.value[postId] = data || [];
                    } else showToast('评论失败', 'error');
                };

                const deleteComment = async (postId, cId) => {
                    if(confirm('确认删除?')) {
                        await supabase.from('comments').delete().eq('id', cId);
                        postComments.value[postId] = postComments.value[postId].filter(c => c.id !== cId);
                    }
                };
                
                const toggleLike = async (post) => { 
                    // 1. 立即更新前端状态（乐观更新）
                    if(likedPosts.value.includes(post.id)) { 
                        post.likes--; 
                        likedPosts.value = likedPosts.value.filter(x => x !== post.id); 
                    } else { 
                        post.likes++; 
                        likedPosts.value.push(post.id); 
                    }
                    localStorage.setItem('cw_liked', JSON.stringify(likedPosts.value));

                    // 2. 发送请求给后端
                    // 使用之前配置的安全 RPC 函数
                    const { error } = await supabase.rpc('increment_likes', { row_id: post.id });

                    if (error) {
                        console.error('点赞失败', error);
                        // 如果失败，回滚前端状态
                        post.likes--; 
                    }
                };

                const deletePost = async (id) => { if(confirm('确定删除这条动态吗?')) { await supabase.from('posts').delete().eq('id',id); fetchPosts(); showToast('删除成功'); } };
                
                const fetchContacts = async () => {
                    if (!user.value) return;
                    const { data } = await supabase.from('messages').select('*').or(`sender_id.eq.${user.value.id},receiver_id.eq.${user.value.id}`).order('created_at', { ascending: false });
                    if (!data) return;
                    const map = new Map();
                    for (const msg of data) {
                        const otherId = msg.sender_id === user.value.id ? msg.receiver_id : msg.sender_id;
                        if (!map.has(otherId)) {
                            const knownPost = posts.value.find(p => p.user_id === otherId);
                            map.set(otherId, { id: otherId, name: knownPost?.author_name || '神秘同学', lastMsg: msg.content, created_at: msg.created_at });
                        }
                    }
                    contacts.value = Array.from(map.values());
                };
                const openChatWindow = async (u) => { currentChatUser.value = u; fetchChatMessages(u.id); };
                const fetchChatMessages = async (targetId) => {
                    const { data } = await supabase.from('messages').select('*').or(`and(sender_id.eq.${user.value.id},receiver_id.eq.${targetId}),and(sender_id.eq.${targetId},receiver_id.eq.${user.value.id})`).order('created_at', { ascending: true });
                    chatMessages.value = data || []; scrollToBottom();
                };
                const startChat = (uid, uname) => {
                    if(!user.value) return showLoginModal.value = true;
                    activeTab.value = 'chat';
                    const target = contacts.value.find(c => c.id === uid) || { id: uid, name: uname || '神秘同学' };
                    currentChatUser.value = target; fetchChatMessages(uid);
                };
                const sendMsg = async () => {
                    if (!inputMsg.value.trim()) return;
                    const check = await validateText(inputMsg.value);
                    if (!check.valid) return showToast(check.msg, 'error');
                    const txt = inputMsg.value; inputMsg.value = '';
                    chatMessages.value.push({ id: Date.now(), sender_id: user.value.id, content: txt }); scrollToBottom();
                    await supabase.from('messages').insert({ sender_id: user.value.id, receiver_id: currentChatUser.value.id, content: txt });
                    fetchContacts();
                };
                const subscribeToMessages = () => {
                    supabase.channel('public:messages').on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, payload => {
                        if (payload.new.receiver_id === user.value.id) {
                            if (currentChatUser.value && currentChatUser.value.id === payload.new.sender_id) { chatMessages.value.push(payload.new); scrollToBottom(); } 
                            else { unreadCount.value++; showToast('收到一条新私信'); }
                            fetchContacts();
                        }
                    }).subscribe();
                };
                const scrollToBottom = () => nextTick(() => { const c = document.getElementById('msgContainer'); if (c) c.scrollTop = c.scrollHeight; });

                const displayPosts = computed(() => {
                    let list = posts.value;
                    if (activeTab.value === 'mine') { if (!user.value) return []; list = list.filter(p => p.user_id === user.value.id); } 
                    else if (activeCategory.value !== 'all') list = list.filter(p => p.category === activeCategory.value);
                    return list.sort((a, b) => (b.pinned_until || 0) - (a.pinned_until || 0));
                });

                const myPosts = computed(() => user.value ? posts.value.filter(p => p.user_id === user.value.id) : []);
                const myTotalLikes = computed(() => myPosts.value.reduce((sum, p) => sum + (p.likes || 0), 0));
                
                const getCatColor = (c) => ({ confess:'bg-pink-500', lost:'bg-blue-500', misc:'bg-purple-500' }[c] || 'bg-gray-400');
                const getCatName = (c) => ({ all:'全部', confess:'表白墙', lost:'寻物&招领', misc:'讨论交流' }[c] || '贴');
                
                const getAvatarColor = (name) => {
                    const colors = ['bg-red-400', 'bg-blue-400', 'bg-green-400', 'bg-yellow-400', 'bg-purple-400', 'bg-pink-400'];
                    return colors[(name?.length || 0) % colors.length];
                };
                const formatTimeAgo = (dateStr) => {
                    const diff = (new Date() - new Date(dateStr)) / 1000;
                    if (diff < 60) return '刚刚';
                    if (diff < 3600) return Math.floor(diff/60) + '分钟前';
                    if (diff < 86400) return Math.floor(diff/3600) + '小时前';
                    return new Date(dateStr).toLocaleDateString();
                };

                return {
                    user, activeTab, categories, activeCategory, displayPosts, loading,
                    contacts, currentChatUser, chatMessages, inputMsg, unreadCount,
                    showLoginModal, showPostModal, authForm, loginMethod, donateUrl: DONATE_URL,
                    newPost, submitting, uploadingImage,
                    selectedFile, imagePreview, compressionStats, toasts,
                    handleFileSelect, clearImage, submitPost, handleAuth,
                    startChat, openChatWindow, sendMsg, deletePost, toggleLike,
                    myPosts, myTotalLikes, getCatColor, getCatName, getAvatarColor, formatTimeAgo,
                    fullScreenImage, previewImage: (url)=>fullScreenImage.value=url, closePreview: ()=>fullScreenImage.value=null,
                    expandedPosts, postComments, commentInputs, toggleComments, submitComment, deleteComment,
                    commentAuthors, getUserDisplay, editingProfile, tempNickname, startEditProfile, saveProfile,
                    goHome: () => { activeTab.value = 'home'; activeCategory.value = 'all'; },
                    logout: async () => { await supabase.auth.signOut(); window.location.reload(); },
                    isLiked: (id) => likedPosts.value.includes(id)
                };
            }
        }).mount('#app');
    </script>
</body>
</html>