Chat: Highlight user mentions even after page reload

chat: polish mention system
We now have a proper autocomplete. Next on the list is moving the chat page into it's proper place and add pop-ups for profiles.
2025-08-09 21:05:01 -03:00 · 2025-08-03 19:21:06 -03:00 · 2025-06-29 21:24:28 -03:00 · 2025-06-21 16:21:21 -03:00
13 changed files with 517 additions and 356 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,8 @@
 config/config.json
 config/about_page.htmlbody

+# Testing
+files/
+
 # nano
 .swp
--- a/config/config.json.sample
+++ b/config/config.json.sample
@ -4,5 +4,6 @@
    "db_username": "threadr_user",
    "db_password": "threadr_password",
    "db_database": "threadr_db",
-    "db_svr_host": "localhost:3306"
+    "db_svr_host": "localhost:3306",
+    "file_storage_dir": "files"
 }
--- a/handlers/app.go
+++ b/handlers/app.go
@ -4,7 +4,9 @@ import (
 	"context"
 	"database/sql"
 	"html/template"
+	"log"
 	"net/http"
+
 	"github.com/gorilla/sessions"
 )

@ -25,6 +27,7 @@ type Config struct {
    DBPassword       string `json:"db_password"`
    DBDatabase       string `json:"db_database"`
    DBServerHost     string `json:"db_svr_host"`
+    FileStorageDir   string `json:"file_storage_dir"`
 }

 type App struct {
@ -45,24 +48,21 @@ func (app *App) SessionMW(next http.HandlerFunc) http.HandlerFunc {
                HttpOnly: true,
            }
        }
-        if _, ok := session.Values["user_id"].(int); ok {
-            // Skip IP and User-Agent check for WebSocket connections
-            if r.URL.Query().Get("ws") != "true" {
-                if session.Values["user_ip"] != r.RemoteAddr || session.Values["user_agent"] != r.UserAgent() {
-                    session.Values = make(map[interface{}]interface{})
-                    session.Options.MaxAge = -1
-                    session.Save(r, w)
-                    http.Redirect(w, r, app.Config.ThreadrDir+"/login/?error=session", http.StatusFound)
-                    return
-                }
-            }
+
        ctx := context.WithValue(r.Context(), "session", session)
        r = r.WithContext(ctx)
-        } else {
-            ctx := context.WithValue(r.Context(), "session", session)
-            r = r.WithContext(ctx)
-        }
+
        next(w, r)
+
+        if err := session.Save(r, w); err != nil {
+            /*
+            Ok, so here's the thing
+            Errors coming from this function here "can" be ignored.
+            They mostly come from errors while setting cookies, so in some
+            environments this will trigger a lot, but they are harmless.
+            */
+            log.Printf("Error saving session in SessionMW: %v", err)
+        }
    }
 }

--- a/handlers/chat.go
+++ b/handlers/chat.go
@ -2,10 +2,12 @@ package handlers

 import (
 	"encoding/json"
+	"html/template"
 	"log"
 	"net/http"
 	"sync"
 	"threadr/models"
+
 	"github.com/gorilla/sessions"
 	"github.com/gorilla/websocket"
 )
@ -136,21 +138,6 @@ func ChatHandler(app *App) http.HandlerFunc {
 			return
 		}

