chore: fix some issues

src/ic_panda_frontend/src/lib/canisters/messagechannel.ts

@@ -6,6 +6,7 @@ import {
   type ChannelInfo,
   type ChannelSetting,
   type Message,
+  type StateInfo,
   type UpdateChannelInput,
   type UpdateChannelMemberInput,
   type UpdateMySettingInput,
@@ -22,6 +23,7 @@ export {
   type ChannelInfo,
   type ChannelSetting,
   type Message,
+  type StateInfo,
   type UpdateChannelInput
 } from '$declarations/ic_message_channel/ic_message_channel.did.js'
 
@@ -79,6 +81,11 @@ export class ChannelAPI {
     this.actor = actor
   }
 
+  async get_state(): Promise<StateInfo> {
+    const res = await this.actor.get_state()
+    return unwrapResult(res, 'call get_state failed')
+  }
+
   async add_message(input: AddMessageInput): Promise<AddMessageOutput> {
     const res = await this.actor.add_message(input)
     return unwrapResult(res, 'call add_message failed')

src/ic_panda_frontend/src/lib/components/core/LuckyPoolChart.svelte

@@ -8,7 +8,7 @@
   import { authStore } from '$lib/stores/auth'
   import { shortId } from '$lib/utils/auth'
   import { formatNumber, ICPToken, PANDAToken } from '$lib/utils/token'
-  import { isOnline, isVisible } from '$lib/utils/window'
+  import { isActive } from '$lib/utils/window'
   import { ProgressBar, Tab, TabGroup, Table } from '@skeletonlabs/skeleton'
   import { onMount } from 'svelte'
   import { type Readable } from 'svelte/store'
@@ -74,7 +74,7 @@
 
       while (interval) {
         await new Promise((res) => setTimeout(res, ms))
-        if (isOnline() && isVisible()) {
+        if (isActive()) {
           await luckyPoolAPI?.refreshAllState()
         }
       }

src/ic_panda_frontend/src/lib/components/messages/ChannelCreateModel.svelte

@@ -152,7 +152,7 @@
         maxHeight="120"
         class="textarea rounded-xl border-gray/10 bg-white/20 hover:bg-white/90"
         name="descriptionInput"
-        placeholder="Channel description..."
+        placeholder="Channel description (not encrypted)..."
       />
     </div>
     <hr class="!border-t-1 mx-[-24px] !mt-4 !border-dashed !border-gray/20" />
@@ -165,14 +165,7 @@
         <b>2.</b> A channel can have up to 5 managers and 100 members.
       </p>
       <p class="text-gray/50">
-        <b>3.</b> The channel can store up to 10,000 messages. Once the limit is
-        reached, old messages must be deleted to send new ones.
-      </p>
-      <p class="text-gray/50">
-        <b>4.</b> Each message can be up to 32 KB in size.
-      </p>
-      <p class="text-gray/50">
-        <b>5.</b> Managers can only remove regular members, not other managers. If
+        <b>3.</b> Managers can only remove regular members, not other managers. If
         the last manager leaves, the channel and all messages will be deleted.
       </p>
     </div>

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

@@ -13,7 +13,7 @@
     encodeCBOR,
     type AesGcmKey
   } from '$lib/utils/crypto'
-  import { scrollOnHooks } from '$lib/utils/window'
+  import { isActive, scrollOnHooks } from '$lib/utils/window'
   import {
     getCurrentTimeString,
     toDisplayUserInfo,
@@ -197,7 +197,8 @@
         canister,
         id,
         dek,
-        latestMessageId + 1
+        latestMessageId + 1,
+        isActive
       )
     }
   }
@@ -293,13 +294,13 @@
   <!-- Conversation -->
   <section
     bind:this={elemChat}
-    class="space-y-4 overflow-y-auto p-2 pb-10 md:p-4"
+    class="snap-y snap-mandatory scroll-py-8 space-y-4 overflow-y-auto scroll-smooth p-2 pb-10 md:p-4"
   >
     <div class="grid justify-center">
       <span
         class="text-panda/50 transition duration-300 ease-out {topLoading
           ? 'visible scale-125'
