fixups

ui/DesignSystem/Component/ConnectionStatusIndicator.svelte

@@ -1,5 +1,5 @@
-<script>
-  import { status as store, StatusType } from "../../src/localPeer.ts";
+<script lang="typescript">
+  import { status as store, StatusType } from "../../src/localPeer";
 
   import Remote from "../Component/Remote.svelte";
   import { Icon } from "../Primitive";
@@ -8,7 +8,8 @@
   import Syncing from "./ConnectionStatusIndicator/Syncing.svelte";
   import Offline from "./ConnectionStatusIndicator/Offline.svelte";
 
-  const peerCount = count => {
+  const peerCount = (peers: { [peerId: string]: string[] }) => {
+    const count = Object.keys(peers).length;
     if (count === 1) {
       return "1 peer";
     } else {
@@ -35,7 +36,8 @@
 <Remote {store} let:data={status}>
   <div>
     {#if status.type === StatusType.Online}
-      <Tooltip value={`You’re connected to ${peerCount(status.connected)}`}>
+      <Tooltip
+        value={`You’re connected to ${peerCount(status.connectedPeers)}`}>
         <div class="item indicator" data-cy="connection-status-online">
           <Icon.Network />
         </div>

ui/Screen/NetworkDiagnostics.svelte

@@ -1,7 +1,6 @@
 <script lang="typescript">
   import Router from "svelte-spa-router";
 
-  import { StatusType } from "../src/localPeer";
   import { store } from "../src/screen/network";
   import * as path from "../src/path";
 
@@ -37,6 +36,7 @@
       looseActiveStateMatching: true,
     },
   ];
+
 </script>
 
 <style>
@@ -45,12 +45,15 @@
     flex-direction: column;
     justify-content: center;
   }
+
 </style>
 
 <SidebarLayout>
   <Remote {store} let:data={{ status }}>
     <Header>
-      <div slot="left" class="title"><h1>Status: {status.type}</h1></div>
+      <div slot="left" class="title">
+        <h1>Status: {status.type}</h1>
+      </div>
     </Header>
 
     <ActionBar>

ui/Screen/NetworkDiagnostics/ConnectedPeers.svelte

@@ -3,6 +3,7 @@
   import { store } from "../../src/screen/network";
 
   import Remote from "../../DesignSystem/Component/Remote.svelte";
+
 </script>
 
 <style>
@@ -12,6 +13,7 @@
     border-collapse: collapse;
     border: 3px solid purple;
   }
+
 </style>
 
 <Remote {store} let:data={{ status }}>

ui/Screen/NetworkDiagnostics/StateTable.svelte

@@ -3,6 +3,7 @@
   import StyledCopyable from "../../DesignSystem/Component/StyledCopyable.svelte";
 
   export let state: RoomState;
+
 </script>
 
 <table>

ui/Screen/NetworkDiagnostics/WaitingRoom.svelte

@@ -2,9 +2,12 @@
   import { DateTime } from "luxon";
   import { onDestroy } from "svelte";
   import JSONTree from "svelte-json-tree";
-  
+
   import StateTable from "./StateTable.svelte";
-  import { waitingRoomEventLog, WaitingRoomTransition } from "../../src/localPeer";
+  import {
+    waitingRoomEventLog,
+    WaitingRoomTransition,
+  } from "../../src/localPeer";
 
   let lastEvent: WaitingRoomTransition | null = null;
   let eventsWithoutTicks: WaitingRoomTransition[] = [];
@@ -13,6 +16,7 @@
     eventsWithoutTicks = e.filter(e => e.event.type !== "tick");
   });
   onDestroy(unsub);
+
 </script>
 
 <style>
@@ -30,6 +34,7 @@
   thead th:nth-child(2) {
     width: 10%;
   }
+
 </style>
 
 <div>

ui/src/localPeer.ts

@@ -12,10 +12,7 @@ import * as session from "./session";
 import type * as urn from "./urn";
 import * as error from "./error";
 import * as bacon from "./bacon";
-import type {
-  Event as RoomEvent,
-  RoomState,
-} from "./waitingRoom";
+import type { Event as RoomEvent, RoomState } from "./waitingRoom";
 import { eventSchema as roomEventSchema, roomStateSchema } from "./waitingRoom";
 
 // TYPES
@@ -128,7 +125,6 @@ export type Event =
   | WaitingRoomTransition
   | { type: EventType.StatusChanged; old: Status; new: Status };
 
