Add profile pictures and improve modal animations

- 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/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;

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;