fix bind UX, and add we notification

holochain-apps · Jan 23, 2024 · 3482250 · 3482250
1 parent 696fdb0
commit 3482250
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 35 deletions.
diff --git a/ui/src/AboutDialog.svelte b/ui/src/AboutDialog.svelte
@@ -72,7 +72,7 @@
 </script>
 
 
-<sl-dialog label="KanDo!: UI v0.8.15 for DNA v0.7.0" bind:this={dialog} width={600} >
+<sl-dialog label="KanDo!: UI v0.8.16 for DNA v0.7.0" bind:this={dialog} width={600} >
     <div class="about">
         <p>KanDo! is a demonstration Holochain app built by the Holochain Foundation.</p>
         <p> <b>Developers:</b>

diff --git a/ui/src/AttachmentsBind.svelte b/ui/src/AttachmentsBind.svelte
@@ -4,47 +4,90 @@
   import type { KanDoStore } from "./store";
   import type { Board } from "./board";
   import SvgIcon from "./SvgIcon.svelte";
+  import type { AppletInfo, AttachmentType } from "@lightningrodlabs/we-applet";
+  import { HoloHashMap, type EntryHashMap } from "@holochain-open-dev/utils";
+  import type { EntryHash } from "@holochain/client";
+  import { hashEqual } from "./util";
 
   export let activeBoard: Board
 
   const dispatch = createEventDispatcher()
   const { getStore } :any = getContext("store");
   let store: KanDoStore = getStore();
