changes

config.json

@@ -1,8 +1,7 @@
 {
 	"server": {
 		"ipAddress": "192.168.1.222",
-		"port": 8080,
+		"port": 8080
-		"messageMaxAge": 259200
 	},
 	"paths": {
 		"databasePath": "/home/radon/Documents/chattest.db",
@@ -10,5 +9,9 @@
 		"indexCssPath": "./content/root.css",
 		"indexHtmlPath": "./content/root.html",
 		"messagesHtmlPath": "./content/messages.html"
+	},
+	"options": {
+		"messageMaxAge": 259200,
+		"nameMaxLength": 32
 	}
 }

content/root.css

@@ -255,14 +255,14 @@ body {
 	gap: 10px;
 }
 
-.youtube-embed {
+.video-embed {
 	position: inline;
 	padding-top: 10px;
 	width: 100%;
 	max-width: 560px;  /* Standard YouTube width */
 }
 
-.youtube-embed iframe {
+.video-embed iframe {
 	border-radius: 4px;
 }
 

content/root.js

@@ -39,9 +39,7 @@ async function deleteMessage(messageId) {
 			});
 
 			if (response.ok) {
-				// Refresh messages
+				updateMessagesInPlace();
-				console.log("Message deleted successfully");
-				location.reload();
 			} else {
 				console.error("Failed to delete message");
 			}
@@ -51,6 +49,22 @@ async function deleteMessage(messageId) {
 	}
 }
 
