chore: improve dMsg frontend

Author: zensh

Cargo.lock

@@ -25,7 +25,7 @@ opt-level = 's'
 
 [workspace.package]
 edition = "2021"
-version = "2.9.2"
+version = "2.9.3"
 repository = "https://github.com/ldclabs/ic-panda"
 keywords = ["canister", "icp", "panda"]
 categories = ["web-programming"]

Cargo.toml

@@ -84,5 +84,5 @@
     "test": "vitest run"
   },
   "type": "module",
-  "version": "2.9.7"
+  "version": "2.9.8"
 }

src/ic_message_frontend/package.json

@@ -194,6 +194,11 @@ export class MessageCanisterAPI {
     return unwrapResult(res, 'call update_my_name failed')
   }
 
+  async update_my_username(username: string): Promise<UserInfo> {
+    const res = await this.actor.update_my_username(username)
+    return unwrapResult(res, 'call update_my_username failed')
+  }
+
   async update_my_ecdh(
     ecdhPub: Uint8Array,
     encryptedECDH: Uint8Array

src/ic_message_frontend/src/lib/canisters/message.ts

@@ -12,7 +12,7 @@
   import type { Principal } from '@dfinity/principal'
   import { Avatar, getToastStore } from '@skeletonlabs/skeleton'
   import { getContext, onMount } from 'svelte'
-  import { readable, type Readable } from 'svelte/store'
+  import { type Readable } from 'svelte/store'
   import ChannelMessages from './ChannelMessages.svelte'
   import ChannelSetting from './ChannelSetting.svelte'
 
@@ -28,20 +28,14 @@
   const { canister, id } = channelId
   const onChatBack = getContext('onChatBack') as () => void
 
-  let channelInfo: Readable<ChannelInfoEx | null> = $state(readable(null))
+  let channelInfo: ChannelInfoEx | null = $state(null)
   let isLoading = $state(true)
   let openMessages = $state(true)
   let switching = $state(false)
   async function onClickChannelSetting() {
     if (!canister) return
     switching = true
-    await Promise.all([
-      async () => {
-        // load latest channel info
-        channelInfo = await myState.loadChannelInfo(canister, id)
-      },
-      sleep(100)
-    ])
+    await sleep(100)
     openMessages = !openMessages
     switching = false
   }
@@ -51,25 +45,25 @@
       async (signal: AbortSignal) => {
         if (canister) {
           channelInfo = await myState.loadChannelInfo(canister, id)
-          openMessages = !!$channelInfo?._kek
+          openMessages = !!channelInfo._kek
           if (openMessages) {
             try {
               // try to decrypt channel DEK
-              await myState.decryptChannelDEK($channelInfo!)
+              await myState.decryptChannelDEK(channelInfo)
             } catch (_e) {
               openMessages = false
             }
           }
           isLoading = false
-          return channelInfo
+          return true
         }
-        return null
+        return false
       },
       toastStore
     )
 
