Add payment categories with emoji icons and image upload support

- Add comprehensive category system: Groceries 🛒, Shopping 🛍️, Travel 🚆, Restaurant 🍽️, Utilities ⚡, Fun 🎉
- Create category utility functions with emoji and display name helpers
- Update Payment model and API validation to support categories
- Add category selectors to payment creation and edit forms
- Display category emojis prominently across all UI components:
  - Dashboard recent activities with category icons and names
  - Payment cards showing category in metadata
  - Payment modals and view pages with category information
- Add image upload/removal functionality to payment edit form
- Maintain responsive design and consistent styling across all components

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/routes/cospend/payments/add/+page.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
+  import { getCategoryOptions } from '$lib/utils/categories';
   
   export let data;
 
@@ -10,6 +11,7 @@
     amount: '',
     paidBy: data.session?.user?.nickname || '',
     date: new Date().toISOString().split('T')[0],
+    category: 'groceries',
     splitMethod: 'equal',
     splits: []
   };
@@ -21,6 +23,8 @@
   let splitAmounts = {};
   let loading = false;
   let error = null;
+  
+  $: categoryOptions = getCategoryOptions();
 
   onMount(() => {
     if (data.session?.user?.nickname) {
@@ -238,6 +242,15 @@
         ></textarea>
       </div>
 
+      <div class="form-group">
+        <label for="category">Category *</label>
+        <select id="category" bind:value={formData.category} required>
+          {#each categoryOptions as option}
+            <option value={option.value}>{option.label}</option>
+          {/each}
+        </select>
+      </div>
+
       <div class="form-row">
         <div class="form-group">
           <label for="amount">Amount (CHF) *</label>