sliding-sync/client/index.html

<html>
    <head>
        <title>Sync v3 experiments</title>
        <link rel="stylesheet" href="styles.css">
        <script src="index.js" type="module"></script>
    </head>
    <body>
        <div class="statsheader">
            <span id="txrx" title="Total sizes of uncompressed HTTP bodies without HTTP headers">0 KB Tx / 0 KB Rx</span>
            <div id="listgraph" title="Room lists tracked, blue=window yellow=SYNC green=INSERT red=DELETE cyan=UPDATE dark red=INVALIDATE"></div>
        </div>
        <div class="page">
            <div class="leftSide">
                <div id="roomlistcontainer">
                
                </div>
            </div>
            <div class="rightSide">
                <div class="header">
                    <input id="accessToken" type="password" placeholder="matrix.org access token" />
                    <input id="syncButton" type="button" value="Start Sync" />
                    <input id="debugButton" type="button" value="DEBUG" style="display: none;" />
                    <span id="errorMsg"></span>
                    <input id="roomfilter" type="text" placeholder="Filter rooms..." />
                </div>
                <div class="roomheading">
                    <img class="roomavatar" decoding="async"  id="selectedroomavatar" src="/client/placeholder.svg"/>
                    <span id="selectedroomname">Select a room</span>
                    <div id="selectedroomtopic">

                    </div>
                </div>
                <div id="messages"></div>
                <div id="roomfooter">
                    <input id="sendmessageinput" type="text" placeholder="Enter text or commands /me /invite /join /leave" spellcheck="true" />
                </div>
            </div>
            <template id="roomCellTemplate">
                <div class="roomcell">
                    <img class="roomavatar" decoding="async" src="/client/placeholder.svg"/>
                    <div class="roominfo">
                        <span class="unreadcount"></span>
                        <span class="roomname"></span>
                        <span class="roomtimestamp"></span>
                        <div>
                            <span class="roomsender"></span>
                            <span class="roomcontent"></span>
                        </div>
                    </div>
                </div>
            </template>
            <template id="messagetemplate">
                <div>
                    <div class="msgheader">
                        <div class="msgsender">Alice</div>
                        <div class="msgtimestamp">11/06/1999 11:22:33</div>
                    </div>
                    <div class="msgcontent">Lorem Ipsum Dolor...</div>
                </div>
            </template>
        </div>
    </body>
</html>
Add client.html with it interacting with the synclive API Very rough WIP, need to verify a lot more to check correctness 2021-09-24 14:30:00 +01:00			`<html>`
			`<head>`
			`<title>Sync v3 experiments</title>`
client: add styles.css in prep for dynamic styles Specifically for highlighting the currently selected room. 2021-10-06 12:45:54 +01:00			`<link rel="stylesheet" href="styles.css">`
client: add render.js to put boring non-sliding-sync code in 2022-02-23 12:16:22 +00:00			`<script src="index.js" type="module"></script>`
Add client.html with it interacting with the synclive API Very rough WIP, need to verify a lot more to check correctness 2021-09-24 14:30:00 +01:00			`</head>`
client: add styles.css in prep for dynamic styles Specifically for highlighting the currently selected room. 2021-10-06 12:45:54 +01:00			`<body>`
client: add Tx/Rx stats 2022-02-22 18:24:35 +00:00			`<div class="statsheader">`
client: Add svg visualisation of the sliding window ranges 2022-02-22 19:04:19 +00:00			`<span id="txrx" title="Total sizes of uncompressed HTTP bodies without HTTP headers">0 KB Tx / 0 KB Rx</span>`
client: animate SYNC/INVALIDATE/INSERT/DELETE/UPDATE operations 2022-02-23 10:51:09 +00:00			`<div id="listgraph" title="Room lists tracked, blue=window yellow=SYNC green=INSERT red=DELETE cyan=UPDATE dark red=INVALIDATE"></div>`
client: add Tx/Rx stats 2022-02-22 18:24:35 +00:00			`</div>`
client: add styles.css in prep for dynamic styles Specifically for highlighting the currently selected room. 2021-10-06 12:45:54 +01:00			`<div class="page">`
Rejig css 2021-10-06 13:20:26 +01:00			`<div class="leftSide">`
Add multiple lists to the test jig CSS needs some work 2021-11-10 18:13:04 +00:00			`<div id="roomlistcontainer">`

			`</div>`
			`</div>`
			`<div class="rightSide">`
Rejig css 2021-10-06 13:20:26 +01:00			`<div class="header">`
			`<input id="accessToken" type="password" placeholder="matrix.org access token" />`