-    onfinally((channel) => {
-      if (!channel) {
+    onfinally((hasChannel) => {
+      if (!hasChannel) {
         goto('/_/messages')
       }
     })
@@ -89,18 +83,18 @@
       >
     </div>
     <div class="flex flex-row items-center gap-2">
-      {#if $channelInfo}
+      {#if channelInfo}
         <Avatar
-          initials={$channelInfo.name}
-          src={$channelInfo.image}
-          background={$channelInfo.image ? '' : 'bg-panda'}
+          initials={channelInfo.name}
+          src={channelInfo.image}
+          background={channelInfo.image ? '' : 'bg-panda'}
           fill="fill-white"
           width="w-10"
         />
         <span class="flex-1 text-start">
-          {$channelInfo.name +
+          {channelInfo.name +
             ' (' +
-            ($channelInfo.managers.length + $channelInfo.members.length) +
+            (channelInfo.managers.length + channelInfo.members.length) +
             ')'}
         </span>
       {:else}
@@ -119,7 +113,7 @@
       disabled={switching}
       onclick={onClickChannelSetting}
     >
-      {#if channelInfo && openMessages && ($channelInfo?.ecdh_request || []).length > 0}
+      {#if channelInfo && openMessages && (channelInfo?.ecdh_request || []).length > 0}
         <span class="badge-icon z-10 size-2 bg-error-500"></span>
       {/if}
       <span>
@@ -133,14 +127,14 @@
   </header>
   {#if isLoading}
     <Loading />
-  {:else if $channelInfo}
+  {:else if channelInfo}
     {#if openMessages}
-      <ChannelMessages {myState} {myInfo} channelInfo={$channelInfo} />
+      <ChannelMessages {myState} {myInfo} bind:channelInfo />
     {:else}
       <ChannelSetting
         {myState}
         {myInfo}
-        channelInfo={$channelInfo}
+        bind:channelInfo
         close={() => (openMessages = true)}
       />
     {/if}

src/ic_message_frontend/src/lib/components/messages/ChannelDetail.svelte

@@ -442,12 +442,14 @@
       async (signal: AbortSignal, abortingQue: (() => void)[]) => {
         abortingQue.push(popupDestroy)
 
-        if (
-          !channelInfo._kek ||
-          channelInfo._sync_at < Date.now() - 5 * 60 * 1000
-        ) {
+        if (!channelInfo._kek) {
           channelInfo = await myState.refreshChannel(channelInfo)
+        } else if (channelInfo._sync_at < Date.now() - 60 * 1000) {
+          myState.loadChannelInfo(canister, id).then((info) => {
+            channelInfo = info
+          })
         }
+
         hasKEK = !!channelInfo._kek
         if (!hasKEK) {
           return

src/ic_message_frontend/src/lib/components/messages/ChannelMessages.svelte

@@ -44,10 +44,8 @@
     close: () => void
   }
 
-  let props: Props = $props()
-  let { myState, myInfo, close } = props
+  let { myState, myInfo, close, channelInfo = $bindable() }: Props = $props()
 
-  let channelInfo = $state(props.channelInfo)
   const toastStore = getToastStore()
   const modalStore = getModalStore()
   const members: Writable<DisplayUserInfoEx[]> = writable([])
@@ -315,7 +313,7 @@
 
   onMount(() => {
     const { abort } = toastRun(async (signal: AbortSignal) => {
-      channelInfo = await myState.refreshChannel(channelInfo, true)
+      channelInfo = await myState.refreshChannel(channelInfo)
       try {
         await myState.decryptChannelDEK(channelInfo)
         validKEK = true
@@ -340,7 +338,7 @@
         onclick={onClickMyECDH}
         disabled={myECDHSubmitting}
       >
-        <span>Accept encryption key and start chat</span>
+        <span>Accept and start chat</span>
         {#if myECDHSubmitting}
           <span class=" text-panda *:size-4">
             <IconCircleSpin />
@@ -464,30 +462,24 @@
       </span>
     </div>
     <div class="flex flex-row items-center gap-4">
-      <p>Request encryption key:</p>
+      <p>Encryption key:</p>
       {#if channelInfo.my_setting.ecdh_remote.length > 0}
         <button
           type="button"
           class="variant-filled-success btn btn-sm"
           onclick={onClickMyECDH}
-          disabled={myECDHSubmitting}
-          ><span>Key received, accept it</span></button
+          disabled={myECDHSubmitting}><span>Accept</span></button
         >
       {:else if channelInfo.my_setting.ecdh_pub.length > 0}
-        <span class="text-sm opacity-50"
-          >Request sent, waiting for a manager share key</span
-        >
+        <span class="text-sm opacity-50">Waiting for the grant</span>
       {:else if validKEK}
-        <span class="text-sm opacity-50"
-          >Key already exists, no action needed</span
-        >
+        <span class="text-sm opacity-50">Existed</span>
       {:else}
         <button
           type="button"
           class="variant-filled-error btn btn-sm"
           onclick={onClickMyECDH}
-          disabled={myECDHSubmitting}
-          ><span>No key to decrypt messages, make a request</span></button
+          disabled={myECDHSubmitting}><span>Request key</span></button
         >
       {/if}
       <span class="text-panda *:size-4 {myECDHSubmitting ? '' : 'invisible'}">
@@ -503,6 +495,7 @@
           type="text"
           class="border-gray/10 h-8 truncate py-1 leading-8 invalid:input-warning"
           bind:value={leavingWord}
+          onfocus={() => (leavingWord = channelInfo.name)}
           placeholder="channel name"
         />
         <button
@@ -564,7 +557,7 @@
             !hasExchangeKeys}
         >
           <span class="*:size-4"><IconExchange2Line /></span>
-          <span>Exchange keys</span>
+          <span>Grant requests</span>
           <span
             class="text-panda *:size-4 {adminExchangeKeysSubmitting
               ? ''