From 712829ad8ebf0628ff035fc3a384074aa3d7d33f Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 8 Sep 2025 21:50:37 +0200
Subject: [PATCH] Add profile pictures and improve modal animations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add ProfilePicture component with fallback to user initials
- Integrate profile pictures in dashboard recent activity dialog layout
- Add profile pictures to payments list and split details
- Fix modal animation overshoot by using fixed positioning and smooth slide-in
- Add fade-in animation for modal content with proper sequencing

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/PaymentModal.svelte        |  18 +-
 src/lib/components/ProfilePicture.svelte      |  66 +++++++
 src/routes/cospend/+layout.svelte             |  47 +++--
 src/routes/cospend/+page.svelte               | 161 +++++++++++++-----
 src/routes/cospend/payments/+page.svelte      |  21 ++-
 .../cospend/payments/view/[id]/+page.svelte   |  18 +-
 6 files changed, 263 insertions(+), 68 deletions(-)
 create mode 100644 src/lib/components/ProfilePicture.svelte

diff --git a/src/lib/components/PaymentModal.svelte b/src/lib/components/PaymentModal.svelte
index ada3d92..1830113 100644
--- a/src/lib/components/PaymentModal.svelte
+++ b/src/lib/components/PaymentModal.svelte
@@ -2,6 +2,7 @@
   import { onMount, createEventDispatcher } from 'svelte';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import ProfilePicture from './ProfilePicture.svelte';
   
   export let paymentId;
   
