Merge pull request #7 from matthme/feat/tell-others-about-known-peers

Add feature to learn from others about known peers
matthme · Sep 25, 2024 · db817e9 · db817e9
2 parents 03fa589 + 4a7373b
commit db817e9
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "network": "hc s clean && npm run build:happ && UI_PORT=8888 concurrently \"npm start -w ui\" \"npm run launch:happ\"",
     "test": "npm run build:zomes && hc app pack workdir --recursive && npm t -w tests",
     "applet-dev": "concurrently \"UI_PORT=8888 npm run start -w ui\" \"weave --agent-idx 1 --dev-config ./weave.dev.config.ts\" \"sleep 5 && weave --agent-idx 2 --dev-config ./weave.dev.config.ts --sync-time 6000\"",
-    "applet-dev-3": "concurrently \"UI_PORT=8888 npm run start -w ui\" \"weave --agent-idx 1 --dev-config ./weave.dev.config.ts\" \"sleep 5 && weave --agent-idx 2 --dev-config ./weave.dev.config.ts --sync-time 6000\" \"sleep 5 && weave --agent-idx 3 --dev-config ./weave.dev.config.ts --sync-time 6000\"",
+    "applet-dev-3": "concurrently \"UI_PORT=8888 npm run start -w ui\" \"weave --agent-idx 1 --dev-config ./weave.dev.config.ts\" \"sleep 5 && weave --agent-idx 2 --dev-config ./weave.dev.config.ts --sync-time 10000\" \"sleep 5 && weave --agent-idx 3 --dev-config ./weave.dev.config.ts --sync-time 10000\"",
     "applet-dev-1": "concurrently \"UI_PORT=8888 npm run start -w ui\" \"weave --agent-idx 1 --dev-config ./weave.dev.config.ts\"",
     "help": "weave --help",
     "launch:happ": "concurrently \"hc run-local-services --bootstrap-port 9998 --signal-port 9999\" \"echo pass | RUST_LOG=warn hc launch --piped -n $AGENTS workdir/presence.happ --ui-port $UI_PORT network --bootstrap http://127.0.0.1:9998 webrtc ws://127.0.0.1:9999\"",
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@holochain-playground/cli": "^0.1.1",
-    "@theweave/cli": "0.13.0-beta.6",
+    "@theweave/cli": "0.13.0-beta.7",
     "concurrently": "^6.2.1",
     "electron": "^25.6.0",
     "rimraf": "^3.0.2"

diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "scripts": {
     "start": "vite --port $UI_PORT --clearScreen false",
     "build": "vite build",

diff --git a/ui/src/agent-connection-status-icon.ts b/ui/src/agent-connection-status-icon.ts
@@ -1,5 +1,5 @@
 import { consume } from '@lit/context';
-import { hashProperty, sharedStyles } from '@holochain-open-dev/elements';
+import { hashProperty } from '@holochain-open-dev/elements';
 import { css, html, LitElement, PropertyValueMap } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { AgentPubKey, encodeHashToBase64 } from '@holochain/client';
@@ -20,6 +20,7 @@ import {
 import { EntryRecord } from '@holochain-open-dev/utils';
 import { ConnectionStatus } from './room-view';
 import { connectionStatusToColor } from './utils';
+import { sharedStyles } from './sharedStyles';
 
 @localized()
 @customElement('agent-connection-status-icon')
@@ -41,6 +42,9 @@ export class AgentConnectionStatusIcon extends LitElement {
   @property()
   connectionStatus: ConnectionStatus | undefined;
 
+  @property()
+  onlyToldAbout = false;
+
   /** Dependencies */
 
   /**
@@ -113,14 +117,33 @@ export class AgentConnectionStatusIcon extends LitElement {
 
   renderProfile(profile: EntryRecord<Profile> | undefined) {
     return html`
-      <div
-        class="row"
-        style="align-items: center; margin: 0; padding: 0; ${!this
-          .connectionStatus || this.connectionStatus.type === 'Disconnected'
-          ? 'opacity: 0.5'
-          : ''}"
+      <sl-tooltip
+        class="tooltip-filled"
+        placement="top"
+        hoist
+        content=${`${
+          profile ? profile.entry.nickname : 'Unknown'
+        } (${this.statusToText(this.connectionStatus)})\n new line`}
       >
-        <sl-tooltip class="tooltip-filled" placement="top" hoist content=${`${profile ? profile.entry.nickname : 'Unknown'} (${this.statusToText(this.connectionStatus)})`}>
+        <div
+          class="row"
+          style="position: relative; align-items: center; margin: 0; padding: 0; ${!this
+            .connectionStatus || this.connectionStatus.type === 'Disconnected'
+            ? 'opacity: 0.5'
+            : ''}"
+        >
+          ${this.onlyToldAbout
+            ? html`
+                <sl-tooltip
+                  hoist
+                  class="tooltip-filled tooltip-red"
+                  placement="bottom"
+                  content="has only learnt through signals from others that this person is part of the room"
+                >
+                  <div class="only-told-indicator tertiary-font">!</div>
+                </sl-tooltip>
+              `
+            : html``}
           ${profile && profile.entry.fields.avatar
             ? html`
                 <img
@@ -145,8 +168,8 @@ export class AgentConnectionStatusIcon extends LitElement {
                 >
                 </holo-identicon>
               `}
-        </sl-tooltip>
-      </div>
+        </div>
+      </sl-tooltip>
     `;
   }
 
@@ -188,6 +211,23 @@ export class AgentConnectionStatusIcon extends LitElement {
         --sl-tooltip-color: #0d1543;
         --sl-tooltip-font-family: 'Ubuntu', sans-serif;
       }
+
+      .tooltip-red {
+        --sl-tooltip-background-color: #ebc3c3;
+      }
+
+      .only-told-indicator {
+        position: absolute;
+        bottom: -1px;
+        right: -1px;
+        font-weight: bold;
+        color: white;
+        font-size: 12px;
+        background: red;
+        border-radius: 50%;
+        width: 14px;
+        height: 14px;
+      }
     `,
   ];
 }
diff --git a/ui/src/agent-connection-status.ts b/ui/src/agent-connection-status.ts
@@ -41,6 +41,9 @@ export class AgentConnectionStatus extends LitElement {
   @property()
   connectionStatus: ConnectionStatus | undefined;
 
+  @property()
+  appVersion: string | undefined;
+
   /** Dependencies */
 
   /**
@@ -115,6 +118,7 @@ export class AgentConnectionStatus extends LitElement {
     return html`
       <div
         class="row"
+        title="${this.appVersion ? `Uses Presence v${this.appVersion}` : `Uses unknown Presence version`}"
         style="align-items: center; margin: 0; padding: 0; ${!this
           .connectionStatus || this.connectionStatus.type === 'Disconnected'
           ? 'opacity: 0.5'