All kinds of improvements:

- New UX for picking backups
 - Save backups in indexed DB for later viewing
 - Better display of currently viewed file.
 - Updated help text

index.js

@@ -1,185 +0,0 @@
-function showApplication(toggle) {
-    if (toggle) {
-        document.getElementById('real-body').classList.remove('d-none');
-    } else {
-        document.getElementById('real-body').classList.add('d-none');
-    }
-}
-
-function showLoadingIndicator(toggle) {
-    if (toggle) {
-        document.getElementById('loading').classList.remove('d-none');
-    } else {
-        document.getElementById('loading').classList.add('d-none');
-    }
-}
-
-function displayError(querySelector, category, ex) {
-    console.error(ex);
-    const errorDiv = document.querySelector(querySelector);
-    const errorHeading = errorDiv.querySelector('.alert-heading');
-
-    let message = ex.message;
-
-    if (ex.hasOwnProperty('cause')) {
-        if (ex.cause.hasOwnProperty('message')) {
-            message += ': ' + ex.cause.message;
-        } else {
-            message += ex.cause;
-        }
-    }
-
-    //clear all error text, but not heading
-    const errorMessages = errorDiv.querySelectorAll('span');
-    errorMessages.forEach(message => errorDiv.removeChild(message));
-
-    //add new message and show the error alert
-    const errorSpan = document.createElement('span');
-    errorSpan.innerText = message;
-    errorDiv.appendChild(errorSpan);
-
-    errorHeading.innerText = category;
-    errorDiv.classList.remove('d-none');
-}
-
-function displayFatalError(category, ex) {
-    showApplication(false);
-    showLoadingIndicator(false);
-    displayError('#fatal-error', category, ex);
-}
-
-function displayNonFatalError(category, ex) {
-    showApplication(true);
-    showLoadingIndicator(false);
-    displayError('#display-backup-error', category, ex);
-}
-
-function hideErrors() {
-    document
-        .querySelectorAll('#fatal-error, #display-backup-error')
-        .forEach(el => el.classList.add('d-none'));
-}
-
-function importStylesheet(xsl) {
-    //Firefox does not seem to report XML parsing errors into the
-    //exception tree. So we catch here, log, and return some friendly
-    //error.
-    try {
-        const xsltProcessor = new XSLTProcessor();
-        xsltProcessor.importStylesheet(xsl);
-        return xsltProcessor;
-    } catch (cause) {
-        console.error(cause);
-        throw new Error('Stylesheet parsing failed', { cause });
-    }
-}
-
-async function createXSLTProcessor() {
-    return fetch(new URL("/MessageLog.xsl"))
-        .then(resp => {
-            if (resp.ok)
-                return resp.text();
-            else
-                throw new Error(resp.status + ' ' + resp.statusText);
-        })
-        .then(str => {
-            console.log(str);
-            return new DOMParser().parseFromString(str, "text/xml");
-        })
-        .then(importStylesheet)
-        .catch(cause => {
-            throw new Error('Could not load XSL stylesheet', { cause });
-        });
-}
-
-function removeChildren(element) {
-    while (element.hasChildNodes()) {
-        element.removeChild(element.lastChild);
-    }
-}
-
-function checkOverflow(elem) {
-    const elemHeight = elem.scrollHeight;
-    const parentHeight = elem.offsetHeight;
-    return elemHeight > parentHeight;
-}
-
-function processFragment() {
-    document
-        .querySelectorAll('[data-bs-toggle="popover"]')
-        .forEach(popover => new bootstrap.Popover(popover));
-
-    document.querySelectorAll('.message-content div').forEach(div => {
-        if (checkOverflow(div)) {
-            div.parentElement.classList.add('overflow-icon');
-        }
-    });
-}
-
-function parseXML(xmlText) {
-    const xmlDoc = parser.parseFromString(xmlText, "text/xml");
-}
-
-function displayBackup(xsltProcessor, file) {
-    hideErrors();
-
-    //document.getElementById('intro-card').classList.add('d-none');
-
-    const chatDisplay = document.getElementById("chat-display");
-    removeChildren(chatDisplay);
-
-    file.text().then(xmlText => {
-        document.getElementById('currently-viewing').innerText = file.name;
-        const parser = new DOMParser();
-        const xmlDoc = parser.parseFromString(xmlText, "text/xml");
-        const errorNode = xmlDoc.querySelector('parsererror');
-
-        if (!errorNode) {
-            try {
-                const fragment = xsltProcessor.transformToFragment(xmlDoc, document);
-                chatDisplay.appendChild(fragment);
-                processFragment();
-            }
-            catch (e) {
-                displayNonFatalError('Could not load backup', e);
-            }
-        } else {
-            const err = new Error(errorNode.firstChild.nodeValue);
-            displayNonFatalError('Could not load backup', err);
-        }
-
-    });
-}
-
-function initEvents(xsltProcessor) {
-    const selectFileButtons = document.querySelectorAll("#backup-file-button, #backup-file-button-card");
-    const fileSelector = document.getElementById("backup-file");
-
-    selectFileButtons.forEach(button => button.addEventListener("click", e => {
-        fileSelector.click();
-        e.preventDefault();
-    }));
-
-    fileSelector.addEventListener("change", async (e) => {
-        const file = e.currentTarget.files[0];
-        displayBackup(xsltProcessor, file);
-    });
-}
-
-window.addEventListener('resize', () => {
-    if (window.innerWidth <= 500) {
-        document.querySelector('#chat-display table').classList.add('table-sm');
-    } else {
-        document.querySelector('#chat-display table').classList.remove('table-sm');
-    }
-});
-
-window.addEventListener('DOMContentLoaded', async () => {
-    createXSLTProcessor()
-        .then(initEvents)
-        .then(_ => {
-            showLoadingIndicator(false);
-            showApplication(true);
-        })
-        .catch(ex => displayFatalError('Initialiation Failed', ex));
-});

