feat: conversation titles

caesar.json

@@ -1,4 +1,5 @@
 {
+    "title": "Julius Caesar",
     "characters": [
         "Mark Antony",
         "Julius Caesar"

ides-of-march.json

@@ -1,4 +1,5 @@
 {
+    "title": "Operation Ides of March",
     "characters": [
         "Mark Antony",
         "Cassius",

lepidus.json

@@ -1,4 +1,5 @@
 {
+    "title": "Lepidus",
     "characters": [
         "Mark Antony",
         "Lepidus"

lucius.json

@@ -1,4 +1,5 @@
 {
+    "title": "Lucius Antony",
     "characters": [
         "Mark Antony",
         "Lucius Antony"

main.js

@@ -234,10 +234,9 @@ function showConversation(path) {
     setVisibleOnMobile(mainPanel, true);
     setVisibleOnMobile(conversationListElem, false);
 
-    const title = path.split(".")[0];
 
     readConversationJson(path, json => {
-        conversation = new Conversation(title);
+        conversation = new Conversation(json.title);
         const jsonMessages = json.messages;
         const participants = json.characters;
 
@@ -264,7 +263,6 @@ function showConversation(path) {
 }
 
 function addConversationPreview(path) {
-    const title = path.split(".")[0];
     const listRoot = document.getElementById("side-panel");
 
     readConversationJson(path, json => {
@@ -275,7 +273,7 @@ function addConversationPreview(path) {
         elem.className = "conversation";
 
         const headerElem = document.createElement("h2");
-        headerElem.innerHTML = title;
+        headerElem.innerHTML = json.title;
         elem.appendChild(headerElem);
 
         const previewElem = document.createElement("span");