chore: improve ic_message_frontend

ldclabs · Nov 13, 2024 · 882bf4e · 882bf4e
1 parent 91a4890
commit 882bf4e
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 78 deletions.
diff --git a/src/ic_message_frontend/package.json b/src/ic_message_frontend/package.json
@@ -82,5 +82,5 @@
     "test": "vitest run"
   },
   "type": "module",
-  "version": "2.6.7"
+  "version": "2.6.8"
 }
diff --git a/src/ic_message_frontend/src/lib/components/messages/ChannelFileCard.svelte b/src/ic_message_frontend/src/lib/components/messages/ChannelFileCard.svelte
@@ -125,7 +125,7 @@
     </div>
   {/if}
   <div class="flex w-full flex-row items-center justify-center px-4">
-    <p class="text-pretty break-all py-2"><span>{file.name}</span></p>
+    <p class="break-word text-pretty py-2"><span>{file.name}</span></p>
     <button
       type="button"
       class="btn btn-sm text-surface-500 hover:text-black dark:hover:text-white"

diff --git a/src/ic_message_frontend/src/lib/components/messages/ChannelMessages.svelte b/src/ic_message_frontend/src/lib/components/messages/ChannelMessages.svelte
@@ -573,6 +573,22 @@
   )
 </script>
 
