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