@@ -150,10 +151,13 @@
                 {#each payment.splits as split}
                   <div class="split-item" class:current-user={split.username === session?.user?.nickname}>
                     <div class="split-user">
-                      <span class="username">{split.username}</span>
-                      {#if split.username === session?.user?.nickname}
-                        <span class="you-badge">You</span>
-                      {/if}
+                      <ProfilePicture username={split.username} size={24} />
+                      <div class="user-info">
+                        <span class="username">{split.username}</span>
+                        {#if split.username === session?.user?.nickname}
+                          <span class="you-badge">You</span>
+                        {/if}
+                      </div>
                     </div>
                     <div class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
                       {#if split.amount > 0}
@@ -362,6 +366,12 @@
     gap: 0.5rem;
   }
 
+  .split-user .user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   .username {
     font-weight: 500;
     color: #333;
diff --git a/src/lib/components/ProfilePicture.svelte b/src/lib/components/ProfilePicture.svelte
new file mode 100644
index 0000000..752a897
--- /dev/null
+++ b/src/lib/components/ProfilePicture.svelte
@@ -0,0 +1,66 @@
+<script>
+  export let username;
+  export let size = 40; // Default size in pixels
+  export let alt = '';
+
+  let imageError = false;
+
+  $: profileUrl = `https://bocken.org/static/user/full/${username}.webp`;
+  $: altText = alt || `${username}'s profile picture`;
+
+  function handleError() {
+    imageError = true;
+  }
+
+  function getInitials(name) {
+    if (!name) return '?';
+    return name.split(' ')
+      .map(word => word.charAt(0))
+      .join('')
+      .toUpperCase()
+      .substring(0, 2);
+  }
+</script>
+
+<div class="profile-picture" style="width: {size}px; height: {size}px;">
+  {#if !imageError}
+    <img
+      src={profileUrl}
+      alt={altText}
+      on:error={handleError}
+      loading="lazy"
+    />
+  {:else}
+    <div class="fallback">
+      {getInitials(username)}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .profile-picture {
+    border-radius: 50%;
+    overflow: hidden;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .fallback {
+    color: white;
+    font-weight: bold;
+    font-size: 0.75em;
+    text-align: center;
+    line-height: 1;
+  }
+</style>
diff --git a/src/routes/cospend/+layout.svelte b/src/routes/cospend/+layout.svelte
index 03fd8de..88a7120 100644
--- a/src/routes/cospend/+layout.svelte
+++ b/src/routes/cospend/+layout.svelte
@@ -38,38 +38,63 @@
     <slot />
   </div>
   
-  {#if showModal}
-    <div class="side-panel">
-      <PaymentModal {paymentId} on:close={() => showModal = false} />
-    </div>
-  {/if}
+  <div class="side-panel">
+    {#if showModal}
+      <div class="modal-content">
+        <PaymentModal {paymentId} on:close={() => showModal = false} />
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
   .layout-container {
     display: flex;
     min-height: 100vh;
-    transition: all 0.3s ease;
   }
 
   .main-content {
     flex: 1;
-    transition: all 0.3s ease;
+    transition: margin-right 0.3s ease-out;
   }
 
   .layout-container.has-modal .main-content {
-    flex: 0 0 60%;
+    margin-right: 400px;
   }
 
   .side-panel {
-    flex: 0 0 40%;
-    min-width: 400px;
-    max-width: 500px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 400px;
+    height: 100vh;
     background: white;
     border-left: 1px solid #dee2e6;
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     z-index: 100;
     overflow-y: auto;
+    transform: translateX(100%);
+    transition: transform 0.3s ease-out;
+  }
+
+  .layout-container.has-modal .side-panel {
+    transform: translateX(0);
+  }
+
+  .modal-content {
+    opacity: 0;
+    animation: fadeIn 0.3s ease-out 0.1s forwards;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 
   @media (max-width: 768px) {
diff --git a/src/routes/cospend/+page.svelte b/src/routes/cospend/+page.svelte
index 788b86e..b736695 100644
--- a/src/routes/cospend/+page.svelte
+++ b/src/routes/cospend/+page.svelte
@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { pushState } from '$app/navigation';
+  import ProfilePicture from '$lib/components/ProfilePicture.svelte';
 
   export let data; // Used by the layout for session data
 
@@ -96,39 +97,44 @@
     {#if balance.recentSplits && balance.recentSplits.length > 0}
       <div class="recent-activity">
         <h2>Recent Activity</h2>
-        <div class="activity-list">
+        <div class="activity-dialog">
           {#each balance.recentSplits as split}
-            <a 
-              href="/cospend/payments/view/{split.paymentId?._id}" 
-              class="activity-item"
-              on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
-            >
-              <div class="activity-info">
-                <div class="activity-header">
-                  <strong class="payment-title">{split.paymentId?.title || 'Payment'}</strong>
-                  <div class="activity-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
-                    {#if split.amount > 0}
-                      -{formatCurrency(split.amount)}
-                    {:else if split.amount < 0}
-                      +{formatCurrency(split.amount)}
-                    {:else}
-                      even
+            <div class="activity-message" class:is-me={split.paymentId?.paidBy === data.session?.user?.nickname}>
+              <div class="message-content">
+                <ProfilePicture username={split.paymentId?.paidBy || 'Unknown'} size={36} />
+                <a 
+                  href="/cospend/payments/view/{split.paymentId?._id}" 
+                  class="activity-bubble"
+                  on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
+                >
+                  <div class="activity-header">
+                    <div class="user-info">
+                      <strong class="payment-title">{split.paymentId?.title || 'Payment'}</strong>
+                      <span class="username">Paid by {split.paymentId?.paidBy || 'Unknown'}</span>
+                    </div>
+                    <div class="activity-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
+                      {#if split.amount > 0}
+                        -{formatCurrency(split.amount)}
+                      {:else if split.amount < 0}
+                        +{formatCurrency(split.amount)}
+                      {:else}
+                        even
+                      {/if}
+                    </div>
+                  </div>
+                  <div class="payment-details">
+                    <div class="payment-meta">
+                      <span class="payment-date">{formatDate(split.createdAt)}</span>
+                    </div>
+                    {#if split.paymentId?.description}
+                      <div class="payment-description">
+                        {truncateDescription(split.paymentId.description)}
+                      </div>
                     {/if}
                   </div>
-                </div>
-                <div class="payment-details">
-                  <div class="payment-meta">
-                    <span class="paid-by">Paid by {split.paymentId?.paidBy || 'Unknown'}</span>
-                    <span class="payment-date">{formatDate(split.createdAt)}</span>
-                  </div>
-                  {#if split.paymentId?.description}
-                    <div class="payment-description">
-                      {truncateDescription(split.paymentId.description)}
-                    </div>
-                  {/if}
-                </div>
+                </a>
               </div>
-            </a>
+            </div>
           {/each}
         </div>
       </div>
@@ -277,45 +283,112 @@
     color: #333;
   }
 
-  .activity-list {
+  .activity-dialog {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.75rem;
+    padding: 0.5rem 0;
   }
 
-  .activity-item {
-    display: block;
-    padding: 1rem;
+  .activity-message {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .activity-message.is-me {
+    flex-direction: row-reverse;
+  }
+
+  .message-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .activity-message.is-me .message-content {
+    flex-direction: row-reverse;
+  }
+
+  .activity-bubble {
     background: #f8f9fa;
-    border-radius: 0.5rem;
+    border-radius: 1rem;
+    padding: 1rem;
+    position: relative;
+    border: 1px solid #e9ecef;
     text-decoration: none;
     color: inherit;
+    display: block;
     transition: all 0.2s;
-    border: 1px solid transparent;
+    flex: 1;
   }
 
-  .activity-item:hover {
-    background: #e9ecef;
-    border-color: #1976d2;
+  .activity-message.is-me .activity-bubble {
+    background: #e3f2fd;
+    border-color: #2196f3;
+  }
+
+  .activity-bubble:hover {
     transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
-  .activity-info {
-    width: 100%;
+  .activity-bubble::before {
+    content: '';
+    position: absolute;
+    top: 1rem;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+  }
+
+  .activity-bubble::before {
+    left: -15px;
+    border-right-color: #f8f9fa;
+  }
+
+  .activity-message.is-me .activity-bubble::before {
+    left: auto;
+    right: -15px;
+    border-left-color: #e3f2fd;
+    border-right-color: transparent;
   }
 
   .activity-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
   }
 
   .payment-title {
     color: #333;
     font-size: 1.1rem;
-    margin-right: 1rem;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .username {
+    color: #666;
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+
+  .you-badge {
+    background-color: #1976d2;
+    color: white;
+    padding: 0.125rem 0.5rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    display: inline-block;
   }
 
   .activity-amount {
diff --git a/src/routes/cospend/payments/+page.svelte b/src/routes/cospend/payments/+page.svelte
index a38508c..e4c5b8f 100644
--- a/src/routes/cospend/payments/+page.svelte
+++ b/src/routes/cospend/payments/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
+  import ProfilePicture from '$lib/components/ProfilePicture.svelte';
 
   export let data;
 
@@ -133,11 +134,14 @@
       {#each payments as payment}
         <div class="payment-card">
           <div class="payment-header">
-            <div class="payment-title">
-              <h3>{payment.title}</h3>
-              <div class="payment-meta">
-                <span class="date">{formatDate(payment.date)}</span>
-                <span class="amount">{formatCurrency(payment.amount)}</span>
+            <div class="payment-title-section">
+              <ProfilePicture username={payment.paidBy} size={40} />
+              <div class="payment-title">
+                <h3>{payment.title}</h3>
+                <div class="payment-meta">
+                  <span class="date">{formatDate(payment.date)}</span>
+                  <span class="amount">{formatCurrency(payment.amount)}</span>
+                </div>
               </div>
             </div>
             {#if payment.image}
@@ -335,6 +339,13 @@
     margin-bottom: 1rem;
   }
 
+  .payment-title-section {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    flex: 1;
+  }
+
   .payment-title h3 {
     margin: 0 0 0.5rem 0;
     color: #333;
diff --git a/src/routes/cospend/payments/view/[id]/+page.svelte b/src/routes/cospend/payments/view/[id]/+page.svelte
index af0df62..162a45f 100644
--- a/src/routes/cospend/payments/view/[id]/+page.svelte
+++ b/src/routes/cospend/payments/view/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
+  import ProfilePicture from '$lib/components/ProfilePicture.svelte';
   
   export let data;
 
@@ -123,10 +124,13 @@
             {#each payment.splits as split}
               <div class="split-item" class:current-user={split.username === data.session.user.nickname}>
                 <div class="split-user">
-                  <span class="username">{split.username}</span>
-                  {#if split.username === data.session.user.nickname}
-                    <span class="you-badge">You</span>
-                  {/if}
+                  <ProfilePicture username={split.username} size={24} />
+                  <div class="user-info">
+                    <span class="username">{split.username}</span>
+                    {#if split.username === data.session.user.nickname}
+                      <span class="you-badge">You</span>
+                    {/if}
+                  </div>
                 </div>
                 <div class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
                   {#if split.amount > 0}
@@ -332,6 +336,12 @@
     gap: 0.5rem;
   }
 
+  .split-user .user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   .username {
     font-weight: 500;
     color: #333;