package.json

@@ -17,6 +17,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "@types/bootstrap": "^5.2.3",
-    "bootstrap": "^5.2"
+    "bootstrap": "^5.2",
+    "bootstrap-icons": "^1.10.3",
+    "dexie": "^3.2.2"
   }
 }

src/MessageLog.xsl

@@ -75,7 +75,7 @@ https://github.com/jerecui/MSNChatHistoryCombiner
 
       <td class="message-from-user"><xsl:apply-templates select="From/User"/> </td>
       <td class="message-content">
-        <div class="overflow-y-auto overflow-x-hidden">
+        <div class="overflow-auto">
           <xsl:value-of select="Text"/>
         </div>
       </td>
@@ -96,14 +96,15 @@ https://github.com/jerecui/MSNChatHistoryCombiner
   </xsl:template>
 
   <xsl:template match="From/User">
-    <span
+    <a class="info-popover" href="#" tabindex="0"
+       data-bs-trigger="focus"
        data-bs-container="body" data-bs-toggle="popover"
        data-bs-placement="bottom" data-bs-title="Username">
       <xsl:attribute name="data-bs-content">
 	<xsl:value-of select="@FriendlyName"/>
       </xsl:attribute>
       <xsl:value-of select="@FriendlyName"/>
-    </span>
+    </a>
   </xsl:template>
 
   <xsl:template name="CommonMessageProcessing">
@@ -118,14 +119,15 @@ https://github.com/jerecui/MSNChatHistoryCombiner
 
     <!-- mobile shows a popover span for date/time -->
     <td class="d-lg-none message-mobile-date-time">
-      <span
+      <a class="info-popover" href="#" tabindex="0"
+	 data-bs-trigger="focus"
 	 data-bs-container="body" data-bs-toggle="popover"
 	 data-bs-placement="right" data-bs-title="Date/Time">
 	<xsl:attribute name="data-bs-content">
 	  <xsl:value-of select="@Date"/>&#160;<xsl:value-of select="@Time"/>
 	</xsl:attribute>
 	#
-      </span>
+      </a>
     </td>
     <td class="d-none d-lg-table-cell message-date"> <xsl:value-of select="@Date"/> </td>
     <td class="d-none d-lg-table-cell message-time"> <xsl:value-of select="@Time"/> </td>

src/db.ts

