Merge pull request #117 from Ennea/main

Finalizing the frontend (for now)

ChatTwo/Http/static/gfd.js

@@ -0,0 +1,120 @@
+// from kizer, gfd icons
+async function AddGfdStylesheet(gfdPath, texPath) {
+    const texPromise = LoadTexAsBlob(texPath);
+    const gfdPromise = LoadGfd(gfdPath);
+    const texUrl = URL.createObjectURL(await texPromise);
+    const gfd = await gfdPromise;
+
+    const stylesheets = [];
+    for (const entry of gfd) {
+        if (entry.width * entry.height <= 0)
+            continue;
+
+        width = entry.width;
+        height = entry.height;
+
+        if (entry.redirect !== 0) {
+            stylesheets[entry.redirect][0].push(entry.id);
+            continue;
+        }
+
+        stylesheets[entry.id] = [
+            [entry.id],
+            [
+                `background-position: -${entry.left}px -${entry.top}px`,
+                `background-image: url('${texUrl}')`,
+                `width: ${entry.width}px`,
+                `height: ${entry.height}px`
+            ].join(';'),
+            [
+                `background-position: -${entry.left * 2}px -${entry.top * 2 + 341}px`,
+                `background-image: url('${texUrl}')`,
+                `width: ${entry.width * 2}px`,
+                `height: ${entry.height * 2}px`
+            ].join(';'),
+            entry.width
+        ];
+    }
+
+    let stylesheet = '';
+    for (const entry of stylesheets) {
+        if (!entry)
+            continue;
+
+        stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-${x}::before`).join(', ')}{${entry[1]};}`;
+        stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-hq-${x}::before`).join(', ')}{${entry[2]};}`;
+        stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-${x}`).join(', ')}{width:${entry[3]}px;}`;
+        stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-hq-${x}`).join(', ')}{width:${entry[3] * 2}px;}`;
+    }
+
+    const styleNode = document.createElement('style');
+    styleNode.appendChild(document.createTextNode(stylesheet));
+    document.head.appendChild(styleNode);
+}
+
+async function LoadTexAsBlob(path) {
+    const tex = ParseTex(await (await fetch(path)).arrayBuffer());
+    if (tex.format !== 0x1450) // B8G8R8A8
+        throw 'Not supported';
+
+    const dataArray = new Uint8ClampedArray(tex.buffer, tex.offsetToSurface[0], tex.width * tex.height * 4);
+    for (let i = 0; i < dataArray.length; i += 4) {
+        const t = dataArray[i];
+        dataArray[i] = dataArray[i + 2];
+        dataArray[i + 2] = t;
+    }
+    const imageData = new ImageData(dataArray, tex.width, tex.height);
+    const bitmap = await createImageBitmap(imageData);
+
+    const canvas = new OffscreenCanvas(tex.width, tex.height);
+    canvas.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);
+    return await canvas.convertToBlob();
+}
+
+async function LoadGfd(path) {
+    const buffer = new DataView(await (await fetch(path)).arrayBuffer());
+    const count = buffer.getInt32(8, true);
+    const entries = new Array(count);
+    for (let i = 0; i < count; i++) {
+        const offset = 0x10 + (i * 0x10);
+        entries[i] = {
+            id: buffer.getInt16(offset, true),
+            left: buffer.getInt16(offset + 2, true),
+            top: buffer.getInt16(offset + 4, true),
+            width: buffer.getInt16(offset + 6, true),
+            height: buffer.getInt16(offset + 8, true),
+            unk0A: buffer.getInt16(offset + 10, true),
+            redirect: buffer.getInt16(offset + 12, true),
+            unk0E: buffer.getInt16(offset + 14, true),
+        };
+    }
+
+    return entries;
+}
+
+function ParseTex(arrayBuffer) {
+    const buffer = new DataView(arrayBuffer);
+    const type = buffer.getInt32(0, true);
+    const format = buffer.getInt32(4, true);
+    const width = buffer.getInt16(8, true);
+    const height = buffer.getInt16(10, true);
+    const depth = buffer.getInt16(12, true);
+    const mipsAndFlag = buffer.getInt8(14, true);
+    const arraySize = buffer.getInt8(15, true);
+    const lodOffsets = [buffer.getInt32(16, true), buffer.getInt32(20, true), buffer.getInt32(24, true)];
+    const offsetToSurface = [buffer.getInt32(28, true), buffer.getInt32(32, true), buffer.getInt32(36, true), buffer.getInt32(40, true), buffer.getInt32(44, true), buffer.getInt32(48, true), buffer.getInt32(52, true), buffer.getInt32(56, true), buffer.getInt32(60, true), buffer.getInt32(64, true), buffer.getInt32(68, true), buffer.getInt32(72, true), buffer.getInt32(76, true)];
+    return {
+        buffer: arrayBuffer,
+        type,
+        format,
+        width,
+        height,
+        depth,
+        mipsAndFlag,
+        arraySize,
+        lodOffsets,
+        offsetToSurface,
+    };
+}
+
+AddGfdStylesheet('/files/gfdata.gfd', '/files/fonticon_ps5.tex');

