Notification groups working

darksoil-studio · Apr 30, 2024 · 5d54e08 · 5d54e08
1 parent c1a9359
commit 5d54e08
Show file tree

Hide file tree

Showing 10 changed files with 354 additions and 127 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/package.json b/tests/package.json
@@ -1,17 +1,17 @@
 {
-	"name": "tests",
-	"private": true,
-	"scripts": {
-		"test": "vitest run"
-	},
-	"dependencies": {
-		"@msgpack/msgpack": "^2.7.0",
-		"@holochain/client": "^0.17.0-dev.12",
-		"@holochain/tryorama": "^v0.16.0-dev.6",
-		"@holochain-open-dev/signals": "^0.300.0-dev.5",
-		"@holochain-open-dev/utils": "^0.300.0-dev.2",
-		"typescript": "^5.4.5",
-		"vitest": "^1.4.0"
-	},
-	"type": "module"
-}
+  "name": "tests",
+  "private": true,
+  "scripts": {
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@msgpack/msgpack": "^2.7.0",
+    "@holochain/client": "^0.17.0-dev.12",
+    "@holochain/tryorama": "^v0.16.0-dev.6",
+    "@holochain-open-dev/signals": "^0.300.0-dev.7",
+    "@holochain-open-dev/utils": "^0.300.0-dev.2",
+    "typescript": "^5.4.5",
+    "vitest": "^1.4.0"
+  },
+  "type": "module"
+}
diff --git a/ui/demo/index.html b/ui/demo/index.html
@@ -31,17 +31,25 @@
 		<demo-app></demo-app>
 
 		<script type="module">
-			import { sharedStyles } from '@holochain-open-dev/elements';
+			import {
+				sharedStyles,
+				wrapPathInSvg,
+			} from '@holochain-open-dev/elements';
 			import '@holochain-open-dev/elements/dist/elements/display-error.js';
 			import {
 				ProfilesClient,
 				ProfilesStore,
 				profilesStoreContext,
 			} from '@holochain-open-dev/profiles';
 			import '@holochain-open-dev/profiles/dist/elements/profile-prompt.js';
-			import { SignalWatcher, joinAsync } from '@holochain-open-dev/signals';
+			import {
+				Signal,
+				SignalWatcher,
+				joinAsync,
+			} from '@holochain-open-dev/signals';
 			import { AppWebsocket } from '@holochain/client';
 			import { ContextProvider } from '@lit/context';
+			import { mdiBell } from '@mdi/js';
 			import { decode, encode } from '@msgpack/msgpack';
 			import '@shoelace-style/shoelace/dist/components/button/button.js';
 			import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
@@ -78,24 +86,35 @@
 					this._notificationsStore = new NotificationsStore(
 						new NotificationsClient(appAgentClient, 'notifications_test'),
 						{
-							type1: n => {
-								const i = decode(n.entry.content);
-
-								return {
-									title: i.title,
-									body: i.body,
-									onClick: () => console.log('clicked', n),
-								};
+							type1: {
+								title(group) {
+									return new Signal.State({
+										status: 'completed',
+										value: group,
+									});
+								},
+								onClick: group => console.log('clicked', group),
+								contents: n => {
+									const i = decode(n.entry.content);
+
+									return new Signal.State({
+										status: 'completed',
+										value: {
+											iconSrc: wrapPathInSvg(mdiBell),
+											body: i.body,
+										},
+									});
+								},
 							},
 						},
 					);
 				}
 
 				renderContent() {
 					const result = joinAsync([
-						this._notificationsStore.unreadNotifications$,
-						this._notificationsStore.readNotifications$,
-					]).get();
+						this._notificationsStore.unreadNotifications$.get(),
+						this._notificationsStore.readNotifications$.get(),
+					]);
 					const undismissedNotifications = [
 						...Array.from(result.value ? result.value[0].keys() : []),
 						...Array.from(result.value ? result.value[1].keys() : []),
@@ -107,15 +126,15 @@
 							<div>
 								<sl-button
 									@click=${e => {
-										console.log(e);
 										this._notificationsStore.client.createNotification({
 											notification_type: 'type1',
-											notification_group: undefined,
+											notification_group:
+												this.shadowRoot.getElementById('group').value,
 											persistent: true,
 											recipients: [
 												this._notificationsStore.client.client.myPubKey,
 											],
-											content: encode({ title: 'hey!', body: "what's up?" }),
+											content: encode({ body: "what's up?" }),
 										});
 									}}
 									>Create persistent notification</sl-button
@@ -125,12 +144,13 @@
 										console.log(e);
 										this._notificationsStore.client.createNotification({
 											notification_type: 'type1',
-											notification_group: undefined,
+											notification_group:
+												this.shadowRoot.getElementById('group').value,
 											persistent: false,
 											recipients: [
 												this._notificationsStore.client.client.myPubKey,
 											],
-											content: encode({ title: 'hey!', body: "what's up2?" }),
+											content: encode({ body: "what's up2?" }),
 										});
 									}}
 									>Create non-persistent notification</sl-button
@@ -143,6 +163,8 @@
 									>Clear all notifications</sl-button
 								>
 							</div>
+							<span>Group</span>
+							<input id="group" type="text" />
 						</notifications-context>
 					`;
 				}

diff --git a/ui/package.json b/ui/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@holochain-open-dev/elements": "^0.300.0-dev.1",
     "@holochain-open-dev/profiles": "github:holochain-open-dev/profiles#0ef5ce9c9e1a5550402fd16ccd19f338d3c61c47&path:ui",
-    "@holochain-open-dev/signals": "^0.300.0-dev.5",
+    "@holochain-open-dev/signals": "^0.300.0-dev.7",
     "@holochain-open-dev/utils": "^0.300.0-dev.2",
     "@holochain/client": "^0.17.0-dev.12",
     "@lit/context": "^1.0.0",

diff --git a/ui/src/elements/my-notifications-icon-button.ts b/ui/src/elements/my-notifications-icon-button.ts
@@ -31,9 +31,9 @@ export class MyNotificationsIconButton extends SignalWatcher(LitElement) {
 
 	render() {
 		const result = joinAsync([
-			this.notificationsStore.unreadNotifications$,
-			this.notificationsStore.readNotifications$,
-		]).get();
+			this.notificationsStore.unreadNotifications$.get(),
+			this.notificationsStore.readNotifications$.get(),
+		]);
 
 		switch (result.status) {
 			case 'pending':
@@ -69,7 +69,7 @@ export class MyNotificationsIconButton extends SignalWatcher(LitElement) {
 							${unreadNotifications.size + readNotifications.size > 0
 								? html`
 										<sl-badge
-											style="position: absolute; left: 20px; bottom: -4px; z-index: 1000"
+											style="position: absolute; left: 16px; top: 0px; z-index: 1000"
 											pill
 											.pulse=${unreadNotifications.size > 0}
 											>${unreadNotifications.size +