+{#snippet msgDetail(msg: MessageInfo)}
+  {#if msg.error}
+    <p class="w-full text-pretty px-4 py-2 text-sm">{msg.error}</p>
+  {:else}
+    <pre class="icpanda-message break-word min-h-4 w-full text-pretty px-4 py-2"
+      >{msg.message}</pre
+    >
+  {/if}
+  {#if msg.detail}
+    {@const file = msg.detail.asFile()}
+    {#if file && dek}
+      <ChannelFileCard {myState} {file} {dek} {canister} {id} />
+    {/if}
+  {/if}
+{/snippet}
+
 <div
   class="grid h-[calc(100dvh-120px)] grid-rows-[1fr_auto] md:h-[calc(100dvh-60px)]"
 >
@@ -660,22 +676,7 @@
                     ? 'bg-transparent text-xs'
                     : 'bg-white'}"
                 >
-                  {#if msg.error}
-                    <p class="w-full text-pretty px-4 py-2 text-sm"
-                      >{msg.error}</p
-                    >
-                  {:else}
-                    <pre
-                      class="icpanda-message min-h-4 w-full text-pretty break-all px-4 py-2"
-                      >{msg.message}</pre
-                    >
-                  {/if}
-                  {#if msg.detail}
-                    {@const file = msg.detail.asFile()}
-                    {#if file && dek}
-                      <ChannelFileCard {myState} {file} {dek} {canister} {id} />
-                    {/if}
-                  {/if}
+                  {@render msgDetail(msg)}
                 </div>
               </div>
             </div>
@@ -714,26 +715,7 @@
                     {/if}
                   </div>
                   <div class="max-h-[600px] overflow-auto overscroll-auto">
-                    {#if msg.error}
-                      <p class="text-pretty px-4 py-2 text-sm">{msg.error}</p>
-                    {:else}
-                      <pre
-                        class="icpanda-message min-h-4 w-full text-pretty break-all px-4 py-2"
-                        >{msg.message}</pre
-                      >
-                    {/if}
-                    {#if msg.detail}
-                      {@const file = msg.detail.asFile()}
-                      {#if file && dek}
-                        <ChannelFileCard
-                          {myState}
-                          {file}
-                          {dek}
-                          {canister}
-                          {id}
-                        />
-                      {/if}
-                    {/if}
+                    {@render msgDetail(msg)}
                   </div>
                 </div>
               </div>
@@ -798,7 +780,7 @@
           </div>
         {:else if uploading}
           <div class="btn btn-sm truncate px-2">
-            <span class="max-w-52 text-pretty break-all"
+            <span class="break-word max-w-52 text-pretty"
               >{`${uploading.name}, ${getBytesString(uploading.filled)}/${getBytesString(uploading.size || uploading.filled)}`}</span
             >
             <span class="*:size-5">
@@ -815,7 +797,7 @@
       minHeight="40"
       maxHeight="200"
       containerClass=""
-      class="textarea text-pretty break-all border-0 !bg-transparent outline-0 ring-0"
+      class="break-word textarea text-pretty border-0 !bg-transparent outline-0 ring-0"
       name="prompt"
       id="prompt"
       disabled={submitting > 0}

diff --git a/src/ic_message_frontend/src/lib/components/messages/PasswordModal.svelte b/src/ic_message_frontend/src/lib/components/messages/PasswordModal.svelte
@@ -54,7 +54,7 @@
     passwordTip = ''
   }
 
-  function onComfirm() {
+  function onConfirm() {
     submitting = true
 
     toastRun(async () => {
@@ -270,13 +270,13 @@
     <button
       class="variant-filled-primary btn w-full text-white"
       disabled={submitting || !validating}
-      onclick={onComfirm}
+      onclick={onConfirm}
     >
       {#if submitting}
         <span class=""><IconCircleSpin /></span>
         <span>{processingTip}</span>
       {:else}
-        <span>Comfirm</span>
+        <span>Confirm</span>
       {/if}
     </button>
   </footer>

diff --git a/src/ic_message_frontend/src/lib/components/ui/LinkItem.svelte b/src/ic_message_frontend/src/lib/components/ui/LinkItem.svelte
@@ -6,11 +6,11 @@
   import IconQrCode from '$lib/components/icons/IconQrCode.svelte'
   import { clipboard } from '@skeletonlabs/skeleton'
 
+  type OnQrHandler = (qrTitle: string, qrValue: string, qrLogo?: string) => void
+
   interface Props {
     link: Link
-    onQrHandler?:
-      | ((qrTitle: string, qrValue: string, qrLogo?: string) => void)
-      | null
+    onQrHandler?: OnQrHandler | null
   }
 
   let { link, onQrHandler = null }: Props = $props()
@@ -25,6 +25,20 @@
   }
 </script>
 
+{#snippet qrButton(link: Link, onQrHandler: OnQrHandler)}
+  <button
+    class="flex flex-row items-center gap-2"
+    type="button"
+    onclick={(ev) => {
+      ev.preventDefault()
+      ev.stopPropagation()
+      onQrHandler(link.title, link.uri)
+    }}
+  >
+    <span class="text-surface-500 *:size-5"><IconQrCode /></span>
+  </button>
+{/snippet}
+
 {#if link.uri.startsWith('http')}
   <a
     type="button"
@@ -36,24 +50,20 @@
     <span>{link.title}</span>
     <span class="text-surface-500 *:size-5"><IconLink /></span>
     {#if onQrHandler}
-      <button
-        class="flex flex-row items-center gap-2"
-        onclick={(ev) => {
-          ev.preventDefault()
-          ev.stopPropagation()
-          onQrHandler(link.title, link.uri)
-        }}
-      >
-        <span class="text-surface-500 *:size-5"><IconQrCode /></span>
-      </button>
+      {@render qrButton(link, onQrHandler)}
     {/if}
   </a>
 {:else}
-  <button
+  <a
+    type="button"
+    href="/"
     class="bg-surface-hover-token bg-surface-50-900-token flex w-full flex-row items-center justify-center gap-2 text-pretty break-all rounded-lg px-2 py-4"
     use:clipboard={link.uri}
-    onclick={onCopyHandler}
-    disabled={copiedClass != ''}
+    onclick={(ev) => {
+      ev.preventDefault()
+      ev.stopPropagation()
+      onCopyHandler()
+    }}
   >
     <div>{link.title}<span class="ml-2 {copiedClass}">{link.uri}</span></div>
     <span class="text-surface-500 *:size-5"
@@ -64,20 +74,7 @@
       {/if}</span
     >
     {#if onQrHandler}
-      <a
-        class="flex flex-row items-center gap-2"
-        type="button"
-        role="button"
-        href="/"
-        tabindex="0"
-        onclick={(ev) => {
-          ev.preventDefault()
-          ev.stopPropagation()
-          onQrHandler(link.title, link.uri)
-        }}
-      >
-        <span class="text-surface-500 *:size-5"><IconQrCode /></span>
-      </a>
+      {@render qrButton(link, onQrHandler)}
     {/if}
-  </button>
+  </a>
 {/if}
diff --git a/src/ic_message_frontend/src/lib/components/ui/SendTokenForm.svelte b/src/ic_message_frontend/src/lib/components/ui/SendTokenForm.svelte
@@ -224,7 +224,7 @@
       </div>
       <div class="flex flex-row justify-between">
         <span>Available Balance</span>
-        <span class="text-pretty break-all text-right">
+        <span class="break-word text-pretty text-right">
           {txInfo.balance}
           {token.symbol}
         </span>

diff --git a/src/ic_message_frontend/src/lib/components/ui/TextAreaAutosize.svelte b/src/ic_message_frontend/src/lib/components/ui/TextAreaAutosize.svelte
@@ -52,7 +52,7 @@
 <div class="relative !p-0 {containerClass}" class:drag-over={dragOver}>
   <pre
     aria-hidden="true"
-    class="invisible w-full text-pretty break-all px-3 py-2"
+    class="break-word invisible w-full text-pretty px-3 py-2"
     style="min-height: {minHeight}px; max-height: {maxHeight}px"
     >{value + ' '}</pre
   >

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.6.7'
+export const APP_VERSION = '2.6.8'
 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)/+page.svelte b/src/ic_message_frontend/src/routes/(app)/+page.svelte
@@ -120,7 +120,7 @@
     {
       name: 'CaptainOblivious, G.e.D🐉ICP-XTC-BOB, mostly ICP',
       image:
-        'https://pbs.twimg.com/profile_images/1805268628692226048/w2MXQEvm_200x200.jpg',
+        'https://pbs.twimg.com/profile_images/1845911941115428865/3-ZLd1qh_400x400.jpg',
       handle: 'idontpfreely',
       message: `When ICpanda first came around, I admit, i shit on em pretty bad. They've proven to be a highly capable team on the IC. My bad.`,
       messageUrl: 'https://x.com/idontpfreely/status/1838805032596025568'
@@ -142,6 +142,7 @@
       messageUrl: 'https://x.com/Hit_ICP/status/1855463620852814281'
     }
   ]
+  saying_list.reverse()
 
   const { popupOpenOn, popupDestroy } = initPopup({
     target: 'popupNavigationMore'