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