-
 const eventSchema: zod.Schema<Event> = zod.union([
   zod.object({
     type: zod.literal(EventType.ProjectUpdated),
@@ -155,7 +151,7 @@ const eventSchema: zod.Schema<Event> = zod.union([
   zod.object({
     type: zod.literal(EventType.WaitingRoomTransition),
     timestamp: zod.number(),
-    state_before: roomStateSchema, 
+    state_before: roomStateSchema,
     state_after: roomStateSchema,
     event: roomEventSchema,
   }),
@@ -257,17 +253,21 @@ eventBus.onValue(event => {
   }
 });
 
-const waitingRoomEvents: bacon.Property<WaitingRoomTransition[]> = bacon.filterMap(
-  eventBus,
-  event => {
+const waitingRoomEvents: bacon.Property<WaitingRoomTransition[]> = bacon
+  .filterMap(eventBus, event => {
     if (event.type === EventType.WaitingRoomTransition) {
-      return event
+      return event;
     } else {
-      return undefined
+      return undefined;
     }
-  }
-).scan<WaitingRoomTransition[]>([], (acc, event) => [...acc, event].slice(-200))
+  })
+  .scan<WaitingRoomTransition[]>([], (acc, event) =>
+    [...acc, event].slice(-200)
+  );
 
-const waitingRoomEventLogStore: Writable<WaitingRoomTransition[]> = writable([])
-waitingRoomEvents.onValue(events => waitingRoomEventLogStore.set(events))
-export const waitingRoomEventLog: Readable<WaitingRoomTransition[]> = waitingRoomEventLogStore
+const waitingRoomEventLogStore: Writable<WaitingRoomTransition[]> = writable(
+  []
+);
+waitingRoomEvents.onValue(events => waitingRoomEventLogStore.set(events));
+export const waitingRoomEventLog: Readable<WaitingRoomTransition[]> =
+  waitingRoomEventLogStore;

ui/src/path.ts

@@ -32,4 +32,3 @@ export const networkDiagnosticsEvents = (): string =>
   "/network-diagnostics/events";
 export const networkDiagnosticsWaitingRoom = (): string =>
   "/network-diagnostics/waiting-room";
-

ui/src/waitingRoom.ts

@@ -25,7 +25,7 @@ export enum PeerStatus {
 
 export const eventSchema = zod.union([
   zod.object({
-    type: zod.literal("tick")
+    type: zod.literal("tick"),
   }),
   zod.object({
     type: zod.literal("created"),
@@ -43,13 +43,13 @@ export const eventSchema = zod.union([
   zod.object({
     type: zod.literal("cloning"),
     urn: zod.string(),
-    peer: zod.string()
+    peer: zod.string(),
   }),
   zod.object({
     type: zod.literal("cloningFailed"),
     urn: zod.string(),
     peer: zod.string(),
-    reason: zod.string()
+    reason: zod.string(),
   }),
   zod.object({
     type: zod.literal("cloned"),
@@ -59,27 +59,30 @@ export const eventSchema = zod.union([
   zod.object({
     type: zod.literal("canceled"),
     urn: zod.string(),
-  })
-])
-
+  }),
+]);
 
-export const roomStateSchema = zod.record(zod.object({
-  state: zod.union([
-    zod.literal("Created"),
-    zod.literal("Requested"),
-    zod.literal("Found"),
-    zod.literal("Cloning"),
-    zod.literal("Cloned"),
-    zod.literal("Cancelled"),
-    zod.literal("Failed"),
-    zod.literal("TimedOut"),
-  ]),
-  peers: zod.record(zod.union([
-    zod.literal("available"),
-    zod.literal("inProgress"),
-    zod.literal("failed"),
-  ]))
-}))
+export const roomStateSchema = zod.record(
+  zod.object({
+    state: zod.union([
+      zod.literal("Created"),
+      zod.literal("Requested"),
+      zod.literal("Found"),
+      zod.literal("Cloning"),
+      zod.literal("Cloned"),
+      zod.literal("Cancelled"),
+      zod.literal("Failed"),
+      zod.literal("TimedOut"),
+    ]),
+    peers: zod.record(
+      zod.union([
+        zod.literal("available"),
+        zod.literal("inProgress"),
+        zod.literal("failed"),
+      ])
+    ),
+  })
+);
 
-export type Event = zod.infer<typeof eventSchema>
-export type RoomState = zod.infer<typeof roomStateSchema>
+export type Event = zod.infer<typeof eventSchema>;
+export type RoomState = zod.infer<typeof roomStateSchema>;