Add status selector UI, broadcast peer status, display peer statuses, and save local status

Author: devanshu

dev-dist/sw.js

@@ -81,11 +81,11 @@ define(['./workbox-9dc17825'], (function (workbox) { 'use strict';
     "url": "registerSW.js",
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
-    "url": "/offline.html",
-    "revision": "0.kvp38gtfuk"
+    "url": "index.html",
+    "revision": "0.6f6mcaamqrg"
   }], {});
   workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/offline.html"), {
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
     allowlist: [/^\/$/],
     denylist: [/^\/api\//]
   }));

src/styles.css

@@ -133,3 +133,35 @@ button:hover:not(:disabled) {
 audio {
   width: 100%;
 }
+
+/* adding style */
+.status-selector {
+  margin: 10px 0;
+  font-weight: 500;
+}
+
+.status-dot {
+  text-transform: capitalize;
+  padding: 3px 8px;
+  border-radius: 8px;
+}
+
+.status-dot.online {
+  background: #2ecc71;
+  color: white;
+}
+
+.status-dot.away {
+  background: #f1c40f;
+  color: black;
+}
+
+.status-dot.busy {
+  background: #e74c3c;
+  color: white;
+}
+
+.status-dot.offline {
+  background: #7f8c8d;
+  color: white;
+}

vite.config.js

@@ -31,11 +31,15 @@ export default defineConfig({
       registerType: 'autoUpdate',
       workbox: {
         globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
-        navigateFallback: '/offline.html',
-        navigateFallbackDenylist: [/^\\/api\\//],
+        // navigateFallback: '/offline.html',
+
+        //  Fixed regex: only single backslashes needed in literal
+        navigateFallbackDenylist: [/^\/api\//],
+
         runtimeCaching: [
           {
-            urlPattern: /^https:\\/\\/0\\.peerjs\\.com\\//,
+            //  Fixed regex: escape dots properly, not slashes
+            urlPattern: /^https:\/\/0\.peerjs\.com\//,
             handler: 'NetworkFirst',
             options: {
               cacheName: 'peerjs-cache',
@@ -46,7 +50,8 @@ export default defineConfig({
             }
           },
           {
-            urlPattern: /^https:\\/\\/api\\.qrserver\\.com\\//,
+            //  Fixed regex: same correction here
+            urlPattern: /^https:\/\/api\.qrserver\.com\//,
             handler: 'CacheFirst',
             options: {
               cacheName: 'qr-cache',