feat: add combined codebase

src/components/StatusBar.ts

@@ -0,0 +1,67 @@
+import type { WebrtcProvider } from "y-webrtc";
+
+export function StatusBar(provider: WebrtcProvider): HTMLElement {
+  const el = document.createElement("div");
+  el.className = "status-bar";
+
+  const dot = document.createElement("span");
+  dot.className = "status-dot connecting";
+
+  const statusText = document.createElement("span");
+  statusText.className = "status-text";
+  statusText.textContent = "Connecting";
+
+  const divider = document.createElement("span");
+  divider.className = "status-divider";
+  divider.textContent = "\u00b7";
+
+  const peerText = document.createElement("span");
+  peerText.className = "status-peers";
+
+  el.append(dot, statusText, divider, peerText);
+
+  // --- Connection state ---
+
+  let syncTimeout: ReturnType<typeof setTimeout> | undefined = setTimeout(() => {
+    statusText.textContent = "Ready";
+    dot.className = "status-dot ready";
+  }, 3000);
+
+  provider.on("synced", ({ synced }: { synced: boolean }) => {
+    if (syncTimeout) {
+      clearTimeout(syncTimeout);
+      syncTimeout = undefined;
+    }
+    dot.className = `status-dot ${synced ? "connected" : "connecting"}`;
+    statusText.textContent = synced ? "Connected" : "Connecting";
+  });
+
+  // Online/offline awareness
+  const handleOffline = () => {
+    dot.className = "status-dot connecting";
+    statusText.textContent = "Offline";
+  };
+  const handleOnline = () => {
+    dot.className = "status-dot connecting";
+    statusText.textContent = "Reconnecting";
+  };
+
+  window.addEventListener("offline", handleOffline);
+  window.addEventListener("online", handleOnline);
+
+  // --- Peer count ---
+
+  function updatePeerCount() {
+    const total = provider.awareness.getStates().size;
+    const others = total - 1;
+    peerText.textContent =
+      others === 0
+        ? "Only you"
+        : `${others} other${others !== 1 ? "s" : ""}`;
+  }
+
+  provider.awareness.on("change", updatePeerCount);
+  updatePeerCount();
+
+  return el;
+}