fix saving not working & better language detection

internal/preview.html

@@ -23,14 +23,26 @@
 
 			title.innerText = data.name;
 
-			if (data.name.endsWith(".txt")) {
+			let language = guessLanguage(data.name);
-				body.innerText = data.content;
+
+			if (language) {
+				const code = hljs.highlight(data.content, {
+					language: language,
+				});
+
+				body.innerHTML = code.value;
 			} else {
-				body.innerHTML = hljs.highlightAuto(data.content).value;
+				const code = hljs.highlightAuto(data.content);
+
+				language = code.language;
+
+				body.innerHTML = code.value;
 			}
 
+			title.innerText += ` (${language})`;
+
 			addEventListener("keydown", event => {
-				if ((event.ctrlKey || event.metaKey) && event.key === "S") {
+				if ((event.ctrlKey || event.metaKey) && event.key === "s") {
 					event.preventDefault();
 
 					const el = document.createElement("a");
@@ -43,6 +55,94 @@
 					window.close();
 				}
 			});
+
+			function guessLanguage(name) {
+				const extensions = {
+					js: "javascript",
+					mjs: "javascript",
+					cjs: "javascript",
+					jsx: "javascript",
+					ts: "typescript",
+					tsx: "typescript",
+					json: "json",
+					jsonc: "json",
+					html: "html",
+					htm: "html",
+					css: "css",
+					scss: "scss",
+					sass: "scss",
+					less: "less",
+					go: "go",
+					php: "php",
+					sh: "bash",
+					bash: "bash",
+					ps1: "powershell",
+					bat: "dos",
+					cmd: "dos",
+					reg: "ini",
+					env: "ini",
+					properties: "properties",
+					ini: "ini",
+					conf: "ini",
+					toml: "toml",
+					yaml: "yaml",
+					yml: "yaml",
+					md: "markdown",
+					txt: "text",
+					csv: "csv",
+					xml: "xml",
+					svg: "xml",
+					py: "python",
+					rb: "ruby",
+					rbs: "ruby",
+					lua: "lua",
+					pl: "perl",
+					pm: "perl",
+					java: "java",
+					kt: "kotlin",
+					kts: "kotlin",
+					c: "c",
+					h: "c",
+					cc: "cpp",
+					cpp: "cpp",
+					cxx: "cpp",
+					hh: "cpp",
+					hpp: "cpp",
+					hxx: "cpp",
+					cs: "csharp",
+					m: "objectivec",
+					mm: "objectivec",
+					rs: "rust",
+					zig: "zig",
+					asm: "x86asm",
+					swift: "swift",
+					sql: "sql",
+					psq: "pgsql",
+					psql: "pgsql",
+					nginx: "nginx",
+					proto: "protobuf",
+					dockerfile: "dockerfile",
+					ejs: "javascript",
+					diff: "diff",
+					patch: "diff",
+					log: "text",
+				};
+
+				const test = name.toLowerCase().trim();
+
+				if (test === "go.mod" || test === "go.sum") {
+					return "go";
+				}
+
+				for (const ext in extensions) {
+					if (test.endsWith(`.${ext}`)) {
+						return extensions[ext];
+					}
+				}
+
+				return null;
+			}
+
 		</script>
 	</body>
 </html>

static/css/chat.css

@@ -883,6 +883,7 @@ body:not(.loading) #loading {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	cursor: pointer;
 }
 
 .files .file::before {

static/js/chat.js

@@ -549,38 +549,7 @@
 				return;
 			}
 
-			// build form
+			previewFile(file);
-			const form = make("form");
-
-			form.style.display = "none";
-
-			form.enctype = "multipart/form-data";
-			form.method = "post";
-			form.action = "/-/preview";
-			form.target = "_blank";
-
-			// add name field
-			const name = make("input");
-
-			name.name = "name";
-			name.value = file.name;
-
-			form.appendChild(name);
-
-			// add content field
-			const content = make("textarea");
-
-			content.name = "content";
-			content.value = file.content;
-
-			form.appendChild(content);
-
-			// send form
-			document.body.appendChild(form);
-
-			form.submit();
-
-			form.remove();
 		}
 
 		#handleImages(element) {
@@ -1756,6 +1725,18 @@
 
 		_file.appendChild(_name);
 
+		_name.addEventListener("click", () => {
+			previewFile(file);
+		});
+
+		_name.addEventListener("auxclick", event => {
+			if (event.button !== 1) {
+				return;
+			}
+
+			previewFile(file);
+		});
+
 		// token count
 		if ("tokens" in file && Number.isInteger(file.tokens)) {
 			const _tokens = make("div", "tokens");

static/js/lib.js

@@ -176,6 +176,41 @@ function lines(text) {
 	return count + 1;
 }
 
+function previewFile(file) {
+	// build form
+	const form = make("form");
+
+	form.style.display = "none";
+
+	form.enctype = "multipart/form-data";
+	form.method = "post";
+	form.action = "/-/preview";
+	form.target = "_blank";
+
+	// add name field
+	const name = make("input");
+
+	name.name = "name";
+	name.value = file.name;
+
+	form.appendChild(name);
+
+	// add content field
+	const content = make("textarea");
+
+	content.name = "content";
+	content.value = file.content;
+
+	form.appendChild(content);
+
+	// send form
+	document.body.appendChild(form);
+
+	form.submit();
+
+	form.remove();
+}
+
 function readFile(file, handler, onError = false) {
 	return new Promise(resolve => {
 		const reader = new FileReader();