\n \n\n\n",[],[126,146],"9b4ecfd0-38b3-11f1-aa9f-42b51c65c3df","api.ts","9b4ed070-38b3-11f1-aa9f-42b51c65c3df",8,["D",1776247948100],"const BASE = \"\";\n\nasync function req(url: string, opts?: RequestInit) {\n const res = await fetch(BASE + url, { ...opts, credentials: \"include\" });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Request failed\");\n return data;\n}\n\nexport const api = {\n register: (username: string, password: string) =>\n req(\"/api/register\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ username, password }) }),\n login: (username: string, password: string) =>\n req(\"/api/login\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ username, password }) }),\n logout: () => req(\"/api/logout\", { method: \"POST\" }),\n me: () => req(\"/api/me\"),\n getEmojis: (category?: string) => req(`/api/emojis${category && category !== \"All\" ? `?category=${encodeURIComponent(category)}` : \"\"}`),\n getEmoji: (id: number) => req(`/api/emojis/${id}`),\n getCategories: () => req(\"/api/categories\"),\n upload: (formData: FormData) => req(\"/api/emojis/upload\", { method: \"POST\", body: formData }),\n getStats: () => req(\"/api/account/stats\"),\n fileUrl: (key: string) => `/api/file/${key}`,\n downloadUrl: (id: number) => `/api/download/${id}`,\n};\n",[],[126,153],"a25341ee-38b3-11f1-b9fb-42b51c65c3df","App.tsx","a253428e-38b3-11f1-b9fb-42b51c65c3df",9,["D",1776247959878],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"./api.ts\";\nimport { Nav } from \"./components/Nav.tsx\";\nimport { HomePage } from \"./components/HomePage.tsx\";\nimport { SubmitPage } from \"./components/SubmitPage.tsx\";\nimport { AccountPage } from \"./components/AccountPage.tsx\";\nimport { AuthModal } from \"./components/AuthModal.tsx\";\n\ntype Page = \"home\" | \"submit\" | \"account\";\ntype User = { id: number; username: string } | null;\n\nexport function App() {\n const [page, setPage] = useState(\"home\");\n const [user, setUser] = useState(null);\n const [showAuth, setShowAuth] = useState(false);\n const [authMode, setAuthMode] = useState<\"login\" | \"register\">(\"login\");\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n api.me().then(d => { setUser(d.user); setLoading(false); }).catch(() => setLoading(false));\n }, []);\n\n const navigate = useCallback((p: Page) => {\n if ((p === \"submit\" || p === \"account\") && !user) {\n setAuthMode(\"login\");\n setShowAuth(true);\n return;\n }\n setPage(p);\n }, [user]);\n\n const onAuth = (u: any) => {\n setUser(u);\n setShowAuth(false);\n };\n\n const onLogout = async () => {\n await api.logout();\n setUser(null);\n setPage(\"home\");\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n return (\n