@@ -0,0 +1,20 @@
+import Dexie from 'dexie';
+
+export class MsnDatabase extends Dexie {
+    entries!: Dexie.Table<BackupEntry, string>; // number = type of the primkey
+    //...other tables goes here...
+
+    constructor() {
+        super("MsnDatabase");
+        this.version(1).stores({
+            entries: '&filename, backupData',
+        });
+    }
+}
+
+export interface BackupEntry {
+    filename: string,
+    backupData: string
+}
+
+export const db = new MsnDatabase();

src/index.html

@@ -8,7 +8,7 @@
     </head>
 
     <body>
-        <div class="container-md mx-auto">
+        <div class="container-lg mx-auto">
             <div id="loading" class="d-flex justify-content-center">
                 <div class="spinner-border text-primary" role="status">
                     <span class="visually-hidden">Loading...</span>
@@ -49,9 +49,51 @@
                 </nav>
 
                 <div id="backup-info" class="mt-3">
-                    <div id="currently-viewing" class="alert alert-secondary text-center d-none" role="alert">&lt;none&gt;</div>
+                    <input class="form-control" id="backup-file" type="file" style="display: none;">
-                    <label for="backup-file" class="form-label">Choose an MSN Messenger XML Backup File.</label>
+
-                    <input class="form-control" id="backup-file" type="file">
+                    <!-- displayed once a file has been opened -->
+                    <div id="file-loaded-controls" class="d-none">
+                        <div class="input-group">
+                            <button id="loaded-view-new-button" type="button" class="btn btn-primary">
+                                <i class="bi bi-file-earmark-plus"></i> View New
+                            </button>
+                            <button type="button"
+                                    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
+                                    data-bs-toggle="dropdown" aria-expanded="false">
+                                <span class="visually-hidden">Toggle Dropdown</span>
+                            </button>
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <a id="loaded-load-previous-button" class="dropdown-item" href="#">
+                                        <i class="text-start bi bi-files"></i> Load Previous
+                                    </a>
+                                </li>
+                            </ul>
+                            <input id="currently-viewing" type="text" class="form-control bg-transparent" disabled>
+                        </div>
+                    </div>
+
+                    <!-- displayed initially -->
+                    <div id="no-file-loaded-controls" class="d-grid gap-2 text-center d-md-block col-8 mx-auto">
+                        <button id="unloaded-view-new-button" type="button" class="btn btn-primary btn-lg">
+                            <span class="float-start">
+                                <i class="bi bi-file-earmark-plus"></i>
+                            </span>
+                            <span>
+                                View New
+                            </span>
+                        </button>
+
+                        <span class="d-none d-lg-inline fs-4">or...</span>
+
+                        <button id="unloaded-load-previous-button" type="button"
+                                class="btn btn-primary btn-lg">
+                            <span class="float-start">
+                                <i class="text-start bi bi-files"></i>
+                            </span>
+                            <span class="text-end">Load Previous</span>
+                        </button>
+                    </div>
                 </div>
 
                 <div id="backup-display" class="mt-3">
@@ -68,6 +110,21 @@
         </div>
 
         <!-- modals -->
+        <div class="modal fade" id="previous-backups-modal" tabindex="-1">
+            <div class="modal-dialog modal-fullscreen-lg-down">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="exampleModalLabel">Previously Viewed</h1>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div id="previous-backups-list" class="list-group">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="modal fade" id="help" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-fullscreen-lg-down">
                 <div class="modal-content">
@@ -91,11 +148,14 @@
                                 <li>You must have the XML backup
                                     available on your device to view
                                     it.</li>
-                                <li>Long usernames are truncated.
+                                <li>Long usernames are shortened.
-                                    Click on such a username to see a
+                                    Click or tap on such a username to
-                                    popup with the full username.
+                                    see a popup with the full
-                                    Click in the same spot to hide the
+                                    username. Click or tap again to
-                                    popup.</li>
+                                    hide the popup.</li>
+                                <li>When you have opened a backup for
+                                    viewing, you can easily re-open it
+                                    later by selecting "Load Previous".</li>
                             </ul>
                         </p>
 
@@ -109,16 +169,13 @@
                             <ul>
                                 <li>Tap on the pound sign to see the
                                     date and time of the message.</li>
