diff --git a/handlers/chat.go b/handlers/chat.go index d9b800f..954efc5 100644 --- a/handlers/chat.go +++ b/handlers/chat.go @@ -127,6 +127,18 @@ func ChatHandler(app *App) http.HandlerFunc { } } + currentUser, err := models.GetUserByID(app.DB, userID) + if err != nil { + log.Printf("Error fetching current user: %v", err) + http.Error(w, "Internal Server Error", http.StatusInternalServerError) + return + } + if currentUser == nil { + http.Error(w, "User not found", http.StatusNotFound) + return + } + currentUsername := currentUser.Username + if r.URL.Query().Get("ws") == "true" { ws, err := upgrader.Upgrade(w, r, nil) if err != nil { @@ -200,9 +212,10 @@ func ChatHandler(app *App) http.HandlerFunc { data := struct { PageData - Board models.Board - Messages []models.ChatMessage - AllUsernames template.JS + Board models.Board + Messages []models.ChatMessage + AllUsernames template.JS + CurrentUsername string }{ PageData: PageData{ Title: "ThreadR Chat - " + board.Name, @@ -213,9 +226,10 @@ func ChatHandler(app *App) http.HandlerFunc { StaticPath: app.Config.ThreadrDir + "/static", CurrentURL: r.URL.Path, }, - Board: *board, - Messages: messages, - AllUsernames: template.JS(allUsernamesJSON), + Board: *board, + Messages: messages, + AllUsernames: template.JS(allUsernamesJSON), + CurrentUsername: currentUsername, } if err := app.Tmpl.ExecuteTemplate(w, "chat", data); err != nil { log.Printf("Error executing template in ChatHandler: %v", err) diff --git a/static/style.css b/static/style.css index e2a9f56..09cae0f 100644 --- a/static/style.css +++ b/static/style.css @@ -284,6 +284,23 @@ p.board-desc { color: #fef6e4; } +/* New style for highlighted chat messages */ +.chat-message-highlighted { + border: 2px solid #f582ae; /* Pink border */ + background-color: #ffe0f0; /* Light pink background */ + animation: highlight-fade 2s ease-out; +} +@keyframes highlight-fade { + from { + background-color: #f582ae; + border-color: #f582ae; + } + to { + background-color: #ffe0f0; + border-color: #f582ae; + } +} + @media (prefers-color-scheme: dark) { body { background-color: #333; @@ -347,6 +364,22 @@ p.board-desc { p, a, li { color: #fef6e4; } + /* Dark mode highlight */ + .chat-message-highlighted { + border: 2px solid #f582ae; /* Pink border */ + background-color: #6a0e3f; /* Darker pink background */ + animation: highlight-fade-dark 2s ease-out; + } + @keyframes highlight-fade-dark { + from { + background-color: #f582ae; + border-color: #f582ae; + } + to { + background-color: #6a0e3f; + border-color: #f582ae; + } + } } @media (max-width: 600px) { diff --git a/templates/pages/chat.html b/templates/pages/chat.html index a932d62..938e2c9 100644 --- a/templates/pages/chat.html +++ b/templates/pages/chat.html @@ -172,6 +172,22 @@ background: none; color: #f582ae; } + /* New style for highlighted messages */ + .chat-message-highlighted { + border: 2px solid #f582ae; /* Pink border */ + background-color: #ffe0f0; /* Light pink background */ + animation: highlight-fade 2s ease-out; + } + @keyframes highlight-fade { + from { + background-color: #f582ae; + border-color: #f582ae; + } + to { + background-color: #ffe0f0; + border-color: #f582ae; + } + } @media (prefers-color-scheme: dark) { .chat-container { background-color: #444; @@ -217,6 +233,22 @@ .reply-indicator button:hover { color: #f582ae; } + /* Dark mode highlight */ + .chat-message-highlighted { + border: 2px solid #f582ae; /* Pink border */ + background-color: #6a0e3f; /* Darker pink background */ + animation: highlight-fade-dark 2s ease-out; + } + @keyframes highlight-fade-dark { + from { + background-color: #f582ae; + border-color: #f582ae; + } + to { + background-color: #6a0e3f; + border-color: #f582ae; + } + } } @@ -230,7 +262,7 @@
{{range .Messages}} -
+
{{if .PfpFileID.Valid}} PFP @@ -267,6 +299,7 @@ let autocompleteActive = false; let replyToId = -1; const allUsernames = {{.AllUsernames}}; + const currentUsername = "{{.CurrentUsername}}"; // Get current user's username function connectWebSocket() { const boardID = {{.Board.ID}}; @@ -305,7 +338,11 @@ function appendMessage(msg) { const messages = document.getElementById('chat-messages'); const msgDiv = document.createElement('div'); - msgDiv.className = 'chat-message'; + let highlightClass = ''; + if (msg.mentions && msg.mentions.includes(currentUsername)) { + highlightClass = ' chat-message-highlighted'; + } + msgDiv.className = 'chat-message' + highlightClass; msgDiv.id = 'msg-' + msg.id; let pfpHTML = `
`; if (msg.pfpFileId && msg.pfpFileId.Valid) { @@ -463,11 +500,12 @@ window.onload = function() { connectWebSocket(); - document.querySelectorAll('.chat-message-content').forEach(function(el) { - const text = el.innerHTML; - const newHTML = text.replace(/@(\w+)/g, '@$1'); - el.innerHTML = newHTML; - }); + // This part is now handled by the server-side rendering with the `chat-message-highlighted` class + // document.querySelectorAll('.chat-message-content').forEach(function(el) { + // const text = el.innerHTML; + // const newHTML = text.replace(/@(\w+)/g, '@$1'); + // el.innerHTML = newHTML; + // }); document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight; };