tab index and final tags

chat.css

@@ -46,6 +46,7 @@ input[type="submit"] {
 	transform: translate(0);
 	transition: transform 0.4s ease-out;
 	text-transform: capitalize;
+	user-select: none;
 }
 
 .tag:hover {
@@ -117,3 +118,23 @@ input[type="submit"] {
 .baloon .contents {
 	margin: 0;
 }
+
+.baloon .category {
+	color: #fcc;
+}
+
+.category::after {
+	content: ", ";
+}
+
+/* .category::before {
+	content: "#";
+} */
+
+.category:first-of-type::before {
+	content: " ";
+}
+
+.category:last-of-type::after {
+	content: "";
+}

csv_to_chat.js

@@ -189,15 +189,18 @@ function createBaloon(text, username, tags) {
 	let baloon = document.createElement("div");
 	baloon.classList.add("baloon");
 
+	let contents;
+	let author;
+
 	if (text) {
-		let contents = document.createElement("p");
+		contents = document.createElement("p");
 		contents.classList.add("contents");
 		contents.innerHTML = text;
 		baloon.appendChild(contents);
 	}
 
 	if (username) {
-		let author = document.createElement("span");
+		author = document.createElement("span");
 		author.classList.add("author");
 		author.innerHTML = username;
 		baloon.appendChild(author);
@@ -205,6 +208,11 @@ function createBaloon(text, username, tags) {
 
 	if (tags) {
 		tags.forEach((tag) => {
+			let category = document.createElement("span");
+			category.innerHTML = tag;
+			category.classList.add("category");
+			if (text) contents.appendChild(category);
+
 			tag = tag.replaceAll(" ", "-");
 			baloon.classList.add(tag);
 		});
@@ -219,6 +227,7 @@ function createTag(tag) {
 	let chip = document.createElement("li");
 	chip.classList.add("tag");
 	chip.setAttribute("data-tag", tag);
+	chip.setAttribute("tabindex", 0);
 	chip.innerHTML = tag;
 	return chip;
 }