pwa

public/index.html

@@ -5,6 +5,15 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>gibbz voice — POC</title>
 <link rel="stylesheet" href="style.css" />
+<link rel="manifest" href="/manifest.webmanifest" />
+<link rel="icon" href="/favicon.ico" sizes="any" />
+<link rel="icon" type="image/svg+xml" href="/icons/icon.svg" />
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+<meta name="theme-color" content="#1e1f22" />
+<meta name="mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+<meta name="apple-mobile-web-app-title" content="gibbz" />
 <script src="https://otel.k6n.net/static/otel-rum.js"></script>
 <script>
   window.rum = window.OtelRUM ? OtelRUM.init({
@@ -20,6 +29,7 @@
 <!-- mobile top bar: hamburger opens the channel drawer, shows live status -->
 <header id="mobile-topbar">
   <button id="btn-menu" title="Channels">&#9776;</button>
+  <img id="mobile-logo" src="/icons/icon.svg" alt="" width="24" height="24" />
   <span id="mobile-title">gibbz voice</span>
   <span class="status-row" id="mobile-status-row">
     <span class="status-indicator" id="mobile-status-dot"></span>
@@ -29,16 +39,12 @@
 <div id="sidebar-backdrop"></div>
 
 <div id="app">
-  <!-- server rail -->
-  <nav id="rail">
-    <div class="rail-icon home" title="gibbz voice">G</div>
-    <div class="rail-sep"></div>
-    <div class="rail-icon" title="POC server">VP</div>
-  </nav>
-
   <!-- channel sidebar -->
   <aside id="sidebar">
-    <header id="server-name">gibbz voice <span class="poc-tag">POC</span></header>
+    <header id="server-name">
+      <img id="server-logo" src="/icons/icon.svg" alt="" width="22" height="22" />
+      gibbz voice <span class="poc-tag">POC</span>
+    </header>
     <div class="channel-group-label">Text channels</div>
     <div class="channel text" data-mx-room="gibbz-general">#
       general <span class="hint">matrix</span></div>
@@ -166,5 +172,12 @@
 <div id="toasts"></div>
 
 <script type="module" src="/app.js"></script>
+<script>
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/sw.js').catch((err) => console.warn('sw registration failed', err));
+    });
+  }
+</script>
 </body>
 </html>