-          : 'invisible scale-0'}"><Loading /></span
+          : 'invisible scale-50'}"><Loading /></span
       >
     </div>
     {#each $messageFeed as msg (msg.id)}
@@ -319,7 +320,7 @@
               <small class="opacity-50">{msg.created_time}</small>
             </header>
             <div
-              class="card max-h-[600px] w-full overflow-auto rounded-tl-none border-none {msg.kind !==
+              class="card max-h-[600px] min-h-12 w-full overflow-auto overscroll-auto rounded-tl-none border-none {msg.kind !==
                 1 && msg.id > lastRead
                 ? 'shadow-md shadow-gold'
                 : ''}  {msg.kind === 1
@@ -349,7 +350,7 @@
               <small class="opacity-50">{msg.created_time}</small>
             </header>
             <div
-              class="card max-h-[600px] w-full overflow-auto rounded-tr-none border-none {msg.kind ===
+              class="card max-h-[600px] min-h-12 w-full overflow-auto overscroll-auto rounded-tr-none border-none {msg.kind ===
               1
                 ? 'bg-transparent text-xs text-gray/60'
                 : 'bg-panda/20'}"

src/ic_panda_frontend/src/lib/components/messages/ChannelSetting.svelte

@@ -225,9 +225,9 @@
 </script>
 
 <div
-  class="grid h-[calc(100dvh-110px)] grid-rows-[auto_auto_1fr] items-start overflow-y-auto bg-gray/5 pb-10 sm:h-[calc(100dvh-140px)]"
+  class="h-[calc(100dvh-110px)] items-start overflow-y-auto bg-gray/5 pb-10 sm:h-[calc(100dvh-140px)]"
 >
-  <section class="mt-0 flex w-full flex-row items-center gap-4 self-start p-4">
+  <section class="mt-4 flex w-full flex-row items-center gap-4 self-start px-4">
     <Avatar
       initials={channelInfo.name}
       border="border-4 border-white"
@@ -255,7 +255,19 @@
       {/if}
     </div>
   </section>
-  <section class="space-y-2 p-4">
+  <section class="mt-2 flex flex-row gap-2 px-4 max-sm:flex-col">
+    <div class="flex flex-row items-center gap-1">
+      <span class="text-sm font-normal text-gray/50">Messages:</span>
+      <span class="font-bold text-panda"
+        >{channelInfo.latest_message_id - channelInfo.message_start + 1}</span
+      >
+    </div>
+    <div class="flex flex-row items-center gap-2">
+      <span class="text-sm font-normal text-gray/50">Gas Balance:</span>
+      <span class="font-bold text-panda">{channelInfo.gas}</span>
+    </div>
+  </section>
+  <section class="mt-4 space-y-2 px-4">
     <div class="mb-2 text-sm opacity-50"><span>My Setting</span></div>
     <div class="flex flex-row items-center gap-4">
       <p>Mute notifications:</p>
@@ -311,11 +323,11 @@
     <div class="flex flex-row items-center gap-4">
       <p>Leave channel:</p>
       <div
-        class="input-group input-group-divider max-w-64 grid-cols-[1fr_auto] bg-gray/5"
+        class="input-group input-group-divider w-64 grid-cols-[1fr_80px] bg-gray/5"
       >
         <input
           type="text"
-          class="h-8 truncate border-gray/10 py-1 leading-8 invalid:input-warning hover:bg-white/90"
+          class="h-8 !w-36 truncate border-gray/10 py-1 leading-8 invalid:input-warning hover:bg-white/90"
           bind:value={leavingWord}
           placeholder="Enter channel name"
         />
@@ -342,7 +354,7 @@
       >
     {/if}
   </section>
