feat: update user profile

ldclabs · Sep 11, 2024 · d0d3a2e · d0d3a2e
1 parent 444642f
commit d0d3a2e
Show file tree

Hide file tree

Showing 5 changed files with 315 additions and 74 deletions.
diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelCreateModel.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelCreateModel.svelte
@@ -24,6 +24,7 @@
   // Props
   /** Exposes parent props to this component. */
   export let parent: SvelteComponent
+  export let channelName: string = ''
   export let add_managers: [Principal, Uint8Array | null][] = []
 
   const modalStore = getModalStore()
@@ -35,14 +36,14 @@
   let stateInfo: Readable<StateInfo>
   let myInfo: Readable<UserInfo>
 
-  let validating = false
-  let submitting = false
-  let availablePandaBalance = 0n
-
-  let nameInput = ''
+  let nameInput = channelName
   let descriptionInput = ''
   let amount = 0n
 
+  let validating = nameInput.trim() !== ''
+  let submitting = false
+  let availablePandaBalance = 0n
+
   function checkInput() {
     const name = nameInput.trim()
     if (!name) {

diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte
@@ -182,12 +182,14 @@
       start,
       start + 20
     )
-    let last = 0
+
     if (messages.length > 0) {
-      last = messages.at(-1)!.id
       addMessageInfos(messages)
     }
+
     bottomLoading = false
+    await tick()
+    const last = $messageFeed.at(-1)?.id || latestMessageId
 
     if (last >= latestMessageId && !$latestMessage) {
       latestMessageId = last
@@ -210,13 +212,21 @@
         messageStart = channelInfo.message_start
         latestMessageId = channelInfo.latest_message_id
         lastRead = channelInfo.my_setting.last_read
+        if (!lastRead) {
+          lastRead = latestMessageId
+        }
         channelAPI = await myState.api.channelAPI(canister)
         dek = await myState.decryptChannelDEK(channelInfo)
         await loadPrevMessages(messageStart, lastRead + 1)
         await tick()
         scrollIntoView(lastRead)
 
         await loadNextMessages(lastRead + 1)
+        // no scroll
+        if (elemChat.scrollTop == 0) {
+          lastRead = $messageFeed.at(-1)!.id
+          debouncedUpdateMyLastRead()
+        }
       } else {
         goto('/_/messages')
       }
@@ -242,6 +252,7 @@
       inMoveUpViewport: (els) => {
         const [_canister, _channel, mid] = els.at(-1)!.id.split(':')
         const messageId = parseInt(mid || '')
+
         if (messageId > lastRead) {
           lastRead = messageId
           myState.freshMyChannelSetting(canister, id, { last_read: messageId })
@@ -266,6 +277,12 @@
     if (info) {
       latestMessageId = info.id
       addMessageInfos([info])
+      tick().then(() => {
+        if (elemChat.scrollTop == 0) {
+          lastRead = $messageFeed.at(-1)!.id
+          debouncedUpdateMyLastRead()
+        }
+      })
     }
   }
 </script>
@@ -280,7 +297,7 @@
   >
     <div class="grid justify-center">
       <span
-        class="text-panda/50 transition duration-700 ease-in-out {topLoading
+        class="text-panda/50 transition duration-300 ease-out {topLoading
           ? 'visible scale-125'
           : 'invisible scale-0'}"><Loading /></span
       >
@@ -358,7 +375,7 @@
     {/each}
     <div class="grid justify-center">
       <span
-        class="text-panda/50 transition duration-700 ease-in-out {bottomLoading
+        class="text-panda/50 transition duration-300 ease-out {bottomLoading
           ? 'visible scale-125'
           : 'invisible scale-0'}"><Loading /></span
       >

diff --git a/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte b/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte
@@ -23,7 +23,7 @@
 
   async function onChatBack() {
     channelsListActive = true
-    await sleep(400)
+    await sleep(300)
     goto('/_/messages')
   }
 
@@ -40,7 +40,7 @@
     class="relative h-full w-full sm:grid sm:grid-cols-[220px_1fr] md:grid-cols-[280px_1fr] lg:grid-cols-[300px_1fr]"
   >
     <div
-      class="channels-list transition duration-500 ease-out {channelsListActive
+      class="channels-list transition duration-300 ease-out {channelsListActive
         ? ''
         : 'max-sm:-translate-x-full'} grid grid-rows-[1fr_auto] border-r border-surface-500/30 bg-white max-sm:shadow-sm sm:rounded-tl-2xl"
     >