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>
2025-09-08 21:50:37 +02:00
parent 815975dba0
commit 712829ad8e
6 changed files with 263 additions and 68 deletions
--- 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,11 +151,14 @@
                {#each payment.splits as split}
                  <div class="split-item" class:current-user={split.username === session?.user?.nickname}>
                    <div class="split-user">
+                      <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}
                        owes {formatCurrency(split.amount)}
@@ -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;
--- a/src/lib/components/ProfilePicture.svelte
+++ 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>
--- a/src/routes/cospend/+layout.svelte
+++ b/src/routes/cospend/+layout.svelte
@@ -38,38 +38,63 @@
    <slot />
  </div>
  
-  {#if showModal}
  <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) {
--- 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,16 +97,21 @@
    {#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}
+            <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-item"
+                  class="activity-bubble"
                  on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
                >
-              <div class="activity-info">
                  <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)}
@@ -118,7 +124,6 @@
                  </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}
@@ -127,8 +132,9 @@
                      </div>
                    {/if}
                  </div>
-              </div>
                </a>
+              </div>
+            </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 {
--- 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,6 +134,8 @@
      {#each payments as payment}
        <div class="payment-card">
          <div class="payment-header">
+            <div class="payment-title-section">
+              <ProfilePicture username={payment.paidBy} size={40} />
              <div class="payment-title">
                <h3>{payment.title}</h3>
                <div class="payment-meta">
@@ -140,6 +143,7 @@
                  <span class="amount">{formatCurrency(payment.amount)}</span>
                </div>
              </div>
+            </div>
            {#if payment.image}
              <img src={payment.image} alt="Receipt" class="receipt-thumb" />
            {/if}
@@ -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;
--- 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,11 +124,14 @@
            {#each payment.splits as split}
              <div class="split-item" class:current-user={split.username === data.session.user.nickname}>
                <div class="split-user">
+                  <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}
                    owes {formatCurrency(split.amount)}
@@ -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;