+async function updateMessagesInPlace() {
+	const currenteScrollLocation = getScrollLocation();
+	await loadMessages(true);
+	setScrollLocation(currenteScrollLocation);
+}
+
+function getScrollLocation() {
+	const messagesDiv = document.getElementById("messages");
+	return messagesDiv.scrollTop;
+}
+
+function setScrollLocation(height) {
+	const messagesDiv = document.getElementById("messages");
+	messagesDiv.scrollTop = height;
+}
+
 document.addEventListener("click", function (event) {
 	const settingsPanel = document.getElementById("settings-panel");
 	const settingsButton = document.querySelector(".settings-button");
@@ -117,7 +131,7 @@ async function loadUsers() {
 }
 
 let lastMessageCount = 0;
-async function loadMessages() {
+async function loadMessages(forceUpdate = false) {
 	try {
 		let messagesDiv = document.getElementById("messages");
 		const response = await fetch("/messages");
@@ -152,10 +166,10 @@ async function loadMessages() {
 
 		const newMessageCount = messages.length;
 
-		if (
+		const update = newMessageCount != lastMessageCount ||
-			newMessageCount > lastMessageCount ||
+			lastMessageCount === 0 || forceUpdate;
-			lastMessageCount === 0
+
-		) {
+		if (update) {
 			messagesDiv.innerHTML = "";
 			Array.from(messages).forEach((msg) => {
 				const messageDiv = document.createElement(
@@ -172,49 +186,16 @@ async function loadMessages() {
 						"<br>",
 					);
 
-				const linkedContent = content.replace(
-					/(?![^<]*>)(https?:\/\/[^\s<]+)/g,
-					function (url) {
-						console.log(
-							"Processing URL:",
-							url,
-						); // Debug log
-
-						const videoId = getYouTubeID(
-							url,
-						);
-						if (videoId) {
-							return `<div class="youtube-embed"><iframe 
-									    width="100%" 
-									    height="315" 
-									    src="https://www.youtube.com/embed/${videoId}" 
-									    frameborder="0" 
-									    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-									    allowfullscreen>
-									</iframe></div>`;
-						} else if (isImageUrl(url)) {
-							console.log(
-								"Attempting to embed image:",
-								url,
-							);
-							return `<div class="image-embed"><img 
-									    src="${url}" 
-									    alt="Embedded image" 
-									    loading="lazy" 
-									    onerror="console.log('Image failed to load:', this.src); this.style.display='none'"
-									    onload="console.log('Image loaded successfully:', this.src)"></div>`;
-						}
-						return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
-					},
-				);
-
-				let deleteHtml = "";
-
 				const usernameDiv = document.createElement(
 					"div",
 				);
 				usernameDiv.innerHTML = username;
 				compareUsername = usernameDiv.textContent;
+				let deleteHtml = "";
+
+				const embeddedContent = contentEmbedding(
+					content,
+				);
 
 				if (
 					compareUsername ===
@@ -229,7 +210,7 @@ async function loadMessages() {
 					<div class="message-header">
 						<div class="username">${username} ${timestamp} ${deleteHtml}</div>
 					</div>
-					<div class="content">${linkedContent}</div>`;
+					<div class="content">${embeddedContent}</div>`;
 
 				messagesDiv.appendChild(messageDiv);
 			});
@@ -241,6 +222,36 @@ async function loadMessages() {
 	}
 }
 
+function contentEmbedding(content) {
+	return content.replace(
+		/(?![^<]*>)(https?:\/\/[^\s<]+)/g,
+		function (url) {
+			const videoId = getYouTubeID(
+				url,
+			);
+			if (videoId) {
+				return `<div class="video-embed"><iframe 
+									width="100%" 
+									height="315" 
+									src="https://www.youtube.com/embed/${videoId}" 
+									frameborder="0" 
+									onerror="console.log('Video failed to load:', this.src); this.style.display='none'"
+									onload="console.log('Video loaded successfully:', this.src)" 
+									allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+									allowfullscreen></iframe></div>`;
+			} else if (isImageUrl(url)) {
+				return `<div class="image-embed"><img 
+									src="${url}" 
+									alt="Embedded image" 
+									loading="lazy" 
+									onerror="console.log('Image failed to load:', this.src); this.style.display='none'"
+									onload="console.log('Image loaded successfully:', this.src)"></div>`;
+			}
+			return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
+		},
+	);
+}
+
 function isImageUrl(url) {
 	return url.match(/\.(jpeg|jpg|gif|png|webp|bmp)($|\?)/i) != null;
 }
@@ -327,8 +338,8 @@ async function setUsername() {
 			setTimeout(() => {
 				document.getElementById("settings-panel").style
 					.display = "none";
-			}, 500);
+			}, 750);
-			location.reload();
+			updateMessagesInPlace();
 		} else {
 			showUsernameStatus(
 				data.error || "Failed to set username",
@@ -363,7 +374,7 @@ async function sendMessage() {
 		if (response.ok) {
 			messageInput.value = "";
 			messageInput.style.height = "auto";
-			loadMessages();
+			loadMessages(true);
 		} else {
 			showStatus(
 				data.error || "Failed to send message",
@@ -470,7 +481,7 @@ async function initialize() {
 	setInterval(loadMessages, 1000);
 	setInterval(loadUsers, 1000);
 	setInterval(pingCheck, 3000);
-	await loadMessages();
+	await loadMessages(true);
 	scrollToBottom();
 }
 

main.go

@@ -438,8 +438,8 @@ func (s *Server) handleUsername(w http.ResponseWriter, r *http.Request) {
 
 	s.mu.Lock()
 
-	if len(req.Username) > 64 {
+	if len(req.Username) > s.Config.Options.NameMaxLength {
-		http.Error(w, fmt.Sprintf(`{"error": "Username too long (must be less than 64 characters)"}`), http.StatusRequestEntityTooLarge)
+		http.Error(w, fmt.Sprintf(`{"error": "Username too long (%v out of %v characters maximum)"}`, len(req.Username), s.Config.Options.NameMaxLength), http.StatusRequestEntityTooLarge)
 		s.mu.Unlock()
 		return
 	}
@@ -451,8 +451,8 @@ func (s *Server) handleUsername(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if s.Database.UserNameExists(req.Username) {
-		s.mu.Unlock()
 		http.Error(w, fmt.Sprintf(`{"error": "Username already exists"}`), http.StatusConflict)
+		s.mu.Unlock()
 		return
 	}
 
@@ -659,7 +659,7 @@ func (s *Server) handleCss(w http.ResponseWriter, r *http.Request) {
 func (s *Server) Run() {
 	s.Database.DbCreateTableMessages()
 	s.Database.DbCreateTableUsers()
-	s.Database.DeleteOldMessages(s.Config.Server.MessageMaxAge)
+	s.Database.DeleteOldMessages(s.Config.Options.MessageMaxAge)
 	handler := http.NewServeMux()
 	handler.HandleFunc("/ping", s.handlePing)
 	handler.HandleFunc("/username", s.handleUsername)
@@ -699,9 +699,8 @@ func main() {
 
 type Config struct {
 	Server struct {
-		IpAddress     string `json:"ipAddress"`
+		IpAddress string `json:"ipAddress"`
-		Port          int    `json:"port"`
+		Port      int    `json:"port"`
-		MessageMaxAge int    `json:"messageMaxAge"`
 	} `json:"server"`
 	Paths struct {
 		DatabasePath     string `json:"databasePath"`
@@ -710,6 +709,10 @@ type Config struct {
 		IndexHtmlPath    string `json:"indexHtmlPath"`
 		MessagesHtmlPath string `json:"messagesHtmlPath"`
 	} `json:"paths"`
+	Options struct {
+		MessageMaxAge int `json:"messageMaxAge"`
+		NameMaxLength int `json:"nameMaxLength"`
+	} `json:"options"`
 }
 
 func LoadConfig(filepath string) Config {

readme.md

@@ -2,8 +2,6 @@
 ## Frontend
 ### High Priority
 - Nothing yet 
-- Fix scroll to bottom on initial load?
-- Add delete button tooltip
 ### Mid Priority
 - Other embeds (Twitter posts, spotify tracks, soundcloud, github repos, instagram posts, other video platforms)
 ### Low Priority