fix: fix profile page

ldclabs · Oct 12, 2024 · 50cfd0e · 50cfd0e
1 parent 1629645
commit 50cfd0e
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 71 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -20,7 +20,7 @@ opt-level = 's'
 
 [workspace.package]
 edition = "2021"
-version = "2.5.1"
+version = "2.5.2"
 repository = "https://github.com/ldclabs/ic-panda"
 keywords = ["canister", "icp", "panda"]
 categories = ["web-programming"]

diff --git a/src/ic_message_frontend/package.json b/src/ic_message_frontend/package.json
@@ -81,5 +81,5 @@
     "test": "vitest run"
   },
   "type": "module",
-  "version": "2.5.1"
+  "version": "2.5.2"
 }
diff --git a/src/ic_message_frontend/src/lib/components/core/AvatarUploadModal.svelte b/src/ic_message_frontend/src/lib/components/core/AvatarUploadModal.svelte
@@ -13,7 +13,7 @@
     toFixedChunkSizeReadable
   } from '@ldclabs/ic_oss_ts'
   import { Avatar, getModalStore, getToastStore } from '@skeletonlabs/skeleton'
-  import { type SvelteComponent } from 'svelte'
+  import { onDestroy, type SvelteComponent } from 'svelte'
 
   // Props
   /** Exposes parent props to this component. */
@@ -30,6 +30,7 @@
   function handleAvatarUpload(event: CustomEvent) {
     blob = event.detail.blob || null
     if (blob) {
+      croppedUrl && URL.revokeObjectURL(croppedUrl)
       croppedUrl = URL.createObjectURL(blob)
     }
   }
@@ -65,6 +66,10 @@
       modalStore.close()
     }, toastStore)
   }
+
+  onDestroy(() => {
+    croppedUrl && URL.revokeObjectURL(croppedUrl)
+  })
 </script>
 
 <ModalCard {parent}>

diff --git a/src/ic_message_frontend/src/lib/components/messages/LinkEditModal.svelte b/src/ic_message_frontend/src/lib/components/messages/LinkEditModal.svelte
@@ -52,7 +52,7 @@
         type="text"
         name="titleInput"
         minlength="1"
-        maxlength="128"
+        maxlength="120"
         data-1p-ignore
         bind:value={titleInput}
         disabled={submitting}
@@ -66,7 +66,7 @@
         type="text"
         name="uriInput"
         minlength="1"
-        maxlength="128"
+        maxlength="120"
         data-1p-ignore
         bind:value={uriInput}
         disabled={submitting}

diff --git a/src/ic_message_frontend/src/lib/components/messages/MyProfile.svelte b/src/ic_message_frontend/src/lib/components/messages/MyProfile.svelte
@@ -312,7 +312,7 @@
   {@const display = toDisplayUserInfo($myInfo)}
   <section class="h-[calc(100dvh-60px)] w-full overflow-y-auto md:h-dvh">
     <div
-      class="mx-auto flex min-h-full w-full max-w-3xl flex-col items-center gap-1 p-8 pb-20"
+      class="mx-auto flex min-h-full w-full max-w-3xl flex-col items-center gap-1 p-8 pb-12"
     >
       <button
         class="group btn relative p-0 hover:bg-surface-500/50"