{ setAuthMode(\"login\"); setShowAuth(true); }}\n onRegister={() => { setAuthMode(\"register\"); setShowAuth(true); }} />\n

\n {page === \"home\" && }\n {page === \"submit\" && user && setPage(\"home\")} />}\n {page === \"account\" && user && }\n

\n \n {showAuth && (\n setAuthMode(m => m === \"login\" ? \"register\" : \"login\")}\n onClose={() => setShowAuth(false)} onAuth={onAuth} />\n )}\n

\n );\n}\n",[],[126,161],"a887fcd0-38b3-11f1-922c-42b51c65c3df","components","1e871d3f-ddfc-4377-abf7-b5cc2c42c949",10,["D",1776247970282],[175,176,177,178,179,180],[126,169],{"_35":221,"_13":222,"_38":223,"_40":170,"_42":43,"_44":224,"_46":47,"_48":225,"_17":50,"_51":52,"_53":226,"_55":56,"_57":-5,"_83":227,"_18":228},{"_35":213,"_13":214,"_38":215,"_40":170,"_42":43,"_44":216,"_46":47,"_48":217,"_17":50,"_51":52,"_53":218,"_55":56,"_57":-5,"_83":219,"_18":220},{"_35":205,"_13":206,"_38":207,"_40":170,"_42":43,"_44":208,"_46":47,"_48":209,"_17":50,"_51":52,"_53":210,"_55":56,"_57":-5,"_83":211,"_18":212},{"_35":197,"_13":198,"_38":199,"_40":170,"_42":43,"_44":200,"_46":47,"_48":201,"_17":50,"_51":52,"_53":202,"_55":56,"_57":-5,"_83":203,"_18":204},{"_35":189,"_13":190,"_38":191,"_40":170,"_42":43,"_44":192,"_46":47,"_48":193,"_17":62,"_51":52,"_53":194,"_55":56,"_57":-5,"_83":195,"_18":196},{"_35":181,"_13":182,"_38":183,"_40":170,"_42":43,"_44":184,"_46":47,"_48":185,"_17":50,"_51":52,"_53":186,"_55":56,"_57":-5,"_83":187,"_18":188},"ced11336-38b3-11f1-82dd-42b51c65c3df","SubmitPage.tsx","ced113e0-38b3-11f1-82dd-42b51c65c3df",14,["D",1776248034522],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\nconst CATEGORIES = [\n \"General\",\"Smileys\",\"Animals\",\"Food\",\"Activities\",\"Travel\",\"Objects\",\"Symbols\",\"Flags\",\"Memes\",\"Gaming\",\"Anime\",\"Custom\"\n];\n\ninterface SubmitPageProps {\n user: { id: number; username: string };\n onSuccess: () => void;\n}\n\nexport function SubmitPage({ user, onSuccess }: SubmitPageProps) {\n const [file, setFile] = useState(null);\n const [preview, setPreview] = useState(null);\n const [name, setName] = useState(\"\");\n const [tags, setTags] = useState(\"\");\n const [category, setCategory] = useState(\"General\");\n const [description, setDescription] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [success, setSuccess] = useState(false);\n const inputRef = useRef(null);\n\n const handleFileChange = (e: React.ChangeEvent) => {\n const f = e.target.files?.[0];\n if (!f) return;\n if (![\"image/png\", \"image/gif\"].includes(f.type)) {\n setError(\"Only PNG or GIF files are allowed\");\n return;\n }\n if (f.size > 512000) {\n setError(\"File must be under 500KB\");\n return;\n }\n setError(\"\");\n setFile(f);\n const reader = new FileReader();\n reader.onload = (ev) => setPreview(ev.target?.result as string);\n reader.readAsDataURL(f);\n if (!name) setName(f.name.replace(/\\.(png|gif)$/i, \"\"));\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!file) { setError(\"Please select a file\"); return; }\n if (!name.trim()) { setError(\"Name is required\"); return; }\n setError(\"\");\n setLoading(true);\n try {\n const fd = new FormData();\n fd.append(\"file\", file);\n fd.append(\"name\", name.trim());\n fd.append(\"tags\", tags.trim());\n fd.append(\"category\", category);\n fd.append(\"description\", description.trim());\n await api.upload(fd);\n setSuccess(true);\n setTimeout(() => onSuccess(), 1500);\n } catch (err: any) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n };\n\n if (success) {\n return (\n

🎉

Emoji uploaded!

Redirecting to home...

\n );\n }\n\n return (\n

📤 Submit Emoji

Upload a PNG or GIF under 500KB

\n\n

\n {/* File Upload */}\n

inputRef.current?.click()}>\n \n {preview ? (\n

\n $\"Preview\"$ \n {file?.name} ({(file!.size / 1024).toFixed(1)} KB)\n Click to change\n

\n ) : (\n

📁

Click to select a PNG or GIF file

Max 500KB

\n )}\n

\n\n {/* Name */}\n

\n Name *\n setName(e.target.value)} maxLength={32}\n className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm\"\n placeholder=\"e.g. happy_pepe\" required />\n

\n\n {/* Tags */}\n

\n Tags\n setTags(e.target.value)}\n className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm\"\n placeholder=\"happy, pepe, meme (comma separated)\" />\n

\n\n {/* Category */}\n

\n Category\n \n

\n\n {/* Description */}\n

\n Description\n

