c/quicproquo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add browser web client with IndexedDB, Service Worker, and PWA

Browse Source 
Create sdks/web/ with a vanilla TypeScript web client:
- IndexedDB local store for conversations, messages, and identity
- WebSocket transport connecting to the server bridge
- Service Worker with cache-first strategy for offline support
- PWA manifest for installable web app
- Dark-themed responsive UI with sidebar, messages, and input bar
- Connection status badge and MLS epoch indicator in header
- Unread message count badges on conversations
This commit is contained in:
Christian Nennemann
2026-03-04 20:55:05 +01:00
parent 496f83067a
commit 2d56824834
8 changed files with 1049 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
sdks/web/public/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#58a6ff" />
<title>quicproquo</title>
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app">
<!-- Login screen -->
<div id="login-screen" class="screen">
<h1>quicproquo</h1>
<p class="subtitle">End-to-end encrypted messenger</p>
<form id="login-form">
<input id="server-input" type="text" placeholder="Server (ws://host:port)" value="ws://127.0.0.1:9000" />
<input id="username-input" type="text" placeholder="Username" autocomplete="username" />
<input id="password-input" type="password" placeholder="Password" autocomplete="current-password" />
<button type="submit" id="login-btn">Connect & Login</button>
<button type="button" id="register-btn">Register</button>
</form>
<p id="login-error" class="error" hidden></p>
</div>
<!-- Chat screen -->
<div id="chat-screen" class="screen" hidden>
<aside id="sidebar">
<div id="sidebar-header">
<span id="user-display"></span>
<button id="logout-btn" title="Logout">Logout</button>
</div>
<ul id="conversation-list"></ul>
<button id="new-dm-btn">+ New DM</button>
</aside>
<main id="chat-main">
<header id="chat-header">
<span id="chat-title">Select a conversation</span>
<span id="epoch-badge" title="MLS epoch">epoch --</span>
<span id="conn-badge" class="offline">Offline</span>
</header>
<div id="messages"></div>
<form id="send-form">
<input id="msg-input" type="text" placeholder="Type a message..." autocomplete="off" />
<button type="submit">Send</button>
</form>
</main>
</div>
</div>
<script type="module" src="app.js"></script>
</body>
</html>