[{"_1":2,"_191":-5,"_192":-5},"loaderData",{"_3":4,"_96":97},"root",{"_5":6,"_37":38,"_69":70},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20,"_36":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isBusinessOrgMember","isHigherTownieTier","ENV",{"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","efeea19332d9bfe7de1049656877be9cb817c45f","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_71":72},"__internal_clerk_state",{"_73":74,"_75":48,"_76":77,"_78":77,"_79":20,"_80":77,"_81":77,"_82":77,"_83":77,"_84":85,"_94":20,"_95":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_86":20,"_19":20,"_87":77,"_88":89,"_90":77,"_91":48,"_92":20,"_93":77},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_98":99,"_100":101,"_102":103,"_104":105,"_165":166,"_188":189,"_190":-5},"handle","jeannettehauck","name","Kikko","path","frontend/components/panels.ts","project",{"_106":107,"_100":101,"_108":109,"_110":-5,"_111":20,"_112":113,"_114":115,"_116":-5,"_12":117,"_118":-5,"_119":20,"_120":-5,"_121":-5,"_122":33,"_14":123,"_124":125,"_126":127,"_128":129,"_130":-5,"_131":132,"_133":132,"_134":135,"_136":135,"_137":135,"_138":132,"_139":132,"_23":140,"_142":143,"_147":148,"_164":20},"id","15c13c42-385c-11f1-9665-42b51c65c3df","createdAt",["D",1776210357794],"deletedAt","legacyEnvVars","privacy","public","description","Kikko - real time messaging app","imageUrl","870b7e35-8ef5-4636-b971-bff1fd6a6e2b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019d8e62-5858-7425-9af4-1885703035d6","tursoName","15c13c42385c11f1966542b51c65c3df","tursoHostname","15c13c42385c11f1966542b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1776213035057],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_98":99,"_141":77},"profileImageUrl","org",{"_98":99,"_144":77,"_12":117,"_145":146},"avatar","tier","free","branch",{"_149":150,"_100":46,"_106":151,"_152":107,"_153":154,"_155":156,"_157":113,"_158":159,"_160":161,"_162":101,"_163":99},"version",16,"15c6b88e-385c-11f1-9665-42b51c65c3df","projectId","forkedBranchId","65a82a10-36ed-11f1-b56f-42b51c65c3df","forkedBranchVersion",3,"forkedProjectPrivacy","forkedProjectId","65a1d32c-36ed-11f1-b56f-42b51c65c3df","forkedProjectOrgId","019d84ff-a03f-708c-9555-09bac13e13b3","projectName","userHandle","isOwned","file",{"_106":167,"_100":168,"_169":170,"_171":172,"_173":151,"_174":175,"_176":177,"_108":178,"_149":33,"_179":180,"_181":182,"_183":20,"_184":-5,"_102":185},"ed349af2-385c-11f1-a105-42b51c65c3df","panels.ts","fileId","ed349c0a-385c-11f1-a105-42b51c65c3df","parentId","28dd156c-385c-11f1-b5ef-42b51c65c3df","branchId","branchVersion",12,"latest",true,["D",1776210719291],"fileType","script","content","import { createElement as h, useState, useEffect, useRef, Fragment } from \"react\";\nimport { Ico } from \"../icons.ts\";\nimport { api, fmt, fmtDate } from \"../utils.ts\";\nimport { ConfirmDialog } from \"./shared.ts\";\n\n// ── SearchPanel ────────────────────────────────────────────────────────────────\nexport function SearchPanel({ roomId, token, onClose, onJumpTo }: any) {\n const [q, setQ] = useState(\"\");\n const [results, setResults] = useState([]);\n const [loading, setLoading] = useState(false);\n const inputRef = useRef(null);\n useEffect(() => inputRef.current?.focus(), []);\n useEffect(() => {\n if (q.trim().length < 2) { setResults([]); return; }\n const t = setTimeout(async () => {\n setLoading(true);\n const r = await api(\"/api/rooms/\" + roomId + \"/search?q=\" + encodeURIComponent(q.trim()), {}, token);\n const d = await r.json();\n setResults(d.messages || []);\n setLoading(false);\n }, 350);\n return () => clearTimeout(t);\n }, [q, roomId]);\n return h(\"div\", { className: \"search-panel\" },\n h(\"div\", { className: \"search-header\" },\n h(\"button\", { className: \"icon-btn\", onClick: onClose }, h(Ico.close)),\n h(\"input\", { ref: inputRef, type: \"text\", placeholder: \"Search messages…\", value: q, onChange: (e: any) => setQ(e.target.value), style: { flex: 1, background: \"var(--surface2)\", border: \"1px solid var(--border)\", borderRadius: \"var(--radius-sm)\", padding: \"0.5rem 0.75rem\", color: \"var(--text)\", fontSize: \"0.875rem\", outline: \"none\", fontFamily: \"var(--font)\" } })\n ),\n h(\"div\", { className: \"search-results\" },\n loading && h(\"div\", { style: { textAlign: \"center\", color: \"var(--text-dim)\", padding: \"1rem\", fontSize: \"0.82rem\" } }, \"Searching…\"),\n !loading && q.trim().length >= 2 && results.length === 0 && h(\"div\", { style: { textAlign: \"center\", color: \"var(--text-dim)\", padding: \"1rem\", fontSize: \"0.82rem\" } }, \"No results found\"),\n results.map((m: any) => h(\"div\", { key: m.id, className: \"search-result-item\", onClick: () => onJumpTo(m) },\n h(\"div\", { className: \"search-result-user\" }, m.username),\n h(\"div\", { className: \"search-result-text\" }, m.content),\n h(\"div\", { className: \"search-result-time\" }, fmt(m.created_at) + \" · \" + fmtDate(m.created_at))\n ))\n )\n );\n}\n\n// ── RoomPanel ──────────────────────────────────────────────────────────────────\nexport function RoomPanel({ room, currentUser, token, onClose, onLeave, onDelete, loadRooms, isAdminView }: any) {\n const [members, setMembers] = useState([]);\n const [allUsers, setAllUsers] = useState([]);\n const [invSearch, setInvSearch] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [success, setSuccess] = useState(\"\");\n const [confirmDelete, setConfirmDelete] = useState(false);\n const load = async () => {\n const r = await api(\"/api/rooms/\" + room.id + \"/members\", {}, token);\n const d = await r.json();\n if (d.members) setMembers(d.members.map((m: any) => ({ ...m, id: Number(m.id) })));\n };\n const loadUsers = async () => {\n const r = await api(\"/api/users\", {}, token);\n const d = await r.json();\n if (d.users) setAllUsers(d.users.map((u: any) => ({ ...u, id: Number(u.id) })));\n };\n useEffect(() => { load(); loadUsers(); }, [room.id]);\n const memberIds = new Set(members.map((m: any) => m.id));\n const inviteCandidates = allUsers.filter((u: any) =>\n !memberIds.has(u.id) && u.id !== currentUser.id &&\n (!u.ghost_mode || currentUser.isAdmin) &&\n (invSearch === \"\" || u.username.toLowerCase().includes(invSearch.toLowerCase()))\n );\n const invite = async (username: string) => {\n setError(\"\"); setSuccess(\"\");\n const r = await api(\"/api/rooms/\" + room.id + \"/invite\", { method: \"POST\", body: JSON.stringify({ username }) }, token);\n const d = await r.json();\n if (!r.ok) setError(d.error); else { setSuccess(username + \" invited!\"); load(); }\n };\n const kick = async (uid: number) => {\n const r = await api(\"/api/rooms/\" + room.id + \"/kick\", { method: \"POST\", body: JSON.stringify({ userId: uid }) }, token);\n if (r.ok) load(); else { const d = await r.json(); setError(d.error); }\n };\n const leave = async () => { await api(\"/api/rooms/\" + room.id + \"/leave\", { method: \"POST\" }, token); onLeave(); };\n const del = async () => {\n const r = await api(\"/api/rooms/\" + room.id, { method: \"DELETE\" }, token);\n if (r.ok) onDelete(); else { const d = await r.json(); setError(d.error); }\n };\n const myRole = members.find((m: any) => m.id === currentUser.id)?.role;\n const isOwner = myRole === \"owner\";\n const canDelete = isOwner || currentUser.isAdmin;\n const canKick = isOwner || currentUser.isAdmin;\n const canInvite = isOwner || currentUser.isAdmin;\n const isGhostAdmin = currentUser.isAdmin && !myRole;\n return h(\"div\", { className: \"panel-overlay\", onClick: (e: any) => e.target === e.currentTarget && onClose() },\n h(\"div\", { className: \"panel animate-in\", style: { maxWidth: 460 } },\n h(\"div\", { className: \"panel-header\" },\n h(\"h2\", null, h(\"span\", { style: { display: \"flex\", alignItems: \"center\", gap: \"0.4rem\" } }, h(Ico.lock), room.name)),\n h(\"button\", { className: \"icon-btn\", onClick: onClose }, h(Ico.close))\n ),\n error && h(\"div\", { className: \"error-msg\" }, error),\n success && h(\"div\", { className: \"success-msg\" }, success),\n h(\"div\", { className: \"settings-section\" },\n h(\"h3\", null, \"Members (\" + members.length + \")\"),\n members.map((m: any) => h(\"div\", { key: m.id, className: \"member-row\" },\n h(\"div\", { className: \"user-mini-avatar\" }, m.avatar_blob_key ? h(\"img\", { src: \"/api/blob/\" + m.avatar_blob_key, alt: \"\" }) : (m.username || \"?\")[0].toUpperCase()),\n h(\"span\", { className: \"mname\" }, m.username),\n h(\"span\", { className: \"mrole\" }, m.role),\n canKick && m.id !== currentUser.id && h(\"button\", { className: \"btn btn-danger btn-sm\", onClick: () => kick(m.id) }, \"Kick\")\n ))\n ),\n canInvite && h(\"div\", { className: \"settings-section\" },\n h(\"h3\", null, \"Invite Users\"),\n h(\"input\", { type: \"text\", placeholder: \"Search users…\", value: invSearch, onChange: (e: any) => setInvSearch(e.target.value), style: { width: \"100%\", marginBottom: \"0.6rem\" } }),\n h(\"div\", { style: { maxHeight: 160, overflowY: \"auto\", display: \"flex\", flexDirection: \"column\", gap: 2 } },\n inviteCandidates.length === 0 && h(\"div\", { style: { color: \"var(--text-dim)\", fontSize: \"0.82rem\", padding: \"0.5rem\" } }, \"No users found\"),\n inviteCandidates.slice(0, 20).map((u: any) => h(\"div\", { key: u.id, className: \"member-row\", style: { justifyContent: \"space-between\" } },\n h(\"div\", { style: { display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" } },\n h(\"div\", { className: \"user-mini-avatar\" }, u.avatar_blob_key ? h(\"img\", { src: \"/api/blob/\" + u.avatar_blob_key, alt: \"\" }) : (u.username || \"?\")[0].toUpperCase()),\n h(\"span\", { style: { fontSize: \"0.85rem\" } }, u.username)\n ),\n h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => invite(u.username) }, h(Ico.plus), \" Invite\")\n ))\n )\n ),\n h(\"div\", { style: { display: \"flex\", gap: \"0.5rem\", flexWrap: \"wrap\", marginTop: \"0.5rem\" } },\n !isGhostAdmin && h(\"button\", { className: \"btn btn-ghost btn-sm\", style: { flex: 1 }, onClick: leave }, \"Leave Room\"),\n canDelete && h(\"button\", { className: \"btn btn-danger btn-sm\", onClick: () => setConfirmDelete(true) }, h(Ico.trash), \" Delete Room\"),\n h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: onClose }, \"Close\")\n ),\n confirmDelete && h(ConfirmDialog, {\n title: \"Delete \\\"\" + room.name + \"\\\"?\",\n message: \"This will permanently delete this group and all its messages. This cannot be undone.\",\n danger: \"Yes, delete room\",\n onConfirm: del,\n onCancel: () => setConfirmDelete(false)\n })\n )\n );\n}\n\n// ── ProfilePanel ───────────────────────────────────────────────────────────────\nexport function ProfilePanel({ user, token, onClose, onLogout }: any) {\n const [ghost, setGhost] = useState(!!user.ghost_mode);\n const [error, setError] = useState(\"\");\n const [success, setSuccess] = useState(\"\");\n const [confirmDelete, setConfirmDelete] = useState(false);\n const fileRef = useRef(null);\n const toggleGhost = async (val: boolean) => { setGhost(val); await api(\"/api/users/ghost\", { method: \"POST\", body: JSON.stringify({ ghost: val }) }, token); };\n const uploadAvatar = async (file: File) => {\n setError(\"\"); setSuccess(\"\");\n if (file.size > 100 * 1024) { setError(\"Avatar max 100 KB\"); return; }\n const fd = new FormData(); fd.append(\"avatar\", file);\n const r = await fetch(\"/api/avatar\", { method: \"POST\", body: fd, headers: token ? { Authorization: \"Bearer \" + token } : {} });\n const d = await r.json();\n if (!r.ok) setError(d.error); else setSuccess(\"Avatar updated! Refresh to see it.\");\n };\n return h(\"div\", { className: \"panel-overlay\", onClick: (e: any) => e.target === e.currentTarget && onClose() },\n h(\"div\", { className: \"panel animate-in\" },\n h(\"div\", { className: \"panel-header\" },\n h(\"h2\", null, h(\"span\", { style: { display: \"flex\", alignItems: \"center\", gap: \"0.4rem\" } }, h(Ico.user), \"Profile\")),\n h(\"button\", { className: \"icon-btn\", onClick: onClose }, h(Ico.close))\n ),\n error && h(\"div\", { className: \"error-msg\" }, error),\n success && h(\"div\", { className: \"success-msg\" }, success),\n h(\"div\", { className: \"settings-section\" },\n h(\"h3\", null, \"Avatar\"),\n h(\"div\", { style: { display: \"flex\", alignItems: \"center\", gap: \"1rem\" } },\n h(\"div\", { style: { width: 56, height: 56, borderRadius: \"50%\", background: \"var(--brand)\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontSize: \"1.4rem\", fontWeight: 700, color: \"#1a1608\", overflow: \"hidden\", flexShrink: 0 } },\n user.avatar_blob_key\n ? h(\"img\", { src: \"/api/blob/\" + user.avatar_blob_key, alt: \"\", style: { width: \"100%\", height: \"100%\", objectFit: \"cover\" } })\n : user.username[0].toUpperCase()\n ),\n h(\"div\", null,\n h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => fileRef.current?.click() }, \"Upload photo\"),\n h(\"div\", { style: { fontSize: \"0.72rem\", color: \"var(--text-muted)\", marginTop: \"0.25rem\" } }, \"Max 100 KB · Permanent\")\n )\n ),\n h(\"input\", { ref: fileRef, type: \"file\", accept: \"image/*\", style: { display: \"none\" }, onChange: (e: any) => e.target.files?.[0] && uploadAvatar(e.target.files[0]) })\n ),\n h(\"div\", { className: \"settings-section\" },\n h(\"h3\", null, \"Account\"),\n h(\"div\", { style: { fontSize: \"0.9rem\", marginBottom: \"0.3rem\", display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" } },\n h(\"strong\", null, user.username),\n user.isAdmin && h(\"span\", { className: \"admin-badge\" }, \"Admin\")\n ),\n h(\"div\", { style: { fontSize: \"0.82rem\", color: \"var(--text-muted)\" } }, user.email)\n ),\n user.ntfy_topic && h(\"div\", { className: \"settings-section\" },\n h(\"h3\", null, \"Notifications\"),\n h(\"div\", { style: { fontSize: \"0.82rem\", color: \"var(--text-muted)\", wordBreak: \"break-all\", userSelect: \"all\", fontFamily: \"var(--font)\" } },\n \"https://ntfy.sh/\" + user.ntfy_topic\n )\n ),\n h(\"div\", { className: \"settings-section\" },\n h(\"h3\", null, \"Privacy\"),\n h(\"div\", { className: \"toggle-row\" },\n h(\"div\", null,\n h(\"div\", { style: { fontSize: \"0.88rem\", display: \"flex\", alignItems: \"center\", gap: \"0.4rem\" } }, h(Ico.ghost), \" Ghost Mode\"),\n h(\"div\", { style: { fontSize: \"0.76rem\", color: \"var(--text-muted)\", marginTop: 2 } }, \"Hide from public user list\")\n ),\n h(\"label\", { className: \"toggle\" },\n h(\"input\", { type: \"checkbox\", checked: ghost, onChange: (e: any) => toggleGhost(e.target.checked) }),\n h(\"span\", { className: \"toggle-slider\" })\n )\n )\n ),\n h(\"div\", { className: \"settings-section\" },\n h(\"h3\", { style: { color: \"var(--danger)\" } }, h(Ico.trash), \" Danger Zone\"),\n h(\"button\", { className: \"btn btn-danger\", style: { width: \"100%\" }, onClick: () => setConfirmDelete(true) }, \"Delete My Account\")\n ),\n h(\"button\", { className: \"btn btn-ghost\", style: { width: \"100%\" }, onClick: onClose }, \"Close\"),\n confirmDelete && h(ConfirmDialog, {\n title: \"Delete your account?\",\n message: \"This will permanently erase all your data. Messages you sent will remain but show as [deleted]. This cannot be undone.\",\n danger: \"Yes, delete my account\",\n onConfirm: async () => {\n try {\n const r = await api(\"/api/users/\" + user.id, { method: \"DELETE\" }, token);\n const d = await r.json().catch(() => ({}));\n if (r.ok) { onLogout(); } else { setError(typeof d.error === \"string\" ? d.error : \"Failed to delete account\"); setConfirmDelete(false); }\n } catch { setError(\"Network error\"); setConfirmDelete(false); }\n },\n onCancel: () => setConfirmDelete(false)\n })\n )\n );\n}\n\n// ── AdminPanel ─────────────────────────────────────────────────────────────────\nexport function AdminPanel({ token, onClose, onLogout, onEnterRoom }: any) {\n const [users, setUsers] = useState([]);\n const [rooms, setRooms] = useState([]);\n const [tab, setTab] = useState(\"users\");\n const [search, setSearch] = useState(\"\");\n const [msg, setMsg] = useState(\"\");\n const [banHrs, setBanHrs] = useState(\"24\");\n const [banMsg, setBanMsg] = useState(\"\");\n const [muteMin, setMuteMin] = useState(\"30\");\n const [confirmDeleteUser, setConfirmDeleteUser] = useState(null);\n const [confirmClearRoom, setConfirmClearRoom] = useState(null);\n const load = async () => {\n const [ur, rr] = await Promise.all([api(\"/api/users\", {}, token), api(\"/api/admin/rooms\", {}, token)]);\n const ud = await ur.json(); const rd = await rr.json();\n if (ud.users) setUsers(ud.users.map((u: any) => ({ ...u, id: Number(u.id) })));\n if (rd.rooms) setRooms(rd.rooms.map((r: any) => ({ ...r, id: Number(r.id) })));\n };\n useEffect(() => { load(); }, []);\n const act = (m: string) => { setMsg(m); setTimeout(() => setMsg(\"\"), 3000); };\n const ban = async (id: number, dur: number | null) => { await api(\"/api/users/\" + id + \"/ban\", { method: \"POST\", body: JSON.stringify({ duration: dur, message: banMsg || null }) }, token); act(dur ? \"Banned \" + dur + \"h\" : \"Permanently banned\"); load(); };\n const unban = async (id: number) => { await api(\"/api/users/\" + id + \"/unban\", { method: \"POST\" }, token); act(\"Unbanned\"); load(); };\n const mute = async (id: number) => { await api(\"/api/users/\" + id + \"/mute\", { method: \"POST\", body: JSON.stringify({ duration: Number(muteMin) }) }, token); act(\"Muted \" + muteMin + \"m\"); load(); };\n const unmute = async (id: number) => { await api(\"/api/users/\" + id + \"/unmute\", { method: \"POST\" }, token); act(\"Unmuted\"); load(); };\n const deleteUserById = async (u: any) => {\n try {\n const r = await api(\"/api/users/\" + u.id, { method: \"DELETE\" }, token);\n const d = await r.json().catch(() => ({}));\n if (r.ok) { act(\"Deleted \" + u.username); setConfirmDeleteUser(null); load(); }\n else { act(\"Error: \" + (typeof d.error === \"string\" ? d.error : \"Failed to delete user\")); setConfirmDeleteUser(null); }\n } catch { act(\"Error: Network error\"); setConfirmDeleteUser(null); }\n };\n const clearRoomById = async (r: any) => {\n try {\n const res = await api(\"/api/rooms/\" + r.id + \"/messages\", { method: \"DELETE\" }, token);\n const d = await res.json().catch(() => ({}));\n if (res.ok) { act(\"Cleared all messages in \\\"\" + r.name + \"\\\"\"); setConfirmClearRoom(null); }\n else { act(\"Error: \" + (typeof d.error === \"string\" ? d.error : \"Failed to clear room\")); setConfirmClearRoom(null); }\n } catch { act(\"Error: Network error\"); setConfirmClearRoom(null); }\n };\n const filtered = users.filter((u: any) => u.username.toLowerCase().includes(search.toLowerCase()));\n return h(\"div\", { className: \"panel-overlay\", onClick: (e: any) => e.target === e.currentTarget && onClose() },\n h(\"div\", { className: \"panel animate-in\", style: { maxWidth: 680, width: \"95vw\" } },\n h(\"div\", { className: \"panel-header\" },\n h(\"h2\", null, h(\"span\", { style: { display: \"flex\", alignItems: \"center\", gap: \"0.4rem\" } }, h(Ico.shield), \"Admin Panel\")),\n h(\"button\", { className: \"icon-btn\", onClick: onClose }, h(Ico.close))\n ),\n msg && h(\"div\", { className: \"success-msg\" }, msg),\n h(\"div\", { style: { display: \"flex\", gap: \"0.5rem\", marginBottom: \"1rem\" } },\n h(\"button\", { className: \"btn btn-sm \" + (tab === \"users\" ? \"btn-primary\" : \"btn-ghost\"), onClick: () => setTab(\"users\") }, \"Users\"),\n h(\"button\", { className: \"btn btn-sm \" + (tab === \"rooms\" ? \"btn-primary\" : \"btn-ghost\"), onClick: () => setTab(\"rooms\") }, \"Rooms\")\n ),\n tab === \"users\" && h(\"div\", null,\n h(\"input\", { type: \"text\", placeholder: \"Search users…\", value: search, onChange: (e: any) => setSearch(e.target.value), style: { width: \"100%\", marginBottom: \"0.75rem\" } }),\n h(\"div\", { style: { display: \"flex\", gap: \"1rem\", marginBottom: \"0.75rem\", fontSize: \"0.78rem\", color: \"var(--text-muted)\", flexWrap: \"wrap\", alignItems: \"center\" } },\n h(\"label\", null, \"Ban (hrs):\", h(\"input\", { type: \"number\", value: banHrs, onChange: (e: any) => setBanHrs(e.target.value), style: { width: 50, marginLeft: 4 } })),\n h(\"label\", null, \"Mute (min):\", h(\"input\", { type: \"number\", value: muteMin, onChange: (e: any) => setMuteMin(e.target.value), style: { width: 50, marginLeft: 4 } })),\n h(\"label\", { style: { flex: 1, minWidth: 120 } }, h(\"input\", { type: \"text\", placeholder: \"Ban message (optional)\", value: banMsg, onChange: (e: any) => setBanMsg(e.target.value), style: { width: \"100%\" } }))\n ),\n h(\"div\", { style: { overflowX: \"auto\" } },\n h(\"table\", { className: \"admin-table\" },\n h(\"thead\", null, h(\"tr\", null, h(\"th\", null, \"Username\"), h(\"th\", null, \"Email\"), h(\"th\", null, \"Status\"), h(\"th\", null, \"Actions\"))),\n h(\"tbody\", null, filtered.map((u: any) => {\n const banned = u.is_banned && (!u.ban_expires_at || new Date(u.ban_expires_at) > new Date());\n const muted2 = u.is_muted && (!u.mute_expires_at || new Date(u.mute_expires_at) > new Date());\n const isAdminUser = u.username.toLowerCase() === \"mjk\";\n return h(\"tr\", { key: u.id },\n h(\"td\", { style: { fontWeight: 600 } }, u.username, isAdminUser && h(\"span\", { className: \"admin-badge\", style: { marginLeft: \"0.4rem\" } }, \"Admin\")),\n h(\"td\", { style: { color: \"var(--text-muted)\", fontSize: \"0.75rem\" } }, u.email),\n h(\"td\", null,\n isAdminUser ? h(\"span\", { className: \"status-ok\" }, \"PROTECTED\") :\n banned ? h(\"span\", { className: \"status-ban\" }, \"BANNED\") :\n muted2 ? h(\"span\", { className: \"status-mute\" }, \"MUTED\") :\n h(\"span\", { className: \"status-ok\" }, \"OK\")\n ),\n h(\"td\", null, isAdminUser\n ? h(\"span\", { style: { fontSize: \"0.75rem\", color: \"var(--text-dim)\", fontStyle: \"italic\" } }, \"No actions available\")\n : h(\"div\", { style: { display: \"flex\", gap: \"0.25rem\", flexWrap: \"wrap\", alignItems: \"center\" } },\n !banned\n ? h(Fragment, null,\n h(\"button\", { className: \"btn btn-danger btn-sm\", onClick: () => ban(u.id, Number(banHrs)) }, \"Ban \" + banHrs + \"h\"),\n h(\"button\", { className: \"btn btn-danger btn-sm\", onClick: () => ban(u.id, null) }, \"Ban ∞\")\n )\n : h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => unban(u.id) }, \"Unban\"),\n !muted2\n ? h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => mute(u.id) }, \"Mute\")\n : h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => unmute(u.id) }, \"Unmute\"),\n h(\"button\", { className: \"btn btn-danger btn-sm\", title: \"Delete account\", style: { padding: \"0.2rem 0.45rem\" }, onClick: () => setConfirmDeleteUser(u) }, h(Ico.trash))\n ))\n );\n }))\n )\n )\n ),\n tab === \"rooms\" && h(\"div\", null,\n h(\"table\", { className: \"admin-table\" },\n h(\"thead\", null, h(\"tr\", null, h(\"th\", null, \"Name\"), h(\"th\", null, \"Type\"), h(\"th\", null, \"ID\"), h(\"th\", null, \"Actions\"))),\n h(\"tbody\", null, rooms.map((r: any) => h(\"tr\", { key: r.id },\n h(\"td\", { style: { fontWeight: 600 } }, r.name),\n h(\"td\", null, r.type),\n h(\"td\", { style: { color: \"var(--text-muted)\" } }, r.id),\n h(\"td\", null,\n h(\"div\", { style: { display: \"flex\", gap: \"0.3rem\", flexWrap: \"wrap\" } },\n h(\"button\", {\n className: \"btn btn-ghost btn-sm\",\n title: \"Enter this chat room\",\n onClick: () => { onEnterRoom && onEnterRoom(r.id); onClose(); }\n }, \"Enter Chat\"),\n h(\"button\", {\n className: \"btn btn-danger btn-sm\",\n title: \"Delete all messages in this room\",\n onClick: () => setConfirmClearRoom(r)\n }, h(Ico.trash), \" Clear\")\n )\n )\n )))\n )\n ),\n confirmDeleteUser && h(ConfirmDialog, {\n title: \"Delete @\" + confirmDeleteUser.username + \"?\",\n message: \"This permanently deletes this account. Their messages will remain but show as [deleted]. This cannot be undone.\",\n danger: \"Yes, delete account\",\n onConfirm: () => deleteUserById(confirmDeleteUser),\n onCancel: () => setConfirmDeleteUser(null)\n }),\n confirmClearRoom && h(ConfirmDialog, {\n title: \"Clear \\\"\" + confirmClearRoom.name + \"\\\"?\",\n message: \"This will permanently delete ALL messages in this room. This cannot be undone.\",\n danger: \"Yes, clear all messages\",\n onConfirm: () => clearRoomById(confirmClearRoom),\n onCancel: () => setConfirmClearRoom(null)\n })\n )\n );\n}\n\n// ── UsersPanel ─────────────────────────────────────────────────────────────────\nexport function UsersPanel({ currentUser, token, onClose }: any) {\n const [users, setUsers] = useState([]);\n const [blocked, setBlocked] = useState(new Set());\n const [search, setSearch] = useState(\"\");\n const [msg, setMsg] = useState(\"\");\n const load = async () => {\n const [ur, br] = await Promise.all([\n api(\"/api/users\", {}, token).then((r: any) => r.json()),\n api(\"/api/users/blocked\", {}, token).then((r: any) => r.json())\n ]);\n if (ur.users) setUsers(ur.users.map((u: any) => ({ ...u, id: Number(u.id) })));\n if (br.blocked) setBlocked(new Set(br.blocked.map(Number)));\n };\n useEffect(() => { load(); }, []);\n const block = async (id: number, name: string) => {\n await api(\"/api/users/\" + id + \"/block\", { method: \"POST\" }, token);\n setBlocked((s: Set) => { const n = new Set(s); n.add(id); return n; });\n setMsg(\"Blocked \" + name); setTimeout(() => setMsg(\"\"), 2000);\n };\n const unblock = async (id: number, name: string) => {\n await api(\"/api/users/\" + id + \"/unblock\", { method: \"POST\" }, token);\n setBlocked((s: Set) => { const n = new Set(s); n.delete(id); return n; });\n setMsg(\"Unblocked \" + name); setTimeout(() => setMsg(\"\"), 2000);\n };\n const filtered = users.filter((u: any) => u.username.toLowerCase().includes(search.toLowerCase()) && u.id !== currentUser.id);\n return h(\"div\", { className: \"users-panel open\" },\n h(\"div\", { className: \"users-panel-header\" },\n h(\"span\", { style: { display: \"flex\", alignItems: \"center\", gap: \"0.4rem\" } }, h(Ico.users), \"Users\"),\n h(\"button\", { className: \"icon-btn\", onClick: onClose }, h(Ico.close))\n ),\n h(\"div\", { className: \"users-panel-search\" },\n h(\"input\", { type: \"text\", placeholder: \"Search…\", value: search, onChange: (e: any) => setSearch(e.target.value) })\n ),\n msg && h(\"div\", { className: \"success-msg\", style: { margin: \"0.5rem\" } }, msg),\n h(\"div\", { className: \"users-panel-list\" },\n filtered.length === 0 && h(\"div\", { style: { textAlign: \"center\", color: \"var(--text-dim)\", padding: \"1rem\", fontSize: \"0.82rem\" } }, \"No users found\"),\n filtered.map((u: any) => {\n const isBlocked = blocked.has(u.id);\n return h(\"div\", { key: u.id, className: \"user-row\", style: { justifyContent: \"space-between\" } },\n h(\"div\", { style: { display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" } },\n h(\"div\", { className: \"user-mini-avatar\" }, u.avatar_blob_key ? h(\"img\", { src: \"/api/blob/\" + u.avatar_blob_key, alt: \"\" }) : (u.username || \"?\")[0].toUpperCase()),\n h(\"div\", null,\n h(\"span\", null, u.username),\n isBlocked && h(\"div\", { style: { fontSize: \"0.7rem\", color: \"var(--danger)\", marginTop: 1 } }, \"Blocked\")\n )\n ),\n isBlocked\n ? h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => unblock(u.id, u.username) }, \"Unblock\")\n : h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => block(u.id, u.username) }, \"Block\")\n );\n })\n )\n );\n}\n","deleted","label",[186,187,168],"frontend","components","permalink","https://www.val.town/x/jeannettehauck/Kikko/code/frontend/components/panels.ts","extension","actionData","errors"]