-  <section class="p-4">
+  <section class="mt-4 px-4">
     <div class="mb-2 items-center sm:grid sm:grid-cols-[1fr_auto]">
       <span class="text-sm opacity-50">Members</span>
       {#if isManager}

src/ic_panda_frontend/src/lib/components/messages/Home.svelte

@@ -7,6 +7,7 @@
     type MyMessageState
   } from '$src/lib/stores/message'
   import { getModalStore, getToastStore } from '@skeletonlabs/skeleton'
+  import { onMount, tick } from 'svelte'
   import { type Readable } from 'svelte/store'
   import UserRegisterModel from './UserRegisterModel.svelte'
 
@@ -16,11 +17,15 @@
   const toastStore = getToastStore()
   const modalStore = getModalStore()
 
+  let users_total = 0n
+  let names_total = 0n
+  let channels_total = 0n
+  let messages_total = 0n
+
   function getStartedHandler() {
     toastRun(async () => {
       if (myState?.principal.isAnonymous()) {
         const res = await signIn({})
-        myState = await myMessageStateAsync()
         myInfo = myState.info
         if (!$myInfo && res.success == 'ok') {
           modalStore.trigger({
@@ -42,53 +47,112 @@
       }
     }, toastStore)
   }
+
+  onMount(() => {
+    const { abort } = toastRun(async () => {
+      if (!myState) {
+        myState = await myMessageStateAsync()
+      }
+
+      users_total = myState.api.state?.users_total || 0n
+      names_total = myState.api.state?.names_total || 0n
+      await tick()
+
+      const ids = myState.api.state?.channel_canisters || []
+      const states = await Promise.all(
+        ids.map(async (id) => {
+          const api = await myState!.api.channelAPI(id)
+          return await api.get_state()
+        })
+      )
+
+      channels_total = states.reduce((acc, state) => {
+        return acc + (state.channels_total || 0n)
+      }, 0n)
+      messages_total = states.reduce((acc, state) => {
+        return acc + (state.messages_total || 0n)
+      }, 0n)
+    }, toastStore)
+    return abort
+  })
 </script>
 
 <div class="mt-12 max-w-4xl px-4">
-  <p class="text-lg font-normal antialiased">
-    ICPanda Message is a decentralized end-to-end encrypted messaging
-    application fully running on the <a
-      class="font-bold text-secondary-500 underline underline-offset-4"
-      href="https://dashboard.internetcomputer.org/sns/d7wvo-iiaaa-aaaaq-aacsq-cai"
-      target="_blank"
-    >
-      Internet Computer
-    </a> blockchain. Key features:
-  </p>
-  <ul class="mt-4 flex flex-col gap-4 pl-8">
-    <li
-      ><b>End-to-end encryption:</b> All user messages are encrypted using the
-      <a
-        class="font-bold underline underline-offset-4"
-        href="https://datatracker.ietf.org/doc/html/rfc9052"
-        target="_blank">RFC 9052 (COSE)</a
-      > standard on the client side and stored on the ICP blockchain. These messages
-      can only be decrypted on the client side.</li
-    >
-    <li
-      ><b>Multi-user chats:</b> Message channels support one-to-many chats, where
-      a manager can add or remove members and exchange encryption keys. If the last
-      manager leaves the channel, all messages in the channel are deleted.</li
-    >
-    <li
-      ><b>On-chain:</b> It operates entirely as a smart contract on the ICP
-      blockchain, controlled by
-      <a
-        class="font-bold underline underline-offset-4"
+  <div class="">
+    <p class="text-lg font-normal antialiased">
+      ICPanda Message is a decentralized end-to-end encrypted messaging
+      application fully running on the <a
+        class="font-bold text-secondary-500 underline underline-offset-4"
         href="https://dashboard.internetcomputer.org/sns/d7wvo-iiaaa-aaaaq-aacsq-cai"
-        target="_blank">ICPanda DAO</a
-      >, with fully open-source code. It is a trustworthy, secure, verifiable,
-      and unstoppable Web3 application.</li
+        target="_blank"
+      >
+        Internet Computer
+      </a> blockchain. Key features:
+    </p>
+    <ul class="mt-4 flex flex-col gap-4 pl-8">
+      <li
+        ><b>End-to-end encryption:</b> All user messages are encrypted using the
+        <a
+          class="font-bold underline underline-offset-4"
+          href="https://datatracker.ietf.org/doc/html/rfc9052"
+          target="_blank">RFC 9052 (COSE)</a
+        > standard on the client side and stored on the ICP blockchain. These messages
+        can only be decrypted on the client side.</li
+      >
+      <li
+        ><b>Multi-user chats:</b> Message channels support one-to-many chats, where
+        a manager can add or remove members and exchange encryption keys. If the
+        last manager leaves the channel, all messages in the channel are deleted.</li
+      >
+      <li
+        ><b>On-chain:</b> It operates entirely as a smart contract on the ICP
+        blockchain, controlled by
+        <a
+          class="font-bold underline underline-offset-4"
+          href="https://dashboard.internetcomputer.org/sns/d7wvo-iiaaa-aaaaq-aacsq-cai"
+          target="_blank">ICPanda DAO</a
+        >, with fully open-source code. It is a trustworthy, secure, verifiable,
+        and unstoppable Web3 application.</li
+      >
+    </ul>
+  </div>
+  <div
+    class="mt-12 flex max-w-4xl flex-row items-center justify-center gap-6 max-sm:flex-col *:max-sm:w-60"
+  >
+    <button
+      on:click={getStartedHandler}
+      class="bg-slate-950 variant-filled btn w-[320px]"
     >
-  </ul>
-</div>
-<div
-  class="mt-12 flex max-w-4xl flex-row items-center justify-center gap-6 max-sm:flex-col *:max-sm:w-60"
->
-  <button
-    on:click={getStartedHandler}
-    class="bg-slate-950 variant-filled btn w-[320px]"
+      <span class="text-center">Get started</span>
+    </button>
+  </div>
+  <div
+    class="card mt-8 flex flex-col justify-around gap-4 bg-transparent p-8 shadow-lg sm:mt-12 sm:flex-row"
   >
-    <span class="text-center">Get started</span>
-  </button>
+    <div class="flex flex-col items-center">
+      <h3 class="h3 text-[28px] font-bold text-panda">
+        <span class="text-sm font-normal text-gray">Users:</span>
+        {users_total}
+      </h3>
+    </div>
+
+    <div class="flex flex-col items-center">
+      <h3 class="h3 text-[28px] font-bold text-panda">
+        <span class="text-sm font-normal text-gray">Names:</span>
+        {names_total}
+      </h3>
+    </div>
+    <div class="flex flex-col items-center">
+      <h3 class="h3 text-[28px] font-bold text-panda">
+        <span class="text-sm font-normal text-gray">Channels:</span>
+        {channels_total}
+      </h3>
+    </div>
+    <div class="flex flex-col items-center">
+      <h3 class="h3 text-[28px] font-bold text-panda">
+        <span class="text-sm font-normal text-gray">Messages:</span>
+        {messages_total}
+      </h3>
+    </div>
+  </div>
 </div>

src/ic_panda_frontend/src/lib/components/messages/Index.svelte

@@ -22,7 +22,7 @@
 
   async function initState() {
     myState = await myMessageStateAsync()
-    await myState.refreshState()
+    await myState.refreshAllState()
     myInfo = myState.info
     myInfo_ = myInfo as Readable<UserInfo>
     if ($myInfo) {

src/ic_panda_frontend/src/lib/components/messages/MyChannelList.svelte

@@ -4,6 +4,7 @@
   import IconAdd from '$lib/components/icons/IconAdd.svelte'
   import IconNotificationOffLine from '$lib/components/icons/IconNotificationOffLine.svelte'
   import { toastRun } from '$lib/stores/toast'
+  import { isActive } from '$lib/utils/window'
   import {
     myMessageStateAsync,
     type ChannelBasicInfoEx,
@@ -45,7 +46,7 @@
           return
         }
 
-        myState.refreshMyChannels(signal)
+        isActive() && myState.refreshMyChannels(signal)
       }, 10000)
     }, toastStore)
     return abort