add unread indicator to boards

holochain-apps · Jan 5, 2024 · 5663c76 · 5663c76
1 parent 13689dd
commit 5663c76
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 14 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.0 for DNA v0.7.0" bind:this={dialog} width={600} >
+<sl-dialog label="KanDo!: UI v0.8.1 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/BoardMenuItem.svelte b/ui/src/BoardMenuItem.svelte
@@ -16,10 +16,18 @@
   let width = 10
 
   $: boardData = store.boardList.boardData2.get(boardHash)
+  $: uiProps = store.uiProps
 
 </script>
-<div class="wrapper" on:click={()=>{dispatch("select")}} >
+<div class="wrapper" on:click={()=>{
+      store.updateTip(boardHash)
+      dispatch("select")
+      }} >
     {#if $boardData.status == "complete"}
+      {#if $uiProps.tips.get(boardHash) != $boardData.value.tip}
+        <div class="unread"></div>
+      {/if}
+
       <div class="board-name">{$boardData.value.latestState.name}</div>
       {#if boardType == BoardType.active}
       <div style="width:100%; display:flex; justify-content:flex-end" bind:clientWidth={width}>
@@ -36,6 +44,15 @@
     {/if}
 </div>
 <style>
+  .unread {
+    margin-right: 4px;
+    width: 0; 
+    height: 0; 
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-left: 10px solid green;
+  }
+
   .wrapper {
     width: 100%;
     border-radius: 50%;

diff --git a/ui/src/KanDoPane.svelte b/ui/src/KanDoPane.svelte
@@ -202,12 +202,14 @@
     return props.labels.includes(type) ? 1 : 0
   };
 
-  const closeBoard = () => {
-    store.closeActiveBoard(false);
+  const closeBoard = async () => {
+    await store.closeActiveBoard(false);
+    store.updateTip(activeBoard.hash)
   };
 
-  const leaveBoard = () => {
-    store.closeActiveBoard(true);
+  const leaveBoard = async () => {
+    await store.closeActiveBoard(true);
+    store.updateTip(activeBoard.hash)
   };
 
   let editBoardDialog

diff --git a/ui/src/boardList.ts b/ui/src/boardList.ts
@@ -20,6 +20,7 @@ export interface TypedHash {
 export interface BoardAndLatestState {
     board: Board,
     latestState: BoardState,
+    tip: EntryHash,
 }
 
 export class BoardList {
@@ -43,7 +44,11 @@ export class BoardList {
         const latestState = pipe(board, 
             board => board.workspace.latestSnapshot
             )
-        return alwaysSubscribed(pipe(joinAsync([board, latestState]), ([board, latestState]) => {return {board,latestState}}))
+        const tip = pipe(board,
+            board => board.workspace.tip
+            )
+
+        return alwaysSubscribed(pipe(joinAsync([board, latestState, tip]), ([board, latestState, tip]) => {return {board,latestState, tip: tip.entryHash}}))
     })
 
     agentBoardHashes: LazyHoloHashMap<AgentPubKey, AsyncReadable<Array<BoardAndLatestState>>> = new LazyHoloHashMap(agent =>

diff --git a/ui/src/store.ts b/ui/src/store.ts
@@ -7,6 +7,7 @@ import {
     encodeHashToBase64,
     type EntryHashB64,
     type AgentPubKey,
+    decodeHashFromBase64,
   } from '@holochain/client';
 import { SynStore,  SynClient, type Commit } from '@holochain-syn/core';
 import { BoardList } from './boardList';
@@ -17,6 +18,7 @@ import { get, writable, type Writable } from "svelte/store";
 import type { ProfilesStore } from '@holochain-open-dev/profiles';
 import type { BoardState } from './board';
 import type { WeClient } from '@lightningrodlabs/we-applet';
+import { HoloHashMap } from '@holochain-open-dev/utils';
 
 
 TimeAgo.addDefaultLocale(en)
@@ -40,7 +42,7 @@ export class KanDoService {
 export interface UIProps {
     showArchived: {[key: string]: boolean},
     showMenu: boolean,
-    recent: Array<EntryHashB64>
+    tips: HoloHashMap<EntryHash,EntryHash>
   }
 
 export class KanDoStore {
@@ -51,11 +53,22 @@ export class KanDoStore {
     updating = false
     synStore: SynStore;
     client: AppAgentClient;
-    uiProps: Writable<UIProps> = writable({
-        showArchived: {},
-        showMenu: true,
-        recent: []
-    })
+    uiProps: Writable<UIProps> 
+
+    updateTip(boardHash: EntryHash) {
+        const boardData = get(this.boardList.boardData2.get(boardHash))
+        if (boardData.status == "complete") {
+            localStorage.setItem(encodeHashToBase64(boardHash), encodeHashToBase64(boardData.value.tip))
+            this.setTip(boardHash, boardData.value.tip)
+        }
+    }
+
+    setTip(boardHash:EntryHash, tip: EntryHash) {
+        this.uiProps.update((n) => {
+            n.tips.set(boardHash,tip)
+            return n
+        })
+    }
 
     setUIprops(props:{}) {
         this.uiProps.update((n) => {
@@ -108,7 +121,18 @@ 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)
+        this.uiProps = writable({
+            showArchived: {},
+            showMenu: true,
+            tips: new HoloHashMap,
+        })
+        for (let i = 0; i < localStorage.length; i++){
+            const boardHashB64 = localStorage.key(i)
+            const tipB64 = localStorage.getItem(boardHashB64)
+            this.setTip(decodeHashFromBase64(boardHashB64), decodeHashFromBase64(tipB64))
+        }
+
     }
 
     getCardGroupName(cardId: uuidv1, state: BoardState) : string  {