ChatTwo/Http/static/start.css

@@ -120,17 +120,6 @@ section#messages {
         height: 100%;
         overflow-y: scroll;
         scrollbar-color: var(--fg-scrollbar) var(--bg);
-
-        &.more-messages::before {
-            content: '';
-            position: absolute;
-            bottom: -20px;
-            left: 100px;
-            width: calc(100% - 200px);
-            height: 200px;
-            background-image: radial-gradient(50% 20% at 50% 100%, #60a0ff40, transparent);
-            pointer-events: none;
-        }
     }
 
     ol {
@@ -152,6 +141,22 @@ section#messages {
             white-space: pre-wrap;
         }
     }
+
+    #more-messages-indicator {
+        position: absolute;
+        display: none;
+        right: 30px;
+        bottom: 0;
+        pointer-events: none;
+
+        svg {
+            filter: drop-shadow(0 0 5px #60a0ff) drop-shadow(0 0 15px #60a0ff);
+        }
+    }
+
+    &.more-messages #more-messages-indicator {
+        display: block;
+    }
 }
 
 #timestamp-width-probe {
@@ -259,9 +264,14 @@ section#input {
             position: absolute;
             top: -1.2em;
             left: 23px;
+            max-width: 100%;
+            overflow: hidden;
             font-size: 1.1rem;
             font-weight: 550;
+            white-space: nowrap;
+            text-overflow: ellipsis;
             pointer-events: none;
+
         }
     }
 }
@@ -297,6 +307,7 @@ section#input {
         top: 0;
         left: 0;
         width: 2rem;
+        height: 2rem;
         transform: translateY(-50%);
         pointer-events: none;
     }
@@ -308,11 +319,27 @@ section#input {
         padding: 0;
     }
 
-    body > main {
+    body > main.chat {
         border-radius: 0;
         box-shadow: none;
     }
 
+    section#messages {
+        font-size: 0.9rem;
+
+        li {
+            align-items: baseline;
+
+            .timestamp {
+                font-size: 0.8rem;
+            }
+        }
+    }
+
+    #timestamp-width-probe {
+        font-size: 0.8rem;
+    }
+
     section#input {
         button {
             max-width: 0;
@@ -325,5 +352,19 @@ section#input {
             left: 50%;
             transform: translateX(-50%) translateY(-50%);
         }
+
+        .input-container #channel-hint {
+            font-size: 0.9rem;
+        }
+    }
+
+    .gfd-icon { zoom: 0.65; }
+    .emote-icon {
+        width: 1.5rem;
+
+        img {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
     }
 }

ChatTwo/Http/static/start.js