Remove New Session button and always make a new one on sync click 2021-10-07 11:22:53 +01:00			`<input id="syncButton" type="button" value="Start Sync" />`
Only display DEBUG button if the access token is set to 'debug' 2021-10-22 15:59:12 +01:00			`<input id="debugButton" type="button" value="DEBUG" style="display: none;" />`
Rejig css 2021-10-06 13:20:26 +01:00			`<span id="errorMsg"></span>`
client/server: set 'initial' flag on a per-room basis and use it when rendering Previously the 'initial' flag was set on the entire response which was pointless as the client can detect this by the presence/absence of `?pos=`. Instead, move the `initial` flag to be present on the Room object, so clients know when to replace or update their databases. Use this to fix a bug where the timeline would show incorrectly when clicking on rooms due to appending to the timeline when the room subscription data was collected. 2022-02-24 16:48:39 +00:00			`<input id="roomfilter" type="text" placeholder="Filter rooms..." />`
Rejig layout for displaying messages in a room 2021-10-05 17:50:15 +01:00			`</div>`
client: highlight the active room in the room list 2021-10-06 14:03:22 +01:00			`<div class="roomheading">`
Ignore @ when working out room name sort positions 2021-11-02 18:05:38 +00:00			`<img class="roomavatar" decoding="async" id="selectedroomavatar" src="/client/placeholder.svg"/>`
client: highlight the active room in the room list 2021-10-06 14:03:22 +01:00			`<span id="selectedroomname">Select a room</span>`
Show the room topic; read the right required_state field on the muxed req for the room ID in question 2021-10-07 17:43:53 +01:00			`<div id="selectedroomtopic">`

			`</div>`
client: highlight the active room in the room list 2021-10-06 14:03:22 +01:00			`</div>`
Rejig css 2021-10-06 13:20:26 +01:00			`<div id="messages"></div>`
client: Add input box and basic /commands Supports: - /invite @user - /join #room-id-or-alias - /leave - /me thinks - basic text 2022-02-24 15:55:32 +00:00			`<div id="roomfooter">`
			`<input id="sendmessageinput" type="text" placeholder="Enter text or commands /me /invite /join /leave" spellcheck="true" />`
			`</div>`
Rejig layout for displaying messages in a room 2021-10-05 17:50:15 +01:00			`</div>`
Flesh out client, fix session management - Request first 100 rooms, with placeholder icons - Add a `http.FileServer` for everything under `/client` for images. - Sessions are only 400d if they provide a `?pos=` with the session ID. 2021-09-28 13:48:42 +01:00			`<template id="roomCellTemplate">`
client: add styles.css in prep for dynamic styles Specifically for highlighting the currently selected room. 2021-10-06 12:45:54 +01:00			`<div class="roomcell">`
Ignore @ when working out room name sort positions 2021-11-02 18:05:38 +00:00			`<img class="roomavatar" decoding="async" src="/client/placeholder.svg"/>`
Recycle views in the list This prevents flickering when new events arrive. 2021-09-30 11:43:16 +01:00			`<div class="roominfo">`
Implement unread counts on the client 2021-10-08 14:15:36 +01:00			`<span class="unreadcount"></span>`
Use grey rectangles instead of blurring placeholders It's far more performant and gives a better scrolling UX. 2021-10-08 12:47:36 +01:00			`<span class="roomname"></span>`
			`<span class="roomtimestamp"></span>`
CSS and display most recent event 2021-09-28 18:33:10 +01:00			`<div>`
Use grey rectangles instead of blurring placeholders It's far more performant and gives a better scrolling UX. 2021-10-08 12:47:36 +01:00			`<span class="roomsender"></span>`
			`<span class="roomcontent"></span>`
CSS and display most recent event 2021-09-28 18:33:10 +01:00			`</div>`
			`</div>`
Flesh out client, fix session management - Request first 100 rooms, with placeholder icons - Add a `http.FileServer` for everything under `/client` for images. - Sessions are only 400d if they provide a `?pos=` with the session ID. 2021-09-28 13:48:42 +01:00			`</div>`
			`</template>`
Add message template and render the timeline using it 2021-10-05 18:04:34 +01:00			`<template id="messagetemplate">`
			`<div>`
client: highlight the active room in the room list 2021-10-06 14:03:22 +01:00			`<div class="msgheader">`
			`<div class="msgsender">Alice</div>`
			`<div class="msgtimestamp">11/06/1999 11:22:33</div>`
			`</div>`
			`<div class="msgcontent">Lorem Ipsum Dolor...</div>`
Add message template and render the timeline using it 2021-10-05 18:04:34 +01:00			`</div>`
			`</template>`
Add client.html with it interacting with the synclive API Very rough WIP, need to verify a lot more to check correctness 2021-09-24 14:30:00 +01:00			`</div>`
			`</body>`
			`</html>`