From ff015de021453003e9cf8972b1f95e790daa3475 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Wed, 16 Oct 2024 13:06:03 -0400
Subject: [PATCH 1/2] fix(ui): loading image placeholders for me are
 right-aligned

---
 ui/src/routes/conversations/[id]/+page.svelte | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/ui/src/routes/conversations/[id]/+page.svelte b/ui/src/routes/conversations/[id]/+page.svelte
index 18dd7479..19df97cd 100644
--- a/ui/src/routes/conversations/[id]/+page.svelte
+++ b/ui/src/routes/conversations/[id]/+page.svelte
@@ -382,22 +382,21 @@
                   {/if}
                   {#if message.images && message.images.length > 0}
                       {#each message.images as image}
-                        {#if image.status === 'loaded'}
-                          <!-- svelte-ignore a11y-missing-attribute -->
-                          <div class='relative inline {fromMe && 'text-end'}'>
+                        <div class='flex {fromMe ? 'justify-end' : 'justify-start'}'>
+                          {#if image.status === 'loading' || image.status === 'pending'}
+                            <div class='w-20 h-20 bg-surface-800 mb-2 flex items-center justify-center'>
+                              <SvgIcon icon='spinner' color={$modeCurrent ? '%232e2e2e' : 'white'} size='30' />
+                            </div>
+                          {:else if image.status === 'error'}
+                            <div class='w-20 h-20 bg-surface-500 mb-2 flex items-center justify-center'>
+                              <SvgIcon icon='x' color={$modeCurrent ? '%232e2e2e' : 'white'} size='30' />
+                            </div>
+                          {:else if image.status === 'loaded'}
                             <button class='inline max-w-2/3 mb-2' on:click={(e) => handleOpenImageLightbox(e, image.dataURL) }>
-                              <img src={image.dataURL} class="object-cover" />
+                              <img src={image.dataURL} alt={image.name} class="object-cover" />
                             </button>
+                          {/if}
                         </div>
-                        {:else if image.status === 'loading' || image.status === 'pending'}
-                          <div class='w-20 h-20 bg-tertiary-500 mb-2 flex items-center justify-center'>
-                            <SvgIcon icon='spinner' color={$modeCurrent ? '%232e2e2e' : 'white'} size='30' />
-                          </div>
-                        {:else}
-                          <div class='w-20 h-20 bg-tertiary-500 mb-2 flex items-center justify-center'>
-                            <SvgIcon icon='x' color={$modeCurrent ? '%232e2e2e' : 'white'} size='30' />
-                          </div>
-                        {/if}
                       {/each}
                   {/if}
                   <div class="message font-light break-words w-full {fromMe && 'text-end'}">

From a088e0221431d5fa3beab6709e746dd6f3556bcc Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Wed, 16 Oct 2024 13:07:00 -0400
Subject: [PATCH 2/2] fix(ui): type

---
 ui/src/routes/conversations/[id]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/routes/conversations/[id]/+page.svelte b/ui/src/routes/conversations/[id]/+page.svelte
index 19df97cd..bc30edd3 100644
--- a/ui/src/routes/conversations/[id]/+page.svelte
+++ b/ui/src/routes/conversations/[id]/+page.svelte
@@ -242,7 +242,7 @@
     }
   }
 
-  function handleOpenImageLightbox(e: PointerEvent, url: string) {
+  function handleOpenImageLightbox(e: PointerEvent | MouseEvent, url: string) {
     const targetImg = e.target as HTMLImageElement;
     biggerPicture.open({
       items: [