@@ -360,18 +360,18 @@
         class="mt-6 flex w-full max-w-xl flex-col items-center justify-center gap-4"
       >
         {#each links as link, i}
-          <div class="relative w-full">
+          <div class="relative w-full pr-[72px]">
             <LinkItem {link} />
             <div
-              class="absolute right-3 top-4 flex flex-row gap-2 text-neutral-500/50"
+              class="absolute right-0 top-1/2 flex -translate-y-1/2 flex-row gap-1 text-neutral-500/50"
             >
               <button
                 type="button"
-                class="hover:text-surface-900-50-token"
+                class="p-1 hover:text-surface-900-50-token"
                 disabled={editLinkSubmitting !== -1}
                 on:click={() => onEditLink(link, i)}
               >
-                <span class="*:size-6">
+                <span class="*:size-5">
                   {#if editLinkSubmitting === i}
                     <IconCircleSpin />
                   {:else}
@@ -381,11 +381,11 @@
               </button>
               <button
                 type="button"
-                class="hover:text-surface-900-50-token"
+                class="p-1 hover:text-surface-900-50-token"
                 disabled={deleteLinkSubmitting !== -1}
                 on:click={() => onDeleteLink(i)}
               >
-                <span class="*:size-6">
+                <span class="*:size-5">
                   {#if deleteLinkSubmitting === i}
                     <IconCircleSpin />
                   {:else}
@@ -516,7 +516,7 @@
       {/if}
       {#if pathname.startsWith('/_/profile') && myState.principal.compareTo(PandaID) !== 'eq'}
         <div
-          class="mx-auto mt-48 flex flex-col items-center space-y-2 self-end text-sm"
+          class="mx-auto mt-24 flex flex-col items-center space-y-2 self-end text-sm"
         >
           <div class="flex flex-row items-center">
             <a

diff --git a/src/ic_message_frontend/src/lib/components/ui/ImageCrop.svelte b/src/ic_message_frontend/src/lib/components/ui/ImageCrop.svelte
@@ -21,6 +21,7 @@
     height: number
   } = { width: 200, height: 200 }
   export let cropShape: 'rect' | 'round' = 'round'
+  export let imageType = 'image/webp'
   export let quality: number = 0.7
 
   let image: string
@@ -67,9 +68,10 @@
 
       canvas.toBlob(
         (blob) => {
+          // default to 'image/webp' or 'image/png'
           blob && dispatch('cropcomplete', { blob })
         },
-        'image/webp',
+        imageType,
         quality
       )
     }

diff --git a/src/ic_message_frontend/src/lib/components/ui/LinkItem.svelte b/src/ic_message_frontend/src/lib/components/ui/LinkItem.svelte
@@ -26,18 +26,18 @@
     class="bg-surface-hover-token bg-surface-50-900-token flex w-full flex-row items-center justify-center gap-2 rounded-lg px-2 py-4"
   >
     <span>{link.title}</span>
-    <span class="*:size-5"><IconLink /></span>
+    <span class="text-surface-500 *:size-5"><IconLink /></span>
   </a>
 {:else}
   <button
-    class="{copiedClass} bg-surface-hover-token bg-surface-50-900-token flex w-full flex-row items-center justify-center gap-2 rounded-lg px-2 py-4"
+    class="bg-surface-hover-token bg-surface-50-900-token flex w-full flex-row items-center justify-center gap-2 rounded-lg px-2 py-4"
     use:clipboard={link.uri}
     on:click={onCopyHandler}
     disabled={copiedClass != ''}
   >
     <span>{link.title}</span>
-    <span>{link.uri}</span>
-    <span class="*:size-5"
+    <span class={copiedClass}>{link.uri}</span>
+    <span class="text-surface-500 *:size-5"
       >{#if copiedClass != ''}
         <IconCheckbox />
       {:else}

diff --git a/src/ic_message_frontend/src/lib/constants.ts b/src/ic_message_frontend/src/lib/constants.ts
@@ -1,6 +1,6 @@
 const src = globalThis.location?.href || ''
 
-export const APP_VERSION = '2.5.1'
+export const APP_VERSION = '2.5.2'
 export const IS_LOCAL = src.includes('localhost') || src.includes('127.0.0.1')
 export const ENV = IS_LOCAL ? 'local' : 'ic'
 export const APP_ORIGIN = IS_LOCAL

diff --git a/src/ic_message_frontend/src/routes/(app)/[username]/+page.svelte b/src/ic_message_frontend/src/routes/(app)/[username]/+page.svelte
@@ -26,52 +26,56 @@
   })
 </script>
 
-<div class="mx-auto flex w-full max-w-3xl flex-col items-center px-4 pb-24">
-  <header
-    class="flex h-[60px] w-full flex-row items-center justify-between px-0 py-2"
+<div class="mx-auto flex min-h-dvh w-full max-w-3xl flex-col">
+  <div
+    class="relative flex w-full flex-[1_0_auto] flex-col items-center px-4 pb-12"
   >
-    <button
-      class="text-surface-900-50-token btn btn-icon hover:scale-125 hover:text-black dark:hover:text-white"
-      on:click={onGobackHandler}><IconArrowLeftSLine /></button
+    <header
+      class="sticky top-0 flex h-[60px] w-full flex-row items-center justify-between px-0 py-2"
     >
-    <button
-      class="text-surface-900-50-token btn btn-icon hover:scale-125 hover:text-black dark:hover:text-white"
-      on:click={onCloseHandler}><IconClose /></button
-    >
-  </header>
-  {#key pageKey}
-    {#if myState}
-      <ProfileDetail userId={username} {myState} />
-    {:else}
-      <div class="placeholder-circle mt-2 w-40 animate-pulse" />
-    {/if}
-  {/key}
-</div>
-<footer
-  id="page-footer"
-  class="text-surface-900-50-token fixed inset-x-0 bottom-0 px-4 py-12"
->
-  <div class="flex h-16 flex-col items-center">
-    <p class="flex flex-row items-center gap-1">
-      <span class="text-sm">© 2024</span>
-      <a class="" href="https://panda.fans" target="_blank"
-        ><img
-          class="w-28"
-          src={isDark
-            ? '/_assets/icpanda-dao-white.svg'
-            : '/_assets/icpanda-dao.svg'}
-          alt="ICPanda DAO"
-        /></a
+      <button
+        class="text-surface-900-50-token btn btn-icon hover:scale-125 hover:text-black dark:hover:text-white"
+        on:click={onGobackHandler}><IconArrowLeftSLine /></button
       >
-    </p>
-    <p class="mt-2 text-center text-sm capitalize antialiased">
-      A decentralized Panda meme brand fully running on the <a
-        class="underline underline-offset-4"
-        href="https://dashboard.internetcomputer.org/sns/d7wvo-iiaaa-aaaaq-aacsq-cai"
-        target="_blank"
+      <button
+        class="text-surface-900-50-token btn btn-icon hover:scale-125 hover:text-black dark:hover:text-white"
+        on:click={onCloseHandler}><IconClose /></button
       >
-        Internet Computer
-      </a> blockchain.
-    </p>
+    </header>
+    {#key pageKey}
+      {#if myState}
+        <ProfileDetail userId={username} {myState} />
+      {:else}
+        <div class="placeholder-circle mt-2 w-40 animate-pulse" />
+      {/if}
+    {/key}
   </div>
-</footer>
+  <footer
+    id="page-footer"
+    class="text-surface-900-50-token shrink-0 px-4 py-12"
+  >
+    <div class="flex h-16 flex-col items-center">
+      <p class="flex flex-row items-center gap-1">
+        <span class="text-sm">© 2024</span>
+        <a class="" href="https://panda.fans" target="_blank"
+          ><img
+            class="w-28"
+            src={isDark
+              ? '/_assets/icpanda-dao-white.svg'
+              : '/_assets/icpanda-dao.svg'}
+            alt="ICPanda DAO"
+          /></a
+        >
+      </p>
+      <p class="mt-2 text-center text-sm capitalize antialiased">
+        A decentralized Panda meme brand fully running on the <a
+          class="underline underline-offset-4"
+          href="https://dashboard.internetcomputer.org/sns/d7wvo-iiaaa-aaaaq-aacsq-cai"
+          target="_blank"
+        >
+          Internet Computer
+        </a> blockchain.
+      </p>
+    </div>
+  </footer>
+</div>
diff --git a/src/ic_message_types/src/profile.rs b/src/ic_message_types/src/profile.rs
@@ -104,15 +104,18 @@ impl UploadImageInput {
         if self.size > CHUNK_SIZE as u64 {
             return Err("invalid size".to_string());
         }
-        if self.content_type != "image/webp" && self.content_type != "image/svg+xml" {
-            return Err("invalid content_type".to_string());
+        match self.content_type.as_str() {
+            "image/webp" | "image/png" | "image/jpeg" | "image/svg+xml" => {}
+            _ => return Err(format!("invalid content_type {}", self.content_type)),
         }
         Ok(())
     }
 
     pub fn filename(&self, name: String) -> String {
         match self.content_type.as_str() {
             "image/webp" => format!("{}.webp", name),
+            "image/png" => format!("{}.png", name),
+            "image/jpeg" => format!("{}.jpg", name),
             "image/svg+xml" => format!("{}.svg", name),
             _ => name,
         }