setDescription(e.target.value)} rows={3}\n            className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm resize-none\"\n            placeholder=\"A short description of this emoji...\" />\n        </div>\n\n        {error && <div className=\"text-red-500 text-sm bg-red-50 px-3 py-2 rounded-lg\">{error}</div>}\n\n        <button type=\"submit\" disabled={loading}\n          className=\"w-full py-3 bg-indigo-500 text-white rounded-xl font-semibold hover:bg-indigo-600 transition-all disabled:opacity-50 text-sm shadow-sm\">\n          {loading ? \"Uploading...\" : \"🚀 Submit Emoji\"}\n        </button>\n      </form>\n    </div>\n  );\n}\n",[],[126,169,182],"eacabc90-38b3-11f1-922c-42b51c65c3df","Nav.tsx","a887cc56-38b3-11f1-922c-42b51c65c3df",16,["D",1776248081443],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface NavProps {\n  page: string;\n  onNavigate: (p: any) => void;\n  user: any;\n  onLogout: () => void;\n  onLogin: () => void;\n  onRegister: () => void;\n}\n\nexport function Nav({ page, onNavigate, user, onLogout, onLogin, onRegister }: NavProps) {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const link = (p: string, label: string, mobile = false) => (\n    <button onClick={() => { onNavigate(p); setMenuOpen(false); }}\n      className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${\n        mobile ? \"w-full text-left\" : \"\"\n      } ${\n        page === p ? \"bg-indigo-500 text-white shadow-md\" : \"text-gray-600 hover:bg-gray-100\"\n      }`}>\n      {label}\n    </button>\n  );\n\n  return (\n    <nav className=\"bg-white border-b border-gray-200 sticky top-0 z-50\">\n      <div className=\"max-w-5xl mx-auto px-4 h-14 flex items-center justify-between\">\n        {/* Logo */}\n        <button onClick={() => { onNavigate(\"home\"); setMenuOpen(false); }} className=\"flex items-center gap-2 group shrink-0\">\n          <span className=\"text-xl\">📈</span>\n          <span className=\"text-lg font-extrabold text-gray-900 group-hover:text-indigo-600 transition-colors hidden sm:inline\">\n            Emoji Stocks\n          </span>\n        </button>\n\n        {/* Desktop Nav */}\n        <div className=\"hidden md:flex items-center gap-1\">\n          {link(\"home\", \"🏠 Home\")}\n          {link(\"submit\", \"📤 Submit\")}\n          {link(\"account\", \"👤 Account\")}\n        </div>\n\n        {/* Desktop Auth */}\n        <div className=\"hidden md:flex items-center gap-2\">\n          {user ? (\n            <div className=\"flex items-center gap-3\">\n              <span className=\"text-sm font-medium text-gray-700\">@{user.username}</span>\n              <button onClick={onLogout}\n                className=\"text-xs px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 hover:bg-red-50 hover:text-red-600 transition-all font-medium\">\n                Logout\n              </button>\n            </div>\n          ) : (\n            <>\n              <button onClick={onLogin}\n                className=\"text-sm px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all font-medium\">\n                Log in\n              </button>\n              <button onClick={onRegister}\n                className=\"text-sm px-4 py-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600 transition-all font-medium shadow-sm\">\n                Sign up\n              </button>\n            </>\n          )}\n        </div>\n\n        {/* Mobile Menu Button */}\n        <button onClick={() => setMenuOpen(!menuOpen)} className=\"md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-lg\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n            {menuOpen\n              ? <><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></>\n              : <><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"/></>}\n          </svg>\n        </button>\n      </div>\n\n      {/* Mobile Menu */}\n      {menuOpen && (\n        <div className=\"md:hidden border-t border-gray-100 bg-white px-4 py-3 space-y-1\">\n          {link(\"home\", \"🏠 Home\", true)}\n          {link(\"submit\", \"📤 Submit\", true)}\n          {link(\"account\", \"👤 Account\", true)}\n          <div className=\"border-t border-gray-100 pt-2 mt-2\">\n            {user ? (\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm font-medium text-gray-700\">@{user.username}</span>\n                <button onClick={() => { onLogout(); setMenuOpen(false); }}\n                  className=\"text-xs px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 font-medium\">\n                  Logout\n                </button>\n              </div>\n            ) : (\n              <div className=\"flex gap-2\">\n                <button onClick={() => { onLogin(); setMenuOpen(false); }}\n                  className=\"flex-1 text-sm py-2 rounded-lg bg-gray-100 text-gray-700 font-medium\">\n                  Log in\n                </button>\n                <button onClick={() => { onRegister(); setMenuOpen(false); }}\n                  className=\"flex-1 text-sm py-2 rounded-lg bg-indigo-500 text-white font-medium\">\n                  Sign up\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </nav>\n  );\n}\n",[],[126,169,190],"b96a0020-38b3-11f1-809f-42b51c65c3df","HomePage.tsx","b96a0192-38b3-11f1-809f-42b51c65c3df",12,["D",1776247998611],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\nimport { EmojiModal } from \"./EmojiModal.tsx\";\n\nexport function HomePage() {\n  const [emojis, setEmojis] = useState<any[]>([]);\n  const [categories, setCategories] = useState<string[]>([]);\n  const [activeCategory, setActiveCategory] = useState(\"All\");\n  const [selectedEmoji, setSelectedEmoji] = useState<any>(null);\n  const [loading, setLoading] = useState(true);\n\n  const loadEmojis = async (cat?: string) => {\n    setLoading(true);\n    try {\n      const data = await api.getEmojis(cat);\n      setEmojis(data.emojis || []);\n    } catch { setEmojis([]); }\n    setLoading(false);\n  };\n\n  useEffect(() => {\n    api.getCategories().then(d => setCategories(d.categories || [])).catch(() => {});\n    loadEmojis();\n  }, []);\n\n  const handleCategoryChange = (cat: string) => {\n    setActiveCategory(cat);\n    loadEmojis(cat);\n  };\n\n  return (\n    <div>\n      {/* Hero */}\n      <div className=\"text-center mb-8\">\n        <h1 className=\"text-3xl font-extrabold text-gray-900 mb-2\">\n          📈 Discover & Share Emojis\n        </h1>\n        <p className=\"text-gray-500\">Browse community-uploaded emojis for Discord and more</p>\n      </div>\n\n      {/* Category Filters */}\n      <div className=\"flex flex-wrap gap-2 mb-6 justify-center\">\n        {categories.map(cat => (\n          <button key={cat} onClick={() => handleCategoryChange(cat)}\n            className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${\n              activeCategory === cat\n                ? \"bg-indigo-500 text-white shadow-md\"\n                : \"bg-white text-gray-600 border border-gray-200 hover:border-indigo-300 hover:text-indigo-600\"\n            }`}>\n            {cat}\n          </button>\n        ))}\n      </div>\n\n      {/* Grid */}\n      {loading ? (\n        <div className=\"text-center py-20 text-gray-400\">Loading emojis...</div>\n      ) : emojis.length === 0 ? (\n        <div className=\"text-center py-20\">\n          <div className=\"text-5xl mb-4\">📭</div>\n          <p className=\"text-gray-500 text-lg\">No emojis yet. Be the first to upload!</p>\n        </div>\n      ) : (\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4\">\n          {emojis.map((emoji: any) => (\n            <div key={emoji.id} onClick={() => setSelectedEmoji(emoji)}\n              className=\"bg-white rounded-2xl border border-gray-100 hover:border-indigo-200 hover:shadow-lg transition-all cursor-pointer group overflow-hidden\">\n              <div className=\"aspect-square flex items-center justify-center p-4 bg-gray-50/50\">\n                <img src={api.fileUrl(emoji.file_key)} alt={emoji.name}\n                  className=\"w-[128px] h-[128px] object-contain group-hover:scale-110 transition-transform\" loading=\"lazy\" />\n              </div>\n              <div className=\"p-3 border-t border-gray-50\">\n                <h3 className=\"font-semibold text-gray-900 text-sm truncate\">{emoji.name}</h3>\n                <div className=\"flex items-center justify-between mt-1\">\n                  <span className=\"text-xs text-gray-400\">@{emoji.username}</span>\n                  <span className=\"text-xs text-gray-400 flex items-center gap-1\">\n                    ⬇ {emoji.downloads}\n                  </span>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {selectedEmoji && (\n        <EmojiModal emoji={selectedEmoji} onClose={() => setSelectedEmoji(null)} />\n      )}\n    </div>\n  );\n}\n",[],[126,169,198],"c0ad4e6e-38b3-11f1-95fc-42b51c65c3df","EmojiModal.tsx","c0ad4f2c-38b3-11f1-95fc-42b51c65c3df",13,["D",1776248010794],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\ninterface EmojiModalProps {\n  emoji: any;\n  onClose: () => void;\n}\n\nexport function EmojiModal({ emoji, onClose }: EmojiModalProps) {\n  const handleDownload = () => {\n    const a = document.createElement(\"a\");\n    a.href = api.downloadUrl(emoji.id);\n    a.download = emoji.name;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <div className=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"\n      onClick={onClose}>\n      <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden\" onClick={e => e.stopPropagation()}>\n        <div className=\"bg-gray-50 flex items-center justify-center p-8\">\n          <img src={api.fileUrl(emoji.file_key)} alt={emoji.name}\n            className=\"w-[128px] h-[128px] object-contain\" />\n        </div>\n        <div className=\"p-6\">\n          <h2 className=\"text-xl font-bold text-gray-900 mb-1\">{emoji.name}</h2>\n          <p className=\"text-sm text-gray-500 mb-4\">by @{emoji.username}</p>\n          {emoji.description && (\n            <p className=\"text-sm text-gray-600 mb-4\">{emoji.description}</p>\n          )}\n          <div className=\"flex flex-wrap gap-2 mb-4\">\n            <span className=\"px-2.5 py-1 bg-indigo-50 text-indigo-600 rounded-full text-xs font-medium\">\n              {emoji.category}\n            </span>\n            {emoji.tags && emoji.tags.split(\",\").map((t: string) => t.trim()).filter(Boolean).map((tag: string) => (\n              <span key={tag} className=\"px-2.5 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium\">\n                #{tag}\n              </span>\n            ))}\n          </div>\n          <div className=\"flex items-center gap-3 text-sm text-gray-500 mb-5\">\n            <span>⬇ {emoji.downloads} downloads</span>\n            <span>·</span>\n            <span>{(emoji.file_size / 1024).toFixed(1)} KB</span>\n            <span>·</span>\n            <span>{emoji.file_type === \"image/gif\" ? \"GIF\" : \"PNG\"}</span>\n          </div>\n          <div className=\"flex gap-3\">\n            <button onClick={handleDownload}\n              className=\"flex-1 py-2.5 bg-indigo-500 text-white rounded-xl font-semibold hover:bg-indigo-600 transition-all text-sm shadow-sm\">\n              ⬇ Download (128px)\n            </button>\n            <button onClick={onClose}\n              className=\"px-5 py-2.5 bg-gray-100 text-gray-600 rounded-xl font-medium hover:bg-gray-200 transition-all text-sm\">\n              Close\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[126,169,206],"afe36758-38b3-11f1-809f-42b51c65c3df","AuthModal.tsx","afe3682a-38b3-11f1-809f-42b51c65c3df",11,["D",1776247982632],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\ninterface AuthModalProps {\n  mode: \"login\" | \"register\";\n  onSwitch: () => void;\n  onClose: () => void;\n  onAuth: (user: any) => void;\n}\n\nexport function AuthModal({ mode, onSwitch, onClose, onAuth }: AuthModalProps) {\n  const [username, setUsername] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(\"\");\n    setLoading(true);\n    try {\n      const fn = mode === \"login\" ? api.login : api.register;\n      const data = await fn(username, password);\n      onAuth(data.user);\n    } catch (err: any) {\n      setError(err.message);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div className=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"\n      onClick={onClose}>\n      <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-sm p-8\" onClick={e => e.stopPropagation()}>\n        <div className=\"text-center mb-6\">\n          <div className=\"text-3xl mb-2\">{mode === \"login\" ? \"👋\" : \"🚀\"}</div>\n          <h2 className=\"text-2xl font-bold text-gray-900\">\n            {mode === \"login\" ? \"Welcome back\" : \"Create account\"}\n          </h2>\n          <p className=\"text-gray-500 text-sm mt-1\">\n            {mode === \"login\" ? \"Sign in to your account\" : \"Join the emoji community\"}\n          </p>\n        </div>\n        <form onSubmit={handleSubmit} className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Username</label>\n            <input type=\"text\" value={username} onChange={e => setUsername(e.target.value)}\n              className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm\"\n              placeholder=\"Enter username\" autoFocus required />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Password</label>\n            <input type=\"password\" value={password} onChange={e => setPassword(e.target.value)}\n              className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm\"\n              placeholder=\"Enter password\" required />\n          </div>\n          {error && <div className=\"text-red-500 text-sm bg-red-50 px-3 py-2 rounded-lg\">{error}</div>}\n          <button type=\"submit\" disabled={loading}\n            className=\"w-full py-2.5 bg-indigo-500 text-white rounded-xl font-semibold hover:bg-indigo-600 transition-all disabled:opacity-50 text-sm shadow-sm\">\n            {loading ? \"...\" : mode === \"login\" ? \"Sign in\" : \"Create account\"}\n          </button>\n        </form>\n        <p className=\"text-center text-sm text-gray-500 mt-5\">\n          {mode === \"login\" ? \"Don't have an account?\" : \"Already have an account?\"}{\" \"}\n          <button onClick={onSwitch} className=\"text-indigo-500 font-semibold hover:underline\">\n            {mode === \"login\" ? \"Sign up\" : \"Sign in\"}\n          </button>\n        </p>\n      </div>\n    </div>\n  );\n}\n",[],[126,169,214],"d7ab0494-38b3-11f1-92ed-42b51c65c3df","AccountPage.tsx","d7ab0584-38b3-11f1-92ed-42b51c65c3df",15,["D",1776248049372],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\ninterface AccountPageProps {\n  user: { id: number; username: string };\n}\n\nexport function AccountPage({ user }: AccountPageProps) {\n  const [stats, setStats] = useState<any>(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    api.getStats().then(d => { setStats(d); setLoading(false); }).catch(() => setLoading(false));\n  }, []);\n\n  if (loading) {\n    return <div className=\"text-center py-20 text-gray-400\">Loading dashboard...</div>;\n  }\n\n  if (!stats) {\n    return <div className=\"text-center py-20 text-gray-500\">Could not load stats</div>;\n  }\n\n  return (\n    <div>\n      <div className=\"text-center mb-8\">\n        <div className=\"w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3\">\n          <span className=\"text-3xl\">👤</span>\n        </div>\n        <h1 className=\"text-2xl font-extrabold text-gray-900\">@{user.username}</h1>\n        <p className=\"text-gray-500 text-sm\">Your emoji dashboard</p>\n      </div>\n\n      {/* Stats Cards */}\n      <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-8\">\n        <StatCard icon=\"📦\" label=\"Total Emojis\" value={stats.totalEmojis} />\n        <StatCard icon=\"⬇\" label=\"Total Downloads\" value={stats.totalDownloads} />\n        <StatCard icon=\"📊\" label=\"Avg Downloads\" value={stats.avgDownloads} />\n        <StatCard icon=\"🏆\" label=\"Ranking\" value={`#${stats.rank} / ${stats.totalUsers}`} />\n      </div>\n\n      {/* User's Emojis */}\n      <h2 className=\"text-lg font-bold text-gray-900 mb-4\">Your Emojis</h2>\n      {stats.emojis.length === 0 ? (\n        <div className=\"text-center py-12 bg-white rounded-2xl border border-gray-100\">\n          <div className=\"text-4xl mb-3\">📭</div>\n          <p className=\"text-gray-500\">You haven't uploaded any emojis yet</p>\n        </div>\n      ) : (\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4\">\n          {stats.emojis.map((emoji: any) => (\n            <div key={emoji.id} className=\"bg-white rounded-2xl border border-gray-100 overflow-hidden\">\n              <div className=\"aspect-square flex items-center justify-center p-3 bg-gray-50/50\">\n                <img src={api.fileUrl(emoji.file_key)} alt={emoji.name}\n                  className=\"w-[96px] h-[96px] object-contain\" loading=\"lazy\" />\n              </div>\n              <div className=\"p-3 border-t border-gray-50\">\n                <h3 className=\"font-semibold text-gray-900 text-xs truncate\">{emoji.name}</h3>\n                <div className=\"flex items-center justify-between mt-1\">\n                  <span className=\"text-xs text-indigo-500 font-medium\">{emoji.category}</span>\n                  <span className=\"text-xs text-gray-400\">⬇ {emoji.downloads}</span>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction StatCard({ icon, label, value }: { icon: string; label: string; value: any }) {\n  return (\n    <div className=\"bg-white rounded-2xl border border-gray-100 p-5 text-center\">\n      <div className=\"text-2xl mb-2\">{icon}</div>\n      <div className=\"text-2xl font-bold text-gray-900\">{value}</div>\n      <div className=\"text-xs text-gray-500 mt-1\">{label}</div>\n    </div>\n  );\n}\n",[],[126,169,222],["D",1776247877648],[232,233],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":237,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_83":238,"_18":239},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":234,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_83":235,"_18":236},["D",1776247892888],[],[19,37],["D",1776247877648],[],[19,60],"6d6924d0-38b3-11f1-975d-42b51c65c3df",["D",1776247871105],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Discord emoji sharing platform - upload, browse, download","imageUrl","userId","76bc32aa-9423-4ad6-9dc6-ec95cd0150fa","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019d909c-3adb-7264-b953-27d10f1e1b4a","tursoName","6d6924d038b311f1975d42b51c65c3df","tursoHostname","6d6924d038b311f1975d42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789497078049],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_296":292},"org",{"_11":12,"_290":-5,"_291":292,"_250":251,"_293":294,"_295":56},"branch",{"_17":97,"_13":16,"_35":43,"_282":240,"_283":-5,"_284":-5,"_285":-5,"_286":-5,"_287":-5,"_288":14,"_289":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://avatars.githubusercontent.com/u/270369291?v=4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":240,"_13":14,"_48":393,"_242":-5,"_243":56,"_244":245,"_246":245,"_247":248,"_249":-5,"_250":251,"_252":78,"_253":47,"_254":-5,"_255":-5,"_256":50,"_257":258,"_259":260,"_261":262,"_263":394,"_265":-5,"_266":267,"_268":267,"_269":270,"_271":270,"_272":270,"_273":267,"_274":267,"_275":395,"_277":396,"_279":397,"_281":56},[330,333,345,348,349,350],"files",[330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350],"counts",{"_321":50,"_322":62,"_323":50,"_32":324,"_325":326},[317,318],{"_35":66,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":62,"_46":47,"_48":67,"_17":50,"_51":68,"_53":-5,"_55":56,"_57":-5,"_18":316},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":63,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_18":320},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":319},[19,37],[19,60],"pulls","branches","forks",{"_327":50,"_329":50},"connections",{"_327":50,"_328":50},"count","unfilledCount","emptyCount",{"_35":66,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":62,"_46":47,"_48":229,"_17":50,"_51":68,"_53":-5,"_55":56,"_57":-5,"_83":391,"_18":392},{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":237,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_83":389,"_18":390},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":234,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_83":387,"_18":388},{"_35":125,"_13":126,"_38":127,"_40":-5,"_42":43,"_44":128,"_46":47,"_48":129,"_17":50,"_51":68,"_53":-5,"_55":56,"_57":-5,"_83":385,"_18":386},{"_35":168,"_13":169,"_38":170,"_40":127,"_42":43,"_44":171,"_46":47,"_48":172,"_17":50,"_51":68,"_53":-5,"_55":56,"_57":-5,"_83":383,"_18":384},{"_35":221,"_13":222,"_38":223,"_40":170,"_42":43,"_44":224,"_46":47,"_48":225,"_17":50,"_51":52,"_53":226,"_55":56,"_57":-5,"_83":381,"_18":382},{"_35":213,"_13":214,"_38":215,"_40":170,"_42":43,"_44":216,"_46":47,"_48":217,"_17":50,"_51":52,"_53":218,"_55":56,"_57":-5,"_83":379,"_18":380},{"_35":205,"_13":206,"_38":207,"_40":170,"_42":43,"_44":208,"_46":47,"_48":209,"_17":50,"_51":52,"_53":210,"_55":56,"_57":-5,"_83":377,"_18":378},{"_35":197,"_13":198,"_38":199,"_40":170,"_42":43,"_44":200,"_46":47,"_48":201,"_17":50,"_51":52,"_53":202,"_55":56,"_57":-5,"_83":375,"_18":376},{"_35":189,"_13":190,"_38":191,"_40":170,"_42":43,"_44":192,"_46":47,"_48":193,"_17":62,"_51":52,"_53":194,"_55":56,"_57":-5,"_83":373,"_18":374},{"_35":181,"_13":182,"_38":183,"_40":170,"_42":43,"_44":184,"_46":47,"_48":185,"_17":50,"_51":52,"_53":186,"_55":56,"_57":-5,"_83":371,"_18":372},{"_35":160,"_13":161,"_38":162,"_40":127,"_42":43,"_44":163,"_46":47,"_48":164,"_17":50,"_51":52,"_53":165,"_55":56,"_57":-5,"_83":369,"_18":370},{"_35":152,"_13":153,"_38":154,"_40":127,"_42":43,"_44":155,"_46":47,"_48":156,"_17":50,"_51":52,"_53":157,"_55":56,"_57":-5,"_83":367,"_18":368},{"_35":145,"_13":146,"_38":147,"_40":127,"_42":43,"_44":128,"_46":47,"_48":148,"_17":50,"_51":24,"_53":149,"_55":56,"_57":-5,"_83":365,"_18":366},{"_35":137,"_13":138,"_38":139,"_40":127,"_42":43,"_44":140,"_46":47,"_48":141,"_17":50,"_51":52,"_53":142,"_55":56,"_57":-5,"_83":363,"_18":364},{"_35":101,"_13":102,"_38":103,"_40":-5,"_42":43,"_44":104,"_46":47,"_48":105,"_17":50,"_51":68,"_53":-5,"_55":56,"_57":-5,"_83":361,"_18":362},{"_35":118,"_13":119,"_38":120,"_40":103,"_42":43,"_44":104,"_46":47,"_48":121,"_17":50,"_51":52,"_53":122,"_55":56,"_57":-5,"_83":359,"_18":360},{"_35":110,"_13":111,"_38":112,"_40":103,"_42":43,"_44":113,"_46":47,"_48":114,"_17":50,"_51":52,"_53":115,"_55":56,"_57":-5,"_83":357,"_18":358},{"_35":94,"_13":95,"_38":96,"_40":-5,"_42":43,"_44":97,"_46":47,"_48":98,"_17":50,"_51":68,"_53":-5,"_55":56,"_57":-5,"_83":355,"_18":356},{"_35":86,"_13":87,"_38":88,"_40":-5,"_42":43,"_44":89,"_46":47,"_48":90,"_17":50,"_51":24,"_53":91,"_55":56,"_57":-5,"_83":353,"_18":354},{"_35":76,"_13":77,"_38":78,"_40":-5,"_42":43,"_44":79,"_46":47,"_48":80,"_17":50,"_51":81,"_53":82,"_55":56,"_57":-5,"_83":351,"_18":352},[],[77],[],[87],[],[95],[],[102,111],[],[102,119],[346,347],[102],[],[126,138],[],[126,146],[],[126,153],[],[126,161],[],[126,169,182],[],[126,169,190],[],[126,169,198],[],[126,169,206],[],[126,169,214],[],[126,169,222],[335,336,337,338,339,340],[126,169],[334,341,342,343,344],[126],[],[19,37],[],[19,60],[331,332],[19],["D",1776247871105],["D",1789497078049],{"_11":12,"_296":292},{"_11":12,"_290":-5,"_291":292,"_250":251,"_293":294,"_295":56},{"_17":97,"_13":16,"_35":43,"_282":240,"_283":-5,"_284":-5,"_285":-5,"_286":-5,"_287":-5,"_288":14,"_289":12},"ctx",{"_275":-5,"_313":431,"_432":433,"_434":435,"_436":56,"_437":56,"_438":56,"_439":47,"_440":-5,"_441":-7,"_442":-7,"_443":50,"_444":56,"_445":56,"_446":-5,"_447":56,"_448":56,"_449":56,"_450":-5},"ENV",{"_402":403,"_404":405,"_406":16,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428,"_429":430},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>