-  let attachmentTypes = Array.from(store.weClient.attachmentTypes.entries())
-  export const refresh = () => {
+
+  type AppletTypes = {
+    appletName: string,
+    attachmentTypes: Record<string,AttachmentType>
+  }
+
+  type Groups = {
+    logo_src: string,
+    name: string,
+  }
+
+  let groups: HoloHashMap<EntryHash, Groups> = new HoloHashMap
+  let appletInfos: HoloHashMap<EntryHash, AppletInfo> = new HoloHashMap
+  $: attachmentTypes= []
+  $: groups
+
+  export const refresh = async () => {
     attachmentTypes = Array.from(store.weClient.attachmentTypes.entries())
+    groups = new HoloHashMap<EntryHash, Groups>
+    appletInfos = new HoloHashMap
+    for (const [hash, aType] of attachmentTypes) {
+        let appletInfo = appletInfos.get(hash)
+        if (!appletInfo) {
+            appletInfo = await store.weClient.appletInfo(hash)
+            appletInfos.set(hash, appletInfo)
+        } 
+        for (const groupHash of appletInfo.groupsIds) {
+            let groupTypes = store.weClient.attachmentTypes.get(groupHash)
+            if (!groupTypes) {
+                const profile = await store.weClient.groupProfile(groupHash)
+                groups.set(groupHash, {
+                    logo_src: profile.logo_src,
+                    name: profile.name,
+                })
+            }
+        }
+    }
+    groups = groups
+    attachmentTypes = attachmentTypes
   }  
+
 </script>
 
 <div>
-    <h3>Create Bound Item:</h3>
-    {#each attachmentTypes as [hash, record]}
-        <div>
-        {#await store.weClient.appletInfo(hash)}
-        ...
-        {:then appletInfo}
-            {#each appletInfo.groupsIds as groupHash} 
-                {#await store.weClient.groupProfile(groupHash)}...
-                {:then profile}
-                    <sl-icon src={profile.logo_src}></sl-icon> <strong>{profile.name}</strong>
-                {:catch error}
-                    {error}
-                {/await}
-            {/each}
-
-            {appletInfo.appletName}:
-        {:catch error}
-            {error}
-        {/await}
-        {#each Object.values(record) as aType}
-        <sl-icon src={aType.icon_src}></sl-icon>{aType.label}
-        <button class="control" on:click={async ()=>{
-            const hrl = await aType.create({hrl:[store.dnaHash,activeBoard.hash],context:undefined})
-            dispatch("add-binding",hrl)
-            }} >          
-            <SvgIcon icon=faPlus size=12/>
-        </button>
-        {/each}
+    <h3>Create Bound Item From:</h3> 
+    {#each Array.from(groups.entries()) as [groupHash, group]}
+        <div style="display:flex;flex-direction:column">
+            <div style="display:flex;align-items:center;">
+                <img width="16" style="margin-right:4px" src="{group.logo_src}"/> <strong style="font-size:105%;margin-right:4px">{group.name}:</strong>
+            </div>
+            <div style="margin-left: 20px;display:flex; flex-wrap:wrap">
+                {#each Array.from(store.weClient.attachmentTypes.entries()) as [appletHash, record]}
+                    {@const appletInfo = appletInfos.get(appletHash)}
+                    {#if appletInfo.groupsIds.find(id=>hashEqual(id,groupHash))}
+                        <div style="display:flex;align-items:center;margin-right:15px">
+                            <strong style="margin-right:5px;">{appletInfo.appletName}: </strong>
+
+                            {#each Object.values(record) as aType,i}
+                            <div style="display:flex;align-items:center;">
+                                <sl-icon style="margin-right:3px" src={aType.icon_src}></sl-icon>{aType.label}
+                                <sl-button size="small" circle style="margin-left:3px" on:click={async ()=>{
+                                    const hrl = await aType.create({hrl:[store.dnaHash,activeBoard.hash],context:undefined})
+                                    dispatch("add-binding",hrl)
+                                    }} >          
+                                    <SvgIcon icon=faPlus size=10/>
+                                </sl-button>
+                                {#if i>0}<span style="margin-left:5px">,</span>{/if}
+                            </div>
+                            {/each}
+                        </div>
+                    {/if}
+                {/each}
+            </div>
+
         </div>
     {/each}
 </div>

diff --git a/ui/src/boardList.ts b/ui/src/boardList.ts
@@ -7,6 +7,8 @@ import type { ProfilesStore } from "@holochain-open-dev/profiles";
 import { cloneDeep } from "lodash";
 import { Board, type BoardDelta, type BoardState } from "./board";
 import { hashEqual } from "./util";
+import type { WeClient } from "@lightningrodlabs/we-applet";
+import { SeenType } from "./store";
 
 export enum BoardType {
     active = "active",
@@ -39,8 +41,36 @@ export class BoardList {
         const docStore = this.synStore.documents.get(documentHash)
 
         const board = pipe(docStore.allWorkspaces,
-            workspaces => 
-                new Board(docStore,  new WorkspaceStore(docStore, Array.from(workspaces.keys())[0]))
+            workspaces => {
+                const board = new Board(docStore,  new WorkspaceStore(docStore, Array.from(workspaces.keys())[0]))
+                // TODO: fix once we know if our applet is in front or not.
+                if (this.weClient) {
+                    board.workspace.tip.subscribe((tip)=>{
+                        if (tip.status=="complete") {
+
+                            const tipRecord = tip.value
+                            const tipB64 = encodeHashToBase64(tipRecord.entryHash)
+                            const key = `${SeenType.Tip}:${board.hashB64}`
+                            const seenTipB64 = localStorage.getItem(key)
+                            const activeBoard = get (this.activeBoard)
+
+                            if ((tipB64 != seenTipB64) && (!activeBoard || (encodeHashToBase64(activeBoard.hash) != board.hashB64))) {
+                                console.log("updated when not active, notifying we")
+                                this.weClient.notifyWe([{
+                                    title: `Board name changed`,
+                                    body: "",
+                                    notification_type: "change",
+                                    icon_src: undefined,
+                                    urgency: "low",
+                                    timestamp: Date.now()
+                                }
+                                ])
+                            }
+                        }
+                    })
+                }
+                return board
+            }
         )
         const latestState = pipe(board, 
             board => board.workspace.latestSnapshot
@@ -79,7 +109,7 @@ export class BoardList {
     allAgentBoards: AsyncReadable<ReadonlyMap<AgentPubKey, Array<BoardAndLatestState>>>
     allAuthorAgents: AsyncReadable<AgentPubKey[]>
 
-    constructor(public profilseStore: ProfilesStore, public synStore: SynStore) {
+    constructor(public profilseStore: ProfilesStore, public synStore: SynStore, public weClient : WeClient) {
         this.allAgentBoards = pipe(this.profilseStore.agentsWithProfile,
             agents=>{
                 console.log("allAgentBoards")

diff --git a/ui/src/store.ts b/ui/src/store.ts
@@ -85,7 +85,7 @@ export class KanDoStore {
           this.zomeName
         );
         this.synStore = new SynStore(new SynClient(this.client,this.roleName,this.zomeName))
-        this.boardList = new BoardList(profilesStore, this.synStore)
+        this.boardList = new BoardList(profilesStore, this.synStore, weClient)
         this.boardList.activeBoard.subscribe((board)=>{
             if (this.unsub) {
                 this.unsub()