-		if r.URL.Query().Get("autocomplete") == "true" {
-			// Handle autocomplete for mentions
-			prefix := r.URL.Query().Get("prefix")
-			usernames, err := models.GetUsernamesMatching(app.DB, prefix)
-			if err != nil {
-				log.Printf("Error fetching usernames for autocomplete: %v", err)
-				http.Error(w, "Internal Server Error", http.StatusInternalServerError)
-				return
-			}
-			response, _ := json.Marshal(usernames)
-			w.Header().Set("Content-Type", "application/json")
-			w.Write(response)
-			return
-		}
-
 		// Render chat page
 		messages, err := models.GetRecentChatMessages(app.DB, 50)
 		if err != nil {
@ -164,9 +151,17 @@ func ChatHandler(app *App) http.HandlerFunc {
 			messages[i], messages[j] = messages[j], messages[i]
 		}

+		allUsernames, err := models.GetAllUsernames(app.DB)
+		if err != nil {
+			log.Printf("Error fetching all usernames: %v", err)
+			allUsernames = []string{} // Proceed without autocomplete on error
+		}
+		allUsernamesJSON, _ := json.Marshal(allUsernames)
+
 		data := struct {
 			PageData
 			Messages     []models.ChatMessage
+			AllUsernames template.JS
 		}{
 			PageData: PageData{
 				Title:            "ThreadR - Chat",
@ -178,6 +173,7 @@ func ChatHandler(app *App) http.HandlerFunc {
 				CurrentURL:       r.URL.Path,
 			},
 			Messages:     messages,
+			AllUsernames: template.JS(allUsernamesJSON),
 		}
 		if err := app.Tmpl.ExecuteTemplate(w, "chat", data); err != nil {
 			log.Printf("Error executing template in ChatHandler: %v", err)
--- a/handlers/file.go
+++ b/handlers/file.go
@ -0,0 +1,32 @@
+package handlers
+
+import (
+	"fmt"
+	"net/http"
+	"path/filepath"
+	"strconv"
+	"threadr/models"
+)
+
+func FileHandler(app *App) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		fileIDStr := r.URL.Query().Get("id")
+		fileID, err := strconv.ParseInt(fileIDStr, 10, 64)
+		if err != nil {
+			http.NotFound(w, r)
+			return
+		}
+
+		file, err := models.GetFileByID(app.DB, fileID)
+		if err != nil || file == nil {
+			http.NotFound(w, r)
+			return
+		}
+
+		fileExt := filepath.Ext(file.OriginalName)
+		fileName := fmt.Sprintf("%d%s", fileID, fileExt)
+		filePath := filepath.Join(app.Config.FileStorageDir, fileName)
+
+		http.ServeFile(w, r, filePath)
+	}
+}
--- a/handlers/profile_edit.go
+++ b/handlers/profile_edit.go
@ -1,9 +1,15 @@
 package handlers

 import (
+	"crypto/sha256"
+	"fmt"
+	"io"
 	"log"
 	"net/http"
+	"os"
+	"path/filepath"
 	"threadr/models"
+
 	"github.com/gorilla/sessions"
 )

@ -17,15 +23,74 @@ func ProfileEditHandler(app *App) http.HandlerFunc {
 		}

 		if r.Method == http.MethodPost {
+			// Handle file upload
+			file, handler, err := r.FormFile("pfp")
+			if err == nil {
+				defer file.Close()
+
+				// Create a hash of the file
+				h := sha256.New()
+				if _, err := io.Copy(h, file); err != nil {
+					log.Printf("Error hashing file: %v", err)
+					http.Error(w, "Failed to process file", http.StatusInternalServerError)
+					return
+				}
+				fileHash := fmt.Sprintf("%x", h.Sum(nil))
+
+				// Create file record in the database
+				fileRecord := models.File{
+					OriginalName:    handler.Filename,
+					Hash:            fileHash,
+					HashAlgorithm:   "sha256",
+				}
+				fileID, err := models.CreateFile(app.DB, fileRecord)
+				if err != nil {
+					log.Printf("Error creating file record: %v", err)
+					http.Error(w, "Failed to save file information", http.StatusInternalServerError)
+					return
+				}
+
+				// Save the file to disk
+				fileExt := filepath.Ext(handler.Filename)
+				newFileName := fmt.Sprintf("%d%s", fileID, fileExt)
+				filePath := filepath.Join(app.Config.FileStorageDir, newFileName)
+
+				// Reset file pointer
+				file.Seek(0, 0)
+
+				dst, err := os.Create(filePath)
+				if err != nil {
+					log.Printf("Error creating file on disk: %v", err)
+					http.Error(w, "Failed to save file", http.StatusInternalServerError)
+					return
+				}
+				defer dst.Close()
+
+				if _, err := io.Copy(dst, file); err != nil {
+					log.Printf("Error saving file to disk: %v", err)
+					http.Error(w, "Failed to save file", http.StatusInternalServerError)
+					return
+				}
+
+				// Update user's pfp_file_id
+				err = models.UpdateUserPfp(app.DB, userID, fileID)
+				if err != nil {
+					log.Printf("Error updating user pfp: %v", err)
+					http.Error(w, "Failed to update profile", http.StatusInternalServerError)
+					return
+				}
+			}
+
+			// Update other profile fields
 			displayName := r.FormValue("display_name")
-            pfpURL := r.FormValue("pfp_url")
 			bio := r.FormValue("bio")
-            err := models.UpdateUserProfile(app.DB, userID, displayName, pfpURL, bio)
+			err = models.UpdateUserProfile(app.DB, userID, displayName, bio)
 			if err != nil {
 				log.Printf("Error updating profile: %v", err)
 				http.Error(w, "Failed to update profile", http.StatusInternalServerError)
 				return
 			}
+
 			http.Redirect(w, r, app.Config.ThreadrDir+"/profile/", http.StatusFound)
 			return
 		}
--- a/main.go
+++ b/main.go
@ -49,26 +49,6 @@ func createTablesIfNotExist(db *sql.DB) error {
        return fmt.Errorf("error creating boards table: %v", err)
    }

-    // Create users table
-    _, err = db.Exec(`
-        CREATE TABLE users (
-            id INT AUTO_INCREMENT PRIMARY KEY,
-            username VARCHAR(255) NOT NULL UNIQUE,
-            display_name VARCHAR(255),
-            pfp_url VARCHAR(255),
-            bio TEXT,
-            authentication_string VARCHAR(128) NOT NULL,
-            authentication_salt VARCHAR(255) NOT NULL,
-            authentication_algorithm VARCHAR(50) NOT NULL,
-            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
-            verified BOOLEAN DEFAULT FALSE,
-            permissions BIGINT DEFAULT 0
-        )`)
-    if err != nil {
-        return fmt.Errorf("error creating users table: %v", err)
-    }
-
    // Create threads table (without type field)
    _, err = db.Exec(`
        CREATE TABLE threads (
@ -199,6 +179,41 @@ func createTablesIfNotExist(db *sql.DB) error {
        return fmt.Errorf("error creating chat_messages table: %v", err)
    }

+    // Create files table (Hope this does not break anything)
+    _, err = db.Exec(`
+        CREATE TABLE files (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            original_name VARCHAR(255) NOT NULL,
+            hash VARCHAR(255) NOT NULL,
+            hash_algorithm VARCHAR(50) NOT NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )`)
+    if err != nil {
+        return fmt.Errorf("error creating files table: %v", err)
+    }
+
+    // Create users table (KEEP THIS HERE!)
+    // Otherwise SQL bitches about the foreign key.
+    _, err = db.Exec(`
+        CREATE TABLE users (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            username VARCHAR(255) NOT NULL UNIQUE,
+            display_name VARCHAR(255),
+            pfp_file_id INT,
+            bio TEXT,
+            authentication_string VARCHAR(128) NOT NULL,
+            authentication_salt VARCHAR(255) NOT NULL,
+            authentication_algorithm VARCHAR(50) NOT NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+            verified BOOLEAN DEFAULT FALSE,
+            permissions BIGINT DEFAULT 0,
+            FOREIGN KEY (pfp_file_id) REFERENCES files(id)
+        )`)
+    if err != nil {
+        return fmt.Errorf("error creating users table: %v", err)
+    }
+
    log.Println("Database tables created.")
    return nil
 }
@ -283,6 +298,14 @@ func main() {
    }
    defer db.Close()

+    // Create the file directory
+    // TODO: Wouldn't this be better suited on the initialize function?
+    // Discussion pending.
+    err = os.MkdirAll(config.FileStorageDir, 0700)
+    if err != nil {
+        log.Fatal("Error creating file storage directory:", err)
+    }
+
    // Perform initialization if the flag is set
    if *initialize {
        log.Println("Initializing database...")
@ -360,6 +383,7 @@ func main() {
    http.HandleFunc(config.ThreadrDir+"/signup/", app.SessionMW(handlers.SignupHandler(app)))
    http.HandleFunc(config.ThreadrDir+"/accept_cookie/", app.SessionMW(handlers.AcceptCookieHandler(app)))
    http.HandleFunc(config.ThreadrDir+"/chat/", app.SessionMW(app.RequireLoginMW(handlers.ChatHandler(app))))
+    http.HandleFunc(config.ThreadrDir+"/file", app.SessionMW(handlers.FileHandler(app)))

    log.Println("Server starting on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
--- a/models/chat.go
+++ b/models/chat.go
@ -2,18 +2,19 @@ package models

 import (
 	"database/sql"
+	"regexp"
 	"time"
 )

 type ChatMessage struct {
-	ID          int
-	UserID      int
-	Content     string
-	ReplyTo     int // -1 if not a reply
-	Timestamp   time.Time
-	Username    string // For display, fetched from user
-	PfpURL      string // For display, fetched from user
-	Mentions    []string // List of mentioned usernames
+	ID        int           `json:"id"`
+	UserID    int           `json:"userId"`
+	Content   string        `json:"content"`
+	ReplyTo   int           `json:"replyTo"`
+	Timestamp time.Time     `json:"timestamp"`
+	Username  string        `json:"username"`
+	PfpFileID sql.NullInt64 `json:"pfpFileId"`
+	Mentions  []string      `json:"mentions"`
 }

 func CreateChatMessage(db *sql.DB, msg ChatMessage) error {
@ -24,7 +25,7 @@ func CreateChatMessage(db *sql.DB, msg ChatMessage) error {

 func GetRecentChatMessages(db *sql.DB, limit int) ([]ChatMessage, error) {
 	query := `
-		SELECT cm.id, cm.user_id, cm.content, cm.reply_to, cm.timestamp, u.username, u.pfp_url
+		SELECT cm.id, cm.user_id, cm.content, cm.reply_to, cm.timestamp, u.username, u.pfp_file_id
 		FROM chat_messages cm
 		JOIN users u ON cm.user_id = u.id
 		ORDER BY cm.timestamp DESC
@ -39,8 +40,7 @@ func GetRecentChatMessages(db *sql.DB, limit int) ([]ChatMessage, error) {
 	for rows.Next() {
 		var msg ChatMessage
 		var timestampStr string
-		var pfpURL sql.NullString
-		err := rows.Scan(&msg.ID, &msg.UserID, &msg.Content, &msg.ReplyTo, &timestampStr, &msg.Username, &pfpURL)
+		err := rows.Scan(&msg.ID, &msg.UserID, &msg.Content, &msg.ReplyTo, &timestampStr, &msg.Username, &msg.PfpFileID)
 		if err != nil {
 			return nil, err
 		}
@ -48,10 +48,6 @@ func GetRecentChatMessages(db *sql.DB, limit int) ([]ChatMessage, error) {
 		if err != nil {
 			msg.Timestamp = time.Time{}
 		}
-		if pfpURL.Valid {
-			msg.PfpURL = pfpURL.String
-		}
-		// Parse mentions from content (simple @username detection)
 		msg.Mentions = extractMentions(msg.Content)
 		messages = append(messages, msg)
 	}
@ -60,15 +56,14 @@ func GetRecentChatMessages(db *sql.DB, limit int) ([]ChatMessage, error) {

 func GetChatMessageByID(db *sql.DB, id int) (*ChatMessage, error) {
 	query := `
-		SELECT cm.id, cm.user_id, cm.content, cm.reply_to, cm.timestamp, u.username, u.pfp_url
+		SELECT cm.id, cm.user_id, cm.content, cm.reply_to, cm.timestamp, u.username, u.pfp_file_id
 		FROM chat_messages cm
 		JOIN users u ON cm.user_id = u.id
 		WHERE cm.id = ?`
 	row := db.QueryRow(query, id)
 	var msg ChatMessage
 	var timestampStr string
-	var pfpURL sql.NullString
-	err := row.Scan(&msg.ID, &msg.UserID, &msg.Content, &msg.ReplyTo, &timestampStr, &msg.Username, &pfpURL)
+	err := row.Scan(&msg.ID, &msg.UserID, &msg.Content, &msg.ReplyTo, &timestampStr, &msg.Username, &msg.PfpFileID)
 	if err == sql.ErrNoRows {
 		return nil, nil
 	}
@ -79,54 +74,17 @@ func GetChatMessageByID(db *sql.DB, id int) (*ChatMessage, error) {
 	if err != nil {
 		msg.Timestamp = time.Time{}
 	}
-	if pfpURL.Valid {
-		msg.PfpURL = pfpURL.String
-	}
 	msg.Mentions = extractMentions(msg.Content)
 	return &msg, nil
 }

-func GetUsernamesMatching(db *sql.DB, prefix string) ([]string, error) {
-	query := "SELECT username FROM users WHERE username LIKE ? LIMIT 10"
-	rows, err := db.Query(query, prefix+"%")
-	if err != nil {
-		return nil, err
-	}
-	defer rows.Close()
-
-	var usernames []string
-	for rows.Next() {
-		var username string
-		if err := rows.Scan(&username); err != nil {
-			return nil, err
-		}
-		usernames = append(usernames, username)
-	}
-	return usernames, nil
-}
-
 // Simple utility to extract mentions from content
 func extractMentions(content string) []string {
-	var mentions []string
-	var currentMention string
-	inMention := false
-
-	for _, char := range content {
-		if char == '@' {
-			inMention = true
-			currentMention = "@"
-		} else if inMention && (char == ' ' || char == '\n' || char == '\t') {
-			if len(currentMention) > 1 {
-				mentions = append(mentions, currentMention)
-			}
-			inMention = false
-			currentMention = ""
-		} else if inMention {
-			currentMention += string(char)
-		}
-	}
-	if inMention && len(currentMention) > 1 {
-		mentions = append(mentions, currentMention)
+	re := regexp.MustCompile(`@(\w+)`)
+	matches := re.FindAllStringSubmatch(content, -1)
+	mentions := make([]string, len(matches))
+	for i, match := range matches {
+		mentions[i] = match[1]
 	}
 	return mentions
 }
--- a/models/file.go
+++ b/models/file.go
@ -0,0 +1,35 @@
+package models
+
+import (
+	"database/sql"
+)
+
+type File struct {
+	ID            int
+	OriginalName  string
+	Hash          string
+	HashAlgorithm string
+}
+
+func GetFileByID(db *sql.DB, id int64) (*File, error) {
+	query := "SELECT id, original_name, hash, hash_algorithm FROM files WHERE id = ?"
+	row := db.QueryRow(query, id)
+	file := &File{}
+	err := row.Scan(&file.ID, &file.OriginalName, &file.Hash, &file.HashAlgorithm)
+	if err == sql.ErrNoRows {
+		return nil, nil
+	}
+	if err != nil {
+		return nil, err
+	}
+	return file, nil
+}
+
+func CreateFile(db *sql.DB, file File) (int64, error) {
+	query := "INSERT INTO files (original_name, hash, hash_algorithm) VALUES (?, ?, ?)"
+	result, err := db.Exec(query, file.OriginalName, file.Hash, file.HashAlgorithm)
+	if err != nil {
+		return 0, err
+	}
+	return result.LastInsertId()
+}
--- a/models/user.go
+++ b/models/user.go
@ -11,7 +11,7 @@ type User struct {
 	ID                     int
 	Username               string
 	DisplayName            string
-    PfpURL                 string
+	PfpFileID              sql.NullInt64
 	Bio                    string
 	AuthenticationString   string
 	AuthenticationSalt     string
@ -23,15 +23,14 @@ type User struct {
 }

 func GetUserByID(db *sql.DB, id int) (*User, error) {
-    query := "SELECT id, username, display_name, pfp_url, bio, authentication_string, authentication_salt, authentication_algorithm, created_at, updated_at, verified, permissions FROM users WHERE id = ?"
+	query := "SELECT id, username, display_name, pfp_file_id, bio, authentication_string, authentication_salt, authentication_algorithm, created_at, updated_at, verified, permissions FROM users WHERE id = ?"
 	row := db.QueryRow(query, id)
 	user := &User{}
 	var displayName sql.NullString
-    var pfpURL sql.NullString
 	var bio sql.NullString
 	var createdAtString sql.NullString
 	var updatedAtString sql.NullString
-    err := row.Scan(&user.ID, &user.Username, &displayName, &pfpURL, &bio, &user.AuthenticationString, &user.AuthenticationSalt, &user.AuthenticationAlgorithm, &createdAtString, &updatedAtString, &user.Verified, &user.Permissions)
+	err := row.Scan(&user.ID, &user.Username, &displayName, &user.PfpFileID, &bio, &user.AuthenticationString, &user.AuthenticationSalt, &user.AuthenticationAlgorithm, &createdAtString, &updatedAtString, &user.Verified, &user.Permissions)
 	if err == sql.ErrNoRows {
 		return nil, nil
 	}
@ -43,11 +42,6 @@ func GetUserByID(db *sql.DB, id int) (*User, error) {
 	} else {
 		user.DisplayName = ""
 	}
-    if pfpURL.Valid {
-        user.PfpURL = pfpURL.String
-    } else {
-        user.PfpURL = ""
-    }
 	if bio.Valid {
 		user.Bio = bio.String
 	} else {
@ -73,15 +67,14 @@ func GetUserByID(db *sql.DB, id int) (*User, error) {
 }

 func GetUserByUsername(db *sql.DB, username string) (*User, error) {
-    query := "SELECT id, username, display_name, pfp_url, bio, authentication_string, authentication_salt, authentication_algorithm, created_at, updated_at, verified, permissions FROM users WHERE username = ?"
+	query := "SELECT id, username, display_name, pfp_file_id, bio, authentication_string, authentication_salt, authentication_algorithm, created_at, updated_at, verified, permissions FROM users WHERE username = ?"
 	row := db.QueryRow(query, username)
 	user := &User{}
 	var displayName sql.NullString
-    var pfpURL sql.NullString
 	var bio sql.NullString
 	var createdAtString sql.NullString
 	var updatedAtString sql.NullString
-    err := row.Scan(&user.ID, &user.Username, &displayName, &pfpURL, &bio, &user.AuthenticationString, &user.AuthenticationSalt, &user.AuthenticationAlgorithm, &createdAtString, &updatedAtString, &user.Verified, &user.Permissions)
+	err := row.Scan(&user.ID, &user.Username, &displayName, &user.PfpFileID, &bio, &user.AuthenticationString, &user.AuthenticationSalt, &user.AuthenticationAlgorithm, &createdAtString, &updatedAtString, &user.Verified, &user.Permissions)
 	if err != nil {
 		return nil, err
 	}
@ -90,11 +83,6 @@ func GetUserByUsername(db *sql.DB, username string) (*User, error) {
 	} else {
 		user.DisplayName = ""
 	}
-    if pfpURL.Valid {
-        user.PfpURL = pfpURL.String
-    } else {
-        user.PfpURL = ""
-    }
 	if bio.Valid {
 		user.Bio = bio.String
 	} else {
@ -145,9 +133,15 @@ func CreateUser(db *sql.DB, username, password string) error {
 	return err
 }

-func UpdateUserProfile(db *sql.DB, userID int, displayName, pfpURL, bio string) error {
-    query := "UPDATE users SET display_name = ?, pfp_url = ?, bio = ?, updated_at = NOW() WHERE id = ?"
-    _, err := db.Exec(query, displayName, pfpURL, bio, userID)
+func UpdateUserProfile(db *sql.DB, userID int, displayName, bio string) error {
+	query := "UPDATE users SET display_name = ?, bio = ?, updated_at = NOW() WHERE id = ?"
+	_, err := db.Exec(query, displayName, bio, userID)
+	return err
+}
+
+func UpdateUserPfp(db *sql.DB, userID int, pfpFileID int64) error {
+	query := "UPDATE users SET pfp_file_id = ? WHERE id = ?"
+	_, err := db.Exec(query, pfpFileID, userID)
 	return err
 }

@ -159,3 +153,22 @@ const (
 func HasGlobalPermission(user *User, perm int64) bool {
 	return user.Permissions&perm != 0
 }
+
+func GetAllUsernames(db *sql.DB) ([]string, error) {
+	query := "SELECT username FROM users ORDER BY username ASC"
+	rows, err := db.Query(query)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var usernames []string
+	for rows.Next() {
+		var username string
+		if err := rows.Scan(&username); err != nil {
+			return nil, err
+		}
+		usernames = append(usernames, username)
+	}
+	return usernames, nil
+}
--- a/templates/pages/chat.html
+++ b/templates/pages/chat.html
@ -224,8 +224,8 @@
                {{range .Messages}}
                <div class="chat-message" id="msg-{{.ID}}">
                    <div class="chat-message-header">
-                        {{if .PfpURL}}
-                        <img src="{{.PfpURL}}" alt="PFP" class="chat-message-pfp">
+                        {{if .PfpFileID.Valid}}
+                        <img src="{{$.BasePath}}/file?id={{.PfpFileID.Int64}}" alt="PFP" class="chat-message-pfp">
                        {{else}}
                        <div class="chat-message-pfp" style="background-color: #001858;"></div>
                        {{end}}
@ -257,12 +257,11 @@
    <script>
        let ws;
        let autocompleteActive = false;
-        let autocompletePrefix = '';
        let replyToId = -1;
-        let replyUsername = '';
+        const allUsernames = {{.AllUsernames}};

        function connectWebSocket() {
-            ws = new WebSocket('ws://' + window.location.host + '{{.BasePath}}/chat/?ws=true', [], { credentials: 'include' });
+            ws = new WebSocket('ws://' + window.location.host + '{{.BasePath}}/chat/?ws=true');
            ws.onmessage = function(event) {
                const msg = JSON.parse(event.data);
                appendMessage(msg);
@ -288,7 +287,7 @@
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify(msg));
                input.value = '';
-                cancelReply(); // Reset reply state after sending
+                cancelReply();
            } else {
                console.error("WebSocket is not open. Current state:", ws ? ws.readyState : 'undefined');
            }
@ -298,21 +297,24 @@
            const messages = document.getElementById('chat-messages');
            const msgDiv = document.createElement('div');
            msgDiv.className = 'chat-message';
-            msgDiv.id = 'msg-' + msg.ID;
-            let pfpHTML = msg.PfpURL ? `<img src="${msg.PfpURL}" alt="PFP" class="chat-message-pfp">` : `<div class="chat-message-pfp" style="background-color: #001858;"></div>`;
-            let replyHTML = msg.ReplyTo > 0 ? `<div class="chat-message-reply" onclick="scrollToMessage(${msg.ReplyTo})">Replying to ${msg.Username}</div>` : '';
-            // Process content for mentions
-            let content = msg.Content.replace(/@[\w]+/g, match => `<span class="chat-message-mention">${match}</span>`);
+            msgDiv.id = 'msg-' + msg.id;
+            let pfpHTML = `<div class="chat-message-pfp" style="background-color: #001858;"></div>`;
+            if (msg.pfpFileId && msg.pfpFileId.Valid) {
+                pfpHTML = `<img src="{{.BasePath}}/file?id=${msg.pfpFileId.Int64}&t=${new Date().getTime()}" alt="PFP" class="chat-message-pfp">`;
+            }
+            let replyHTML = msg.replyTo > 0 ? `<div class="chat-message-reply" onclick="scrollToMessage(${msg.replyTo})">Replying...</div>` : '';
+            let content = msg.content.replace(/@(\w+)/g, '<span class="chat-message-mention">@$1</span>');
+            
            msgDiv.innerHTML = `
                <div class="chat-message-header">
                    ${pfpHTML}
-                    <span class="chat-message-username">${msg.Username}</span>
-                    <span class="chat-message-timestamp">${new Date(msg.Timestamp).toLocaleString()}</span>
+                    <span class="chat-message-username">${msg.username}</span>
+                    <span class="chat-message-timestamp">${new Date(msg.timestamp).toLocaleString()}</span>
                </div>
                ${replyHTML}
                <div class="chat-message-content">${content}</div>
                <div class="post-actions">
-                    <a href="javascript:void(0)" onclick="replyToMessage(${msg.ID}, '${msg.Username}')">Reply</a>
+                    <a href="javascript:void(0)" onclick="replyToMessage(${msg.id}, '${msg.username}')">Reply</a>
                </div>
            `;
            messages.appendChild(msgDiv);
@ -321,7 +323,6 @@

        function replyToMessage(id, username) {
            replyToId = id;
-            replyUsername = username;
            const replyIndicator = document.getElementById('reply-indicator');
            const replyUsernameSpan = document.getElementById('reply-username');
            replyUsernameSpan.textContent = `Replying to ${username}`;
@ -331,7 +332,6 @@

        function cancelReply() {
            replyToId = -1;
-            replyUsername = '';
            const replyIndicator = document.getElementById('reply-indicator');
            replyIndicator.style.display = 'none';
        }
@ -339,22 +339,27 @@
        function scrollToMessage(id) {
            const msgElement = document.getElementById('msg-' + id);
            if (msgElement) {
-                msgElement.scrollIntoView({ behavior: 'smooth' });
+                msgElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                msgElement.style.transition = 'background-color 0.5s';
+                msgElement.style.backgroundColor = '#f582ae';
+                setTimeout(() => { msgElement.style.backgroundColor = ''; }, 1000);
            }
        }

-        function showAutocompletePopup(usernames, x, y) {
+        function showAutocompletePopup(suggestions, x, y) {
            const popup = document.getElementById('autocomplete-popup');
            popup.innerHTML = '';
+            popup.style.position = 'fixed';
            popup.style.left = x + 'px';
            popup.style.top = y + 'px';
            popup.style.display = 'block';
            autocompleteActive = true;
-            usernames.forEach(username => {
+            suggestions.forEach(username => {
                const item = document.createElement('div');
                item.className = 'autocomplete-item';
                item.textContent = username;
-                item.onclick = () => {
+                item.onmousedown = (e) => {
+                    e.preventDefault();
                    completeMention(username);
                    popup.style.display = 'none';
                    autocompleteActive = false;
@ -366,67 +371,96 @@
        function completeMention(username) {
            const input = document.getElementById('chat-input-text');
            const text = input.value;
-            const atIndex = text.lastIndexOf('@', input.selectionStart - 1);
+            const caretPos = input.selectionStart;
+            const textBeforeCaret = text.substring(0, caretPos);
+            const atIndex = textBeforeCaret.lastIndexOf('@');
+
            if (atIndex !== -1) {
-                const before = text.substring(0, atIndex);
-                const after = text.substring(input.selectionStart);
-                input.value = before + username + (after.startsWith(' ') ? '' : ' ') + after;
+                const prefix = text.substring(0, atIndex);
+                const suffix = text.substring(caretPos);
+                input.value = prefix + '@' + username + ' ' + suffix;
+                const newCaretPos = prefix.length + 1 + username.length + 1;
                input.focus();
+                input.setSelectionRange(newCaretPos, newCaretPos);
            }
        }

-        document.getElementById('chat-input-text').addEventListener('input', async (e) => {
-            const text = e.target.value;
-            const caretPos = e.target.selectionStart;
-            const atIndex = text.lastIndexOf('@', caretPos - 1);
-            if (atIndex !== -1 && (caretPos === text.length || text[caretPos] === ' ')) {
-                const prefix = text.substring(atIndex + 1, caretPos);
-                autocompletePrefix = prefix;
-                const response = await fetch('{{.BasePath}}/chat/?autocomplete=true&prefix=' + encodeURIComponent(prefix));
-                const usernames = await response.json();
-                if (usernames.length > 0) {
-                    const rect = e.target.getBoundingClientRect();
-                    // Approximate caret position (this is a rough estimate)
-                    const charWidth = 8; // Rough estimate of character width in pixels
-                    const caretX = rect.left + (caretPos - text.lastIndexOf('\n', caretPos - 1) - 1) * charWidth;
-                    showAutocompletePopup(usernames, caretX, rect.top - 10);
-                } else {
-                    document.getElementById('autocomplete-popup').style.display = 'none';
-                    autocompleteActive = false;
-                }
+        function getCaretCoordinates(element, position) {
+            const mirrorDivId = 'input-mirror-div';
+            let div = document.getElementById(mirrorDivId);
+            if (!div) {
+                div = document.createElement('div');
+                div.id = mirrorDivId;
+                document.body.appendChild(div);
+            }
+            const style = window.getComputedStyle(element);
+            const properties = ['border', 'boxSizing', 'fontFamily', 'fontSize', 'fontWeight', 'letterSpacing', 'lineHeight', 'padding', 'textDecoration', 'textIndent', 'textTransform', 'whiteSpace', 'wordSpacing', 'wordWrap', 'width'];
+            properties.forEach(prop => { div.style[prop] = style[prop]; });
+            div.style.position = 'absolute';
+            div.style.top = '-9999px';
+            div.style.left = '0px';
+            div.textContent = element.value.substring(0, position);
+
+            const span = document.createElement('span');
+            span.textContent = element.value.substring(position) || '.';
+            div.appendChild(span);
+
+            return { top: span.offsetTop, left: span.offsetLeft };
+        }
+
+        document.getElementById('chat-input-text').addEventListener('input', (e) => {
+            const input = e.target;
+            const text = input.value;
+            const caretPos = input.selectionStart;
+            const popup = document.getElementById('autocomplete-popup');
+            const textBeforeCaret = text.substring(0, caretPos);
+            const atIndex = textBeforeCaret.lastIndexOf('@');
+
+            if (atIndex !== -1 && (atIndex === 0 || /\s/.test(text.charAt(atIndex - 1)))) {
+                const query = textBeforeCaret.substring(atIndex + 1);
+                if (!/\s/.test(query)) {
+                    const suggestions = allUsernames.filter(u => u.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10);
+                    if (suggestions.length > 0 && query.length > 0) {
+                        const coords = getCaretCoordinates(input, atIndex);
+                        const rect = input.getBoundingClientRect();
+                        showAutocompletePopup(suggestions, rect.left + coords.left, rect.top + coords.top + 20);
                    } else {
+                        popup.style.display = 'none';
+                        autocompleteActive = false;
+                    }
+                    return;
+                }
+            }
+            popup.style.display = 'none';
+            autocompleteActive = false;
+        });
+        
+        document.getElementById('chat-input-text').addEventListener('blur', () => {
+            setTimeout(() => {
+                if (!document.querySelector('.autocomplete-popup:hover')) {
                     document.getElementById('autocomplete-popup').style.display = 'none';
                     autocompleteActive = false;
                }
+            }, 150);
        });

        document.getElementById('chat-input-text').addEventListener('keydown', (e) => {
-            if (autocompleteActive) {
-                const popup = document.getElementById('autocomplete-popup');
-                const items = popup.getElementsByClassName('autocomplete-item');
-                if (e.key === 'Enter' && items.length > 0) {
-                    items[0].click();
+            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
-                } else if (e.key === 'ArrowDown' && items.length > 0) {
-                    items[0].focus();
-                    e.preventDefault();
-                }
-            } else if (e.key === 'Enter' && !e.shiftKey) {
                sendMessage();
-                e.preventDefault();
            }
        });

-        document.addEventListener('click', (e) => {
-            if (!e.target.closest('#autocomplete-popup') && !e.target.closest('#chat-input-text')) {
-                document.getElementById('autocomplete-popup').style.display = 'none';
-                autocompleteActive = false;
-            }
-        });
-
-        // Connect WebSocket on page load
        window.onload = function() {
            connectWebSocket();
+            
+            // Highlight mentions in pre-loaded messages
+            document.querySelectorAll('.chat-message-content').forEach(function(el) {
+                const text = el.innerHTML; // The Go template already escaped it for security
+                const newHTML = text.replace(/@(\w+)/g, '<span class="chat-message-mention">@$1</span>');
+                el.innerHTML = newHTML;
+            });
+
            document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
        };
    </script>
--- a/templates/pages/profile.html
+++ b/templates/pages/profile.html
@ -14,8 +14,8 @@
        <section>
            <p>Username: {{.User.Username}}</p>
            <p>Display Name: {{.DisplayName}}</p>
-            {{if .User.PfpURL}}
-            <img src="{{.User.PfpURL}}" alt="Profile Picture">
+            {{if .User.PfpFileID.Valid}}
+            <img src="{{.BasePath}}/file?id={{.User.PfpFileID.Int64}}" alt="Profile Picture">
            {{end}}
            <p>Bio: {{.User.Bio}}</p>
            <p>Joined: {{.User.CreatedAt}}</p>
--- a/templates/pages/profile_edit.html
+++ b/templates/pages/profile_edit.html
@ -12,11 +12,11 @@
            <h2>Edit Profile</h2>
        </header>
        <section>
-            <form method="post" action="{{.BasePath}}/profile/edit/">
+            <form method="post" action="{{.BasePath}}/profile/edit/" enctype="multipart/form-data">
                <label for="display_name">Display Name:</label>
                <input type="text" id="display_name" name="display_name" value="{{.User.DisplayName}}"><br>
-                <label for="pfp_url">Profile Picture URL:</label>
-                <input type="text" id="pfp_url" name="pfp_url" value="{{.User.PfpURL}}"><br>
+                <label for="pfp">Profile Picture:</label>
+                <input type="file" id="pfp" name="pfp"><br>
                <label for="bio">Bio:</label>
                <textarea id="bio" name="bio">{{.User.Bio}}</textarea><br>
                <input type="submit" value="Save">
Author	SHA1	Message	Date
Joca	b1db26af16	Chat: Highlight user mentions even after page reload	2025-08-09 21:05:01 -03:00
Joca	d3db9723ec	chat: polish mention system We now have a proper autocomplete. Next on the list is moving the chat page into it's proper place and add pop-ups for profiles.	2025-08-03 19:21:06 -03:00
Joca	d2d64d69fc	handlers/app.go: Removed Strict IP and User-Agent Session Validation So, turns out validating stuff with these parameters is not a good idea at all. FML honestly.	2025-06-29 21:24:28 -03:00
Joca	7b0528ef36	feat: Add file-based avatar system - A new `files` table to store metadata about uploaded files, including original name and hash. - The `users` table is updated to reference a `pfp_file_id` from the new `files` table, removing the insecure `pfp_url` field. - A new `/file` endpoint and handler (`handlers/file.go`) are created to serve files securely based on their ID, preventing direct file system access. - Profile editing (`handlers/profile_edit.go` and `templates/pages/profile_edit.html`) is updated to handle file uploads instead of URL inputs. - The chat feature (`models/chat.go` and `templates/pages/chat.html`) is updated to work with the new file ID system, ensuring avatars are displayed correctly. Should also fix #68.	2025-06-21 16:21:21 -03:00