-                                <li>Tap again in the same place to
+                                <li>Tap again to hide the popup.</li>
-                                    hide the popup.</li>
-                                <li>Usernames are similarly shortened.
-                                    Tap on a username to see the full
-                                    name.</li>
                                 <li>Long chat messages are scrollable.
                                     A small icon in the lower right
                                     part of the message indicates
                                     this.</li>
                             </ul>
+                        </p>
                     </div>
                 </div>
             </div>

src/index.js

@@ -1,163 +0,0 @@
-import * as bootstrap from 'bootstrap';
-import xsl from 'bundle-text:./MessgeLog.xsl';
-function showApplication(toggle) {
-    if (toggle) {
-        document.getElementById('real-body').classList.remove('d-none');
-    }
-    else {
-        document.getElementById('real-body').classList.add('d-none');
-    }
-}
-function showLoadingIndicator(toggle) {
-    if (toggle) {
-        document.getElementById('loading').classList.remove('d-none');
-    }
-    else {
-        document.getElementById('loading').classList.add('d-none');
-    }
-}
-function displayError(querySelector, category, ex) {
-    console.error(ex);
-    const errorDiv = document.querySelector(querySelector);
-    const errorHeading = errorDiv.querySelector('.alert-heading');
-    let message = ex.message;
-    if (ex.hasOwnProperty('cause')) {
-        if (ex.cause.hasOwnProperty('message')) {
-            // @ts-ignore
-            message += ': ' + ex.cause.message;
-        }
-        else {
-            message += ex.cause;
-        }
-    }
-    //clear all error text, but not heading
-    const errorMessages = errorDiv.querySelectorAll('span');
-    errorMessages.forEach(message => errorDiv.removeChild(message));
-    //add new message and show the error alert
-    const errorSpan = document.createElement('span');
-    errorSpan.innerText = message;
-    errorDiv.appendChild(errorSpan);
-    errorHeading.innerText = category;
-    errorDiv.classList.remove('d-none');
-}
-function displayFatalError(category, ex) {
-    showApplication(false);
-    showLoadingIndicator(false);
-    displayError('#fatal-error', category, ex);
-}
-function displayNonFatalError(category, ex) {
-    showApplication(true);
-    showLoadingIndicator(false);
-    displayError('#display-backup-error', category, ex);
-}
-function hideErrors() {
-    document
-        .querySelectorAll('#fatal-error, #display-backup-error')
-        .forEach(el => el.classList.add('d-none'));
-}
-function importStylesheet(xsl) {
-    //Firefox does not seem to report XML parsing errors into the
-    //exception tree. So we catch here, log, and return some friendly
-    //error.
-    try {
-        const xsltProcessor = new XSLTProcessor();
-        xsltProcessor.importStylesheet(xsl);
-        return xsltProcessor;
-    }
-    catch (cause) {
-        console.error(cause);
-        throw new Error('Stylesheet parsing failed', { cause });
-    }
-}
-async function createXSLTProcessor() {
-    const doc = new DOMParser().parseFromString(xsl, "text/xml");
-    return Promise.resolve(importStylesheet(doc));
-    // return fetch(new URL("./MessageLog.xsl", import.meta.url))
-    //     .then(resp => {
-    //         if (resp.ok)
-    //             return resp.text();
-    //         else
-    //             throw new Error(resp.status + ' ' + resp.statusText);
-    //     })
-    //     .then(str => new DOMParser().parseFromString(str, "text/xml"))
-    //     .then(importStylesheet)
-    //     .catch(cause => {
-    //         throw new Error('Could not load XSL stylesheet', { cause });
-    //     });
-}
-function removeChildren(element) {
-    while (element.hasChildNodes()) {
-        element.removeChild(element.lastChild);
-    }
-}
-function checkOverflow(elem) {
-    const elemHeight = elem.scrollHeight;
-    const parentHeight = elem.offsetHeight;
-    return elemHeight > parentHeight;
-}
-function processFragment() {
-    document
-        .querySelectorAll('[data-bs-toggle="popover"]')
-        .forEach(popover => new bootstrap.Popover(popover));
-    document.querySelectorAll('.message-content div').forEach(div => {
-        if (checkOverflow(div)) {
-            div.parentElement.classList.add('overflow-icon');
-        }
-    });
-}
-function displayBackup(xsltProcessor, file) {
-    hideErrors();
-    //document.getElementById('intro-card').classList.add('d-none');
-    const chatDisplay = document.getElementById("chat-display");
-    removeChildren(chatDisplay);
-    file.text().then(xmlText => {
-        document.getElementById('currently-viewing').innerText = file.name;
-        const parser = new DOMParser();
-        const xmlDoc = parser.parseFromString(xmlText, "text/xml");
-        const errorNode = xmlDoc.querySelector('parsererror');
-        if (!errorNode) {
-            try {
-                const fragment = xsltProcessor.transformToFragment(xmlDoc, document);
-                chatDisplay.appendChild(fragment);
-                processFragment();
-            }
-            catch (e) {
-                displayNonFatalError('Could not load backup', e);
-            }
-        }
-        else {
-            const err = new Error(errorNode.firstChild.nodeValue);
-            displayNonFatalError('Could not load backup', err);
-        }
-    });
-}
-function initEvents(xsltProcessor) {
-    const selectFileButtons = document.querySelectorAll("#backup-file-button, #backup-file-button-card");
-    const fileSelector = document.getElementById("backup-file");
-    selectFileButtons.forEach(button => button.addEventListener("click", e => {
-        fileSelector.click();
-        e.preventDefault();
-    }));
-    fileSelector.addEventListener("change", async (e) => {
-        const target = e.currentTarget;
-        const file = target.files[0];
-        displayBackup(xsltProcessor, file);
-    });
-}
-window.addEventListener('resize', () => {
-    if (window.innerWidth <= 500) {
-        document.querySelector('#chat-display table').classList.add('table-sm');
-    }
-    else {
-        document.querySelector('#chat-display table').classList.remove('table-sm');
-    }
-});
-window.addEventListener('DOMContentLoaded', async () => {
-    createXSLTProcessor()
-        .then(initEvents)
-        .then(_ => {
-        showLoadingIndicator(false);
-        showApplication(true);
-    })
-        .catch(ex => displayFatalError('Initialiation Failed', ex));
-});

