-
Loading map
- Warming up tiles and live data.
+ {t('map.loadingMap')}
+ {t('map.warmingUp')}
@@ -216,46 +191,19 @@ export default function App() {
- {/* Bouton Contacts flottant en bas à droite */}
-
-
- {/* Liste des contacts (dropdown) */}
- {showContactsList && (
-
-
Communities
- Explore Islands
+{t('islands.communities')}
+ {t('islands.exploreIslands')}
- Islands are local hubs where people share updates, deals, and stories in one place. - Browse nearby islands or jump into a new community to see what is trending. + {t('islands.islandsDescription')}
- {contactsList.map((name, idx) => (
-
- )}
-
- {/* Bulles de chats actifs flottantes à côté du bouton */}
- openChat(name)}>
-
- ))}
- 👤
- {name}
-
- {activeChats.map((name, idx) => (
-
+ {/* Chat System */}
+
-
- ))}
- 👤
- {name}
-
-
+ {/* Active Chat Tabs (minimized chats) */}
+ {activeChats.filter(chat => minimizedChats[chat.username]).map((chat) => {
+ const unread = unreadCounts[chat.username] || 0;
+ return (
+
+ );
+ })}
+
+ {/* Contacts Button */}
+
+
+
+ {/* Contacts Dropdown */}
+ {showContacts && (
+
+
+ )}
+
+ {/* Active Chat Windows (only non-minimized) */}
+
+ {t("common.contacts")}
+
+
+
+ {!authenticated ? (
+
+ {t("friends.signInToSee")}
+
+ ) : friends.length === 0 ? (
+
+ {t("friends.noFriends")}
+
+ ) : (
+
+ {friends.map((friend) => {
+ const friendUsername = friend.username || friend.name;
+ const avatar = friend.avatar_url || friend.avatar;
+ const isOnline = presence[friendUsername] || false;
+ const unreadCount = unreadCounts[friendUsername] || 0;
+
+ return (
+
+ )}
+ 0 ? " has-unread" : "")}
+ onClick={() => openChat(friend)}
+ >
+
+ );
+ })}
+
+ {avatar ? (
+ 
+ ) : (
+ {(friendUsername || "?")[0].toUpperCase()}
+ )}
+
+ {friendUsername}
+ {unreadCount > 0 && (
+ {unreadCount}
+ )}
+ {isOnline && }
+
+ {activeChats
+ .filter((chat) => !minimizedChats[chat.username])
+ .map((chat, index) => (
+
+ ,
+ document.body
+ );
+}
diff --git a/src/components/Chat/ChatWindow.css b/src/components/Chat/ChatWindow.css
new file mode 100644
index 0000000..866dc9b
--- /dev/null
+++ b/src/components/Chat/ChatWindow.css
@@ -0,0 +1,324 @@
+.chat-window {
+ width: 320px;
+ height: 420px;
+ background: rgba(15, 23, 42, 0.95);
+ border: 1px solid rgba(148, 163, 184, 0.3);
+ border-radius: 12px 12px 0 0;
+ box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ backdrop-filter: blur(12px);
+}
+
+.chat-window--minimized {
+ height: auto;
+ cursor: pointer;
+}
+
+.chat-window--minimized:hover {
+ background: rgba(30, 41, 59, 0.95);
+}
+
+/* Header */
+.chat-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 12px;
+ background: linear-gradient(135deg, rgba(30, 58, 138, 0.8), rgba(59, 130, 246, 0.6));
+ border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.chat-user {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.chat-avatar-sm {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-weight: 600;
+ font-size: 14px;
+ position: relative;
+ overflow: hidden;
+}
+
+.chat-avatar-sm img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.chat-avatar-sm.online::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 10px;
+ height: 10px;
+ background: #22c55e;
+ border: 2px solid rgba(15, 23, 42, 0.95);
+ border-radius: 50%;
+}
+
+.chat-user-info {
+ display: flex;
+ flex-direction: column;
+}
+
+.chat-username {
+ font-weight: 600;
+ font-size: 14px;
+ color: #f1f5f9;
+}
+
+.chat-status {
+ font-size: 11px;
+ color: #22c55e;
+}
+
+.chat-actions {
+ display: flex;
+ gap: 4px;
+}
+
+.chat-minimize,
+.chat-close {
+ width: 26px;
+ height: 26px;
+ border: none;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.1);
+ color: #e2e8f0;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ transition: background 0.2s;
+}
+
+.chat-minimize:hover,
+.chat-close:hover {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+/* Messages */
+.chat-messages {
+ flex: 1;
+ overflow-y: auto;
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.chat-empty {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: rgba(148, 163, 184, 0.7);
+ font-size: 13px;
+}
+
+.chat-msg {
+ max-width: 80%;
+ padding: 8px 12px;
+ border-radius: 16px;
+ background: rgba(59, 130, 246, 0.15);
+ color: #e2e8f0;
+ font-size: 13px;
+ line-height: 1.4;
+ align-self: flex-start;
+}
+
+.chat-msg--mine {
+ background: linear-gradient(135deg, #3b82f6, #2563eb);
+ color: white;
+ align-self: flex-end;
+}
+
+.chat-msg-content {
+ word-break: break-word;
+}
+
+.chat-msg-meta {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 4px;
+ margin-top: 4px;
+}
+
+.chat-msg-time {
+ font-size: 10px;
+ color: rgba(148, 163, 184, 0.7);
+}
+
+.chat-msg--mine .chat-msg-time {
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.chat-msg-status {
+ font-size: 10px;
+ color: rgba(255, 255, 255, 0.6);
+}
+
+.chat-msg-status i {
+ font-size: 10px;
+}
+
+.chat-msg-status i.read {
+ color: #22c55e;
+}
+
+/* Typing indicator */
+.chat-typing {
+ display: flex;
+ gap: 4px;
+ padding: 8px 12px;
+ align-self: flex-start;
+}
+
+.chat-typing-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: rgba(148, 163, 184, 0.5);
+ animation: typingBounce 1.4s infinite ease-in-out both;
+}
+
+.chat-typing-dot:nth-child(1) {
+ animation-delay: 0s;
+}
+.chat-typing-dot:nth-child(2) {
+ animation-delay: 0.2s;
+}
+.chat-typing-dot:nth-child(3) {
+ animation-delay: 0.4s;
+}
+
+@keyframes typingBounce {
+ 0%,
+ 80%,
+ 100% {
+ transform: scale(0.6);
+ opacity: 0.4;
+ }
+ 40% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+/* Input */
+.chat-input-area {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 12px;
+ border-top: 1px solid rgba(148, 163, 184, 0.2);
+ background: rgba(15, 23, 42, 0.6);
+}
+
+.chat-input {
+ flex: 1;
+ padding: 8px 14px;
+ border: 1px solid rgba(148, 163, 184, 0.3);
+ border-radius: 20px;
+ background: rgba(30, 41, 59, 0.8);
+ color: #f1f5f9;
+ font-size: 13px;
+ outline: none;
+}
+
+.chat-input::placeholder {
+ color: rgba(148, 163, 184, 0.6);
+}
+
+.chat-input:focus {
+ border-color: #3b82f6;
+}
+
+.chat-send {
+ width: 36px;
+ height: 36px;
+ border: none;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #3b82f6, #2563eb);
+ color: white;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ transition: transform 0.2s, opacity 0.2s;
+}
+
+.chat-send:hover:not(:disabled) {
+ transform: scale(1.05);
+}
+
+.chat-send:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Light theme */
+body[data-theme="light"] .chat-window {
+ background: rgba(255, 255, 255, 0.98);
+ border-color: rgba(148, 163, 184, 0.4);
+}
+
+body[data-theme="light"] .chat-header {
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(99, 102, 241, 0.8));
+}
+
+body[data-theme="light"] .chat-username {
+ color: #f1f5f9;
+}
+
+body[data-theme="light"] .chat-messages {
+ background: #f8fafc;
+}
+
+body[data-theme="light"] .chat-msg {
+ background: rgba(59, 130, 246, 0.1);
+ color: #1e293b;
+}
+
+body[data-theme="light"] .chat-input-area {
+ background: rgba(255, 255, 255, 0.9);
+}
+
+body[data-theme="light"] .chat-input {
+ background: #f1f5f9;
+ color: #1e293b;
+ border-color: rgba(148, 163, 184, 0.4);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+ .chat-window {
+ width: 100%;
+ max-width: 100vw;
+ height: 50vh;
+ height: 50dvh; /* Dynamic viewport height - accounts for keyboard */
+ max-height: calc(100vh - 60px);
+ max-height: calc(100dvh - 60px);
+ border-radius: 16px 16px 0 0;
+ }
+
+ .chat-input-area {
+ padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
+ }
+}
diff --git a/src/components/Chat/ChatWindow.jsx b/src/components/Chat/ChatWindow.jsx
new file mode 100644
index 0000000..c69b672
--- /dev/null
+++ b/src/components/Chat/ChatWindow.jsx
@@ -0,0 +1,218 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { formatChatTime } from "../../utils/timezone";
+import "./ChatWindow.css";
+
+export default function ChatWindow({
+ recipientID,
+ recipientName,
+ recipientAvatar,
+ messages = [],
+ typing = false,
+ online = false,
+ onSend,
+ onTyping,
+ onClose,
+ onMinimize,
+ minimized = false,
+}) {
+ const { t } = useTranslation();
+ const [input, setInput] = useState("");
+ const messagesEndRef = useRef(null);
+ const inputRef = useRef(null);
+ const typingTimeout = useRef(null);
+
+ // Auto-scroll to bottom on new messages
+ useEffect(() => {
+ if (!minimized && messagesEndRef.current) {
+ messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+ }
+ }, [messages, minimized]);
+
+ // Focus input when opening (without scrolling the page)
+ useEffect(() => {
+ if (!minimized && inputRef.current) {
+ // Use preventScroll to avoid page scroll when focusing
+ inputRef.current.focus({ preventScroll: true });
+ }
+ }, [minimized]);
+
+ const handleSend = () => {
+ const text = input.trim();
+ if (!text) return;
+
+ onSend?.(text);
+ setInput("");
+
+ // Clear typing indicator
+ if (typingTimeout.current) {
+ clearTimeout(typingTimeout.current);
+ }
+ onTyping?.(false);
+ };
+
+ const handleKeyDown = (e) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ };
+
+ const handleInputChange = (e) => {
+ setInput(e.target.value);
+
+ // Send typing indicator
+ onTyping?.(true);
+
+ if (typingTimeout.current) {
+ clearTimeout(typingTimeout.current);
+ }
+
+ typingTimeout.current = setTimeout(() => {
+ onTyping?.(false);
+ }, 2000);
+ };
+
+ // Use timezone-aware formatting
+ const formatTime = formatChatTime;
+
+ if (minimized) {
+ return (
+
+ closeChat(chat.username)}
+ onMinimize={() => toggleMinimize(chat.username)}
+ />
+
+ ))}
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ {recipientAvatar ? (
+ 
+ ) : (
+ {(recipientName || "?")[0].toUpperCase()}
+ )}
+
+ {recipientName}
+
+ {/* Header */}
+
+ );
+}
diff --git a/src/components/Chat/cryptoUtils.js b/src/components/Chat/cryptoUtils.js
new file mode 100644
index 0000000..5ecadd9
--- /dev/null
+++ b/src/components/Chat/cryptoUtils.js
@@ -0,0 +1,192 @@
+/**
+ * End-to-End Encryption utilities using Web Crypto API
+ * Uses ECDH for key exchange and AES-GCM for message encryption
+ */
+
+const STORAGE_KEY = "sociowire:e2e:keypair";
+const PEER_KEYS_KEY = "sociowire:e2e:peerKeys";
+
+// Generate or retrieve the user's key pair
+export async function getOrCreateKeyPair() {
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (stored) {
+ const { publicKey, privateKey } = JSON.parse(stored);
+ return {
+ publicKey: await importPublicKey(publicKey),
+ privateKey: await importPrivateKey(privateKey),
+ publicKeyExport: publicKey,
+ };
+ }
+ } catch (e) {
+ console.warn("[E2E] Failed to load stored keys, generating new ones", e);
+ }
+
+ // Generate new ECDH key pair
+ const keyPair = await crypto.subtle.generateKey(
+ { name: "ECDH", namedCurve: "P-256" },
+ true,
+ ["deriveBits"]
+ );
+
+ // Export keys for storage
+ const publicKeyExport = await exportPublicKey(keyPair.publicKey);
+ const privateKeyExport = await exportPrivateKey(keyPair.privateKey);
+
+ // Store in localStorage
+ localStorage.setItem(STORAGE_KEY, JSON.stringify({
+ publicKey: publicKeyExport,
+ privateKey: privateKeyExport,
+ }));
+
+ return {
+ publicKey: keyPair.publicKey,
+ privateKey: keyPair.privateKey,
+ publicKeyExport,
+ };
+}
+
+// Export public key to base64
+async function exportPublicKey(key) {
+ const exported = await crypto.subtle.exportKey("spki", key);
+ return btoa(String.fromCharCode(...new Uint8Array(exported)));
+}
+
+// Export private key to base64
+async function exportPrivateKey(key) {
+ const exported = await crypto.subtle.exportKey("pkcs8", key);
+ return btoa(String.fromCharCode(...new Uint8Array(exported)));
+}
+
+// Import public key from base64
+async function importPublicKey(base64) {
+ const binary = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
+ return crypto.subtle.importKey(
+ "spki",
+ binary,
+ { name: "ECDH", namedCurve: "P-256" },
+ true,
+ []
+ );
+}
+
+// Import private key from base64
+async function importPrivateKey(base64) {
+ const binary = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
+ return crypto.subtle.importKey(
+ "pkcs8",
+ binary,
+ { name: "ECDH", namedCurve: "P-256" },
+ true,
+ ["deriveBits"]
+ );
+}
+
+// Store peer's public key
+export function storePeerPublicKey(username, publicKeyBase64) {
+ try {
+ const peerKeys = JSON.parse(localStorage.getItem(PEER_KEYS_KEY) || "{}");
+ peerKeys[username] = publicKeyBase64;
+ localStorage.setItem(PEER_KEYS_KEY, JSON.stringify(peerKeys));
+ } catch (e) {
+ console.warn("[E2E] Failed to store peer key", e);
+ }
+}
+
+// Get peer's public key
+export function getPeerPublicKey(username) {
+ try {
+ const peerKeys = JSON.parse(localStorage.getItem(PEER_KEYS_KEY) || "{}");
+ return peerKeys[username] || null;
+ } catch (e) {
+ return null;
+ }
+}
+
+// Derive shared secret from own private key and peer's public key
+async function deriveSharedKey(privateKey, peerPublicKeyBase64) {
+ const peerPublicKey = await importPublicKey(peerPublicKeyBase64);
+
+ // Derive shared bits using ECDH
+ const sharedBits = await crypto.subtle.deriveBits(
+ { name: "ECDH", public: peerPublicKey },
+ privateKey,
+ 256
+ );
+
+ // Import as AES-GCM key
+ return crypto.subtle.importKey(
+ "raw",
+ sharedBits,
+ { name: "AES-GCM", length: 256 },
+ false,
+ ["encrypt", "decrypt"]
+ );
+}
+
+// Encrypt a message
+export async function encryptMessage(privateKey, peerPublicKeyBase64, plaintext) {
+ try {
+ const sharedKey = await deriveSharedKey(privateKey, peerPublicKeyBase64);
+
+ // Generate random IV
+ const iv = crypto.getRandomValues(new Uint8Array(12));
+
+ // Encrypt
+ const encoder = new TextEncoder();
+ const encrypted = await crypto.subtle.encrypt(
+ { name: "AES-GCM", iv },
+ sharedKey,
+ encoder.encode(plaintext)
+ );
+
+ // Combine IV + ciphertext and encode as base64
+ const combined = new Uint8Array(iv.length + encrypted.byteLength);
+ combined.set(iv);
+ combined.set(new Uint8Array(encrypted), iv.length);
+
+ return "e2e:" + btoa(String.fromCharCode(...combined));
+ } catch (e) {
+ console.error("[E2E] Encryption failed", e);
+ return plaintext; // Fallback to plaintext
+ }
+}
+
+// Decrypt a message
+export async function decryptMessage(privateKey, peerPublicKeyBase64, ciphertext) {
+ try {
+ // Check if message is encrypted
+ if (!ciphertext.startsWith("e2e:")) {
+ return ciphertext; // Not encrypted
+ }
+
+ const sharedKey = await deriveSharedKey(privateKey, peerPublicKeyBase64);
+
+ // Decode base64
+ const combined = Uint8Array.from(atob(ciphertext.slice(4)), c => c.charCodeAt(0));
+
+ // Extract IV and ciphertext
+ const iv = combined.slice(0, 12);
+ const encrypted = combined.slice(12);
+
+ // Decrypt
+ const decrypted = await crypto.subtle.decrypt(
+ { name: "AES-GCM", iv },
+ sharedKey,
+ encrypted
+ );
+
+ const decoder = new TextDecoder();
+ return decoder.decode(decrypted);
+ } catch (e) {
+ console.error("[E2E] Decryption failed", e);
+ return "[Encrypted message - decryption failed]";
+ }
+}
+
+// Check if E2E is available (Web Crypto API support)
+export function isE2EAvailable() {
+ return typeof crypto !== "undefined" &&
+ typeof crypto.subtle !== "undefined" &&
+ typeof crypto.subtle.generateKey === "function";
+}
diff --git a/src/components/Chat/useChat.js b/src/components/Chat/useChat.js
new file mode 100644
index 0000000..2ed9b21
--- /dev/null
+++ b/src/components/Chat/useChat.js
@@ -0,0 +1,382 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import {
+ getOrCreateKeyPair,
+ storePeerPublicKey,
+ getPeerPublicKey,
+ encryptMessage,
+ decryptMessage,
+ isE2EAvailable,
+} from "./cryptoUtils";
+
+const WS_BASE = import.meta.env.VITE_CHAT_WS_URL ||
+ (window.location.protocol === "https:" ? "wss://" : "ws://") +
+ window.location.host + "/chat/ws";
+
+const API_BASE = import.meta.env.VITE_CHAT_API_URL || "/chat/api";
+
+export function useChat({ username, enabled = true, onNewMessage }) {
+ const [connected, setConnected] = useState(false);
+ const [messages, setMessages] = useState({}); // { recipientUsername: Message[] }
+ const [typing, setTyping] = useState({}); // { username: boolean }
+ const [presence, setPresence] = useState({}); // { username: boolean }
+ const [conversations, setConversations] = useState([]);
+ const [e2eReady, setE2eReady] = useState(false);
+
+ const wsRef = useRef(null);
+ const reconnectTimer = useRef(null);
+ const reconnectAttempts = useRef(0);
+ const keyPairRef = useRef(null);
+ const usernameRef = useRef(username);
+ const enabledRef = useRef(enabled);
+ const onNewMessageRef = useRef(onNewMessage);
+
+ // Keep refs updated
+ useEffect(() => {
+ usernameRef.current = username;
+ }, [username]);
+
+ useEffect(() => {
+ enabledRef.current = enabled;
+ }, [enabled]);
+
+ useEffect(() => {
+ onNewMessageRef.current = onNewMessage;
+ }, [onNewMessage]);
+
+ // Initialize E2E encryption keys
+ useEffect(() => {
+ if (!isE2EAvailable()) {
+ console.warn("[E2E] Web Crypto API not available");
+ return;
+ }
+
+ getOrCreateKeyPair().then((kp) => {
+ keyPairRef.current = kp;
+ setE2eReady(true);
+ console.log("[E2E] Key pair ready");
+ }).catch((err) => {
+ console.error("[E2E] Failed to initialize keys", err);
+ });
+ }, []);
+
+ // Send public key to a peer for key exchange
+ const sendPublicKey = useCallback((recipientUsername) => {
+ if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+ if (!keyPairRef.current?.publicKeyExport) return;
+
+ const msg = {
+ type: "key_exchange",
+ payload: {
+ recipient_username: recipientUsername,
+ public_key: keyPairRef.current.publicKeyExport,
+ },
+ };
+ wsRef.current.send(JSON.stringify(msg));
+ }, []);
+
+ // Handle incoming WebSocket messages (uses ref to avoid dependency changes)
+ const handleMessage = useCallback((data) => {
+ const currentUsername = usernameRef.current;
+
+ // Parse payload if it's a string (backwards compat), otherwise use as-is
+ const parsePayload = (payload) => {
+ if (typeof payload === "string") {
+ try {
+ return JSON.parse(payload);
+ } catch {
+ return payload;
+ }
+ }
+ return payload;
+ };
+
+ switch (data.type) {
+ case "message": {
+ const msg = parsePayload(data.payload);
+ // Case-insensitive comparison for username matching
+ const isMySent = msg.sender_name?.toLowerCase() === currentUsername?.toLowerCase();
+ const otherUser = isMySent ? msg.recipient_name : msg.sender_name;
+ const isIncoming = !isMySent;
+
+ console.log("[Chat] Received message from", msg.sender_name, "to", msg.recipient_name);
+
+ setMessages((prev) => {
+ const existing = prev[otherUser] || [];
+ // Avoid duplicates (check by id or by temp-id prefix)
+ if (existing.some((m) => m.id === msg.id || (m.id?.toString().startsWith("temp-") && m.content === msg.content && m.sender_name === msg.sender_name))) {
+ // Replace temp message with real one
+ return {
+ ...prev,
+ [otherUser]: existing.map((m) =>
+ m.id?.toString().startsWith("temp-") && m.content === msg.content && m.sender_name === msg.sender_name
+ ? msg
+ : m
+ ),
+ };
+ }
+ return { ...prev, [otherUser]: [...existing, msg] };
+ });
+
+ // Notify parent component of new incoming message
+ if (isIncoming && onNewMessageRef.current) {
+ onNewMessageRef.current(msg);
+ }
+ break;
+ }
+
+ case "typing": {
+ const payload = parsePayload(data.payload);
+ setTyping((prev) => ({
+ ...prev,
+ [payload.username]: payload.is_typing,
+ }));
+
+ // Clear typing indicator after 3 seconds
+ setTimeout(() => {
+ setTyping((prev) => ({ ...prev, [payload.username]: false }));
+ }, 3000);
+ break;
+ }
+
+ case "presence": {
+ const payload = parsePayload(data.payload);
+ setPresence((prev) => ({
+ ...prev,
+ [payload.username]: payload.online,
+ }));
+ break;
+ }
+
+ default:
+ console.log("[Chat] Unknown message type", data.type);
+ }
+ }, []); // No dependencies - uses refs
+
+ // Connect to WebSocket (uses refs to avoid dependency changes)
+ const connect = useCallback(() => {
+ const currentUsername = usernameRef.current;
+ const currentEnabled = enabledRef.current;
+
+ if (!currentEnabled || !currentUsername) return;
+
+ // Don't reconnect if already connected
+ if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+ console.log("[Chat] Already connected");
+ return;
+ }
+
+ const wsUrl = `${WS_BASE}?username=${encodeURIComponent(currentUsername)}`;
+ console.log("[Chat] Connecting to", wsUrl);
+
+ try {
+ const ws = new WebSocket(wsUrl);
+
+ ws.onopen = () => {
+ console.log("[Chat] WebSocket connected as", currentUsername);
+ setConnected(true);
+ reconnectAttempts.current = 0;
+ };
+
+ ws.onclose = (e) => {
+ console.log("[Chat] WebSocket closed", e.code, e.reason);
+ setConnected(false);
+ wsRef.current = null;
+
+ // Reconnect with exponential backoff (check ref values)
+ if (enabledRef.current && reconnectAttempts.current < 10) {
+ const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.current), 30000);
+ reconnectAttempts.current++;
+ console.log("[Chat] Reconnecting in", delay, "ms (attempt", reconnectAttempts.current, ")");
+ reconnectTimer.current = setTimeout(connect, delay);
+ }
+ };
+
+ ws.onerror = (e) => {
+ console.error("[Chat] WebSocket error", e);
+ };
+
+ ws.onmessage = (e) => {
+ try {
+ const data = JSON.parse(e.data);
+ handleMessage(data);
+ } catch (err) {
+ console.error("[Chat] Parse error", err);
+ }
+ };
+
+ wsRef.current = ws;
+ } catch (err) {
+ console.error("[Chat] Connection error", err);
+ }
+ }, [handleMessage]); // Only depends on stable handleMessage
+
+ // Send a chat message
+ const sendMessage = useCallback((recipientUsername, content) => {
+ if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+ console.error("[Chat] WebSocket not connected");
+ return false;
+ }
+
+ const currentUsername = usernameRef.current;
+
+ // Optimistic update - add message to local state immediately
+ const optimisticMsg = {
+ id: `temp-${Date.now()}`,
+ sender_name: currentUsername,
+ recipient_name: recipientUsername,
+ content: content,
+ created_at: new Date().toISOString(),
+ };
+
+ setMessages((prev) => {
+ const existing = prev[recipientUsername] || [];
+ return { ...prev, [recipientUsername]: [...existing, optimisticMsg] };
+ });
+
+ const msg = {
+ type: "message",
+ payload: {
+ recipient_username: recipientUsername,
+ content: content,
+ },
+ };
+
+ wsRef.current.send(JSON.stringify(msg));
+ return true;
+ }, []);
+
+ // Send typing indicator
+ const sendTyping = useCallback((recipientUsername, isTyping) => {
+ if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+
+ const msg = {
+ type: "typing",
+ payload: {
+ recipient_username: recipientUsername,
+ is_typing: isTyping,
+ },
+ };
+
+ wsRef.current.send(JSON.stringify(msg));
+ }, []);
+
+ // Mark messages as read
+ const markAsRead = useCallback((senderUsername) => {
+ if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+
+ const msg = {
+ type: "read",
+ payload: { sender_username: senderUsername },
+ };
+
+ wsRef.current.send(JSON.stringify(msg));
+ }, []);
+
+ // Fetch message history
+ const fetchMessages = useCallback(async (otherUsername) => {
+ if (!username || !otherUsername) return [];
+
+ try {
+ const res = await fetch(`${API_BASE}/messages?username=${encodeURIComponent(username)}&other=${encodeURIComponent(otherUsername)}`);
+ const data = await res.json();
+
+ if (data.ok && data.messages) {
+ setMessages((prev) => ({ ...prev, [otherUsername]: data.messages }));
+ return data.messages;
+ }
+ } catch (err) {
+ console.error("[Chat] Fetch messages error", err);
+ }
+ return [];
+ }, [username]);
+
+ // Fetch conversations list
+ const fetchConversations = useCallback(async () => {
+ if (!username) return [];
+
+ try {
+ const res = await fetch(`${API_BASE}/conversations?username=${encodeURIComponent(username)}`);
+ const data = await res.json();
+
+ if (data.ok && data.conversations) {
+ setConversations(data.conversations);
+
+ // Update presence from conversations
+ const newPresence = {};
+ data.conversations.forEach((c) => {
+ newPresence[c.username] = c.online;
+ });
+ setPresence((prev) => ({ ...prev, ...newPresence }));
+
+ return data.conversations;
+ }
+ } catch (err) {
+ console.error("[Chat] Fetch conversations error", err);
+ }
+ return [];
+ }, [username]);
+
+ // Connect on mount / when enabled or username changes
+ useEffect(() => {
+ if (enabled && username) {
+ // Only connect if not already connected
+ if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+ connect();
+ }
+ } else {
+ // Disconnect if disabled or no username
+ if (wsRef.current) {
+ wsRef.current.close();
+ wsRef.current = null;
+ }
+ }
+ }, [enabled, username, connect]);
+
+ // Reconnect when page becomes visible (mobile app resume)
+ useEffect(() => {
+ if (!enabled || !username) return;
+
+ const handleVisibilityChange = () => {
+ if (document.visibilityState === 'visible') {
+ console.log('[Chat] Page visible, checking connection...');
+ // Check if WebSocket is disconnected or in bad state
+ if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+ console.log('[Chat] Reconnecting after visibility change...');
+ reconnectAttempts.current = 0; // Reset attempts
+ connect();
+ }
+ }
+ };
+
+ document.addEventListener('visibilitychange', handleVisibilityChange);
+ return () => {
+ document.removeEventListener('visibilitychange', handleVisibilityChange);
+ };
+ }, [enabled, username, connect]);
+
+ // Cleanup on unmount only
+ useEffect(() => {
+ return () => {
+ if (reconnectTimer.current) {
+ clearTimeout(reconnectTimer.current);
+ }
+ if (wsRef.current) {
+ wsRef.current.close();
+ wsRef.current = null;
+ }
+ };
+ }, []);
+
+ return {
+ connected,
+ messages,
+ typing,
+ presence,
+ conversations,
+ sendMessage,
+ sendTyping,
+ markAsRead,
+ fetchMessages,
+ fetchConversations,
+ };
+}
diff --git a/src/components/Filters/FilterButtons.jsx b/src/components/Filters/FilterButtons.jsx
index b5710d7..a160f99 100644
--- a/src/components/Filters/FilterButtons.jsx
+++ b/src/components/Filters/FilterButtons.jsx
@@ -1,12 +1,15 @@
import React from "react";
+import { useTranslation } from "react-i18next";
export default function FilterButtons({ active, onSelect }) {
+ const { t } = useTranslation();
+
const buttons = [
- { code: "All", label: "All", icon: "fa-solid fa-globe" },
- { code: "News", label: "News", icon: "fa-solid fa-newspaper" },
- { code: "Friends", label: "Friends", icon: "fa-solid fa-user-group" },
- { code: "Events", label: "Events", icon: "fa-solid fa-calendar-days" },
- { code: "Market", label: "Market", icon: "fa-solid fa-chart-line" },
+ { code: "All", labelKey: "filters.all", icon: "fa-solid fa-globe" },
+ { code: "News", labelKey: "filters.news", icon: "fa-solid fa-newspaper" },
+ { code: "Friends", labelKey: "filters.friends", icon: "fa-solid fa-user-group" },
+ { code: "Events", labelKey: "filters.events", icon: "fa-solid fa-calendar-days" },
+ { code: "Market", labelKey: "filters.market", icon: "fa-solid fa-chart-line" },
];
return (
@@ -21,7 +24,7 @@ export default function FilterButtons({ active, onSelect }) {
+
+
+ {/* Messages */}
+
+
+
+ {recipientAvatar ? (
+
+ ) : (
+ {(recipientName || "?")[0].toUpperCase()}
+ )}
+
+
+ {recipientName}
+
+ {online ? t("common.online") : ""}
+
+
+
+
+
+
+
+ {messages.length === 0 ? (
+
+
+ {/* Input */}
+
+ {t("chat.startConversation", "Start a conversation")}
+
+ ) : (
+ messages.map((msg, idx) => {
+ // Compare by username (sender_name), case-insensitive
+ const isMine = msg.sender_name?.toLowerCase() !== recipientName?.toLowerCase();
+ // Determine message status for sent messages
+ const isSending = msg.id?.toString().startsWith("temp-");
+ const isRead = msg.read_at != null;
+ const isSent = !isSending && msg.id;
+
+ return (
+
+
+ );
+ })
+ )}
+ {typing && (
+ {msg.content}
+
+ {formatTime(msg.created_at)}
+ {isMine && (
+
+ {isSending ? (
+
+ ) : isRead ? (
+
+ ) : isSent ? (
+
+ ) : null}
+
+ )}
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {btn.label}
+ {t(btn.labelKey)}
))}