@@ -1,283 +1,200 @@
-// websocket connection
+class ChatTwoWeb {
-class SSEConnection {
     constructor() {
-        this.socket = new EventSource('/sse');
+        this.setupDOMElements();
+        this.setupSSEConnection();
+    }
 
-        this.socket.addEventListener('close', () => {
+
-            console.log('Closing SSE connection.');
+    setupDOMElements() {
-            this.socket.close();
+        this.elements = {
+            channelHint: document.getElementById('channel-hint'),
+            channelSelect: document.getElementById('channel-select'),
+
+            messagesContainer: document.querySelector('#messages > .scroll-container'),
+            messagesList: document.getElementById('messages-list'),
+
+            timestampWidthProbe: document.getElementById('timestamp-width-probe'),
+
+            inputForm: document.querySelector('#input > form'),
+            chatInput: document.getElementById('chat-input')
+        };
+        this.maxTimestampWidth = 0;
+        this.scrolledToBottom = true;
+
+
+        // channel selector
+        this.elements.channelSelect.addEventListener('change', async (event) => {
+            const rawResponse = await fetch('/channel', {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ channel: event.target.value })
+            });
+            // const content = await rawResponse.json();
+            // TODO: use the response
         });
 
-        this.socket.addEventListener('switch-channel', (event) => {
+        // add indicator signaling more messages below
-            updateChannelHint(JSON.parse(event.data).channel);
+        this.elements.messagesContainer.addEventListener('scroll', (event) => {
-        });
+            if (!this.messagesAreScrolledToBottom()) {
-
+                event.target.parentElement?.classList.add('more-messages');
-        // New messages that are able to be directly processed
+            } else {
-        this.socket.addEventListener('new-message', (event) => {
+                event.target.parentElement?.classList.remove('more-messages');
-            for (let message of JSON.parse(event.data).messages) {
-                addMessage(message);
             }
         });
 
-        // New messages, that require a clean message list before processing
+        // adjust scroll when the window size changes; mostly for mobile (opening/closing the keyboard)
-        this.socket.addEventListener('bulk-messages', (event) => {
+        window.addEventListener('resize', () => {
-            clearMessages();
+            if (this.scrolledToBottom) {
-            for (let message of JSON.parse(event.data).messages) {
+                this.scrollMessagesToBottom();
-                addMessage(message);
             }
-        });
+        })
 
-        this.socket.addEventListener('channel-list', (event) => {
+        // handle message sending
-            updateChannelOptions(JSON.parse(event.data).channels);
+        this.elements.inputForm.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const message = this.elements.chatInput.value;
+
+            const rawResponse = await fetch('/send', {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ message: message })
+            });
+            // const content = await rawResponse.json();
+            // TODO: use the response
+
+            this.elements.chatInput.value = '';
         });
     }
 
-    send(message) {
+    updateChannelHint(labelHTML) {
-        this.socket.send(message);
+        this.elements.channelHint.innerHTML = labelHTML;
     }
-}
 
-const sse = new SSEConnection();
+    updateChannels(channels) {
-
+        this.elements.channelSelect.innerHTML = '';
-
+        for (const [ label, channel ] of Object.entries(channels)) {
-// channel switcher
+            const option = document.createElement('option');
-function updateChannelHint(label) {
+            option.value = channel;
-    document.getElementById('channel-hint').innerHTML = label;
+            option.innerText = label;
-}
+            this.elements.channelSelect.appendChild(option);
-
+        }
-document.getElementById('channel-select').addEventListener('change', (event) => {
-    (async () => {
-        const rawResponse = await fetch('/channel', {
-            method: 'POST',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ channel: event.target.value })
-        });
-        const content = await rawResponse.json();
-
-        // TODO use the response
-        console.log(content);
-    })();
-});
-
-function updateChannelOptions(channels) {
-    let select = document.getElementById('channel-select');
-
-    // clear existing channels
-    select.innerHTML = '';
-
-    for (const [ name, channel ] of Object.entries(channels)) {
-        let option = document.createElement('option');
-        option.text = name;
-        option.value = channel;
-        select.appendChild(option)
     }
-}
 
-
+    // calculate timestamp width
-// functions for handling the message list
+    // to ensure that all timestamps have the same width. some typefaces have the same width across
-function messagesContainerIsScrolledToBottom() {
+    // all number glyphs, others do not. then there's AM/PM vs 24 hour, and so on
-    const messagesContainer = document.querySelector('#messages > .scroll-container');
+    calculateTimestampWidth(timestamp) {
-    return messagesContainer.scrollTop >= messagesContainer.scrollHeight - messagesContainer.offsetHeight;
+        this.elements.timestampWidthProbe.innerText = timestamp;
-}
+        if (this.elements.timestampWidthProbe.clientWidth > this.maxTimestampWidth) {
-
+            this.maxTimestampWidth = this.elements.timestampWidthProbe.clientWidth;
-// calculate timestamp width
+            document.body.style.setProperty('--timestamp-width', (Math.ceil(this.maxTimestampWidth) + 1) + 'px');
-// to ensure that all timestamps have the same width. some typefaces have the same width across
+        }
-// all number glyphs, others do not. the solution below is very rudimentary; at the very least,
-// delaying it to account for font loading might make sense. perhaps there's an even better way?
-let maxTimestampWidth = 0;
-function calculateTimestampWidth(timestamp) {
-    const widthProbe = document.getElementById('timestamp-width-probe');
-    widthProbe.innerText = timestamp;
-
-    if (widthProbe.clientWidth > maxTimestampWidth) {
-        maxTimestampWidth = widthProbe.clientWidth;
-        document.body.style.setProperty('--timestamp-width', (Math.ceil(maxTimestampWidth) + 1) + 'px');
     }
-}
 
-function addMessage(messageData) {
+    messagesAreScrolledToBottom() {
-    const scrolledToBottom = messagesContainerIsScrolledToBottom();
+        if (this.elements.messagesContainer.scrollTopMax) {
-    calculateTimestampWidth(messageData.timestamp);
+            this.scrolledToBottom = this.elements.messagesContainer.scrollTop === this.elements.messagesContainer.scrollTopMax;
-
+        } else {
-    const liMessage = document.createElement('li');
+            this.scrolledToBottom =
-    const spanTimestamp = document.createElement('span');
+                (
-    spanTimestamp.classList.add('timestamp');
+                    this.elements.messagesContainer.scrollHeight -
-    const spanMessage = document.createElement('span');
+                    this.elements.messagesContainer.clientHeight -
-    spanMessage.classList.add('message');
+                    this.elements.messagesContainer.scrollTop
-
+                ) < 1;
-    spanTimestamp.innerText = messageData.timestamp;
-    spanMessage.innerHTML = messageData.messageHTML;
-
-    liMessage.appendChild(spanTimestamp);
-    liMessage.appendChild(spanMessage);
-    document.getElementById('messages-list').appendChild(liMessage);
-
-    if (scrolledToBottom) {
-        liMessage.scrollIntoView();
-    }
-}
-
-function clearMessages() {
-    document.getElementById('messages-list').innerHTML = '';
-}
-
-// add indicator signaling more messages
-document.querySelector('#messages > .scroll-container').addEventListener('scroll', () => {
-    const messagesContainer = document.querySelector('#messages > .scroll-container');
-    if (!messagesContainerIsScrolledToBottom()) {
-        messagesContainer.classList.add('more-messages');
-    } else {
-        messagesContainer.classList.remove('more-messages');
-    }
-});
-
-
-// handle message sending
-document.querySelector('#input > form').addEventListener('submit', (event) => {
-    event.preventDefault();
-
-    const chatInput = document.getElementById('chat-input');
-    const message = chatInput.value;
-
-    (async () => {
-        const rawResponse = await fetch('/send', {
-            method: 'POST',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ message: message })
-        });
-        const content = await rawResponse.json();
-
-        // TODO use the response
-        console.log(content);
-    })();
-
-    chatInput.value = '';
-});
-
-
-// from kizer, gfd icons
-async function AddGfdStylesheet(gfdPath, texPath) {
-    const texPromise = LoadTexAsBlob(texPath);
-    const gfdPromise = LoadGfd(gfdPath);
-    const texUrl = URL.createObjectURL(await texPromise);
-    const gfd = await gfdPromise;
-
-    const stylesheets = [];
-    for (const entry of gfd) {
-        if (entry.width * entry.height <= 0)
-            continue;
-
-        width = entry.width;
-        height = entry.height;
-
-        if (entry.redirect !== 0) {
-            stylesheets[entry.redirect][0].push(entry.id);
-            continue;
         }
 
-        stylesheets[entry.id] = [
+        return this.scrolledToBottom;
-            [entry.id],
-            [
-                `background-position: -${entry.left}px -${entry.top}px`,
-                `background-image: url('${texUrl}')`,
-                `width: ${entry.width}px`,
-                `height: ${entry.height}px`
-            ].join(';'),
-            [
-                `background-position: -${entry.left * 2}px -${entry.top * 2 + 341}px`,
-                `background-image: url('${texUrl}')`,
-                `width: ${entry.width * 2}px`,
-                `height: ${entry.height * 2}px`
-            ].join(';'),
-            entry.width
-        ];
     }
 
-    let stylesheet = '';
+    scrollMessagesToBottom() {
-    for (const entry of stylesheets) {
+        if (this.elements.messagesContainer.scrollTopMax) {
-        if (!entry)
+            this.elements.messagesContainer.scrollTop = this.elements.messagesContainer.scrollTopMax;
-            continue;
+        } else {
-
+            this.elements.messagesList.lastChild.scrollIntoView();
-        stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-${x}::before`).join(', ')}{${entry[1]};}`;
+        }
-        stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-hq-${x}::before`).join(', ')}{${entry[2]};}`;
-        stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-${x}`).join(', ')}{width:${entry[3]}px;}`;
-        stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-hq-${x}`).join(', ')}{width:${entry[3] * 2}px;}`;
     }
 
-    const styleNode = document.createElement('style');
+    addMessage(messageData) {
-    styleNode.appendChild(document.createTextNode(stylesheet));
+        const scrolledToBottom = this.messagesAreScrolledToBottom();
-    document.head.appendChild(styleNode);
+        this.calculateTimestampWidth(messageData.timestamp);
-}
 
-async function LoadTexAsBlob(path) {
+        const liMessage = document.createElement('li');
-    const tex = ParseTex(await (await fetch(path)).arrayBuffer());
+        const spanTimestamp = document.createElement('span');
-    if (tex.format !== 0x1450) // B8G8R8A8
+        spanTimestamp.classList.add('timestamp');
-        throw 'Not supported';
+        const spanMessage = document.createElement('span');
+        spanMessage.classList.add('message');
 
-    const dataArray = new Uint8ClampedArray(tex.buffer, tex.offsetToSurface[0], tex.width * tex.height * 4);
+        spanTimestamp.innerText = messageData.timestamp;
-    for (let i = 0; i < dataArray.length; i += 4) {
+        spanMessage.innerHTML = messageData.messageHTML;
-        const t = dataArray[i];
-        dataArray[i] = dataArray[i + 2];
-        dataArray[i + 2] = t;
-    }
-    const imageData = new ImageData(dataArray, tex.width, tex.height);
-    const bitmap = await createImageBitmap(imageData);
 
-    const canvas = new OffscreenCanvas(tex.width, tex.height);
+        liMessage.appendChild(spanTimestamp);
-    canvas.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);
+        liMessage.appendChild(spanMessage);
-    return await canvas.convertToBlob();
+        this.elements.messagesList.appendChild(liMessage);
-}
 
-async function LoadGfd(path) {
+        if (scrolledToBottom) {
-    const buffer = new DataView(await (await fetch(path)).arrayBuffer());
+            this.scrollMessagesToBottom();
-    const count = buffer.getInt32(8, true);
+        }
-    const entries = new Array(count);
-    for (let i = 0; i < count; i++) {
-        const offset = 0x10 + (i * 0x10);
-        entries[i] = {
-            id: buffer.getInt16(offset, true),
-            left: buffer.getInt16(offset + 2, true),
-            top: buffer.getInt16(offset + 4, true),
-            width: buffer.getInt16(offset + 6, true),
-            height: buffer.getInt16(offset + 8, true),
-            unk0A: buffer.getInt16(offset + 10, true),
-            redirect: buffer.getInt16(offset + 12, true),
-            unk0E: buffer.getInt16(offset + 14, true),
-        };
     }
 
-    return entries;
+    clearAllMessages() {
+        this.elements.messagesList.innerHTML = '';
+    }
+
+    setupSSEConnection() {
+        this.sse = new EventSource('/sse');
+
+        this.sse.addEventListener('close', () => {
+            console.log('Closing SSE connection.');
+            this.sse.close();
+        });
+
+        this.sse.addEventListener('switch-channel', (event) => {
+            try {
+                this.updateChannelHint(JSON.parse(event.data).channel);
+            } catch (error) {
+                console.error(error);
+            }
+        });
+
+        // new messages to be appended to the message list
+        this.sse.addEventListener('new-message', (event) => {
+            try {
+                for (const message of JSON.parse(event.data).messages) {
+                    this.addMessage(message);
+                }
+            } catch (error) {
+                console.error(error);
+            }
+        });
+
+        // a bulk of new messages, with a clear of the message list beforehand
+        this.sse.addEventListener('bulk-messages', (event) => {
+            this.clearAllMessages();
+            try {
+                for (const message of JSON.parse(event.data).messages) {
+                    this.addMessage(message);
+                }
+            } catch (error) {
+                console.error(error);
+            }
+        });
+
+        this.sse.addEventListener('channel-list', (event) => {
+            try {
+                this.updateChannels(JSON.parse(event.data).channels);
+            } catch (error) {
+                console.error(error);
+            }
+        });
+    }
 }
 
-function ParseTex(arrayBuffer) {
+window.addEventListener('load', function() {
-    const buffer = new DataView(arrayBuffer);
+    this._app = new ChatTwoWeb();
-    const type = buffer.getInt32(0, true);
+});
-    const format = buffer.getInt32(4, true);
-    const width = buffer.getInt16(8, true);
-    const height = buffer.getInt16(10, true);
-    const depth = buffer.getInt16(12, true);
-    const mipsAndFlag = buffer.getInt8(14, true);
-    const arraySize = buffer.getInt8(15, true);
-    const lodOffsets = [buffer.getInt32(16, true), buffer.getInt32(20, true), buffer.getInt32(24, true)];
-    const offsetToSurface = [buffer.getInt32(28, true), buffer.getInt32(32, true), buffer.getInt32(36, true), buffer.getInt32(40, true), buffer.getInt32(44, true), buffer.getInt32(48, true), buffer.getInt32(52, true), buffer.getInt32(56, true), buffer.getInt32(60, true), buffer.getInt32(64, true), buffer.getInt32(68, true), buffer.getInt32(72, true), buffer.getInt32(76, true)];
-    return {
-        buffer: arrayBuffer,
-        type,
-        format,
-        width,
-        height,
-        depth,
-        mipsAndFlag,
-        arraySize,
-        lodOffsets,
-        offsetToSurface,
-    };
-}
-
-AddGfdStylesheet('/files/gfdata.gfd', '/files/fonticon_ps5.tex');

ChatTwo/Http/templates/chat.html

@@ -7,33 +7,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="static/start.css">
+    <script src="static/gfd.js"></script>
 </head>
 
 <body>
-<main class="chat">
+    <main class="chat">
-    <section id="messages">
+        <section id="messages">
-        <div class="scroll-container">
+            <div class="scroll-container">
-            <ol id="messages-list"></ol>
+                <ol id="messages-list"></ol>
-        </div>
-    </section>
-
-    <section id="input">
-        <form>
-            <div class="select-container">
-                <select id="channel-select"></select>
             </div>
 
-            <div class="input-container">
+            <div id="more-messages-indicator">
-                <input type="text" id="chat-input" placeholder="Message" enterkeyhint="send">
+                <!-- "arrow-down" icon from https://github.com/feathericons/feather, under MIT license -->
-                <div id="channel-hint"></div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
             </div>
+        </section>
 
-            <button type="submit">Send</button>
+        <section id="input">
-        </form>
+            <form>
-    </section>
+                <div class="select-container">
-</main>
+                    <select id="channel-select"></select>
+                </div>
 
-<div id="timestamp-width-probe"></div>
+                <div class="input-container">
-<script src="static/start.js"></script>
+                    <input type="text" id="chat-input" autocomplete="off" placeholder="Message" enterkeyhint="send">
+                    <div id="channel-hint"></div>
+                </div>
+
+                <button type="submit">Send</button>
+            </form>
+        </section>
+    </main>
+
+    <div id="timestamp-width-probe"></div>
+    <script src="static/start.js"></script>
 </body>
-</html>
+</html>