src/index.ts

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap';
-import xsl from 'bundle-text:./MessageLog.xsl';
+import xslContent from 'bundle-text:./MessageLog.xsl';
 import * as ui from './ui';
+import { db } from './db';
+
+const xsltProcessor = createXSLTProcessor(xslContent)!;
 
 function showApplication(toggle: boolean) {
     if (toggle) {
@@ -18,6 +21,12 @@ function showLoadingIndicator(toggle: boolean) {
     }
 }
 
+function showLoadedControls() {
+    ui.noFileLoadedControls.classList.add('d-none');
+    ui.noFileLoadedControls.classList.remove('d-md-block');
+    ui.fileLoadedControls.classList.remove('d-none');
+}
+
 function displayError(errorDiv: HTMLElement, category: string, ex: Error) {
     console.error(ex);
     const errorHeading = errorDiv.querySelector('.alert-heading') as HTMLElement | null;
@@ -55,37 +64,18 @@ function hideErrors() {
         .forEach(el => el.classList.add('d-none'));
 }
 
-function importStylesheet(xsl: Node) {
+function createXSLTProcessor(xmlStylesheet: string): XSLTProcessor | undefined {
-    //Firefox does not seem to report XML parsing errors into the
+    const doc = new DOMParser().parseFromString(xmlStylesheet, "text/xml");
-    //exception tree. So we catch here, log, and return some friendly
-    //error.
     try {
         const xsltProcessor = new XSLTProcessor();
-        xsltProcessor.importStylesheet(xsl);
+        xsltProcessor.importStylesheet(doc);
         return xsltProcessor;
     } catch (cause) {
         console.error(cause);
-        throw new Error('Stylesheet parsing failed');
+        displayFatalError('Initialiation Failed', new Error('Stylesheet parsing failed'));
     }
 }
 
-async function createXSLTProcessor() {
-    const doc = new DOMParser().parseFromString(xsl, "text/xml");
-    return Promise.resolve(importStylesheet(doc));
-    // return fetch(new URL("./MessageLog.xsl", import.meta.url))
-    //     .then(resp => {
-    //         if (resp.ok)
-    //             return resp.text();
-    //         else
-    //             throw new Error(resp.status + ' ' + resp.statusText);
-    //     })
-    //     .then(str => new DOMParser().parseFromString(str, "text/xml"))
-    //     .then(importStylesheet)
-    //     .catch(cause => {
-    //         throw new Error('Could not load XSL stylesheet', { cause });
-    //     });
-}
-
 function removeChildren(element: HTMLElement) {
     while (element.hasChildNodes() && element.lastChild != null) {
         element.removeChild(element.lastChild);
@@ -101,7 +91,7 @@ function checkOverflow(elem: HTMLElement) {
 function processFragment() {
     document
         .querySelectorAll('[data-bs-toggle="popover"]')
-        .forEach(popover => new bootstrap.Popover(popover));
+        .forEach(popover => new bootstrap.Popover(popover, { trigger: 'focus' }));
 
     document.querySelectorAll('.message-content div').forEach(div => {
         if (checkOverflow(div as HTMLElement)) {
@@ -110,13 +100,17 @@ function processFragment() {
     });
 }
 
-function displayBackup(xsltProcessor: XSLTProcessor, file: File) {
+async function saveToDatabase(filename: string, xml: string) {
+    db.entries
+        .put({ filename, backupData: xml })
+        .catch(err => displayFatalError('Saving Failed', err));
+}
+
+function displayBackup(xsltProcessor: XSLTProcessor, filename: string, xmlText: string): boolean {
     hideErrors();
-
     removeChildren(ui.chatDisplay);
+    showLoadedControls();
 
-    file.text().then(xmlText => {
-        ui.currentlyViewing.innerText = file.name;
     const parser = new DOMParser();
     const xmlDoc = parser.parseFromString(xmlText, "text/xml");
     const errorNode = xmlDoc.querySelector('parsererror');
@@ -125,33 +119,76 @@ function displayBackup(xsltProcessor: XSLTProcessor, file: File) {
         try {
             const fragment = xsltProcessor.transformToFragment(xmlDoc, document);
             ui.chatDisplay.appendChild(fragment);
+            ui.currentlyViewing.value = filename;
             processFragment();
+            return true;
         }
         catch (e) {
             if (e instanceof Error) {
                 displayNonFatalError('Could not load backup', e);
             }
+            return false;
         }
     } else {
         const err = new Error(errorNode.firstChild?.nodeValue || '');
         displayNonFatalError('Could not load backup', err);
+        return false;
     }
-
-    });
 }
 
-function initEvents(xsltProcessor: XSLTProcessor) {
+function initEvents() {
+    ui.loadPreviousButtons.forEach(button => button.addEventListener('click', async () => {
+        await populateSavedBackups();
+    }));
+
+    ui.viewNewButtons.forEach(button => button.addEventListener('click', e => {
+        ui.fileSelector.click();
+        e.preventDefault();
+    }));
+
     ui.fileSelector.addEventListener("change", async (e) => {
         const target = e.currentTarget as HTMLInputElement | null;
         const file = target?.files?.[0];
+
         if (file) {
-            displayBackup(xsltProcessor, file);
+            const xmlText = await file.text();
+            if (displayBackup(xsltProcessor, file.name, xmlText)) {
+                await saveToDatabase(file.name, xmlText);
+            }
         } else {
             displayNonFatalError('Could not load file', new Error('No file found.'));
         }
     });
 }
 
+async function populateSavedBackups() {
+    removeChildren(ui.previousBackupsList);
+    const modal = new bootstrap.Modal('#previous-backups-modal');
+    const entries = await db.entries.orderBy('filename').toArray();
+
+    entries.forEach(entry => {
+        const listItem = document.createElement('a');
+        listItem.href = '#';
+        listItem.dataset['filename'] = entry.filename;
+        listItem.innerText = entry.filename;
+        listItem.classList.add('list-group-item', 'list-group-item-action');
+
+        listItem.addEventListener('click', async () => {
+            const reloaded = await db.entries.get(entry.filename);
+            if (reloaded) {
+                displayBackup(xsltProcessor, reloaded.filename, reloaded.backupData);
+            } else {
+                displayNonFatalError('Internal Error', new Error('Backup data disappeared?!'));
+            }
+            modal.hide();
+        });
+
+        ui.previousBackupsList.appendChild(listItem);
+    });
+
+    modal.show();
+}
+
 window.addEventListener('DOMContentLoaded', async () => {
     window.addEventListener('resize', () => {
         if (window.innerWidth <= 500) {
@@ -161,11 +198,7 @@ window.addEventListener('DOMContentLoaded', async () => {
         }
     });
 
-    createXSLTProcessor()
+    initEvents();
-        .then(initEvents)
-        .then(_ => {
     showLoadingIndicator(false);
     showApplication(true);
-        })
-        .catch(ex => displayFatalError('Initialiation Failed', ex));
 });

src/scss/index.scss

@@ -1,4 +1,5 @@
-@import "~bootstrap/scss/bootstrap";
+@import "npm:bootstrap/scss/bootstrap";
+@import "npm:bootstrap-icons/font/bootstrap-icons.css";
 
 table {
     /* table-layout: fixed; */
@@ -32,23 +33,31 @@ th, td {
     height: 1rem;
 }
 
+.info-popover, .info-popover:link, .info-popover:visited, .info-popover:hover, .info-popover:active {
+    color: inherit;
+    text-decoration: inherit;
+    font-weight: inherit;
+}
 
-@media only screen and (max-width: 500px) {
+@include media-breakpoint-down(lg) {
     /*
       Remove padding from container, but keep it on stuff that isn't
       navbar or chat messages.
    */
-    .container-md {
+    .container-lg {
 	padding-left: 0px;
 	padding-right: 0px;
     }
 
-    #backup-info {
+    #file-loaded-controls {
-	padding-left: 1rem;
+	padding: 0.25rem;
-	padding-right: 1rem;
     }
 
-    /* Table stuff */
+    #no-file-loaded-controls {
+	max-width: 200px;
+    }
+
+    /* Chat Display table stuff */
     #chat-display table {
 	table-layout: fixed;
     }

src/ui.ts

@@ -6,4 +6,12 @@ export const fatalError: HTMLElement = document.getElementById('fatal-error')!;
 export const nonFatalError: HTMLElement = document.getElementById('display-backup-error')!;
 export const chatDisplay: HTMLElement = document.getElementById('chat-display')!;
 export const fileSelector: HTMLInputElement = document.getElementById('backup-file')! as HTMLInputElement;
-export const currentlyViewing: HTMLElement = document.getElementById('currently-viewing')!;
+export const savedBackups: HTMLSelectElement = document.getElementById('saved-backups')! as HTMLSelectElement;
+export const viewNewButtons =
+    document.querySelectorAll('#unloaded-view-new-button, #loaded-view-new-button');
+export const loadPreviousButtons =
+    document.querySelectorAll('#unloaded-load-previous-button, #loaded-load-previous-button');
+export const previousBackupsList: HTMLDivElement = document.getElementById('previous-backups-list')! as HTMLDivElement;
+export const noFileLoadedControls: HTMLDivElement = document.getElementById('no-file-loaded-controls')! as HTMLDivElement;
+export const fileLoadedControls: HTMLDivElement = document.getElementById('file-loaded-controls')! as HTMLDivElement;
+export const currentlyViewing: HTMLInputElement = document.getElementById('currently-viewing')! as HTMLInputElement;

yarn.lock

@@ -824,6 +824,11 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bootstrap-icons@^1.10.3:
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz#c587b078ca6743bef4653fe90434b4aebfba53b2"
+  integrity sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw==
+
 bootstrap@^5.2:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
@@ -984,6 +989,11 @@ detect-libc@^1.0.3:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
 
+dexie@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/dexie/-/dexie-3.2.2.tgz#fa6f2a3c0d6ed0766f8d97a03720056f88fe0e01"
+  integrity sha512-q5dC3HPmir2DERlX+toCBbHQXW5MsyrFqPFcovkH9N2S/UW/H3H5AWAB6iEOExeraAu+j+zRDG+zg/D7YhH0qg==
+
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"