function HeaderNoSeatchBar() { return /*#__PURE__*/ React.createElement("header", { className: "w-full h-[85px] bg-[#0099c6] flex items-center justify-between shadow-md mb-6 px-4 md:px-12 relative", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/bbdc65e9-2490-44d8-8342-92dcce50d364/-/format/auto/", alt: "Travel Darts Logo", className: "h-[60px] w-auto md:h-[70px]", style: { display: "block" }, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function HeaderNoSeatchBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(HeaderNoSeatchBar, { __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function SocialNavigationBar({ user, profilePhotoUrl, notifications, active, setShowChatPopup }) { const [notificationCount, setNotificationCount] = React.useState(0); const [showNotifications, setShowNotifications] = React.useState(false); const [notificationsList, setNotificationsList] = React.useState([]); const [notificationsLoading, setNotificationsLoading] = React.useState(false); const [notificationsError, setNotificationsError] = React.useState(null); const [blockToggles1, setBlockToggles] = React.useState({}); const [notificationToggles1, setNotificationToggles] = React.useState({}); const [floatingMenuIdx, setFloatingMenuIdx1] = React.useState(null); const [floatingMenuPos, setFloatingMenuPos] = React.useState({ top: 0, left: 0 }); const menuButtonRefs = React.useRef({}); const [profileImage, setProfileImage] = React.useState(null); React.useEffect(()=>{ async function fetchProfileImage() { try { const res = await fetch("/api/getcurrentuserprofileimage", { method: "POST" }); if (!res.ok) throw new Error(); const data = await res.json(); setProfileImage(data && data.profile_image ? data.profile_image : null); } catch { setProfileImage(null); } } if (user && user.id) fetchProfileImage(); }, [ user ]); const isMobile = typeof window !== "undefined" ? window.innerWidth < 768 : false; // Pas navItems aan op basis van of user is ingelogd const navItems = React.useMemo(()=>{ if (user && user.id) { return [ { key: "profile", href: "/profile", icon: profileImage ? /*#__PURE__*/ React.createElement("img", { src: profileImage, alt: "User profile photo", className: "w-7 h-7 rounded-full object-cover", style: { display: "inline-block" }, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user text-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), label: "Profile" }, { key: "users", href: "/users", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user text-xl", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }), label: "Users" }, { key: "explore", href: "/explore", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-map-location-dot text-xl", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }), label: "Explore" }, { key: "message", href: "#", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-comment text-xl", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }), label: "Message" }, { key: "dart", href: "/draaiende-kaart", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-light fa-earth-americas text-xl", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }), label: "Dart" }, { key: "notifications", href: "#", icon: /*#__PURE__*/ React.createElement("span", { className: "relative", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-bell text-xl", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }), notificationCount > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-2 bg-[#d32f2f] text-white text-xs rounded-full px-1.5 font-bold min-w-[18px] text-center", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, notificationCount > 9 ? "9+" : notificationCount)), label: "Notifications" } ]; } else { return [ { key: "signin", href: "/sign-in", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user text-xl", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }), label: "Sign-in" }, { key: "users", href: "/users", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user text-xl", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }), label: "Users" }, { key: "explore", href: "/explore", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-map-location-dot text-xl", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }), label: "Explore" }, { key: "dart", href: "/", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-light fa-earth-americas text-xl", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }), label: "Dart" } ]; } }, [ user, profileImage, notificationCount ]); const [showChatPopup, setShowChatPopupLocal] = React.useState(false); const [chatList, setChatList] = React.useState([]); const [chatLoading, setChatLoading] = React.useState(false); const [chatError, setChatError] = React.useState(null); const [menuOpen, setMenuOpen] = React.useState(null); const [newChatUsers, setNewChatUsers] = React.useState([]); const [newChatLoading, setNewChatLoading] = React.useState(false); const [newChatError, setNewChatError] = React.useState(null); const [newChatSearch, setNewChatSearch] = React.useState(""); const [showNewChat, setShowNewChat] = React.useState(false); const [search, setSearch] = React.useState(""); const [following, setFollowing] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [activeChatUser, setActiveChatUser1] = React.useState(null); const [blockedUsers, setBlockedUsers] = React.useState([]); // State for message privacy const [messagePrivacy, setMessagePrivacy] = React.useState("Everyone"); const [savingPrivacy, setSavingPrivacy] = React.useState(false); const [privacyError, setPrivacyError] = React.useState(null); // Load current privacy setting on mount (if user is logged in) React.useEffect(()=>{ if (!user || !user.id) return; fetch("/api/getmessageprivacy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not get privacy settings"); return res.json(); }).then((data)=>{ if (data && data.message_privacy) setMessagePrivacy(data.message_privacy); }).catch(()=>{}); }, [ user ]); React.useEffect(()=>{ if (!user || !user.id) return; fetch("/api/countunreadnotifications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then((res)=>res.json()).then((data)=>setNotificationCount(data.aantal || 0)).catch(()=>setNotificationCount(0)); }, [ user ]); React.useEffect(()=>{ if (!showNotifications || !user || !user.id) return; setNotificationsLoading(true); setNotificationsError(null); fetch("/api/listnotifications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then((res)=>res.json()).then((data)=>setNotificationsList(data.notifications || [])).catch(()=>setNotificationsError("Kon notificaties niet laden")).finally(()=>setNotificationsLoading(false)); }, [ showNotifications, user ]); React.useEffect(()=>{ if (!showChatPopup || !user || !user.id) return; setChatLoading(true); setChatError(null); // Haal eerst de lijst met chats op fetch("/api/listuserchats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch chat list"); return res.json(); }).then(async (data)=>{ let chats = []; if (Array.isArray(data)) { chats = data; } else if (data && Array.isArray(data.chats)) { chats = data.chats; } else if (data && Array.isArray(data.conversations)) { chats = data.conversations; } else if (data && data.conversations === undefined && data.chats === undefined && data.length === 0) { chats = []; } // Direct setten, geen extra filtering meer setChatList(chats); }).catch(()=>{ setChatError("Could not load chat list"); setChatList([]); }).finally(()=>setChatLoading(false)); }, [ showChatPopup, user ]); React.useEffect(()=>{ if (!showNewChat || !user || !user.id) return; setLoading(true); setError(null); fetch("/api/messageableusers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id, search }) }).then(async (res)=>{ if (!res.ok) throw new Error("Kon lijst niet ophalen"); return res.json(); }).then((data)=>{ setFollowing((data.users || []).filter((u)=>u && (u.user_id || u.id) && u.name && u.username)); setLoading(false); }).catch((err)=>{ setError("Kon lijst niet ophalen"); setFollowing([]); setLoading(false); }); }, [ showNewChat, user, search ]); React.useEffect(()=>{ if (menuOpen !== "new-chat" || !user || !user.id) return; setNewChatLoading(true); setNewChatError(null); fetch("/api/messageableusers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id, search: newChatSearch }) }).then(async (res)=>{ if (!res.ok) throw new Error("Kon gebruikers niet ophalen"); return res.json(); }).then((data)=>{ // Toon ALTIJD alle users, ook geblokkeerde setNewChatUsers((data.users || []).filter((u)=>u && (u.user_id || u.id) && u.name && u.username)); setNewChatLoading(false); }).catch((err)=>{ setNewChatError("Kon gebruikers niet ophalen"); setNewChatUsers([]); setNewChatLoading(false); }); }, [ menuOpen, user, newChatSearch ]); React.useEffect(()=>{ if (!showNewChat || !user || !user.id) return; setLoading(true); setError(null); fetch("/api/listblockedusers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then((res)=>res.json()).then((data)=>{ if (Array.isArray(data.blocked)) { setBlockedUsers(data.blocked); const toggles = {}; data.blocked.forEach((u)=>{ toggles[u.blocked_id || u.user_id || u.id] = true; }); setBlockToggles((prev)=>({ ...prev, ...toggles })); } }).catch(()=>{}); }, [ showNewChat, user ]); // Toggle blokkeer status async function handleToggleBlock(chat) { const chatId = chat.other_user_id || chat.id || chat.username; const isBlocked = blockToggles1[chatId] || false; if (!isBlocked) { // Blokkeren try { await fetch("/api/blockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: chatId }) }); setBlockToggles((prev)=>({ ...prev, [chatId]: true })); } catch (e) { alert("Kon gebruiker niet blokkeren"); } } else { // Deblokkeren try { await fetch("/api/unblockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: chatId }) }); setBlockToggles((prev)=>({ ...prev, [chatId]: false })); } catch (e) { alert("Kon gebruiker niet deblokkeren"); } } } // Toggle notificaties per chat async function handleToggleNotifications1(chat) { const chatId = chat.other_user_id || chat.id || chat.username; const current = notificationToggles1[chatId] || false; setNotificationToggles((prev)=>({ ...prev, [chatId]: !current })); try { const endpoint = !current ? "/api/enablenotificationsforuser" : "/api/disablenotificationsforuser"; await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id, other_user_id: chatId }) }); } catch (e) { alert("Kon notificatie-instelling niet wijzigen"); } } // Profiel bekijken function handleViewProfile(chat) { const username = chat.other_username || chat.username || ""; window.location.href = `/user?username=${encodeURIComponent(username)}`; } function handleNavClick(item) { if (item.key === "message" && user && user.id) { setShowChatPopupLocal(true); } else if (item.key === "notifications" && user && user.id) { setShowNotifications(true); } else if (item.key === "signin") { window.location.href = "/account/signin"; } else if (item.href && item.href !== "#") { window.location.href = item.href; } } React.useEffect(()=>{ function handleClick(e) { if (floatingMenuIdx !== null) setFloatingMenuIdx1(null); } if (floatingMenuIdx !== null) { window.addEventListener("click", handleClick); return ()=>window.removeEventListener("click", handleClick); } }, [ floatingMenuIdx ]); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 w-full z-[9999] bg-[#0099c6] border-t border-[#0077b6] flex flex-row items-center justify-between px-1 md:px-8", style: { minHeight: 60, boxShadow: "0 -2px 8px 0 rgba(0,0,0,0.07)" }, __source: { fileName: "", lineNumber: 397, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-row w-full justify-between items-center", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 404, columnNumber: 9 }, __self: this }, navItems.map((item, idx)=>{ const isActive = active === item.key; const baseClasses = "flex flex-col md:flex-row items-center justify-center gap-0.5 md:gap-2 px-2 py-2 md:px-4 md:py-2 rounded-lg font-roboto transition text-white hover:bg-[#0077b6] focus:bg-[#0077b6] cursor-pointer"; const activeClasses = isActive ? "bg-[#0077b6] font-bold" : ""; if (item.key === "message" || item.key === "notifications") { return /*#__PURE__*/ React.createElement("li", { key: item.key, className: "flex-1 flex justify-center min-w-0", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 417, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: `${baseClasses} ${active === item.key ? "bg-[#0077b6] font-bold" : ""}`, style: { minWidth: 0, width: isMobile ? "100%" : undefined, maxWidth: isMobile ? "100%" : undefined, flex: 1, textAlign: "center", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: isMobile ? 0 : 8, fontSize: 16, padding: isMobile ? "8px 0" : "10px 0" }, "aria-label": item.label, onClick: ()=>handleNavClick(item), __source: { fileName: "", lineNumber: 422, columnNumber: 19 }, __self: this }, item.icon, /*#__PURE__*/ React.createElement("span", { className: `hidden md:inline font-roboto text-base ml-2`, style: { color: "#fff", fontWeight: active === item.key ? 700 : 500, letterSpacing: 0.1 }, __source: { fileName: "", lineNumber: 444, columnNumber: 21 }, __self: this }, item.label))); } return /*#__PURE__*/ React.createElement("li", { key: item.key, className: "flex-1 flex justify-center min-w-0", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 459, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.href, className: `${baseClasses} ${active === item.key ? "bg-[#0077b6] font-bold" : ""}`, style: { minWidth: 0, width: isMobile ? "100%" : undefined, maxWidth: isMobile ? "100%" : undefined, flex: 1, textAlign: "center", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: isMobile ? 0 : 8, fontSize: 16, padding: isMobile ? "8px 0" : "10px 0" }, "aria-label": item.label, __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this }, item.icon, /*#__PURE__*/ React.createElement("span", { className: `hidden md:inline font-roboto text-base ml-2`, style: { color: "#fff", fontWeight: active === item.key ? 700 : 500, letterSpacing: 0.1 }, __source: { fileName: "", lineNumber: 485, columnNumber: 19 }, __self: this }, item.label))); }))), showChatPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-60 flex items-center justify-center bg-black bg-opacity-40", __source: { fileName: "", lineNumber: 502, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 503, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 pt-4 pb-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 504, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 ml-auto", __source: { fileName: "", lineNumber: 505, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-xl mr-2", "aria-label": "Start new chat", onClick: ()=>{ setMenuOpen("new-chat"); }, __source: { fileName: "", lineNumber: 506, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-pen-to-square", __source: { fileName: "", lineNumber: 513, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-2xl", onClick: ()=>setShowChatPopupLocal(false), "aria-label": "Close chat popup", __source: { fileName: "", lineNumber: 515, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 520, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pt-3", __source: { fileName: "", lineNumber: 524, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 525, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search in chats", className: "w-full border border-[#eee] rounded-md px-9 py-2 mb-3 focus:outline-none focus:border-[#0099c6] font-roboto bg-[#f7fafd]", style: { fontSize: 15 }, __source: { fileName: "", lineNumber: 526, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-[#aaa] text-base", __source: { fileName: "", lineNumber: 532, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 mb-2", __source: { fileName: "", lineNumber: 535, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#444] text-sm mb-1 mt-1", __source: { fileName: "", lineNumber: 536, columnNumber: 15 }, __self: this }, "Who can message me?"), /*#__PURE__*/ React.createElement("select", { className: "w-full border border-[#eee] rounded-md px-3 py-2 font-roboto bg-[#e9eefd] text-[#444] text-sm", value: messagePrivacy, onChange: async (e)=>{ const newValue = e.target.value; setMessagePrivacy(newValue); setSavingPrivacy(true); setPrivacyError(null); try { const res = await fetch("/api/updatemessageprivacy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id, message_privacy: newValue }) }); if (!res.ok) throw new Error("Kon privacy-instelling niet opslaan"); } catch (err) { setPrivacyError("Kon privacy-instelling niet opslaan"); } finally{ setSavingPrivacy(false); } }, disabled: savingPrivacy, __source: { fileName: "", lineNumber: 539, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Everyone", __source: { fileName: "", lineNumber: 566, columnNumber: 17 }, __self: this }, "Everyone"), /*#__PURE__*/ React.createElement("option", { value: "No one", __source: { fileName: "", lineNumber: 567, columnNumber: 17 }, __self: this }, "No one"), /*#__PURE__*/ React.createElement("option", { value: "People who follow me", __source: { fileName: "", lineNumber: 568, columnNumber: 17 }, __self: this }, "People who follow me"), /*#__PURE__*/ React.createElement("option", { value: "People I follow", __source: { fileName: "", lineNumber: 571, columnNumber: 17 }, __self: this }, "People I follow")), privacyError && /*#__PURE__*/ React.createElement("div", { className: "text-red-600 text-xs mt-1", __source: { fileName: "", lineNumber: 574, columnNumber: 17 }, __self: this }, privacyError)), blockedUsers.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 578, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#d32f2f] text-sm mb-1", __source: { fileName: "", lineNumber: 579, columnNumber: 17 }, __self: this }, "Blocked users"), blockedUsers.map((blockedUser)=>/*#__PURE__*/ React.createElement("div", { key: blockedUser.blocked_id || blockedUser.user_id || blockedUser.id, className: "flex items-center gap-3 py-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 583, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: blockedUser.profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: "Blocked user", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 591, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 599, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 600, columnNumber: 23 }, __self: this }, blockedUser.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 602, columnNumber: 25 }, __self: this }, "@", blockedUser.username))), /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-3 py-1 bg-[#0099c6] text-white rounded-full text-xs font-bold hover:bg-[#0077b6] transition", onClick: async (e)=>{ e.stopPropagation(); try { await fetch("/api/unblockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: blockedUser.blocked_id || blockedUser.user_id || blockedUser.id }) }); setBlockToggles((prev)=>({ ...prev, [blockedUser.blocked_id || blockedUser.user_id || blockedUser.id]: false })); setBlockedUsers((prev)=>prev.filter((u)=>(u.blocked_id || u.user_id || u.id) !== (blockedUser.blocked_id || blockedUser.user_id || blockedUser.id))); } catch (err) { alert("Could not unblock user"); } }, __source: { fileName: "", lineNumber: 607, columnNumber: 21 }, __self: this }, "Unblock")))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[300px] px-2 pb-4", __source: { fileName: "", lineNumber: 648, columnNumber: 13 }, __self: this }, chatLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 650, columnNumber: 17 }, __self: this }, "Loading...") : chatError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 654, columnNumber: 17 }, __self: this }, chatError) : Array.isArray(chatList) && chatList.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 658, columnNumber: 17 }, __self: this }, "No chats found.") : Array.isArray(chatList) && chatList.length > 0 ? chatList.map((chat, idx)=>/*#__PURE__*/ React.createElement("div", { key: chat.other_user_id || chat.id || idx, className: "flex items-center gap-3 py-2 border-b border-[#eee] cursor-pointer hover:bg-[#f7fafd] group relative", onClick: ()=>{ if (floatingMenuIdx !== idx) { setActiveChatUser1(chat.other_user_id || chat.username || chat.id); } }, __source: { fileName: "", lineNumber: 663, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: chat.other_profile_image || chat.img || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: "User", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 674, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 683, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 684, columnNumber: 23 }, __self: this }, chat.other_name || chat.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 686, columnNumber: 25 }, __self: this }, "@", chat.other_username || chat.username)), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666] truncate", __source: { fileName: "", lineNumber: 690, columnNumber: 23 }, __self: this }, chat.last_message ? chat.last_message.slice(0, 40) : chat.message || "(geen berichten)", chat.last_message_time && /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#aaa] ml-2", __source: { fileName: "", lineNumber: 695, columnNumber: 27 }, __self: this }, "· ", chat.last_message_time))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center ml-2", __source: { fileName: "", lineNumber: 701, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 702, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { ref: (el)=>menuButtonRefs.current[idx] = el, className: "bg-[#0099c6] w-7 h-7 rounded-full flex items-center justify-center focus:outline-none", onClick: (e)=>{ e.stopPropagation(); const rect = menuButtonRefs.current[idx]?.getBoundingClientRect(); setFloatingMenuPos({ top: rect ? rect.bottom + window.scrollY : 100, left: rect ? rect.left + window.scrollX : 100 }); setFloatingMenuIdx1(idx); }, tabIndex: 0, "aria-label": "More options", __source: { fileName: "", lineNumber: 703, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", style: { lineHeight: 0 }, __source: { fileName: "", lineNumber: 721, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-ellipsis-vertical", __source: { fileName: "", lineNumber: 725, columnNumber: 29 }, __self: this }))), floatingMenuIdx === idx && /*#__PURE__*/ React.createElement("div", { className: "fixed z-[9999] bg-white border border-[#eee] rounded-lg shadow-lg min-w-[180px] text-left", style: { top: floatingMenuPos.top, left: (()=>{ const menuWidth = 200; const screenWidth = typeof window !== "undefined" ? window.innerWidth : 400; // Als het menu buiten het scherm valt, open naar links if (floatingMenuPos.left + menuWidth > screenWidth) { return Math.max(0, floatingMenuPos.left - menuWidth); } // Extra: als er weinig ruimte rechts is (bijv. op mobiel), altijd naar links openen if (screenWidth - floatingMenuPos.left < menuWidth + 20) { return Math.max(0, floatingMenuPos.left - menuWidth); } return floatingMenuPos.left; })(), boxShadow: "0 4px 16px 0 rgba(0,0,0,0.12)" }, onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 729, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1 p-2", __source: { fileName: "", lineNumber: 765, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded text-[#d32f2f] font-roboto", onClick: async (e)=>{ e.stopPropagation(); if (window.confirm("Are you sure you want to delete this chat?")) { try { const sender_id = user.id; const receiver_id = chat.other_user_id || chat.id || chat.username; const res = await fetch("/api/deletechat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id, receiver_id }) }); if (!res.ok) { const data = await res.json().catch(()=>({})); throw new Error(data.error || "Could not delete chat"); } setChatList((prev)=>prev.filter((c, i)=>i !== idx)); setFloatingMenuIdx1(null); } catch (err) { alert(err.message || "Could not delete chat"); } } }, __source: { fileName: "", lineNumber: 766, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-trash-can", __source: { fileName: "", lineNumber: 814, columnNumber: 33 }, __self: this }), " Delete chat"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded", __source: { fileName: "", lineNumber: 817, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: !!blockToggles1[chat.other_user_id || chat.id || chat.username], onChange: (e)=>{ e.stopPropagation(); handleToggleBlock(chat); }, className: "accent-[#d32f2f]", style: { width: 16, height: 16 }, __source: { fileName: "", lineNumber: 818, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#d32f2f] font-roboto", __source: { fileName: "", lineNumber: 834, columnNumber: 33 }, __self: this }, "Block")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded", __source: { fileName: "", lineNumber: 838, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: !!notificationToggles1[chat.other_user_id || chat.id || chat.username], onChange: (e)=>{ e.stopPropagation(); handleToggleNotifications1(chat); }, className: "accent-[#0099c6]", style: { width: 16, height: 16 }, __source: { fileName: "", lineNumber: 839, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#222] font-roboto", __source: { fileName: "", lineNumber: 855, columnNumber: 33 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("button", { className: "w-full text-left px-2 py-1 hover:bg-[#f7fafd] text-[#0099c6] font-roboto flex items-center gap-2 rounded", onClick: (e)=>{ e.stopPropagation(); handleViewProfile(chat); setFloatingMenuIdx1(null); }, __source: { fileName: "", lineNumber: 859, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user", __source: { fileName: "", lineNumber: 867, columnNumber: 33 }, __self: this }), " View profile"))))))) : null)), menuOpen === "new-chat" && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-white bg-opacity-95 flex flex-col items-center justify-center z-50 rounded-xl p-4", __source: { fileName: "", lineNumber: 881, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[320px]", __source: { fileName: "", lineNumber: 882, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 883, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-[#0099c6]", __source: { fileName: "", lineNumber: 884, columnNumber: 19 }, __self: this }, "Start new chat"), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-xl", onClick: ()=>setMenuOpen(null), "aria-label": "Close search", __source: { fileName: "", lineNumber: 887, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 892, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search user...", className: "w-full border border-[#eee] rounded-md px-3 py-2 mb-3 focus:outline-none focus:border-[#0099c6] font-roboto bg-[#f7fafd]", style: { fontSize: 15 }, value: newChatSearch, onChange: (e)=>setNewChatSearch(e.target.value), __source: { fileName: "", lineNumber: 895, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[220px]", __source: { fileName: "", lineNumber: 903, columnNumber: 17 }, __self: this }, newChatLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-4", __source: { fileName: "", lineNumber: 905, columnNumber: 21 }, __self: this }, "Loading...") : newChatError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-4", __source: { fileName: "", lineNumber: 909, columnNumber: 21 }, __self: this }, newChatError) : Array.isArray(newChatUsers) && newChatUsers.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-4", __source: { fileName: "", lineNumber: 914, columnNumber: 21 }, __self: this }, "No users found.") : Array.isArray(newChatUsers) && newChatUsers.length > 0 ? newChatUsers.filter((u)=>!newChatSearch || u.name && u.name.toLowerCase().includes(newChatSearch.toLowerCase()) || u.username && u.username.toLowerCase().includes(newChatSearch.toLowerCase())).map((otherUser, idx)=>{ // Gebruik de juiste blocked property van de API response const isBlocked = otherUser.blocked || otherUser.isBlocked; return /*#__PURE__*/ React.createElement("div", { key: otherUser.user_id || otherUser.id, className: "flex items-center gap-3 py-2 border-b border-[#eee] cursor-pointer hover:bg-[#f7fafd] group relative", __source: { fileName: "", lineNumber: 936, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: otherUser.profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: "User", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 940, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 948, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 949, columnNumber: 31 }, __self: this }, otherUser.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 951, columnNumber: 33 }, __self: this }, "@", otherUser.username))), isBlocked ? /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-3 py-1 bg-[#0099c6] text-white rounded-full text-xs font-bold hover:bg-[#0077b6] transition", onClick: async (e)=>{ e.stopPropagation(); try { await fetch("/api/unblockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: otherUser.user_id || otherUser.id }) }); setBlockToggles((prev)=>({ ...prev, [otherUser.user_id || otherUser.id]: false })); setNewChatUsers((prev)=>prev.map((u)=>(u.user_id || u.id) === (otherUser.user_id || otherUser.id) ? { ...u, blocked: false, isBlocked: false } : u)); } catch (err) { alert("Could not unblock user"); } }, __source: { fileName: "", lineNumber: 957, columnNumber: 31 }, __self: this }, "Unblock") : /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-3 py-1 bg-[#d32f2f] text-white rounded-full text-xs font-bold hover:bg-[#b71c1c] transition", onClick: async (e)=>{ e.stopPropagation(); try { await fetch("/api/blockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: otherUser.user_id || otherUser.id }) }); setBlockToggles((prev)=>({ ...prev, [otherUser.user_id || otherUser.id]: true })); setNewChatUsers((prev)=>prev.map((u)=>(u.user_id || u.id) === (otherUser.user_id || otherUser.id) ? { ...u, blocked: true, isBlocked: true } : u)); } catch (err) { alert("Could not block user"); } }, __source: { fileName: "", lineNumber: 997, columnNumber: 31 }, __self: this }, "Block"), /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-3 py-1 bg-[#0099c6] text-white rounded-full text-xs font-bold hover:bg-[#0077b6] transition", onClick: async ()=>{ setNewChatLoading(true); setNewChatError(null); try { setActiveChatUser1(otherUser.user_id || otherUser.id); setMenuOpen(null); } catch (e) { setNewChatError("Could not open chat"); } finally{ setNewChatLoading(false); } }, __source: { fileName: "", lineNumber: 1036, columnNumber: 29 }, __self: this }, "Chat")); }) : null)))), showNewChat && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-70 flex items-center justify-center bg-black bg-opacity-40", __source: { fileName: "", lineNumber: 1066, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 1067, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 pt-4 pb-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 1068, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#0099c6]", __source: { fileName: "", lineNumber: 1069, columnNumber: 15 }, __self: this }, "Start new chat"), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-2xl", onClick: ()=>setShowNewChat(false), "aria-label": "Close new chat popup", __source: { fileName: "", lineNumber: 1072, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 1077, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pt-3", __source: { fileName: "", lineNumber: 1080, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1081, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search users you follow...", className: "w-full border border-[#eee] rounded-md px-9 py-2 mb-3 focus:outline-none focus:border-[#0099c6] font-roboto bg-[#f7fafd]", style: { fontSize: 15 }, value: search, onChange: (e)=>setSearch(e.target.value), __source: { fileName: "", lineNumber: 1082, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-[#aaa] text-base", __source: { fileName: "", lineNumber: 1090, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[300px] px-2 pb-4", __source: { fileName: "", lineNumber: 1093, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1095, columnNumber: 17 }, __self: this }, "Loading...") : error ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1099, columnNumber: 17 }, __self: this }, error) : following.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 1103, columnNumber: 17 }, __self: this }, "No users found you can message.") : following.map((u, idx)=>/*#__PURE__*/ React.createElement("div", { key: u.user_id || u.id, className: "flex items-center gap-3 py-2 border-b border-[#f0f0f0] cursor-pointer hover:bg-[#f7fafd] group", onClick: ()=>{ window.location.href = `/chat?user=${encodeURIComponent(u.username)}`; setShowNewChat(false); }, __source: { fileName: "", lineNumber: 1108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: u.profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: u.name, className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 1118, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1126, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 1127, columnNumber: 23 }, __self: this }, u.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 1129, columnNumber: 25 }, __self: this }, "@", u.username)))))))), activeChatUser && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-80 flex items-center justify-center bg-black bg-opacity-60", __source: { fileName: "", lineNumber: 1142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 1143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(PopupChat, { userId: user.id, otherUserId: activeChatUser, onClose: ()=>setActiveChatUser1(null), __source: { fileName: "", lineNumber: 1144, columnNumber: 13 }, __self: this }))), showNotifications && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-70 flex items-center justify-center bg-black bg-opacity-40", __source: { fileName: "", lineNumber: 1153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 1154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 pt-4 pb-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 1155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#0099c6]", __source: { fileName: "", lineNumber: 1156, columnNumber: 15 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#d32f2f] hover:text-[#b71c1c] text-base font-bold px-3 py-1 rounded transition border border-[#eee] mr-2", onClick: async ()=>{ if (!user || !user.id) return; if (!window.confirm("Weet je zeker dat je alle notificaties wilt verwijderen?")) return; try { const res = await fetch("/api/delete-all-notifications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }); if (!res.ok) throw new Error("Kon alle notificaties niet verwijderen"); setNotificationsList([]); setNotificationCount(0); } catch (err) { alert("Kon alle notificaties niet verwijderen"); } }, "aria-label": "Delete all notifications", __source: { fileName: "", lineNumber: 1160, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-trash-can mr-1", __source: { fileName: "", lineNumber: 1188, columnNumber: 19 }, __self: this }), " Delete all"), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-2xl", onClick: ()=>setShowNotifications(false), "aria-label": "Close notifications", __source: { fileName: "", lineNumber: 1190, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 1195, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[400px] px-4 py-2", __source: { fileName: "", lineNumber: 1199, columnNumber: 13 }, __self: this }, notificationsLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1201, columnNumber: 17 }, __self: this }, "Loading...") : notificationsError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1205, columnNumber: 17 }, __self: this }, notificationsError) : notificationsList.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 1209, columnNumber: 17 }, __self: this }, "No notifications.") : notificationsList.map((n)=>/*#__PURE__*/ React.createElement("div", { key: n.id, className: "flex items-center gap-3 py-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 1214, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: n.actor_profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: n.actor_name, className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 1218, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1226, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 1227, columnNumber: 23 }, __self: this }, n.actor_name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 1229, columnNumber: 25 }, __self: this }, "@", n.actor_username)), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666] truncate", __source: { fileName: "", lineNumber: 1233, columnNumber: 23 }, __self: this }, n.type === "like" && "Liked your post", n.type === "comment" && "Commented on your post", n.type === "chat" && "Sent you a chat message", n.message && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1237, columnNumber: 39 }, __self: this }, ": ", n.message)), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#aaa]", __source: { fileName: "", lineNumber: 1239, columnNumber: 23 }, __self: this }, new Date(n.created_at).toLocaleString())), /*#__PURE__*/ React.createElement("button", { className: "text-[#d32f2f] hover:text-[#b71c1c] text-lg px-2 py-1 rounded transition border border-[#eee]", "aria-label": "Delete notification", onClick: async ()=>{ if (!user || !user.id) return; try { const res = await fetch("/api/delete-notification", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ notification_id: n.id, user_id: user.id }) }); if (!res.ok) throw new Error("Kon notificatie niet verwijderen"); setNotificationsList((prev)=>prev.filter((x)=>x.id !== n.id)); setNotificationCount((prev)=>Math.max(0, prev - 1)); } catch (err) { alert("Kon notificatie niet verwijderen"); } }, __source: { fileName: "", lineNumber: 1243, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-trash-can", __source: { fileName: "", lineNumber: 1268, columnNumber: 23 }, __self: this })))))))); } function SocialNavigationBarStory() { const { data: user, loading: userLoading } = useUser(); const [showChatPopup, setShowChatPopup] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(null); function handleBlockUser(chat) { setMenuOpen(null); alert(`User ${chat.name} blocked!`); } function handleDisableNotifications(chat) { handleToggleNotifications(chat); } function handleViewProfile(chat) { window.location.href = `/profile/${(chat.username || chat.other_username || "").replace("@", "")}`; } React.useEffect(()=>{ function handleClick(e) { if (menuOpen !== null) setMenuOpen(null); } if (menuOpen !== null) { window.addEventListener("click", handleClick); return ()=>window.removeEventListener("click", handleClick); } }, [ menuOpen ]); const [chatList, setChatList] = React.useState([]); const [chatLoading, setChatLoading] = React.useState(false); const [chatError, setChatError] = React.useState(null); React.useEffect(()=>{ if (!user || !user.id) return; setChatLoading(true); setChatError(null); fetch("/api/listuserchats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch chat list"); return res.json(); }).then(async (data)=>{ let chats = []; if (Array.isArray(data)) { chats = data; } else if (data && Array.isArray(data.chats)) { chats = data.chats; } else if (data && Array.isArray(data.conversations)) { chats = data.conversations; } else if (data && data.conversations === undefined && data.chats === undefined && data.length === 0) { chats = []; } // Direct setten, geen extra filtering meer setChatList(chats); }).catch(()=>{ setChatError("Could not load chat list"); setChatList([]); }).finally(()=>setChatLoading(false)); }, [ user ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-[300px] bg-[#fffbe9] flex flex-col justify-end", __source: { fileName: "", lineNumber: 1354, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 1355, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SocialNavigationBar, { user: { name: "Jane Doe" }, profilePhotoUrl: "https://randomuser.me/api/portraits/women/44.jpg", notifications: 3, active: "explore", setShowChatPopup: setShowChatPopup, __source: { fileName: "", lineNumber: 1356, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[80px]", __source: { fileName: "", lineNumber: 1363, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 1364, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SocialNavigationBar, { user: { name: "John Smith" }, profilePhotoUrl: "", notifications: 0, active: "profile", setShowChatPopup: setShowChatPopup, __source: { fileName: "", lineNumber: 1365, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[80px]", __source: { fileName: "", lineNumber: 1372, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 1373, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SocialNavigationBar, { user: { name: "No Photo" }, profilePhotoUrl: null, notifications: 12, active: "notifications", setShowChatPopup: setShowChatPopup, __source: { fileName: "", lineNumber: 1374, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[80px]", __source: { fileName: "", lineNumber: 1381, columnNumber: 7 }, __self: this }), showChatPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-60 flex items-center justify-center bg-black bg-opacity-40", __source: { fileName: "", lineNumber: 1383, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 1384, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 pt-4 pb-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 1385, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 ml-auto", __source: { fileName: "", lineNumber: 1386, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-xl mr-2", "aria-label": "Start new chat", onClick: ()=>{ setMenuOpen("new-chat"); }, __source: { fileName: "", lineNumber: 1387, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-pen-to-square", __source: { fileName: "", lineNumber: 1394, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-2xl", onClick: ()=>setShowChatPopup(false), "aria-label": "Close chat popup", __source: { fileName: "", lineNumber: 1396, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 1401, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pt-3", __source: { fileName: "", lineNumber: 1405, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1406, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search in chats", className: "w-full border border-[#eee] rounded-md px-9 py-2 mb-3 focus:outline-none focus:border-[#0099c6] font-roboto bg-[#f7fafd]", style: { fontSize: 15 }, __source: { fileName: "", lineNumber: 1407, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-[#aaa] text-base", __source: { fileName: "", lineNumber: 1413, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 mb-2", __source: { fileName: "", lineNumber: 1416, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#444] text-sm mb-1 mt-1", __source: { fileName: "", lineNumber: 1417, columnNumber: 15 }, __self: this }, "Who can message me?"), /*#__PURE__*/ React.createElement("select", { className: "w-full border border-[#eee] rounded-md px-3 py-2 font-roboto bg-[#e9eefd] text-[#444] text-sm", __source: { fileName: "", lineNumber: 1420, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Everyone", __source: { fileName: "", lineNumber: 1421, columnNumber: 17 }, __self: this }, "Everyone"), /*#__PURE__*/ React.createElement("option", { value: "No one", __source: { fileName: "", lineNumber: 1422, columnNumber: 17 }, __self: this }, "No one"), /*#__PURE__*/ React.createElement("option", { value: "People who follow me", __source: { fileName: "", lineNumber: 1423, columnNumber: 17 }, __self: this }, "People who follow me"), /*#__PURE__*/ React.createElement("option", { value: "People I follow", __source: { fileName: "", lineNumber: 1426, columnNumber: 17 }, __self: this }, "People I follow"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[300px] px-2 pb-4", __source: { fileName: "", lineNumber: 1429, columnNumber: 13 }, __self: this }, chatLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1431, columnNumber: 17 }, __self: this }, "Loading...") : chatError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1435, columnNumber: 17 }, __self: this }, chatError) : Array.isArray(chatList) && chatList.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 1439, columnNumber: 17 }, __self: this }, "No chats found.") : Array.isArray(chatList) && chatList.length > 0 ? chatList.map((chat, idx)=>/*#__PURE__*/ React.createElement("div", { key: chat.other_user_id || idx, className: "flex items-center gap-3 py-2 border-b border-[#f0f0f0] cursor-pointer hover:bg-[#f7fafd] group relative", onClick: ()=>{ setActiveChatUser(chat.other_user_id || chat.username || chat.id); }, __source: { fileName: "", lineNumber: 1444, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: chat.other_profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: "User", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 1453, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1461, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 1462, columnNumber: 23 }, __self: this }, chat.other_name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 1464, columnNumber: 25 }, __self: this }, "@", chat.other_username)), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666] truncate", __source: { fileName: "", lineNumber: 1468, columnNumber: 23 }, __self: this }, chat.last_message ? chat.last_message.slice(0, 40) : "(geen berichten)", chat.last_message_time && /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#aaa] ml-2", __source: { fileName: "", lineNumber: 1473, columnNumber: 27 }, __self: this }, "· ", chat.last_message_time))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center ml-2", __source: { fileName: "", lineNumber: 1479, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1480, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0099c6] w-7 h-7 rounded-full flex items-center justify-center focus:outline-none", onClick: (e)=>{ e.stopPropagation(); setMenuOpen(idx); }, __source: { fileName: "", lineNumber: 1481, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", style: { lineHeight: 0 }, __source: { fileName: "", lineNumber: 1488, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-ellipsis-vertical", __source: { fileName: "", lineNumber: 1492, columnNumber: 29 }, __self: this }))), menuOpen === idx && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-1 bg-white border border-[#eee] rounded-lg shadow-lg z-10 min-w-[180px] text-left", __source: { fileName: "", lineNumber: 1496, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1 p-2", __source: { fileName: "", lineNumber: 1497, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded text-[#d32f2f] font-roboto", onClick: async (e)=>{ e.stopPropagation(); if (window.confirm("Are you sure you want to delete this chat?")) { try { const sender_id = user.id; const receiver_id = chat.other_user_id || chat.id || chat.username; const res = await fetch("/api/delete-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id, receiver_id }) }); if (!res.ok) { const data = await res.json().catch(()=>({})); throw new Error(data.error || "Could not delete chat"); } setChatList((prev)=>prev.filter((c, i)=>i !== idx)); setFloatingMenuIdx(null); } catch (err) { alert(err.message || "Could not delete chat"); } } }, __source: { fileName: "", lineNumber: 1498, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-trash-can", __source: { fileName: "", lineNumber: 1546, columnNumber: 33 }, __self: this }), " Delete chat"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded", __source: { fileName: "", lineNumber: 1549, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: !!blockToggles[chat.other_user_id || chat.id || chat.username], onChange: (e)=>{ e.stopPropagation(); handleBlockUser(chat); }, className: "accent-[#d32f2f]", style: { width: 16, height: 16 }, __source: { fileName: "", lineNumber: 1550, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#d32f2f] font-roboto", __source: { fileName: "", lineNumber: 1566, columnNumber: 33 }, __self: this }, "Block")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded", __source: { fileName: "", lineNumber: 1570, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: !!notificationToggles[chat.other_user_id || chat.id || chat.username], onChange: ()=>handleDisableNotifications(chat), className: "accent-[#0099c6]", style: { width: 16, height: 16 }, __source: { fileName: "", lineNumber: 1571, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#222] font-roboto", __source: { fileName: "", lineNumber: 1586, columnNumber: 33 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("button", { className: "w-full text-left px-2 py-1 hover:bg-[#f7fafd] text-[#0099c6] font-roboto flex items-center gap-2 rounded", onClick: (e)=>{ e.stopPropagation(); handleViewProfile(chat); }, __source: { fileName: "", lineNumber: 1590, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user", __source: { fileName: "", lineNumber: 1597, columnNumber: 33 }, __self: this }), " View profile"))))))) : null)))); } function PopupChat({ userId, otherUserId, onClose }) { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [sending, setSending] = React.useState(false); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [otherUser, setOtherUser] = React.useState(null); const chatBottomRef = React.useRef(null); React.useEffect(()=>{ if (!userId || !otherUserId) return; let isMounted = true; fetch("/api/getuserprofile", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: otherUserId }) }).then((res)=>res.json()).then((data)=>{ if (isMounted && data && data.profile) setOtherUser(data.profile); }).catch(()=>{}); const fetchMessages = ()=>{ fetch("/api/listchatmessages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id: userId, receiver_id: otherUserId }) }).then((res)=>res.json()).then((data)=>{ if (isMounted) setMessages(data.messages || []); }).catch(()=>isMounted && setError("Kon chatberichten niet laden")).finally(()=>isMounted && setLoading(false)); }; setLoading(true); setError(null); fetchMessages(); const interval = setInterval(fetchMessages, 3000); return ()=>{ isMounted = false; clearInterval(interval); }; }, [ userId, otherUserId ]); React.useEffect(()=>{ if (chatBottomRef.current) { chatBottomRef.current.scrollIntoView({ behavior: "smooth" }); } }, [ messages ]); async function handleSend() { if (!input.trim() || !otherUserId) return; setSending(true); setError(null); try { const res = await fetch("/api/sendchatmessage", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ receiver_id: otherUserId, message: input }) }); if (!res.ok) throw new Error("Kon bericht niet verzenden"); setInput(""); } catch (e) { setError("Kon bericht niet verzenden"); } finally{ setSending(false); } } function handleInputChange(e) { setInput(e.target.value); } function handleKeyDown(e) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } } return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white rounded-xl shadow-lg flex flex-col", style: { minHeight: 400, maxHeight: 600 }, __source: { fileName: "", lineNumber: 1698, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-[#f0f8ff] rounded-t-xl", __source: { fileName: "", lineNumber: 1702, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 min-w-0", __source: { fileName: "", lineNumber: 1703, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: otherUser && otherUser.profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: otherUser ? otherUser.name : "User", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 1704, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-w-0", __source: { fileName: "", lineNumber: 1712, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg text-[#0099c6] truncate", __source: { fileName: "", lineNumber: 1713, columnNumber: 13 }, __self: this }, otherUser ? otherUser.name : "..."), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#888] truncate", __source: { fileName: "", lineNumber: 1716, columnNumber: 13 }, __self: this }, "@", otherUser ? otherUser.username : "..."))), /*#__PURE__*/ React.createElement("button", { className: "text-[#888] hover:text-[#d32f2f] text-2xl font-bold bg-transparent border-none", style: { lineHeight: 1 }, onClick: onClose, "aria-label": "Close", name: "close-chat", __source: { fileName: "", lineNumber: 1721, columnNumber: 9 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto px-3 py-4 bg-[#f8fafc]", __source: { fileName: "", lineNumber: 1731, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1733, columnNumber: 11 }, __self: this }, "Loading...") : error ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1737, columnNumber: 11 }, __self: this }, error) : messages.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 1741, columnNumber: 11 }, __self: this }, "No messages.") : messages.map((msg, idx)=>{ const isMe = msg.sender_id === userId; const bubbleClasses = isMe ? "bg-[#0099c6] text-white self-end rounded-br-lg rounded-tl-lg rounded-bl-lg" : "bg-[#f0f8ff] text-[#222] self-start rounded-bl-lg rounded-tr-lg rounded-br-lg"; const align = isMe ? "items-end" : "items-start"; return /*#__PURE__*/ React.createElement("div", { key: idx, className: `flex flex-col mb-3 ${align}`, __source: { fileName: "", lineNumber: 1750, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[75%] px-4 py-2 text-base font-roboto ${bubbleClasses} shadow`, __source: { fileName: "", lineNumber: 1751, columnNumber: 17 }, __self: this }, msg.message)); }), /*#__PURE__*/ React.createElement("div", { ref: chatBottomRef, __source: { fileName: "", lineNumber: 1760, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-3 border-t bg-white flex items-center gap-2", __source: { fileName: "", lineNumber: 1762, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "flex-1 resize-none border border-[#e0e0e0] rounded-full px-4 py-2 font-roboto text-base focus:outline-none focus:border-[#0077b6] bg-[#f8fafc]", placeholder: "Type a message...", value: input, onChange: handleInputChange, onKeyDown: handleKeyDown, rows: 1, maxLength: 500, name: "chat-message", style: { minHeight: 40, maxHeight: 80 }, disabled: sending, __source: { fileName: "", lineNumber: 1763, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0099c6] text-white rounded-full px-5 py-2 font-bold text-base font-roboto hover:bg-[#0077b6] transition disabled:opacity-60", onClick: handleSend, disabled: sending || !input.trim(), name: "send-message", style: { minWidth: 80 }, __source: { fileName: "", lineNumber: 1775, columnNumber: 9 }, __self: this }, "Send"))); } function MainComponent() { const [users, setUsers] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const { data: currentUser, loading: userLoading } = useUser(); const [followLoading, setFollowLoading] = React.useState({}); const [followed, setFollowed] = React.useState({}); const [search, setSearch] = React.useState(""); const [minVisited, setMinVisited] = React.useState(0); const [unfollowLoading, setUnfollowLoading] = React.useState({}); const [page, setPage] = React.useState(1); const [hasMore, setHasMore] = React.useState(true); React.useEffect(()=>{ if (typeof window !== "undefined" && !window.gtagScriptLoaded) { const script = document.createElement("script"); script.async = true; script.src = "https://www.googletagmanager.com/gtag/js?id=G-0N8W1GGD4J"; document.head.appendChild(script); const inlineScript = document.createElement("script"); inlineScript.innerHTML = `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-0N8W1GGD4J');`; document.head.appendChild(inlineScript); window.gtagScriptLoaded = true; } }, []); React.useEffect(()=>{ if (!currentUser || users.length === 0) return; async function checkFollowing() { const newFollowed = {}; await Promise.all(users.map(async (user)=>{ if (!currentUser || user.id === currentUser.id) return; try { const res = await fetch("/api/isfollowing", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ follower_id: currentUser.id, following_id: user.id }) }); if (!res.ok) throw new Error(); const data = await res.json(); newFollowed[user.id] = !!data.is_following; } catch { newFollowed[user.id] = false; } })); setFollowed(newFollowed); } checkFollowing(); }, [ users, currentUser ]); React.useEffect(()=>{ async function fetchUsers() { setError(null); try { const body = { search, minVisited, page, pageSize: 12 }; if (currentUser && currentUser.id) { body.currentUserId = currentUser.id; } const res = await fetch("/api/listusers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }); if (!res.ok) { throw new Error("Could not fetch users."); } const data = await res.json(); if (page === 1) { setUsers(Array.isArray(data) ? data : []); } else { setUsers((prev)=>[ ...prev, ...Array.isArray(data) ? data : [] ]); } setHasMore(Array.isArray(data) && data.length === 12); } catch (e) { setError("Could not load users."); setUsers([]); setHasMore(false); } finally{ setLoading(false); } } if (page === 1) { setLoading(true); } else { setLoading(false); } fetchUsers(); }, [ search, minVisited, page ]); React.useEffect(()=>{ setPage(1); }, [ search, minVisited ]); async function handleFollow(userId) { setFollowLoading((prev)=>({ ...prev, [userId]: true })); try { const res = await fetch("/api/followuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ following_id: String(userId) }) }); if (!res.ok) { throw new Error("Could not follow user."); } setFollowed((prev)=>({ ...prev, [userId]: true })); } catch (e) { setFollowed((prev)=>({ ...prev, [userId]: false })); } finally{ setFollowLoading((prev)=>({ ...prev, [userId]: false })); } } async function handleUnfollow(userId) { setUnfollowLoading((prev)=>({ ...prev, [userId]: true })); try { const res = await fetch("/api/unfollowuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ follower_id: String(currentUser.id), following_id: String(userId) }) }); if (!res.ok) { throw new Error("Could not unfollow user."); } setFollowed((prev)=>({ ...prev, [userId]: false })); } catch (e) {} finally{ setUnfollowLoading((prev)=>({ ...prev, [userId]: false })); } } function FollowUnfollowButton({ isFollowing, followLoading, unfollowLoading, onFollow, onUnfollow }) { return isFollowing ? /*#__PURE__*/ React.createElement("button", { className: `bg-[#b388ff] text-white px-5 py-2 rounded-full shadow font-bold text-base font-roboto hover:bg-[#8f5fff] transition w-full ${unfollowLoading ? "opacity-60 cursor-not-allowed" : ""}`, disabled: unfollowLoading, onClick: onUnfollow, __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, unfollowLoading ? "..." : "Unfollow") : /*#__PURE__*/ React.createElement("button", { className: `bg-[#7c4dff] text-white px-5 py-2 rounded-full shadow font-bold text-base font-roboto hover:bg-[#b388ff] transition w-full ${followLoading ? "opacity-60 cursor-not-allowed" : ""}`, disabled: followLoading, onClick: onFollow, __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, followLoading ? "..." : "Follow"); } return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(HeaderNoSeatchBar, { __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#fffbe9] font-roboto flex flex-col items-center py-8 px-2", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-5xl font-bold text-[#0077b6] mb-2 mt-4 drop-shadow font-roboto mt-[90px] md:mt-4", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "All Users"), /*#__PURE__*/ React.createElement("p", { className: "text-[#0099c6] text-lg md:text-xl mb-2 font-roboto text-center mt-[20px] md:mt-0", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, "Browse all travelers and see their adventures!"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 items-center justify-center mb-8 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-[#b2b2b2] rounded-full px-4 py-2 w-full md:w-[300px] font-roboto text-base focus:outline-none focus:border-[#0077b6]", placeholder: "Search by name or username...", value: search, onChange: (e)=>setSearch(e.target.value), minLength: 0, maxLength: 64, __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 w-full md:w-auto", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "minVisited", className: "text-[#0077b6] font-roboto text-base font-semibold whitespace-nowrap", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, "Minimal visited countries:"), /*#__PURE__*/ React.createElement("input", { id: "minVisited", type: "number", className: "border border-[#b2b2b2] rounded-full px-3 py-2 w-[80px] font-roboto text-base focus:outline-none focus:border-[#0077b6]", min: 0, max: 254, value: minVisited, onChange: (e)=>{ let val = parseInt(e.target.value, 10); if (isNaN(val)) val = 0; if (val < 0) val = 0; if (val > 254) val = 254; setMinVisited(val); }, __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }))), loading && page === 1 || userLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-xl my-8", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "Loading...") : error ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-xl my-8", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, error) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-[1200px]", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, users.filter((user)=>!currentUser || user.id !== currentUser.id).map((user)=>{ const profileUrl = `/user?username=${encodeURIComponent(user.username)}`; return /*#__PURE__*/ React.createElement("div", { key: user.id, className: "bg-white rounded-xl shadow-lg p-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 237, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[90px] h-[90px] rounded-full overflow-hidden mb-4 border-4 border-[#e0f7fa] flex items-center justify-center bg-[#f0f8ff]", __source: { fileName: "", lineNumber: 241, columnNumber: 25 }, __self: this }, user.profilePicture ? /*#__PURE__*/ React.createElement("img", { src: user.profilePicture, alt: `Profile picture of ${user.name || user.username}`, className: "w-full h-full object-cover", style: { minWidth: 90, minHeight: 90 }, __source: { fileName: "", lineNumber: 243, columnNumber: 29 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-4xl text-[#b2b2b2] bg-[#e0f7fa]", __source: { fileName: "", lineNumber: 250, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 251, columnNumber: 31 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#0077b6] text-lg mb-0 text-center w-full truncate", __source: { fileName: "", lineNumber: 255, columnNumber: 25 }, __self: this }, user.name || user.username), /*#__PURE__*/ React.createElement("div", { className: "text-[#0099c6] text-base mb-1 text-center w-full truncate font-roboto", style: { lineHeight: 1 }, __source: { fileName: "", lineNumber: 258, columnNumber: 25 }, __self: this }, "@", user.username), /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-sm mb-4 text-center w-full", __source: { fileName: "", lineNumber: 264, columnNumber: 25 }, __self: this }, user.visitedCountriesCount || 0, " visited countries"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 w-full", __source: { fileName: "", lineNumber: 267, columnNumber: 25 }, __self: this }, !currentUser ? /*#__PURE__*/ React.createElement("a", { href: profileUrl, className: "bg-[#0099c6] text-white px-5 py-2 rounded-full shadow font-bold text-base font-roboto hover:bg-[#0077b6] transition w-full text-center", style: { textDecoration: "none" }, __source: { fileName: "", lineNumber: 269, columnNumber: 29 }, __self: this }, "To Profile") : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 277, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement(FollowUnfollowButton, { isFollowing: !!followed[user.id], followLoading: !!followLoading[user.id], unfollowLoading: !!unfollowLoading[user.id], onFollow: ()=>handleFollow(user.id), onUnfollow: ()=>handleUnfollow(user.id), __source: { fileName: "", lineNumber: 278, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: profileUrl, className: "bg-[#0099c6] text-white px-5 py-2 rounded-full shadow font-bold text-base font-roboto hover:bg-[#0077b6] transition w-full text-center", style: { textDecoration: "none" }, __source: { fileName: "", lineNumber: 285, columnNumber: 31 }, __self: this }, "To Profile")))); })), hasMore && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-8", style: { marginBottom: 50 }, __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#7c4dff] text-white px-8 py-3 rounded-full shadow font-bold text-lg font-roboto hover:bg-[#b388ff] transition", onClick: ()=>setPage((p)=>p + 1), disabled: loading, __source: { fileName: "", lineNumber: 304, columnNumber: 19 }, __self: this }, loading && page > 1 ? "Loading..." : "Load More"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 315, columnNumber: 11 }, __self: this }, ` body { background: #fffbe9; } `)), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 321, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 w-full z-[100]", __source: { fileName: "", lineNumber: 322, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(SocialNavigationBar, { user: currentUser, profilePhotoUrl: currentUser?.profilePicture, notifications: 0, active: "users", setShowChatPopup: ()=>{}, __source: { fileName: "", lineNumber: 323, columnNumber: 13 }, __self: this }))))); }